@servicetitan/anvil2 3.15.1 → 3.16.0

package/dist/index.js

@@ -2,7 +2,7 @@ import './index2.css';export { DndSort, DndSortCard, DndSortZone } from './DndSo
 export { A as Alert } from './Alert-lLo1N7Tj.js';
 import { P as Popover, a as usePopoverContext } from './AiMark-BfmK30vL.js';
 export { A as AiMark } from './AiMark-BfmK30vL.js';
-export { A as Announcement } from './Announcement-Cnz80WGx.js';
+export { A as Announcement } from './Announcement-PfnsVVz1.js';
 export { A as Avatar } from './Avatar-Ba662b3z.js';
 export { A as AvatarGroup } from './Avatar-CwnLhw9m.js';
 export { B as Badge } from './Badge-BNrYBFiU.js';
@@ -22,10 +22,10 @@ export { D as DateFieldYearless } from './DateFieldYearless-CMm8vtz_.js';
 export { D as DateFieldYearlessRange } from './DateFieldYearlessRange-BHHs-Z1Q.js';
 export { D as DaysOfTheWeek } from './DaysOfTheWeek-BHXxs0Bo.js';
 export { D as Details } from './Details-BxqP-5vp.js';
-import { D as Dialog } from './Dialog-B9llUKJz.js';
+import { D as Dialog } from './Dialog-_tHqOsbr.js';
 export { D as Divider } from './Divider-C7fp5Xb6.js';
 export { D as Dnd } from './index-Bldaza5t.js';
-export { D as Drawer } from './Drawer-Bjd2XLUX.js';
+export { D as Drawer } from './Drawer-D-ThWNp0.js';
 export { D as DrillDown, b as DrillDownContent, c as DrillDownFooter, a as DrillDownHeader, d as DrillDownNextButton, e as DrillDownPrevButton, u as useDrillDown } from './useDrilldown-BOeeNUsy.js';
 export { E as EditCard } from './EditCard-B6l2vhBS.js';
 export { F as FieldLabel } from './FieldLabel-ThEmUiAq.js';
@@ -49,17 +49,17 @@ import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { createContext, forwardRef, useContext, useState, useLayoutEffect, useRef, useEffect, useMemo, useCallback } from 'react';
 import { c as cx } from './index-De1g9FRV.js';
 import { u as useMergeRefs } from './useMergeRefs-Dfmtq9cI.js';
-export { P as Pagination } from './Pagination-Su4VBAhT.js';
+export { P as Pagination } from './Pagination-Bsl99RRI.js';
 export { P as Popover } from './Popover-CIh1CsoJ.js';
-export { P as ProgressBar } from './ProgressBar-TQ0fPmn9.js';
+export { P as ProgressBar } from './ProgressBar-zPKYv4Il.js';
 export { R as Radio } from './Radio-C1VnatcL.js';
 export { S as SearchField } from './SearchField-ChoNtw8w.js';
 export { S as SegmentedControl, a as SegmentedControlSegment } from './SegmentedControl-BHVJmmTH.js';
 export { S as SelectCard } from './SelectCard-DrmMU_GD.js';
-export { S as SelectField, a as SelectFieldSync } from './SelectFieldSync-BN2ebLWT.js';
-export { M as MultiSelectField, a as MultiSelectFieldSync } from './MultiSelectFieldSync-DpPO0cya.js';
-export { S as SelectMenu, a as SelectMenuSync } from './SelectMenuSync-DuPf8KCc.js';
-export { M as MultiSelectMenu, a as MultiSelectMenuSync } from './MultiSelectMenuSync-BN_3moW_.js';
+export { S as SelectField, a as SelectFieldSync } from './SelectFieldSync-SS7FELT3.js';
+export { M as MultiSelectField, a as MultiSelectFieldSync } from './MultiSelectFieldSync-DuImKXuj.js';
+export { S as SelectMenu, a as SelectMenuSync } from './SelectMenuSync-CPpE6vUG.js';
+export { M as MultiSelectMenu, a as MultiSelectMenuSync } from './MultiSelectMenuSync-BhNXsgAN.js';
 export { S as SelectTrigger } from './SelectTrigger-B5h-aqhl.js';
 export { S as SideNav } from './SideNav-CHG7i8Dy.js';
 export { Skeleton, SkeletonCircle, SkeletonPill, SkeletonRectangle, SkeletonText } from './Skeleton.js';
