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

package/dist/portal/InternalPortal.svelte

@@ -1,151 +1,95 @@
-<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)
-    }
-
-    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
-      },
-    }
-  }
-
-  // ---
-
-  type PortalParentContext = {
-    register: (portal: HTMLElement) => () => void
-    unregister: (portal: HTMLElement) => void
-    readonly portals: HTMLElement[]
-  }
-
-  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)
+<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);
     }
-
-    const context: PortalParentContext = {
-      register,
-      unregister,
-      get portals() {
-        return portals
-      },
+  });
+  $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"
-  type PortalRenderPropArg = {}
-  type PortalPropsWeControl = never
-
-  export type PortalProps<TTag extends ElementType = typeof DEFAULT_PORTAL_TAG> = Props<
-    TTag,
-    PortalRenderPropArg,
-    PortalPropsWeControl,
-    {
-      enabled?: boolean
+  };
+}
+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;
     }
-  >
+  };
+  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 }: { 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)
+<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;
+  }
+});
+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);
+  }
+});
+onMount(() => {
+  if (parent) parent.register(ref);
+  return () => {
+    if (!target || !ref) return;
+    if (ref instanceof Node && target.contains(ref)) {
+      target.removeChild(ref);
     }
-  })
-
-  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)
-      }
+    if (target.childNodes.length <= 0) {
+      target.parentElement?.removeChild(target);
     }
-  })
+  };
+});
 </script>
 
 {#if target}

package/dist/portal/Portal.svelte

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

package/dist/portal/PortalGroup.svelte

@@ -1,35 +1,14 @@
-<script lang="ts" module>
-  import type { ElementType, Props } from "../utils/types.js"
-
-  const DEFAULT_GROUP_TAG = "svelte:fragment"
-  type GroupRenderPropArg = {}
-  type GroupPropsWeControl = never
-
-  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 lang="ts" module>const DEFAULT_GROUP_TAG = "svelte:fragment";
 </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 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;
+  }
+});
 </script>
 
 <ElementOrComponent {theirProps} defaultTag={DEFAULT_GROUP_TAG} name="PortalGroup" bind:ref />

package/dist/select/Select.svelte

@@ -1,104 +1,74 @@
-<script lang="ts" module>
-  import type { ElementType, Props, PropsOf } from "../utils/types.js"
-
-  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,
-    {
-      disabled?: boolean
-      invalid?: boolean
-      autofocus?: boolean
-    }
-  >
+<script lang="ts" module>let DEFAULT_SELECT_TAG = "select";
 </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 { 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
-    )
+<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(
+    {
+      id,
+      "aria-labelledby": labelledBy.value,
+      "aria-describedby": describedBy.value,
+      "aria-invalid": invalid ? "" : void 0,
+      disabled: disabled || void 0,
+      autofocus
+    },
+    focusProps,
+    hoverProps,
+    pressProps
   )
-
-  const slot = $derived({
-    disabled,
-    invalid,
-    hover,
-    focus,
-    active,
-    autofocus,
-  } satisfies SelectRenderPropArg)
+);
+const slot = $derived({
+  disabled,
+  invalid,
+  hover,
+  focus,
+  active,
+  autofocus
+});
 </script>
 
 <ElementOrComponent {ourProps} {theirProps} {slot} defaultTag={DEFAULT_SELECT_TAG} name="Select" bind:ref />