@servicetitan/anvil2 1.50.1 → 1.50.2

package/dist/SelectFieldSync-0CL0RTpg.js

@@ -0,0 +1,679 @@
+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 { useMemo, forwardRef, useState, useRef, useId, useImperativeHandle, useCallback, useEffect } from 'react';
+import { S as Spinner } from './Spinner-xEFwsq8_.js';
+import { B as Button } from './Button-92_FKAyV.js';
+import { s as styles, 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 { s as styles$1 } from './SelectTriggerBase.module-B0NFRlQP.js';
+import { S as SvgChevronRight } from './chevron_right-BdpsxX7x.js';
+import { S as SvgClose } from './close-DZj38AEh.js';
+import { u as useLayoutPropsUtil } from './useLayoutPropsUtil-BlIWftBb.js';
+import { F as FieldMessage } from './FieldMessage-DdCUxZz-.js';
+
+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["scroller"], className),
+        style
+      }),
+      children: [
+        /* @__PURE__ */ jsx("ul", { className: cx(styles["select-field-list"]), children: isOpen && /* @__PURE__ */ jsx(Fragment, { children: loading ? /* @__PURE__ */ jsx("div", { className: styles["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 ? "checked" : "unchecked",
+            highlighted: highlightedIndex === index,
+            disabled: (disabled || item.disabled) ?? false
+          },
+          item.id
+        )) : /* @__PURE__ */ jsx("div", { className: styles["empty"], children: /* @__PURE__ */ jsx(Text, { subdued: true, size: "small", children: "No match found" }) }) }) }),
+        loadingMore ? /* @__PURE__ */ jsxs("div", { className: styles["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["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,
+  required,
+  error,
+  onClear,
+  id,
+  inputWrapperRef,
+  htmlInputWrapperProps,
+  inputProps,
+  toggleButtonProps,
+  prefix,
+  suffix
+}) => {
+  const inputWrapperClassNames = cx(styles$1["input-wrapper"], {
+    [styles$1["small"]]: size === "small",
+    [styles$1["large"]]: size === "large",
+    [styles$1["no-clear-button"]]: disableClearButton,
+    [styles$1["no-toggle-button"]]: disableToggleButton,
+    [styles$1["disabled"]]: disabled || readOnly
+  });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: inputWrapperRef,
+      ...htmlInputWrapperProps,
+      className: cx(inputWrapperClassNames, htmlInputWrapperProps?.className),
+      children: [
+        prefix ? /* @__PURE__ */ jsx("div", { className: styles$1["prefix"], children: prefix }) : null,
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            id,
+            placeholder,
+            disabled,
+            readOnly,
+            required,
+            ...inputProps,
+            className: cx(styles$1["input"], inputProps?.className, {
+              [styles$1["error"]]: error
+            })
+          }
+        ),
+        suffix ? /* @__PURE__ */ jsx("div", { className: styles$1["suffix"], children: suffix }) : null,
+        /* @__PURE__ */ jsxs("div", { className: styles$1["buttons-wrapper"], children: [
+          disableClearButton ? null : /* @__PURE__ */ jsx("div", { className: styles$1["close-button-wrapper"], children: /* @__PURE__ */ jsx(
+            Button,
+            {
+              icon: SvgClose,
+              "aria-label": "clear selection",
+              appearance: "ghost",
+              size: "small",
+              className: styles$1["close-button"],
+              onClick: () => {
+                onClear?.();
+              }
+            }
+          ) }),
+          disableToggleButton ? null : /* @__PURE__ */ jsx("div", { className: styles$1["toggle-button-wrapper"], children: /* @__PURE__ */ jsx(
+            Button,
+            {
+              icon: SvgChevronRight,
+              "aria-label": "toggle menu",
+              appearance: "ghost",
+              size: "small",
+              disabled,
+              ...toggleButtonProps,
+              className: cx(
+                styles$1["toggle-button"],
+                toggleButtonProps?.className
+              )
+            }
+          ) })
+        ] })
+      ]
+    }
+  );
+};
+SelectFieldInput.displayName = "SelectFieldInput";
+
+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 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: errorAriaLiveProp = "assertive",
+      required,
+      disabled,
+      readOnly,
+      prefix,
+      suffix,
+      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(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: className ? `${styles$1["search-field"]} ${className}` : styles$1["search-field"],
+          style: { ...layoutStyles, ...style },
+          ref: wrapperDivRef,
+          children: [
+            /* @__PURE__ */ jsx(
+              SelectFieldLabel,
+              {
+                label,
+                labelNode,
+                hideLabel,
+                getLabelProps,
+                required
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              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,
+                  onFocus: handleFocus,
+                  onBlur: handleBlur
+                }),
+                size,
+                error: !!error,
+                prefix,
+                suffix
+              }
+            ),
+            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,
+                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,
+                    getMenuProps,
+                    getItemProps,
+                    highlightedIndex,
+                    selectedOption,
+                    hasMore,
+                    onLoadMore: handleLoadMore,
+                    loading,
+                    loadingMore,
+                    disabled: isDisabledOrReadOnly,
+                    style: {
+                      paddingInline: 24,
+                      paddingBlockEnd: 24
+                    }
+                  }
+                )
+              }
+            )
+          ]
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: className ? `${styles$1["search-field"]} ${className}` : styles$1["search-field"],
+        style: { ...layoutStyles, ...style },
+        children: [
+          /* @__PURE__ */ jsx(
+            SelectFieldLabel,
+            {
+              label,
+              labelNode,
+              hideLabel,
+              getLabelProps,
+              required
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            SelectFieldInput,
+            {
+              disabled,
+              readOnly,
+              required,
+              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 || shouldAriaLive ? errorAriaLiveProp : "off",
+              description
+            }
+          ) : null,
+          /* @__PURE__ */ jsx(
+            FieldPopover,
+            {
+              id: `${id}-popover`,
+              referenceElement: inputWrapperRef,
+              open: isOpen && displayAs === "popover",
+              onClickOutside: closeMenu,
+              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 };
+//# sourceMappingURL=SelectFieldSync-0CL0RTpg.js.map