@servicetitan/anvil2 1.49.3 → 1.49.5

package/dist/SelectFieldSync-DF05HvD4.js

@@ -0,0 +1,1009 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { u as useCombobox, m as matchSorter } from './match-sorter.esm-CtBw0MrM.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-DUhQNr6j.js';
+import { S as SvgChevronRight } from './chevron_right-BdpsxX7x.js';
+import { S as SvgClose } from './close-DZj38AEh.js';
+import { F as FieldLabel } from './FieldLabel-BIStrC2x.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';
+
+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_dbxri_5";
+const scroller = "_scroller_dbxri_19";
+const styles$3 = {
+	"select-field-list": "_select-field-list_dbxri_2",
+	empty: empty,
+	"load-more": "_load-more_dbxri_12",
+	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 ?? 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,
+  onClear,
+  id,
+  inputWrapperRef,
+  htmlInputWrapperProps,
+  inputProps,
+  toggleButtonProps
+}) => {
+  const inputWrapperClassNames = cx(styles$4["input-wrapper"], {
+    [styles$4["small"]]: size === "small",
+    [styles$4["large"]]: size === "large",
+    [styles$4["no-clear-button"]]: disableClearButton
+  });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: inputWrapperRef,
+      ...htmlInputWrapperProps,
+      className: cx(inputWrapperClassNames, htmlInputWrapperProps?.className),
+      children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            id,
+            placeholder,
+            ...inputProps,
+            className: cx(styles$4["input"], inputProps?.className)
+          }
+        ),
+        /* @__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
+}) => {
+  return /* @__PURE__ */ jsx(FieldLabel, { ...getLabelProps(), 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
+}) => {
+  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 {
+    isOpen,
+    highlightedIndex,
+    getToggleButtonProps,
+    getLabelProps,
+    getMenuProps,
+    getInputProps,
+    getItemProps,
+    inputValue,
+    closeMenu,
+    openMenu,
+    setHighlightedIndex
+  } = useCombobox({
+    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,
+    getToggleButtonProps,
+    getLabelProps,
+    getMenuProps,
+    getInputProps,
+    getItemProps,
+    highlightedIndex,
+    isOpen,
+    downshiftItems,
+    closeMenu,
+    openMenu
+  };
+};
+function mapOptionToDownshiftItem(option) {
+  return {
+    id: option.id,
+    type: "option",
+    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
+    } = componentProps;
+    const autoId = useId();
+    const id = idProp ?? autoId;
+    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,
+      highlightedIndex,
+      getItemProps,
+      inputValue,
+      downshiftItems,
+      closeMenu
+    } = useCombo({
+      displayAs,
+      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;
+    if (displayAs === "dialog") {
+      return /* @__PURE__ */ jsxs("div", { className: styles$4["search-field"], style: { ...layoutStyles }, children: [
+        /* @__PURE__ */ jsx(SelectFieldLabel, { label, getLabelProps }),
+        /* @__PURE__ */ jsx(
+          SelectFieldInput,
+          {
+            disableToggleButton: false,
+            placeholder,
+            disableClearButton,
+            toggleButtonProps: getToggleButtonProps(),
+            onClear: () => onSelectedOptionChange(null),
+            id: `${id}-input`,
+            inputProps: getInputProps(),
+            size
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          FieldDialog,
+          {
+            id: `${id}-dialog`,
+            isOpen,
+            onClose: closeMenu,
+            title: label,
+            field: /* @__PURE__ */ jsx(
+              SelectFieldInput,
+              {
+                inputProps: getInputProps(),
+                disableToggleButton: true,
+                placeholder,
+                disableClearButton,
+                onClear: () => onSelectedOptionChange(null),
+                id: `${id}-dialog-input`,
+                inputWrapperRef,
+                size: "medium"
+              }
+            ),
+            children: /* @__PURE__ */ jsx(
+              SelectFieldList,
+              {
+                isOpen: true,
+                items: downshiftItems,
+                getMenuProps,
+                getItemProps,
+                highlightedIndex,
+                selectedOption,
+                hasMore,
+                onLoadMore: handleLoadMore,
+                loading,
+                loadingMore,
+                style: {
+                  paddingInline: 24,
+                  paddingBlockEnd: 24
+                }
+              }
+            )
+          }
+        )
+      ] });
+    }
+    return /* @__PURE__ */ jsxs("div", { className: styles$4["search-field"], style: { ...layoutStyles }, children: [
+      /* @__PURE__ */ jsx(SelectFieldLabel, { label, getLabelProps }),
+      /* @__PURE__ */ jsx(
+        SelectFieldInput,
+        {
+          inputProps: getInputProps({
+            popovertarget: `${id}-popover`
+          }),
+          toggleButtonProps: getToggleButtonProps(),
+          disableToggleButton: false,
+          placeholder,
+          disableClearButton,
+          onClear: () => onSelectedOptionChange(null),
+          id: `${id}-input`,
+          popoverTarget: `${id}-popover`,
+          inputWrapperRef,
+          size
+        }
+      ),
+      /* @__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,
+              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-DF05HvD4.js.map