@servicetitan/anvil2 3.0.6 → 3.0.8

package/dist/{Combobox-Cp7M4-4r.js → useInfiniteCombobox-C6TDFfds.js}

@@ -1,26 +1,26 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { createContext, useContext, useEffect, useMemo, useState, useRef, forwardRef, useId, useLayoutEffect } from 'react';
-import { P as Popover, u as usePopoverContext } from './Popover-8mTJoMy7.js';
-import { i as isMultiple, b as SELECT_ALL, a as defaultItemToKey, d as defaultItemToString, g as getScrollParent, A as ADD_NEW, S as SelectTriggerBase } from './SelectTriggerBase-Ds6I7Qbr.js';
+import { createContext, useContext, useEffect, useMemo, useState, useRef, forwardRef, useId, useLayoutEffect, useDeferredValue, useCallback } from 'react';
+import { P as Popover, u as usePopoverContext } from './Popover-Cq5tirFz.js';
+import { i as isMultiple, b as SELECT_ALL, a as defaultItemToKey, d as defaultItemToString, g as getScrollParent, A as ADD_NEW, S as SelectTriggerBase } from './SelectTriggerBase-BjIOERXr.js';
 import { c as cx } from './index-De1g9FRV.js';
 import { u as useDownshiftEnvironment, c as useMultipleSelection, b as useSelect, a as useCombobox$1 } from './downshift.esm-xtSnQp44.js';
 import { u as useLayoutPropsUtil } from './useLayoutPropsUtil-CB_zHDbW.js';
 import { l as listboxStyles } from './Listbox.module-K85jTwXo.js';
-import { T as Text } from './Text-BTzgTpqu.js';
+import { T as Text } from './Text-w2gWn4K6.js';
 import { D as Divider } from './Divider-CxtTyw8_.js';
 import { F as Flex } from './Flex-_orhvoxS.js';
 import { S as Spinner } from './Spinner-B7tTWcP6.js';
-import { l as listViewStyles } from './ListView.module-CKUQP3kf.js';
+import { s as styles$1 } from './ListView.module-DfqtCL3Q.js';
 import { I as Icon } from './Icon-feeG7gXA.js';
 import { c as checkboxStyles } from './Checkbox.module-CURNX27M.js';
 import { S as SvgCheckBox, a as SvgCheckBoxOutlineBlank } from './check_box-0U1tbEAd.js';
-import { A as Avatar } from './Avatar-B_cRQqKR.js';
+import { A as Avatar } from './Avatar-CdAIJ5VK.js';
 import { c as childrenToString } from './childrenToString-Bz9MqbHb.js';
 import { useTrackingId } from './useTrackingId.js';
 import { S as SvgCheck } from './check-Cf67OWrZ.js';
 import { m as matchSorter } from './match-sorter.esm-CGAauEiU.js';
 
