@pzerelles/headlessui-svelte 2.1.2-next.3 → 2.1.2-next.5

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/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/switch/Switch.svelte

@@ -1,133 +1,190 @@
-<script lang="ts" module>const DEFAULT_SWITCH_TAG = "button";
-</script>
+<script lang="ts" module>
+  import type { ElementType, Props, PropsOf } from "../utils/types.js"
 
-<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_SWITCH_TAG">import { useId } from "../hooks/use-id.js";
-import { useDisabled } from "../hooks/use-disabled.js";
-import { useProvidedId } from "../internal/id.js";
-import { getContext } from "svelte";
-import { useDisposables } from "../utils/disposables.js";
-import { attemptSubmit } from "../utils/form.js";
-import { useLabelledBy } from "../label/context.svelte.js";
-import { useDescribedBy } from "../description/context.svelte.js";
-import { mergeProps } from "../utils/render.js";
-import { useResolveButtonType } from "../hooks/use-resolve-button-type.svelte.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 FormFields from "../internal/FormFields.svelte";
-import ElementOrComponent from "../utils/ElementOrComponent.svelte";
-const internalId = useId();
-let providedId = useProvidedId();
-let { value: providedDisabled } = $derived(useDisabled());
-let {
-  ref = $bindable(),
-  id: ownId,
-  disabled: ownDisabled,
-  defaultChecked,
-  checked = $bindable(defaultChecked),
-  onchange,
-  name,
-  value,
-  form,
-  autofocus = false,
-  tabIndex,
-  ...theirProps
-} = $props();
-const id = $derived(ownId || providedId || `headlessui-switch-${internalId}`);
-const disabled = $derived(ownDisabled || providedDisabled || false);
-const groupContext = getContext("GroupContext");
-$effect(() => {
-  if (groupContext) groupContext.switchElement = ref ?? null;
-});
-const d = useDisposables();
-let changing = $state(false);
-const toggle = () => {
-  changing = true;
-  checked = !checked;
-  onchange?.(checked);
-  d.nextFrame(() => {
-    changing = false;
-  });
-};
-const handleClick = (event) => {
-  event.preventDefault();
-  toggle();
-};
-const handleKeyUp = (event) => {
-  if (event.key === " ") {
-    event.preventDefault();
-    toggle();
-  } else if (event.key === "Enter") {
-    attemptSubmit(event.currentTarget);
+  const DEFAULT_SWITCH_TAG = "button" as const
+  type SwitchRenderPropArg = {
+    checked: boolean
+    hover: boolean
+    focus: boolean
+    active: boolean
+    autofocus: boolean
+    changing: boolean
+    disabled: boolean
   }
-};
-const handleKeyPress = (event) => event.preventDefault();
-let labelledBy = useLabelledBy();
-let describedBy = useDescribedBy();
-const { isFocusVisible: focus, focusProps } = $derived(
-  useFocusRing({
-    get autofocus() {
-      return autofocus;
-    }
-  })
-);
-const { isHovered: hover, hoverProps } = $derived(
-  useHover({
-    get disabled() {
-      return disabled;
+  type SwitchPropsWeControl = "aria-checked" | "aria-describedby" | "aria-labelledby" | "role"
+
+  export type SwitchProps<TTag extends ElementType = typeof DEFAULT_SWITCH_TAG> = Props<
+    TTag,
+    SwitchRenderPropArg,
+    SwitchPropsWeControl,
+    {
+      checked?: boolean
+      defaultChecked?: boolean
+      onchange?(checked: boolean): void
+      name?: string
+      value?: string
+      form?: string
+      autofocus?: boolean
+      disabled?: boolean
+      tabIndex?: number
     }
+  >
+</script>
+
+<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_SWITCH_TAG">
+  import { useId } from "../hooks/use-id.js"
+  import { useDisabled } from "../hooks/use-disabled.js"
+  import { useProvidedId } from "../internal/id.js"
+  import { getContext, tick } from "svelte"
+  import type { GroupContext } from "./SwitchGroup.svelte"
+  import { attemptSubmit } from "../utils/form.js"
+  import { useLabelledBy } from "../label/context.svelte.js"
+  import { useDescribedBy } from "../description/context.svelte.js"
+  import { mergeProps } from "../utils/render.js"
+  import { useResolveButtonType } from "../hooks/use-resolve-button-type.svelte.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 { useControllable } from "../hooks/use-controllable.svelte.js"
+  import FormFields from "../internal/FormFields.svelte"
+  import ElementOrComponent from "../utils/ElementOrComponent.svelte"
+
+  const internalId = useId()
+  const providedId = useProvidedId()
+  const providedDisabled = useDisabled()
+  let {
+    ref = $bindable(),
+    id = (providedId || `headlessui-switch-${internalId}`) as PropsOf<TTag>["id"],
+    disabled: theirDisabled = false,
+    checked: controlledChecked = $bindable(),
+    defaultChecked: _defaultChecked,
+    onchange: controlledOnChange,
+    name,
+    value,
+    form,
+    autofocus = false,
+    tabIndex,
+    ...theirProps
+  }: { as?: TTag } & SwitchProps<TTag> = $props()
+  const disabled = $derived(providedDisabled?.value ?? theirDisabled)
+  const groupContext = getContext<GroupContext>("GroupContext")
+  $effect(() => {
+    if (groupContext) groupContext.switchElement = ref ?? null
   })
-);
-const { pressed: active, pressProps } = $derived(
-  useActivePress({
-    get disabled() {
-      return disabled;
+
+  const defaultChecked = _defaultChecked
+  const controllable = useControllable(
+    {
+      get controlledValue() {
+        return controlledChecked
+      },
+      set controlledValue(checked) {
+        controlledChecked = checked
+      },
+    },
+    controlledOnChange,
+    defaultChecked ?? false
+  )
+  const { value: checked, onchange } = $derived(controllable)
+
+  let changing = $state(false)
+
+  const toggle = () => {
+    changing = true
+    onchange?.(!checked)
+    tick().then(() => {
+      changing = false
+    })
+  }
+
+  const handleClick = (event: MouseEvent) => {
+    //if (isDisabledReactIssue7711(event.currentTarget)) return event.preventDefault()
+    event.preventDefault()
+    toggle()
+  }
+
+  const handleKeyUp = (event: KeyboardEvent) => {
+    if (event.key === " ") {
+      event.preventDefault()
+      toggle()
+    } else if (event.key === "Enter") {
+      attemptSubmit(event.currentTarget as HTMLElement)
     }
-  })
-);
-const slot = $derived({
-  checked,
-  disabled,
-  hover,
-  focus,
-  active,
-  autofocus,
-  changing
-});
-const buttonType = useResolveButtonType({
-  get props() {
-    return { type: theirProps.type, as: theirProps.as };
-  },
-  get ref() {
-    return { current: ref };
   }
-});
-const ourProps = $derived(
-  mergeProps(
-    {
-      id,
-      role: "switch",
-      type: buttonType.type,
-      tabIndex: tabIndex === -1 ? 0 : tabIndex ?? 0,
-      "aria-checked": checked,
-      "aria-labelledby": labelledBy.value,
-      "aria-describedby": describedBy.value,
-      disabled: disabled || void 0,
-      autofocus,
-      onclick: handleClick,
-      onkeyup: handleKeyUp,
-      onkeypress: handleKeyPress
+
+  // This is needed so that we can "cancel" the click event when we use the `Enter` key on a button.
+  const handleKeyPress = (event: KeyboardEvent) => event.preventDefault()
+
+  let labelledBy = useLabelledBy()
+  let 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 slot = $derived({
+    checked,
+    disabled,
+    hover,
+    focus,
+    active,
+    autofocus,
+    changing,
+  } satisfies SwitchRenderPropArg)
+
+  const buttonType = useResolveButtonType({
+    get props() {
+      return { type: theirProps.type, as: theirProps.as }
+    },
+    get ref() {
+      return { current: ref }
     },
-    focusProps,
-    hoverProps,
-    pressProps
+  })
+
+  const ourProps = $derived(
+    mergeProps(
+      {
+        id,
+        role: "switch",
+        type: buttonType.type,
+        tabIndex: tabIndex === -1 ? 0 : (tabIndex ?? 0),
+        "aria-checked": checked,
+        "aria-labelledby": labelledBy.value,
+        "aria-describedby": describedBy.value,
+        disabled: disabled || undefined,
+        autofocus,
+        onclick: handleClick,
+        onkeyup: handleKeyUp,
+        onkeypress: handleKeyPress,
+      },
+      focusProps,
+      hoverProps,
+      pressProps
+    )
   )
-);
-const reset = () => {
-  if (defaultChecked === void 0) return;
-  checked = defaultChecked;
-  return onchange?.(checked);
-};
+
+  const reset = $derived(() => {
+    if (defaultChecked === undefined) return
+    return onchange?.(defaultChecked)
+  })
 </script>
 
 {#if name}

package/dist/switch/Switch.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { ElementType, Props } from "../utils/types.js";
+import type { ElementType, Props, PropsOf } from "../utils/types.js";
 declare const DEFAULT_SWITCH_TAG: "button";
 type SwitchRenderPropArg = {
     checked: boolean;
@@ -24,11 +24,11 @@ export type SwitchProps<TTag extends ElementType = typeof DEFAULT_SWITCH_TAG> =
 declare class __sveltets_Render<TTag extends ElementType = typeof DEFAULT_SWITCH_TAG> {
     props(): {
         as?: TTag | undefined;
-    } & (Exclude<keyof import("../utils/types.js").PropsOf<TTag>, "form" | ("as" | "children" | "refName" | "class") | "disabled" | "autofocus" | "name" | "value" | "checked" | "onchange" | "tabIndex" | "defaultChecked" | SwitchPropsWeControl> extends infer T extends keyof import("../utils/types.js").PropsOf<TTag> ? { [P in T]: import("../utils/types.js").PropsOf<TTag>[P]; } : never) & {
+    } & (Exclude<keyof PropsOf<TTag>, "form" | ("as" | "children" | "refName" | "class") | "disabled" | "autofocus" | "name" | "value" | "checked" | "onchange" | "tabIndex" | "defaultChecked" | SwitchPropsWeControl> extends infer T extends keyof PropsOf<TTag> ? { [P in T]: PropsOf<TTag>[P]; } : never) & {
         children?: import("../utils/types.js").Children<SwitchRenderPropArg> | undefined;
         ref?: HTMLElement;
-    } & (true extends (import("../utils/types.js").PropsOf<TTag> extends infer T_1 ? T_1 extends import("../utils/types.js").PropsOf<TTag> ? T_1 extends never ? never : "class" extends infer T_2 ? T_2 extends "class" ? T_2 extends keyof T_1 ? true : never : never : never : never : never) ? {
-        class?: import("../utils/types.js").PropsOf<TTag>["class"] | ((bag: SwitchRenderPropArg) => string) | undefined;
+    } & (true extends (PropsOf<TTag> extends infer T_1 ? T_1 extends PropsOf<TTag> ? T_1 extends never ? never : "class" extends infer T_2 ? T_2 extends "class" ? T_2 extends keyof T_1 ? true : never : never : never : never : never) ? {
+        class?: PropsOf<TTag>["class"] | ((bag: SwitchRenderPropArg) => string) | undefined;
     } : {}) & {
         checked?: boolean;
         defaultChecked?: boolean;