@servicetitan/anvil2 1.45.1 → 1.46.0

package/dist/internal/components/YearSelector/YearSelector.d.ts

@@ -0,0 +1,67 @@
+import { PassThroughProps } from '../../../types';
+export interface YearSelectorProps {
+    /**
+     * The minimum selectable year
+     * Defaults to 1900.
+     */
+    min?: number;
+    /**
+     * The maximum selectable year.
+     * Defaults to 2200.
+     */
+    max?: number;
+    /**
+     * The currently selected year
+     */
+    value?: number | null;
+    /**
+     * The default value of the selected year
+     */
+    defaultValue?: number;
+    /**
+     * The function to call when the selected year changes
+     *
+     * @param year - The year that is selected.
+     */
+    onChange?: (year: number | null) => void;
+    /**
+     * The function to call when the selected year is affirmatively changed.
+     * This is called when the user confirms the selection by pressing Enter, pressing Space, or clicking.
+     *
+     * @param year - The year that is selected.
+     */
+    onConfirm?: (year: number | null) => void;
+    /**
+     * If a `value` or `defaultValue` is not provided, this will be used as the starting scroll position (and initial focus for accessibility).
+     */
+    startingYear?: number;
+    /**
+     * The number of columns to display.
+     * @default 2
+     */
+    columns?: number;
+    /**
+     * The class name to apply to the component.
+     */
+    className?: string;
+    /**
+     * Controls whether a year can be deselected, i.e. set to null.
+     * @default false
+     */
+    required?: boolean;
+    /**
+     * Controls whether the component allows the user to select a year.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * The aria-label for the component.
+     * @default "Year selection"
+     */
+    ariaLabel?: string;
+    /**
+     * Props forwarded onto the root element of the component.
+     */
+    rootProps?: PassThroughProps<"div">;
+}
+export declare const YearSelector: import('react').ForwardRefExoticComponent<YearSelectorProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/internal/components/YearSelector/index.d.ts

@@ -0,0 +1 @@
+export { YearSelector, type YearSelectorProps } from './YearSelector';

package/dist/internal/components/YearSelector/internal/YearItem.d.ts

