@pzerelles/headlessui-svelte 2.1.2-next.22 → 2.1.2-next.24

package/dist/popover/PopoverBackdrop.svelte

@@ -1,47 +1,73 @@
-<script lang="ts" module>import { RenderFeatures } from "../utils/render.js";
-let DEFAULT_BACKDROP_TAG = "div";
-const BackdropRenderFeatures = RenderFeatures.RenderStrategy | RenderFeatures.Static;
+<script lang="ts" module>
+  import type { ElementType, Props, PropsOf } from "../utils/types.js"
+  import { RenderFeatures, type PropsForFeatures } from "../utils/render.js"
+
+  let DEFAULT_BACKDROP_TAG = "div" as const
+  type BackdropRenderPropArg = {
+    open: boolean
+  }
+  type BackdropPropsWeControl = "aria-hidden"
+
+  const BackdropRenderFeatures = RenderFeatures.RenderStrategy | RenderFeatures.Static
+
+  export type PopoverBackdropProps<TTag extends ElementType = typeof DEFAULT_BACKDROP_TAG> = Props<
+    TTag,
+    BackdropRenderPropArg,
+    BackdropPropsWeControl,
+    { transition?: boolean } & PropsForFeatures<typeof BackdropRenderFeatures>
+  >
+
+  export type PopoverOverlayProps<TTag extends ElementType = typeof DEFAULT_BACKDROP_TAG> = PopoverBackdropProps<TTag>
 </script>
 
