@pzerelles/headlessui-svelte 2.0.0-next.1 → 2.1.1-next.1

package/dist/hooks/document-overflow/handle-ios-locking.js

@@ -0,0 +1,134 @@
+import { disposables } from "../../utils/disposables.js";
+import { isIOS } from "../../utils/platform.js";
+export function handleIOSLocking() {
+    if (!isIOS()) {
+        return {};
+    }
+    return {
+        before({ doc, d, meta }) {
+            function inAllowedContainer(el) {
+                return meta.containers.flatMap((resolve) => resolve()).some((container) => container.contains(el));
+            }
+            d.microTask(() => {
+                // We need to be able to offset the body with the current scroll position. However, if you
+                // have `scroll-behavior: smooth` set, then changing the scrollTop in any way shape or form
+                // will trigger a "smooth" scroll and the new position would be incorrect.
+                //
+                // This is why we are forcing the `scroll-behavior: auto` here, and then restoring it later.
+                // We have to be a bit careful, because removing `scroll-behavior: auto` back to
+                // `scroll-behavior: smooth` can start triggering smooth scrolling. Delaying this by a
+                // microTask will guarantee that everything is done such that both enter/exit of the Dialog is
+                // not using smooth scrolling.
+                if (window.getComputedStyle(doc.documentElement).scrollBehavior !== "auto") {
+                    let _d = disposables();
+                    _d.style(doc.documentElement, "scrollBehavior", "auto");
+                    d.add(() => d.microTask(() => _d.dispose()));
+                }
+                // Keep track of the current scroll position so that we can restore the scroll position if
+                // it has changed in the meantime.
+                let scrollPosition = window.scrollY ?? window.pageYOffset;
+                // Relatively hacky, but if you click a link like `<a href="#foo">` in the Dialog, and there
+                // exists an element on the page (outside of the Dialog) with that id, then the browser will
+                // scroll to that position. However, this is not the case if the element we want to scroll to
+                // is higher and the browser needs to scroll up, but it doesn't do that.
+                //
+                // Let's try and capture that element and store it, so that we can later scroll to it once the
+                // Dialog closes.
+                let scrollToElement = null;
+                d.addEventListener(doc, "click", (e) => {
+                    if (!(e.target instanceof HTMLElement)) {
+                        return;
+                    }
+                    try {
+                        let anchor = e.target.closest("a");
+                        if (!anchor)
+                            return;
+                        let { hash } = new URL(anchor.href);
+                        let el = doc.querySelector(hash);
+                        if (el && !inAllowedContainer(el)) {
+                            scrollToElement = el;
+                        }
+                    }
+                    catch (err) { }
+                }, true);
+                // Rely on overscrollBehavior to prevent scrolling outside of the Dialog.
+                d.addEventListener(doc, "touchstart", (e) => {
+                    if (e.target instanceof HTMLElement) {
+                        if (inAllowedContainer(e.target)) {
+                            // Find the root of the allowed containers
+                            let rootContainer = e.target;
+                            while (rootContainer.parentElement && inAllowedContainer(rootContainer.parentElement)) {
+                                rootContainer = rootContainer.parentElement;
+                            }
+                            d.style(rootContainer, "overscrollBehavior", "contain");
+                        }
+                        else {
+                            d.style(e.target, "touchAction", "none");
+                        }
+                    }
+                });
+                d.addEventListener(doc, "touchmove", (e) => {
+                    // Check if we are scrolling inside any of the allowed containers, if not let's cancel the event!
+                    if (e.target instanceof HTMLElement) {
+                        // Some inputs like `<input type=range>` use touch events to
+                        // allow interaction. We should not prevent this event.
+                        if (e.target.tagName === "INPUT") {
+                            return;
+                        }
+                        if (inAllowedContainer(e.target)) {
+                            // Even if we are in an allowed container, on iOS the main page can still scroll, we
+                            // have to make sure that we `event.preventDefault()` this event to prevent that.
+                            //
+                            // However, if we happen to scroll on an element that is overflowing, or any of its
+                            // parents are overflowing, then we should not call `event.preventDefault()` because
+                            // otherwise we are preventing the user from scrolling inside that container which
+                            // is not what we want.
+                            let scrollableParent = e.target;
+                            while (scrollableParent.parentElement &&
+                                // Assumption: We are always used in a Headless UI Portal. Once we reach the
+                                // portal itself, we can stop crawling up the tree.
+                                scrollableParent.dataset.headlessuiPortal !== "") {
+                                // Check if the scrollable container is overflowing or not.
+                                //
+                                // NOTE: we could check the `overflow`, `overflow-y` and `overflow-x` properties
+                                // but when there is no overflow happening then the `overscrollBehavior` doesn't
+                                // seem to work and the main page will still scroll. So instead we check if the
+                                // scrollable container is overflowing or not and use that heuristic instead.
+                                if (scrollableParent.scrollHeight > scrollableParent.clientHeight ||
+                                    scrollableParent.scrollWidth > scrollableParent.clientWidth) {
+                                    break;
+                                }
+                                scrollableParent = scrollableParent.parentElement;
+                            }
+                            // We crawled up the tree until the beginning of the Portal, let's prevent the
+                            // event if this is the case. If not, then we are in a container where we are
+                            // allowed to scroll so we don't have to prevent the event.
+                            if (scrollableParent.dataset.headlessuiPortal === "") {
+                                e.preventDefault();
+                            }
+                        }
+                        // We are not in an allowed container, so let's prevent the event.
+                        else {
+                            e.preventDefault();
+                        }
+                    }
+                }, { passive: false });
+                // Restore scroll position if a scrollToElement was captured.
+                d.add(() => {
+                    let newScrollPosition = window.scrollY ?? window.pageYOffset;
+                    // If the scroll position changed, then we can restore it to the previous value. This will
+                    // happen if you focus an input field and the browser scrolls for you.
+                    if (scrollPosition !== newScrollPosition) {
+                        window.scrollTo(0, scrollPosition);
+                    }
+                    // If we captured an element that should be scrolled to, then we can try to do that if the
+                    // element is still connected (aka, still in the DOM).
+                    if (scrollToElement && scrollToElement.isConnected) {
+                        scrollToElement.scrollIntoView({ block: "nearest" });
+                        scrollToElement = null;
+                    }
+                });
+            });
+        },
+    };
+}

