@pzerelles/headlessui-svelte 2.1.2-next.7 → 2.1.2-next.9

package/dist/input/Input.svelte

@@ -1,90 +1,59 @@
-<script lang="ts" module>
-  import type { ElementType, Props, PropsOf } from "../utils/types.js"
-
-  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,
-    {
-      value?: TValue
-      disabled?: boolean
-      invalid?: boolean
-      autofocus?: boolean
-    }
-  >
+<script lang="ts" module>const DEFAULT_INPUT_TAG = "input";
 </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 "../internal/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?.value || `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?.value ?? 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(
-      {
-        id,
-        "aria-labelledby": labelledBy?.value,
-        "aria-describedby": describedBy?.value,
-        "aria-invalid": invalid ? "" : undefined,
-        disabled: disabled || undefined,
-        autofocus,
-      },
-      focusProps,
-      hoverProps
-    )
+<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?.value ?? 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(
+    {
+      id,
+      "aria-labelledby": labelledBy?.value,
+      "aria-describedby": describedBy?.value,
+      "aria-invalid": invalid ? "" : void 0,
+      disabled: disabled || void 0,
+      autofocus
+    },
+    focusProps,
+    hoverProps
   )
-
-  const slot = $derived({ disabled, invalid, hover, focus, autofocus } satisfies InputRenderPropArg)
+);
+const slot = $derived({ disabled, invalid, hover, focus, autofocus });
 </script>
 
 <ElementOrComponent {ourProps} {theirProps} {slot} defaultTag={DEFAULT_INPUT_TAG} name="Input" bind:ref bind:value />

package/dist/internal/FocusSentinel.svelte

@@ -1,19 +1,11 @@
-<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 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>
 
 {#if enabled}

package/dist/internal/ForcePortalRoot.svelte

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

package/dist/internal/FormFields.svelte

@@ -1,34 +1,23 @@
-<script lang="ts">
-  import { disposables } from "../utils/disposables.js"
-  import { objectToFormEntries } from "../utils/form.js"
-  import FormResolver from "./FormResolver.svelte"
-  import HoistFormFields from "./HoistFormFields.svelte"
-  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)
-  })
+<script lang="ts">import { disposables } from "../utils/disposables.js";
+import { objectToFormEntries } from "../utils/form.js";
+import FormResolver from "./FormResolver.svelte";
+import HoistFormFields from "./HoistFormFields.svelte";
+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);
+});
 </script>
 
 <HoistFormFields>

package/dist/internal/FormResolver.svelte

@@ -1,23 +1,18 @@
-<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<HTMLInputElement>()
-
-  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 } = $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>
 
 {#if !formId}

package/dist/internal/Hidden.svelte

@@ -1,49 +1,28 @@
-<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 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>
 
-<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_VISUALLY_HIDDEN_TAG">
-  let { ref = $bindable(), 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 lang="ts" generics="TTag extends ElementType = typeof DEFAULT_VISUALLY_HIDDEN_TAG">let { ref = $bindable(), 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>
 
 <ElementOrComponent {ourProps} {theirProps} defaultTag={DEFAULT_VISUALLY_HIDDEN_TAG} name="Hidden" bind:ref />

package/dist/internal/HoistFormFields.svelte

@@ -1,10 +1,7 @@
-<script lang="ts">
-  import { getContext, type Snippet } from "svelte"
-  import Portal from "./Portal.svelte"
-
-  let { children }: { children: Snippet } = $props()
-
-  const formFieldsContext = getContext<{ target?: HTMLElement }>("FormFieldsContext")
+<script lang="ts">import { getContext } from "svelte";
+import Portal from "./Portal.svelte";
+let { children } = $props();
+const formFieldsContext = getContext("FormFieldsContext");
 </script>
 
 {#if !formFieldsContext}

package/dist/internal/MainTreeProvider.svelte

@@ -1,95 +1,42 @@
-<script lang="ts" module>
-  import { getContext, onMount } from "svelte"
-
-  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
-        },
-      }
-    )
-  }
-</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", {
+<script lang="ts" module>import { getContext, onMount } from "svelte";
+export function useMainTreeNode(options = {}) {
+  const { fallbackMainTreeNode = null } = $derived(options);
+  return getContext("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
+      return fallbackMainTreeNode;
+    }
+  };
+}
+</script>
 
-    // 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 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;
+  }
+});
+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>
 
 {#if children}{@render children()}{/if}

package/dist/internal/Portal.svelte

@@ -1,21 +1,17 @@
-<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 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>
 
 <div bind:this={ref}>{@render children()}</div>