@pzerelles/headlessui-svelte 2.1.1-next.1 → 2.1.2-next.11

package/dist/utils/floating-ui/svelte/utils.js

@@ -0,0 +1,136 @@
+import { isHTMLElement, isShadowRoot } from "@floating-ui/utils/dom";
+export function activeElement(doc) {
+    let activeElement = doc.activeElement;
+    while (activeElement?.shadowRoot?.activeElement != null) {
+        activeElement = activeElement.shadowRoot.activeElement;
+    }
+    return activeElement;
+}
+export function contains(parent, child) {
+    if (!parent || !child) {
+        return false;
+    }
+    const rootNode = child.getRootNode?.();
+    // First, attempt with faster native method
+    if (parent.contains(child)) {
+        return true;
+    }
+    // then fallback to custom implementation with Shadow DOM support
+    if (rootNode && isShadowRoot(rootNode)) {
+        let next = child;
+        while (next) {
+            if (parent === next) {
+                return true;
+            }
+            // @ts-ignore
+            next = next.parentNode || next.host;
+        }
+    }
+    // Give up, the result is false
+    return false;
+}
+// Avoid Chrome DevTools blue warning.
+export function getPlatform() {
+    const uaData = navigator.userAgentData;
+    if (uaData?.platform) {
+        return uaData.platform;
+    }
+    return navigator.platform;
+}
+export function getUserAgent() {
+    const uaData = navigator.userAgentData;
+    if (uaData && Array.isArray(uaData.brands)) {
+        return uaData.brands.map(({ brand, version }) => `${brand}/${version}`).join(" ");
+    }
+    return navigator.userAgent;
+}
+// License: https://github.com/adobe/react-spectrum/blob/b35d5c02fe900badccd0cf1a8f23bb593419f238/packages/@react-aria/utils/src/isVirtualEvent.ts
+export function isVirtualClick(event) {
+    // FIXME: Firefox is now emitting a deprecation warning for `mozInputSource`.
+    // Try to find a workaround for this. `react-aria` source still has the check.
+    if (event.mozInputSource === 0 && event.isTrusted) {
+        return true;
+    }
+    if (isAndroid() && event.pointerType) {
+        return event.type === "click" && event.buttons === 1;
+    }
+    return event.detail === 0 && !event.pointerType;
+}
+export function isVirtualPointerEvent(event) {
+    if (isJSDOM())
+        return false;
+    return ((!isAndroid() && event.width === 0 && event.height === 0) ||
+        (isAndroid() &&
+            event.width === 1 &&
+            event.height === 1 &&
+            event.pressure === 0 &&
+            event.detail === 0 &&
+            event.pointerType === "mouse") ||
+        // iOS VoiceOver returns 0.333• for width/height.
+        (event.width < 1 && event.height < 1 && event.pressure === 0 && event.detail === 0 && event.pointerType === "touch"));
+}
+export function isSafari() {
+    // Chrome DevTools does not complain about navigator.vendor
+    return /apple/i.test(navigator.vendor);
+}
+export function isAndroid() {
+    const re = /android/i;
+    return re.test(getPlatform()) || re.test(getUserAgent());
+}
+export function isMac() {
+    return getPlatform().toLowerCase().startsWith("mac") && !navigator.maxTouchPoints;
+}
+export function isJSDOM() {
+    return getUserAgent().includes("jsdom/");
+}
+export function isMouseLikePointerType(pointerType, strict) {
+    // On some Linux machines with Chromium, mouse inputs return a `pointerType`
+    // of "pen": https://github.com/floating-ui/floating-ui/issues/2015
+    const values = ["mouse", "pen"];
+    if (!strict) {
+        values.push("", undefined);
+    }
+    return values.includes(pointerType);
+}
+/*export function isReactEvent(event: any): event is React.SyntheticEvent {
+  return "nativeEvent" in event
+}*/
+export function isRootElement(element) {
+    return element.matches("html,body");
+}
+export function getDocument(node) {
+    return node?.ownerDocument || document;
+}
+export function isEventTargetWithin(event, node) {
+    if (node == null) {
+        return false;
+    }
+    if ("composedPath" in event) {
+        return event.composedPath().includes(node);
+    }
+    // TS thinks `event` is of type never as it assumes all browsers support composedPath, but browsers without shadow dom don't
+    const e = event;
+    return e.target != null && node.contains(e.target);
+}
+export function getTarget(event) {
+    if ("composedPath" in event) {
+        return event.composedPath()[0];
+    }
+    // TS thinks `event` is of type never as it assumes all browsers support
+    // `composedPath()`, but browsers without shadow DOM don't.
+    return event.target;
+}
+export const TYPEABLE_SELECTOR = "input:not([type='hidden']):not([disabled])," +
+    "[contenteditable]:not([contenteditable='false']),textarea:not([disabled])";
+export function isTypeableElement(element) {
+    return isHTMLElement(element) && element.matches(TYPEABLE_SELECTOR);
+}
+export function stopEvent(event /*| React.SyntheticEvent*/) {
+    event.preventDefault();
+    event.stopPropagation();
+}
+export function isTypeableCombobox(element) {
+    if (!element)
+        return false;
+    return element.getAttribute("role") === "combobox" && isTypeableElement(element);
+}

