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

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;

package/dist/hooks/use-inert-others.svelte.js

@@ -0,0 +1,114 @@
+import { disposables } from "../utils/disposables.js";
+import { getOwnerDocument } from "../utils/owner.js";
+import { useIsTopLayer } from "./use-is-top-layer.svelte.js";
+const originals = new Map();
+const counts = new Map();
+function markInert(element) {
+    // Increase count
+    let count = counts.get(element) ?? 0;
+    counts.set(element, count + 1);
+    // Already marked as inert, no need to do it again
+    if (count !== 0)
+        return () => markNotInert(element);
+    // Keep track of previous values, so that we can restore them when we are done
+    originals.set(element, {
+        "aria-hidden": element.getAttribute("aria-hidden"),
+        inert: element.inert,
+    });
+    // Mark as inert
+    element.setAttribute("aria-hidden", "true");
+    element.inert = true;
+    return () => markNotInert(element);
+}
+function markNotInert(element) {
+    // Decrease counts
+    let count = counts.get(element) ?? 1; // Should always exist
+    if (count === 1)
+        counts.delete(element); // We are the last one, so we can delete the count
+    else
+        counts.set(element, count - 1); // We are not the last one
+    // Not the last one, so we don't restore the original values (yet)
+    if (count !== 1)
+        return;
+    let original = originals.get(element);
+    if (!original)
+        return; // Should never happen
+    // Restore original values
+    if (original["aria-hidden"] === null)
+        element.removeAttribute("aria-hidden");
+    else
+        element.setAttribute("aria-hidden", original["aria-hidden"]);
+    element.inert = original.inert;
+    // Remove tracking of original values
+    originals.delete(element);
+}
+/**
+ * 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 function useInertOthers(options) {
+    const { enabled, elements } = $derived(options);
+    const { allowed, disallowed } = $derived(elements ?? {});
+    let isTopLayer = useIsTopLayer({
+        get enabled() {
+            return enabled;
+        },
+        scope: "inert-others",
+    });
+    $effect(() => {
+        if (!isTopLayer.value)
+            return;
+        let d = disposables();
+        // Mark all disallowed elements as inert
+        for (let element of disallowed?.() ?? []) {
+            if (!element)
+                continue;
+            d.add(markInert(element));
+        }
+        // Mark all siblings of allowed elements (and parents) as inert
+        let allowedElements = allowed?.() ?? [];
+        for (let element of allowedElements) {
+            if (!element)
+                continue;
+            let ownerDocument = getOwnerDocument(element);
+            if (!ownerDocument)
+                continue;
+            let parent = element.parentElement;
+            while (parent && parent !== ownerDocument.body) {
+                // Mark all siblings as inert
+                for (let node of parent.children) {
+                    // If the node contains any of the elements we should not mark it as inert
+                    // because it would make the elements unreachable.
+                    if (allowedElements.some((el) => node.contains(el)))
+                        continue;
+                    // Mark the node as inert
+                    d.add(markInert(node));
+                }
+                // Move up the tree
+                parent = parent.parentElement;
+            }
+        }
+        return d.dispose;
+    });
+}

package/dist/hooks/use-is-top-layer.svelte.d.ts

@@ -0,0 +1,29 @@
+/**
+ * A hook that returns whether the current node is on the top of the hierarchy,
+ * aka "top layer". Note: this does not use the native DOM "top-layer" but
+ * conceptually it's the same thing.
+ *
+ * The hierarchy is also shared across multiple components that use the same
+ * scope.
+ *
+ * This is useful to use in components and hooks that mutate the DOM or share
+ * some global state.
+ *
+ * A use case for this is to use this inside of a `useOutsideClick` hook where
+ * only the last rendered component should handle the outside click event.
+ *
+ * ```ts
+ * <Dialog>
+ *   <Menu>
+ *     <MenuButton></MenuButton> // Pressing escape on an open `Menu` should close the `Menu` and not the `Dialog`.
+ *     // …
+ *   </Menu>
+ * </Dialog>
+ * ```
+ */
+export declare function useIsTopLayer(options: {
+    readonly enabled: boolean;
+    readonly scope: string;
+}): {
+    value: boolean;
+};

package/dist/hooks/use-is-top-layer.svelte.js

