@pzerelles/headlessui-svelte 2.0.0-next.1 → 2.1.2-next.2

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;
+};

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 && onchange) {
+                onchange?.(value);
+            }
+            else {
+                internalValue = value;
+                input.controlledValue = 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-escape.svelte.d.ts

@@ -0,0 +1,5 @@
+export declare function useEscape(options: {
+    enabled: boolean;
+    view: typeof document.defaultView | null;
+    cb: (event: KeyboardEvent) => void;
+}): void;

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

@@ -0,0 +1,26 @@
+import { useEventListener } from "./use-event-listener.svelte.js";
+import { useIsTopLayer } from "./use-is-top-layer.svelte.js";
+export function useEscape(options) {
+    const { enabled, view = typeof document !== "undefined" ? document.defaultView : null, cb } = $derived(options);
+    let isTopLayer = useIsTopLayer({
+        get enabled() {
+            return enabled;
+        },
+        scope: "escape",
+    });
+    useEventListener({
+        get element() {
+            return view;
+        },
+        type: "keydown",
+        listener: (event) => {
+            if (!isTopLayer.value)
+                return;
+            if (event.defaultPrevented)
+                return;
+            if (event.key !== "Escape")
+                return;
+            cb(event);
+        },
+    });
+}

package/dist/hooks/use-event-listener.svelte.d.ts

@@ -0,0 +1,6 @@
+export declare function useEventListener<TType extends keyof WindowEventMap>(params: {
+    element: HTMLElement | Document | Window | EventTarget | null | undefined;
+    type: TType;
+    listener: (event: WindowEventMap[TType]) => any;
+    options?: boolean | AddEventListenerOptions;
+}): void;

package/dist/hooks/use-event-listener.svelte.js

@@ -0,0 +1,12 @@
+export function useEventListener(params) {
+    let { element = window, type, listener, options } = $derived(params);
+    $effect(() => {
+        if (!element)
+            return;
+        function handler(event) {
+            listener(event);
+        }
+        element.addEventListener(type, handler, options);
+        return () => element.removeEventListener(type, handler, options);
+    });
+}

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;
+    };
+};

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

