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

package/dist/utils/floating-ui/svelte/hooks/useInteractions.svelte.d.ts

@@ -0,0 +1,23 @@
+import type { HTMLAttributes } from "svelte/elements";
+import type { ElementProps } from "../types.js";
+declare const ACTIVE_KEY = "active";
+declare const SELECTED_KEY = "selected";
+export type ExtendedUserProps = {
+    [ACTIVE_KEY]?: boolean;
+    [SELECTED_KEY]?: boolean;
+};
+export interface UseInteractionsReturn {
+    getReferenceProps: (userProps?: HTMLAttributes<Element>) => Record<string, unknown>;
+    getFloatingProps: (userProps?: HTMLAttributes<HTMLElement>) => Record<string, unknown>;
+    getItemProps: (userProps?: Omit<HTMLAttributes<HTMLElement>, "selected" | "active"> & ExtendedUserProps) => Record<string, unknown>;
+}
+/**
+ * Merges an array of interaction hooks' props into prop getters, allowing
+ * event handler functions to be composed together without overwriting one
+ * another.
+ * @see https://floating-ui.com/docs/useInteractions
+ */
+export declare function useInteractions(options?: {
+    propsList: Array<ElementProps | void>;
+}): UseInteractionsReturn;
+export {};

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

@@ -0,0 +1,72 @@
+import { FOCUSABLE_ATTRIBUTE } from "../utils/getFloatingFocusElement.js";
+const ACTIVE_KEY = "active";
+const SELECTED_KEY = "selected";
+function mergeProps(userProps, propsList, elementKey) {
+    const map = new Map();
+    const isItem = elementKey === "item";
+    let domUserProps = userProps;
+    if (isItem && userProps) {
+        const { [ACTIVE_KEY]: _, [SELECTED_KEY]: __, ...validProps } = userProps;
+        domUserProps = validProps;
+    }
+    return {
+        ...(elementKey === "floating" && {
+            tabIndex: -1,
+            [FOCUSABLE_ATTRIBUTE]: "",
+        }),
+        ...domUserProps,
+        ...propsList
+            .map((value) => {
+            const propsOrGetProps = value ? value[elementKey] : null;
+            if (typeof propsOrGetProps === "function") {
+                return userProps ? propsOrGetProps(userProps) : null;
+            }
+            return propsOrGetProps;
+        })
+            .concat(userProps)
+            .reduce((acc, props) => {
+            if (!props) {
+                return acc;
+            }
+            Object.entries(props).forEach(([key, value]) => {
+                if (isItem && [ACTIVE_KEY, SELECTED_KEY].includes(key)) {
+                    return;
+                }
+                if (key.indexOf("on") === 0) {
+                    if (!map.has(key)) {
+                        map.set(key, []);
+                    }
+                    if (typeof value === "function") {
+                        map.get(key)?.push(value);
+                        acc[key] = (...args) => {
+                            return map
+                                .get(key)
+                                ?.map((fn) => fn(...args))
+                                .find((val) => val !== undefined);
+                        };
+                    }
+                }
+                else {
+                    acc[key] = value;
+                }
+            });
+            return acc;
+        }, {}),
+    };
+}
+/**
+ * Merges an array of interaction hooks' props into prop getters, allowing
+ * event handler functions to be composed together without overwriting one
+ * another.
+ * @see https://floating-ui.com/docs/useInteractions
+ */
+export function useInteractions(options = { propsList: [] }) {
+    const { propsList } = $derived(options);
+    //const referenceDeps = $derived(propsList.map((key) => key?.reference))
+    //const floatingDeps = $derived(propsList.map((key) => key?.floating))
+    //const itemDeps = $derived(propsList.map((key) => key?.item))
+    const getReferenceProps = (userProps) => mergeProps(userProps, propsList, "reference");
+    const getFloatingProps = (userProps) => mergeProps(userProps, propsList, "floating");
+    const getItemProps = (userProps) => mergeProps(userProps, propsList, "item");
+    return { getReferenceProps, getFloatingProps, getItemProps };
+}

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

