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

package/dist/internal/inner.svelte.js

@@ -0,0 +1,202 @@
+import { evaluate, max, min, round } from "@floating-ui/utils";
+import { DEV } from "esm-env";
+import { detectOverflow, offset, } from "@floating-ui/dom";
+import { tick, untrack } from "svelte";
+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);
+    }
+}
+export function getUserAgent() {
+    const uaData = navigator.userAgentData;
+    if (uaData && Array.isArray(uaData.brands)) {
+        return uaData.brands.map(({ brand, version }) => `${brand}/${version}`).join(" ");
+    }
+    return navigator.userAgent;
+}
+// ------
+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;
+    let controlledScrollingRef = $state(false);
+    let prevScrollTopRef = $state(null);
+    let initialOverflowRef = $state(null);
+    $effect(() => {
+        if (!enabled)
+            return;
+        [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 = el.scrollTop;
+                    if (overflowRef.current != null) {
+                        initialOverflowRef = { ...overflowRef.current };
+                    }
+                });
+                return () => {
+                    prevScrollTopRef = null;
+                    initialOverflowRef = null;
+                    el.removeEventListener("wheel", onWheel);
+                };
+            }
+        });
+    });
+    const floating = $derived({
+        onKeyDown() {
+            controlledScrollingRef = true;
+        },
+        onWheel() {
+            controlledScrollingRef = false;
+        },
+        onPointerMove() {
+            controlledScrollingRef = false;
+        },
+        async onScroll() {
+            const el = scrollRef?.current || elements.floating;
+            if (!overflowRef.current || !el || !controlledScrollingRef) {
+                return;
+            }
+            if (prevScrollTopRef !== null) {
+                const scrollDiff = el.scrollTop - prevScrollTopRef;
+                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 = el.scrollTop;
+            });
+        },
+    });
+    return {
+        get floating() {
+            return enabled ? floating : undefined;
+        },
+    };
+}

package/dist/internal/open-closed.d.ts