package/dist/utils/floating-ui/svelte-dom/arrow.d.ts

@@ -0,0 +1,22 @@
+import type { MutableRefObject } from "../../ref.svelte.js";
+import type { Derivable, Middleware, Padding } from "@floating-ui/dom";
+export interface ArrowOptions {
+    /**
+     * The arrow element to be positioned.
+     * @default undefined
+     */
+    element: MutableRefObject<Element | null> | Element | null;
+    /**
+     * The padding between the arrow element and the floating element edges.
+     * Useful when the floating element has rounded corners.
+     * @default 0
+     */
+    padding?: Padding;
+}
+/**
+ * Provides data to position an inner element of the floating element so that it
+ * appears centered to the reference element.
+ * This wraps the core `arrow` middleware to allow React refs as the element.
+ * @see https://floating-ui.com/docs/arrow
+ */
+export declare const arrow: (options: ArrowOptions | Derivable<ArrowOptions>) => Middleware;

package/dist/utils/floating-ui/svelte-dom/arrow.js

@@ -0,0 +1,29 @@
+import { arrow as arrowCore } from "@floating-ui/dom";
+/**
+ * Provides data to position an inner element of the floating element so that it
+ * appears centered to the reference element.
+ * This wraps the core `arrow` middleware to allow React refs as the element.
+ * @see https://floating-ui.com/docs/arrow
+ */
+export const arrow = (options) => {
+    function isRef(value) {
+        return {}.hasOwnProperty.call(value, "current");
+    }
+    return {
+        name: "arrow",
+        options,
+        fn(state) {
+            const { element, padding } = typeof options === "function" ? options(state) : options;
+            if (element && isRef(element)) {
+                if (element.current != null) {
+                    return arrowCore({ element: element.current, padding }).fn(state);
+                }
+                return {};
+            }
+            if (element) {
+                return arrowCore({ element, padding }).fn(state);
+            }
+            return {};
+        },
+    };
+};

package/dist/utils/floating-ui/svelte-dom/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./types.js";
+export { useFloating } from "./useFloating.svelte.js";

package/dist/utils/floating-ui/svelte-dom/index.js

@@ -0,0 +1,2 @@
+export * from "./types.js";
+export { useFloating } from "./useFloating.svelte.js";

package/dist/utils/floating-ui/svelte-dom/types.d.ts

