@servicetitan/anvil2 2.1.0 → 2.3.0

package/dist/{MultiSelectFieldSync-Bc7IphJ7.js → MultiSelectFieldSync-ChDuxvhE.js}

@@ -1,17 +1,17 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-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 { 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-BHDi3oXg.js';
+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-BghhsL2B.js';
 import { c as cx } from './index-SvGbrGuT.js';
-import { B as Button } from './Button-l7pTJdPc.js';
+import { B as Button } from './Button-DrNDkO2f.js';
 import { C as Chip } from './Chip-Bc7jiIJ1.js';
 import { F as Flex } from './Flex-CUtXN-C0.js';
-import { m as mergeRefs } from './useMergeRefs-Dfmtq9cI.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 styles$1 } from './SelectTriggerBase.module-B0NFRlQP.js';
-import { F as FieldMessage } from './FieldMessage-B0LBQl0D.js';
-import { w as warnDeprecatedErrorUsage } from './utils-pudAMGnO.js';
+import { F as FieldMessage } from './FieldMessage-OeP_xSUE.js';
 import { u as useLayoutPropsUtil } from './useLayoutPropsUtil-loxbyklF.js';
 
 import './MultiSelectFieldSync.css';const MultiSelectFieldList = forwardRef(({ selectedOptions, items, virtualize, ...rest }, ref) => {
@@ -80,40 +80,20 @@ const hasMultipleRows = (container) => {
     (child) => child.getBoundingClientRect().top !== firstTop
   );
 };
-const MultiSelectFieldInput = ({
-  placeholder,
-  size,
-  disableClearButton,
-  disableToggleButton,
-  disabled,
-  readOnly,
-  error,
-  onClear,
-  id,
-  inputWrapperRef,
-  htmlInputWrapperProps,
-  inputProps,
-  toggleButtonProps,
-  prefix,
-  suffix,
-  selectedOptions = [],
-  onRemoveOption,
+function useChipLayout({
+  selectedOptionsLength,
   singleRow,
-  maxChips,
-  onWrapperClick
-}) => {
+  maxChips
+}) {
   const rowsRef = useRef(null);
-  const inputRef = useRef(null);
-  const externalRef = inputProps?.ref;
-  const mergedInputRef = mergeRefs([inputRef, externalRef]);
   const [visibleCount, setVisibleCount] = useState(null);
-  const prevSelectedLengthRef = useRef(selectedOptions.length);
+  const prevSelectedLengthRef = useRef(selectedOptionsLength);
   useLayoutEffect(() => {
-    if (prevSelectedLengthRef.current !== selectedOptions.length) {
-      prevSelectedLengthRef.current = selectedOptions.length;
+    if (prevSelectedLengthRef.current !== selectedOptionsLength) {
+      prevSelectedLengthRef.current = selectedOptionsLength;
       setVisibleCount(null);
     }
-  }, [selectedOptions.length]);
+  }, [selectedOptionsLength]);
   useLayoutEffect(() => {
     if (!singleRow || !rowsRef.current) {
       setVisibleCount(null);
@@ -132,10 +112,43 @@ const MultiSelectFieldInput = ({
     if (hasMultipleRows(rowsRef.current) && visibleCount > 0) {
       setVisibleCount(visibleCount - 1);
     }
-  }, [singleRow, selectedOptions.length, visibleCount]);
+  }, [singleRow, selectedOptionsLength, visibleCount]);
   const maxAllowed = maxChips ?? 10;
-  const displayCount = singleRow && visibleCount !== null ? Math.min(visibleCount, maxAllowed) : Math.min(selectedOptions.length, maxAllowed);
-  const hiddenCount = selectedOptions.length - displayCount;
+  const displayCount = singleRow && visibleCount !== null ? Math.min(visibleCount, maxAllowed) : Math.min(selectedOptionsLength, maxAllowed);
+  const hiddenCount = selectedOptionsLength - displayCount;
+  return { rowsRef, displayCount, hiddenCount };
+}
+
+const MultiSelectFieldInput = ({
+  placeholder,
+  size,
+  disableClearButton,
+  disableToggleButton,
+  disabled,
+  readOnly,
+  error,
+  onClear,
+  id,
+  inputWrapperRef,
+  htmlInputWrapperProps,
+  inputProps,
+  toggleButtonProps,
+  prefix,
+  suffix,
+  selectedOptions = [],
+  onRemoveOption,
+  singleRow,
+  maxChips,
+  onWrapperClick
+}) => {
+  const inputRef = useRef(null);
+  const externalRef = inputProps?.ref;
+  const mergedInputRef = mergeRefs([inputRef, externalRef]);
+  const { rowsRef, displayCount, hiddenCount } = useChipLayout({
+    selectedOptionsLength: selectedOptions.length,
+    singleRow,
+    maxChips
+  });
   const inputWrapperClassNames = cx(styles["input-wrapper"], {
     [styles["small"]]: size === "small",
     [styles["large"]]: size === "large",
@@ -251,6 +264,34 @@ 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,
@@ -268,20 +309,17 @@ const useComboMultiple = ({
   virtualize = false
 }) => {
   const [inputValue, setInputValue] = useState("");
-  const { pinnedSections } = usePinnedOptions(pinned, inputValue);
-  const { ungroupedItems, groupSections: rawGroupSections } = useGroupedOptions(
-    options,
-    groupToString
-  );
-  const groupSections = useMemo(() => {
-    if (groupSorter && rawGroupSections.length > 0) {
-      return sortGroupSections(rawGroupSections, groupSorter);
+  const { pinnedSections, ungroupedItems, groupSections } = useProcessedOptions(
+    {
+      options,
+      pinned,
+      searchValue: inputValue,
+      groupToString,
+      groupSorter
     }
-    return rawGroupSections;
-  }, [rawGroupSections, groupSorter]);
-  const { downshiftItems, sectionsMeta } = useMemo(() => {
+  );
+  const bulkActionItems = useMemo(() => {
     const items = [];
-    const meta = [];
     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) {
@@ -306,86 +344,33 @@ const useComboMultiple = ({
         checkState: selectAll.checkState
       });
     }
-    pinnedSections.forEach((section) => {
-      const startIndex = items.length;
-      section.options.forEach((option) => {
-        items.push({
-          id: option.id + "-pinned",
-          type: "pinned-option",
-          original: option,
-          disabled: option.disabled ?? false
-        });
-      });
-      const endIndex = items.length;
-      if (endIndex > startIndex || section.loading) {
-        meta.push({
-          type: "pinned",
-          label: section.label,
-          startIndex,
-          endIndex,
-          loading: section.loading
-        });
-      }
-    });
-    groupSections.forEach((section) => {
-      const startIndex = items.length;
-      section.options.forEach((option) => {
-        items.push({
-          id: option.id,
-          type: "grouped-option",
-          original: option,
-          disabled: option.disabled ?? false
-        });
-      });
-      const endIndex = items.length;
-      if (endIndex > startIndex) {
-        meta.push({
-          type: "group",
-          label: section.label,
-          startIndex,
-          endIndex
-        });
-      }
-    });
-    ungroupedItems.forEach((item) => {
-      items.push({
-        id: item.id,
-        type: "option",
-        original: item.original,
-        disabled: item.disabled ?? false
-      });
-    });
-    return { downshiftItems: items, sectionsMeta: meta };
+    return items;
   }, [
-    groupSections,
+    inputValue,
     ungroupedItems,
+    groupSections,
     pinnedSections,
-    selectAll,
     selectFiltered,
-    inputValue,
+    selectAll,
     loading
   ]);
+  const { downshiftItems, sectionsMeta } = useMemo(
+    () => buildDownshiftItems({
+      prefixItems: bulkActionItems,
+      pinnedSections,
+      groupSections,
+      ungroupedItems
+    }),
+    [bulkActionItems, pinnedSections, groupSections, ungroupedItems]
+  );
   const { ref: wrapperDivRef, environment } = useDownshiftEnvironment();
   const highlightChangeTypeRef = useRef("");
-  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]
-  );
+  const { handleItemClick } = useToggleSelection({
+    options,
+    pinnedSections,
+    selectedOptions,
+    onSelectedOptionsChange
+  });
   const {
     isOpen,
     highlightedIndex,
@@ -463,7 +448,7 @@ const useComboMultiple = ({
     itemToString(item) {
       return item?.original.label ?? "";
     },
-    stateReducer: (state, actionAndChanges) => stateReducer(state, actionAndChanges, displayAs)
+    stateReducer: (state, actionAndChanges) => stateReducer$1(state, actionAndChanges, displayAs)
   });
   return {
     inputValue: downshiftInputValue,
@@ -484,7 +469,7 @@ const useComboMultiple = ({
     selectedOptions
   };
 };
-function stateReducer(state, actionAndChanges, displayAs) {
+function stateReducer$1(state, actionAndChanges, displayAs) {
   const { type, changes } = actionAndChanges;
   switch (type) {
     case useCombobox.stateChangeTypes.InputBlur:
@@ -537,113 +522,59 @@ function stateReducer(state, actionAndChanges, displayAs) {
   }
 }
 
-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",
-    lazy,
-    loadOptions: loadOptionsProp,
-    label,
-    labelNode,
-    hideLabel,
-    placeholder,
-    debounceMs = 200,
-    onSelectedOptionsChange,
-    cache,
-    size,
-    error,
-    hint,
-    description,
-    required,
-    disabled,
-    readOnly,
-    prefix,
-    suffix,
-    selectAll,
-    selectFiltered,
-    singleRow,
-    maxChips,
-    warning,
-    pinned,
-    onSearchChange,
-    className,
-    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();
-  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;
-  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 {
-    options,
-    loading,
-    loadingMore,
-    hasMore,
-    loadOptions,
-    loadMore,
-    clearCache
-  } = useSelectFieldLoading(loadingHookConfig);
-  useImperativeHandle(ref, () => ({ clearCache }), [clearCache]);
+const MultiSelectFieldComboboxMode = ({
+  id,
+  helperUid,
+  selectedOptions,
+  onSelectedOptionsChange,
+  displayAs,
+  isDisabledOrReadOnly,
+  disabled,
+  readOnly,
+  required,
+  placeholder,
+  size,
+  error,
+  hasHelperText,
+  disableClearButton,
+  prefix,
+  suffix,
+  label,
+  labelNode,
+  hideLabel,
+  hint,
+  errorMessages,
+  warning,
+  description,
+  className,
+  style,
+  layoutStyles,
+  pinned,
+  groupToString,
+  groupSorter,
+  virtualize,
+  options,
+  loading,
+  loadingMore,
+  hasMore,
+  loadOptions,
+  loadMore,
+  initialLoad,
+  initialLoadPerformed,
+  setInitialLoadPerformed,
+  inputWrapperRef,
+  debounceMs,
+  selectAll,
+  selectFiltered,
+  singleRow,
+  maxChips,
+  onSearchChange,
+  handleRemoveOption,
+  handleClear
+}) => {
   const debouncedOptionLoader = useDebouncedCallback((inputValue2) => {
     loadOptions(inputValue2, { initial: true });
   }, debounceMs);
-  const handleRemoveOption = useCallback(
-    (option) => {
-      onSelectedOptionsChange(
-        selectedOptions.filter((opt) => opt.id !== option.id)
-      );
-    },
-    [selectedOptions, onSelectedOptionsChange]
-  );
-  const handleClear = useCallback(() => {
-    onSelectedOptionsChange([]);
-  }, [onSelectedOptionsChange]);
   const {
     isOpen,
     getToggleButtonProps,
@@ -670,19 +601,8 @@ const MultiSelectField = forwardRef((propsWithLayout, ref) => {
     groupToString,
     groupSorter,
     selectedOptions,
-    selectAll: selectAll ? {
-      label: selectAll.label ?? "Select All",
-      onClick: selectAll.onClick,
-      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,
+    selectAll,
+    selectFiltered,
     async onIsOpenChange(changes) {
       if (initialLoad === "open" && !initialLoadPerformed && changes.isOpen) {
         await loadOptions("", { initial: true });
@@ -702,11 +622,10 @@ const MultiSelectField = forwardRef((propsWithLayout, ref) => {
       }
     };
     performInitialLoad();
-  }, [loadOptions, initialLoadPerformed, initialLoad]);
+  }, [loadOptions, initialLoadPerformed, initialLoad, setInitialLoadPerformed]);
   const handleLoadMore = async () => {
     await loadMore(inputValue);
   };
-  const disableClearButton = selectedOptions.length === 0 || isDisabledOrReadOnly;
   if (displayAs === "dialog") {
     return /* @__PURE__ */ jsxs(
       "div",
@@ -850,7 +769,6 @@ const MultiSelectField = forwardRef((propsWithLayout, ref) => {
             disableClearButton,
             onClear: handleClear,
             id: `${id}-input`,
-            popoverTarget: `${id}-popover`,
             inputWrapperRef,
             size,
             error: !!error,
@@ -904,16 +822,729 @@ 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 MultiSelectFieldTrigger = ({
+  placeholder,
+  size,
+  disableClearButton,
+  disabled,
+  readOnly,
+  error,
+  onClear,
+  id,
+  inputWrapperRef,
+  toggleButtonProps,
+  prefix,
+  suffix,
+  selectedOptions = [],
+  onRemoveOption,
+  singleRow,
+  maxChips,
+  popoverTarget
+}) => {
+  const { ref: downshiftRef, ...restToggleButtonProps } = toggleButtonProps ?? {};
+  const triggerRef = useRef(null);
+  const mergedRef = useMergeRefs([inputWrapperRef, downshiftRef, triggerRef]);
+  const { rowsRef, displayCount, hiddenCount } = useChipLayout({
+    selectedOptionsLength: selectedOptions.length,
+    singleRow,
+    maxChips
+  });
+  const inputWrapperClassNames = cx(styles["input-wrapper"], {
+    [styles["small"]]: size === "small",
+    [styles["large"]]: size === "large",
+    [styles["no-clear-button"]]: disableClearButton,
+    [styles["disabled"]]: disabled || readOnly
+  });
+  return /* @__PURE__ */ jsxs("div", { style: { position: "relative" }, children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: mergedRef,
+        ...restToggleButtonProps,
+        popovertarget: popoverTarget,
+        id,
+        className: cx(inputWrapperClassNames, restToggleButtonProps?.className),
+        children: [
+          prefix ? /* @__PURE__ */ jsx("div", { className: styles["prefix"], children: prefix }) : null,
+          /* @__PURE__ */ jsxs("div", { className: styles["rows-wrapper"], ref: rowsRef, children: [
+            selectedOptions.length > 0 && onRemoveOption ? selectedOptions.slice(0, displayCount).map((option, index) => /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: styles["chip-wrapper"],
+                children: /* @__PURE__ */ jsx(
+                  Chip,
+                  {
+                    label: option.label,
+                    onClose: disabled || readOnly ? void 0 : (e) => {
+                      e.stopPropagation();
+                      onRemoveOption(option);
+                      triggerRef.current?.focus();
+                    },
+                    className: styles["chip"],
+                    title: option.label
+                  }
+                )
+              },
+              `selected-item-${option.id}-${index}`
+            )) : null,
+            hiddenCount > 0 ? /* @__PURE__ */ jsx("div", { className: styles["chip-wrapper"], children: /* @__PURE__ */ jsx(
+              Chip,
+              {
+                label: `+${hiddenCount}`,
+                className: styles["chip"],
+                title: selectedOptions.slice(displayCount).map((option) => option.label).join(", ")
+              }
+            ) }) : null,
+            selectedOptions.length === 0 ? /* @__PURE__ */ jsxs(Flex, { className: styles["input-flex"], alignItems: "center", children: [
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: cx(styles["input"], {
+                    [styles["error"]]: error
+                  }),
+                  children: placeholder
+                }
+              ),
+              suffix ? /* @__PURE__ */ jsx("div", { className: styles["suffix"], children: suffix }) : null
+            ] }) : null
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: styles["buttons-wrapper"], children: /* @__PURE__ */ jsx("div", { className: styles["toggle-button-wrapper"], children: /* @__PURE__ */ jsx(
+            Button,
+            {
+              icon: SvgChevronRight,
+              "aria-label": "toggle menu",
+              appearance: "ghost",
+              size: "small",
+              disabled,
+              tabIndex: -1,
+              className: styles["toggle-button"]
+            }
+          ) }) })
+        ]
+      }
+    ),
+    disableClearButton ? null : /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: styles["buttons-wrapper"],
+        style: { insetInlineEnd: "2rem" },
+        children: /* @__PURE__ */ jsx("div", { className: styles["close-button-wrapper"], children: /* @__PURE__ */ jsx(
+          Button,
+          {
+            icon: SvgClose,
+            "aria-label": "clear selection",
+            appearance: "ghost",
+            size: "small",
+            className: styles["close-button"],
+            onClick: (e) => {
+              e.stopPropagation();
+              onClear?.();
+            }
+          }
+        ) })
+      }
+    )
+  ] });
+};
+MultiSelectFieldTrigger.displayName = "MultiSelectFieldTrigger";
+
+const useSelectModeMultiple = ({
+  options,
+  pinned,
+  groupToString,
+  groupSorter,
+  selectAll,
+  selectedOptions,
+  onSelectedOptionsChange,
+  onIsOpenChange,
+  displayAs = "popover",
+  disabled,
+  virtualize = false
+}) => {
+  const { pinnedSections, ungroupedItems, groupSections } = useProcessedOptions(
+    {
+      options,
+      pinned,
+      searchValue: "",
+      groupToString,
+      groupSorter
+    }
+  );
+  const bulkActionItems = useMemo(() => {
+    const items = [];
+    if (selectAll) {
+      items.push({
+        id: "select-all",
+        type: "select-all",
+        original: {
+          id: "select-all",
+          label: selectAll.label ?? "Select All"
+        },
+        checkState: selectAll.checkState
+      });
+    }
+    return items;
+  }, [selectAll]);
+  const { downshiftItems, sectionsMeta } = useMemo(
+    () => buildDownshiftItems({
+      prefixItems: bulkActionItems,
+      pinnedSections,
+      groupSections,
+      ungroupedItems
+    }),
+    [bulkActionItems, pinnedSections, groupSections, ungroupedItems]
+  );
+  const { ref: wrapperDivRef, environment } = useDownshiftEnvironment();
+  const { handleItemClick } = useToggleSelection({
+    options,
+    pinnedSections,
+    selectedOptions,
+    onSelectedOptionsChange
+  });
+  const {
+    isOpen,
+    highlightedIndex,
+    getToggleButtonProps,
+    getLabelProps,
+    getMenuProps,
+    getItemProps,
+    closeMenu,
+    openMenu
+  } = useSelect({
+    isItemDisabled: (item) => {
+      if (!item) return false;
+      return (disabled || item.disabled) ?? false;
+    },
+    environment,
+    selectedItem: null,
+    onSelectedItemChange: ({
+      selectedItem: si
+    }) => {
+      if (si) {
+        if (si.type === "select-all") {
+          selectAll?.onClick();
+        } else if (si.type === "option" || si.type === "pinned-option" || si.type === "grouped-option") {
+          handleItemClick(si.original);
+        }
+      }
+    },
+    onIsOpenChange,
+    items: downshiftItems,
+    itemToString(item) {
+      return item?.original.label ?? "";
+    },
+    stateReducer: (state, actionAndChanges) => stateReducer(state, actionAndChanges, displayAs),
+    ...virtualize && { scrollIntoView: () => {
+    } }
+  });
+  return {
+    wrapperDivRef,
+    getToggleButtonProps,
+    getLabelProps,
+    getMenuProps,
+    getItemProps,
+    highlightedIndex,
+    isOpen,
+    downshiftItems,
+    sectionsMeta,
+    closeMenu,
+    openMenu,
+    toggleMenu: () => isOpen ? closeMenu() : openMenu(),
+    selectedOptions
+  };
+};
+function stateReducer(state, actionAndChanges, displayAs) {
+  const { type, changes } = actionAndChanges;
+  switch (type) {
+    case useSelect.stateChangeTypes.ToggleButtonBlur:
+      if (displayAs === "dialog" && state.isOpen) {
+        return { ...changes, isOpen: state.isOpen, selectedItem: null };
+      }
+      return { ...changes, selectedItem: null };
+    case useSelect.stateChangeTypes.ToggleButtonKeyDownEnter:
+    case useSelect.stateChangeTypes.ToggleButtonKeyDownSpaceButton:
+    case useSelect.stateChangeTypes.ItemClick:
+      return {
+        ...changes,
+        isOpen: state.isOpen,
+        highlightedIndex: state.highlightedIndex
+      };
+    case useSelect.stateChangeTypes.ToggleButtonKeyDownEscape:
+    case useSelect.stateChangeTypes.FunctionCloseMenu:
+      return changes;
+    case useSelect.stateChangeTypes.ToggleButtonClick:
+      if (displayAs === "dialog" && state.isOpen) {
+        return { ...changes, isOpen: state.isOpen };
+      }
+      return changes;
+    default:
+      return changes;
+  }
+}
+
+const MultiSelectFieldSelectMode = ({
+  id,
+  helperUid,
+  selectedOptions,
+  onSelectedOptionsChange,
+  displayAs,
+  isDisabledOrReadOnly,
+  disabled,
+  readOnly,
+  required,
+  placeholder,
+  size,
+  error,
+  hasHelperText,
+  disableClearButton,
+  prefix,
+  suffix,
+  label,
+  labelNode,
+  hideLabel,
+  hint,
+  errorMessages,
+  warning,
+  description,
+  className,
+  style,
+  layoutStyles,
+  pinned,
+  groupToString,
+  groupSorter,
+  virtualize,
+  options,
+  loading,
+  loadingMore,
+  hasMore,
+  loadOptions,
+  loadMore,
+  initialLoad,
+  initialLoadPerformed,
+  setInitialLoadPerformed,
+  inputWrapperRef,
+  selectAll,
+  singleRow,
+  maxChips,
+  handleRemoveOption,
+  handleClear
+}) => {
+  const {
+    isOpen,
+    getToggleButtonProps,
+    getLabelProps,
+    getMenuProps,
+    wrapperDivRef,
+    highlightedIndex,
+    getItemProps,
+    downshiftItems,
+    sectionsMeta,
+    closeMenu
+  } = useSelectModeMultiple({
+    displayAs,
+    onSelectedOptionsChange,
+    disabled: isDisabledOrReadOnly,
+    options,
+    pinned,
+    virtualize,
+    groupToString,
+    groupSorter,
+    selectedOptions,
+    selectAll,
+    async onIsOpenChange(changes) {
+      if (initialLoad === "open" && !initialLoadPerformed && changes.isOpen) {
+        await loadOptions("", { initial: true });
+        setInitialLoadPerformed(true);
+      }
+    }
+  });
+  useEffect(() => {
+    const performInitialLoad = async () => {
+      if (initialLoad === "immediate" && !initialLoadPerformed) {
+        await loadOptions("", { initial: true });
+        setInitialLoadPerformed(true);
+      }
+    };
+    performInitialLoad();
+  }, [loadOptions, initialLoadPerformed, initialLoad, setInitialLoadPerformed]);
+  const handleLoadMore = async () => {
+    await loadMore("");
+  };
+  const toggleButtonProps = getToggleButtonProps({
+    disabled: !!disabled,
+    "aria-required": required ? true : void 0,
+    "aria-describedby": hasHelperText ? helperUid : void 0,
+    "aria-invalid": error ? true : void 0
+  });
+  if (displayAs === "dialog") {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: className ? `${styles$1["search-field"]} ${className}` : styles$1["search-field"],
+        style: { ...layoutStyles, ...style },
+        ref: wrapperDivRef,
+        children: [
+          /* @__PURE__ */ jsx(
+            SelectFieldLabel,
+            {
+              label,
+              labelNode,
+              hideLabel,
+              getLabelProps,
+              required
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            MultiSelectFieldTrigger,
+            {
+              disabled,
+              readOnly,
+              placeholder,
+              disableClearButton,
+              toggleButtonProps,
+              onClear: handleClear,
+              id: `${id}-trigger`,
+              inputWrapperRef,
+              size,
+              error: !!error,
+              prefix,
+              suffix,
+              selectedOptions,
+              onRemoveOption: handleRemoveOption,
+              singleRow,
+              maxChips
+            }
+          ),
+          hasHelperText ? /* @__PURE__ */ jsx(
+            FieldMessage,
+            {
+              id: helperUid,
+              hint,
+              error: errorMessages,
+              warning,
+              description
+            }
+          ) : null,
+          /* @__PURE__ */ jsx(
+            FieldDialog,
+            {
+              id: `${id}-dialog`,
+              isOpen,
+              onClose: closeMenu,
+              title: label,
+              children: /* @__PURE__ */ jsx(
+                MultiSelectFieldList,
+                {
+                  isOpen: true,
+                  items: downshiftItems,
+                  getMenuProps: (opts) => getMenuProps({
+                    ...opts,
+                    style: { ...opts?.style, outline: "none" },
+                    onKeyDown: toggleButtonProps.onKeyDown,
+                    tabIndex: 0,
+                    "aria-activedescendant": toggleButtonProps["aria-activedescendant"]
+                  }),
+                  getItemProps,
+                  highlightedIndex,
+                  selectedOptions,
+                  hasMore,
+                  onLoadMore: handleLoadMore,
+                  loading,
+                  loadingMore,
+                  disabled: isDisabledOrReadOnly,
+                  sectionsMeta,
+                  virtualize
+                }
+              )
+            }
+          )
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: className ? `${styles$1["search-field"]} ${className}` : styles$1["search-field"],
+      style: { ...layoutStyles, ...style },
+      children: [
+        /* @__PURE__ */ jsx(
+          SelectFieldLabel,
+          {
+            label,
+            labelNode,
+            hideLabel,
+            getLabelProps,
+            required
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          MultiSelectFieldTrigger,
+          {
+            disabled,
+            readOnly,
+            placeholder,
+            disableClearButton,
+            toggleButtonProps,
+            onClear: handleClear,
+            id: `${id}-trigger`,
+            popoverTarget: `${id}-popover`,
+            inputWrapperRef,
+            size,
+            error: !!error,
+            prefix,
+            suffix,
+            selectedOptions,
+            onRemoveOption: handleRemoveOption,
+            singleRow,
+            maxChips
+          }
+        ),
+        hasHelperText ? /* @__PURE__ */ jsx(
+          FieldMessage,
+          {
+            id: helperUid,
+            hint,
+            error: errorMessages,
+            warning,
+            description
+          }
+        ) : null,
+        /* @__PURE__ */ jsx(
+          FieldPopover,
+          {
+            id: `${id}-popover`,
+            referenceElement: inputWrapperRef,
+            open: isOpen && displayAs === "popover",
+            onClickOutside: closeMenu,
+            children: /* @__PURE__ */ jsx(
+              MultiSelectFieldList,
+              {
+                isOpen,
+                items: downshiftItems,
+                getMenuProps,
+                getItemProps,
+                highlightedIndex,
+                selectedOptions,
+                hasMore,
+                onLoadMore: handleLoadMore,
+                loading,
+                loadingMore,
+                disabled: isDisabledOrReadOnly,
+                sectionsMeta,
+                virtualize
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+};
+
+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",
+    lazy,
+    loadOptions: loadOptionsProp,
+    label,
+    labelNode,
+    hideLabel,
+    placeholder,
+    debounceMs = 200,
+    onSelectedOptionsChange,
+    cache,
+    size,
+    error,
+    hint,
+    description,
+    required,
+    disabled,
+    readOnly,
+    prefix,
+    suffix,
+    selectAll: selectAllProp,
+    selectFiltered: selectFilteredProp,
+    singleRow,
+    maxChips,
+    warning,
+    pinned,
+    onSearchChange,
+    className,
+    style,
+    virtualize,
+    disableSearch
+  } = 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();
+  warnDeprecatedErrorUsage("MultiSelectField", error);
+  if (disableSearch && selectFilteredProp) {
+    warnOnce(
+      "MultiSelectField: `selectFiltered` has no effect when `disableSearch` is true because there is no search input to produce filtered results."
+    );
+  }
+  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 {
+    options,
+    loading,
+    loadingMore,
+    hasMore,
+    loadOptions,
+    loadMore,
+    clearCache
+  } = useSelectFieldLoading(loadingHookConfig);
+  useImperativeHandle(
+    ref,
+    () => ({
+      clearCache,
+      invalidate: () => {
+        clearCache();
+        setInitialLoadPerformed(false);
+      }
+    }),
+    [clearCache]
+  );
+  const handleRemoveOption = useCallback(
+    (option) => {
+      onSelectedOptionsChange(
+        selectedOptions.filter((opt) => opt.id !== option.id)
+      );
+    },
+    [selectedOptions, onSelectedOptionsChange]
+  );
+  const handleClear = useCallback(() => {
+    onSelectedOptionsChange([]);
+  }, [onSelectedOptionsChange]);
+  const disableClearButton = selectedOptions.length === 0 || isDisabledOrReadOnly;
+  const selectAll = selectAllProp ? {
+    label: selectAllProp.label ?? "Select All",
+    onClick: selectAllProp.onClick,
+    checkState: selectAllProp.checkState === true ? "checked" : selectAllProp.checkState === false ? "unchecked" : selectAllProp.checkState ?? "indeterminate"
+  } : void 0;
+  const selectFiltered = selectFilteredProp ? (searchValue) => {
+    const config = selectFilteredProp(searchValue);
+    return {
+      label: config.label,
+      onClick: config.onClick,
+      checkState: config.checkState === true ? "checked" : config.checkState === false ? "unchecked" : config.checkState ?? "indeterminate"
+    };
+  } : void 0;
+  const baseProps = {
+    id,
+    helperUid,
+    selectedOptions,
+    onSelectedOptionsChange,
+    displayAs,
+    isDisabledOrReadOnly,
+    disabled,
+    readOnly,
+    required,
+    placeholder,
+    size,
+    error,
+    hasHelperText,
+    disableClearButton,
+    prefix,
+    suffix,
+    label,
+    labelNode,
+    hideLabel,
+    hint,
+    errorMessages,
+    warning,
+    description,
+    className,
+    style,
+    layoutStyles,
+    pinned,
+    groupToString,
+    groupSorter,
+    virtualize,
+    options,
+    loading,
+    loadingMore,
+    hasMore,
+    loadOptions,
+    loadMore,
+    initialLoad,
+    initialLoadPerformed,
+    setInitialLoadPerformed,
+    inputWrapperRef,
+    selectAll,
+    singleRow,
+    maxChips,
+    handleRemoveOption,
+    handleClear
+  };
+  if (disableSearch) {
+    return /* @__PURE__ */ jsx(MultiSelectFieldSelectMode, { ...baseProps });
+  }
+  const comboboxProps = {
+    ...baseProps,
+    debounceMs,
+    selectFiltered,
+    onSearchChange
+  };
+  return /* @__PURE__ */ jsx(MultiSelectFieldComboboxMode, { ...comboboxProps });
+});
+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 {
@@ -981,9 +1612,18 @@ const MultiSelectFieldSync = (props) => {
       };
     };
   }, [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,
@@ -997,4 +1637,4 @@ const MultiSelectFieldSync = (props) => {
 };
 
 export { MultiSelectField as M, MultiSelectFieldSync as a };
-//# sourceMappingURL=MultiSelectFieldSync-Bc7IphJ7.js.map
+//# sourceMappingURL=MultiSelectFieldSync-ChDuxvhE.js.map