@pzerelles/headlessui-svelte 2.1.2-next.22 → 2.1.2-next.24

package/dist/internal/MainTreeProvider.svelte

@@ -1,42 +1,95 @@
-<script lang="ts" module>import { getContext, onMount } from "svelte";
-export function useMainTreeNode(options = {}) {
-  const { fallbackMainTreeNode = null } = $derived(options);
-  return getContext("MainTreeContext") ?? {
-    get node() {
-      return fallbackMainTreeNode;
-    }
-  };
-}
-</script>
+<script lang="ts" module>
+  import { getContext, onMount } from "svelte"
 
-<script lang="ts">import { setContext } from "svelte";
-import Hidden, { HiddenFeatures } from "./Hidden.svelte";
-import { getOwnerDocument } from "../utils/owner.js";
-let { node, children } = $props();
-let mainTreeNode = $state(null);
-const resolvedMainTreeNode = useMainTreeNode({
-  get fallbackMainTreeNode() {
-    return node ?? mainTreeNode;
-  }
-});
-setContext("MainTreeContext", {
-  get node() {
-    return resolvedMainTreeNode.node;
+  type MainTreeContext = { node: HTMLElement | null }
+
+  /**
+   * Get the main tree node from context or fallback to the optionally provided node.
+   */
+  export function useMainTreeNode(options: { fallbackMainTreeNode?: HTMLElement | null } = {}) {
+    const { fallbackMainTreeNode = null } = $derived(options)
+
+    // Prefer the main tree node from context, but fallback to the provided node.
+    return (
+      getContext<MainTreeContext>("MainTreeContext") ?? {
+        get node() {
+          return fallbackMainTreeNode
+        },
+      }
+    )
   }
-});
-let el = $state();
-onMount(() => {
-  if (!el) return;
-  for (let container of getOwnerDocument(el)?.querySelectorAll("html > *, body > *") ?? []) {
-    if (container === document.body) continue;
-    if (container === document.head) continue;
-    if (!(container instanceof HTMLElement)) continue;
-    if (container?.contains(el)) {
-      mainTreeNode = container;
-      break;
+</script>
+
+<script lang="ts">
+  import { setContext, type Snippet } from "svelte"
+  import Hidden, { HiddenFeatures } from "./Hidden.svelte"
+  import { getOwnerDocument } from "../utils/owner.js"
+  /**
+   * A provider for the main tree node.
+   *
+   * When a component is rendered in a `Portal`, it is no longer part of the main
+   * tree. This provider helps to find the main tree node and pass it along to the
+   * components that need it.
+   *
+   * The main tree node is used for features such as outside click behavior, where
+   * we allow clicks in 3rd party containers, but not in the parent of the "main
+   * tree".
+   *
+   * In case of a `Popover`, we can use the `PopoverButton` as a marker in the
+   * "main tree", the `PopoverPanel` can't be used because it could be rendered in
+   * a `Portal` (e.g. when using the `anchor` props).
+   *
+   * However, we can't use the `PopoverButton` when it's nested inside of another
+   * `Popover`'s `PopoverPanel` component if the parent `PopoverPanel` is
+   * rendered in a `Portal`.
+   *
+   * This is where the `MainTreeProvider` comes in. It will find the "main tree"
+   * node and pass it on. The top-level `PopoverButton` will be used as a marker
+   * in the "main tree" and nested `Popover` will use this button as well.
+   */
+  let { node, children }: { children: Snippet; node?: HTMLElement | null } = $props()
+
+  let mainTreeNode = $state<HTMLElement | null>(null)
+
+  // 1. Prefer the main tree node from context
+  // 2. Prefer the provided node
+  // 3. Create a new node at this point, and find the main tree node
+  const resolvedMainTreeNode = useMainTreeNode({
+    get fallbackMainTreeNode() {
+      return node ?? mainTreeNode
+    },
+  })
+
+  setContext("MainTreeContext", {
+    get node() {
+      return resolvedMainTreeNode.node
+    },
+  })
+
+  /**
+   * If no main tree node is found at this point, then we briefly render an
+   * element to find the main tree node and pass it along.
+   */
+  let el = $state<HTMLElement>()
+  onMount(() => {
+    if (!el) return
+
+    // We will only render this when no `mainTreeNode` is found. This
+    // means that if we render this element and use it as the
+    // `mainTreeNode` that we will be unmounting it later.
+    //
+    // However, we can resolve the actual root container of the main
+    // tree node and use that instead.
+    for (let container of getOwnerDocument(el)?.querySelectorAll("html > *, body > *") ?? []) {
+      if (container === document.body) continue // Skip `<body>`
+      if (container === document.head) continue // Skip `<head>`
+      if (!(container instanceof HTMLElement)) continue // Skip non-HTMLElements
+      if (container?.contains(el)) {
+        mainTreeNode = container
+        break
+      }
     }
-  }
-});
+  })
 </script>
 
 {#if children}{@render children()}{/if}

package/dist/internal/Portal.svelte

@@ -1,17 +1,21 @@
-<script lang="ts">import { onDestroy, onMount } from "svelte";
-let { target, children } = $props();
-let ref = $state();
-onMount(() => {
-  target.appendChild(ref);
-});
-onDestroy(() => {
-  const _ref = ref;
-  setTimeout(() => {
-    if (_ref?.parentNode) {
-      _ref.parentNode?.removeChild(_ref);
-    }
-  });
-});
+<script lang="ts">
+  import { onDestroy, onMount, type Snippet } from "svelte"
+
+  let { target, children }: { target: HTMLElement; children: Snippet } = $props()
+  let ref = $state<HTMLDivElement>()
+
+  onMount(() => {
+    target.appendChild(ref!)
+  })
+
+  onDestroy(() => {
+    const _ref = ref
+    setTimeout(() => {
+      if (_ref?.parentNode) {
+        _ref.parentNode?.removeChild(_ref)
+      }
+    })
+  })
 </script>
 
 <div bind:this={ref}>{@render children()}</div>

package/dist/internal/floating-provider.svelte.js

@@ -10,7 +10,7 @@ export const useFloatingProvider = (options = { enabled: true }) => {
     const setInnerOffset = (offset) => (innerOffset = typeof offset === "function" ? offset(innerOffset) : offset);
     const overflowRef = $state({ current: null });
     let floatingEl = $state(null);
-    const setFloatingElement = (element) => (floatingEl = element);
+    const setFloatingElement = (element) => (floatingEl = element ?? null);
     useFixScrollingPixel({
         get element() {
             return floatingEl;

package/dist/internal/floating.svelte.d.ts

@@ -37,9 +37,9 @@ export type InternalFloatingPanelProps = Partial<{
     };
 }>;
 export type FloatingContext = {
-    styles?: UseFloatingReturn<any>["floatingStyles"];
-    setReference: UseFloatingReturn<any>["refs"]["setReference"];
-    setFloating: UseFloatingReturn<any>["refs"]["setFloating"];
+    styles?: UseFloatingReturn["floatingStyles"];
+    setReference: UseFloatingReturn["refs"]["setReference"];
+    setFloating: UseFloatingReturn["refs"]["setFloating"];
     getReferenceProps: ReturnType<typeof useInteractions>["getReferenceProps"];
     getFloatingProps: ReturnType<typeof useInteractions>["getFloatingProps"];
     slot: Partial<{
@@ -55,7 +55,7 @@ export declare function useResolvedAnchor<T extends AnchorProps | AnchorPropsWit
     anchor: Exclude<T, boolean | string> | null;
 };
 export declare function useFloatingReference(): {
-    readonly setReference: ((node: import("../utils/floating-ui/svelte-dom/types.js").ReferenceType | null) => void) & ((node: any) => void);
+    readonly setReference: ((node: import("../utils/floating-ui/svelte-dom/types.js").ReferenceType | null | undefined) => void) & ((node: import("../utils/floating-ui/svelte/types.js").ReferenceType | null | undefined) => void);
 };
 export declare function useFloatingReferenceProps(): {
     readonly getReferenceProps: (userProps?: import("svelte/elements.js").HTMLAttributes<Element>) => Record<string, unknown>;
@@ -66,7 +66,7 @@ export declare function useFloatingPanelProps(): (userProps?: import("svelte/ele
 export declare function useFloatingPanel(options?: {
     placement: (AnchorPropsWithSelection & InternalFloatingPanelProps) | null;
 }): {
-    readonly setFloating: ((node: HTMLElement | null) => void) & ((node: HTMLElement | null) => void);
+    readonly setFloating: ((node: HTMLElement | null | undefined) => void) & ((node: HTMLElement | null | undefined) => void);
     readonly styles: string | undefined;
 };
 export declare function useFixScrollingPixel(options: {

package/dist/internal/floating.svelte.js

@@ -76,17 +76,17 @@ export function useFloatingPanel(options = { placement: null }) {
     };
 }
 export function useFixScrollingPixel(options) {
-    const { element } = $derived(options);
     $effect(() => {
+        const element = options.element;
         if (!element)
             return;
         untrack(() => {
-            let observer = new MutationObserver(() => {
-                let maxHeight = window.getComputedStyle(element).maxHeight;
-                let maxHeightFloat = parseFloat(maxHeight);
+            const observer = new MutationObserver(() => {
+                const maxHeight = window.getComputedStyle(element).maxHeight;
+                const maxHeightFloat = parseFloat(maxHeight);
                 if (isNaN(maxHeightFloat))
                     return;
-                let maxHeightInt = parseInt(maxHeight);
+                const maxHeightInt = parseInt(maxHeight);
                 if (isNaN(maxHeightInt))
                     return;
                 if (maxHeightFloat !== maxHeightInt) {
@@ -149,7 +149,7 @@ export function useResolvedConfig(options) {
 }
 function useResolvePxValue(options) {
     const { input, element, defaultValue } = $derived(options);
-    let d = useDisposables();
+    const d = useDisposables();
     const computeValue = (value, element) => {
         // Nullish
         if (value == null)
@@ -165,7 +165,7 @@ function useResolvePxValue(options) {
             return [
                 result,
                 (setValue) => {
-                    let variables = resolveVariables(value);
+                    const variables = resolveVariables(value);
                     // TODO: Improve this part and make it work
                     //
                     // Observe variables themselves. Currently the browser doesn't support this, but the
@@ -197,7 +197,7 @@ function useResolvePxValue(options) {
                     // }
                     // Works as a fallback, but not very performant because we are polling the value.
                     {
-                        let history = variables.map((variable) => window.getComputedStyle(element).getPropertyValue(variable));
+                        const history = variables.map((variable) => window.getComputedStyle(element).getPropertyValue(variable));
                         d.requestAnimationFrame(function check() {
                             d.nextFrame(check);
                             // Fast path, detect if the value of the CSS Variable has changed before completely
@@ -206,8 +206,8 @@ function useResolvePxValue(options) {
                             //
                             // This is a lot of work, so we want to avoid it if possible.
                             let changed = false;
-                            for (let [idx, variable] of variables.entries()) {
-                                let value = window.getComputedStyle(element).getPropertyValue(variable);
+                            for (const [idx, variable] of variables.entries()) {
+                                const value = window.getComputedStyle(element).getPropertyValue(variable);
                                 if (history[idx] !== value) {
                                     history[idx] = value;
                                     changed = true;
@@ -217,7 +217,7 @@ function useResolvePxValue(options) {
                             // Nothing changed, no need to perform the expensive computation.
                             if (!changed)
                                 return;
-                            let newResult = resolveCSSVariablePxValue(value, element);
+                            const newResult = resolveCSSVariablePxValue(value, element);
                             if (result !== newResult) {
                                 setValue(newResult);
                                 result = newResult;
@@ -250,14 +250,14 @@ function useResolvePxValue(options) {
     };
 }
 function resolveVariables(value) {
-    let matches = /var\((.*)\)/.exec(value);
+    const matches = /var\((.*)\)/.exec(value);
     if (matches) {
-        let idx = matches[1].indexOf(",");
+        const idx = matches[1].indexOf(",");
         if (idx === -1) {
             return [matches[1]];
         }
-        let variable = matches[1].slice(0, idx).trim();
-        let fallback = matches[1].slice(idx + 1).trim();
+        const variable = matches[1].slice(0, idx).trim();
+        const fallback = matches[1].slice(idx + 1).trim();
         if (fallback) {
             return [variable, ...resolveVariables(fallback)];
         }
@@ -291,7 +291,7 @@ function resolveCSSVariablePxValue(input, element) {
     // ```
     //
     // Then this will result to resolved value of `2rem`, instead of `1rem`
-    let tmpEl = document.createElement("div");
+    const tmpEl = document.createElement("div");
     element.appendChild(tmpEl);
     // Set the value to `0px` otherwise if an invalid value is provided later the browser will read
     // out the default value.
@@ -301,7 +301,7 @@ function resolveCSSVariablePxValue(input, element) {
     // Set the new value, if this is invalid the previous value will be used.
     tmpEl.style.setProperty("margin-top", input, "important");
     // Reading the `margin-top` will already be in pixels (e.g.: 123px).
-    let pxValue = parseFloat(window.getComputedStyle(tmpEl).marginTop) || 0;
+    const pxValue = parseFloat(window.getComputedStyle(tmpEl).marginTop) || 0;
     element.removeChild(tmpEl);
     return pxValue;
 }

package/dist/label/Label.svelte

@@ -1,66 +1,101 @@
-<script lang="ts" module>let DEFAULT_LABEL_TAG = "label";
-</script>
+<script lang="ts" module>
+  import type { ElementType, Props, PropsOf } from "../utils/types.js"
+
+  let DEFAULT_LABEL_TAG = "label" as const
 
-<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 = useProvidedId();
-const providedDisabled = useDisabled();
-let {
-  ref = $bindable(),
-  id = `headlessui-label-${internalId}`,
-  htmlFor = providedHtmlFor,
-  passive = false,
-  ...theirOriginalProps
-} = $props();
-onMount(() => {
-  context.register(id);
-});
-let handleClick = (e) => {
-  let current = e.currentTarget;
-  if (current instanceof HTMLLabelElement) {
-    e.preventDefault();
+  export type LabelProps<TTag extends ElementType = typeof DEFAULT_LABEL_TAG> = Props<TTag> & {
+    passive?: boolean
+    htmlFor?: string
   }
-  console.log("click", providedHtmlFor);
-  if (current instanceof HTMLLabelElement) {
-    let target = document.getElementById(current.getAttribute("for") ?? "");
-    if (target) {
-      let actuallyDisabled = target.getAttribute("disabled");
-      if (actuallyDisabled === "true" || actuallyDisabled === "") {
-        return;
-      }
-      let ariaDisabled = target.getAttribute("aria-disabled");
-      if (ariaDisabled === "true" || ariaDisabled === "") {
-        return;
-      }
-      if (target instanceof HTMLInputElement && (target.type === "radio" || target.type === "checkbox") || target.role === "radio" || target.role === "checkbox" || target.role === "switch") {
-        target.click();
+</script>
+
+<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 = useProvidedId()
+  const providedDisabled = useDisabled()
+
+  let {
+    ref = $bindable(),
+    id = `headlessui-label-${internalId}` as PropsOf<TTag>["id"],
+    htmlFor = providedHtmlFor,
+    passive = false,
+    ...theirOriginalProps
+  }: { as?: TTag } & LabelProps<TTag> = $props()
+
+  onMount(() => {
+    context.register(id)
+  })
+
+  let handleClick = (e: MouseEvent) => {
+    let current = e.currentTarget
+
+    // Labels connected to 'real' controls will already click the element. But we don't know that
+    // ahead of time. This will prevent the default click, such that only a single click happens
+    // instead of two. Otherwise this results in a visual no-op.
+    if (current instanceof HTMLLabelElement) {
+      e.preventDefault()
+    }
+
+    console.log("click", providedHtmlFor)
+
+    if (current instanceof HTMLLabelElement) {
+      let target = document.getElementById(current.getAttribute("for") ?? "")
+      if (target) {
+        // Bail if the target element is disabled
+        let actuallyDisabled = target.getAttribute("disabled")
+        if (actuallyDisabled === "true" || actuallyDisabled === "") {
+          return
+        }
+
+        let ariaDisabled = target.getAttribute("aria-disabled")
+        if (ariaDisabled === "true" || ariaDisabled === "") {
+          return
+        }
+
+        // Ensure we click the element this label is bound to. This is necessary for elements that
+        // immediately require state changes, e.g.: Radio & Checkbox inputs need to be checked (or
+        // unchecked).
+        if (
+          (target instanceof HTMLInputElement && (target.type === "radio" || target.type === "checkbox")) ||
+          target.role === "radio" ||
+          target.role === "checkbox" ||
+          target.role === "switch"
+        ) {
+          target.click()
+        }
+
+        // Move focus to the element, this allows you to start using keyboard shortcuts since the
+        // bound element is now focused.
+        target.focus({ preventScroll: true })
       }
-      target.focus({ preventScroll: true });
     }
   }
-};
-const disabled = $derived(providedDisabled.value ?? false);
-const slot = $derived({ disabled });
-const ourProps = $derived({
-  id,
-  for: passive ? void 0 : htmlFor,
-  onclick: passive ? void 0 : handleClick,
-  ...stateFromSlot(slot)
-});
-const theirProps = $derived.by(() => {
-  if (passive) {
-    const { onclick: _, ...props } = theirOriginalProps;
-    return props;
-  } else {
-    return theirOriginalProps;
-  }
-});
+
+  const disabled = $derived(providedDisabled.current ?? false)
+  const slot = $derived({ disabled })
+  const ourProps = $derived({
+    id,
+    for: passive ? undefined : htmlFor,
+    onclick: passive ? undefined : handleClick,
+    ...stateFromSlot(slot),
+  })
+
+  const theirProps = $derived.by(() => {
+    if (passive) {
+      const { onclick: _, ...props } = theirOriginalProps
+      return props
+    } else {
+      return theirOriginalProps
+    }
+  })
 </script>
 
 <ElementOrComponent

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

@@ -7,11 +7,14 @@ export type LabelProps<TTag extends ElementType = typeof DEFAULT_LABEL_TAG> = Pr
 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("svelte").Snippet<[{}, Record<string, any>]> | undefined;
+    } & (Exclude<keyof PropsOf<TTag>, "as" | "children" | "class"> extends infer T extends keyof PropsOf<TTag> ? { [P in T]: PropsOf<TTag>[P]; } : never) & {
+        children?: import("svelte").Snippet<[{
+            slot: {};
+            props: Record<string, any>;
+        }]> | 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;
+    } & (true extends (import("svelte/elements.js").SvelteHTMLElements[TTag] extends infer T_1 ? T_1 extends import("svelte/elements.js").SvelteHTMLElements[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?: string | ((bag: {}) => string) | null | undefined;
     } : {}) & {
         passive?: boolean;
         htmlFor?: string;

package/dist/legend/Legend.svelte

@@ -1,8 +1,17 @@
-<script lang="ts" module>import { Label } from "../index.js";
-const DEFAULT_LEGEND_TAG = "div";
+<script lang="ts" module>
+  import { Label } from "../index.js"
+  import type { Props } from "../utils/types.js"
+
+  const DEFAULT_LEGEND_TAG = "div" as const
+
+  type LegendRenderPropArg = {}
+  type LegendPropsWeControl = never
+
+  export type LegendProps = Props<typeof DEFAULT_LEGEND_TAG, LegendRenderPropArg, LegendPropsWeControl, {}>
 </script>
 
-<script lang="ts">let { ...props } = $props();
+<script lang="ts">
+  let { ...props }: LegendProps = $props()
 </script>
 
 <Label as="div" {...props} />