@pzerelles/headlessui-svelte 2.1.2-next.4 → 2.1.2-next.40

package/dist/utils/StableCollection.svelte.d.ts

@@ -1,22 +1,8 @@
 import { type Snippet } from "svelte";
 export declare function useStableCollectionIndex(group: string): number;
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const StableCollection: $$__sveltets_2_IsomorphicComponent<{
+type $$ComponentProps = {
     children: Snippet;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, "">;
-type StableCollection = InstanceType<typeof StableCollection>;
+};
+declare const StableCollection: import("svelte").Component<$$ComponentProps, {}, "">;
+type StableCollection = ReturnType<typeof StableCollection>;
 export default StableCollection;

package/dist/utils/floating-ui/svelte/components/FloatingNode.svelte

@@ -0,0 +1,32 @@
+<script lang="ts" module>
+  import type { Snippet } from "svelte"
+
+  export interface FloatingNodeProps {
+    children?: Snippet
+    id: string
+  }
+</script>
+
+<script lang="ts">
+  /**
+   * Provides parent node context for nested floating elements.
+   * @see https://floating-ui.com/docs/FloatingTree
+   */
+  import { setContext } from "svelte"
+  import type { FloatingNodeType } from "../types.js"
+  import { useFloatingParentNodeId } from "./FloatingTree.svelte"
+
+  const { children, id }: FloatingNodeProps = $props()
+
+  const parentId = useFloatingParentNodeId()
+  setContext<FloatingNodeType>("FloatingNodeContext", {
+    get id() {
+      return id
+    },
+    get parentId() {
+      return parentId.value
+    },
+  })
+</script>
+
+{#if children}{@render children()}{/if}

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

@@ -0,0 +1,8 @@
+import type { Snippet } from "svelte";
+export interface FloatingNodeProps {
+    children?: Snippet;
+    id: string;
+}
+declare const FloatingNode: import("svelte").Component<FloatingNodeProps, {}, "">;
+type FloatingNode = ReturnType<typeof FloatingNode>;
+export default FloatingNode;

package/dist/utils/floating-ui/svelte/components/FloatingTree.svelte

@@ -0,0 +1,94 @@
+<script lang="ts" module>
+  import { getContext, type Snippet } from "svelte"
+  import { useId } from "../hooks/useId.svelte.js"
+  import type { FloatingNodeType, FloatingTreeType, ReferenceType } from "../types.js"
+  import { createPubSub } from "../utils/createPubSub.js"
+  import type { MutableRefObject } from "../../../ref.svelte.js"
+
+  //const FloatingNodeContext = React.createContext<FloatingNodeType | null>(null)
+  //const FloatingTreeContext = React.createContext<FloatingTreeType | null>(null)
+
+  /**
+   * Returns the parent node id for nested floating elements, if available.
+   * Returns `null` for top-level floating elements.
+   */
+  export const useFloatingParentNodeId = (): { readonly value: string | null } => {
+    const context = getContext<FloatingNodeType>("FloatingNodeContext")
+    return {
+      get value() {
+        return context?.id ?? null
+      },
+    }
+  }
+
+  /**
+   * Returns the nearest floating tree context, if available.
+   */
+  export const useFloatingTree = <RT extends ReferenceType = ReferenceType>(): FloatingTreeType<RT> | null =>
+    getContext<FloatingTreeType<RT>>("FloatingTreeContext") ?? null
+
+  /**
+   * Registers a node into the `FloatingTree`, returning its id.
+   * @see https://floating-ui.com/docs/FloatingTree
+   */
+  export function useFloatingNodeId(options: { customParentId?: string }): string {
+    const { customParentId } = $derived(options)
+    const id = useId()
+    const tree = useFloatingTree()
+    const reactParentId = useFloatingParentNodeId()
+    const parentId = $derived(customParentId || reactParentId.value)
+
+    $effect(() => {
+      const node = { id, parentId }
+      tree?.addNode(node)
+      return () => {
+        tree?.removeNode(node)
+      }
+    }) //, [tree, id, parentId])
+
+    return id
+  }
+
+  export interface FloatingTreeProps {
+    children?: Snippet
+  }
+</script>
+
+<script lang="ts">
+  /**
+   * Provides context for nested floating elements when they are not children of
+   * each other on the DOM.
+   * This is not necessary in all cases, except when there must be explicit communication between parent and child floating elements. It is necessary for:
+   * - The `bubbles` option in the `useDismiss()` Hook
+   * - Nested virtual list navigation
+   * - Nested floating elements that each open on hover
+   * - Custom communication between parent and child floating elements
+   * @see https://floating-ui.com/docs/FloatingTree
+   */
+  import { setContext } from "svelte"
+
+  const { children }: FloatingTreeProps = $props()
+
+  const nodesRef = $state<MutableRefObject<Array<FloatingNodeType>>>({ current: [] })
+
+  const addNode = (node: FloatingNodeType) => {
+    nodesRef.current = [...nodesRef.current, node]
+  }
+
+  const removeNode = (node: FloatingNodeType) => {
+    nodesRef.current = nodesRef.current.filter((n) => n !== node)
+  }
+
+  const events = createPubSub()
+
+  setContext<FloatingTreeType<ReferenceType>>("FloatingTreeContext", {
+    get nodesRef() {
+      return nodesRef
+    },
+    addNode,
+    removeNode,
+    events,
+  })
+</script>
+
+{#if children}{@render children()}{/if}

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

@@ -0,0 +1,26 @@
+import { type Snippet } from "svelte";
+import type { FloatingTreeType, ReferenceType } from "../types.js";
+/**
+ * Returns the parent node id for nested floating elements, if available.
+ * Returns `null` for top-level floating elements.
+ */
+export declare const useFloatingParentNodeId: () => {
+    readonly value: string | null;
+};
+/**
+ * Returns the nearest floating tree context, if available.
+ */
+export declare const useFloatingTree: <RT extends ReferenceType = ReferenceType>() => FloatingTreeType<RT> | null;
+/**
+ * Registers a node into the `FloatingTree`, returning its id.
+ * @see https://floating-ui.com/docs/FloatingTree
+ */
+export declare function useFloatingNodeId(options: {
+    customParentId?: string;
+}): string;
+export interface FloatingTreeProps {
+    children?: Snippet;
+}
+declare const FloatingTree: import("svelte").Component<FloatingTreeProps, {}, "">;
+type FloatingTree = ReturnType<typeof FloatingTree>;
+export default FloatingTree;

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

@@ -0,0 +1,6 @@
+import type { ReferenceType, UseFloatingOptions, UseFloatingReturn } from "../types.js";
+/**
+ * Provides data to position a floating element and context to add interactions.
+ * @see https://floating-ui.com/docs/useFloating
+ */
+export declare function useFloating<RT extends ReferenceType = ReferenceType>(options?: UseFloatingOptions): UseFloatingReturn<RT>;

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 ?? null);
+    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 ?? null);
+        // 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) {
+            ;
+            domReferenceRef.current = node ?? null;
+            setDomReference((node ?? null));
+        }
+        // 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 && !isElement(node))) {
+            position.refs.setReference(node ?? null);
+        }
+    };
+    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 ?? null;
+        },
+    };
+    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;