@@ -7,7 +7,7 @@ export declare enum State {
 export type OpenClosedContext = {
     readonly value: State;
 };
-export declare function useOpenClosed(): OpenClosedContext;
+export declare function useOpenClosed(): OpenClosedContext | null;
 export declare function createOpenClosedContext(options: {
     readonly value: State;
 }): void;

package/dist/internal/open-closed.js

@@ -7,7 +7,7 @@ export var State;
     State[State["Opening"] = 8] = "Opening";
 })(State || (State = {}));
 export function useOpenClosed() {
-    return getContext("OpenClosedContext");
+    return getContext("OpenClosedContext") ?? null;
 }
 export function createOpenClosedContext(options) {
     setContext("OpenClosedContext", options);

package/dist/label/Label.svelte

@@ -1,74 +1,21 @@
-<script lang="ts" context="module">import { setContext } from "svelte";
-const DEFAULT_LABEL_TAG = "label";
-export function useLabelContext() {
-  let context = getContext("LabelContext");
-  if (context === null) {
-    let err = new Error("You used a <Label /> component, but it is not inside a relevant parent.");
-    if (Error.captureStackTrace) Error.captureStackTrace(err, useLabelContext);
-    throw err;
-  }
-  return context;
-}
-export function useLabelledBy(alwaysAvailableIds) {
-  const context = getContext("LabelContext");
-  const value = $derived(
-    (alwaysAvailableIds?.length ?? 0) > 0 ? [context?.value, ...alwaysAvailableIds].filter(Boolean).join(" ") : context?.value
-  );
-  return {
-    get value() {
-      return value;
-    }
-  };
-}
-export const useLabels = (options = {}) => {
-  const { slot, name, props, inherit } = $derived(options);
-  const parentLabelledBy = useLabelledBy();
-  let labelIds = $state([]);
-  const allLabelIds = $derived(inherit && parentLabelledBy.value ? [parentLabelledBy.value, ...labelIds] : labelIds);
-  const value = $derived(allLabelIds.length > 0 ? allLabelIds.join(" ") : void 0);
-  const context = {
-    get slot() {
-      return slot;
-    },
-    get name() {
-      return name;
-    },
-    get props() {
-      return props;
-    },
-    get value() {
-      return value;
-    },
-    register(value2) {
-      labelIds.push(value2);
-      return () => {
-        const clone = labelIds.slice();
-        const idx = clone.indexOf(value2);
-        if (idx !== -1) clone.splice(idx, 1);
-        labelIds = clone;
-        return labelIds;
-      };
-    }
-  };
-  setContext("LabelContext", context);
-  return context;
-};
+<script lang="ts" module>let DEFAULT_LABEL_TAG = "label";
 </script>
 
-<script lang="ts" generics="TTag extends keyof SvelteHTMLElements">import { getContext, onMount } from "svelte";
-import { getIdContext, htmlid } from "../utils/id.js";
+<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_LABEL_TAG">import { onMount } from "svelte";
+import { useProvidedId, htmlid } from "../utils/id.js";
 import { useDisabled } from "../hooks/use-disabled.js";
 import { stateFromSlot } from "../utils/state.js";
+import ElementOrComponent from "../utils/ElementOrComponent.svelte";
+import { useLabelContext } from "./context.svelte.js";
 const internalId = htmlid();
 const context = useLabelContext();
-const providedHtmlFor = getIdContext();
+const providedHtmlFor = useProvidedId();
 const providedDisabled = useDisabled();
 let {
-  as,
+  ref = $bindable(),
   id = `headlessui-label-${internalId}`,
   htmlFor = providedHtmlFor,
   passive = false,
-  children,
   ...theirOriginalProps
 } = $props();
 onMount(() => {
@@ -79,8 +26,9 @@ let handleClick = (e) => {
   if (current instanceof HTMLLabelElement) {
     e.preventDefault();
   }
+  console.log("click", providedHtmlFor);
   if (current instanceof HTMLLabelElement) {
-    let target = document.getElementById(current.getAttribute("htmlFor") ?? "");
+    let target = document.getElementById(current.getAttribute("for") ?? "");
     if (target) {
       let actuallyDisabled = target.getAttribute("disabled");
       if (actuallyDisabled === "true" || actuallyDisabled === "") {
@@ -101,7 +49,7 @@ const disabled = $derived(providedDisabled.value ?? false);
 const slot = $derived({ disabled });
 const ourProps = $derived({
   id,
-  htmlFor: passive ? void 0 : htmlFor,
+  for: passive ? void 0 : htmlFor,
   onclick: passive ? void 0 : handleClick,
   ...stateFromSlot(slot)
 });
@@ -115,6 +63,10 @@ const theirProps = $derived.by(() => {
 });
 </script>
 
-<svelte:element this={as ?? (htmlFor ? DEFAULT_LABEL_TAG : "div")} {...ourProps} {...theirProps}>
-  {#if children}{@render children(slot)}{/if}
-</svelte:element>
+<ElementOrComponent
+  {ourProps}
+  {theirProps}
+  defaultTag={htmlFor ? DEFAULT_LABEL_TAG : "div"}
+  name={context.name || "Label"}
+  bind:ref
+/>

package/dist/label/Label.svelte.d.ts

@@ -1,50 +1,37 @@
-import type { SvelteHTMLElements } from "svelte/elements";
-export type LabelProps<TTag extends keyof SvelteHTMLElements = typeof DEFAULT_LABEL_TAG> = SvelteHTMLElements[TTag] & {
-    as?: TTag;
+import type { ElementType, Props, PropsOf } from "../utils/types.js";
+declare let DEFAULT_LABEL_TAG: "label";
+export type LabelProps<TTag extends ElementType = typeof DEFAULT_LABEL_TAG> = Props<TTag> & {
     passive?: boolean;
     htmlFor?: string;
-    children?: Snippet<[
-        {
-            disabled: boolean;
-        }
-    ]>;
 };
-declare const DEFAULT_LABEL_TAG: "label";
-interface SharedData {
-    slot?: {};
-    name?: string;
-    props?: Record<string, any>;
-}
-export type LabelContext = {
-    value: string | undefined;
-    register(value: string): () => void;
-} & SharedData;
-export declare function useLabelContext(): LabelContext;
-export declare function useLabelledBy(alwaysAvailableIds?: (string | undefined | null)[]): {
-    readonly value: string | undefined;
-};
-export declare const useLabels: (options?: SharedData & {
-    inherit?: boolean;
-}) => LabelContext;
-import { type Snippet } from "svelte";
-declare class __sveltets_Render<TTag extends keyof SvelteHTMLElements> {
-    props(): LabelProps<TTag>;
+declare class __sveltets_Render<TTag extends ElementType = typeof DEFAULT_LABEL_TAG> {
+    props(): {
+        as?: TTag | undefined;
+    } & (Exclude<keyof PropsOf<TTag>, "as" | "children" | "refName" | "class"> extends infer T extends keyof PropsOf<TTag> ? { [P in T]: PropsOf<TTag>[P]; } : never) & {
+        children?: import("../utils/types.js").Children<{}> | undefined;
+        ref?: HTMLElement;
+    } & (true extends (PropsOf<TTag> extends infer T_1 ? T_1 extends PropsOf<TTag> ? T_1 extends never ? never : "class" extends infer T_2 ? T_2 extends "class" ? T_2 extends keyof T_1 ? true : never : never : never : never : never) ? {
+        class?: PropsOf<TTag>["class"] | ((bag: {}) => string) | undefined;
+    } : {}) & {
+        passive?: boolean;
+        htmlFor?: string;
+    };
     events(): {} & {
         [evt: string]: CustomEvent<any>;
     };
     slots(): {};
-    bindings(): "";
+    bindings(): "ref";
     exports(): {};
 }
 interface $$IsomorphicComponent {
-    new <TTag extends keyof SvelteHTMLElements>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TTag>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TTag>['props']>, ReturnType<__sveltets_Render<TTag>['events']>, ReturnType<__sveltets_Render<TTag>['slots']>> & {
+    new <TTag extends ElementType = typeof DEFAULT_LABEL_TAG>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TTag>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TTag>['props']>, ReturnType<__sveltets_Render<TTag>['events']>, ReturnType<__sveltets_Render<TTag>['slots']>> & {
         $$bindings?: ReturnType<__sveltets_Render<TTag>['bindings']>;
     } & ReturnType<__sveltets_Render<TTag>['exports']>;
-    <TTag extends keyof SvelteHTMLElements>(internal: unknown, props: ReturnType<__sveltets_Render<TTag>['props']> & {
+    <TTag extends ElementType = typeof DEFAULT_LABEL_TAG>(internal: unknown, props: ReturnType<__sveltets_Render<TTag>['props']> & {
         $$events?: ReturnType<__sveltets_Render<TTag>['events']>;
     }): ReturnType<__sveltets_Render<TTag>['exports']>;
     z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
 }
 declare const Label: $$IsomorphicComponent;
-type Label<TTag extends keyof SvelteHTMLElements> = InstanceType<typeof Label<TTag>>;
+type Label<TTag extends ElementType = typeof DEFAULT_LABEL_TAG> = InstanceType<typeof Label<TTag>>;
 export default Label;

package/dist/label/context.svelte.d.ts

@@ -0,0 +1,17 @@
+interface SharedData {
+    slot?: {};
+    name?: string;
+    props?: Record<string, any>;
+}
+export type LabelContext = {
+    value: string | undefined;
+    register(value: string): () => void;
+} & SharedData;
+export declare function useLabelContext(): LabelContext;
+export declare function useLabelledBy(alwaysAvailableIds?: (string | undefined | null)[]): {
+    readonly value: string | undefined;
+};
+export declare const useLabels: (options?: SharedData & {
+    inherit?: boolean;
+}) => LabelContext;
+export {};

package/dist/label/context.svelte.js

@@ -0,0 +1,56 @@
+import { getContext, setContext } from "svelte";
+export function useLabelContext() {
+    let context = getContext("LabelContext");
+    if (context === null) {
+        let err = new Error("You used a <Label /> component, but it is not inside a relevant parent.");
+        if (Error.captureStackTrace)
+            Error.captureStackTrace(err, useLabelContext);
+        throw err;
+    }
+    return context;
+}
+export function useLabelledBy(alwaysAvailableIds) {
+    const context = getContext("LabelContext");
+    const value = $derived((alwaysAvailableIds?.length ?? 0) > 0
+        ? [context?.value, ...alwaysAvailableIds].filter(Boolean).join(" ")
+        : context?.value);
+    return {
+        get value() {
+            return value;
+        },
+    };
+}
+export const useLabels = (options = {}) => {
+    const { slot, name, props, inherit } = $derived(options);
+    const parentLabelledBy = useLabelledBy();
+    let labelIds = $state([]);
+    const allLabelIds = $derived(inherit && parentLabelledBy.value ? [parentLabelledBy.value, ...labelIds] : labelIds);
+    const value = $derived(allLabelIds.length > 0 ? allLabelIds.join(" ") : undefined);
+    const context = {
+        get slot() {
+            return slot;
+        },
+        get name() {
+            return name;
+        },
+        get props() {
+            return props;
+        },
+        get value() {
+            return value;
+        },
+        register(value) {
+            labelIds.push(value);
+            return () => {
+                const clone = labelIds.slice();
+                const idx = clone.indexOf(value);
+                if (idx !== -1)
+                    clone.splice(idx, 1);
+                labelIds = clone;
+                return labelIds;
+            };
+        },
+    };
+    setContext("LabelContext", context);
+    return context;
+};

package/dist/legend/Legend.svelte

@@ -1,7 +1,8 @@
-<script lang="ts" context="module"></script>
+<script lang="ts" module>import { Label } from "../index.js";
+const DEFAULT_LEGEND_TAG = Label;
+</script>
 
-<script lang="ts">import Label from "../label/Label.svelte";
-let { ...props } = $props();
+<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_LEGEND_TAG">let { ...props } = $props();
 </script>
 
 <Label as="div" {...props} />

package/dist/legend/Legend.svelte.d.ts

@@ -1,17 +1,35 @@
-export type LegendProps = SvelteHTMLElements["div"];
-import type { SvelteHTMLElements } from "svelte/elements";
-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;
-    z_$$bindings?: Bindings;
+import { type LabelProps } from "../index.js";
+import type { ElementType, Props } from "../utils/types.js";
+import type { Component } from "svelte";
+declare const DEFAULT_LEGEND_TAG: Component<LabelProps, any>;
+type LegendRenderPropArg = {};
+type LegendPropsWeControl = never;
+export type LegendProps<TTag extends ElementType = typeof DEFAULT_LEGEND_TAG> = Props<TTag, LegendRenderPropArg, LegendPropsWeControl, {}>;
+declare class __sveltets_Render<TTag extends ElementType = typeof DEFAULT_LEGEND_TAG> {
+    props(): {
+        as?: TTag | undefined;
+    } & (Exclude<keyof import("../index.js").PropsOf<TTag>, "as" | "children" | "refName" | "class"> extends infer T extends keyof import("../index.js").PropsOf<TTag> ? { [P in T]: import("../index.js").PropsOf<TTag>[P]; } : never) & {
+        children?: import("../index.js").Children<LegendRenderPropArg> | undefined;
+        ref?: HTMLElement;
+    } & (true extends (import("../index.js").PropsOf<TTag> extends infer T_1 ? T_1 extends import("../index.js").PropsOf<TTag> ? T_1 extends never ? never : "class" extends infer T_2 ? T_2 extends "class" ? T_2 extends keyof T_1 ? true : never : never : never : never : never) ? {
+        class?: import("../index.js").PropsOf<TTag>["class"] | ((bag: LegendRenderPropArg) => string) | undefined;
+    } : {});
+    events(): {} & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots(): {};
+    bindings(): "";
+    exports(): {};
 }
-declare const Legend: $$__sveltets_2_IsomorphicComponent<import("svelte/elements").HTMLAttributes<HTMLDivElement>, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, "">;
-type Legend = InstanceType<typeof Legend>;
+interface $$IsomorphicComponent {
+    new <TTag extends ElementType = typeof DEFAULT_LEGEND_TAG>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TTag>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TTag>['props']>, ReturnType<__sveltets_Render<TTag>['events']>, ReturnType<__sveltets_Render<TTag>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<TTag>['bindings']>;
+    } & ReturnType<__sveltets_Render<TTag>['exports']>;
+    <TTag extends ElementType = typeof DEFAULT_LEGEND_TAG>(internal: unknown, props: ReturnType<__sveltets_Render<TTag>['props']> & {
+        $$events?: ReturnType<__sveltets_Render<TTag>['events']>;
+    }): ReturnType<__sveltets_Render<TTag>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const Legend: $$IsomorphicComponent;
+type Legend<TTag extends ElementType = typeof DEFAULT_LEGEND_TAG> = InstanceType<typeof Legend<TTag>>;
 export default Legend;