@@ -0,0 +1,80 @@
+import type { MutableRefObject } from "../../ref.svelte.js";
+import type { ComputePositionConfig, ComputePositionReturn, VirtualElement } from "@floating-ui/dom";
+export type { ArrowOptions } from "./arrow.js";
+export { arrow } from "./arrow.js";
+export { useFloating } from "./useFloating.svelte.js";
+export type { AlignedPlacement, Alignment, AutoPlacementOptions, AutoUpdateOptions, Axis, Boundary, ClientRectObject, ComputePositionConfig, ComputePositionReturn, Coords, Derivable, DetectOverflowOptions, Dimensions, ElementContext, ElementRects, Elements, FlipOptions, FloatingElement, HideOptions, InlineOptions, Length, Middleware, MiddlewareArguments, MiddlewareData, MiddlewareReturn, MiddlewareState, NodeScroll, OffsetOptions, Padding, Placement, Platform, Rect, ReferenceElement, RootBoundary, ShiftOptions, Side, SideObject, SizeOptions, Strategy, VirtualElement, } from "@floating-ui/dom";
+export { autoPlacement, autoUpdate, computePosition, detectOverflow, flip, getOverflowAncestors, hide, inline, limitShift, offset, platform, shift, size, } from "@floating-ui/dom";
+type Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};
+export type UseFloatingData = Prettify<ComputePositionReturn & {
+    isPositioned: boolean;
+}>;
+export type ReferenceType = Element | VirtualElement;
+export type UseFloatingReturn<RT extends ReferenceType = ReferenceType> = Prettify<UseFloatingData & {
+    /**
+     * Update the position of the floating element, re-rendering the component
+     * if required.
+     */
+    update: () => void;
+    /**
+     * Pre-configured positioning styles to apply to the floating element.
+     */
+    floatingStyles: string;
+    /**
+     * Object containing the reference and floating refs and reactive setters.
+     */
+    refs: {
+        /**
+         * A React ref to the reference element.
+         */
+        reference: MutableRefObject<RT | null>;
+        /**
+         * A React ref to the floating element.
+         */
+        floating: MutableRefObject<HTMLElement | null>;
+        /**
+         * A callback to set the reference element (reactive).
+         */
+        setReference: (node: RT | null) => void;
+        /**
+         * A callback to set the floating element (reactive).
+         */
+        setFloating: (node: HTMLElement | null) => void;
+    };
+    /**
+     * Object containing the reference and floating elements.
+     */
+    elements: {
+        reference: RT | null;
+        floating: HTMLElement | null;
+    };
+}>;
+export type UseFloatingOptions<RT extends ReferenceType = ReferenceType> = Prettify<Partial<ComputePositionConfig> & {
+    /**
+     * A callback invoked when both the reference and floating elements are
+     * mounted, and cleaned up when either is unmounted. This is useful for
+     * setting up event listeners (e.g. pass `autoUpdate`).
+     */
+    whileElementsMounted?: (reference: RT, floating: HTMLElement, update: () => void) => () => void;
+    /**
+     * Object containing the reference and floating elements.
+     */
+    elements?: {
+        reference?: RT | null;
+        floating?: HTMLElement | null;
+    };
+    /**
+     * The `open` state of the floating element to synchronize with the
+     * `isPositioned` value.
+     * @default false
+     */
+    open?: boolean;
+    /**
+     * Whether to use `transform` for positioning instead of `top` and `left`
+     * (layout) in the `floatingStyles` object.
+     * @default false
+     */
+    transform?: boolean;
+}>;

package/dist/utils/floating-ui/svelte-dom/types.js

@@ -0,0 +1,3 @@
+export { arrow } from "./arrow.js";
+export { useFloating } from "./useFloating.svelte.js";
+export { autoPlacement, autoUpdate, computePosition, detectOverflow, flip, getOverflowAncestors, hide, inline, limitShift, offset, platform, shift, size, } from "@floating-ui/dom";

package/dist/utils/floating-ui/svelte-dom/useFloating.svelte.d.ts

@@ -0,0 +1,6 @@
+import type { ReferenceType, UseFloatingOptions, UseFloatingReturn } from "./types.js";
+/**
+ * Provides data to position a floating element.
+ * @see https://floating-ui.com/docs/useFloating
+ */
+export declare function useFloating<RT extends ReferenceType = ReferenceType>(options?: UseFloatingOptions): UseFloatingReturn<RT>;

package/dist/utils/floating-ui/svelte-dom/useFloating.svelte.js