package/dist/hooks/document-overflow/overflow-store.d.ts

@@ -0,0 +1,19 @@
+import { type Disposables } from "../../utils/disposables.js";
+interface DocEntry {
+    doc: Document;
+    count: number;
+    d: Disposables;
+    meta: Set<MetaFn>;
+}
+export type MetaFn = (meta: Record<string, any>) => Record<string, any>;
+export interface Context<MetaType extends Record<string, any> = any> {
+    doc: Document;
+    d: Disposables;
+    meta: MetaType;
+}
+export interface ScrollLockStep<MetaType extends Record<string, any> = any> {
+    before?(ctx: Context<MetaType>): void;
+    after?(ctx: Context<MetaType>): void;
+}
+export declare let overflows: import("../../utils/store.js").Store<Map<Document, DocEntry>, "PUSH" | "POP" | "SCROLL_PREVENT" | "SCROLL_ALLOW" | "TEARDOWN">;
+export {};

package/dist/hooks/document-overflow/overflow-store.js

@@ -0,0 +1,76 @@
+import { disposables } from "../../utils/disposables.js";
+import { createStore } from "../../utils/store.js";
+import { adjustScrollbarPadding } from "./adjust-scrollbar-padding.js";
+import { handleIOSLocking } from "./handle-ios-locking.js";
+import { preventScroll } from "./prevent-scroll.js";
+function buildMeta(fns) {
+    let tmp = {};
+    for (let fn of fns) {
+        Object.assign(tmp, fn(tmp));
+    }
+    return tmp;
+}
+export let overflows = createStore(() => new Map(), {
+    PUSH(doc, meta) {
+        let entry = this.get(doc) ?? {
+            doc,
+            count: 0,
+            d: disposables(),
+            meta: new Set(),
+        };
+        entry.count++;
+        entry.meta.add(meta);
+        this.set(doc, entry);
+        return this;
+    },
+    POP(doc, meta) {
+        let entry = this.get(doc);
+        if (entry) {
+            entry.count--;
+            entry.meta.delete(meta);
+        }
+        return this;
+    },
+    SCROLL_PREVENT({ doc, d, meta }) {
+        let ctx = {
+            doc,
+            d,
+            meta: buildMeta(meta),
+        };
+        let steps = [handleIOSLocking(), adjustScrollbarPadding(), preventScroll()];
+        // Run all `before` actions together
+        steps.forEach(({ before }) => before?.(ctx));
+        // Run all `after` actions together
+        steps.forEach(({ after }) => after?.(ctx));
+    },
+    SCROLL_ALLOW({ d }) {
+        d.dispose();
+    },
+    TEARDOWN({ doc }) {
+        this.delete(doc);
+    },
+});
+// Update the document overflow state when the store changes
+// This MUST happen outside of react for this to work properly.
+overflows.subscribe(() => {
+    let docs = overflows.getSnapshot();
+    let styles = new Map();
+    // Read data from all the documents
+    for (let [doc] of docs) {
+        styles.set(doc, doc.documentElement.style.overflow);
+    }
+    // Write data to all the documents
+    for (let entry of docs.values()) {
+        let isHidden = styles.get(entry.doc) === "hidden";
+        let isLocked = entry.count !== 0;
+        let willChange = (isLocked && !isHidden) || (!isLocked && isHidden);
+        if (willChange) {
+            overflows.dispatch(entry.count > 0 ? "SCROLL_PREVENT" : "SCROLL_ALLOW", entry);
+        }
+        // We have to clean up after ourselves so we don't leak memory
+        // Using a WeakMap would be ideal, but it's not iterable
+        if (entry.count === 0) {
+            overflows.dispatch("TEARDOWN", entry);
+        }
+    }
+});