@@ -72,8 +72,8 @@ import { T as Text } from './Text-rihxXHSe.js';
 export { T as Textarea } from './Textarea-ppapJUwh.js';
 import { T as TextField } from './TextField-Bxd-Qzoi.js';
 export { T as TimeField } from './TimeField-Hwt_oRbg.js';
-export { T as Toaster } from './Toaster-BtP_HezK.js';
-export { t as toast } from './Toaster-BryQmKe1.js';
+export { T as Toaster } from './Toaster-dVGVVcat.js';
+export { t as toast } from './Toaster-SqkX0Kes.js';
 export { T as Toolbar } from './Toolbar-CMulzswf.js';
 import { T as Tooltip } from './Tooltip-C_VcYS9P.js';
 export { u as useAccessibleColor } from './useAccessibleColor-BYKjkGRg.js';

package/dist/src/components/Pagination/Pagination.d.ts

@@ -35,6 +35,20 @@ export type PaginationProps = Omit<BasePaginationProps, "children"> & DataTracki
     onItemsPerPageChange?: (itemsPerPage: number) => void;
     /** Label before the page-size menu. Defaults to `"Rows per page"`. */
     itemsPerPageLabel?: string;
+    /**
+     * Full item-range string, shown in the counter and after the live region's
+     * `Page {page} of {totalPages}` prefix. Called with the first visible item
+     * (1-based), the last visible item, and the total. When the total is `0`,
+     * all three arguments are `0`. Not called when `totalItemCount` is omitted.
+     * When this prop is omitted, the range reads `"1 - 10 of 100 items"`
+     * (or `"0 items"`).
+     *
+     * @example
+     * itemRangeFormatter={(first, last, total) =>
+     *   total === 0 ? "0 files" : `${first} - ${last} of ${total} files`
+     * }
+     */
+    itemRangeFormatter?: (firstItem: number, lastItem: number, totalItemCount: number) => string;
 };
 /**
  * Paged navigation for a result set. Owns page-list generation, overflow,
@@ -70,4 +84,18 @@ export declare const Pagination: import('react').ForwardRefExoticComponent<Omit<
     onItemsPerPageChange?: (itemsPerPage: number) => void;
     /** Label before the page-size menu. Defaults to `"Rows per page"`. */
     itemsPerPageLabel?: string;
+    /**
+     * Full item-range string, shown in the counter and after the live region's
+     * `Page {page} of {totalPages}` prefix. Called with the first visible item
+     * (1-based), the last visible item, and the total. When the total is `0`,
+     * all three arguments are `0`. Not called when `totalItemCount` is omitted.
+     * When this prop is omitted, the range reads `"1 - 10 of 100 items"`
+     * (or `"0 items"`).
+     *
+     * @example
+     * itemRangeFormatter={(first, last, total) =>
+     *   total === 0 ? "0 files" : `${first} - ${last} of ${total} files`
+     * }
+     */
+    itemRangeFormatter?: (firstItem: number, lastItem: number, totalItemCount: number) => string;
 } & import('react').RefAttributes<HTMLDivElement>>;

package/dist/src/internal/components/LoadMoreSlot.d.ts