@@ -0,0 +1,5 @@
+export * from "./types.js";
+export { useFloating } from "./hooks/useFloating.svelte.js";
+export { useInteractions } from "./hooks/useInteractions.svelte.js";
+export { arrow, autoPlacement, autoUpdate, computePosition, detectOverflow, flip, getOverflowAncestors, hide, inline, limitShift, offset, platform, shift, size, } from "../svelte-dom/index.js";
+export { inner, useInnerOffset, type InnerProps, type UseInnerOffsetProps } from "./inner.svelte.js";

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

@@ -0,0 +1,5 @@
+export * from "./types.js";
+export { useFloating } from "./hooks/useFloating.svelte.js";
+export { useInteractions } from "./hooks/useInteractions.svelte.js";
+export { arrow, autoPlacement, autoUpdate, computePosition, detectOverflow, flip, getOverflowAncestors, hide, inline, limitShift, offset, platform, shift, size, } from "../svelte-dom/index.js";
+export { inner, useInnerOffset } from "./inner.svelte.js";

package/dist/utils/floating-ui/svelte/inner.svelte.d.ts

@@ -0,0 +1,83 @@
+import { type Derivable } from "../svelte-dom/index.js";
+import type { DetectOverflowOptions, ElementProps, FloatingRootContext, Middleware, SideObject } from "./types.js";
+import type { MutableRefObject } from "../../ref.svelte.js";
+export interface InnerProps extends DetectOverflowOptions {
+    /**
+     * A ref which contains an array of HTML elements.
+     * @default empty list
+     */
+    listRef: MutableRefObject<Array<HTMLElement | null>>;
+    /**
+     * The index of the active (focused or highlighted) item in the list.
+     * @default 0
+     */
+    index: number;
+    /**
+     * Callback invoked when the fallback state changes.
+     */
+    onFallbackChange?: null | ((fallback: boolean) => void);
+    /**
+     * The offset to apply to the floating element.
+     * @default 0
+     */
+    offset?: number;
+    /**
+     * A ref which contains the overflow of the floating element.
+     */
+    overflowRef?: MutableRefObject<SideObject | null>;
+    /**
+     * An optional ref containing an HTMLElement. This may be used as the
+     * scrolling container instead of the floating element — for instance,
+     * to position inner elements as direct children without being interfered by
+     * scrolling layout.
+     */
+    scrollRef?: MutableRefObject<HTMLElement | null>;
+    /**
+     * The minimum number of items that should be visible in the list.
+     * @default 4
+     */
+    minItemsVisible?: number;
+    /**
+     * The threshold for the reference element's overflow in pixels.
+     * @default 0
+     */
+    referenceOverflowThreshold?: number;
+}
+/**
+ * Positions the floating element such that an inner element inside of it is
+ * anchored to the reference element.
+ * @see https://floating-ui.com/docs/inner
+ */
+export declare const inner: (props: InnerProps | Derivable<InnerProps>) => Middleware;
+export interface UseInnerOffsetProps {
+    /**
+     * Whether the Hook is enabled, including all internal Effects and event
+     * handlers.
+     * @default true
+     */
+    enabled?: boolean;
+    /**
+     * A ref which contains the overflow of the floating element.
+     */
+    overflowRef: MutableRefObject<SideObject | null>;
+    /**
+     * An optional ref containing an HTMLElement. This may be used as the
+     * scrolling container instead of the floating element — for instance,
+     * to position inner elements as direct children without being interfered by
+     * scrolling layout.
+     */
+    scrollRef?: MutableRefObject<HTMLElement | null>;
+    /**
+     * Callback invoked when the offset changes.
+     */
+    onChange: (offset: number | ((offset: number) => number)) => void;
+}
+/**
+ * Changes the `inner` middleware's `offset` upon a `wheel` event to
+ * expand the floating element's height, revealing more list items.
+ * @see https://floating-ui.com/docs/inner
+ */
+export declare function useInnerOffset(options: {
+    context: FloatingRootContext;
+    props: UseInnerOffsetProps;
+}): ElementProps;

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