@@ -0,0 +1,10 @@
+import { ComponentPropsWithoutRef } from 'react';
+type YearItemProps = Omit<ComponentPropsWithoutRef<"div">, "onChange"> & {
+    year: number;
+    onChange: (year: number) => void;
+    selected: boolean;
+    pseudoFocused: boolean;
+    disabled: boolean;
+};
+export declare const YearItem: ({ year, onChange, selected, pseudoFocused, disabled, onFocus, ...rest }: YearItemProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/internal/components/YearSelector/internal/useYearSelectorKeys.d.ts

@@ -0,0 +1,19 @@
+export type UseYearSelectorKeysParams = {
+    columns: number;
+    scrollToYear: (year: number, { focus }: {
+        focus?: boolean;
+    }) => void;
+    initialFocus: number;
+    onSelect: (year: number | null) => void;
+    onConfirm: () => void;
+    min: number;
+    max: number;
+    disabled: boolean;
+    pseudoFocused: number;
+    setPseudoFocused: (year: number) => void;
+    required: boolean;
+};
+export type UseYearSelectorKeysReturn = {
+    listRef: React.RefObject<HTMLDivElement>;
+};
+export declare const useYearSelectorKeys: ({ columns, scrollToYear, initialFocus, onSelect, onConfirm, pseudoFocused, setPseudoFocused, min, max, disabled, required, }: UseYearSelectorKeysParams) => UseYearSelectorKeysReturn;

package/dist/internal/hooks/index.d.ts

@@ -14,4 +14,5 @@ export * from './usePopoverCloseDelayWorkaround';
 export * from './usePopoverSupport';
 export * from './usePopoverTransitionStates';
 export * from './usePrevious';
+export * from './useContainerQuery';
 export * from './useTypeAhead';

package/dist/internal/hooks/useContainerQuery/index.d.ts

@@ -0,0 +1 @@
+export { useContainerQuery, type ContainerQueryReturnProps, } from './useContainerQuery';

package/dist/internal/hooks/useContainerQuery/useContainerQuery.d.ts

@@ -0,0 +1,46 @@
+import { RefObject } from 'react';
+/**
+ * Return type for the useContainerQuery hook
+ */
+export type ContainerQueryReturnProps = {
+    /**
+     * The breakpoint name
+     */
+    name: "xs" | "sm" | "md" | "lg" | "xl" | "xxl";
+    /**
+     * Minimum width for this breakpoint
+     */
+    min: number | undefined;
+    /**
+     * Maximum width for this breakpoint
+     */
+    max: number | undefined;
+    /**
+     * Current container width
+     */
+    containerWidth: number;
+    /**
+     * Current container height
+     */
+    containerHeight: number;
+};
+/**
+ * Custom hook for detecting current breakpoint based on container dimensions.
+ *
+ * Features:
+ * - Detects current breakpoint based on container width instead of viewport width
+ * - Supports all standard breakpoints (xs, sm, md, lg, xl, xxl)
+ * - Provides container dimensions information
+ * - Uses hammer-token breakpoint values for consistency
+ * - Listens for container resize events using ResizeObserver
+ * - Supports optional disable functionality
+ * - Uses container element dimensions for accurate measurements
+ *
+ * @param containerRef - React ref to the container element to observe
+ * @param props - Optional configuration object
+ * @param props.disable - Whether to disable the hook
+ * @returns Current breakpoint information or undefined if disabled
+ */
+export declare const useContainerQuery: (containerRef: RefObject<HTMLElement>, props?: {
+    disable?: boolean;
+}) => ContainerQueryReturnProps | undefined;

package/dist/internal/hooks/useFocusWithin/useFocusWithin.d.ts

@@ -1,33 +1,28 @@
+import { FocusEventHandler } from 'react';
 export interface UseFocusWithinOptions {
-    onFocus?: (event: FocusEvent) => void;
-    onBlur?: (event: FocusEvent) => void;
+    onFocus?: (event: React.FocusEvent) => void;
+    onBlur?: (event: React.FocusEvent) => void;
 }
-export interface UseFocusWithinReturnValue<T extends HTMLElement = any> {
-    ref: React.RefObject<T>;
-    focused: boolean;
+export interface UseFocusWithinReturnValue<T extends HTMLElement = HTMLElement> {
+    props: {
+        onFocus: FocusEventHandler<T>;
+        onBlur: FocusEventHandler<T>;
+    };
 }
 /**
  * Custom hook for tracking focus state within a DOM element.
  *
- * Features:
- * - Tracks whether any child element has focus
- * - Provides a ref object to attach to the target element
- * - Handles focus events with proper cleanup
- * - Supports custom onFocus and onBlur callbacks
- * - Prevents false blur events when focus moves between children
- * - Automatically cleans up event listeners on unmount
- *
  * @param options Configuration options for the hook
  * @param options.onFocus Optional callback when focus enters the element
  * @param options.onBlur Optional callback when focus leaves the element
- * @returns Object containing ref and focused state
+ * @returns Object containing props for the element
  *
  * @example
- * const { ref, focused } = useFocusWithin({
+ * const { props } = useFocusWithin({
  *   onFocus: () => console.log('Focus entered'),
  *   onBlur: () => console.log('Focus left')
  * });
  *
- * return <div ref={ref} className={focused ? 'focused' : ''}>Content</div>;
+ * return <div {...props}>Content</div>;
  */
 export declare function useFocusWithin<T extends HTMLElement = any>({ onBlur, onFocus, }?: UseFocusWithinOptions): UseFocusWithinReturnValue<T>;

package/dist/types/PassThroughProps.d.ts

@@ -0,0 +1,4 @@
+import { ComponentPropsWithoutRef, ComponentPropsWithRef } from 'react';
+export type DataAttributes = Record<`data-${string}`, string>;
+export type PassThroughProps<T extends keyof JSX.IntrinsicElements> = ComponentPropsWithoutRef<T> & DataAttributes;
+export type PassThroughPropsWithRef<T extends keyof JSX.IntrinsicElements> = ComponentPropsWithRef<T> & DataAttributes;

package/dist/types/index.d.ts

@@ -4,3 +4,4 @@ export { type MaxLengthCounterProps } from './MaxLengthCounterProps';
 export * from './ianaZones';
 export * from './locales';
 export * from './props';
+export * from './PassThroughProps';

package/dist/{useDateFieldOrchestration-Cqa7dxtr.js → useDateFieldOrchestration-BNJCsRkS.js}

@@ -1,4 +1,4 @@
-import { D as DateTime } from './Calendar-Dq_of5A3.js';
+import { D as DateTime } from './Calendar-BQ5F2ENO.js';
 import { useRef, useState } from 'react';
 import { a as useKeyboardFocusables } from './useOnClickOutside-BHEWMLa9.js';
 
@@ -135,4 +135,4 @@ const useDateFieldOrchestration = ({
 };
 
 export { DateModeToPlaceholderMap as D, DateModeToFormatMap as a, convertStringToDate as c, useDateFieldOrchestration as u, validateDate as v };
-//# sourceMappingURL=useDateFieldOrchestration-Cqa7dxtr.js.map
+//# sourceMappingURL=useDateFieldOrchestration-BNJCsRkS.js.map

package/dist/{useDateFieldOrchestration-Cqa7dxtr.js.map → useDateFieldOrchestration-BNJCsRkS.js.map}

@@ -1 +1 @@
-{"version":3,"file":"useDateFieldOrchestration-Cqa7dxtr.js","sources":["../src/components/DateFieldSingle/internal/constants.ts","../src/components/DateFieldSingle/internal/utils.ts","../src/components/DateFieldSingle/internal/useDateFieldOrchestration.ts"],"sourcesContent":["import { DateMode } from \"../types\";\n\nexport const DateModeToFormatMap: Record<DateMode, string> = {\n  \"mm/dd/yyyy\": \"MM/dd/yyyy\",\n  \"dd/mm/yyyy\": \"dd/MM/yyyy\",\n  \"yyyy/mm/dd\": \"yyyy/MM/dd\",\n};\n\nexport const DateModeToPlaceholderMap: Record<DateMode, string> = {\n  \"dd/mm/yyyy\": \"__/__/____\",\n  \"mm/dd/yyyy\": \"__/__/____\",\n  \"yyyy/mm/dd\": \"____/__/__\",\n};\n","import { DateTime } from \"luxon\";\n\nexport function convertStringToDate(\n  v: string | null | undefined,\n): DateTime | null | undefined {\n  if (v === undefined || v === null) {\n    return v;\n  }\n  const date = DateTime.fromISO(v, { setZone: true, zone: \"utc\" }).startOf(\n    \"day\",\n  );\n  if (date.isValid) {\n    return date;\n  }\n  return null;\n}\nexport function validateDate({\n  date,\n  constraints,\n}: {\n  date: DateTime | null;\n  constraints: {\n    required?: boolean;\n    unavailable?: {\n      dates?: DateTime[];\n      daysOfWeek?: number[];\n    };\n    minDate?: DateTime;\n    maxDate?: DateTime;\n  };\n}) {\n  const { required, unavailable, minDate, maxDate } = constraints;\n  if (!date) {\n    return required ? false : true;\n  }\n  if (unavailable?.dates?.some((d) => d.equals(date))) {\n    return false;\n  }\n  if (unavailable?.daysOfWeek?.includes(date.weekday)) {\n    return false;\n  }\n  if (minDate && date < minDate) {\n    return false;\n  }\n  if (maxDate && date > maxDate) {\n    return false;\n  }\n  return true;\n}\n","import { KeyboardEventHandler, RefObject, useRef, useState } from \"react\";\nimport { useKeyboardFocusables } from \"../../../internal/hooks\";\n\n/**\n * Responsible for orchestrating the input and calendar popover states\n * @param inputRef - The ref to the input element\n * @returns calendarOpen, setCalendarOpen, handleCalendarKeyDown, handleInputKeyDown\n */\nexport const useDateFieldOrchestration = ({\n  inputRef,\n  calendarDefaultOpen,\n  popoverContentRef,\n  disableCalendar = false,\n}: {\n  inputRef: RefObject<HTMLInputElement>;\n  calendarDefaultOpen: boolean;\n  popoverContentRef: RefObject<HTMLDivElement>;\n  disableCalendar?: boolean;\n}) => {\n  const documentRef = useRef<HTMLElement>(document.body);\n  const [calendarOpen, setCalendarOpen] = useState(calendarDefaultOpen);\n\n  const { focusables } = useKeyboardFocusables(documentRef, {\n    observeChange: true,\n  });\n\n  const { focusables: popoverFocusables } = useKeyboardFocusables(\n    popoverContentRef,\n    {\n      observeChange: true,\n    },\n  );\n\n  const pageFocusables = focusables?.filter(\n    (item) => !popoverFocusables?.includes(item),\n  );\n\n  const handleCalendarKeyDown = (\n    event: React.KeyboardEvent<HTMLDivElement>,\n  ) => {\n    if (event.key === \"Escape\") {\n      inputRef.current?.focus();\n    }\n  };\n\n  const focusToCalendar = () => {\n    if (popoverContentRef.current) {\n      const currentFocusable =\n        popoverContentRef.current.querySelectorAll('[tabindex = \"0\"]')[0];\n      if (currentFocusable) {\n        (currentFocusable as HTMLButtonElement).focus();\n      }\n    }\n  };\n\n  const handleInputKeyDown: KeyboardEventHandler<HTMLInputElement> = (ev) => {\n    if (disableCalendar) {\n      return;\n    }\n    let currentFocusIndex = 0;\n    switch (ev.key) {\n      case \"Escape\":\n        setCalendarOpen(false);\n        break;\n      case \"Tab\":\n        if (!calendarOpen || !pageFocusables?.length) {\n          break;\n        }\n        ev.preventDefault();\n        currentFocusIndex = pageFocusables.indexOf(inputRef.current!) || 0;\n        setCalendarOpen(false);\n        if (ev.shiftKey) {\n          if (currentFocusIndex === 0) {\n            requestAnimationFrame(() =>\n              pageFocusables[pageFocusables.length - 1].focus(),\n            );\n          } else {\n            requestAnimationFrame(() =>\n              pageFocusables[currentFocusIndex - 1].focus(),\n            );\n          }\n          break;\n        }\n        if (pageFocusables.length > currentFocusIndex + 1) {\n          requestAnimationFrame(() =>\n            pageFocusables[currentFocusIndex + 1].focus(),\n          );\n        } else {\n          requestAnimationFrame(() => pageFocusables[0].focus());\n        }\n        break;\n      case \"ArrowDown\":\n        if (!calendarOpen) {\n          setCalendarOpen(true);\n          setTimeout(focusToCalendar, 200);\n        } else {\n          focusToCalendar();\n        }\n    }\n  };\n\n  return {\n    calendarOpen,\n    setCalendarOpen,\n    handleCalendarKeyDown,\n    handleInputKeyDown,\n  };\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"useDateFieldOrchestration-BNJCsRkS.js","sources":["../src/components/DateFieldSingle/internal/constants.ts","../src/components/DateFieldSingle/internal/utils.ts","../src/components/DateFieldSingle/internal/useDateFieldOrchestration.ts"],"sourcesContent":["import { DateMode } from \"../types\";\n\nexport const DateModeToFormatMap: Record<DateMode, string> = {\n  \"mm/dd/yyyy\": \"MM/dd/yyyy\",\n  \"dd/mm/yyyy\": \"dd/MM/yyyy\",\n  \"yyyy/mm/dd\": \"yyyy/MM/dd\",\n};\n\nexport const DateModeToPlaceholderMap: Record<DateMode, string> = {\n  \"dd/mm/yyyy\": \"__/__/____\",\n  \"mm/dd/yyyy\": \"__/__/____\",\n  \"yyyy/mm/dd\": \"____/__/__\",\n};\n","import { DateTime } from \"luxon\";\n\nexport function convertStringToDate(\n  v: string | null | undefined,\n): DateTime | null | undefined {\n  if (v === undefined || v === null) {\n    return v;\n  }\n  const date = DateTime.fromISO(v, { setZone: true, zone: \"utc\" }).startOf(\n    \"day\",\n  );\n  if (date.isValid) {\n    return date;\n  }\n  return null;\n}\nexport function validateDate({\n  date,\n  constraints,\n}: {\n  date: DateTime | null;\n  constraints: {\n    required?: boolean;\n    unavailable?: {\n      dates?: DateTime[];\n      daysOfWeek?: number[];\n    };\n    minDate?: DateTime;\n    maxDate?: DateTime;\n  };\n}) {\n  const { required, unavailable, minDate, maxDate } = constraints;\n  if (!date) {\n    return required ? false : true;\n  }\n  if (unavailable?.dates?.some((d) => d.equals(date))) {\n    return false;\n  }\n  if (unavailable?.daysOfWeek?.includes(date.weekday)) {\n    return false;\n  }\n  if (minDate && date < minDate) {\n    return false;\n  }\n  if (maxDate && date > maxDate) {\n    return false;\n  }\n  return true;\n}\n","import { KeyboardEventHandler, RefObject, useRef, useState } from \"react\";\nimport { useKeyboardFocusables } from \"../../../internal/hooks\";\n\n/**\n * Responsible for orchestrating the input and calendar popover states\n * @param inputRef - The ref to the input element\n * @returns calendarOpen, setCalendarOpen, handleCalendarKeyDown, handleInputKeyDown\n */\nexport const useDateFieldOrchestration = ({\n  inputRef,\n  calendarDefaultOpen,\n  popoverContentRef,\n  disableCalendar = false,\n}: {\n  inputRef: RefObject<HTMLInputElement>;\n  calendarDefaultOpen: boolean;\n  popoverContentRef: RefObject<HTMLDivElement>;\n  disableCalendar?: boolean;\n}) => {\n  const documentRef = useRef<HTMLElement>(document.body);\n  const [calendarOpen, setCalendarOpen] = useState(calendarDefaultOpen);\n\n  const { focusables } = useKeyboardFocusables(documentRef, {\n    observeChange: true,\n  });\n\n  const { focusables: popoverFocusables } = useKeyboardFocusables(\n    popoverContentRef,\n    {\n      observeChange: true,\n    },\n  );\n\n  const pageFocusables = focusables?.filter(\n    (item) => !popoverFocusables?.includes(item),\n  );\n\n  const handleCalendarKeyDown = (\n    event: React.KeyboardEvent<HTMLDivElement>,\n  ) => {\n    if (event.key === \"Escape\") {\n      inputRef.current?.focus();\n    }\n  };\n\n  const focusToCalendar = () => {\n    if (popoverContentRef.current) {\n      const currentFocusable =\n        popoverContentRef.current.querySelectorAll('[tabindex = \"0\"]')[0];\n      if (currentFocusable) {\n        (currentFocusable as HTMLButtonElement).focus();\n      }\n    }\n  };\n\n  const handleInputKeyDown: KeyboardEventHandler<HTMLInputElement> = (ev) => {\n    if (disableCalendar) {\n      return;\n    }\n    let currentFocusIndex = 0;\n    switch (ev.key) {\n      case \"Escape\":\n        setCalendarOpen(false);\n        break;\n      case \"Tab\":\n        if (!calendarOpen || !pageFocusables?.length) {\n          break;\n        }\n        ev.preventDefault();\n        currentFocusIndex = pageFocusables.indexOf(inputRef.current!) || 0;\n        setCalendarOpen(false);\n        if (ev.shiftKey) {\n          if (currentFocusIndex === 0) {\n            requestAnimationFrame(() =>\n              pageFocusables[pageFocusables.length - 1].focus(),\n            );\n          } else {\n            requestAnimationFrame(() =>\n              pageFocusables[currentFocusIndex - 1].focus(),\n            );\n          }\n          break;\n        }\n        if (pageFocusables.length > currentFocusIndex + 1) {\n          requestAnimationFrame(() =>\n            pageFocusables[currentFocusIndex + 1].focus(),\n          );\n        } else {\n          requestAnimationFrame(() => pageFocusables[0].focus());\n        }\n        break;\n      case \"ArrowDown\":\n        if (!calendarOpen) {\n          setCalendarOpen(true);\n          setTimeout(focusToCalendar, 200);\n        } else {\n          focusToCalendar();\n        }\n    }\n  };\n\n  return {\n    calendarOpen,\n    setCalendarOpen,\n    handleCalendarKeyDown,\n    handleInputKeyDown,\n  };\n};\n"],"names":[],"mappings":"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"}

package/dist/useFocusWithin-BhhgRXdZ.js

@@ -0,0 +1,32 @@
+import { useRef } from 'react';
+
+function useFocusWithin({
+  onBlur,
+  onFocus
+} = {}) {
+  const isFocusedRef = useRef(false);
+  const handleFocus = (event) => {
+    if (!isFocusedRef.current) {
+      isFocusedRef.current = true;
+      onFocus?.(event);
+    }
+  };
+  const handleBlur = (event) => {
+    if (isFocusedRef.current && !containsRelatedTarget(event)) {
+      isFocusedRef.current = false;
+      onBlur?.(event);
+    }
+  };
+  return {
+    props: { onFocus: handleFocus, onBlur: handleBlur }
+  };
+}
+function containsRelatedTarget(event) {
+  if (event.currentTarget instanceof HTMLElement && event.relatedTarget instanceof HTMLElement) {
+    return event.currentTarget.contains(event.relatedTarget);
+  }
+  return false;
+}
+
+export { useFocusWithin as u };
+//# sourceMappingURL=useFocusWithin-BhhgRXdZ.js.map

package/dist/useFocusWithin-BhhgRXdZ.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFocusWithin-BhhgRXdZ.js","sources":["../src/internal/hooks/useFocusWithin/useFocusWithin.ts"],"sourcesContent":["import { FocusEventHandler, useRef } from \"react\";\nexport interface UseFocusWithinOptions {\n  onFocus?: (event: React.FocusEvent) => void;\n  onBlur?: (event: React.FocusEvent) => void;\n}\n\nexport interface UseFocusWithinReturnValue<\n  T extends HTMLElement = HTMLElement,\n> {\n  props: {\n    onFocus: FocusEventHandler<T>;\n    onBlur: FocusEventHandler<T>;\n  };\n}\n\n/**\n * Custom hook for tracking focus state within a DOM element.\n *\n * @param options Configuration options for the hook\n * @param options.onFocus Optional callback when focus enters the element\n * @param options.onBlur Optional callback when focus leaves the element\n * @returns Object containing props for the element\n *\n * @example\n * const { props } = useFocusWithin({\n *   onFocus: () => console.log('Focus entered'),\n *   onBlur: () => console.log('Focus left')\n * });\n *\n * return <div {...props}>Content</div>;\n */\nexport function useFocusWithin<T extends HTMLElement = any>({\n  onBlur,\n  onFocus,\n}: UseFocusWithinOptions = {}): UseFocusWithinReturnValue<T> {\n  const isFocusedRef = useRef(false);\n\n  const handleFocus: FocusEventHandler<T> = (event) => {\n    if (!isFocusedRef.current) {\n      isFocusedRef.current = true;\n      onFocus?.(event);\n    }\n  };\n\n  const handleBlur: FocusEventHandler<T> = (event) => {\n    if (isFocusedRef.current && !containsRelatedTarget(event)) {\n      isFocusedRef.current = false;\n      onBlur?.(event);\n    }\n  };\n\n  return {\n    props: { onFocus: handleFocus, onBlur: handleBlur },\n  };\n}\n\nfunction containsRelatedTarget(event: React.FocusEvent) {\n  if (\n    event.currentTarget instanceof HTMLElement &&\n    event.relatedTarget instanceof HTMLElement\n  ) {\n    return event.currentTarget.contains(event.relatedTarget);\n  }\n\n  return false;\n}\n"],"names":[],"mappings":";;AA+BO,SAAS,cAA4C,CAAA;AAAA,EAC1D,MAAA;AAAA,EACA;AACF,CAAA,GAA2B,EAAkC,EAAA;AAC3D,EAAM,MAAA,YAAA,GAAe,OAAO,KAAK,CAAA;AAEjC,EAAM,MAAA,WAAA,GAAoC,CAAC,KAAU,KAAA;AACnD,IAAI,IAAA,CAAC,aAAa,OAAS,EAAA;AACzB,MAAA,YAAA,CAAa,OAAU,GAAA,IAAA;AACvB,MAAA,OAAA,GAAU,KAAK,CAAA;AAAA;AACjB,GACF;AAEA,EAAM,MAAA,UAAA,GAAmC,CAAC,KAAU,KAAA;AAClD,IAAA,IAAI,YAAa,CAAA,OAAA,IAAW,CAAC,qBAAA,CAAsB,KAAK,CAAG,EAAA;AACzD,MAAA,YAAA,CAAa,OAAU,GAAA,KAAA;AACvB,MAAA,MAAA,GAAS,KAAK,CAAA;AAAA;AAChB,GACF;AAEA,EAAO,OAAA;AAAA,IACL,KAAO,EAAA,EAAE,OAAS,EAAA,WAAA,EAAa,QAAQ,UAAW;AAAA,GACpD;AACF;AAEA,SAAS,sBAAsB,KAAyB,EAAA;AACtD,EAAA,IACE,KAAM,CAAA,aAAA,YAAyB,WAC/B,IAAA,KAAA,CAAM,yBAAyB,WAC/B,EAAA;AACA,IAAA,OAAO,KAAM,CAAA,aAAA,CAAc,QAAS,CAAA,KAAA,CAAM,aAAa,CAAA;AAAA;AAGzD,EAAO,OAAA,KAAA;AACT;;;;"}

package/dist/useInfiniteCombobox-WcRgC9p6.js

@@ -0,0 +1,179 @@
+import { useState, useDeferredValue, useRef, useEffect, useLayoutEffect, useCallback } from 'react';
+
+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 { useInfiniteCombobox as u };
+//# sourceMappingURL=useInfiniteCombobox-WcRgC9p6.js.map

package/dist/useInfiniteCombobox-WcRgC9p6.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useInfiniteCombobox-WcRgC9p6.js","sources":["../src/components/Combobox/useInfiniteCombobox.ts"],"sourcesContent":["import {\n  useState,\n  useEffect,\n  useLayoutEffect,\n  useRef,\n  useDeferredValue,\n  type UIEvent,\n  useCallback,\n} from \"react\";\nimport { UseInfiniteComboboxProps, type ComboboxProps } from \"./ComboboxTypes\";\n\nconst SCROLL_THRESHOLD = 0.64; // arbitrary number\n\n/**\n * Hook for implementing infinite scroll functionality in combobox components.\n *\n * Features:\n * - Automatic pagination with scroll-based loading\n * - Configurable query triggers (input change, selection change, scroll)\n * - Debounced query execution to prevent excessive API calls\n * - Automatic retry logic with exponential backoff\n * - Support for both single and multiple selection modes\n * - Customizable scroll threshold for triggering new queries\n * - Loading state management with deferred updates\n * - Automatic detection of pagination end\n * - Support for initial items or query-based initialization\n *\n * @param options Configuration options for the infinite combobox\n * @returns Object containing comboboxProps and contentProps for use with Combobox component\n *\n * @example\n * const { comboboxProps, contentProps } = useInfiniteCombobox({\n *   initialItems: [],\n *   initialPage: 0,\n *   initialLoading: true,\n *   query: async ({ page, inputValue, selectedItems }) => {\n *     return await fetchItems({\n *       page,\n *       pageSize: 25,\n *       searchTerm: inputValue,\n *       excludeIds: selectedItems.map(item => item.id),\n *     });\n *   },\n * });\n *\n * return (\n *   <Combobox {...comboboxProps}>\n *     <Combobox.SearchField label=\"Search items\" />\n *     <Combobox.Content {...contentProps}>\n *       {({ items }) => (\n *         <Combobox.List>\n *           {items.map((item, i) => (\n *             <Combobox.Item key={item.id} item={item} index={i}>\n *               {item.name}\n *             </Combobox.Item>\n *           ))}\n *         </Combobox.List>\n *       )}\n *     </Combobox.Content>\n *   </Combobox>\n * );\n */\nexport function useInfiniteCombobox<Item = any>({\n  query,\n  queryInitialItems,\n  initialItems = [],\n  initialPage = 0,\n  initialLoading = false,\n  initialInputValue,\n  defaultInputValue,\n  initialSelectedItem,\n  defaultSelectedItem,\n  initialSelectedItems,\n  defaultSelectedItems,\n  updateOnInputValueChange = true,\n  updateOnSelectedItemChange = true,\n  updateOnSelectedItemsChange = true,\n  queryOnFirstRender = false,\n  shouldTriggerQuery: shouldTriggerQueryProp,\n}: UseInfiniteComboboxProps<Item>) {\n  const [items, setItems] = useState(initialItems);\n  const deferredItems = useDeferredValue(items);\n  const [page, setPage] = useState(initialPage);\n  const [loading, setLoading] = useState(initialLoading);\n  const deferredLoading = useDeferredValue(loading);\n  const [inputValue, setInputValue] = useState(\n    initialInputValue ?? defaultInputValue ?? \"\",\n  );\n  const [selectedItem, setSelectedItem] = useState<Item | null>(\n    initialSelectedItem ?? defaultSelectedItem ?? null,\n  );\n  const [selectedItems, setSelectedItems] = useState<Item[]>(\n    initialSelectedItems ?? defaultSelectedItems ?? [],\n  );\n\n  const scrollerRef = useRef<HTMLDivElement>(null);\n\n  const defaultShouldTriggerQuery = (element: EventTarget & HTMLElement) => {\n    const totalScrollHeight = element.scrollHeight - element.clientHeight;\n    return element.scrollTop / totalScrollHeight > SCROLL_THRESHOLD;\n  };\n\n  // using both state and ref here since the state will be \"behind\" the ref\n  // if another query has been triggered while the current one is in flight\n  const [triggerQueryCount, setTriggerQueryCount] = useState(0);\n  const triggerQueryCountRef = useRef(0);\n  const triggerQuery = () => {\n    setTriggerQueryCount((x) => x + 1);\n    triggerQueryCountRef.current += 1;\n  };\n\n  const [done, setDone] = useState(false);\n\n  const firstRenderRef = useRef(true);\n  const scrollTimeoutRef = useRef(false);\n\n  // using a similar state/ref idea for managing loading as well, since we\n  // need to know immediately if queries are in flight, but state won't be\n  // updated in the onScroll handler fast enough\n  const loadingRef = useRef(false);\n  const setLoadingStateAndRef = (isLoading: boolean) => {\n    setLoading(isLoading);\n    loadingRef.current = isLoading;\n  };\n\n  const queryRetryCountRef = useRef(0);\n\n  useEffect(() => {\n    if (firstRenderRef.current && queryInitialItems) {\n      setItems(queryInitialItems());\n    }\n\n    // don't run on initial render unless we explicitly choose to\n    if (firstRenderRef.current && !queryOnFirstRender) {\n      firstRenderRef.current = false;\n      return;\n    }\n\n    setLoadingStateAndRef(true);\n\n    // using a short debounce delay to batch updates\n    const timeoutID = setTimeout(() => {\n      // if this query is outdated, don't call it\n      if (triggerQueryCount < triggerQueryCountRef.current) return;\n\n      query({\n        page,\n        inputValue,\n        selectedItem,\n        selectedItems,\n      })\n        .then((res) => {\n          queryRetryCountRef.current = 0;\n\n          // if this query is outdated, throw away it's results\n          if (triggerQueryCount < triggerQueryCountRef.current) return;\n\n          setLoadingStateAndRef(false);\n          setPage((x) => x + 1);\n\n          // if the result is nullish or empty\n          // assume we've reached the end of the pagination\n          if (res == null || (page > 0 && res.length === 0)) {\n            setDone(true);\n          } else if (page === 0) {\n            setItems(() => [...res]);\n          } else {\n            setItems((prevItems) => [...prevItems, ...res]);\n          }\n        })\n        .catch(() => {\n          // if we fail, retry up to 8 times with exponential back-off\n          queryRetryCountRef.current += 1;\n\n          if (queryRetryCountRef.current > 7) {\n            queryRetryCountRef.current = 0;\n            return;\n          } else {\n            setTimeout(\n              () => {\n                triggerQuery();\n              },\n              2 ** queryRetryCountRef.current * 160,\n            );\n          }\n        });\n    }, 160);\n\n    return () => {\n      clearTimeout(timeoutID);\n    };\n\n    // only re-query when we manually call triggerQuery\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [triggerQueryCount]);\n\n  // if the popover isn't scrollable, keep firing more queries\n  useLayoutEffect(() => {\n    setTimeout(() => {\n      if (\n        scrollerRef.current &&\n        scrollerRef.current.scrollHeight > 0 &&\n        scrollerRef.current.clientHeight > 0 &&\n        scrollerRef.current.scrollHeight <= scrollerRef.current.clientHeight\n      ) {\n        triggerQuery();\n      }\n    }, 160);\n  }, [items]);\n\n  // making this separate variable to satisfy react hooks deps linter\n  const isEmpty = items.length === 0 && page === 0;\n\n  const onStateChange = useCallback(\n    (changes: Parameters<NonNullable<ComboboxProps[\"onStateChange\"]>>[0]) => {\n      // if the user interacts and we're empty, fire the first query\n      if (isEmpty && \"isOpen\" in changes && changes.isOpen === true) {\n        triggerQuery();\n      }\n\n      // otherwise, if inputValue or selectedItems changes, assume we need an\n      // entirely new list back from the query\n      const inputValueShouldUpdate =\n        updateOnInputValueChange && \"inputValue\" in changes;\n      const selectedItemsShouldUpdate =\n        updateOnSelectedItemsChange &&\n        \"selectedItems\" in changes &&\n        changes.selectedItems;\n      const selectedItemShouldUpdate =\n        updateOnSelectedItemChange &&\n        \"selectedItem\" in changes &&\n        changes.selectedItem !== undefined;\n\n      if (inputValueShouldUpdate) {\n        setInputValue(changes.inputValue ?? \"\");\n      }\n\n      if (selectedItemsShouldUpdate) {\n        setSelectedItems(changes.selectedItems ?? []);\n      }\n\n      if (selectedItemShouldUpdate) {\n        setSelectedItem(changes.selectedItem);\n      }\n\n      if (\n        inputValueShouldUpdate ||\n        selectedItemsShouldUpdate ||\n        selectedItemShouldUpdate\n      ) {\n        setPage(0);\n        setDone(false);\n        triggerQuery();\n      }\n    },\n    [\n      isEmpty,\n      updateOnInputValueChange,\n      updateOnSelectedItemsChange,\n      updateOnSelectedItemChange,\n    ],\n  );\n\n  const onScroll = useCallback(\n    (e: UIEvent<HTMLElement>) => {\n      // React events don't persist, so we need to store the element through the timeout\n      const element = e.currentTarget;\n\n      // using timeoutRef to throttle scroll calls\n      // using loadingRef to not make additional queries if a query is already in flight\n      if (!scrollTimeoutRef.current && !loadingRef.current) {\n        setTimeout(() => {\n          const shouldTriggerQuery =\n            shouldTriggerQueryProp ?? defaultShouldTriggerQuery;\n\n          if (shouldTriggerQuery(element) && !done) {\n            triggerQuery();\n          }\n\n          scrollTimeoutRef.current = false;\n        }, 40);\n\n        scrollTimeoutRef.current = true;\n      }\n    },\n    [done, shouldTriggerQueryProp],\n  );\n\n  return {\n    comboboxProps: {\n      items: deferredItems,\n      loading: deferredLoading,\n      initialInputValue,\n      defaultInputValue,\n      initialSelectedItem,\n      defaultSelectedItem,\n      initialSelectedItems,\n      defaultSelectedItems,\n      disableFilter: true, // assume the query will return a filtered/sorted list\n      onStateChange,\n    },\n    contentProps: {\n      onScroll,\n      scrollerRef,\n    },\n  };\n}\n"],"names":[],"mappings":"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"}

