@pzerelles/headlessui-svelte 2.1.2-next.2 → 2.1.2-next.21

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

@@ -0,0 +1,158 @@
+import { useFloating as usePosition } from "../../svelte-dom/index.js";
+import { isElement } from "@floating-ui/utils/dom";
+import { useFloatingTree } from "../components/FloatingTree.svelte";
+import { useFloatingRootContext } from "./useFloatingRootContext.svelte.js";
+/**
+ * Provides data to position a floating element and context to add interactions.
+ * @see https://floating-ui.com/docs/useFloating
+ */
+export function useFloating(options = {}) {
+    const { nodeId } = $derived(options);
+    const internalRootContext = useFloatingRootContext({
+        get open() {
+            return options.open;
+        },
+        get onOpenChange() {
+            return options.onOpenChange;
+        },
+        get elements() {
+            return {
+                reference: null,
+                floating: null,
+                ...options.elements,
+            };
+        },
+    });
+    const rootContext = $derived(options.rootContext || internalRootContext);
+    const computedElements = $derived(rootContext.elements);
+    let _domReference = $state(null);
+    const setDomReference = (value) => (_domReference = value);
+    let positionReference = $state(null);
+    const _setPositionReference = (value) => (positionReference = value);
+    const optionDomReference = $derived(computedElements?.reference);
+    const domReference = $derived((optionDomReference || _domReference));
+    const domReferenceRef = $state({ current: null });
+    const tree = useFloatingTree();
+    $effect(() => {
+        if (domReference) {
+            domReferenceRef.current = domReference;
+        }
+    });
+    const position = usePosition({
+        get placement() {
+            return options.placement;
+        },
+        get strategy() {
+            return options.strategy;
+        },
+        get middleware() {
+            return options.middleware;
+        },
+        get platform() {
+            return options.platform;
+        },
+        get whileElementsMounted() {
+            return options.whileElementsMounted;
+        },
+        get open() {
+            return options.open;
+        },
+        get transform() {
+            return options.transform;
+        },
+        get elements() {
+            return {
+                ...computedElements,
+                ...(positionReference && { reference: positionReference }),
+            };
+        },
+    });
+    const setPositionReference = (node) => {
+        const computedPositionReference = isElement(node)
+            ? {
+                getBoundingClientRect: () => node.getBoundingClientRect(),
+                contextElement: node,
+            }
+            : node;
+        // Store the positionReference in state if the DOM reference is specified externally via the
+        // `elements.reference` option. This ensures that it won't be overridden on future renders.
+        _setPositionReference(computedPositionReference);
+        position.refs.setReference(computedPositionReference);
+    };
+    const setReference = (node) => {
+        if (isElement(node) || node === null) {
+            ;
+            domReferenceRef.current = node;
+            setDomReference(node);
+        }
+        // Backwards-compatibility for passing a virtual element to `reference`
+        // after it has set the DOM reference.
+        if (isElement(position.refs.reference.current) ||
+            position.refs.reference.current === null ||
+            // Don't allow setting virtual elements using the old technique back to
+            // `null` to support `positionReference` + an unstable `reference`
+            // callback ref.
+            (node !== null && !isElement(node))) {
+            position.refs.setReference(node);
+        }
+    };
+    const refs = $derived({
+        ...position.refs,
+        setReference,
+        setPositionReference,
+        domReference: domReferenceRef,
+    });
+    const elements = $derived({
+        ...position.elements,
+        domReference: domReference,
+    });
+    const context = $derived({
+        ...position,
+        ...rootContext,
+        refs,
+        elements,
+        nodeId,
+    });
+    $effect(() => {
+        rootContext.dataRef.current.floatingContext = context;
+        const node = tree?.nodesRef.current.find((node) => node.id === nodeId);
+        if (node) {
+            node.context = context;
+        }
+    });
+    return {
+        get placement() {
+            return position.placement;
+        },
+        get strategy() {
+            return position.strategy;
+        },
+        get middlewareData() {
+            return position.middlewareData;
+        },
+        get x() {
+            return position.x;
+        },
+        get y() {
+            return position.y;
+        },
+        get isPositioned() {
+            return position.isPositioned;
+        },
+        get update() {
+            return position.update;
+        },
+        get floatingStyles() {
+            return position.floatingStyles;
+        },
+        get context() {
+            return context;
+        },
+        get refs() {
+            return refs;
+        },
+        get elements() {
+            return elements;
+        },
+    };
+}

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