package/dist/hooks/document-overflow/prevent-scroll.d.ts

@@ -0,0 +1,2 @@
+import type { ScrollLockStep } from "./overflow-store.js";
+export declare function preventScroll(): ScrollLockStep;

package/dist/hooks/document-overflow/prevent-scroll.js

@@ -0,0 +1,7 @@
+export function preventScroll() {
+    return {
+        before({ doc, d }) {
+            d.style(doc.documentElement, "overflow", "hidden");
+        },
+    };
+}

package/dist/hooks/document-overflow/use-document-overflow.svelte.d.ts

@@ -0,0 +1,7 @@
+export declare function useDocumentOverflowLockedEffect(options: {
+    shouldBeLocked: boolean;
+    doc: Document | null;
+    meta?: (meta: Record<string, any>) => Record<string, any>;
+}): {
+    readonly locked: boolean;
+};

package/dist/hooks/document-overflow/use-document-overflow.svelte.js

@@ -0,0 +1,27 @@
+import { overflows } from "./overflow-store.js";
+export function useDocumentOverflowLockedEffect(options) {
+    const { shouldBeLocked, doc, meta = () => ({ containers: [] }) } = $derived(options);
+    let store = $state(overflows.getSnapshot());
+    $effect(() => {
+        const unsubscribe = overflows.subscribe(() => {
+            store = overflows.getSnapshot();
+        });
+        return unsubscribe;
+    });
+    const entry = $derived(doc ? store.get(doc) : undefined);
+    const locked = $derived(entry ? entry.count > 0 : false);
+    $effect(() => {
+        if (!doc || !shouldBeLocked) {
+            return;
+        }
+        // Prevent the document from scrolling
+        overflows.dispatch("PUSH", doc, meta);
+        // Allow document to scroll
+        return () => overflows.dispatch("POP", doc, meta);
+    });
+    return {
+        get locked() {
+            return locked;
+        },
+    };
+}

package/dist/hooks/use-active-press.svelte.d.ts

@@ -0,0 +1,14 @@
+export declare const useActivePress: (options: {
+    disabled?: boolean;
+}) => {
+    readonly pressed: boolean;
+    readonly pressProps: {
+        onpointerdown?: undefined;
+        onpointerup?: undefined;
+        onclick?: undefined;
+    } | {
+        onpointerdown: (event: PointerEvent) => void;
+        onpointerup: () => void;
+        onclick: () => void;
+    };
+};

package/dist/{actions/activePress.svelte.js → hooks/use-active-press.svelte.js}

