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

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

@@ -1,190 +1,143 @@
-<script lang="ts" module>
-  import type { ElementType, Props, PropsOf } from "../utils/types.js"
-
-  const DEFAULT_SWITCH_TAG = "button" as const
-  type SwitchRenderPropArg = {
-    checked: boolean
-    hover: boolean
-    focus: boolean
-    active: boolean
-    autofocus: boolean
-    changing: boolean
-    disabled: boolean
-  }
-  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 lang="ts" module>const DEFAULT_SWITCH_TAG = "button";
 </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 defaultChecked = _defaultChecked
-  const controllable = useControllable(
-    {
-      get controlledValue() {
-        return controlledChecked
-      },
-      set controlledValue(checked) {
-        controlledChecked = checked
-      },
+<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 "../utils/id.js";
+import { getContext, tick } from "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}`,
+  disabled: theirDisabled = false,
+  checked: controlledChecked = $bindable(),
+  defaultChecked: _defaultChecked,
+  onchange: controlledOnChange,
+  name,
+  value,
+  form,
+  autofocus = false,
+  tabIndex,
+  ...theirProps
+} = $props();
+const disabled = $derived(providedDisabled?.value ?? theirDisabled);
+const groupContext = getContext("GroupContext");
+$effect(() => {
+  if (groupContext) groupContext.switchElement = ref ?? null;
+});
+const defaultChecked = _defaultChecked;
+const controllable = useControllable(
+  {
+    get controlledValue() {
+      return controlledChecked;
     },
-    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()
+    set controlledValue(checked2) {
+      controlledChecked = checked2;
+    }
+  },
+  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) => {
+  event.preventDefault();
+  toggle();
+};
+const handleKeyUp = (event) => {
+  if (event.key === " ") {
+    event.preventDefault();
+    toggle();
+  } else if (event.key === "Enter") {
+    attemptSubmit(event.currentTarget);
   }
-
-  const handleKeyUp = (event: KeyboardEvent) => {
-    if (event.key === " ") {
-      event.preventDefault()
-      toggle()
-    } else if (event.key === "Enter") {
-      attemptSubmit(event.currentTarget as HTMLElement)
+};
+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;
     }
+  })
+);
+const { pressed: active, pressProps } = $derived(
+  useActivePress({
+    get disabled() {
+      return disabled;
+    }
+  })
+);
+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 };
   }
-
-  // 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 }
+});
+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
     },
-  })
-
-  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
-    )
+    focusProps,
+    hoverProps,
+    pressProps
   )
-
-  const reset = $derived(() => {
-    if (defaultChecked === undefined) return
-    return onchange?.(defaultChecked)
-  })
+);
+const reset = $derived(() => {
+  if (defaultChecked === void 0) return;
+  return onchange?.(defaultChecked);
+});
 </script>
 
 {#if name}