@@ -0,0 +1,178 @@
+import { getUserAgent } from "./utils.js";
+import { evaluate, max, min, round } from "@floating-ui/utils";
+import { detectOverflow, offset } from "../svelte-dom/index.js";
+import { warn } from "./utils/log.js";
+import { DEV } from "esm-env";
+import { tick, untrack } from "svelte";
+function getArgsWithCustomFloatingHeight(state, height) {
+    return {
+        ...state,
+        rects: {
+            ...state.rects,
+            floating: {
+                ...state.rects.floating,
+                height,
+            },
+        },
+    };
+}
+/**
+ * Positions the floating element such that an inner element inside of it is
+ * anchored to the reference element.
+ * @see https://floating-ui.com/docs/inner
+ */
+export const inner = (props) => ({
+    name: "inner",
+    options: props,
+    async fn(state) {
+        const { listRef, overflowRef, onFallbackChange, offset: innerOffset = 0, index = 0, minItemsVisible = 4, referenceOverflowThreshold = 0, scrollRef, ...detectOverflowOptions } = evaluate(props, state);
+        const { rects, elements: { floating }, } = state;
+        const item = listRef.current[index];
+        const scrollEl = scrollRef?.current || floating;
+        // Valid combinations:
+        // 1. Floating element is the scrollRef and has a border (default)
+        // 2. Floating element is not the scrollRef, floating element has a border
+        // 3. Floating element is not the scrollRef, scrollRef has a border
+        // Floating > {...getFloatingProps()} wrapper > scrollRef > items is not
+        // allowed as VoiceOver doesn't work.
+        const clientTop = floating.clientTop || scrollEl.clientTop;
+        const floatingIsBordered = floating.clientTop !== 0;
+        const scrollElIsBordered = scrollEl.clientTop !== 0;
+        const floatingIsScrollEl = floating === scrollEl;
+        if (DEV) {
+            if (!state.placement.startsWith("bottom")) {
+                warn('`placement` side must be "bottom" when using the `inner`', "middleware.");
+            }
+        }
+        if (!item) {
+            return {};
+        }
+        const nextArgs = {
+            ...state,
+            ...(await offset(-item.offsetTop - floating.clientTop - rects.reference.height / 2 - item.offsetHeight / 2 - innerOffset).fn(state)),
+        };
+        const overflow = await detectOverflow(getArgsWithCustomFloatingHeight(nextArgs, scrollEl.scrollHeight + clientTop + floating.clientTop), detectOverflowOptions);
+        const refOverflow = await detectOverflow(nextArgs, {
+            ...detectOverflowOptions,
+            elementContext: "reference",
+        });
+        const diffY = max(0, overflow.top);
+        const nextY = nextArgs.y + diffY;
+        const maxHeight = round(max(0, scrollEl.scrollHeight +
+            ((floatingIsBordered && floatingIsScrollEl) || scrollElIsBordered ? clientTop * 2 : 0) -
+            diffY -
+            max(0, overflow.bottom)));
+        scrollEl.style.maxHeight = `${maxHeight}px`;
+        scrollEl.scrollTop = diffY;
+        // There is not enough space, fallback to standard anchored positioning
+        if (onFallbackChange) {
+            const shouldFallback = (scrollEl.scrollHeight > scrollEl.offsetHeight &&
+                scrollEl.offsetHeight < item.offsetHeight * minItemsVisible - 1) ||
+                refOverflow.top >= -referenceOverflowThreshold ||
+                refOverflow.bottom >= -referenceOverflowThreshold;
+            onFallbackChange(shouldFallback);
+            await tick();
+        }
+        if (overflowRef) {
+            overflowRef.current = await detectOverflow(getArgsWithCustomFloatingHeight({ ...nextArgs, y: nextY }, scrollEl.offsetHeight + clientTop + floating.clientTop), detectOverflowOptions);
+        }
+        return {
+            y: nextY,
+        };
+    },
+});
+/**
+ * Changes the `inner` middleware's `offset` upon a `wheel` event to
+ * expand the floating element's height, revealing more list items.
+ * @see https://floating-ui.com/docs/inner
+ */
+export function useInnerOffset(options) {
+    const { context, props } = $derived(options);
+    const { open, elements } = $derived(context);
+    const { enabled = true, overflowRef, scrollRef, onChange: unstable_onChange } = $derived(props);
+    const onChange = unstable_onChange;
+    const controlledScrollingRef = $state({ current: false });
+    const prevScrollTopRef = $state({ current: null });
+    const initialOverflowRef = $state({ current: null });
+    $effect(() => {
+        if (!enabled)
+            return;
+        [enabled, open, elements.floating, overflowRef, scrollRef, onChange];
+        untrack(() => {
+            function onWheel(e) {
+                if (e.ctrlKey || !el || overflowRef.current == null) {
+                    return;
+                }
+                const dY = e.deltaY;
+                const isAtTop = overflowRef.current.top >= -0.5;
+                const isAtBottom = overflowRef.current.bottom >= -0.5;
+                const remainingScroll = el.scrollHeight - el.clientHeight;
+                const sign = dY < 0 ? -1 : 1;
+                const method = dY < 0 ? "max" : "min";
+                if (el.scrollHeight <= el.clientHeight) {
+                    return;
+                }
+                if ((!isAtTop && dY > 0) || (!isAtBottom && dY < 0)) {
+                    e.preventDefault();
+                    onChange((d) => d + Math[method](dY, remainingScroll * sign));
+                    tick();
+                }
+                else if (/firefox/i.test(getUserAgent())) {
+                    // Needed to propagate scrolling during momentum scrolling phase once
+                    // it gets limited by the boundary. UX improvement, not critical.
+                    el.scrollTop += dY;
+                }
+            }
+            const el = scrollRef?.current || elements.floating;
+            if (open && el) {
+                el.addEventListener("wheel", onWheel);
+                // Wait for the position to be ready.
+                requestAnimationFrame(() => {
+                    prevScrollTopRef.current = el.scrollTop;
+                    if (overflowRef.current != null) {
+                        initialOverflowRef.current = { ...overflowRef.current };
+                    }
+                });
+                return () => {
+                    prevScrollTopRef.current = null;
+                    initialOverflowRef.current = null;
+                    el.removeEventListener("wheel", onWheel);
+                };
+            }
+        });
+    });
+    const floating = {
+        onkeydown() {
+            controlledScrollingRef.current = true;
+        },
+        onwheel() {
+            controlledScrollingRef.current = false;
+        },
+        onpointermove() {
+            controlledScrollingRef.current = false;
+        },
+        async onscroll() {
+            const el = scrollRef?.current || elements.floating;
+            if (!overflowRef.current || !el || !controlledScrollingRef.current) {
+                return;
+            }
+            if (prevScrollTopRef.current !== null) {
+                const scrollDiff = el.scrollTop - prevScrollTopRef.current;
+                if ((overflowRef.current.bottom < -0.5 && scrollDiff < -1) ||
+                    (overflowRef.current.top < -0.5 && scrollDiff > 1)) {
+                    onChange((d) => d + scrollDiff);
+                    await tick();
+                }
+            }
+            // [Firefox] Wait for the height change to have been applied.
+            requestAnimationFrame(() => {
+                prevScrollTopRef.current = el.scrollTop;
+            });
+        },
+    };
+    return {
+        get floating() {
+            return enabled ? floating : undefined;
+        },
+    };
+}

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