@@ -0,0 +1,11 @@
+import type { FloatingRootContext } from "../types.js";
+import type { OpenChangeReason } from "../types.js";
+export interface UseFloatingRootContextOptions {
+    open?: boolean;
+    onOpenChange?: (open: boolean, event?: Event, reason?: OpenChangeReason) => void;
+    elements: {
+        reference: Element | null;
+        floating: HTMLElement | null;
+    };
+}
+export declare function useFloatingRootContext(options: UseFloatingRootContextOptions): FloatingRootContext;

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

@@ -0,0 +1,53 @@
+import { isElement } from "@floating-ui/utils/dom";
+//import { useEffectEvent } from "./utils/useEffectEvent"
+import { createPubSub } from "../utils/createPubSub.js";
+import { useId } from "./useId.svelte.js";
+import { useFloatingParentNodeId } from "../components/FloatingTree.svelte";
+import { error } from "../utils/log.js";
+import { DEV } from "esm-env";
+export function useFloatingRootContext(options) {
+    const { open = false, onOpenChange: onOpenChangeProp, elements: elementsProp } = options;
+    const floatingId = useId();
+    const dataRef = $state({ current: {} });
+    const events = createPubSub();
+    const nested = useFloatingParentNodeId() != null;
+    if (DEV) {
+        const optionDomReference = elementsProp.reference;
+        if (optionDomReference && !isElement(optionDomReference)) {
+            error("Cannot pass a virtual element to the `elements.reference` option,", "as it must be a real DOM element. Use `refs.setPositionReference()`", "instead.");
+        }
+    }
+    let positionReference = $state(elementsProp.reference);
+    const onOpenChange = (open, event, reason) => {
+        dataRef.current.openEvent = open ? event : undefined;
+        events.emit("openchange", { open, event, reason, nested });
+        onOpenChangeProp?.(open, event, reason);
+    };
+    const refs = {
+        setPositionReference: (value) => {
+            positionReference = value;
+        },
+    };
+    const elements = $derived({
+        reference: positionReference || elementsProp.reference || null,
+        floating: elementsProp.floating || null,
+        domReference: elementsProp.reference,
+    });
+    return {
+        get dataRef() {
+            return dataRef;
+        },
+        get open() {
+            return open;
+        },
+        onOpenChange,
+        get elements() {
+            return elements;
+        },
+        events,
+        get floatingId() {
+            return floatingId;
+        },
+        refs,
+    };
+}

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

@@ -0,0 +1,9 @@
+declare function useFloatingId(): string;
+/**
+ * Uses React 18's built-in `useId()` when available, or falls back to a
+ * slightly less performant (requiring a double render) implementation for
+ * earlier React versions.
+ * @see https://floating-ui.com/docs/react-utils#useid
+ */
+export declare const useId: typeof useFloatingId;
+export {};

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

@@ -0,0 +1,28 @@
+let serverHandoffComplete = false;
+let count = 0;
+const genId = () => 
+// Ensure the id is unique with multiple independent versions of Floating UI
+// on <React 18
+`floating-ui-${Math.random().toString(36).slice(2, 6)}${count++}`;
+function useFloatingId() {
+    /*let id = $state(serverHandoffComplete ? genId() : undefined)
+  
+    $effect(() => {
+      if (id == null) {
+        id = genId()
+      }
+    })
+  
+    $effect(() => {
+      serverHandoffComplete = true
+    })*/
+    return genId();
+}
+//const useReactId = SafeReact.useId as () => string
+/**
+ * Uses React 18's built-in `useId()` when available, or falls back to a
+ * slightly less performant (requiring a double render) implementation for
+ * earlier React versions.
+ * @see https://floating-ui.com/docs/react-utils#useid
+ */
+export const useId = /*useReactId ||*/ useFloatingId;

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