@@ -0,0 +1,82 @@
+import { DefaultMap } from "../utils/default-map.js";
+import { createStore } from "../utils/store.js";
+import { useId } from "./use-id.js";
+/**
+ * Map of stable hierarchy stores based on a given scope.
+ */
+let hierarchyStores = new DefaultMap(() => createStore(() => [], {
+    ADD(id) {
+        if (this.includes(id))
+            return this;
+        return [...this, id];
+    },
+    REMOVE(id) {
+        let idx = this.indexOf(id);
+        if (idx === -1)
+            return this;
+        let copy = this.slice();
+        copy.splice(idx, 1);
+        return copy;
+    },
+}));
+/**
+ * A hook that returns whether the current node is on the top of the hierarchy,
+ * aka "top layer". Note: this does not use the native DOM "top-layer" but
+ * conceptually it's the same thing.
+ *
+ * The hierarchy is also shared across multiple components that use the same
+ * scope.
+ *
+ * This is useful to use in components and hooks that mutate the DOM or share
+ * some global state.
+ *
+ * A use case for this is to use this inside of a `useOutsideClick` hook where
+ * only the last rendered component should handle the outside click event.
+ *
+ * ```ts
+ * <Dialog>
+ *   <Menu>
+ *     <MenuButton></MenuButton> // Pressing escape on an open `Menu` should close the `Menu` and not the `Dialog`.
+ *     // …
+ *   </Menu>
+ * </Dialog>
+ * ```
+ */
+export function useIsTopLayer(options) {
+    const { enabled, scope } = $derived(options);
+    const hierarchyStore = hierarchyStores.get(scope);
+    const id = useId();
+    let hierarchy = $state(hierarchyStore.getSnapshot());
+    $effect(() => {
+        const unsubscribe = hierarchyStore.subscribe(() => {
+            hierarchy = hierarchyStore.getSnapshot();
+        });
+        return unsubscribe;
+    });
+    $effect(() => {
+        if (!enabled)
+            return;
+        hierarchyStore.dispatch("ADD", id);
+        return () => hierarchyStore.dispatch("REMOVE", id);
+    });
+    const value = $derived.by(() => {
+        if (!enabled)
+            return false;
+        let idx = hierarchy.indexOf(id);
+        let hierarchyLength = hierarchy.length;
+        // Not in the hierarchy yet
+        if (idx === -1) {
+            // Assume that it will be inserted at the end, then it means that the `idx`
+            // will be the length of the current hierarchy.
+            idx = hierarchyLength;
+            // Increase the hierarchy length as-if the node is already in the hierarchy.
+            hierarchyLength += 1;
+        }
+        return idx === hierarchyLength - 1;
+    });
+    return {
+        get value() {
+            return value;
+        },
+    };
+}

package/dist/hooks/use-on-disappear.svelte.d.ts

@@ -0,0 +1,12 @@
+/**
+ * A hook to ensure that a callback is called when the element has disappeared
+ * from the screen.
+ *
+ * This can happen if you use Tailwind classes like: `hidden md:block`, once the
+ * viewport is smaller than `md` the element will disappear.
+ */
+export declare function useOnDisappear(options: {
+    enabled: boolean;
+    ref: HTMLElement | null | undefined;
+    ondisappear: () => void;
+}): void;

package/dist/hooks/use-on-disappear.svelte.js

@@ -0,0 +1,38 @@
+import { disposables } from "../utils/disposables.js";
+/**
+ * A hook to ensure that a callback is called when the element has disappeared
+ * from the screen.
+ *
+ * This can happen if you use Tailwind classes like: `hidden md:block`, once the
+ * viewport is smaller than `md` the element will disappear.
+ */
+export function useOnDisappear(options) {
+    const { enabled, ref, ondisappear } = $derived(options);
+    let listenerRef = (element) => {
+        let rect = element.getBoundingClientRect();
+        if (rect.x === 0 && rect.y === 0 && rect.width === 0 && rect.height === 0) {
+            ondisappear();
+        }
+    };
+    $effect(() => {
+        if (!enabled)
+            return;
+        const element = ref;
+        if (!element)
+            return;
+        let d = disposables();
+        // Try using ResizeObserver
+        if (typeof ResizeObserver !== "undefined") {
+            let observer = new ResizeObserver(() => listenerRef(element));
+            observer.observe(element);
+            d.add(() => observer.disconnect());
+        }
+        // Try using IntersectionObserver
+        if (typeof IntersectionObserver !== "undefined") {
+            let observer = new IntersectionObserver(() => listenerRef(element));
+            observer.observe(element);
+            d.add(() => observer.disconnect());
+        }
+        return () => d.dispose();
+    });
+}