package/dist/useIntersectionObserver-BEmMDO3P.js

@@ -0,0 +1,70 @@
+import { useState, useRef, useEffect } from 'react';
+
+function useIntersectionObserver({
+  threshold = 0,
+  root = null,
+  rootMargin = "0%",
+  freezeOnceVisible = false,
+  initialIsIntersecting = false,
+  onChange
+} = {}) {
+  const [ref, setRef] = useState(null);
+  const [state, setState] = useState(() => ({
+    isIntersecting: initialIsIntersecting,
+    entry: void 0
+  }));
+  const callbackRef = useRef();
+  callbackRef.current = onChange;
+  const frozen = state.entry?.isIntersecting && freezeOnceVisible;
+  useEffect(() => {
+    if (!ref) return;
+    if (!("IntersectionObserver" in window)) return;
+    if (frozen) return;
+    const observer = new IntersectionObserver(
+      (entries) => {
+        const thresholds = Array.isArray(observer.thresholds) ? observer.thresholds : [observer.thresholds];
+        entries.forEach((entry) => {
+          const isIntersecting = entry.isIntersecting && thresholds.some(
+            (threshold2) => entry.intersectionRatio >= threshold2
+          );
+          setState({ isIntersecting, entry });
+          if (callbackRef.current) {
+            callbackRef.current(isIntersecting, entry);
+          }
+        });
+      },
+      { threshold, root, rootMargin }
+    );
+    observer.observe(ref);
+    return () => {
+      observer.disconnect();
+    };
+  }, [
+    ref,
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    JSON.stringify(threshold),
+    root,
+    rootMargin,
+    frozen,
+    freezeOnceVisible
+  ]);
+  const prevRef = useRef(null);
+  useEffect(() => {
+    if (!ref && state.entry?.target && !freezeOnceVisible && !frozen && prevRef.current !== state.entry.target) {
+      prevRef.current = state.entry.target;
+      setState({ isIntersecting: initialIsIntersecting, entry: void 0 });
+    }
+  }, [ref, state.entry, freezeOnceVisible, frozen, initialIsIntersecting]);
+  const result = [
+    setRef,
+    !!state.isIntersecting,
+    state.entry
+  ];
+  result.ref = result[0];
+  result.isIntersecting = result[1];
+  result.entry = result[2];
+  return result;
+}
+
+export { useIntersectionObserver as u };
+//# sourceMappingURL=useIntersectionObserver-BEmMDO3P.js.map

