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

package/dist/portal/InternalPortal.svelte

@@ -1,95 +1,151 @@
-<script lang="ts" module>import { usePortalRoot } from "../internal/portal-force-root.svelte.js";
-import { getOwnerDocument } from "../utils/owner.js";
-import { getContext, onMount, setContext } from "svelte";
-import { env } from "../utils/env.js";
-function usePortalTarget(options) {
-  const { element } = $derived(options);
-  const forceInRoot = usePortalRoot();
-  const portalGroupContext = getContext("PortalGroupContext");
-  const { target: groupTarget } = $derived(portalGroupContext ?? {});
-  const ownerDocument = $derived(getOwnerDocument(element));
-  const initialTarget = () => {
-    if (!forceInRoot?.force && groupTarget) return groupTarget ?? null;
-    if (env.isServer) return null;
-    let existingRoot = ownerDocument?.getElementById("headlessui-portal-root");
-    if (existingRoot) return existingRoot;
-    if (ownerDocument === null) return null;
-    let root = ownerDocument.createElement("div");
-    root.setAttribute("id", "headlessui-portal-root");
-    return ownerDocument.body.appendChild(root);
-  };
-  let target = $state(initialTarget());
-  $effect(() => {
-    if (!target) return;
-    if (!ownerDocument?.body.contains(target)) {
-      ownerDocument?.body.appendChild(target);
-    }
-  });
-  $effect(() => {
-    if (forceInRoot?.force) return;
-    if (!groupTarget) return;
-    target = groupTarget;
-  });
-  return {
-    get target() {
-      return target;
+<script lang="ts" module>
+  import { usePortalRoot } from "../internal/portal-force-root.svelte.js"
+  import { getOwnerDocument } from "../utils/owner.js"
+  import { getContext, onMount, setContext } from "svelte"
+  import { env } from "../utils/env.js"
+  import type { ElementType, Props } from "../utils/types.js"
+  import type { PortalGroupContext } from "./PortalGroup.svelte"
+
+  function usePortalTarget(options: { element: HTMLElement | null }): { readonly target: HTMLElement | null } {
+    const { element } = $derived(options)
+    const forceInRoot = usePortalRoot()
+    const portalGroupContext = getContext<PortalGroupContext>("PortalGroupContext")
+    const { target: groupTarget } = $derived(portalGroupContext ?? {})
+
+    const ownerDocument = $derived(getOwnerDocument(element))
+
+    const initialTarget = () => {
+      // Group context is used, but still null
+      if (!forceInRoot?.force && groupTarget) return groupTarget ?? null
+
+      // No group context is used, let's create a default portal root
+      if (env.isServer) return null
+      let existingRoot = ownerDocument?.getElementById("headlessui-portal-root")
+      if (existingRoot) return existingRoot
+
+      if (ownerDocument === null) return null
+
+      let root = ownerDocument.createElement("div")
+      root.setAttribute("id", "headlessui-portal-root")
+      return ownerDocument.body.appendChild(root)
     }
-  };
-}
-export function useNestedPortals() {
-  const parent = getContext("PortalParentContext");
-  const portals = $state([]);
-  const register = (portal) => {
-    portals.push(portal);
-    if (parent) parent.register(portal);
-    return () => unregister(portal);
-  };
-  const unregister = (portal) => {
-    let idx = portals.indexOf(portal);
-    if (idx !== -1) portals.splice(idx, 1);
-    if (parent) parent.unregister(portal);
-  };
-  const context = {
-    register,
-    unregister,
-    get portals() {
-      return portals;
+
+    let target = $state(initialTarget())
+
+    // Ensure the portal root is always in the DOM
+    $effect(() => {
+      if (!target) return
+
+      if (!ownerDocument?.body.contains(target)) {
+        ownerDocument?.body.appendChild(target)
+      }
+    })
+
+    $effect(() => {
+      if (forceInRoot?.force) return
+      if (!groupTarget) return
+      target = groupTarget
+    })
+
+    return {
+      get target() {
+        return target
+      },
     }
-  };
-  setContext("PortalParentContext", context);
-  return context;
-}
-export const DEFAULT_PORTAL_TAG = "div";
-</script>
+  }
+
+  // ---
 
-<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_PORTAL_TAG">import ElementOrComponent from "../utils/ElementOrComponent.svelte";
-let { ref = $bindable(), ...theirProps } = $props();
-const portalTarget = usePortalTarget({
-  get element() {
-    return ref ?? null;
+  type PortalParentContext = {
+    register: (portal: HTMLElement) => () => void
+    unregister: (portal: HTMLElement) => void
+    readonly portals: HTMLElement[]
   }
-});
-const { target } = $derived(portalTarget);
-const parent = getContext("PortalParentContext");
-$effect(() => {
-  if (!target || !ref) return;
-  if (ref.parentNode !== target) {
-    ref.setAttribute("data-headlessui-portal", "");
-    target.appendChild(ref);
+
+  export function useNestedPortals() {
+    const parent = getContext<PortalParentContext>("PortalParentContext")
+    const portals = $state<HTMLElement[]>([])
+
+    const register = (portal: HTMLElement) => {
+      portals.push(portal)
+      if (parent) parent.register(portal)
+      return () => unregister(portal)
+    }
+
+    const unregister = (portal: HTMLElement) => {
+      let idx = portals.indexOf(portal)
+      if (idx !== -1) portals.splice(idx, 1)
+      if (parent) parent.unregister(portal)
+    }
+
+    const context: PortalParentContext = {
+      register,
+      unregister,
+      get portals() {
+        return portals
+      },
+    }
+    setContext("PortalParentContext", context)
+
+    return context
   }
-});
-onMount(() => {
-  if (parent) parent.register(ref);
-  return () => {
-    if (!target || !ref) return;
-    if (ref instanceof Node && target.contains(ref)) {
-      target.removeChild(ref);
+
+  // ---
+
+  export const DEFAULT_PORTAL_TAG = "div"
+  type PortalRenderPropArg = {}
+  type PortalPropsWeControl = never
+
+  export type PortalProps<TTag extends ElementType = typeof DEFAULT_PORTAL_TAG> = Props<
+    TTag,
+    PortalRenderPropArg,
+    PortalPropsWeControl,
+    {
+      enabled?: boolean
+    }
+  >
+</script>
+
+<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_PORTAL_TAG">
+  import ElementOrComponent from "../utils/ElementOrComponent.svelte"
+
+  let { ref = $bindable(), ...theirProps }: { as?: TTag } & PortalProps<TTag> = $props()
+
+  const portalTarget = usePortalTarget({
+    get element() {
+      return ref ?? null
+    },
+  })
+  const { target } = $derived(portalTarget)
+  const parent = getContext<PortalParentContext>("PortalParentContext")
+  //const ready = useServerHandoffComplete()
+
+  $effect(() => {
+    if (!target || !ref) return
+
+    // Element already exists in target, always calling target.appendChild(element) will cause a
+    // brief unmount/remount.
+    if (ref.parentNode !== target) {
+      ref.setAttribute("data-headlessui-portal", "")
+      target.appendChild(ref)
     }
-    if (target.childNodes.length <= 0) {
-      target.parentElement?.removeChild(target);
+  })
+
+  onMount(() => {
+    if (parent) parent.register(ref!)
+
+    return () => {
+      if (!target || !ref) return
+
+      if (ref instanceof Node && target.contains(ref)) {
+        target.removeChild(ref)
+      }
+
+      if (target.childNodes.length <= 0) {
+        target.parentElement?.removeChild(target)
+      }
     }
-  };
-});
+  })
 </script>
 
 {#if target}

package/dist/portal/InternalPortal.svelte.d.ts

@@ -16,8 +16,7 @@ declare class __sveltets_Render<TTag extends ElementType = typeof DEFAULT_PORTAL
         as?: TTag | undefined;
     } & (Exclude<keyof import("../utils/types.js").PropsOf<TTag>, ("slot" | "as" | "children" | "class" | "ref") | "enabled"> 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: PortalRenderPropArg;
-            props: Record<string, any>;
+            props?: Record<string, any>;
         }]> | undefined;
         class?: string | ((bag: PortalRenderPropArg) => string) | null | undefined;
         ref?: HTMLElement;

package/dist/portal/Portal.svelte

@@ -1,5 +1,8 @@
-<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_PORTAL_TAG">import InternalPortal, { DEFAULT_PORTAL_TAG } from "./InternalPortal.svelte";
-let { ref = $bindable(), enabled = true, ...theirProps } = $props();
+<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_PORTAL_TAG">
+  import type { ElementType } from "../utils/types.js"
+  import InternalPortal, { DEFAULT_PORTAL_TAG, type PortalProps } from "./InternalPortal.svelte"
+
+  let { ref = $bindable(), enabled = true, ...theirProps }: PortalProps<TTag> = $props()
 </script>
 
 {#if enabled}

package/dist/portal/PortalGroup.svelte

@@ -1,14 +1,35 @@
-<script lang="ts" module>const DEFAULT_GROUP_TAG = "svelte:fragment";
-</script>
+<script lang="ts" module>
+  import type { ElementType, Props } from "../utils/types.js"
+
+  const DEFAULT_GROUP_TAG = "svelte:fragment"
+  type GroupRenderPropArg = {}
+  type GroupPropsWeControl = never
 
-<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_GROUP_TAG">import ElementOrComponent from "../utils/ElementOrComponent.svelte";
-import { setContext } from "svelte";
-let { ref = $bindable(), target, ...theirProps } = $props();
-setContext("PortalGroupContext", {
-  get target() {
-    return target;
+  export type PortalGroupContext = {
+    readonly target: HTMLElement | null
   }
-});
+
+  export type PortalGroupProps<TTag extends ElementType = typeof DEFAULT_GROUP_TAG> = Props<
+    TTag,
+    GroupRenderPropArg,
+    GroupPropsWeControl,
+    {
+      target: HTMLElement | null
+    }
+  >
+</script>
+
+<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_GROUP_TAG">
+  import ElementOrComponent from "../utils/ElementOrComponent.svelte"
+  import { setContext } from "svelte"
+
+  let { ref = $bindable(), target, ...theirProps }: { as?: TTag } & PortalGroupProps<TTag> = $props()
+
+  setContext("PortalGroupContext", {
+    get target() {
+      return target
+    },
+  })
 </script>
 
 <ElementOrComponent {theirProps} defaultTag={DEFAULT_GROUP_TAG} name="PortalGroup" bind:ref />

package/dist/portal/PortalGroup.svelte.d.ts

@@ -13,8 +13,7 @@ declare class __sveltets_Render<TTag extends ElementType = typeof DEFAULT_GROUP_
         as?: TTag | undefined;
     } & (Exclude<keyof import("../utils/types.js").PropsOf<TTag>, ("slot" | "as" | "children" | "class" | "ref") | "target"> 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: GroupRenderPropArg;
-            props: Record<string, any>;
+            props?: Record<string, any>;
         }]> | undefined;
         class?: string | ((bag: GroupRenderPropArg) => string) | null | undefined;
         ref?: HTMLElement;

package/dist/select/Select.svelte

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

package/dist/select/Select.svelte.d.ts

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