-<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_BACKDROP_TAG">import ElementOrComponent from "../utils/ElementOrComponent.svelte";
-import { useId } from "../hooks/use-id.js";
-import { PopoverStates, usePopoverContext } from "./context.svelte.js";
-import { State, useOpenClosed } from "../internal/open-closed.js";
-import { transitionDataAttributes, useTransition } from "../hooks/use-transition.svelte.js";
-const internalId = useId();
-let {
-  ref = $bindable(),
-  id = `headlessui-popover-backdrop-${internalId}`,
-  transition = false,
-  ...theirProps
-} = $props();
-const context = usePopoverContext("PopoverBackdrop");
-const { popoverState } = $derived(context);
-const usesOpenClosedState = useOpenClosed();
-const _transition = useTransition({
-  get enabled() {
-    return transition;
-  },
-  get element() {
-    return ref;
-  },
-  get show() {
-    return usesOpenClosedState !== null ? (usesOpenClosedState.value & State.Open) === State.Open : popoverState === PopoverStates.Open;
+<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_BACKDROP_TAG">
+  import ElementOrComponent from "../utils/ElementOrComponent.svelte"
+  import { useId } from "../hooks/use-id.js"
+  import { PopoverStates, usePopoverContext } from "./context.svelte.js"
+  import { State, useOpenClosed } from "../internal/open-closed.js"
+  import { transitionDataAttributes, useTransition } from "../hooks/use-transition.svelte.js"
+
+  const internalId = useId()
+  let {
+    ref = $bindable(),
+    id = `headlessui-popover-backdrop-${internalId}` as PropsOf<TTag>["id"],
+    transition = false,
+    ...theirProps
+  }: { as?: TTag } & PopoverBackdropProps<TTag> = $props()
+  const context = usePopoverContext("PopoverBackdrop")
+  const { popoverState } = $derived(context)
+
+  const usesOpenClosedState = useOpenClosed()
+  const _transition = useTransition({
+    get enabled() {
+      return transition
+    },
+    get element() {
+      return ref
+    },
+    get show() {
+      return usesOpenClosedState !== null
+        ? (usesOpenClosedState.value & State.Open) === State.Open
+        : popoverState === PopoverStates.Open
+    },
+  })
+  const { visible, data: transitionData } = $derived(_transition)
+
+  const handleClick = (event: MouseEvent) => {
+    //if (isDisabledReactIssue7711(event.currentTarget)) return event.preventDefault()
+    context.closePopover()
   }
-});
-const { visible, data: transitionData } = $derived(_transition);
-const handleClick = (event) => {
-  context.closePopover();
-};
-const slot = $derived({
-  open: popoverState === PopoverStates.Open
-});
-const ourProps = $derived({
-  id,
-  "aria-hidden": true,
-  onclick: handleClick,
-  ...transitionDataAttributes(transitionData)
-});
+
+  const slot = $derived({
+    open: popoverState === PopoverStates.Open,
+  } satisfies BackdropRenderPropArg)
+
+  const ourProps = $derived({
+    id,
+    "aria-hidden": true,
+    onclick: handleClick,
+    ...transitionDataAttributes(transitionData),
+  })
 </script>
 
 <ElementOrComponent

package/dist/popover/PopoverBackdrop.svelte.d.ts

@@ -13,11 +13,14 @@ export type PopoverOverlayProps<TTag extends ElementType = typeof DEFAULT_BACKDR
 declare class __sveltets_Render<TTag extends ElementType = typeof DEFAULT_BACKDROP_TAG> {
     props(): {
         as?: TTag | undefined;
-    } & (Exclude<keyof PropsOf<TTag>, ("as" | "children" | "refName" | "class") | "unmount" | "static" | "aria-hidden" | "transition"> extends infer T extends keyof PropsOf<TTag> ? { [P in T]: PropsOf<TTag>[P]; } : never) & {
-        children?: import("svelte").Snippet<[BackdropRenderPropArg, Record<string, any>]> | undefined;
+    } & (Exclude<keyof PropsOf<TTag>, ("as" | "children" | "class") | "unmount" | "static" | "aria-hidden" | "transition"> extends infer T extends keyof PropsOf<TTag> ? { [P in T]: PropsOf<TTag>[P]; } : never) & {
+        children?: import("svelte").Snippet<[{
+            slot: BackdropRenderPropArg;
+            props: Record<string, any>;
+        }]> | undefined;
         ref?: HTMLElement;
-    } & (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: BackdropRenderPropArg) => string) | undefined;
+    } & (true extends (import("svelte/elements.js").SvelteHTMLElements[TTag] extends infer T_1 ? T_1 extends import("svelte/elements.js").SvelteHTMLElements[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?: string | ((bag: BackdropRenderPropArg) => string) | null | undefined;
     } : {}) & {
         transition?: boolean;
     } & {

package/dist/popover/PopoverButton.svelte

@@ -1,228 +1,308 @@
-<script lang="ts" module>const DEFAULT_BUTTON_TAG = "button";
+<script lang="ts" module>
+  import type { ElementType, Props, PropsOf } from "../utils/types.js"
+
+  const DEFAULT_BUTTON_TAG = "button" as const
+  export type PopoverButtonSlot = {
+    open: boolean
+    active: boolean
+    hover: boolean
+    focus: boolean
+    disabled: boolean
+    autofocus: boolean
+  }
+  export type PopoverButtonPropsWeControl = "aria-controls" | "aria-expanded"
+
+  export type PopoverButtonComponentProps = {
+    disabled?: boolean
+    autofocus?: boolean
+  }
+
+  export type PopoverButtonProps<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG> = Props<
+    TTag,
+    PopoverButtonSlot,
+    PopoverButtonPropsWeControl,
+    PopoverButtonComponentProps
+  >
 </script>
 
-<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_BUTTON_TAG">import { useId } from "../hooks/use-id.js";
-import {
-  PopoverStates,
-  usePopoverAPIContext,
-  usePopoverContext,
-  usePopoverGroupContext,
-  usePopoverPanelContext
-} from "./context.svelte.js";
-import { useFloatingReference } from "../internal/floating.svelte.js";
-import { untrack } from "svelte";
-import { getOwnerDocument } from "../utils/owner.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 { useResolveButtonType } from "../hooks/use-resolve-button-type.svelte.js";
-import { mergeProps } from "../utils/render.js";
-import { useTabDirection, Direction as TabDirection } from "../hooks/use-tab-direction.svelte.js";
-import { match } from "../utils/match.js";
-import { Focus, focusIn, FocusResult, getFocusableElements } from "../utils/focus-management.js";
-import { microTask } from "../utils/microTask.js";
-import Hidden, { HiddenFeatures } from "../internal/Hidden.svelte";
-import ElementOrComponent from "../utils/ElementOrComponent.svelte";
-const internalId = useId();
-let {
-  ref = $bindable(),
-  id = `headlessui-popover-button-${internalId}`,
-  disabled = false,
-  autofocus = false,
-  ...theirProps
-} = $props();
-const context = usePopoverContext("PopoverButton");
-const api = usePopoverAPIContext("PopoverButton");
-const { isPortalled } = $derived(api);
-const sentinelId = `headlessui-focus-sentinel-${useId()}`;
-const groupContext = usePopoverGroupContext();
-const closeOthers = $derived(groupContext?.closeOthers);
-const panelContext = usePopoverPanelContext();
-const isWithinPanel = panelContext !== void 0;
-$effect(() => {
-  if (isWithinPanel) return;
-  id;
-  return untrack(() => {
-    context.setButtonId(id);
-    return () => {
-      context.setButtonId(void 0);
-    };
-  });
-});
-const uniqueIdentifier = Symbol();
-const floatingReference = useFloatingReference();
-const { setReference } = $derived(floatingReference);
-$effect(() => {
-  setReference(ref);
-});
-$effect(() => {
-  if (isWithinPanel) return;
-  ref;
-  untrack(() => {
-    if (ref) {
-      context.buttons.push(uniqueIdentifier);
+<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_BUTTON_TAG">
+  import { useId } from "../hooks/use-id.js"
+  import {
+    PopoverStates,
+    usePopoverAPIContext,
+    usePopoverContext,
+    usePopoverGroupContext,
+    usePopoverPanelContext,
+  } from "./context.svelte.js"
+  import { useFloatingReference } from "../internal/floating.svelte.js"
+  import { untrack } from "svelte"
+  import { getOwnerDocument } from "../utils/owner.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 { useResolveButtonType } from "../hooks/use-resolve-button-type.svelte.js"
+  import { mergeProps } from "../utils/render.js"
+  import { useTabDirection, Direction as TabDirection } from "../hooks/use-tab-direction.svelte.js"
+  import { match } from "../utils/match.js"
+  import { Focus, focusIn, FocusResult, getFocusableElements } from "../utils/focus-management.js"
+  import { microTask } from "../utils/microTask.js"
+  import Hidden, { HiddenFeatures } from "../internal/Hidden.svelte"
+  import ElementOrComponent from "../utils/ElementOrComponent.svelte"
+  import type { FocusEventHandler } from "svelte/elements"
+
+  const internalId = useId()
+  let {
+    ref = $bindable(),
+    id = `headlessui-popover-button-${internalId}` as PropsOf<TTag>["id"],
+    disabled = false,
+    autofocus = false as PropsOf<TTag>["autofocus"],
+    ...theirProps
+  }: { as?: TTag } & PopoverButtonProps<TTag> = $props()
+  const context = usePopoverContext("PopoverButton")
+  const api = usePopoverAPIContext("PopoverButton")
+  const { isPortalled } = $derived(api)
+
+  const sentinelId = `headlessui-focus-sentinel-${useId()}`
+
+  const groupContext = usePopoverGroupContext()
+  const closeOthers = $derived(groupContext?.closeOthers)
+
+  const panelContext = usePopoverPanelContext()
+
+  // A button inside a panel will just have "close" functionality, no "open" functionality. However,
+  // if a `PopoverButton` is rendered inside a `Popover` which in turn is rendered inside a
+  // `PopoverPanel` (aka nested popovers), then we need to make sure that the button is able to
+  // open the nested popover.
+  //
+  // The `Popover` itself will also render a `PopoverPanelContext` but with a value of `null`. That
+  // way we don't need to keep track of _which_ `PopoverPanel` (if at all) we are in, we can just
+  // check if we are in a `PopoverPanel` or not since this will always point to the nearest one and
+  // won't pierce through `Popover` components themselves.
+  const isWithinPanel = panelContext !== undefined
+
+  $effect(() => {
+    // [isWithinPanel, id, dispatch]
+    if (isWithinPanel) return
+    id
+    return untrack(() => {
+      context.setButtonId(id)
+      return () => {
+        context.setButtonId(undefined)
+      }
+    })
+  })
+
+  // This is a little bit different compared to the `id` we already have. The goal is to have a very
+  // unique identifier for this specific component. This can be achieved with the `id` from above.
+  //
+  // However, the difference is for React 17 and lower where the `useId` hook doesn't exist yet.
+  // There we will generate a unique ID based on a simple counter, but for SSR this will result in
+  // `undefined` first, later it is patched to be a unique ID. The problem is that this patching
+  // happens after the component is rendered and therefore there is a moment in time where multiple
+  // buttons have the exact same ID and the `state.buttons` would result in something like:
+  //
+  // ```js
+  // ['headlessui-popover-button-undefined', 'headlessui-popover-button-1']
+  // ```
+  //
+  // With this approach we guarantee that there is a unique value for each button.
+  const uniqueIdentifier = Symbol()
+
+  const floatingReference = useFloatingReference()
+  const { setReference } = $derived(floatingReference)
+  $effect(() => {
+    setReference(ref)
+  })
+  $effect(() => {
+    if (isWithinPanel) return
+    ref
+    untrack(() => {
+      if (ref) {
+        context.buttons.push(uniqueIdentifier)
+      } else {
+        let idx = context.buttons.indexOf(uniqueIdentifier)
+        if (idx !== -1) context.buttons.splice(idx, 1)
+      }
+
+      if (context.buttons.length > 1) {
+        console.warn("You are already using a <PopoverButton /> but only 1 <PopoverButton /> is supported.")
+      }
+
+      if (ref) context.setButton(ref)
+    })
+  })
+  const ownerDocument = $derived(getOwnerDocument(ref))
+
+  const handleKeyDown = (event: KeyboardEvent) => {
+    if (isWithinPanel) {
+      if (context.popoverState === PopoverStates.Closed) return
+      switch (event.key) {
+        case "Space":
+        case "Enter":
+          event.preventDefault() // Prevent triggering a *click* event
+          // @ts-expect-error
+          event.target.click?.()
+          context.closePopover()
+          context.button?.focus() // Re-focus the original opening Button
+          break
+      }
     } else {
-      let idx = context.buttons.indexOf(uniqueIdentifier);
-      if (idx !== -1) context.buttons.splice(idx, 1);
-    }
-    if (context.buttons.length > 1) {
-      console.warn("You are already using a <PopoverButton /> but only 1 <PopoverButton /> is supported.");
-    }
-    if (ref) context.setButton(ref);
-  });
-});
-const ownerDocument = $derived(getOwnerDocument(ref));
-const handleKeyDown = (event) => {
-  if (isWithinPanel) {
-    if (context.popoverState === PopoverStates.Closed) return;
-    switch (event.key) {
-      case "Space":
-      case "Enter":
-        event.preventDefault();
-        event.target.click?.();
-        context.closePopover();
-        context.button?.focus();
-        break;
-    }
-  } else {
-    switch (event.key) {
-      case "Space":
-      case "Enter":
-        event.preventDefault();
-        event.stopPropagation();
-        if (context.popoverState === PopoverStates.Closed) closeOthers?.(context.buttonId);
-        context.togglePopover();
-        break;
-      case "Escape":
-        if (context.popoverState !== PopoverStates.Open) return closeOthers?.(context.buttonId);
-        if (!ref) return;
-        if (ownerDocument?.activeElement && !ref.contains(ownerDocument.activeElement)) {
-          return;
-        }
-        event.preventDefault();
-        event.stopPropagation();
-        context.closePopover();
-        break;
+      switch (event.key) {
+        case "Space":
+        case "Enter":
+          event.preventDefault() // Prevent triggering a *click* event
+          event.stopPropagation()
+          if (context.popoverState === PopoverStates.Closed) closeOthers?.(context.buttonId!)
+          context.togglePopover()
+          break
+
+        case "Escape":
+          if (context.popoverState !== PopoverStates.Open) return closeOthers?.(context.buttonId!)
+          if (!ref) return
+          if (ownerDocument?.activeElement && !ref.contains(ownerDocument.activeElement)) {
+            return
+          }
+          event.preventDefault()
+          event.stopPropagation()
+          context.closePopover()
+          break
+      }
     }
   }
-};
-const handleKeyUp = (event) => {
-  if (isWithinPanel) return;
-  if (event.key === "Space") {
-    event.preventDefault();
-  }
-};
-const handleClick = (event) => {
-  if (disabled) return;
-  if (isWithinPanel) {
-    context.closePopover();
-    context.button?.focus();
-  } else {
-    event.preventDefault();
-    event.stopPropagation();
-    if (context.popoverState === PopoverStates.Closed) closeOthers?.(context.buttonId);
-    context.togglePopover();
-    context.button?.focus();
-  }
-};
-const handleMouseDown = (event) => {
-  event.preventDefault();
-  event.stopPropagation();
-};
-const { isFocusVisible: focus, focusProps } = $derived(
-  useFocusRing({
-    get autofocus() {
-      return autofocus;
-    }
-  })
-);
-const { isHovered: hover, hoverProps } = $derived(
-  useHover({
-    get disabled() {
-      return disabled;
+
+  const handleKeyUp = (event: KeyboardEvent) => {
+    if (isWithinPanel) return
+    if (event.key === "Space") {
+      // Required for firefox, event.preventDefault() in handleKeyDown for
+      // the Space key doesn't cancel the handleKeyUp, which in turn
+      // triggers a *click*.
+      event.preventDefault()
     }
-  })
-);
-const { pressed: active, pressProps } = $derived(
-  useActivePress({
-    get disabled() {
-      return disabled;
+  }
+
+  const handleClick = (event: MouseEvent) => {
+    //if (isDisabledReactIssue7711(event.currentTarget)) return
+    if (disabled) return
+    if (isWithinPanel) {
+      context.closePopover()
+      context.button?.focus() // Re-focus the original opening Button
+    } else {
+      event.preventDefault()
+      event.stopPropagation()
+      if (context.popoverState === PopoverStates.Closed) closeOthers?.(context.buttonId!)
+      context.togglePopover()
+      context.button?.focus()
     }
-  })
-);
-const visible = $derived(context.popoverState === PopoverStates.Open);
-const slot = $derived({
-  open: visible,
-  active: active || visible,
-  disabled,
-  hover,
-  focus,
-  autofocus
-});
-const type = useResolveButtonType({
-  get props() {
-    return { type: theirProps.type, as: theirProps.as };
-  },
-  get ref() {
-    return { current: context.button };
   }
-});
-const ourProps = $derived(
-  isWithinPanel ? mergeProps(
-    {
-      type,
-      onkeydown: handleKeyDown,
-      onclick: handleClick,
-      disabled: disabled || void 0,
-      autofocus
+
+  const handleMouseDown = (event: MouseEvent) => {
+    event.preventDefault()
+    event.stopPropagation()
+  }
+
+  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 visible = $derived(context.popoverState === PopoverStates.Open)
+  const slot = $derived({
+    open: visible,
+    active: active || visible,
+    disabled,
+    hover,
+    focus,
+    autofocus,
+  } satisfies PopoverButtonSlot)
+
+  const type = useResolveButtonType({
+    get props() {
+      return { type: theirProps.type, as: theirProps.as }
     },
-    focusProps,
-    hoverProps,
-    pressProps
-  ) : mergeProps(
-    {
-      id: context.buttonId,
-      type,
-      "aria-expanded": context.popoverState === PopoverStates.Open,
-      "aria-controls": context.panel ? context.panelId : void 0,
-      disabled: disabled || void 0,
-      autofocus,
-      onkeydown: handleKeyDown,
-      onkeyup: handleKeyUp,
-      onclick: handleClick,
-      onmousedown: handleMouseDown
+    get ref() {
+      return { current: context.button }
     },
-    focusProps,
-    hoverProps,
-    pressProps
+  })
+  const ourProps = $derived(
+    isWithinPanel
+      ? mergeProps(
+          {
+            type,
+            onkeydown: handleKeyDown,
+            onclick: handleClick,
+            disabled: disabled || undefined,
+            autofocus,
+          },
+          focusProps,
+          hoverProps,
+          pressProps
+        )
+      : mergeProps(
+          {
+            id: context.buttonId,
+            type,
+            "aria-expanded": context.popoverState === PopoverStates.Open,
+            "aria-controls": context.panel ? context.panelId : undefined,
+            disabled: disabled || undefined,
+            autofocus,
+            onkeydown: handleKeyDown,
+            onkeyup: handleKeyUp,
+            onclick: handleClick,
+            onmousedown: handleMouseDown,
+          },
+          focusProps,
+          hoverProps,
+          pressProps
+        )
   )
-);
-const direction = useTabDirection();
-const handleFocus = () => {
-  const el = context.panel;
-  if (!el) return;
-  function run() {
-    let result = match(direction.current, {
-      [TabDirection.Forwards]: () => focusIn(el, Focus.First),
-      [TabDirection.Backwards]: () => focusIn(el, Focus.Last)
-    });
-    if (result === FocusResult.Error) {
-      focusIn(
-        getFocusableElements().filter((el2) => el2.dataset.headlessuiFocusGuard !== "true"),
-        match(direction.current, {
-          [TabDirection.Forwards]: Focus.Next,
-          [TabDirection.Backwards]: Focus.Previous
-        }),
-        { relativeTo: context.button }
-      );
+
+  const direction = useTabDirection()
+  const handleFocus = () => {
+    const el = context.panel as HTMLElement
+    if (!el) return
+
+    function run() {
+      let result = match(direction.current, {
+        [TabDirection.Forwards]: () => focusIn(el, Focus.First),
+        [TabDirection.Backwards]: () => focusIn(el, Focus.Last),
+      })
+
+      if (result === FocusResult.Error) {
+        focusIn(
+          getFocusableElements().filter((el) => el.dataset.headlessuiFocusGuard !== "true"),
+          match(direction.current, {
+            [TabDirection.Forwards]: Focus.Next,
+            [TabDirection.Backwards]: Focus.Previous,
+          }),
+          { relativeTo: context.button }
+        )
+      }
+    }
+
+    // TODO: Cleanup once we are using real browser tests
+    if (process.env.NODE_ENV === "test") {
+      microTask(run)
+    } else {
+      run()
     }
   }
-  if (process.env.NODE_ENV === "test") {
-    microTask(run);
-  } else {
-    run();
-  }
-};
 </script>
 
 <ElementOrComponent