@@ -0,0 +1,183 @@
+import { computePosition } from "@floating-ui/dom";
+import { deepEqual } from "./utils/deepEqual.js";
+import { getDPR } from "./utils/getDPR.js";
+import { roundByDPR } from "./utils/roundByDPR.js";
+import { useLatestRef } from "./utils/useLatestRef.js";
+import { tick, untrack } from "svelte";
+import { stylePropsToString } from "../../style.js";
+/**
+ * Provides data to position a floating element.
+ * @see https://floating-ui.com/docs/useFloating
+ */
+export function useFloating(options = {}) {
+    const { placement = "bottom", strategy = "absolute", middleware = [], platform, elements: externalElements = {}, transform = true, whileElementsMounted, open, } = $derived(options);
+    const { reference: externalReference, floating: externalFloating } = $derived(externalElements);
+    let data = $state({
+        x: 0,
+        y: 0,
+        strategy,
+        placement,
+        middlewareData: {},
+        isPositioned: false,
+    });
+    const setData = (value) => (data = value);
+    let latestMiddleware = $state(middleware);
+    $effect(() => {
+        if (!deepEqual(latestMiddleware, middleware)) {
+            latestMiddleware = middleware;
+        }
+    });
+    let _reference = $state(null);
+    let _floating = $state(null);
+    const setReference = (node) => {
+        if (node !== referenceRef.current) {
+            referenceRef.current = node;
+            _reference = node;
+        }
+    };
+    const setFloating = (node) => {
+        if (node !== floatingRef.current) {
+            floatingRef.current = node;
+            _floating = node;
+        }
+    };
+    const referenceEl = $derived((externalReference || _reference));
+    const floatingEl = $derived(externalFloating || _floating);
+    const referenceRef = $state({ current: null });
+    const floatingRef = $state({ current: null });
+    const dataRef = $state({ current: data });
+    const hasWhileElementsMounted = whileElementsMounted != null;
+    const whileElementsMountedRef = useLatestRef({
+        get value() {
+            return whileElementsMounted;
+        },
+    });
+    const platformRef = useLatestRef({
+        get value() {
+            return platform;
+        },
+    });
+    const openRef = useLatestRef({
+        get value() {
+            return open;
+        },
+    });
+    const update = () => {
+        if (!referenceRef.current || !floatingRef.current) {
+            return;
+        }
+        const config = {
+            placement,
+            strategy,
+            middleware: latestMiddleware,
+        };
+        if (platformRef.current) {
+            config.platform = platformRef.current;
+        }
+        computePosition(referenceRef.current, floatingRef.current, config).then(async (data) => {
+            console.log("computing", config);
+            const fullData = {
+                ...data,
+                // The floating element's position may be recomputed while it's closed
+                // but still mounted (such as when transitioning out). To ensure
+                // `isPositioned` will be `false` initially on the next open, avoid
+                // setting it to `true` when `open === false` (must be specified).
+                isPositioned: openRef.current !== false,
+            };
+            if (isMountedRef.current && !deepEqual(dataRef.current, fullData)) {
+                dataRef.current = fullData;
+                setData(fullData);
+                await tick();
+            }
+        });
+    };
+    $effect(() => {
+        open;
+        untrack(() => {
+            if (open === false && dataRef.current.isPositioned) {
+                dataRef.current.isPositioned = false;
+                data.isPositioned = false;
+            }
+        });
+    });
+    const isMountedRef = $state({ current: false });
+    $effect(() => {
+        isMountedRef.current = true;
+        return () => {
+            isMountedRef.current = false;
+        };
+    });
+    $effect(() => {
+        if (referenceEl)
+            referenceRef.current = referenceEl;
+        if (floatingEl)
+            floatingRef.current = floatingEl;
+        if (referenceEl && floatingEl) {
+            if (whileElementsMountedRef.current) {
+                return whileElementsMountedRef.current(referenceEl, floatingEl, update);
+            }
+            update();
+        }
+    }); //, [referenceEl, floatingEl, update, whileElementsMountedRef, hasWhileElementsMounted])
+    const refs = $derived({
+        reference: referenceRef,
+        floating: floatingRef,
+        setReference,
+        setFloating,
+    });
+    const elements = $derived({ reference: referenceEl, floating: floatingEl });
+    const floatingStyles = $derived.by(() => {
+        const initialStyles = {
+            position: strategy,
+            left: 0,
+            top: 0,
+        };
+        if (!elements.floating) {
+            return stylePropsToString(initialStyles);
+        }
+        const x = roundByDPR(elements.floating, data.x);
+        const y = roundByDPR(elements.floating, data.y);
+        if (transform) {
+            return stylePropsToString({
+                ...initialStyles,
+                transform: `translate(${x}px, ${y}px)`,
+                ...(getDPR(elements.floating) >= 1.5 && { "will-change": "transform" }),
+            });
+        }
+        return stylePropsToString({
+            position: strategy,
+            left: x,
+            top: y,
+        });
+    });
+    return {
+        get placement() {
+            return data.placement;
+        },
+        get strategy() {
+            return data.strategy;
+        },
+        get middlewareData() {
+            return data.middlewareData;
+        },
+        get x() {
+            return data.x;
+        },
+        get y() {
+            return data.y;
+        },
+        get isPositioned() {
+            return data.isPositioned;
+        },
+        update,
+        get refs() {
+            return refs;
+        },
+        get elements() {
+            return elements;
+        },
+        get floatingStyles() {
+            return floatingStyles;
+        },
+    };
+}

