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

package/dist/index.d.ts

@@ -13,6 +13,7 @@ export * from "./listbox/index.js";
 export * from "./menu/index.js";
 export * from "./switch/index.js";
 export * from "./tabs/index.js";
+export * from "./textarea/index.js";
 export * from "./transition/index.js";
 export * from "./hooks/use-id.js";
 export * from "./utils/types.js";

package/dist/index.js

@@ -13,6 +13,7 @@ export * from "./listbox/index.js";
 export * from "./menu/index.js";
 export * from "./switch/index.js";
 export * from "./tabs/index.js";
+export * from "./textarea/index.js";
 export * from "./transition/index.js";
 export * from "./hooks/use-id.js";
 export * from "./utils/types.js";

package/dist/input/Input.svelte

@@ -1,59 +1,91 @@
-<script lang="ts" module>const DEFAULT_INPUT_TAG = "input";
-</script>
+<script lang="ts" module>
+  import type { ElementType, Props } 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 "../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}`,
-  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(
+  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
+      id?: string
+      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 "../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}`,
+    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 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/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,23 +1,34 @@
-<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 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>
 
 <HoistFormFields>

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<HTMLInputElement>()
+
+  onMount(() => {
+    if (!element) return
+    const resolvedForm = element.closest("form")
+    if (resolvedForm) setForm(resolvedForm)
+  })
 </script>
 
 {#if !formId}

package/dist/internal/Hidden.svelte

@@ -1,32 +1,49 @@
-<script lang="ts" module>import ElementOrComponent from "../utils/ElementOrComponent.svelte";
-const DEFAULT_VISUALLY_HIDDEN_TAG = "span";
-export var HiddenFeatures = /* @__PURE__ */ ((HiddenFeatures2) => {
-  HiddenFeatures2[HiddenFeatures2["None"] = 1] = "None";
-  HiddenFeatures2[HiddenFeatures2["Focusable"] = 2] = "Focusable";
-  HiddenFeatures2[HiddenFeatures2["Hidden"] = 4] = "Hidden";
-  return HiddenFeatures2;
-})(HiddenFeatures || {});
+<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(), 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(), 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 {ourProps} {theirProps} defaultTag={DEFAULT_VISUALLY_HIDDEN_TAG} name="Hidden" bind:ref />

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

@@ -1,10 +1,7 @@
 import type { ElementType, Props } from "../utils/types.js";
+import { HiddenFeatures } from "./HiddenFeatures.js";
+export * from "./HiddenFeatures.js";
 declare const DEFAULT_VISUALLY_HIDDEN_TAG: "span";
-export declare enum HiddenFeatures {
-    None = 1,
-    Focusable = 2,
-    Hidden = 4
-}
 type HiddenRenderPropArg = {};
 type HiddenPropsWeControl = never;
 export type HiddenProps<TTag extends ElementType = typeof DEFAULT_VISUALLY_HIDDEN_TAG> = Props<TTag, HiddenRenderPropArg, HiddenPropsWeControl, {

package/dist/internal/HiddenFeatures.d.ts

@@ -0,0 +1,5 @@
+export declare enum HiddenFeatures {
+    None = 1,
+    Focusable = 2,
+    Hidden = 4
+}

package/dist/internal/HiddenFeatures.js

@@ -0,0 +1,9 @@
+export var HiddenFeatures;
+(function (HiddenFeatures) {
+    // The default, no features.
+    HiddenFeatures[HiddenFeatures["None"] = 1] = "None";
+    // Whether the element should be focusable or not.
+    HiddenFeatures[HiddenFeatures["Focusable"] = 2] = "Focusable";
+    // Whether it should be completely hidden, even to assistive technologies.
+    HiddenFeatures[HiddenFeatures["Hidden"] = 4] = "Hidden";
+})(HiddenFeatures || (HiddenFeatures = {}));

package/dist/internal/HoistFormFields.svelte

@@ -1,7 +1,10 @@
-<script lang="ts">import { getContext } from "svelte";
-import Portal from "./Portal.svelte";
-let { children } = $props();
-const formFieldsContext = getContext("FormFieldsContext");
+<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>
 
 {#if !formFieldsContext}

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>