@@ -0,0 +1,114 @@
+import type { MutableRefObject } from "../../ref.svelte.js";
+import type { HTMLAttributes } from "svelte/elements";
+import type { UseFloatingOptions as UsePositionOptions, UseFloatingReturn as UsePositionFloatingReturn, VirtualElement } from "../svelte-dom/types.js";
+import type { ExtendedUserProps } from "./hooks/useInteractions.svelte.js";
+export type { ReferenceElement, DetectOverflowOptions, Middleware, MiddlewareState, SideObject, } from "../svelte-dom/types.js";
+type Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};
+export type OpenChangeReason = "outside-press" | "escape-key" | "ancestor-scroll" | "reference-press" | "click" | "hover" | "focus" | "focus-out" | "list-navigation" | "safe-polygon";
+export type NarrowedElement<T> = T extends Element ? T : Element;
+export interface ExtendedRefs<RT> {
+    reference: MutableRefObject<ReferenceType | null>;
+    floating: MutableRefObject<HTMLElement | null>;
+    domReference: MutableRefObject<NarrowedElement<RT> | null>;
+    setReference(node: RT | null): void;
+    setFloating(node: HTMLElement | null): void;
+    setPositionReference(node: ReferenceType | null): void;
+}
+export interface ExtendedElements<RT> {
+    reference: ReferenceType | null;
+    floating: HTMLElement | null;
+    domReference: NarrowedElement<RT> | null;
+}
+export interface FloatingEvents {
+    emit<T extends string>(event: T, data?: any): void;
+    on(event: string, handler: (data: any) => void): void;
+    off(event: string, handler: (data: any) => void): void;
+}
+export interface ContextData {
+    openEvent?: Event;
+    floatingContext?: FloatingContext;
+    /** @deprecated use `onTypingChange` prop in `useTypeahead` */
+    typing?: boolean;
+    [key: string]: any;
+}
+export interface FloatingRootContext<RT extends ReferenceType = ReferenceType> {
+    dataRef: MutableRefObject<ContextData>;
+    open: boolean;
+    onOpenChange: (open: boolean, event?: Event, reason?: OpenChangeReason) => void;
+    elements: {
+        domReference: Element | null;
+        reference: RT | null;
+        floating: HTMLElement | null;
+    };
+    events: FloatingEvents;
+    floatingId: string;
+    refs: {
+        setPositionReference(node: ReferenceType | null): void;
+    };
+}
+export type FloatingContext<RT extends ReferenceType = ReferenceType> = Omit<UsePositionFloatingReturn<RT>, "refs" | "elements"> & {
+    open: boolean;
+    onOpenChange(open: boolean, event?: Event, reason?: OpenChangeReason): void;
+    events: FloatingEvents;
+    dataRef: MutableRefObject<ContextData>;
+    nodeId: string | undefined;
+    floatingId: string;
+    refs: ExtendedRefs<RT>;
+    elements: ExtendedElements<RT>;
+};
+export interface FloatingNodeType<RT extends ReferenceType = ReferenceType> {
+    id: string;
+    parentId: string | null;
+    context?: FloatingContext<RT>;
+}
+export interface FloatingTreeType<RT extends ReferenceType = ReferenceType> {
+    nodesRef: MutableRefObject<Array<FloatingNodeType<RT>>>;
+    events: FloatingEvents;
+    addNode(node: FloatingNodeType): void;
+    removeNode(node: FloatingNodeType): void;
+}
+export interface ElementProps {
+    reference?: HTMLAttributes<Element>;
+    floating?: HTMLAttributes<HTMLElement>;
+    item?: HTMLAttributes<HTMLElement> | ((props: ExtendedUserProps) => HTMLAttributes<HTMLElement>);
+}
+export type ReferenceType = Element | VirtualElement;
+export type UseFloatingData = Prettify<UseFloatingReturn>;
+export type UseFloatingReturn<RT extends ReferenceType = ReferenceType> = Prettify<UsePositionFloatingReturn & {
+    /**
+     * `FloatingContext`
+     */
+    context: Prettify<FloatingContext<RT>>;
+    /**
+     * Object containing the reference and floating refs and reactive setters.
+     */
+    refs: ExtendedRefs<RT>;
+    elements: ExtendedElements<RT>;
+}>;
+export interface UseFloatingOptions<RT extends ReferenceType = ReferenceType> extends Omit<UsePositionOptions<RT>, "elements"> {
+    rootContext?: FloatingRootContext<RT>;
+    /**
+     * Object of external elements as an alternative to the `refs` object setters.
+     */
+    elements?: {
+        /**
+         * Externally passed reference element. Store in state.
+         */
+        reference?: Element | null;
+        /**
+         * Externally passed floating element. Store in state.
+         */
+        floating?: HTMLElement | null;
+    };
+    /**
+     * An event callback that is invoked when the floating element is opened or
+     * closed.
+     */
+    onOpenChange?(open: boolean, event?: Event, reason?: OpenChangeReason): void;
+    /**
+     * Unique node id when using `FloatingTree`.
+     */
+    nodeId?: string;
+}

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