package/dist/hooks/use-outside-click.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { MutableRefObject } from "../utils/ref.svelte.js";
+type Container = MutableRefObject<HTMLElement | null> | HTMLElement | null;
+type ContainerCollection = Container[] | Set<Container>;
+type ContainerInput = Container | ContainerCollection;
+export declare function useOutsideClick(options: {
+    enabled: boolean;
+    containers: ContainerInput | (() => ContainerInput);
+    cb: (event: MouseEvent | PointerEvent | FocusEvent | TouchEvent, target: HTMLElement) => void;
+}): void;
+export {};

package/dist/hooks/use-outside-click.svelte.js

@@ -0,0 +1,150 @@
+import { disposables } from "../utils/disposables.js";
+import { FocusableMode, isFocusableElement } from "../utils/focus-management.js";
+import { isMobile } from "../utils/platform.js";
+import { useIsTopLayer } from "./use-is-top-layer.svelte.js";
+// If the user moves their finger by ${MOVE_THRESHOLD_PX} pixels or more, we'll
+// assume that they are scrolling and not clicking. This will prevent the click
+// from being triggered when the user is scrolling.
+//
+// This also allows you to "cancel" the click by moving your finger more than
+// the threshold in pixels in any direction.
+const MOVE_THRESHOLD_PX = 30;
+export function useOutsideClick(options) {
+    const { enabled, containers, cb } = $derived(options);
+    const isTopLayer = useIsTopLayer({
+        get enabled() {
+            return enabled;
+        },
+        scope: "outside-click",
+    });
+    const handleOutsideClick = (event, resolveTarget) => {
+        // Check whether the event got prevented already. This can happen if you
+        // use the useOutsideClick hook in both a Dialog and a Menu and the inner
+        // Menu "cancels" the default behavior so that only the Menu closes and
+        // not the Dialog (yet)
+        if (event.defaultPrevented)
+            return;
+        let target = resolveTarget(event);
+        if (target === null) {
+            return;
+        }
+        // Ignore if the target doesn't exist in the DOM anymore
+        if (!target.getRootNode().contains(target))
+            return;
+        // Ignore if the target was removed from the DOM by the time the handler
+        // was called
+        if (!target.isConnected)
+            return;
+        let _containers = (function resolve(containers) {
+            if (typeof containers === "function") {
+                return resolve(containers());
+            }
+            if (Array.isArray(containers)) {
+                return containers;
+            }
+            if (containers instanceof Set) {
+                return containers;
+            }
+            return [containers];
+        })(containers);
+        // Ignore if the target exists in one of the containers
+        for (let container of _containers) {
+            if (container === null)
+                continue;
+            let domNode = container instanceof HTMLElement ? container : container.current;
+            if (domNode?.contains(target)) {
+                return;
+            }
+            // If the click crossed a shadow boundary, we need to check if the
+            // container is inside the tree by using `composedPath` to "pierce" the
+            // shadow boundary
+            if (event.composed && event.composedPath().includes(domNode)) {
+                return;
+            }
+        }
+        // This allows us to check whether the event was defaultPrevented when you
+        // are nesting this inside a `<Dialog />` for example.
+        if (
+        // This check allows us to know whether or not we clicked on a
+        // "focusable" element like a button or an input. This is a backwards
+        // compatibility check so that you can open a <Menu /> and click on
+        // another <Menu /> which should close Menu A and open Menu B. We might
+        // revisit that so that you will require 2 clicks instead.
+        !isFocusableElement(target, FocusableMode.Loose) &&
+            // This could be improved, but the `Combobox.Button` adds tabIndex={-1}
+            // to make it unfocusable via the keyboard so that tabbing to the next
+            // item from the input doesn't first go to the button.
+            target.tabIndex !== -1) {
+            event.preventDefault();
+        }
+        return cb(event, target);
+    };
+    let initialClickTarget = $state(null);
+    const addEventListeners = (enabled) => {
+        if (!enabled || typeof document === "undefined" || typeof window === "undefined")
+            return;
+        const d = disposables();
+        d.addEventListener(document, "pointerdown", (event) => {
+            initialClickTarget = event.composedPath?.()?.[0] || event.target;
+        }, true);
+        d.addEventListener(document, "mousedown", (event) => {
+            initialClickTarget = event.composedPath?.()?.[0] || event.target;
+        }, true);
+        d.addEventListener(document, "click", (event) => {
+            if (isMobile())
+                return;
+            if (!initialClickTarget)
+                return;
+            handleOutsideClick(event, () => {
+                return initialClickTarget;
+            });
+            initialClickTarget = null;
+        }, 
+        // We will use the `capture` phase so that layers in between with `event.stopPropagation()`
+        // don't "cancel" this outside click check. E.g.: A `Menu` inside a `DialogPanel` if the `Menu`
+        // is open, and you click outside of it in the `DialogPanel` the `Menu` should close. However,
+        // the `DialogPanel` has a `onClick(e) { e.stopPropagation() }` which would cancel this.
+        true);
+        let startPosition = $state({ x: 0, y: 0 });
+        d.addEventListener(document, "touchstart", (event) => {
+            startPosition.x = event.touches[0].clientX;
+            startPosition.y = event.touches[0].clientY;
+        }, true);
+        d.addEventListener(document, "touchend", (event) => {
+            // If the user moves their finger by ${MOVE_THRESHOLD_PX} pixels or more,
+            // we'll assume that they are scrolling and not clicking.
+            let endPosition = { x: event.changedTouches[0].clientX, y: event.changedTouches[0].clientY };
+            if (Math.abs(endPosition.x - startPosition.x) >= MOVE_THRESHOLD_PX ||
+                Math.abs(endPosition.y - startPosition.y) >= MOVE_THRESHOLD_PX) {
+                return;
+            }
+            return handleOutsideClick(event, () => {
+                if (event.target instanceof HTMLElement) {
+                    return event.target;
+                }
+                return null;
+            });
+        }, 
+        // We will use the `capture` phase so that layers in between with `event.stopPropagation()`
+        // don't "cancel" this outside click check. E.g.: A `Menu` inside a `DialogPanel` if the `Menu`
+        // is open, and you click outside of it in the `DialogPanel` the `Menu` should close. However,
+        // the `DialogPanel` has a `onClick(e) { e.stopPropagation() }` which would cancel this.
+        true);
+        // When content inside an iframe is clicked `window` will receive a blur event
+        // This can happen when an iframe _inside_ a window is clicked
+        // Or, if headless UI is *in* the iframe, when a content in a window containing that iframe is clicked
+        // In this case we care only about the first case so we check to see if the active element is the iframe
+        // If so this was because of a click, focus, or other interaction with the child iframe
+        // and we can consider it an "outside click"
+        d.addEventListener(window, "blur", (event) => {
+            return handleOutsideClick(event, () => {
+                return window.document.activeElement instanceof HTMLIFrameElement ? window.document.activeElement : null;
+            });
+        }, true);
+        return d.dispose;
+    };
+    $effect(() => {
+        initialClickTarget;
+        return addEventListeners(isTopLayer.value);
+    });
+}

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