@@ -1,9 +1,9 @@
 import { disposables } from "../utils/disposables.js";
-import { getOwnerDocument } from "../utils/dom.js";
+import { getOwnerDocument } from "../utils/owner.js";
 function pointerRectFromPointerEvent(event) {
     // Center of the pointer geometry
-    let offsetX = event.width / 2;
-    let offsetY = event.height / 2;
+    const offsetX = event.width / 2;
+    const offsetY = event.height / 2;
     return {
         top: event.clientY - offsetY,
         right: event.clientX + offsetX,
@@ -23,27 +23,28 @@ function areRectsOverlapping(a, b) {
     }
     return true;
 }
-export const createActivePress = ({ disabled }) => {
+export const useActivePress = (options) => {
+    const { disabled } = $derived(options);
     let currentTarget = $state(null);
     let pressed = $state(false);
-    const activePressAction = (node) => {
-        const d = disposables();
-        const reset = () => {
-            currentTarget = null;
-            pressed = false;
-            d.dispose();
-        };
-        const handlePointerDown = (event) => {
-            d.dispose(); // Cancel any scheduled tasks
-            if (currentTarget !== null)
-                return;
-            // Keep track of the current element
-            currentTarget = event.currentTarget;
-            // We are definitely pressing the element now
-            pressed = true;
-            // Setup global handlers to catch events on elements that are not the current element
-            {
-                let owner = getOwnerDocument(event.currentTarget);
+    const d = disposables();
+    const reset = () => {
+        currentTarget = null;
+        pressed = false;
+        d.dispose();
+    };
+    const handlePointerDown = (event) => {
+        d.dispose(); // Cancel any scheduled tasks
+        if (currentTarget !== null)
+            return;
+        // Keep track of the current element
+        currentTarget = event.currentTarget;
+        // We are definitely pressing the element now
+        pressed = true;
+        // Setup global handlers to catch events on elements that are not the current element
+        {
+            const owner = getOwnerDocument(event.currentTarget);
+            if (owner) {
                 // `pointerup` on any element means that we are no longer pressing the current element
                 d.addEventListener(owner, "pointerup", reset, false);
                 // `pointerleave` isn't called consistently (if at all) on iOS Safari, so we use `pointermove` instead
@@ -51,34 +52,27 @@ export const createActivePress = ({ disabled }) => {
                 // so that we can tell if the pointer is still over the element or not.
                 d.addEventListener(owner, "pointermove", (event) => {
                     if (currentTarget) {
-                        let pointerRect = pointerRectFromPointerEvent(event);
+                        const pointerRect = pointerRectFromPointerEvent(event);
                         pressed = areRectsOverlapping(pointerRect, currentTarget.getBoundingClientRect());
                     }
                 }, false);
                 // Whenever the browser decides to fire a `pointercancel` event, we should abort
                 d.addEventListener(owner, "pointercancel", reset, false);
             }
-        };
-        if (!disabled) {
-            node.addEventListener("pointerdown", handlePointerDown);
-            node.addEventListener("pointerup", reset);
-            node.addEventListener("click", reset);
         }
-        return {
-            destroy: () => {
-                if (!disabled) {
-                    node.removeEventListener("pointerdown", handlePointerDown);
-                    node.removeEventListener("pointerup", reset);
-                    node.removeEventListener("click", reset);
-                }
-                d.dispose();
-            },
-        };
     };
     return {
-        activePressAction,
         get pressed() {
             return pressed;
         },
+        get pressProps() {
+            return disabled
+                ? {}
+                : {
+                    onpointerdown: handlePointerDown,
+                    onpointerup: reset,
+                    onclick: reset,
+                };
+        },
     };
 };

package/dist/hooks/use-by-comparator.d.ts

@@ -0,0 +1,2 @@
+export type ByComparator<T> = (NonNullable<T> extends never ? string : keyof NonNullable<T> & string) | ((a: T, z: T) => boolean);
+export declare function useByComparator<T>(by?: ByComparator<T>): (a: T, z: T) => boolean;

package/dist/hooks/use-by-comparator.js

@@ -0,0 +1,15 @@
+function defaultBy(a, z) {
+    if (a !== null && z !== null && typeof a === "object" && typeof z === "object" && "id" in a && "id" in z) {
+        return a.id === z.id;
+    }
+    return a === z;
+}
+export function useByComparator(by = defaultBy) {
+    return (a, z) => {
+        if (typeof by === "string") {
+            const property = by;
+            return a?.[property] === z?.[property];
+        }
+        return by(a, z);
+    };
+}

package/dist/hooks/use-controllable.svelte.d.ts

@@ -0,0 +1,6 @@
+export declare function useControllable<T>(input: {
+    controlledValue: T | undefined;
+}, onchange?: (value: T) => void, defaultValue?: T): {
+    readonly value: NonNullable<T>;
+    onchange: (value: T) => void | undefined;
+};

package/dist/hooks/use-controllable.svelte.js

@@ -0,0 +1,34 @@
+export function useControllable(input, onchange, defaultValue) {
+    let internalValue = $state(defaultValue);
+    const isControlled = $derived(input.controlledValue !== undefined);
+    let wasControlled = isControlled;
+    let didWarnOnUncontrolledToControlled = false;
+    let didWarnOnControlledToUncontrolled = false;
+    $effect(() => {
+        if (isControlled && !wasControlled && !didWarnOnUncontrolledToControlled) {
+            didWarnOnUncontrolledToControlled = true;
+            wasControlled = isControlled;
+            console.error("A component is changing from uncontrolled to controlled. This may be caused by the value changing from undefined to a defined value, which should not happen.");
+        }
+        else if (!isControlled && wasControlled && !didWarnOnControlledToUncontrolled) {
+            didWarnOnControlledToUncontrolled = true;
+            wasControlled = isControlled;
+            console.error("A component is changing from controlled to uncontrolled. This may be caused by the value changing from a defined value to undefined, which should not happen.");
+        }
+    });
+    const value = $derived(isControlled ? input.controlledValue : internalValue);
+    return {
+        get value() {
+            return value;
+        },
+        onchange: (value) => {
+            if (isControlled) {
+                return onchange?.(value);
+            }
+            else {
+                internalValue = value;
+                return onchange?.(value);
+            }
+        },
+    };
+}

package/dist/hooks/use-did-element-move.svelte.d.ts

@@ -0,0 +1,6 @@
+export declare function useDidElementMove(options: {
+    enabled: boolean;
+    element: HTMLElement | null;
+}): {
+    readonly value: boolean;
+};

package/dist/hooks/use-did-element-move.svelte.js

@@ -0,0 +1,27 @@
+export function useDidElementMove(options) {
+    const { enabled, element } = $derived(options);
+    let elementPosition = $state({ left: 0, top: 0 });
+    $effect(() => {
+        if (!element)
+            return;
+        let DOMRect = element.getBoundingClientRect();
+        if (DOMRect)
+            elementPosition = DOMRect;
+    });
+    const value = $derived.by(() => {
+        if (element == null)
+            return false;
+        if (!enabled)
+            return false;
+        if (element === document.activeElement)
+            return false;
+        let buttonRect = element.getBoundingClientRect();
+        let didElementMove = buttonRect.top !== elementPosition.top || buttonRect.left !== elementPosition.left;
+        return didElementMove;
+    });
+    return {
+        get value() {
+            return value;
+        },
+    };
+}

package/dist/hooks/use-disabled.d.ts

@@ -0,0 +1,3 @@
+export declare const useDisabled: () => {
+    readonly value: boolean;
+};

package/dist/hooks/use-disabled.js

@@ -0,0 +1,9 @@
+import { getContext } from "svelte";
+export const useDisabled = () => {
+    const context = getContext("DisabledContext");
+    return {
+        get value() {
+            return context?.value ?? false;
+        },
+    };
+};

package/dist/hooks/use-element-size.svelte.d.ts

@@ -0,0 +1,7 @@
+export declare function useElementSize(options: {
+    element: HTMLElement | null;
+    unit: boolean;
+}): {
+    readonly width: string | number;
+    readonly height: string | number;
+};

package/dist/hooks/use-element-size.svelte.js

@@ -0,0 +1,36 @@
+function computeSize(element) {
+    if (element === null)
+        return { width: 0, height: 0 };
+    const { width, height } = element.getBoundingClientRect();
+    return { width, height };
+}
+export function useElementSize(options) {
+    const { element, unit = false } = $derived(options);
+    // When the element changes during a re-render, we want to make sure we
+    // compute the correct size as soon as possible. However, once the element is
+    // stable, we also want to watch for changes to the element. The `identity`
+    // state can be used to recompute the size.
+    let size = $state(computeSize(element));
+    const observeSize = (element) => {
+        if (!element)
+            return;
+        const observer = new ResizeObserver(() => {
+            const { width, height } = computeSize(element);
+            if (width !== size.width || height !== size.height)
+                size = { width, height };
+        });
+        observer.observe(element);
+        return () => {
+            observer.disconnect();
+        };
+    };
+    $effect(() => observeSize(element));
+    return {
+        get width() {
+            return unit ? `${size.width}px` : size.width;
+        },
+        get height() {
+            return unit ? `${size.height}px` : size.height;
+        },
+    };
+}

package/dist/hooks/use-flags.svelte.d.ts

@@ -0,0 +1,8 @@
+export declare function useFlags(initialFlags?: number): {
+    readonly flags: number;
+    setFlag: (flag: number) => number;
+    addFlag: (flag: number) => number;
+    hasFlag: (flag: number) => boolean;
+    removeFlag: (flag: number) => number;
+    toggleFlag: (flag: number) => number;
+};

package/dist/hooks/use-flags.svelte.js

@@ -0,0 +1,18 @@
+export function useFlags(initialFlags = 0) {
+    let flags = $state(initialFlags);
+    let setFlag = (flag) => (flags = flag);
+    let addFlag = (flag) => (flags = flags | flag);
+    let hasFlag = (flag) => (flags & flag) === flag;
+    let removeFlag = (flag) => (flags = flags & ~flag);
+    let toggleFlag = (flag) => (flags = flags ^ flag);
+    return {
+        get flags() {
+            return flags;
+        },
+        setFlag,
+        addFlag,
+        hasFlag,
+        removeFlag,
+        toggleFlag,
+    };
+}

package/dist/hooks/use-focus-ring.svelte.d.ts

@@ -0,0 +1,10 @@
+export declare const useFocusRing: (options?: {
+    autofocus?: boolean;
+    within?: boolean;
+}) => {
+    readonly isFocusVisible: boolean;
+    focusProps: {
+        onfocus: () => void;
+        onblur: () => void;
+    };
+};

package/dist/hooks/use-focus-ring.svelte.js

@@ -0,0 +1,24 @@
+import { isFocusVisible, useFocusVisibleListener } from "../utils/focusVisible.svelte.js";
+export const useFocusRing = (options = {}) => {
+    const { autofocus, within } = $derived(options);
+    let focused = $state(false);
+    let _isFocusVisible = $state(autofocus || isFocusVisible());
+    useFocusVisibleListener((isFocusVisible) => {
+        _isFocusVisible = isFocusVisible;
+    });
+    return {
+        get isFocusVisible() {
+            return _isFocusVisible && focused;
+        },
+        focusProps: {
+            onfocus: () => {
+                if (!within)
+                    focused = true;
+            },
+            onblur: () => {
+                if (!within)
+                    focused = false;
+            },
+        },
+    };
+};

package/dist/hooks/use-hover.svelte.d.ts

@@ -0,0 +1,26 @@
+export interface HoverEvent {
+    /** The type of hover event being fired. */
+    type: "hoverstart" | "hoverend";
+    /** The pointer type that triggered the hover event. */
+    pointerType: "mouse" | "pen";
+    /** The target element of the hover event. */
+    target: Element;
+}
+export declare const useHover: (options?: {
+    disabled?: boolean;
+}) => {
+    readonly isHovered: boolean;
+    hoverProps: {
+        onpointerenter: (e: PointerEvent) => void;
+        onpointerleave: (e: PointerEvent) => void;
+        onmouseenter?: undefined;
+        onmouseleave?: undefined;
+        ontouchstart?: undefined;
+    } | {
+        onmouseenter: (e: MouseEvent) => void;
+        onmouseleave: (e: MouseEvent) => void;
+        ontouchstart: () => void;
+        onpointerenter?: undefined;
+        onpointerleave?: undefined;
+    };
+};