@@ -0,0 +1,13 @@
+type LoadMoreSlotProps = {
+    /** Shows the spinner in place of the button. */
+    loadingMore: boolean;
+    onLoadMore: () => void;
+    /** Reports whether the button has focus, including `false` when it unmounts. */
+    onFocusChange: (focused: boolean) => void;
+};
+/**
+ * Content of the option panels' load-more slot: the Load more button, or a
+ * spinner while a page loads.
+ */
+export declare const LoadMoreSlot: ({ loadingMore, ...buttonProps }: LoadMoreSlotProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/src/internal/hooks/useAutoLoadMore.d.ts

@@ -0,0 +1,40 @@
+type Keyed = {
+    id: string | number;
+};
+type AutoLoadMoreState = {
+    isOpen: boolean;
+    hasMore: boolean;
+    loading: boolean;
+    loadingMore: boolean;
+    disableAutoLoadMore?: boolean;
+    items: readonly Keyed[];
+};
+/**
+ * Decides when a lazy option list may request its next page on its own.
+ *
+ * `canAutoLoad` is false while the list is closed, out of pages, loading, or
+ * opted out, and while Load more has focus: focusing it scrolls it into view,
+ * and auto-loading then would swap it for the spinner under a keyboard user
+ * and send their Enter to the input. Feed `onLoadMoreFocusChange` from the
+ * button.
+ *
+ * `isStalled` reports that the last load-more page added no rows, as a
+ * rejected or empty load does. Auto-load stops while it holds so a failing
+ * loader is not retried in a loop; the Load more button still retries, and
+ * closing the list clears it, so opening it again retries too. It is keyed to
+ * the rows (count and last id) rather than to request flags: any new rows, from
+ * a successful retry or a new search, re-arm auto-load, even when a loader that
+ * resolves in a microtask batches `loadingMore` true and false into one render.
+ *
+ * Call it before the effect that auto-loads: effects run in call order, so the
+ * stall state is current by the time that effect reads it in the same commit.
+ * `rowsKey` changes whenever the rows do, for effects that must re-run on a
+ * new page or result set.
+ */
+export declare function useAutoLoadMore({ isOpen, hasMore, loading, loadingMore, disableAutoLoadMore, items, }: AutoLoadMoreState): {
+    canAutoLoad: boolean;
+    isStalled: () => boolean;
+    rowsKey: string;
+    onLoadMoreFocusChange: import('react').Dispatch<import('react').SetStateAction<boolean>>;
+};
+export {};

package/dist/src/internal/hooks/useFocusReturnOnUnmount.d.ts

@@ -0,0 +1,10 @@
+import { FocusEvent } from 'react';
+/**
+ * Returns focus to where it came from when the element unmounts while focused.
+ * Chromium fires focusout with a null `relatedTarget` when a focused node is
+ * removed, which a popover reads as focus leaving it.
+ */
+export declare function useFocusReturnOnUnmount<T extends HTMLElement>(): {
+    ref: (node: T | null) => void;
+    onFocus: (event: FocusEvent<T>) => void;
+};

package/dist/{syncFilterUtils-ClEj4Oeg.js → syncFilterUtils-SMop8ckR.js}

@@ -1,17 +1,16 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { S as Spinner } from './Spinner-B7tTWcP6.js';
-import { B as Button } from './Button-Dn6-01xl.js';
 import { c as cx } from './index-De1g9FRV.js';
 import { useState, useRef, useCallback, useEffect, useMemo, forwardRef, useId, useImperativeHandle } from 'react';
 import { C as COMMON_PART, A as ANV_PART_ATTR } from './anvParts-DFVq7-Cm.js';
-import { u as useIntersectionObserver } from './useIntersectionObserver-BEmMDO3P.js';
 import { T as Text } from './Text-rihxXHSe.js';
 import { D as Divider } from './Divider-C7fp5Xb6.js';
 import { u as useMergeRefs } from './useMergeRefs-Dfmtq9cI.js';
-import { S as SrOnly } from './SrOnly-pnf8ajnh.js';
 import { I as Icon } from './Icon-B5zwN7GD.js';
 import { S as SvgCheck } from './check-Cf67OWrZ.js';
 import { i as isThenable, c as OptionRow, d as OptionRowSideContent, e as OptionCheckbox, f as OptionContentArea, b as useAdaptiveView } from './useInvalidateOnOptionsChange-BD2VBpbK.js';
+import { B as Button } from './Button-Dn6-01xl.js';
+import { S as SrOnly } from './SrOnly-pnf8ajnh.js';
 import { d as defaultRangeExtractor, u as useVirtualizer } from './index-DXeGMe23.js';
 import { S as SvgAdd } from './add-BcQkAUip.js';
 import { m as matchSorter } from './match-sorter.esm-CGAauEiU.js';
@@ -261,20 +260,106 @@ const SelectOption = ({
   );
 };
 
-const InView = ({
-  children,
-  onVisibilityChange,
-  rootMargin
+function useFocusReturnOnUnmount() {
+  const nodeRef = useRef(null);
+  const returnToRef = useRef(null);
+  const ref = useCallback((node) => {
+    const previous = nodeRef.current;
+    nodeRef.current = node;
+    if (node || !previous) return;
+    const root = previous.getRootNode();
+    if (previous !== root.activeElement) return;
+    const returnTo = returnToRef.current;
+    if (returnTo?.isConnected) returnTo.focus({ preventScroll: true });
+  }, []);
+  const onFocus = useCallback((event) => {
+    if (event.relatedTarget instanceof HTMLElement) {
+      returnToRef.current = event.relatedTarget;
+    }
+  }, []);
+  return { ref, onFocus };
+}
+
+const LoadMoreSlot = ({
+  loadingMore,
+  ...buttonProps
+}) => loadingMore ? /* @__PURE__ */ jsxs(Fragment, { children: [
+  /* @__PURE__ */ jsx(Spinner, { size: "small" }),
+  /* @__PURE__ */ jsx(SrOnly, { children: "Loading more..." })
+] }) : /* @__PURE__ */ jsx(LoadMoreButton, { ...buttonProps });
+const LoadMoreButton = ({
+  onLoadMore,
+  onFocusChange
 }) => {
-  const { ref } = useIntersectionObserver({
-    onChange: (isIntersecting) => {
-      onVisibilityChange?.(isIntersecting);
-    },
-    rootMargin
-  });
-  return /* @__PURE__ */ jsx("div", { ref, children });
+  const focus = useFocusReturnOnUnmount();
+  const onFocusChangeRef = useRef(onFocusChange);
+  onFocusChangeRef.current = onFocusChange;
+  useEffect(() => () => onFocusChangeRef.current(false), []);
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      appearance: "secondary",
+      size: "small",
+      onMouseDown: (e) => e.preventDefault(),
+      ref: focus.ref,
+      onFocus: (e) => {
+        focus.onFocus(e);
+        onFocusChange(true);
+      },
+      onBlur: () => onFocusChange(false),
+      onClick: onLoadMore,
+      ...{ [ANV_PART_ATTR]: COMMON_PART.loadMoreButton },
+      children: "Load more"
+    }
+  );
 };
 
+function useAutoLoadMore({
+  isOpen,
+  hasMore,
+  loading,
+  loadingMore,
+  disableAutoLoadMore,
+  items
+}) {
+  const rowsKey = `${items.length}:${items[items.length - 1]?.id ?? ""}`;
+  const rowsKeyRef = useRef(rowsKey);
+  rowsKeyRef.current = rowsKey;
+  const stalledAtRef = useRef(null);
+  const keyAtStartRef = useRef(null);
+  useEffect(() => {
+    if (loading) {
+      stalledAtRef.current = null;
+      keyAtStartRef.current = null;
+      return;
+    }
+    if (loadingMore) {
+      keyAtStartRef.current ??= rowsKey;
+      return;
+    }
+    if (keyAtStartRef.current === null) return;
+    stalledAtRef.current = rowsKey === keyAtStartRef.current ? rowsKey : null;
+    keyAtStartRef.current = null;
+  }, [loading, loadingMore, rowsKey]);
+  useEffect(() => {
+    if (isOpen) return;
+    stalledAtRef.current = null;
+    keyAtStartRef.current = null;
+  }, [isOpen]);
+  const isStalled = useCallback(
+    () => stalledAtRef.current === rowsKeyRef.current,
+    []
+  );
+  const [loadMoreFocused, setLoadMoreFocused] = useState(false);
+  const canAutoLoad = isOpen && hasMore && !loading && !loadingMore && !disableAutoLoadMore && !loadMoreFocused;
+  return {
+    canAutoLoad,
+    isStalled,
+    rowsKey,
+    onLoadMoreFocusChange: setLoadMoreFocused
+  };
+}
+
 const useOptionsSections = (items, sectionsMeta) => {
   return useMemo(() => {
     if (sectionsMeta.length === 0) {
@@ -436,11 +521,43 @@ const OptionsPanel = forwardRef(
     const anyPinnedLoading = sectionsMeta.some(
       (s) => s.type === "pinned" && s.loading
     );
-    const handleLoaderVisibilityChange = (visible) => {
-      if (visible && !disableAutoLoadMore) {
-        onLoadMore();
-      }
-    };
+    const loadMoreSentinelRef = useRef(null);
+    const { canAutoLoad, isStalled, rowsKey, onLoadMoreFocusChange } = useAutoLoadMore({
+      isOpen,
+      hasMore,
+      loading,
+      loadingMore,
+      disableAutoLoadMore,
+      items
+    });
+    const onLoadMoreRef = useRef(onLoadMore);
+    onLoadMoreRef.current = onLoadMore;
+    const canAutoLoadRef = useRef(canAutoLoad);
+    canAutoLoadRef.current = canAutoLoad;
+    useEffect(() => {
+      if (!canAutoLoad || isStalled()) return;
+      const sentinel = loadMoreSentinelRef.current;
+      const scroller = scrollerRef.current;
+      if (!sentinel || !scroller) return;
+      let active = true;
+      const observer = new IntersectionObserver(
+        (entries) => {
+          if (!active) return;
+          const visible = entries.some((entry) => entry.isIntersecting);
+          if (visible && canAutoLoadRef.current && !isStalled()) {
+            active = false;
+            observer.disconnect();
+            onLoadMoreRef.current();
+          }
+        },
+        { threshold: 0, root: scroller }
+      );
+      observer.observe(sentinel);
+      return () => {
+        active = false;
+        observer.disconnect();
+      };
+    }, [canAutoLoad, rowsKey, isStalled]);
     const sections = useOptionsSections(items, sectionsMeta);
     const renderItem = (item, index) => /* @__PURE__ */ jsx(
       SelectOption,
@@ -519,26 +636,25 @@ const OptionsPanel = forwardRef(
         }
       ),
       isOpen && /* @__PURE__ */ jsx(Fragment, { children: loading || anyPinnedLoading ? /* @__PURE__ */ jsx("div", { role: "presentation", className: styles$1["empty"], children: /* @__PURE__ */ jsx(Spinner, { size: "medium" }) }) : items.length > 0 ? renderSections() : /* @__PURE__ */ jsx("div", { role: "presentation", className: styles$1["empty"], children: /* @__PURE__ */ jsx(Text, { subdued: true, size: "small", children: "No match found" }) }) }),
-      loadingMore ? /* @__PURE__ */ jsxs("div", { role: "presentation", className: styles$1["load-more"], children: [
-        /* @__PURE__ */ jsx(Spinner, { size: "small" }),
-        /* @__PURE__ */ jsx(SrOnly, { children: "Loading more..." })
-      ] }) : hasMore && !loading ? /* @__PURE__ */ jsx("div", { role: "presentation", children: /* @__PURE__ */ jsx(
-        InView,
-        {
-          onVisibilityChange: handleLoaderVisibilityChange,
-          rootMargin: "0px 0px -100px 0px",
-          children: /* @__PURE__ */ jsx("div", { className: styles$1["load-more"], children: /* @__PURE__ */ jsx(
-            Button,
-            {
-              appearance: "secondary",
-              size: "small",
-              onClick: onLoadMore,
-              ...{ [ANV_PART_ATTR]: COMMON_PART.loadMoreButton },
-              children: "Load more"
-            }
-          ) })
-        }
-      ) }) : null
+      hasMore && !loading ? /* @__PURE__ */ jsxs("div", { role: "presentation", children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: loadMoreSentinelRef,
+            className: styles$1["scroll-sentinel"],
+            role: "presentation",
+            "aria-hidden": "true"
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: styles$1["load-more"], children: /* @__PURE__ */ jsx(
+          LoadMoreSlot,
+          {
+            loadingMore,
+            onLoadMore,
+            onFocusChange: onLoadMoreFocusChange
+          }
+        ) })
+      ] }) : null
     ] }) });
   }
 );
