@servicetitan/anvil2 1.50.0 → 1.50.2

package/dist/MultiSelectFieldSync-B3HNQf7R.js

@@ -0,0 +1,873 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { useMemo, useRef, useState, useLayoutEffect, useCallback, forwardRef, useId, useImperativeHandle, useEffect } from 'react';
+import { u as useDownshiftEnvironment, a as useCombobox, m as matchSorter } from './match-sorter.esm-NrKOPPde.js';
+import { S as Spinner } from './Spinner-xEFwsq8_.js';
+import { B as Button } from './Button-92_FKAyV.js';
+import { s as styles$1, S as SelectFieldListItem, I as InView, u as useAdaptiveView, D as DEFAULT_PAGE_SIZE, a as useSelectFieldLoading, b as useDebouncedCallback, c as SelectFieldLabel, F as FieldDialog, d as FieldPopover } from './FieldDialog-BHgkQOhh.js';
+import { c as cx } from './index-tZvMCc77.js';
+import { T as Text } from './Text-kPA-VzsB.js';
+import { S as SrOnly } from './SrOnly-CTsYSuby.js';
+import { C as Chip } from './Chip-UqdorCE2.js';
+import { F as Flex } from './Flex-CjPHUTeq.js';
+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$2 } from './SelectTriggerBase.module-B0NFRlQP.js';
+import { u as useLayoutPropsUtil } from './useLayoutPropsUtil-BlIWftBb.js';
+import { F as FieldMessage } from './FieldMessage-DdCUxZz-.js';
+
+import './MultiSelectFieldSync.css';const MultiSelectFieldList = ({
+  isOpen,
+  items,
+  getMenuProps,
+  getItemProps,
+  highlightedIndex,
+  selectedOptions,
+  hasMore,
+  onLoadMore,
+  loading,
+  loadingMore,
+  disableAutoLoadMore,
+  disabled,
+  className,
+  style
+}) => {
+  const handleLoaderVisibilityChange = (visible) => {
+    if (visible && !disableAutoLoadMore) {
+      onLoadMore();
+    }
+  };
+  const selectedIds = useMemo(
+    () => new Set(selectedOptions.map((opt) => opt.id)),
+    [selectedOptions]
+  );
+  const getCheckedState = (item) => {
+    if (item.type === "select-all") {
+      return item.checkState ?? "indeterminate";
+    }
+    return selectedIds.has(item.id) ? "checked" : "unchecked";
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...getMenuProps({
+        className: cx(styles$1["scroller"], className),
+        style
+      }),
+      children: [
+        /* @__PURE__ */ jsx("ul", { className: cx(styles$1["select-field-list"]), children: isOpen && /* @__PURE__ */ jsx(Fragment, { children: loading ? /* @__PURE__ */ jsx("div", { className: styles$1["empty"], children: /* @__PURE__ */ jsx(Spinner, { size: "medium" }) }) : items.length > 0 ? items.map((item, index) => /* @__PURE__ */ jsx(
+          SelectFieldListItem,
+          {
+            item,
+            index,
+            getItemProps,
+            selectionType: "multiple",
+            checked: getCheckedState(item),
+            highlighted: highlightedIndex === index,
+            disabled: (disabled || item.disabled) ?? false
+          },
+          item.id
+        )) : /* @__PURE__ */ jsx("div", { className: styles$1["empty"], children: /* @__PURE__ */ jsx(Text, { subdued: true, size: "small", children: "No match found" }) }) }) }),
+        loadingMore ? /* @__PURE__ */ jsxs("div", { className: styles$1["load-more"], children: [
+          /* @__PURE__ */ jsx(Spinner, { size: "small" }),
+          /* @__PURE__ */ jsx(SrOnly, { children: "Loading more..." })
+        ] }) : hasMore && !loading ? /* @__PURE__ */ jsx(
+          InView,
+          {
+            onVisibilityChange: handleLoaderVisibilityChange,
+            rootMargin: "0px 0px -100px 0px",
+            children: /* @__PURE__ */ jsx("div", { className: styles$1["load-more"], children: /* @__PURE__ */ jsx(Button, { appearance: "secondary", size: "small", onClick: onLoadMore, children: "Load more" }) })
+          }
+        ) : null
+      ]
+    }
+  );
+};
+MultiSelectFieldList.displayName = "MultiSelectFieldList";
+
+const input = "_input_1t7vf_2";
+const prefix = "_prefix_1t7vf_52";
+const suffix = "_suffix_1t7vf_53";
+const chip = "_chip_1t7vf_98";
+const small = "_small_1t7vf_193";
+const large = "_large_1t7vf_196";
+const disabled = "_disabled_1t7vf_202";
+const error = "_error_1t7vf_214";
+const styles = {
+	"input-wrapper": "_input-wrapper_1t7vf_2",
+	"buttons-wrapper": "_buttons-wrapper_1t7vf_11",
+	input: input,
+	"toggle-button-wrapper": "_toggle-button-wrapper_1t7vf_38",
+	"close-button-wrapper": "_close-button-wrapper_1t7vf_39",
+	prefix: prefix,
+	suffix: suffix,
+	"no-clear-button": "_no-clear-button_1t7vf_79",
+	"no-toggle-button": "_no-toggle-button_1t7vf_82",
+	"rows-wrapper": "_rows-wrapper_1t7vf_88",
+	"chip-wrapper": "_chip-wrapper_1t7vf_98",
+	chip: chip,
+	"input-flex": "_input-flex_1t7vf_108",
+	"close-button": "_close-button_1t7vf_39",
+	"toggle-button": "_toggle-button_1t7vf_38",
+	small: small,
+	large: large,
+	disabled: disabled,
+	error: error};
+
+const hasMultipleRows = (container) => {
+  const children = Array.from(container.children);
+  if (children.length <= 1) return false;
+  const firstTop = children[0].getBoundingClientRect().top;
+  return children.some(
+    (child) => child.getBoundingClientRect().top !== firstTop
+  );
+};
+const MultiSelectFieldInput = ({
+  placeholder,
+  size,
+  disableClearButton,
+  disableToggleButton,
+  disabled,
+  readOnly,
+  error,
+  onClear,
+  id,
+  inputWrapperRef,
+  htmlInputWrapperProps,
+  inputProps,
+  toggleButtonProps,
+  prefix,
+  suffix,
+  selectedOptions = [],
+  onRemoveOption,
+  singleRow,
+  maxChips,
+  onWrapperClick
+}) => {
+  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);
+  useLayoutEffect(() => {
+    if (prevSelectedLengthRef.current !== selectedOptions.length) {
+      prevSelectedLengthRef.current = selectedOptions.length;
+      setVisibleCount(null);
+    }
+  }, [selectedOptions.length]);
+  useLayoutEffect(() => {
+    if (!singleRow || !rowsRef.current) {
+      setVisibleCount(null);
+      return;
+    }
+    if (visibleCount === null) {
+      if (hasMultipleRows(rowsRef.current)) {
+        const firstRowTop = rowsRef.current.children[0]?.getBoundingClientRect().top;
+        const firstRowCount = Array.from(rowsRef.current.children).filter(
+          (c) => c.getBoundingClientRect().top === firstRowTop
+        ).length;
+        setVisibleCount(Math.max(firstRowCount - 1, 0));
+      }
+      return;
+    }
+    if (hasMultipleRows(rowsRef.current) && visibleCount > 0) {
+      setVisibleCount(visibleCount - 1);
+    }
+  }, [singleRow, selectedOptions.length, 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 inputWrapperClassNames = cx(styles["input-wrapper"], {
+    [styles["small"]]: size === "small",
+    [styles["large"]]: size === "large",
+    [styles["no-clear-button"]]: disableClearButton,
+    [styles["no-toggle-button"]]: disableToggleButton,
+    [styles["disabled"]]: disabled || readOnly
+  });
+  const handleInputKeyDown = (e) => {
+    if (e.key === "Backspace" && !inputProps?.value && selectedOptions.length > 0 && onRemoveOption && !disabled && !readOnly) {
+      onRemoveOption(selectedOptions[selectedOptions.length - 1]);
+    }
+    if (inputProps?.onKeyDown) {
+      inputProps.onKeyDown(e);
+    }
+  };
+  const handleWrapperClick = (e) => {
+    const target = e.target;
+    if (target.closest("button") || target.tagName === "INPUT") {
+      return;
+    }
+    onWrapperClick?.(e);
+    inputRef.current?.focus();
+  };
+  return (
+    // eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events -- Click-to-focus container; Despite the disabled rules, this remains accessible. Keyboard interaction is provided by the input and nested buttons are filtered out in the handler.
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: inputWrapperRef,
+        ...htmlInputWrapperProps,
+        className: cx(inputWrapperClassNames, htmlInputWrapperProps?.className),
+        onClick: handleWrapperClick,
+        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 : () => onRemoveOption(option),
+                    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,
+            /* @__PURE__ */ jsxs(Flex, { className: styles["input-flex"], alignItems: "center", children: [
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  id,
+                  placeholder,
+                  disabled,
+                  readOnly,
+                  ...inputProps,
+                  ref: mergedInputRef,
+                  onKeyDown: handleInputKeyDown,
+                  className: cx(styles["input"], inputProps?.className, {
+                    [styles["error"]]: error
+                  })
+                }
+              ),
+              suffix ? /* @__PURE__ */ jsx("div", { className: styles["suffix"], children: suffix }) : null
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: styles["buttons-wrapper"], children: [
+            disableClearButton ? null : /* @__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: () => {
+                  onClear?.();
+                }
+              }
+            ) }),
+            disableToggleButton ? null : /* @__PURE__ */ jsx("div", { className: styles["toggle-button-wrapper"], children: /* @__PURE__ */ jsx(
+              Button,
+              {
+                icon: SvgChevronRight,
+                "aria-label": "toggle menu",
+                appearance: "ghost",
+                size: "small",
+                disabled,
+                ...toggleButtonProps,
+                className: cx(
+                  styles["toggle-button"],
+                  toggleButtonProps?.className
+                )
+              }
+            ) })
+          ] })
+        ]
+      }
+    )
+  );
+};
+MultiSelectFieldInput.displayName = "MultiSelectFieldInput";
+
+const useComboMultiple = ({
+  options,
+  pinnedOptions,
+  selectAll,
+  selectedOptions,
+  onSelectedOptionsChange,
+  onInputValueChange,
+  onIsOpenChange,
+  displayAs = "popover",
+  disabled
+}) => {
+  const downshiftItems = useMemo(() => {
+    const items = options.map(
+      mapOptionToDownshiftItem
+    );
+    if (selectAll) {
+      items.unshift({
+        id: "select-all",
+        type: "select-all",
+        original: {
+          id: "select-all",
+          label: selectAll.label ?? "Select All"
+        },
+        checkState: selectAll.checkState
+      });
+    }
+    return items;
+  }, [options, pinnedOptions, selectAll]);
+  const { ref: wrapperDivRef, environment } = useDownshiftEnvironment();
+  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);
+        if (fullOption) {
+          onSelectedOptionsChange([...selectedOptions, fullOption]);
+        }
+      }
+    },
+    [selectedOptions, onSelectedOptionsChange, options]
+  );
+  const {
+    isOpen,
+    highlightedIndex,
+    getToggleButtonProps,
+    getLabelProps,
+    getMenuProps,
+    getInputProps,
+    getItemProps,
+    inputValue,
+    closeMenu,
+    openMenu,
+    toggleMenu
+  } = useCombobox({
+    isItemDisabled: (item, _index) => {
+      if (!item) {
+        return false;
+      }
+      return (disabled || item.disabled) ?? false;
+    },
+    environment,
+    // For multi-select, we don't track a single selected item
+    selectedItem: null,
+    onSelectedItemChange: ({
+      selectedItem: si
+    }) => {
+      console.log("selectedItem", si);
+      if (si) {
+        if (si.type === "select-all") {
+          selectAll?.onClick();
+        } else if (si.type === "option") {
+          handleItemClick(si.original);
+        }
+      }
+    },
+    onInputValueChange,
+    onIsOpenChange,
+    items: downshiftItems,
+    itemToString(item) {
+      return item?.original.label ?? "";
+    },
+    stateReducer: (state, actionAndChanges) => stateReducer(state, actionAndChanges, displayAs)
+  });
+  return {
+    inputValue,
+    wrapperDivRef,
+    getToggleButtonProps,
+    getLabelProps,
+    getMenuProps,
+    getInputProps,
+    getItemProps,
+    highlightedIndex,
+    isOpen,
+    downshiftItems,
+    closeMenu,
+    openMenu,
+    toggleMenu,
+    selectedOptions
+  };
+};
+function mapOptionToDownshiftItem(option) {
+  return {
+    id: option.id,
+    type: "option",
+    disabled: option.disabled ?? false,
+    original: option
+  };
+}
+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,
+          isOpen: state.isOpen,
+          // Preserve input value for multi-select
+          inputValue: state.inputValue
+        };
+      }
+      return {
+        ...changes,
+        // For multi-select, preserve the input value on blur
+        inputValue: state.inputValue
+      };
+    case useCombobox.stateChangeTypes.InputKeyDownEscape:
+    case useCombobox.stateChangeTypes.FunctionCloseMenu:
+      return {
+        ...changes,
+        // Clear input value when menu is closed
+        inputValue: ""
+      };
+    case useCombobox.stateChangeTypes.InputClick:
+      if (displayAs === "dialog" && state.isOpen) {
+        return {
+          ...changes,
+          isOpen: state.isOpen
+        };
+      }
+      return changes;
+    case useCombobox.stateChangeTypes.InputKeyDownEnter:
+    case useCombobox.stateChangeTypes.ItemClick:
+      return {
+        ...changes,
+        isOpen: state.isOpen,
+        // Keep menu open
+        highlightedIndex: state.highlightedIndex,
+        // Preserve highlight position
+        inputValue: state.inputValue
+        // Preserve input value for continued filtering
+      };
+    default:
+      return changes;
+  }
+}
+
+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,
+    errorAriaLive: errorAriaLiveProp = "assertive",
+    required,
+    disabled,
+    readOnly,
+    prefix,
+    suffix,
+    selectAll,
+    singleRow,
+    maxChips,
+    className,
+    style
+  } = componentProps;
+  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;
+  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 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,
+    getLabelProps,
+    getMenuProps,
+    getInputProps,
+    wrapperDivRef,
+    highlightedIndex,
+    getItemProps,
+    inputValue,
+    downshiftItems,
+    closeMenu,
+    toggleMenu
+  } = useComboMultiple({
+    displayAs,
+    onSelectedOptionsChange,
+    disabled: isDisabledOrReadOnly,
+    options,
+    pinnedOptions: [],
+    selectedOptions,
+    selectAll: selectAll ? {
+      label: selectAll.label ?? "Select All",
+      onClick: selectAll.onClick,
+      checkState: selectAll.isChecked === true ? "checked" : selectAll.isChecked === false ? "unchecked" : selectAll.isChecked ?? "indeterminate"
+    } : void 0,
+    async onIsOpenChange(changes) {
+      if (initialLoad === "open" && !initialLoadPerformed && changes.isOpen) {
+        await loadOptions("", { initial: true });
+        setInitialLoadPerformed(true);
+      }
+    },
+    onInputValueChange: ({ inputValue: iv }) => {
+      debouncedOptionLoader(iv ?? "");
+    }
+  });
+  useEffect(() => {
+    const performInitialLoad = async () => {
+      if (initialLoad === "immediate" && !initialLoadPerformed) {
+        await loadOptions("", { initial: true });
+        setInitialLoadPerformed(true);
+      }
+    };
+    performInitialLoad();
+  }, [loadOptions, initialLoadPerformed, initialLoad]);
+  const handleLoadMore = async () => {
+    await loadMore(inputValue);
+  };
+  const disableClearButton = selectedOptions.length === 0 || isDisabledOrReadOnly;
+  if (displayAs === "dialog") {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: className ? `${styles$2["search-field"]} ${className}` : styles$2["search-field"],
+        style: { ...layoutStyles, ...style },
+        ref: wrapperDivRef,
+        children: [
+          /* @__PURE__ */ jsx(
+            SelectFieldLabel,
+            {
+              label,
+              labelNode,
+              hideLabel,
+              getLabelProps,
+              required
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            MultiSelectFieldInput,
+            {
+              disabled,
+              readOnly,
+              disableToggleButton: false,
+              placeholder,
+              disableClearButton,
+              toggleButtonProps: getToggleButtonProps(),
+              onClear: handleClear,
+              id: `${id}-input`,
+              inputProps: getInputProps({
+                "aria-describedby": hasHelperText ? helperUid : void 0,
+                "aria-invalid": error ? true : void 0,
+                onFocus: handleFocus,
+                onBlur: handleBlur
+              }),
+              size,
+              error: !!error,
+              prefix,
+              suffix,
+              selectedOptions,
+              onRemoveOption: handleRemoveOption,
+              singleRow,
+              maxChips,
+              onWrapperClick: toggleMenu
+            }
+          ),
+          hasHelperText ? /* @__PURE__ */ jsx(
+            FieldMessage,
+            {
+              id: helperUid,
+              hint,
+              errorMessage,
+              errorAriaLive: isOpen || shouldAriaLive ? errorAriaLiveProp : "off",
+              description
+            }
+          ) : null,
+          /* @__PURE__ */ jsx(
+            FieldDialog,
+            {
+              id: `${id}-dialog`,
+              isOpen,
+              onClose: closeMenu,
+              title: label,
+              initialFocusResolver: (elements) => {
+                return elements.find((element) => element.tagName === "INPUT") || elements[0];
+              },
+              field: /* @__PURE__ */ jsx(
+                MultiSelectFieldInput,
+                {
+                  disabled,
+                  readOnly,
+                  inputProps: getInputProps(),
+                  disableToggleButton: true,
+                  placeholder,
+                  disableClearButton,
+                  onClear: handleClear,
+                  id: `${id}-dialog-input`,
+                  inputWrapperRef,
+                  size: "medium",
+                  error: !!error,
+                  prefix,
+                  suffix,
+                  selectedOptions,
+                  onRemoveOption: handleRemoveOption,
+                  singleRow: true,
+                  maxChips: 20
+                }
+              ),
+              children: /* @__PURE__ */ jsx(
+                MultiSelectFieldList,
+                {
+                  isOpen: true,
+                  items: downshiftItems,
+                  getMenuProps,
+                  getItemProps,
+                  highlightedIndex,
+                  selectedOptions,
+                  hasMore,
+                  onLoadMore: handleLoadMore,
+                  loading,
+                  loadingMore,
+                  disabled: isDisabledOrReadOnly,
+                  style: {
+                    paddingInline: 24,
+                    paddingBlockEnd: 24
+                  }
+                }
+              )
+            }
+          )
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: className ? `${styles$2["search-field"]} ${className}` : styles$2["search-field"],
+      style: { ...layoutStyles, ...style },
+      children: [
+        /* @__PURE__ */ jsx(
+          SelectFieldLabel,
+          {
+            label,
+            labelNode,
+            hideLabel,
+            getLabelProps,
+            required
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          MultiSelectFieldInput,
+          {
+            disabled,
+            readOnly,
+            inputProps: getInputProps({
+              popovertarget: `${id}-popover`,
+              "aria-describedby": hasHelperText ? helperUid : void 0,
+              "aria-invalid": error ? true : void 0,
+              onFocus: handleFocus,
+              onBlur: handleBlur
+            }),
+            toggleButtonProps: getToggleButtonProps(),
+            disableToggleButton: false,
+            placeholder,
+            disableClearButton,
+            onClear: handleClear,
+            id: `${id}-input`,
+            popoverTarget: `${id}-popover`,
+            inputWrapperRef,
+            size,
+            error: !!error,
+            prefix,
+            suffix,
+            selectedOptions,
+            onRemoveOption: handleRemoveOption,
+            singleRow,
+            maxChips,
+            onWrapperClick: toggleMenu
+          }
+        ),
+        hasHelperText ? /* @__PURE__ */ jsx(
+          FieldMessage,
+          {
+            id: helperUid,
+            hint,
+            errorMessage,
+            errorAriaLive: isOpen || shouldAriaLive ? errorAriaLiveProp : "off",
+            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,
+                style: {
+                  padding: 8
+                }
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+});
+MultiSelectField.displayName = "MultiSelectField";
+
+const defaultFilter = (options, searchValue) => {
+  return matchSorter(options, searchValue, {
+    keys: ["label", "searchText"]
+  });
+};
+const MultiSelectFieldSync = (props) => {
+  const {
+    options,
+    filter: filterProp = defaultFilter,
+    selectAll: selectAllProp,
+    value,
+    onSelectedOptionsChange,
+    ...rest
+  } = props;
+  const filter = typeof filterProp === "function" ? filterProp : (options2, searchValue) => matchSorter(
+    options2,
+    searchValue,
+    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 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 handleClick = () => {
+      if (allSelected) {
+        onSelectedOptionsChange([]);
+      } else {
+        onSelectedOptionsChange(enabledOptions);
+      }
+    };
+    return {
+      label,
+      onClick: handleClick,
+      isChecked
+    };
+  }, [selectAllProp, options, value, onSelectedOptionsChange]);
+  return /* @__PURE__ */ jsx(
+    MultiSelectField,
+    {
+      lazy: false,
+      loadOptions: (searchValue) => filter(options, searchValue),
+      debounceMs: 0,
+      value,
+      onSelectedOptionsChange,
+      selectAll: selectAllConfig,
+      ...rest
+    }
+  );
+};
+
+export { MultiSelectField as M, MultiSelectFieldSync as a };
+//# sourceMappingURL=MultiSelectFieldSync-B3HNQf7R.js.map