package/dist/utils/floating-ui/svelte-dom/utils/deepEqual.d.ts

@@ -0,0 +1 @@
+export declare function deepEqual(a: any, b: any): boolean;

package/dist/utils/floating-ui/svelte-dom/utils/deepEqual.js

@@ -0,0 +1,50 @@
+// Fork of `fast-deep-equal` that only does the comparisons we need and compares
+// functions
+export function deepEqual(a, b) {
+    if (a === b) {
+        return true;
+    }
+    if (typeof a !== typeof b) {
+        return false;
+    }
+    if (typeof a === "function" && a.toString() === b.toString()) {
+        return true;
+    }
+    let length;
+    let i;
+    let keys;
+    if (a && b && typeof a === "object") {
+        if (Array.isArray(a)) {
+            length = a.length;
+            if (length !== b.length)
+                return false;
+            for (i = length; i-- !== 0;) {
+                if (!deepEqual(a[i], b[i])) {
+                    return false;
+                }
+            }
+            return true;
+        }
+        keys = Object.keys(a);
+        length = keys.length;
+        if (length !== Object.keys(b).length) {
+            return false;
+        }
+        for (i = length; i-- !== 0;) {
+            if (!{}.hasOwnProperty.call(b, keys[i])) {
+                return false;
+            }
+        }
+        for (i = length; i-- !== 0;) {
+            const key = keys[i];
+            if (key === "_owner" && a.$$typeof) {
+                continue;
+            }
+            if (!deepEqual(a[key], b[key])) {
+                return false;
+            }
+        }
+        return true;
+    }
+    return a !== a && b !== b;
+}

package/dist/utils/floating-ui/svelte-dom/utils/getDPR.d.ts

@@ -0,0 +1 @@
+export declare function getDPR(element: Element): number;

package/dist/utils/floating-ui/svelte-dom/utils/getDPR.js

@@ -0,0 +1,7 @@
+export function getDPR(element) {
+    if (typeof window === "undefined") {
+        return 1;
+    }
+    const win = element.ownerDocument.defaultView || window;
+    return win.devicePixelRatio || 1;
+}

package/dist/utils/floating-ui/svelte-dom/utils/roundByDPR.d.ts

@@ -0,0 +1 @@
+export declare function roundByDPR(element: Element, value: number): number;

package/dist/utils/floating-ui/svelte-dom/utils/roundByDPR.js

@@ -0,0 +1,5 @@
+import { getDPR } from "./getDPR.js";
+export function roundByDPR(element, value) {
+    const dpr = getDPR(element);
+    return Math.round(value * dpr) / dpr;
+}

package/dist/utils/floating-ui/svelte-dom/utils/useLatestRef.d.ts

@@ -0,0 +1,4 @@
+import type { MutableRefObject } from "../../../ref.svelte.js";
+export declare function useLatestRef<T>(options: {
+    value: T;
+}): MutableRefObject<T>;

package/dist/utils/floating-ui/svelte-dom/utils/useLatestRef.js

@@ -0,0 +1,7 @@
+export function useLatestRef(options) {
+    return {
+        get current() {
+            return options.value;
+        },
+    };
+}

package/dist/utils/focus-management.d.ts

