@pzerelles/headlessui-svelte 2.1.2-next.30 → 2.1.2-next.32

package/dist/focus-trap/FocusTrap.svelte.d.ts

@@ -16,8 +16,7 @@ declare class __sveltets_Render<TTag extends ElementType = typeof DEFAULT_FOCUS_
         as?: TTag | undefined;
     } & (Exclude<keyof import("../utils/types.js").PropsOf<TTag>, ("slot" | "as" | "children" | "class" | "ref") | "features" | "containers" | "initialFocus" | "initialFocusFallback"> extends infer T extends keyof import("../utils/types.js").PropsOf<TTag> ? { [P in T]: import("../utils/types.js").PropsOf<TTag>[P]; } : never) & {
         children?: import("svelte").Snippet<[{
-            slot: FocusTrapRenderPropArg;
-            props: Record<string, any>;
+            props?: Record<string, any>;
         }]> | undefined;
         class?: string | ((bag: FocusTrapRenderPropArg) => string) | null | undefined;
         ref?: HTMLElement;

package/dist/input/Input.svelte

@@ -1,59 +1,90 @@
-<script lang="ts" module>const DEFAULT_INPUT_TAG = "input";
-</script>
+<script lang="ts" module>
+  import type { ElementType, Props, PropsOf } from "../utils/types.js"
 
-<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_INPUT_TAG, TValue = string">import { htmlid } from "../utils/id.js";
-import { useDisabled } from "../hooks/use-disabled.js";
-import { useProvidedId } from "../utils/id.js";
-import { useLabelledBy } from "../label/context.svelte.js";
-import { useDescribedBy } from "../description/context.svelte.js";
-import { useHover } from "../hooks/use-hover.svelte.js";
-import { useFocusRing } from "../hooks/use-focus-ring.svelte.js";
-import { mergeProps } from "../utils/render.js";
-import ElementOrComponent from "../utils/ElementOrComponent.svelte";
-const internalId = htmlid();
-const providedId = useProvidedId();
-const providedDisabled = useDisabled();
-let {
-  ref = $bindable(),
-  value = $bindable(),
-  id = providedId || `headlessui-input-${internalId}`,
-  disabled: theirDisabled = false,
-  autofocus = false,
-  invalid = false,
-  ...theirProps
-} = $props();
-const disabled = $derived(providedDisabled.current || theirDisabled);
-const labelledBy = useLabelledBy();
-const describedBy = useDescribedBy();
-const { isHovered: hover, hoverProps } = $derived(
-  useHover({
-    get disabled() {
-      return disabled;
-    }
-  })
-);
-const { isFocusVisible: focus, focusProps } = $derived(
-  useFocusRing({
-    get autofocus() {
-      return autofocus;
-    }
-  })
-);
-const ourProps = $derived(
-  mergeProps(
+  const DEFAULT_INPUT_TAG = "input" as const
+
+  type InputRenderPropArg = {
+    disabled: boolean
+    hover: boolean
+    focus: boolean
+    autofocus: boolean
+    invalid: boolean
+  }
+  type InputPropsWeControl = "aria-labelledby" | "aria-describedby"
+
+  export type InputProps<TTag extends ElementType = typeof DEFAULT_INPUT_TAG, TValue = string> = Props<
+    TTag,
+    InputRenderPropArg,
+    InputPropsWeControl,
     {
-      id,
-      "aria-labelledby": labelledBy?.value,
-      "aria-describedby": describedBy?.value,
-      "aria-invalid": invalid ? "" : void 0,
-      disabled: disabled || void 0,
-      autofocus
-    },
-    focusProps,
-    hoverProps
+      value?: TValue
+      disabled?: boolean
+      invalid?: boolean
+      autofocus?: boolean
+    }
+  >
+</script>
+
+<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_INPUT_TAG, TValue = string">
+  import { htmlid } from "../utils/id.js"
+  import { useDisabled } from "../hooks/use-disabled.js"
+  import { useProvidedId } from "../utils/id.js"
+  import { useLabelledBy } from "../label/context.svelte.js"
+  import { useDescribedBy } from "../description/context.svelte.js"
+  import { useHover } from "../hooks/use-hover.svelte.js"
+  import { useFocusRing } from "../hooks/use-focus-ring.svelte.js"
+  import { mergeProps } from "../utils/render.js"
+  import ElementOrComponent from "../utils/ElementOrComponent.svelte"
+
+  const internalId = htmlid()
+  const providedId = useProvidedId()
+  const providedDisabled = useDisabled()
+
+  let {
+    ref = $bindable(),
+    value = $bindable(),
+    id = (providedId || `headlessui-input-${internalId}`) as PropsOf<TTag>["id"],
+    disabled: theirDisabled = false,
+    autofocus = false,
+    invalid = false,
+    ...theirProps
+  }: { as?: TTag; value?: TValue } & InputProps<TTag, TValue> = $props()
+  const disabled = $derived(providedDisabled.current || theirDisabled)
+
+  const labelledBy = useLabelledBy()
+  const describedBy = useDescribedBy()
+
+  const { isHovered: hover, hoverProps } = $derived(
+    useHover({
+      get disabled() {
+        return disabled
+      },
+    })
   )
-);
-const slot = $derived({ disabled, invalid, hover, focus, autofocus });
+  const { isFocusVisible: focus, focusProps } = $derived(
+    useFocusRing({
+      get autofocus() {
+        return autofocus
+      },
+    })
+  )
+
+  const ourProps = $derived(
+    mergeProps(
+      {
+        id,
+        "aria-labelledby": labelledBy?.value,
+        "aria-describedby": describedBy?.value,
+        "aria-invalid": invalid ? "" : undefined,
+        disabled: disabled || undefined,
+        autofocus,
+      },
+      focusProps,
+      hoverProps
+    )
+  )
+
+  const slot = $derived({ disabled, invalid, hover, focus, autofocus } satisfies InputRenderPropArg)
 </script>
 
 <ElementOrComponent {ourProps} {theirProps} {slot} defaultTag={DEFAULT_INPUT_TAG} name="Input" bind:ref bind:value />

package/dist/input/Input.svelte.d.ts

@@ -19,9 +19,8 @@ declare class __sveltets_Render<TTag extends ElementType = typeof DEFAULT_INPUT_
         as?: TTag | undefined;
         value?: TValue | undefined;
     } & (Exclude<keyof PropsOf<TTag>, ("slot" | "as" | "children" | "class" | "ref") | "invalid" | "disabled" | "autofocus" | "value" | InputPropsWeControl> extends infer T extends keyof PropsOf<TTag> ? { [P in T]: PropsOf<TTag>[P]; } : never) & {
-        children?: import("svelte").Snippet<[{
-            slot: InputRenderPropArg;
-            props: Record<string, any>;
+        children?: import("svelte").Snippet<[InputRenderPropArg & {
+            props?: Record<string, any>;
         }]> | undefined;
         class?: string | ((bag: InputRenderPropArg) => string) | null | undefined;
         ref?: HTMLElement;

package/dist/internal/FloatingProvider.svelte

@@ -1,12 +1,17 @@
-<script lang="ts" module></script>
-
-<script lang="ts">import { useFloatingProvider } from "./floating-provider.svelte.js";
-const { children, enabled = true } = $props();
-useFloatingProvider({
-  get enabled() {
-    return enabled;
-  }
-});
+<script lang="ts" module>
+</script>
+
+<script lang="ts">
+  import type { Snippet } from "svelte"
+  import { useFloatingProvider } from "./floating-provider.svelte.js"
+
+  const { children, enabled = true }: { children: Snippet; enabled?: boolean } = $props()
+
+  useFloatingProvider({
+    get enabled() {
+      return enabled
+    },
+  })
 </script>
 
 {#if children}{@render children()}{/if}

package/dist/internal/FocusSentinel.svelte

@@ -1,11 +1,19 @@
-<script lang="ts">import { onMount } from "svelte";
-import Hidden, { HiddenFeatures } from "./Hidden.svelte";
-let { onfocus } = $props();
-let enabled = $state(true);
-let mounted = $state(false);
-onMount(() => {
-  mounted = true;
-});
+<script lang="ts">
+  import { onMount } from "svelte"
+  import Hidden, { HiddenFeatures } from "./Hidden.svelte"
+
+  interface FocusSentinelProps {
+    onfocus: () => boolean
+  }
+
+  let { onfocus }: FocusSentinelProps = $props()
+
+  let enabled = $state(true)
+  let mounted = $state(false)
+
+  onMount(() => {
+    mounted = true
+  })
 </script>
 
 {#if enabled}

package/dist/internal/ForcePortalRoot.svelte

@@ -1,6 +1,10 @@
-<script lang="ts">import { createPortalRoot } from "./portal-force-root.svelte.js";
-let { force, children } = $props();
-createPortalRoot({ force });
+<script lang="ts">
+  import type { Snippet } from "svelte"
+  import { createPortalRoot } from "./portal-force-root.svelte.js"
+
+  let { force, children }: { force: boolean; children: Snippet } = $props()
+
+  createPortalRoot({ force })
 </script>
 
 {#if children}{@render children()}{/if}

package/dist/internal/FormFields.svelte

@@ -1,38 +1,51 @@
-<script lang="ts">import { disposables } from "../utils/disposables.js";
-import { objectToFormEntries } from "../utils/form.js";
-import FormResolver from "./FormResolver.svelte";
-import { hoistFormFields } from "./form-fields.svelte.js";
-import Hidden, { HiddenFeatures } from "./Hidden.svelte";
-import { compact } from "../utils/object.js";
-let {
-  data,
-  form: formId,
-  disabled,
-  onReset,
-  overrides
-} = $props();
-let form = $state(null);
-const d = disposables();
-$effect(() => {
-  if (!onReset) return;
-  if (!form) return;
-  return d.addEventListener(form, "reset", onReset);
-});
-const fields = $derived(
-  objectToFormEntries(data).map(
-    ([name, value]) => compact({
-      key: name,
-      as: "input",
-      type: "hidden",
-      form: formId,
-      disabled,
-      name,
-      value,
-      ...overrides
-    })
+<script lang="ts">
+  import { disposables } from "../utils/disposables.js"
+  import { objectToFormEntries } from "../utils/form.js"
+  import FormResolver from "./FormResolver.svelte"
+  import { hoistFormFields } from "./form-fields.svelte.js"
+  import Hidden, { HiddenFeatures } from "./Hidden.svelte"
+  import { compact } from "../utils/object.js"
+
+  let {
+    data,
+    form: formId,
+    disabled,
+    onReset,
+    overrides,
+  }: {
+    data: Record<string, any>
+    overrides?: Record<string, any>
+    form?: string
+    disabled?: boolean
+    onReset?: (e: Event) => void
+  } = $props()
+
+  let form = $state<HTMLFormElement | null>(null)
+  const d = disposables()
+
+  $effect(() => {
+    if (!onReset) return
+    if (!form) return
+
+    return d.addEventListener(form, "reset", onReset)
+  })
+
+  const fields = $derived(
+    objectToFormEntries(data).map(([name, value]) =>
+      compact({
+        key: name,
+        as: "input",
+        type: "hidden",
+        form: formId,
+        disabled,
+        name,
+        value,
+        ...overrides,
+      })
+    )
   )
-);
-const hoisted = hoistFormFields(formFields);
+
+  const hoisted = hoistFormFields(formFields)
 </script>
 
 {#snippet formFields()}

package/dist/internal/FormFieldsProvider.svelte

@@ -1,8 +1,12 @@
-<script lang="ts">import Hidden, { HiddenFeatures } from "./Hidden.svelte";
-import { createFormFieldsContext } from "./form-fields.svelte.js";
-const { children } = $props();
-const context = createFormFieldsContext();
-const { fields } = $derived(context);
+<script lang="ts">
+  import type { Snippet } from "svelte"
+  import Hidden, { HiddenFeatures } from "./Hidden.svelte"
+  import { createFormFieldsContext } from "./form-fields.svelte.js"
+
+  const { children }: { children?: Snippet } = $props()
+
+  const context = createFormFieldsContext()
+  const { fields } = $derived(context)
 </script>
 
 {#if children}{@render children()}{/if}

package/dist/internal/FormResolver.svelte

@@ -1,18 +1,23 @@
-<script lang="ts">import { onMount } from "svelte";
-import Hidden, { HiddenFeatures } from "./Hidden.svelte";
-let { setForm, formId } = $props();
-$effect(() => {
-  if (formId) {
-    const resolvedForm = document.getElementById(formId);
-    if (resolvedForm) setForm(resolvedForm);
-  }
-});
-let element = $state();
-onMount(() => {
-  if (!element) return;
-  const resolvedForm = element.closest("form");
-  if (resolvedForm) setForm(resolvedForm);
-});
+<script lang="ts">
+  import { onMount } from "svelte"
+  import Hidden, { HiddenFeatures } from "./Hidden.svelte"
+
+  let { setForm, formId }: { setForm: (form: HTMLFormElement) => void; formId?: string } = $props()
+
+  $effect(() => {
+    if (formId) {
+      const resolvedForm = document.getElementById(formId) as HTMLFormElement
+      if (resolvedForm) setForm(resolvedForm)
+    }
+  })
+
+  let element = $state<HTMLElement>()
+
+  onMount(() => {
+    if (!element) return
+    const resolvedForm = element.closest("form")
+    if (resolvedForm) setForm(resolvedForm)
+  })
 </script>
 
 {#if !formId}

package/dist/internal/Hidden.svelte

@@ -1,34 +1,55 @@
-<script lang="ts" module>import ElementOrComponent from "../utils/ElementOrComponent.svelte";
-import { HiddenFeatures } from "./HiddenFeatures.js";
-export * from "./HiddenFeatures.js";
-const DEFAULT_VISUALLY_HIDDEN_TAG = "span";
+<script lang="ts" module>
+  import ElementOrComponent from "../utils/ElementOrComponent.svelte"
+  import type { ElementType, Props } from "../utils/types.js"
+  import { HiddenFeatures } from "./HiddenFeatures.js"
+
+  export * from "./HiddenFeatures.js"
+
+  const DEFAULT_VISUALLY_HIDDEN_TAG = "span" as const
+
+  type HiddenRenderPropArg = {}
+  type HiddenPropsWeControl = never
+  export type HiddenProps<TTag extends ElementType = typeof DEFAULT_VISUALLY_HIDDEN_TAG> = Props<
+    TTag,
+    HiddenRenderPropArg,
+    HiddenPropsWeControl,
+    { features?: HiddenFeatures }
+  >
 </script>
 
-<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_VISUALLY_HIDDEN_TAG">let {
-  ref = $bindable(),
-  value,
-  checked,
-  features = HiddenFeatures.None,
-  ...theirProps
-} = $props();
-let ourProps = {
-  "aria-hidden": (features & HiddenFeatures.Focusable) === HiddenFeatures.Focusable ? true : theirProps["aria-hidden"] ?? void 0,
-  hidden: (features & HiddenFeatures.Hidden) === HiddenFeatures.Hidden ? true : void 0,
-  style: [
-    "position: fixed",
-    "top: 1px",
-    "left: 1px",
-    "width: 1px",
-    "height: 0",
-    "padding: 0",
-    "margin: -1px",
-    "overflow: hidden",
-    "clip: rect(0, 0, 0, 0)",
-    "whiteSpace: nowrap",
-    "borderWidth: 0",
-    ...(features & HiddenFeatures.Hidden) === HiddenFeatures.Hidden && !((features & HiddenFeatures.Focusable) === HiddenFeatures.Focusable) ? ["display: none"] : []
-  ].join("; ")
-};
+<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_VISUALLY_HIDDEN_TAG">
+  let {
+    ref = $bindable(),
+    value,
+    checked,
+    features = HiddenFeatures.None,
+    ...theirProps
+  }: { as?: TTag } & HiddenProps<TTag> = $props()
+
+  let ourProps = {
+    "aria-hidden":
+      (features & HiddenFeatures.Focusable) === HiddenFeatures.Focusable
+        ? true
+        : (theirProps["aria-hidden" as keyof typeof theirProps] ?? undefined),
+    hidden: (features & HiddenFeatures.Hidden) === HiddenFeatures.Hidden ? true : undefined,
+    style: [
+      "position: fixed",
+      "top: 1px",
+      "left: 1px",
+      "width: 1px",
+      "height: 0",
+      "padding: 0",
+      "margin: -1px",
+      "overflow: hidden",
+      "clip: rect(0, 0, 0, 0)",
+      "whiteSpace: nowrap",
+      "borderWidth: 0",
+      ...((features & HiddenFeatures.Hidden) === HiddenFeatures.Hidden &&
+      !((features & HiddenFeatures.Focusable) === HiddenFeatures.Focusable)
+        ? ["display: none"]
+        : []),
+    ].join("; "),
+  }
 </script>
 
 <ElementOrComponent

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

@@ -12,8 +12,7 @@ declare class __sveltets_Render<TTag extends ElementType = typeof DEFAULT_VISUAL
         as?: TTag | undefined;
     } & (Exclude<keyof import("../utils/types.js").PropsOf<TTag>, ("slot" | "as" | "children" | "class" | "ref") | "features"> extends infer T extends keyof import("../utils/types.js").PropsOf<TTag> ? { [P in T]: import("../utils/types.js").PropsOf<TTag>[P]; } : never) & {
         children?: import("svelte").Snippet<[{
-            slot: HiddenRenderPropArg;
-            props: Record<string, any>;
+            props?: Record<string, any>;
         }]> | undefined;
         class?: string | ((bag: HiddenRenderPropArg) => string) | null | undefined;
         ref?: HTMLElement;

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>