-import './Combobox.css';const ComboboxContext = createContext(null);
+import './useInfiniteCombobox.css';const ComboboxContext = createContext(null);
 const useCombobox = function() {
   const context = useContext(
     ComboboxContext
@@ -31,24 +31,6 @@ const useCombobox = function() {
   return context;
 };
 
-const ComboboxEmptyElement = function({
-  children
-}) {
-  const { items, setHasEmpty } = useCombobox();
-  useEffect(() => {
-    setHasEmpty?.(true);
-    return () => {
-      setHasEmpty?.(false);
-    };
-  });
-  return !items.length ? children : null;
-};
-const ComboboxEmpty = function({
-  children
-}) {
-  return /* @__PURE__ */ jsx(ComboboxEmptyElement, { children });
-};
-
 const combobox = "_combobox_8ya2y_2";
 const listview = "_listview_8ya2y_13";
 const empty = "_empty_8ya2y_18";
@@ -72,6 +54,24 @@ const styles = {
 	scrolled: scrolled
 };
 
+const ComboboxEmptyElement = function({
+  children
+}) {
+  const { items, setHasEmpty } = useCombobox();
+  useEffect(() => {
+    setHasEmpty?.(true);
+    return () => {
+      setHasEmpty?.(false);
+    };
+  });
+  return !items.length ? /* @__PURE__ */ jsx("div", { className: styles["empty"], children }) : null;
+};
+const ComboboxEmpty = function({
+  children
+}) {
+  return /* @__PURE__ */ jsx(ComboboxEmptyElement, { children });
+};
+
 function useGroups({
   items,
   groupBy,
@@ -582,7 +582,7 @@ const ComboboxItemVisual = forwardRef(
     });
     const listViewOptionClassNames = cx(
       styles["listview-option"],
-      listViewStyles["listview-option"],
+      styles$1["listview-option"],
       {
         [styles["listview-option-disabled"]]: disabled
       }
@@ -595,7 +595,7 @@ const ComboboxItemVisual = forwardRef(
         ...rootDivProps,
         className: listViewOptionClassNames,
         children: [
-          !hideCheckbox ? /* @__PURE__ */ jsx("div", { className: cx(styles["cell"], listViewStyles["cell"]), children: /* @__PURE__ */ jsx("div", { className: checkboxStyles["wrapper"], children: /* @__PURE__ */ jsxs("div", { className: checkboxClassNames, children: [
+          !hideCheckbox ? /* @__PURE__ */ jsx("div", { className: cx(styles["cell"], styles$1["cell"]), children: /* @__PURE__ */ jsx("div", { className: checkboxStyles["wrapper"], children: /* @__PURE__ */ jsxs("div", { className: checkboxClassNames, children: [
             /* @__PURE__ */ jsx(
               "input",
               {
@@ -722,7 +722,7 @@ const ComboboxGroupList = function({
           ...getMenuProps(rest),
           ref: listRef,
           "data-anv": "combobox-list",
-          className: cx(styles["listview"], listViewStyles["listview"], {
+          className: cx(styles["listview"], styles$1["listview"], {
             [styles.scrolled]: isScrolled
           }),
           style: {
@@ -1444,7 +1444,7 @@ const ComboboxListElement = function({
           ...getMenuProps(rest),
           ref: listRef,
           "data-anv": "combobox-list",
-          className: cx(styles["listview"], listViewStyles["listview"], {
+          className: cx(styles["listview"], styles$1["listview"], {
             [styles.scrolled]: isScrolled
           }),
           style: {
@@ -2471,5 +2471,180 @@ const Combobox = Object.assign(
 );
 const ComboboxElement = Combobox;
 
-export { Combobox as C, ComboboxElement as a, ComboboxSelect as b, ComboboxList as c };
-//# sourceMappingURL=Combobox-Cp7M4-4r.js.map
+const SCROLL_THRESHOLD = 0.64;
+function useInfiniteCombobox({
+  query,
+  queryInitialItems,
+  initialItems = [],
+  initialPage = 0,
+  initialLoading = false,
+  initialInputValue,
+  defaultInputValue,
+  initialSelectedItem,
+  defaultSelectedItem,
+  initialSelectedItems,
+  defaultSelectedItems,
+  updateOnInputValueChange = true,
+  updateOnSelectedItemChange = true,
+  updateOnSelectedItemsChange = true,
+  queryOnFirstRender = false,
+  shouldTriggerQuery: shouldTriggerQueryProp
+}) {
+  const [items, setItems] = useState(initialItems);
+  const deferredItems = useDeferredValue(items);
+  const [page, setPage] = useState(initialPage);
+  const [loading, setLoading] = useState(initialLoading);
+  const deferredLoading = useDeferredValue(loading);
+  const [inputValue, setInputValue] = useState(
+    initialInputValue ?? defaultInputValue ?? ""
+  );
+  const [selectedItem, setSelectedItem] = useState(
+    initialSelectedItem ?? defaultSelectedItem ?? null
+  );
+  const [selectedItems, setSelectedItems] = useState(
+    initialSelectedItems ?? defaultSelectedItems ?? []
+  );
+  const scrollerRef = useRef(null);
+  const defaultShouldTriggerQuery = (element) => {
+    const totalScrollHeight = element.scrollHeight - element.clientHeight;
+    return element.scrollTop / totalScrollHeight > SCROLL_THRESHOLD;
+  };
+  const [triggerQueryCount, setTriggerQueryCount] = useState(0);
+  const triggerQueryCountRef = useRef(0);
+  const triggerQuery = () => {
+    setTriggerQueryCount((x) => x + 1);
+    triggerQueryCountRef.current += 1;
+  };
+  const [done, setDone] = useState(false);
+  const firstRenderRef = useRef(true);
+  const scrollTimeoutRef = useRef(false);
+  const loadingRef = useRef(false);
+  const setLoadingStateAndRef = (isLoading) => {
+    setLoading(isLoading);
+    loadingRef.current = isLoading;
+  };
+  const queryRetryCountRef = useRef(0);
+  useEffect(() => {
+    if (firstRenderRef.current && queryInitialItems) {
+      setItems(queryInitialItems());
+    }
+    if (firstRenderRef.current && !queryOnFirstRender) {
+      firstRenderRef.current = false;
+      return;
+    }
+    setLoadingStateAndRef(true);
+    const timeoutID = setTimeout(() => {
+      if (triggerQueryCount < triggerQueryCountRef.current) return;
+      query({
+        page,
+        inputValue,
+        selectedItem,
+        selectedItems
+      }).then((res) => {
+        queryRetryCountRef.current = 0;
+        if (triggerQueryCount < triggerQueryCountRef.current) return;
+        setLoadingStateAndRef(false);
+        setPage((x) => x + 1);
+        if (res == null || page > 0 && res.length === 0) {
+          setDone(true);
+        } else if (page === 0) {
+          setItems(() => [...res]);
+        } else {
+          setItems((prevItems) => [...prevItems, ...res]);
+        }
+      }).catch(() => {
+        queryRetryCountRef.current += 1;
+        if (queryRetryCountRef.current > 7) {
+          queryRetryCountRef.current = 0;
+          return;
+        } else {
+          setTimeout(
+            () => {
+              triggerQuery();
+            },
+            2 ** queryRetryCountRef.current * 160
+          );
+        }
+      });
+    }, 160);
+    return () => {
+      clearTimeout(timeoutID);
+    };
+  }, [triggerQueryCount]);
+  useLayoutEffect(() => {
+    setTimeout(() => {
+      if (scrollerRef.current && scrollerRef.current.scrollHeight > 0 && scrollerRef.current.clientHeight > 0 && scrollerRef.current.scrollHeight <= scrollerRef.current.clientHeight) {
+        triggerQuery();
+      }
+    }, 160);
+  }, [items]);
+  const isEmpty = items.length === 0 && page === 0;
+  const onStateChange = useCallback(
+    (changes) => {
+      if (isEmpty && "isOpen" in changes && changes.isOpen === true) {
+        triggerQuery();
+      }
+      const inputValueShouldUpdate = updateOnInputValueChange && "inputValue" in changes;
+      const selectedItemsShouldUpdate = updateOnSelectedItemsChange && "selectedItems" in changes && changes.selectedItems;
+      const selectedItemShouldUpdate = updateOnSelectedItemChange && "selectedItem" in changes && changes.selectedItem !== void 0;
+      if (inputValueShouldUpdate) {
+        setInputValue(changes.inputValue ?? "");
+      }
+      if (selectedItemsShouldUpdate) {
+        setSelectedItems(changes.selectedItems ?? []);
+      }
+      if (selectedItemShouldUpdate) {
+        setSelectedItem(changes.selectedItem);
+      }
+      if (inputValueShouldUpdate || selectedItemsShouldUpdate || selectedItemShouldUpdate) {
+        setPage(0);
+        setDone(false);
+        triggerQuery();
+      }
+    },
+    [
+      isEmpty,
+      updateOnInputValueChange,
+      updateOnSelectedItemsChange,
+      updateOnSelectedItemChange
+    ]
+  );
+  const onScroll = useCallback(
+    (e) => {
+      const element = e.currentTarget;
+      if (!scrollTimeoutRef.current && !loadingRef.current) {
+        setTimeout(() => {
+          const shouldTriggerQuery = shouldTriggerQueryProp ?? defaultShouldTriggerQuery;
+          if (shouldTriggerQuery(element) && !done) {
+            triggerQuery();
+          }
+          scrollTimeoutRef.current = false;
+        }, 40);
+        scrollTimeoutRef.current = true;
+      }
+    },
+    [done, shouldTriggerQueryProp]
+  );
+  return {
+    comboboxProps: {
+      items: deferredItems,
+      loading: deferredLoading,
+      initialInputValue,
+      defaultInputValue,
+      initialSelectedItem,
+      defaultSelectedItem,
+      initialSelectedItems,
+      defaultSelectedItems,
+      disableFilter: true,
+      // assume the query will return a filtered/sorted list
+      onStateChange
+    },
+    contentProps: {
+      onScroll,
+      scrollerRef
+    }
+  };
+}
+
+export { Combobox as C, ComboboxElement as a, ComboboxSelect as b, ComboboxList as c, useInfiniteCombobox as u };
+//# sourceMappingURL=useInfiniteCombobox-C6TDFfds.js.map