package/dist/useIntersectionObserver-BEmMDO3P.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useIntersectionObserver-BEmMDO3P.js","sources":["../src/internal/hooks/useIntersectionObserver/useIntersectionObserver.ts"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\n\n/**\n * Internal state type for intersection observer\n * @property {boolean} isIntersecting - Whether the element is intersecting\n * @property {IntersectionObserverEntry} [entry] - The intersection observer entry\n */\ntype State = {\n  /**\n   * Whether the element is intersecting\n   */\n  isIntersecting: boolean;\n  /**\n   * The intersection observer entry\n   */\n  entry?: IntersectionObserverEntry;\n};\n\n/**\n * Options for the useIntersectionObserver hook\n * @property {Element | Document | null} [root] - The root element for intersection calculations\n * @property {string} [rootMargin] - Margin around the root element\n * @property {number | number[]} [threshold] - Threshold values for intersection detection\n * @property {boolean} [freezeOnceVisible] - Whether to freeze once the element becomes visible\n * @property {(isIntersecting: boolean, entry: IntersectionObserverEntry) => void} [onChange] - Callback when intersection changes\n * @property {boolean} [initialIsIntersecting] - Initial intersection state\n */\nexport type UseIntersectionObserverOptions = {\n  /**\n   * The root element for intersection calculations\n   */\n  root?: Element | Document | null;\n  /**\n   * Margin around the root element\n   */\n  rootMargin?: string;\n  /**\n   * Threshold values for intersection detection\n   */\n  threshold?: number | number[];\n  /**\n   * Whether to freeze once the element becomes visible\n   */\n  freezeOnceVisible?: boolean;\n  /**\n   * Callback when intersection changes\n   */\n  onChange?: (\n    isIntersecting: boolean,\n    entry: IntersectionObserverEntry,\n  ) => void;\n  /**\n   * Initial intersection state\n   */\n  initialIsIntersecting?: boolean;\n};\n\n/**\n * Return type for the useIntersectionObserver hook\n * @property {(node?: Element | null) => void} ref - Function to set the element to observe\n * @property {boolean} isIntersecting - Whether the element is intersecting\n * @property {IntersectionObserverEntry} [entry] - The intersection observer entry\n */\nexport type IntersectionReturn = [\n  (node?: Element | null) => void,\n  boolean,\n  IntersectionObserverEntry | undefined,\n] & {\n  ref: (node?: Element | null) => void;\n  isIntersecting: boolean;\n  entry?: IntersectionObserverEntry;\n};\n\n/**\n * Custom hook for observing element intersection with viewport or root element.\n *\n * Features:\n * - Observes element intersection with viewport or custom root element\n * - Supports configurable threshold values and root margins\n * - Provides intersection state and detailed entry information\n * - Supports freezing observation once element becomes visible\n * - Handles browser compatibility gracefully\n * - Provides both array and object destructuring support\n * - Automatically cleans up observer on unmount\n * - Supports onChange callback for custom intersection handling\n *\n * @param options - Configuration options for the intersection observer\n * @returns Array containing ref function, intersection state, and entry, with additional object properties\n */\nexport function useIntersectionObserver({\n  threshold = 0,\n  root = null,\n  rootMargin = \"0%\",\n  freezeOnceVisible = false,\n  initialIsIntersecting = false,\n  onChange,\n}: UseIntersectionObserverOptions = {}): IntersectionReturn {\n  const [ref, setRef] = useState<Element | null>(null);\n\n  const [state, setState] = useState<State>(() => ({\n    isIntersecting: initialIsIntersecting,\n    entry: undefined,\n  }));\n\n  const callbackRef = useRef<UseIntersectionObserverOptions[\"onChange\"]>();\n\n  callbackRef.current = onChange;\n\n  const frozen = state.entry?.isIntersecting && freezeOnceVisible;\n\n  useEffect(() => {\n    // Ensure we have a ref to observe\n    if (!ref) return;\n\n    // Ensure the browser supports the Intersection Observer API\n    if (!(\"IntersectionObserver\" in window)) return;\n\n    // Skip if frozen\n    if (frozen) return;\n\n    let unobserve: (() => void) | undefined;\n\n    const observer = new IntersectionObserver(\n      (entries: IntersectionObserverEntry[]): void => {\n        const thresholds = Array.isArray(observer.thresholds)\n          ? observer.thresholds\n          : [observer.thresholds];\n\n        entries.forEach((entry) => {\n          const isIntersecting =\n            entry.isIntersecting &&\n            thresholds.some(\n              (threshold) => entry.intersectionRatio >= threshold,\n            );\n\n          setState({ isIntersecting, entry });\n\n          if (callbackRef.current) {\n            callbackRef.current(isIntersecting, entry);\n          }\n\n          if (isIntersecting && freezeOnceVisible && unobserve) {\n            unobserve();\n            unobserve = undefined;\n          }\n        });\n      },\n      { threshold, root, rootMargin },\n    );\n\n    observer.observe(ref);\n\n    return () => {\n      observer.disconnect();\n    };\n\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [\n    ref,\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    JSON.stringify(threshold),\n    root,\n    rootMargin,\n    frozen,\n    freezeOnceVisible,\n  ]);\n\n  // ensures that if the observed element changes, the intersection observer is reinitialized\n  const prevRef = useRef<Element | null>(null);\n\n  useEffect(() => {\n    if (\n      !ref &&\n      state.entry?.target &&\n      !freezeOnceVisible &&\n      !frozen &&\n      prevRef.current !== state.entry.target\n    ) {\n      prevRef.current = state.entry.target;\n      setState({ isIntersecting: initialIsIntersecting, entry: undefined });\n    }\n  }, [ref, state.entry, freezeOnceVisible, frozen, initialIsIntersecting]);\n\n  const result = [\n    setRef,\n    !!state.isIntersecting,\n    state.entry,\n  ] as IntersectionReturn;\n\n  // Support object destructuring, by adding the specific values.\n  result.ref = result[0];\n  result.isIntersecting = result[1];\n  result.entry = result[2];\n\n  return result;\n}\n"],"names":["threshold"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@servicetitan/anvil2",
-  "version": "1.45.1",
+  "version": "1.46.0",
   "type": "module",
   "types": "./dist/index.d.ts",
   "main": "./dist/index.js",
@@ -15,6 +15,7 @@
   ],
   "exports": {
     ".": "./dist/index.js",
+    "./beta": "./dist/beta.js",
     "./assets/*": "./dist/assets/*",
     "./token": "./dist/token.js",
     "./token/*": "./dist/token/*",
@@ -32,6 +33,7 @@
     "@react-hook/merged-ref": "^1.3.2",
     "@react-hook/resize-observer": "^2.0.1",
     "@servicetitan/anvil-fonts": ">=14",
+    "@tanstack/react-virtual": "^3.13.12",
     "@types/big.js": "^6.2.2",
     "big.js": "^7.0.1",
     "classnames": "^2.5.1",