@@ -0,0 +1 @@
+export {};

package/dist/utils/floating-ui/svelte/utils/createPubSub.d.ts

@@ -0,0 +1,5 @@
+export declare function createPubSub(): {
+    emit(event: string, data: any): void;
+    on(event: string, listener: (data: any) => void): void;
+    off(event: string, listener: (data: any) => void): void;
+};

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

@@ -0,0 +1,14 @@
+export function createPubSub() {
+    const map = new Map();
+    return {
+        emit(event, data) {
+            map.get(event)?.forEach((handler) => handler(data));
+        },
+        on(event, listener) {
+            map.set(event, [...(map.get(event) || []), listener]);
+        },
+        off(event, listener) {
+            map.set(event, map.get(event)?.filter((l) => l !== listener) || []);
+        },
+    };
+}

package/dist/utils/floating-ui/svelte/utils/getFloatingFocusElement.d.ts

@@ -0,0 +1,2 @@
+export declare const FOCUSABLE_ATTRIBUTE = "data-floating-ui-focusable";
+export declare function getFloatingFocusElement(floatingElement: HTMLElement | null): HTMLElement | null;

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

@@ -0,0 +1,13 @@
+export const FOCUSABLE_ATTRIBUTE = "data-floating-ui-focusable";
+export function getFloatingFocusElement(floatingElement) {
+    if (!floatingElement) {
+        return null;
+    }
+    // Try to find the element that has `{...getFloatingProps()}` spread on it.
+    // This indicates the floating element is acting as a positioning wrapper, and
+    // so focus should be managed on the child element with the event handlers and
+    // aria props.
+    return floatingElement.hasAttribute(FOCUSABLE_ATTRIBUTE)
+        ? floatingElement
+        : floatingElement.querySelector(`[${FOCUSABLE_ATTRIBUTE}]`) || floatingElement;
+}

