@servicetitan/anvil2 1.50.1 → 1.50.2

package/dist/SelectFieldSync-D4VdOXoY.js

@@ -1,1134 +0,0 @@
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { u as useDownshiftEnvironment, a as useCombobox, m as matchSorter } from './match-sorter.esm-NrKOPPde.js';
-import { useState, useRef, useCallback, useEffect, useMemo, forwardRef, useId, useImperativeHandle } from 'react';
-import { S as Spinner } from './Spinner-xEFwsq8_.js';
-import { B as Button } from './Button-92_FKAyV.js';
-import { c as cx } from './index-tZvMCc77.js';
-import { F as Flex } from './Flex-CjPHUTeq.js';
-import { I as Icon } from './Icon-BSuTVNaa.js';
-import { S as SvgIndeterminateCheckBox, a as SvgCheckBox, b as SvgCheckBoxOutlineBlank } from './indeterminate_check_box-B4zobNlt.js';
-import { S as SvgCheck } from './check-Cf67OWrZ.js';
-import { T as Text } from './Text-kPA-VzsB.js';
-import { u as useIntersectionObserver } from './useIntersectionObserver-BEmMDO3P.js';
-import { S as SrOnly } from './SrOnly-CTsYSuby.js';
-import { s as styles$4 } from './SelectTriggerBase.module-Ce49lamD.js';
-import { S as SvgChevronRight } from './chevron_right-BdpsxX7x.js';
-import { S as SvgClose } from './close-DZj38AEh.js';
-import { F as FieldLabel } from './FieldLabel-jqlQ1Ldh.js';
-import { B as computePosition, A as autoUpdate, o as offset, L as autoPlacement, i as size, D as DialogContext } from './DrawerContext-Cs3k160L.js';
-import { u as useBreakpoint } from './useBreakpoint-BGCsBhQ7.js';
-import './anvil-fonts.css';import './SelectFieldSync.css';/* empty css                     */
-import { D as DialogCancelButton } from './DialogCancelButton-sTEfx5kf.js';
-import { u as useDialogScrollLock } from './useDialogScrollLock-BW-aVboo.js';
-import { u as useLayoutPropsUtil } from './useLayoutPropsUtil-BlIWftBb.js';
-import { F as FieldMessage } from './FieldMessage-DdCUxZz-.js';
-
-const DEFAULT_PAGE_SIZE = 20;
-const DEFAULT_CACHE_MAX_SIZE = 15;
-function useSelectFieldLoading(config) {
-  const { lazy, loadOptions: loadOptionsProp, cache: cacheConfig } = config;
-  const cacheEnabled = cacheConfig?.enabled !== false;
-  const cacheMaxSize = cacheConfig?.maxSize ?? DEFAULT_CACHE_MAX_SIZE;
-  const [options, setOptions] = useState([]);
-  const [hasMoreToLoad, setHasMoreToLoad] = useState(false);
-  const [previousGroup, setPreviousGroup] = useState(
-    null
-  );
-  const [previousPage, setPreviousPage] = useState(0);
-  const [previousOffset, setPreviousOffset] = useState(0);
-  const [loading, setLoading] = useState(false);
-  const [loadingMore, setLoadingMore] = useState(false);
-  const [stateCache, setStateCache] = useState(
-    () => /* @__PURE__ */ new Map()
-  );
-  const currentSearchValueRef = useRef("");
-  const appendOptions = useCallback((newOptions) => {
-    setOptions((prevOptions) => prevOptions.concat(newOptions));
-  }, []);
-  const pageSize = lazy === "page" ? config.pageSize : DEFAULT_PAGE_SIZE;
-  const limit = lazy === "offset" ? config.limit : DEFAULT_PAGE_SIZE;
-  const restoreFromCache = useCallback((cached) => {
-    setOptions(cached.options);
-    setHasMoreToLoad(cached.hasMore);
-    setPreviousPage(cached.previousPage);
-    setPreviousOffset(cached.previousOffset);
-    setPreviousGroup(cached.previousGroup);
-  }, []);
-  useEffect(() => {
-    if (!cacheEnabled) return;
-    const searchValue = currentSearchValueRef.current;
-    if (options.length === 0) return;
-    setStateCache((prev) => {
-      if (prev.size >= cacheMaxSize) {
-        prev.clear();
-      }
-      prev.set(searchValue, {
-        options,
-        hasMore: hasMoreToLoad,
-        previousPage,
-        previousOffset,
-        previousGroup
-      });
-      return new Map(prev);
-    });
-  }, [
-    cacheEnabled,
-    cacheMaxSize,
-    options,
-    hasMoreToLoad,
-    previousPage,
-    previousOffset,
-    previousGroup
-  ]);
-  const loadOptions = useCallback(
-    async (searchValue, options2) => {
-      const isInitial = !!options2?.initial;
-      if (isInitial && cacheEnabled) {
-        const cached = stateCache.get(searchValue);
-        if (cached) {
-          currentSearchValueRef.current = searchValue;
-          restoreFromCache(cached);
-          return;
-        }
-      }
-      if (isInitial) {
-        currentSearchValueRef.current = searchValue;
-      }
-      (isInitial ? setLoading : setLoadingMore)(true);
-      try {
-        if (!lazy) {
-          const result = await loadOptionsProp(searchValue);
-          const resolved = Array.isArray(result) ? result : await result;
-          (isInitial ? setOptions : appendOptions)(resolved);
-        } else {
-          let result;
-          if (lazy === "page") {
-            const page = isInitial ? 0 : previousPage;
-            result = await loadOptionsProp(searchValue, page, pageSize);
-            setPreviousPage(isInitial ? 1 : page + 1);
-          } else if (lazy === "offset") {
-            const offset = isInitial ? 0 : previousOffset;
-            result = await loadOptionsProp(searchValue, offset, limit);
-            setPreviousOffset(isInitial ? limit : offset + limit);
-          } else if (lazy === "group") {
-            const group = isInitial ? null : previousGroup;
-            result = await loadOptionsProp(searchValue, group);
-            setPreviousGroup(
-              result.options[result.options.length - 1]?.group ?? null
-            );
-          } else {
-            throw new Error(
-              `Invalid lazy mode: ${lazy}. Expected 'page', 'offset', or 'group'.`
-            );
-          }
-          setHasMoreToLoad(result.hasMore ?? false);
-          (isInitial ? setOptions : appendOptions)(result.options);
-        }
-      } finally {
-        (isInitial ? setLoading : setLoadingMore)(false);
-      }
-    },
-    [
-      lazy,
-      pageSize,
-      limit,
-      loadOptionsProp,
-      appendOptions,
-      previousPage,
-      previousOffset,
-      previousGroup,
-      cacheEnabled,
-      stateCache,
-      restoreFromCache
-    ]
-  );
-  const loadMore = useCallback(
-    async (searchValue) => {
-      await loadOptions(searchValue, { initial: false });
-    },
-    [loadOptions]
-  );
-  const reset = useCallback(() => {
-    setOptions([]);
-    setHasMoreToLoad(false);
-    setPreviousGroup(null);
-    setPreviousPage(0);
-    setPreviousOffset(0);
-    setLoading(false);
-    setLoadingMore(false);
-  }, []);
-  const clearCache = useCallback(() => {
-    setStateCache(/* @__PURE__ */ new Map());
-  }, []);
-  return {
-    options,
-    loading,
-    loadingMore,
-    hasMore: hasMoreToLoad,
-    loadOptions,
-    loadMore,
-    reset,
-    clearCache
-  };
-}
-
-const empty = "_empty_4c4yl_6";
-const scroller = "_scroller_4c4yl_20";
-const styles$3 = {
-	"select-field-list": "_select-field-list_4c4yl_2",
-	empty: empty,
-	"load-more": "_load-more_4c4yl_13",
-	scroller: scroller};
-
-const highlighted = "_highlighted_15431_26";
-const disabled = "_disabled_15431_29";
-const single = "_single_15431_33";
-const selected = "_selected_15431_33";
-const checkbox = "_checkbox_15431_36";
-const checked = "_checked_15431_40";
-const unchecked = "_unchecked_15431_43";
-const indeterminate = "_indeterminate_15431_46";
-const styles$2 = {
-	"select-field-list-item": "_select-field-list-item_15431_2",
-	highlighted: highlighted,
-	disabled: disabled,
-	single: single,
-	selected: selected,
-	checkbox: checkbox,
-	checked: checked,
-	unchecked: unchecked,
-	indeterminate: indeterminate
-};
-
-const SelectFieldListItem = ({
-  item,
-  index,
-  highlighted,
-  disabled,
-  getItemProps,
-  selectionType,
-  checked
-}) => {
-  const checkbox = useMemo(() => {
-    if (checked === "indeterminate")
-      return {
-        icon: SvgIndeterminateCheckBox,
-        class: styles$2["indeterminate"]
-      };
-    if (checked) return { icon: SvgCheckBox, class: styles$2["checked"] };
-    return { icon: SvgCheckBoxOutlineBlank, class: styles$2["unchecked"] };
-  }, [checked]);
-  return /* @__PURE__ */ jsxs(
-    "li",
-    {
-      ...getItemProps({
-        item,
-        index,
-        className: cx(styles$2["select-field-list-item"], {
-          [styles$2.highlighted]: highlighted,
-          [styles$2.selected]: checked,
-          [styles$2.disabled]: disabled,
-          [styles$2.single]: selectionType === "single",
-          [styles$2.multiple]: selectionType === "multiple"
-        })
-      }),
-      children: [
-        selectionType === "multiple" && /* @__PURE__ */ jsx("div", { "aria-hidden": true, children: /* @__PURE__ */ jsx(
-          Icon,
-          {
-            size: "large",
-            svg: checkbox.icon,
-            className: cx(styles$2["checkbox"], checkbox.class)
-          }
-        ) }),
-        /* @__PURE__ */ jsxs(Flex, { grow: 1, shrink: 1, direction: "column", gap: "1", children: [
-          /* @__PURE__ */ jsx(Text, { size: "medium", children: item.original.content?.title ?? item.original.label }),
-          item.original.content?.description && /* @__PURE__ */ jsx(Text, { size: "small", children: item.original.content?.description })
-        ] }),
-        selectionType === "single" && checked && /* @__PURE__ */ jsx(
-          Icon,
-          {
-            size: "medium",
-            svg: SvgCheck,
-            className: cx(styles$2["checkbox"], styles$2["checked"])
-          }
-        )
-      ]
-    },
-    item.id
-  );
-};
-
-const InView = ({
-  children,
-  onVisibilityChange,
-  rootMargin
-}) => {
-  const { ref } = useIntersectionObserver({
-    onChange: (isIntersecting) => {
-      onVisibilityChange?.(isIntersecting);
-    },
-    rootMargin
-  });
-  return /* @__PURE__ */ jsx("div", { ref, children });
-};
-
-const SelectFieldList = ({
-  isOpen,
-  items,
-  getMenuProps,
-  getItemProps,
-  highlightedIndex,
-  selectedOption,
-  hasMore,
-  onLoadMore,
-  loading,
-  loadingMore,
-  disableAutoLoadMore,
-  disabled,
-  className,
-  style
-}) => {
-  const handleLoaderVisibilityChange = (visible) => {
-    if (visible && !disableAutoLoadMore) {
-      onLoadMore();
-    }
-  };
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      ...getMenuProps({
-        className: cx(styles$3["scroller"], className),
-        style
-      }),
-      children: [
-        /* @__PURE__ */ jsx("ul", { className: cx(styles$3["select-field-list"]), children: isOpen && /* @__PURE__ */ jsx(Fragment, { children: loading ? /* @__PURE__ */ jsx("div", { className: styles$3["empty"], children: /* @__PURE__ */ jsx(Spinner, { size: "medium" }) }) : items.length > 0 ? items.map((item, index) => /* @__PURE__ */ jsx(
-          SelectFieldListItem,
-          {
-            item,
-            index,
-            getItemProps,
-            selectionType: "single",
-            checked: selectedOption?.id === item.original.id,
-            highlighted: highlightedIndex === index,
-            disabled: (disabled || item.disabled) ?? false
-          },
-          item.id
-        )) : /* @__PURE__ */ jsx("div", { className: styles$3["empty"], children: /* @__PURE__ */ jsx(Text, { subdued: true, size: "small", children: "No match found" }) }) }) }),
-        loadingMore ? /* @__PURE__ */ jsxs("div", { className: styles$3["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$3["load-more"], children: /* @__PURE__ */ jsx(Button, { appearance: "secondary", size: "small", onClick: onLoadMore, children: "Load more" }) })
-          }
-        ) : null
-      ]
-    }
-  );
-};
-SelectFieldList.displayName = "SelectFieldList";
-
-const SelectFieldInput = ({
-  placeholder,
-  size,
-  disableClearButton,
-  disableToggleButton,
-  disabled,
-  readOnly,
-  error,
-  onClear,
-  id,
-  inputWrapperRef,
-  htmlInputWrapperProps,
-  inputProps,
-  toggleButtonProps,
-  prefix,
-  suffix
-}) => {
-  const inputWrapperClassNames = cx(styles$4["input-wrapper"], {
-    [styles$4["small"]]: size === "small",
-    [styles$4["large"]]: size === "large",
-    [styles$4["no-clear-button"]]: disableClearButton,
-    [styles$4["disabled"]]: disabled || readOnly
-  });
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      ref: inputWrapperRef,
-      ...htmlInputWrapperProps,
-      className: cx(inputWrapperClassNames, htmlInputWrapperProps?.className),
-      children: [
-        prefix ? /* @__PURE__ */ jsx("div", { className: styles$4["prefix"], children: prefix }) : null,
-        /* @__PURE__ */ jsx(
-          "input",
-          {
-            id,
-            placeholder,
-            disabled,
-            readOnly,
-            ...inputProps,
-            className: cx(styles$4["input"], inputProps?.className, {
-              [styles$4["error"]]: error
-            })
-          }
-        ),
-        suffix ? /* @__PURE__ */ jsx("div", { className: styles$4["suffix"], children: suffix }) : null,
-        /* @__PURE__ */ jsxs("div", { className: styles$4["buttons-wrapper"], children: [
-          disableClearButton ? null : /* @__PURE__ */ jsx("div", { className: styles$4["close-button-wrapper"], children: /* @__PURE__ */ jsx(
-            Button,
-            {
-              icon: SvgClose,
-              "aria-label": "clear selection",
-              appearance: "ghost",
-              size: "small",
-              className: styles$4["close-button"],
-              onClick: () => {
-                onClear?.();
-              }
-            }
-          ) }),
-          disableToggleButton ? null : /* @__PURE__ */ jsx("div", { className: styles$4["toggle-button-wrapper"], children: /* @__PURE__ */ jsx(
-            Button,
-            {
-              icon: SvgChevronRight,
-              "aria-label": "toggle menu",
-              appearance: "ghost",
-              size: "small",
-              disabled,
-              ...toggleButtonProps,
-              className: cx(
-                styles$4["toggle-button"],
-                toggleButtonProps?.className
-              )
-            }
-          ) })
-        ] })
-      ]
-    }
-  );
-};
-SelectFieldInput.displayName = "SelectFieldInput";
-
-const SelectFieldLabel = ({
-  label,
-  getLabelProps,
-  required,
-  moreInfo,
-  openMoreInfo
-}) => {
-  return /* @__PURE__ */ jsx(
-    FieldLabel,
-    {
-      ...getLabelProps(),
-      required,
-      moreInfo,
-      openMoreInfo,
-      children: label
-    }
-  );
-};
-
-function useDebouncedCallback(callback, delay = 300) {
-  const timeoutRef = useRef(null);
-  const callbackRef = useRef(callback);
-  useEffect(() => {
-    callbackRef.current = callback;
-  }, [callback]);
-  useEffect(() => {
-    return () => {
-      if (timeoutRef.current) {
-        clearTimeout(timeoutRef.current);
-        timeoutRef.current = null;
-      }
-    };
-  }, [delay]);
-  const debouncedCallback = useCallback(
-    ((...args) => {
-      if (timeoutRef.current) {
-        clearTimeout(timeoutRef.current);
-      }
-      timeoutRef.current = setTimeout(() => {
-        callbackRef.current(...args);
-        timeoutRef.current = null;
-      }, delay);
-    }),
-    [delay]
-  );
-  return debouncedCallback;
-}
-
-const useCombo = ({
-  options,
-  pinnedOptions,
-  selectAll,
-  selectedOption,
-  onSelectedOptionChange,
-  onInputValueChange,
-  onIsOpenChange,
-  displayAs = "popover",
-  disableHighlightOnOpen = false,
-  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" }
-      });
-    }
-    return items;
-  }, [options, pinnedOptions, selectAll]);
-  const selectedDownshiftItem = useMemo(() => {
-    return selectedOption ? mapOptionToDownshiftItem(selectedOption) : null;
-  }, [selectedOption]);
-  const { ref: wrapperDivRef, environment } = useDownshiftEnvironment();
-  const {
-    isOpen,
-    highlightedIndex,
-    getToggleButtonProps,
-    getLabelProps,
-    getMenuProps,
-    getInputProps,
-    getItemProps,
-    inputValue,
-    closeMenu,
-    openMenu,
-    setHighlightedIndex
-  } = useCombobox({
-    isItemDisabled: (item, _index) => {
-      if (!item) {
-        return false;
-      }
-      return (disabled || item.disabled) ?? false;
-    },
-    environment,
-    selectedItem: selectedDownshiftItem,
-    onSelectedItemChange: ({
-      selectedItem: si
-    }) => {
-      if (si && si.type === "option") {
-        onSelectedOptionChange(si.original);
-      } else {
-        onSelectedOptionChange(null);
-      }
-    },
-    onInputValueChange,
-    onIsOpenChange: (changes) => {
-      onIsOpenChange?.(changes);
-      if (changes.isOpen && !disableHighlightOnOpen) {
-        const selectedItemIndex = downshiftItems.findIndex(
-          (item) => item.id === selectedDownshiftItem?.id
-        );
-        setHighlightedIndex(selectedItemIndex);
-      }
-    },
-    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
-  };
-};
-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:
-      if (displayAs === "dialog" && state.isOpen) {
-        return {
-          ...changes,
-          isOpen: state.isOpen
-        };
-      }
-      return {
-        ...changes,
-        inputValue: state.selectedItem?.original.label ?? state.inputValue
-      };
-    case useCombobox.stateChangeTypes.InputKeyDownEscape:
-    case useCombobox.stateChangeTypes.FunctionCloseMenu:
-      return {
-        ...changes,
-        inputValue: state.selectedItem?.original.label ?? state.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;
-    default:
-      return changes;
-  }
-}
-
-const styles$1 = {
-	"field-popover": "_field-popover_aeggh_2"
-};
-
-const FieldPopover = (props) => {
-  const ref = useRef(null);
-  const { id, children, referenceElement, open } = props;
-  useEffect(() => {
-    if (open) {
-      ref.current?.showPopover();
-    } else {
-      ref.current?.hidePopover();
-    }
-  }, [open]);
-  const updatePosition = useCallback(async () => {
-    if (!ref.current || !referenceElement.current) return;
-    const position = await computePosition(
-      referenceElement.current,
-      ref.current,
-      {
-        placement: "bottom-start",
-        middleware: [
-          offset(8),
-          autoPlacement({
-            allowedPlacements: ["bottom-start", "top-start"],
-            padding: 8
-          }),
-          size({
-            padding: 8,
-            apply({ rects, elements, availableHeight }) {
-              Object.assign(elements.floating.style, {
-                width: `${rects.reference.width}px`,
-                maxHeight: `${Math.max(0, availableHeight)}px`
-              });
-            }
-          })
-        ]
-      }
-    );
-    ref.current.style.left = `${position.x}px`;
-    ref.current.style.top = `${position.y}px`;
-  }, [ref, referenceElement]);
-  useEffect(() => {
-    if (!ref.current || !referenceElement.current || !open) return;
-    const cleanup = autoUpdate(
-      referenceElement.current,
-      ref.current,
-      updatePosition
-    );
-    return () => {
-      cleanup();
-    };
-  }, [referenceElement, ref, updatePosition, open]);
-  return /* @__PURE__ */ jsx("div", { ref, id, className: styles$1["field-popover"], popover: "manual", children });
-};
-
-function detectCoarsePointer() {
-  if (typeof window === "undefined" || !window.matchMedia) {
-    return false;
-  }
-  return window.matchMedia("(pointer: coarse)").matches;
-}
-function useAdaptiveView() {
-  const breakpoint = useBreakpoint();
-  const [hasCoarsePointer, setHasCoarsePointer] = useState(detectCoarsePointer);
-  useEffect(() => {
-    setHasCoarsePointer(detectCoarsePointer());
-    const mediaQuery = window.matchMedia("(pointer: coarse)");
-    const handleChange = (e) => {
-      setHasCoarsePointer(e.matches);
-    };
-    mediaQuery.addEventListener("change", handleChange);
-    return () => mediaQuery.removeEventListener("change", handleChange);
-  }, []);
-  const isSmallScreen = !breakpoint?.md;
-  const isMobile = isSmallScreen && hasCoarsePointer;
-  return {
-    view: isMobile ? "mobile" : "desktop",
-    isMobile,
-    isDesktop: !isMobile
-  };
-}
-
-const header = "_header_dcw9s_33";
-const field = "_field_dcw9s_2";
-const content = "_content_dcw9s_44";
-const styles = {
-	"field-dialog": "_field-dialog_dcw9s_2",
-	"field-dialog-visual-viewport-height": "_field-dialog-visual-viewport-height_dcw9s_16",
-	header: header,
-	field: field,
-	content: content
-};
-
-const FieldDialog = ({
-  id,
-  isOpen,
-  onClose,
-  field,
-  children,
-  title
-}) => {
-  const elRef = useRef(null);
-  const visualViewportHeightRef = useRef(null);
-  useDialogScrollLock({
-    open: isOpen,
-    id,
-    enableScrollChaining: false,
-    elementRef: elRef
-  });
-  useEffect(() => {
-    if (isOpen) {
-      elRef.current?.showModal();
-    } else {
-      elRef.current?.close();
-    }
-  }, [isOpen]);
-  useEffect(() => {
-    if (isOpen) {
-      const handleResize = () => {
-        if (!visualViewportHeightRef.current) return;
-        visualViewportHeightRef.current.style.height = `${window.visualViewport?.height ?? 0}px`;
-        visualViewportHeightRef.current.style.maxHeight = `${window.visualViewport?.height ?? 0}px`;
-      };
-      window.visualViewport?.addEventListener("resize", handleResize);
-      return () => {
-        window.visualViewport?.removeEventListener("resize", handleResize);
-      };
-    }
-  }, [isOpen]);
-  return /* @__PURE__ */ jsx(
-    "dialog",
-    {
-      ref: elRef,
-      id,
-      "data-anv": "field-dialog",
-      className: styles["field-dialog"],
-      onKeyDown: (e) => {
-        if (e.code === "Escape") {
-          e.preventDefault();
-          onClose();
-        }
-      },
-      children: /* @__PURE__ */ jsxs(
-        "div",
-        {
-          className: styles["field-dialog-visual-viewport-height"],
-          ref: visualViewportHeightRef,
-          children: [
-            /* @__PURE__ */ jsxs(Flex, { direction: "row", className: styles["header"], children: [
-              /* @__PURE__ */ jsx(Text, { variant: "headline", el: "h1", children: title }),
-              /* @__PURE__ */ jsx("span", { className: styles["close-container"], children: /* @__PURE__ */ jsx(DialogContext.Provider, { value: { close: onClose }, children: /* @__PURE__ */ jsx(
-                DialogCancelButton,
-                {
-                  className: styles["close-button"],
-                  size: "small",
-                  appearance: "ghost",
-                  "aria-label": "Close dialog",
-                  icon: SvgClose
-                }
-              ) }) })
-            ] }),
-            /* @__PURE__ */ jsx(Flex, { direction: "column", className: styles["field"], children: field }),
-            /* @__PURE__ */ jsx(Flex, { direction: "column", className: styles["content"], children })
-          ]
-        }
-      )
-    }
-  );
-};
-
-const SelectField = forwardRef(
-  (propsWithLayout, ref) => {
-    const { layoutStyles, componentProps } = useLayoutPropsUtil(propsWithLayout);
-    const [initialLoadPerformed, setInitialLoadPerformed] = useState(false);
-    const inputWrapperRef = useRef(null);
-    const {
-      id: idProp,
-      value: selectedOption,
-      initialLoad: initialLoadProp = "auto",
-      displayMenuAs: displayMenuAsProp = "auto",
-      lazy,
-      loadOptions: loadOptionsProp,
-      label,
-      placeholder,
-      disableClearButton: disableClearButtonProp = false,
-      debounceMs = 200,
-      onSelectedOptionChange,
-      cache,
-      size,
-      error,
-      hint,
-      description,
-      errorAriaLive: errorAriaLiveProp = "assertive",
-      required,
-      disabled,
-      readOnly,
-      prefix,
-      suffix
-    } = componentProps;
-    const autoId = useId();
-    const id = idProp ?? autoId;
-    const helperUid = useId();
-    const [hasFocus, setHasFocus] = useState(false);
-    const handleFocus = () => {
-      setHasFocus(true);
-    };
-    const handleBlur = () => {
-      setHasFocus(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(selectedOption?.label === inputValue2 ? "" : inputValue2, {
-        initial: true
-      });
-    }, debounceMs);
-    const adjustInputValueForSelectedOption = useCallback(
-      (inputValue2) => {
-        if (selectedOption?.label === inputValue2) {
-          return "";
-        } else {
-          return inputValue2;
-        }
-      },
-      [selectedOption?.label]
-    );
-    const {
-      isOpen,
-      getToggleButtonProps,
-      getLabelProps,
-      getMenuProps,
-      getInputProps,
-      wrapperDivRef,
-      highlightedIndex,
-      getItemProps,
-      inputValue,
-      downshiftItems,
-      closeMenu
-    } = useCombo({
-      displayAs,
-      disabled: isDisabledOrReadOnly,
-      options,
-      pinnedOptions: [],
-      selectedOption,
-      onSelectedOptionChange: (selectedOption2) => {
-        onSelectedOptionChange(selectedOption2);
-      },
-      async onIsOpenChange(changes) {
-        if (initialLoad === "open" && !initialLoadPerformed && changes.isOpen) {
-          await loadOptions(adjustInputValueForSelectedOption(inputValue), {
-            initial: true
-          });
-          setInitialLoadPerformed(true);
-        }
-      },
-      onInputValueChange: ({ inputValue: iv }) => {
-        debouncedOptionLoader(iv);
-      }
-    });
-    useEffect(() => {
-      const performInitialLoad = async () => {
-        if (initialLoad === "immediate" && !initialLoadPerformed) {
-          await loadOptions(adjustInputValueForSelectedOption(inputValue), {
-            initial: true
-          });
-          setInitialLoadPerformed(true);
-        }
-      };
-      performInitialLoad();
-    }, [
-      loadOptions,
-      initialLoadPerformed,
-      initialLoad,
-      inputValue,
-      adjustInputValueForSelectedOption
-    ]);
-    const handleLoadMore = async () => {
-      await loadMore(adjustInputValueForSelectedOption(inputValue));
-    };
-    const disableClearButton = disableClearButtonProp || !selectedOption || isDisabledOrReadOnly;
-    if (displayAs === "dialog") {
-      return /* @__PURE__ */ jsxs(
-        "div",
-        {
-          className: styles$4["search-field"],
-          style: { ...layoutStyles },
-          ref: wrapperDivRef,
-          children: [
-            /* @__PURE__ */ jsx(
-              SelectFieldLabel,
-              {
-                label,
-                getLabelProps,
-                required
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              SelectFieldInput,
-              {
-                disabled,
-                readOnly,
-                disableToggleButton: false,
-                placeholder,
-                disableClearButton,
-                toggleButtonProps: getToggleButtonProps(),
-                onClear: () => onSelectedOptionChange(null),
-                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
-              }
-            ),
-            hasHelperText ? /* @__PURE__ */ jsx(
-              FieldMessage,
-              {
-                id: helperUid,
-                hint,
-                errorMessage,
-                errorAriaLive: isOpen || hasFocus ? errorAriaLiveProp : "off",
-                description
-              }
-            ) : null,
-            /* @__PURE__ */ jsx(
-              FieldDialog,
-              {
-                id: `${id}-dialog`,
-                isOpen,
-                onClose: closeMenu,
-                title: label,
-                field: /* @__PURE__ */ jsx(
-                  SelectFieldInput,
-                  {
-                    disabled,
-                    readOnly,
-                    inputProps: getInputProps(),
-                    disableToggleButton: true,
-                    placeholder,
-                    disableClearButton,
-                    onClear: () => onSelectedOptionChange(null),
-                    id: `${id}-dialog-input`,
-                    inputWrapperRef,
-                    size: "medium",
-                    error: !!error,
-                    prefix,
-                    suffix
-                  }
-                ),
-                children: /* @__PURE__ */ jsx(
-                  SelectFieldList,
-                  {
-                    isOpen: true,
-                    items: downshiftItems,
-                    getMenuProps,
-                    getItemProps,
-                    highlightedIndex,
-                    selectedOption,
-                    hasMore,
-                    onLoadMore: handleLoadMore,
-                    loading,
-                    loadingMore,
-                    disabled: isDisabledOrReadOnly,
-                    style: {
-                      paddingInline: 24,
-                      paddingBlockEnd: 24
-                    }
-                  }
-                )
-              }
-            )
-          ]
-        }
-      );
-    }
-    return /* @__PURE__ */ jsxs("div", { className: styles$4["search-field"], style: { ...layoutStyles }, children: [
-      /* @__PURE__ */ jsx(
-        SelectFieldLabel,
-        {
-          label,
-          getLabelProps,
-          required
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        SelectFieldInput,
-        {
-          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: () => onSelectedOptionChange(null),
-          id: `${id}-input`,
-          popoverTarget: `${id}-popover`,
-          inputWrapperRef,
-          size,
-          error: !!error,
-          prefix,
-          suffix
-        }
-      ),
-      hasHelperText ? /* @__PURE__ */ jsx(
-        FieldMessage,
-        {
-          id: helperUid,
-          hint,
-          errorMessage,
-          errorAriaLive: isOpen || hasFocus ? errorAriaLiveProp : "off",
-          description
-        }
-      ) : null,
-      /* @__PURE__ */ jsx(
-        FieldPopover,
-        {
-          id: `${id}-popover`,
-          referenceElement: inputWrapperRef,
-          open: isOpen && displayAs === "popover",
-          children: /* @__PURE__ */ jsx(
-            SelectFieldList,
-            {
-              isOpen,
-              items: downshiftItems,
-              getMenuProps,
-              getItemProps,
-              highlightedIndex,
-              selectedOption,
-              hasMore,
-              onLoadMore: handleLoadMore,
-              loading,
-              loadingMore,
-              disabled: isDisabledOrReadOnly,
-              style: {
-                padding: 8
-              }
-            }
-          )
-        }
-      )
-    ] });
-  }
-);
-SelectField.displayName = "SelectField";
-
-const defaultFilter = (options, searchValue) => {
-  return matchSorter(options, searchValue, {
-    keys: ["label", "searchText"]
-  });
-};
-const SelectFieldSync = (props) => {
-  const { options, filter: filterProp = defaultFilter, ...rest } = props;
-  const filter = typeof filterProp === "function" ? filterProp : (options2, searchValue) => matchSorter(
-    options2,
-    searchValue,
-    filterProp
-  );
-  return /* @__PURE__ */ jsx(
-    SelectField,
-    {
-      lazy: false,
-      loadOptions: (searchValue) => filter(options, searchValue),
-      debounceMs: 0,
-      ...rest
-    }
-  );
-};
-
-export { SelectField as S, SelectFieldSync as a, useAdaptiveView as u };
-//# sourceMappingURL=SelectFieldSync-D4VdOXoY.js.map