@@ -0,0 +1,124 @@
+// let { isHovered: hover, hoverProps } = useHover({ isDisabled: disabled })
+import { disposables } from "../utils/disposables.js";
+let globalIgnoreEmulatedMouseEvents = false;
+let hoverCount = 0;
+const d = disposables();
+function setGlobalIgnoreEmulatedMouseEvents() {
+    globalIgnoreEmulatedMouseEvents = true;
+    // Clear globalIgnoreEmulatedMouseEvents after a short timeout. iOS fires onPointerEnter
+    // with pointerType="mouse" immediately after onPointerUp and before onFocus. On other
+    // devices that don't have this quirk, we don't want to ignore a mouse hover sometime in
+    // the distant future because a user previously touched the element.
+    setTimeout(() => { });
+}
+function handleGlobalPointerEvent(e) {
+    if (e.pointerType === "touch") {
+        setGlobalIgnoreEmulatedMouseEvents();
+    }
+}
+function isHoverPointerType(pointerType) {
+    return pointerType === "mouse" || pointerType === "pen" || pointerType === "touch";
+}
+function setupGlobalTouchEvents() {
+    if (typeof document === "undefined" || !document)
+        return;
+    if (hoverCount === 0) {
+        if (typeof PointerEvent !== "undefined") {
+            d.addEventListener(document, "pointerup", handleGlobalPointerEvent);
+        }
+        else {
+            d.addEventListener(document, "touchend", setGlobalIgnoreEmulatedMouseEvents);
+        }
+    }
+    hoverCount++;
+    return () => {
+        hoverCount--;
+        if (hoverCount === 0)
+            d.dispose();
+    };
+}
+export const useHover = (options = {}) => {
+    const { disabled } = $derived(options);
+    const _state = $state({
+        isHovered: false,
+        ignoreEmulatedMouseEvents: false,
+        pointerType: "",
+        target: null,
+    });
+    $effect(() => setupGlobalTouchEvents());
+    $effect(() => {
+        if (disabled) {
+            _state.pointerType = "";
+            _state.target = null;
+            _state.isHovered = false;
+        }
+    });
+    function triggerHoverStart(originalEvent, pointerType) {
+        _state.pointerType = pointerType ?? undefined;
+        const target = originalEvent.currentTarget;
+        if (!(target instanceof HTMLElement || target instanceof SVGElement))
+            return;
+        if (disabled || pointerType === "touch" || _state.isHovered || !target.contains(originalEvent.target)) {
+            return;
+        }
+        _state.isHovered = true;
+        _state.target = target;
+    }
+    function triggerHoverEnd(originalEvent, pointerType) {
+        _state.pointerType = "";
+        _state.target = null;
+        const currentTarget = originalEvent.currentTarget;
+        if (pointerType === "touch" || !_state.isHovered || !(currentTarget instanceof HTMLElement))
+            return;
+        _state.isHovered = false;
+    }
+    function handlePointerEnter(e) {
+        const pointerType = e.pointerType;
+        if (!isHoverPointerType(pointerType))
+            return;
+        if (globalIgnoreEmulatedMouseEvents && e.pointerType === "mouse")
+            return;
+        triggerHoverStart(e, pointerType);
+    }
+    function handlePointerLeave(e) {
+        const pointerType = e.pointerType;
+        const currentTarget = e.currentTarget;
+        if (disabled ||
+            !(currentTarget instanceof HTMLElement) ||
+            !currentTarget.contains(e.target) ||
+            !isHoverPointerType(pointerType)) {
+            return;
+        }
+        triggerHoverEnd(e, pointerType);
+    }
+    function handleTouchStart() {
+        _state.ignoreEmulatedMouseEvents = true;
+    }
+    function handleMouseEnter(e) {
+        if (!_state.ignoreEmulatedMouseEvents && !globalIgnoreEmulatedMouseEvents) {
+            triggerHoverStart(e, "mouse");
+        }
+        _state.ignoreEmulatedMouseEvents = false;
+    }
+    function handleMouseLeave(e) {
+        const currentTarget = e.currentTarget;
+        if (disabled || !(currentTarget instanceof HTMLElement) || !currentTarget.contains(e.target))
+            return;
+        triggerHoverEnd(e, "mouse");
+    }
+    return {
+        get isHovered() {
+            return _state.isHovered;
+        },
+        hoverProps: typeof PointerEvent !== "undefined"
+            ? {
+                onpointerenter: handlePointerEnter,
+                onpointerleave: handlePointerLeave,
+            }
+            : {
+                onmouseenter: handleMouseEnter,
+                onmouseleave: handleMouseLeave,
+                ontouchstart: handleTouchStart,
+            },
+    };
+};

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

@@ -0,0 +1 @@
+export { htmlid as useId } from "../utils/id.js";

package/dist/hooks/use-id.js

@@ -0,0 +1 @@
+export { htmlid as useId } from "../utils/id.js";

package/dist/hooks/use-inert-others.svelte.d.ts

@@ -0,0 +1,32 @@
+/**
+ * Mark all elements on the page as inert, except for the ones that are allowed.
+ *
+ * We move up the tree from the allowed elements, and mark all their siblings as
+ * inert. If any of the children happens to be a parent of one of the elements,
+ * then that child will not be marked as inert.
+ *
+ * E.g.:
+ *
+ * ```html
+ * <body>                      <!-- Stop at body -->
+ *   <header></header>         <!-- Inert, sibling of parent -->
+ *   <main>                    <!-- Not inert, parent of allowed element -->
+ *     <div>Sidebar</div>      <!-- Inert, sibling of parent -->
+ *     <div>                   <!-- Not inert, parent of allowed element -->
+ *       <listbox>             <!-- Not inert, parent of allowed element -->
+ *         <button></button>   <!-- Not inert, allowed element -->
+ *         <options></options> <!-- Not inert, allowed element -->
+ *       </listbox>
+ *     </div>
+ *   </main>
+ *   <footer></footer>         <!-- Inert, sibling of parent -->
+ * </body>
+ * ```
+ */
+export declare function useInertOthers(options: {
+    enabled: boolean;
+    elements?: {
+        allowed?: (HTMLElement | null)[];
+        disallowed?: (HTMLElement | null)[];
+    };
+}): void;