package/dist/utils/floating-ui/svelte/utils/log.d.ts

@@ -0,0 +1,2 @@
+export declare function warn(...messages: string[]): void;
+export declare function error(...messages: string[]): void;

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

@@ -0,0 +1,19 @@
+import { DEV } from "esm-env";
+let devMessageSet;
+if (DEV) {
+    devMessageSet = new Set();
+}
+export function warn(...messages) {
+    const message = `Floating UI: ${messages.join(" ")}`;
+    if (!devMessageSet?.has(message)) {
+        devMessageSet?.add(message);
+        console.warn(message);
+    }
+}
+export function error(...messages) {
+    const message = `Floating UI: ${messages.join(" ")}`;
+    if (!devMessageSet?.has(message)) {
+        devMessageSet?.add(message);
+        console.error(message);
+    }
+}

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

@@ -0,0 +1,19 @@
+export declare function activeElement(doc: Document): Element | null;
+export declare function contains(parent?: Element | null, child?: Element | null): boolean;
+export declare function getPlatform(): string;
+export declare function getUserAgent(): string;
+export declare function isVirtualClick(event: MouseEvent | PointerEvent): boolean;
+export declare function isVirtualPointerEvent(event: PointerEvent): boolean;
+export declare function isSafari(): boolean;
+export declare function isAndroid(): boolean;
+export declare function isMac(): boolean;
+export declare function isJSDOM(): boolean;
+export declare function isMouseLikePointerType(pointerType: string | undefined, strict?: boolean): boolean;
+export declare function isRootElement(element: Element): boolean;
+export declare function getDocument(node: Element | null): Document;
+export declare function isEventTargetWithin(event: Event, node: Node | null | undefined): boolean;
+export declare function getTarget(event: Event): EventTarget | null;
+export declare const TYPEABLE_SELECTOR: string;
+export declare function isTypeableElement(element: unknown): boolean;
+export declare function stopEvent(event: Event): void;
+export declare function isTypeableCombobox(element: Element | null): boolean;