@@ -1,3 +1,4 @@
+export declare let focusableSelector: string;
 export declare enum Focus {
     /** Focus the first non-disabled element */
     First = 1,
@@ -35,7 +36,7 @@ export declare enum FocusableMode {
 export declare function isFocusableElement(element: HTMLElement, mode?: FocusableMode): boolean;
 export declare function restoreFocusIfNecessary(element: HTMLElement | null): void;
 export declare function focusElement(element: HTMLElement | null): void;
-export declare function sortByDomNode<T>(nodes: T[], resolveKey?: (item: T) => HTMLElement | null | undefined): T[];
+export declare function sortByDomNode<T>(nodes: T[], resolveKey?: (item: T) => HTMLElement | null): T[];
 export declare function focusFrom(current: HTMLElement | null, focus: Focus): FocusResult;
 export declare function focusIn(container: HTMLElement | HTMLElement[], focus: Focus, { sorted, relativeTo, skipElements, }?: Partial<{
     sorted: boolean;

package/dist/utils/focus-management.js

@@ -3,7 +3,7 @@ import { match } from "./match.js";
 import { getOwnerDocument } from "./owner.js";
 // Credit:
 //  - https://stackoverflow.com/a/30753870
-const focusableSelector = [
+export let focusableSelector = [
     "[contentEditable=true]",
     "[tabindex]",
     "a[href]",
@@ -21,7 +21,7 @@ const focusableSelector = [
         (selector) => `${selector}:not([tabindex='-1']):not([style*='display: none'])`
     : (selector) => `${selector}:not([tabindex='-1'])`)
     .join(",");
-const autoFocusableSelector = [
+let autoFocusableSelector = [
     // In a perfect world this was just `autofocus`, but React doesn't pass `autofocus` to the DOM...
     "[data-autofocus]",
 ]
@@ -105,7 +105,7 @@ export function isFocusableElement(element, mode = FocusableMode.Strict) {
     });
 }
 export function restoreFocusIfNecessary(element) {
-    const ownerDocument = getOwnerDocument(element);
+    let ownerDocument = getOwnerDocument(element);
     disposables().nextFrame(() => {
         if (ownerDocument && !isFocusableElement(ownerDocument.activeElement, FocusableMode.Strict)) {
             focusElement(element);
@@ -144,17 +144,17 @@ export function focusElement(element) {
     element?.focus({ preventScroll: true });
 }
 // https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/select
-const selectableSelector = ["textarea", "input"].join(",");
+let selectableSelector = ["textarea", "input"].join(",");
 function isSelectableElement(element) {
     return element?.matches?.(selectableSelector) ?? false;
 }
 export function sortByDomNode(nodes, resolveKey = (i) => i) {
     return nodes.slice().sort((aItem, zItem) => {
-        const a = resolveKey(aItem);
-        const z = resolveKey(zItem);
-        if (!a || !z)
+        let a = resolveKey(aItem);
+        let z = resolveKey(zItem);
+        if (a === null || z === null)
             return 0;
-        const position = a.compareDocumentPosition(z);
+        let position = a.compareDocumentPosition(z);
         if (position & Node.DOCUMENT_POSITION_FOLLOWING)
             return -1;
         if (position & Node.DOCUMENT_POSITION_PRECEDING)
@@ -166,7 +166,7 @@ export function focusFrom(current, focus) {
     return focusIn(getFocusableElements(), focus, { relativeTo: current });
 }
 export function focusIn(container, focus, { sorted = true, relativeTo = null, skipElements = [], } = {}) {
-    const ownerDocument = Array.isArray(container)
+    let ownerDocument = Array.isArray(container)
         ? container.length > 0
             ? container[0].ownerDocument
             : document
@@ -185,14 +185,14 @@ export function focusIn(container, focus, { sorted = true, relativeTo = null, sk
         ));
     }
     relativeTo = relativeTo ?? ownerDocument.activeElement;
-    const direction = (() => {
+    let direction = (() => {
         if (focus & (Focus.First | Focus.Next))
             return Direction.Next;
         if (focus & (Focus.Previous | Focus.Last))
             return Direction.Previous;
         throw new Error("Missing Focus.First, Focus.Previous, Focus.Next or Focus.Last");
     })();
-    const startIndex = (() => {
+    let startIndex = (() => {
         if (focus & Focus.First)
             return 0;
         if (focus & Focus.Previous)
@@ -203,9 +203,9 @@ export function focusIn(container, focus, { sorted = true, relativeTo = null, sk
             return elements.length - 1;
         throw new Error("Missing Focus.First, Focus.Previous, Focus.Next or Focus.Last");
     })();
-    const focusOptions = focus & Focus.NoScroll ? { preventScroll: true } : {};
+    let focusOptions = focus & Focus.NoScroll ? { preventScroll: true } : {};
     let offset = 0;
-    const total = elements.length;
+    let total = elements.length;
     let next = undefined;
     do {
         // Guard against infinite loops

package/dist/utils/id.d.ts

@@ -1,4 +1,4 @@
 export declare const alphaid: (size?: number) => string;
 export declare const htmlid: (size?: number) => string;
-export declare const getIdContext: () => string | undefined;
+export declare const useProvidedId: () => string | undefined;
 export declare const createIdContext: (id: string) => string | undefined;