@@ -0,0 +1,4 @@
+export declare const useReducer: <State, Action>(reducer: (state: State, action: Action) => State, initialState: State) => {
+    readonly state: State;
+    dispatch(action: Action): void;
+};

package/dist/hooks/use-reducer.js

@@ -0,0 +1,11 @@
+export const useReducer = (reducer, initialState) => {
+    let state = $state(initialState);
+    return {
+        get state() {
+            return state;
+        },
+        dispatch(action) {
+            state = reducer(state, action);
+        },
+    };
+};

package/dist/hooks/use-resolve-button-type.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { MutableRefObject } from "../utils/ref.svelte.js";
+export declare function useResolveButtonType<TTag>(options: {
+    props: {
+        type?: string;
+        as?: TTag;
+    };
+    ref: MutableRefObject<HTMLElement | null | undefined>;
+}): {
+    readonly type: string | undefined;
+};

package/dist/hooks/use-resolve-button-type.svelte.js

@@ -0,0 +1,19 @@
+import { untrack } from "svelte";
+function resolveType(props) {
+    if (props.type)
+        return props.type;
+    const tag = props.as ?? "button";
+    if (typeof tag === "string" && tag.toLowerCase() === "button")
+        return "button";
+    return undefined;
+}
+export function useResolveButtonType(options) {
+    const { props, ref } = $derived(options);
+    return {
+        get type() {
+            return ref.current && ref.current instanceof HTMLButtonElement && !ref.current.hasAttribute("type")
+                ? "button"
+                : resolveType(props);
+        },
+    };
+}

package/dist/hooks/use-scroll-lock.svelte.d.ts

@@ -0,0 +1,5 @@
+export declare function useScrollLock(options: {
+    enabled: boolean;
+    ownerDocument: Document | null;
+    resolveAllowedContainers?: () => HTMLElement[];
+}): void;