@@ -679,20 +795,27 @@ const VirtualizedOptionsPanel = forwardRef(
     }));
     const onLoadMoreRef = useRef(onLoadMore);
     onLoadMoreRef.current = onLoadMore;
+    const { canAutoLoad, isStalled, rowsKey, onLoadMoreFocusChange } = useAutoLoadMore({
+      isOpen,
+      hasMore,
+      loading,
+      loadingMore,
+      disableAutoLoadMore,
+      items
+    });
+    const loadMoreInFlightRef = useRef(false);
+    useEffect(() => {
+      if (!loadingMore) loadMoreInFlightRef.current = false;
+    }, [isOpen, loadingMore, rowsKey]);
     useEffect(() => {
-      if (!hasMore || loadingMore || disableAutoLoadMore) return;
+      if (!canAutoLoad || loadMoreInFlightRef.current || isStalled()) return;
       const lastItem = virtualItems[virtualItems.length - 1];
       if (!lastItem) return;
       if (lastItem.index >= virtualRows.length - 1) {
+        loadMoreInFlightRef.current = true;
         onLoadMoreRef.current();
       }
-    }, [
-      hasMore,
-      loadingMore,
-      disableAutoLoadMore,
-      virtualItems,
-      virtualRows.length
-    ]);
+    }, [canAutoLoad, virtualItems, virtualRows.length]);
     const isSticky = useCallback(
       (index) => stickyIndices.includes(index),
       [stickyIndices]
@@ -740,22 +863,14 @@ const VirtualizedOptionsPanel = forwardRef(
         );
       }
       if (row.type === "load-more") {
-        if (loadingMore) {
-          return /* @__PURE__ */ jsxs("div", { role: "presentation", className: styles$1["load-more"], children: [
-            /* @__PURE__ */ jsx(Spinner, { size: "small" }),
-            /* @__PURE__ */ jsx(SrOnly, { children: "Loading more..." })
-          ] });
-        }
-        return /* @__PURE__ */ jsx("div", { role: "presentation", children: /* @__PURE__ */ jsx("div", { className: styles$1["load-more"], children: /* @__PURE__ */ jsx(
-          Button,
+        return /* @__PURE__ */ jsx("div", { role: "presentation", className: styles$1["load-more"], children: /* @__PURE__ */ jsx(
+          LoadMoreSlot,
           {
-            appearance: "secondary",
-            size: "small",
-            onClick: () => onLoadMoreRef.current(),
-            ...{ [ANV_PART_ATTR]: COMMON_PART.loadMoreButton },
-            children: "Load more"
+            loadingMore,
+            onLoadMore,
+            onFocusChange: onLoadMoreFocusChange
           }
-        ) }) });
+        ) });
       }
       return null;
     };
@@ -1241,4 +1356,4 @@ const sortByGroup = (options, groupSorter) => {
 };
 
 export { AddNewItemButton as A, OptionsPanel as O, VirtualizedOptionsPanel as V, useProcessedOptions as a, buildSelectItems as b, sortByGroup as c, defaultSyncFilter as d, toSelectItem as e, shouldShowAddNewItem as s, toSyncFilterFn as t, useSelectOrchestration as u };
-//# sourceMappingURL=syncFilterUtils-ClEj4Oeg.js.map
+//# sourceMappingURL=syncFilterUtils-SMop8ckR.js.map