@servicetitan/anvil2 2.2.0 → 2.3.0

package/dist/SelectFieldSync-CigqXq3T.js

@@ -1,763 +0,0 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { useCallback, useState, useMemo, useRef, forwardRef, useId, useImperativeHandle, useEffect } from 'react';
-import { u as useDownshiftEnvironment, a as useCombobox, m as matchSorter } from './match-sorter.esm-B3vwg1-X.js';
-import { V as VirtualizedFieldListBase, F as FieldListBase, a as usePinnedOptions, b as useGroupedOptions, s as sortGroupSections, u as useAdaptiveView, D as DEFAULT_PAGE_SIZE, c as useSelectFieldLoading, d as useDebouncedCallback, S as SelectFieldLabel, e as FieldDialog, f as FieldPopover } from './FieldDialog-CAuhkCZY.js';
-import { s as styles } from './SelectTriggerBase.module-B0NFRlQP.js';
-import { c as cx } from './index-SvGbrGuT.js';
-import { B as Button } from './Button-l7pTJdPc.js';
-import { S as SvgChevronRight } from './chevron_right-BdpsxX7x.js';
-import { S as SvgClose } from './close-DZj38AEh.js';
-import { F as FieldMessage } from './FieldMessage-DS0COrjp.js';
-import { w as warnDeprecatedErrorUsage } from './utils-pudAMGnO.js';
-import { u as useLayoutPropsUtil } from './useLayoutPropsUtil-loxbyklF.js';
-
-const SelectFieldList = ({
-  selectedOption,
-  virtualize,
-  ...rest
-}) => {
-  const getCheckedState = useCallback(
-    (item) => selectedOption?.id === item.original.id ? "checked" : "unchecked",
-    [selectedOption]
-  );
-  const ListComponent = virtualize ? VirtualizedFieldListBase : FieldListBase;
-  return /* @__PURE__ */ jsx(
-    ListComponent,
-    {
-      ...rest,
-      selectionType: "single",
-      getCheckedState
-    }
-  );
-};
-SelectFieldList.displayName = "SelectFieldList";
-
-const SelectFieldInput = ({
-  placeholder,
-  size,
-  disableClearButton,
-  disableToggleButton,
-  disabled,
-  readOnly,
-  required,
-  error,
-  onClear,
-  id,
-  inputWrapperRef,
-  htmlInputWrapperProps,
-  inputProps,
-  toggleButtonProps,
-  prefix,
-  suffix
-}) => {
-  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
-  });
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      ref: inputWrapperRef,
-      ...htmlInputWrapperProps,
-      className: cx(inputWrapperClassNames, htmlInputWrapperProps?.className),
-      children: [
-        prefix ? /* @__PURE__ */ jsx("div", { className: styles["prefix"], children: prefix }) : null,
-        /* @__PURE__ */ jsx(
-          "input",
-          {
-            id,
-            placeholder,
-            disabled,
-            readOnly,
-            required,
-            ...inputProps,
-            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
-              )
-            }
-          ) })
-        ] })
-      ]
-    }
-  );
-};
-SelectFieldInput.displayName = "SelectFieldInput";
-
-const useCombo = ({
-  options,
-  pinned,
-  groupToString,
-  groupSorter,
-  selectAll,
-  selectedOption,
-  onSelectedOptionChange,
-  onInputValueChange,
-  onIsOpenChange,
-  displayAs = "popover",
-  disableHighlightOnOpen = false,
-  disabled,
-  virtualize = false
-}) => {
-  const [inputValue, setInputValue] = useState(selectedOption?.label ?? "");
-  const effectiveSearchValue = selectedOption?.label === inputValue ? "" : inputValue;
-  const { pinnedSections } = usePinnedOptions(pinned, effectiveSearchValue);
-  const { ungroupedItems, groupSections: rawGroupSections } = useGroupedOptions(
-    options,
-    groupToString
-  );
-  const groupSections = useMemo(() => {
-    if (groupSorter && rawGroupSections.length > 0) {
-      return sortGroupSections(rawGroupSections, groupSorter);
-    }
-    return rawGroupSections;
-  }, [rawGroupSections, groupSorter]);
-  const { downshiftItems, sectionsMeta } = useMemo(() => {
-    const items = [];
-    const meta = [];
-    pinnedSections.forEach((section) => {
-      const startIndex = items.length;
-      section.options.forEach((option) => {
-        items.push({
-          id: option.id + "-pinned",
-          type: "pinned-option",
-          original: option,
-          disabled: option.disabled ?? false
-        });
-      });
-      const endIndex = items.length;
-      if (endIndex > startIndex || section.loading) {
-        meta.push({
-          type: "pinned",
-          label: section.label,
-          startIndex,
-          endIndex,
-          loading: section.loading
-        });
-      }
-    });
-    groupSections.forEach((section) => {
-      const startIndex = items.length;
-      section.options.forEach((option) => {
-        items.push({
-          id: option.id,
-          type: "grouped-option",
-          original: option,
-          disabled: option.disabled ?? false
-        });
-      });
-      const endIndex = items.length;
-      if (endIndex > startIndex) {
-        meta.push({
-          type: "group",
-          label: section.label,
-          startIndex,
-          endIndex
-        });
-      }
-    });
-    items.push(...ungroupedItems);
-    if (selectAll) {
-      meta.forEach((m) => {
-        m.startIndex += 1;
-        m.endIndex += 1;
-      });
-      items.unshift({
-        id: "select-all",
-        type: "select-all",
-        original: { id: "select-all", label: selectAll.label ?? "Select All" },
-        disabled: false
-      });
-    }
-    return { downshiftItems: items, sectionsMeta: meta };
-  }, [pinnedSections, groupSections, ungroupedItems, selectAll]);
-  const selectedDownshiftItem = useMemo(() => {
-    return selectedOption ? mapOptionToDownshiftItem(selectedOption) : null;
-  }, [selectedOption]);
-  const { ref: wrapperDivRef, environment } = useDownshiftEnvironment();
-  const highlightChangeTypeRef = useRef("");
-  const {
-    isOpen,
-    highlightedIndex,
-    getToggleButtonProps,
-    getLabelProps,
-    getMenuProps,
-    getInputProps,
-    getItemProps,
-    closeMenu,
-    openMenu,
-    setHighlightedIndex
-  } = useCombobox({
-    isItemDisabled: (item, _index) => {
-      if (!item) {
-        return false;
-      }
-      return (disabled || item.disabled) ?? false;
-    },
-    environment,
-    selectedItem: selectedDownshiftItem,
-    inputValue,
-    // Controlled input value
-    onSelectedItemChange: ({
-      selectedItem: si
-    }) => {
-      if (si && (si.type === "option" || si.type === "pinned-option" || si.type === "grouped-option")) {
-        onSelectedOptionChange(si.original);
-      } else {
-        onSelectedOptionChange(null);
-      }
-    },
-    onInputValueChange: (changes) => {
-      setInputValue(changes.inputValue ?? "");
-      onInputValueChange?.(changes);
-    },
-    onHighlightedIndexChange: ({ type }) => {
-      highlightChangeTypeRef.current = type;
-    },
-    onIsOpenChange: (changes) => {
-      onIsOpenChange?.(changes);
-      if (changes.isOpen && !disableHighlightOnOpen) {
-        const selectedItemIndex = downshiftItems.findIndex(
-          (item) => item.original.id === selectedOption?.id
-        );
-        setHighlightedIndex(selectedItemIndex);
-      }
-    },
-    items: downshiftItems,
-    itemToString(item) {
-      return item?.original.label ?? "";
-    },
-    stateReducer: (state, actionAndChanges) => stateReducer(state, actionAndChanges, displayAs),
-    ...virtualize && { scrollIntoView: () => {
-    } }
-  });
-  return {
-    inputValue,
-    wrapperDivRef,
-    getToggleButtonProps,
-    getLabelProps,
-    getMenuProps,
-    getInputProps,
-    getItemProps,
-    highlightedIndex,
-    highlightChangeTypeRef,
-    isOpen,
-    downshiftItems,
-    sectionsMeta,
-    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 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,
-      labelNode,
-      hideLabel,
-      placeholder,
-      disableClearButton: disableClearButtonProp = false,
-      debounceMs = 200,
-      onSelectedOptionChange,
-      cache,
-      size,
-      error,
-      hint,
-      description,
-      errorAriaLive: _errorAriaLive,
-      required,
-      disabled,
-      readOnly,
-      prefix,
-      suffix,
-      warning,
-      className,
-      style,
-      pinned,
-      virtualize
-    } = componentProps;
-    const groupToString = "groupToString" in componentProps ? componentProps.groupToString : void 0;
-    const groupSorter = "groupSorter" in componentProps ? componentProps.groupSorter : void 0;
-    const autoId = useId();
-    const id = idProp ?? autoId;
-    const helperUid = useId();
-    warnDeprecatedErrorUsage("SelectField", error);
-    const errorMessages = typeof error === "boolean" || error === void 0 ? void 0 : error;
-    const hasHelperText = hint || errorMessages || warning || description;
-    const isDisabledOrReadOnly = (disabled || readOnly) ?? false;
-    const { isMobile } = useAdaptiveView();
-    const displayAs = displayMenuAsProp === "auto" ? isMobile ? "dialog" : "popover" : displayMenuAsProp;
-    const initialLoad = initialLoadProp === "auto" ? "immediate" : initialLoadProp;
-    const pageSize = lazy === "page" && "lazyOptions" in componentProps ? componentProps.lazyOptions?.pageSize ?? DEFAULT_PAGE_SIZE : DEFAULT_PAGE_SIZE;
-    const limit = lazy === "offset" && "lazyOptions" in componentProps ? componentProps.lazyOptions?.limit ?? DEFAULT_PAGE_SIZE : DEFAULT_PAGE_SIZE;
-    const loadingHookConfig = useMemo(() => {
-      const cacheConfig = {
-        enabled: cache?.enabled,
-        maxSize: cache?.maxSize
-      };
-      if (lazy === "page")
-        return {
-          lazy: "page",
-          loadOptions: loadOptionsProp,
-          pageSize,
-          cache: cacheConfig
-        };
-      if (lazy === "offset")
-        return {
-          lazy: "offset",
-          loadOptions: loadOptionsProp,
-          limit,
-          cache: cacheConfig
-        };
-      if (lazy === "group")
-        return {
-          lazy: "group",
-          loadOptions: loadOptionsProp,
-          cache: cacheConfig
-        };
-      return {
-        lazy: false,
-        loadOptions: loadOptionsProp,
-        cache: cacheConfig
-      };
-    }, [
-      lazy,
-      loadOptionsProp,
-      pageSize,
-      limit,
-      cache?.enabled,
-      cache?.maxSize
-    ]);
-    const {
-      options,
-      loading,
-      loadingMore,
-      hasMore,
-      loadOptions,
-      loadMore,
-      clearCache
-    } = useSelectFieldLoading(loadingHookConfig);
-    useImperativeHandle(
-      ref,
-      () => ({
-        clearCache,
-        invalidate: () => {
-          clearCache();
-          setInitialLoadPerformed(false);
-        }
-      }),
-      [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,
-      highlightChangeTypeRef,
-      getItemProps,
-      inputValue,
-      downshiftItems,
-      closeMenu,
-      sectionsMeta
-    } = useCombo({
-      displayAs,
-      disabled: isDisabledOrReadOnly,
-      options,
-      pinned,
-      groupToString,
-      groupSorter,
-      selectedOption,
-      virtualize,
-      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: className ? `${styles["search-field"]} ${className}` : styles["search-field"],
-          style: { ...layoutStyles, ...style },
-          ref: wrapperDivRef,
-          children: [
-            /* @__PURE__ */ jsx(
-              SelectFieldLabel,
-              {
-                label,
-                labelNode,
-                hideLabel,
-                getLabelProps,
-                required
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              SelectFieldInput,
-              {
-                disabled,
-                readOnly,
-                required,
-                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
-                }),
-                size,
-                error: !!error,
-                prefix,
-                suffix
-              }
-            ),
-            hasHelperText ? /* @__PURE__ */ jsx(
-              FieldMessage,
-              {
-                id: helperUid,
-                hint,
-                error: errorMessages,
-                warning,
-                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
-                  }
-                ),
-                initialFocusResolver: (elements) => {
-                  return elements.find((element) => element.tagName === "INPUT") || elements[0];
-                },
-                children: /* @__PURE__ */ jsx(
-                  SelectFieldList,
-                  {
-                    isOpen: true,
-                    items: downshiftItems,
-                    sectionsMeta,
-                    getMenuProps,
-                    getItemProps,
-                    highlightedIndex,
-                    highlightChangeTypeRef,
-                    selectedOption,
-                    hasMore,
-                    onLoadMore: handleLoadMore,
-                    loading,
-                    loadingMore,
-                    disabled: isDisabledOrReadOnly,
-                    virtualize
-                  }
-                )
-              }
-            )
-          ]
-        }
-      );
-    }
-    return /* @__PURE__ */ jsxs(
-      "div",
-      {
-        className: className ? `${styles["search-field"]} ${className}` : styles["search-field"],
-        style: { ...layoutStyles, ...style },
-        children: [
-          /* @__PURE__ */ jsx(
-            SelectFieldLabel,
-            {
-              label,
-              labelNode,
-              hideLabel,
-              getLabelProps,
-              required
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            SelectFieldInput,
-            {
-              disabled,
-              readOnly,
-              required,
-              inputProps: getInputProps({
-                popovertarget: `${id}-popover`,
-                "aria-describedby": hasHelperText ? helperUid : void 0,
-                "aria-invalid": error ? true : void 0
-              }),
-              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,
-              error: errorMessages,
-              warning,
-              description
-            }
-          ) : null,
-          /* @__PURE__ */ jsx(
-            FieldPopover,
-            {
-              id: `${id}-popover`,
-              referenceElement: inputWrapperRef,
-              open: isOpen && displayAs === "popover",
-              onClickOutside: closeMenu,
-              children: /* @__PURE__ */ jsx(
-                SelectFieldList,
-                {
-                  isOpen,
-                  items: downshiftItems,
-                  sectionsMeta,
-                  getMenuProps,
-                  getItemProps,
-                  highlightedIndex,
-                  highlightChangeTypeRef,
-                  selectedOption,
-                  hasMore,
-                  onLoadMore: handleLoadMore,
-                  loading,
-                  loadingMore,
-                  disabled: isDisabledOrReadOnly,
-                  virtualize
-                }
-              )
-            }
-          )
-        ]
-      }
-    );
-  }
-);
-SelectField.displayName = "SelectField";
-
-const defaultFilter = (options, searchValue) => matchSorter(options, searchValue, {
-  keys: ["label", "searchText"],
-  baseSort: (a, b) => a.index - b.index
-});
-const toFilterFn = (filter) => typeof filter === "function" ? filter : (options, searchValue) => matchSorter(options, searchValue, {
-  baseSort: (a, b) => a.index - b.index,
-  ...filter
-});
-const sortByGroup = (options, groupSorter) => {
-  const groupOrder = /* @__PURE__ */ new Map();
-  const uniqueGroups = [];
-  options.forEach((opt) => {
-    if (!groupOrder.has(opt.group)) {
-      groupOrder.set(opt.group, uniqueGroups.length);
-      uniqueGroups.push(opt.group);
-    }
-  });
-  uniqueGroups.sort((a, b) => {
-    if (a === void 0 && b === void 0) return 0;
-    if (a === void 0) return 1;
-    if (b === void 0) return -1;
-    return groupSorter(a, b);
-  });
-  uniqueGroups.forEach((group, index) => {
-    groupOrder.set(group, index);
-  });
-  return [...options].sort((a, b) => {
-    const orderA = groupOrder.get(a.group) ?? Infinity;
-    const orderB = groupOrder.get(b.group) ?? Infinity;
-    return orderA - orderB;
-  });
-};
-const SelectFieldSync = (props) => {
-  const {
-    options,
-    filter: filterProp = defaultFilter,
-    groupSorter,
-    ...rest
-  } = props;
-  const filter = useMemo(() => toFilterFn(filterProp), [filterProp]);
-  const loadOptions = (searchValue) => {
-    const filtered = filter(options, searchValue);
-    return groupSorter ? sortByGroup(filtered, groupSorter) : filtered;
-  };
-  const fieldRef = useRef(null);
-  const prevOptionsRef = useRef(options);
-  useEffect(() => {
-    if (prevOptionsRef.current !== options) {
-      prevOptionsRef.current = options;
-      fieldRef.current?.invalidate();
-    }
-  }, [options]);
-  return /* @__PURE__ */ jsx(
-    SelectField,
-    {
-      ref: fieldRef,
-      lazy: false,
-      loadOptions,
-      debounceMs: 0,
-      ...rest
-    }
-  );
-};
-
-export { SelectField as S, SelectFieldSync as a };
-//# sourceMappingURL=SelectFieldSync-CigqXq3T.js.map