@pzerelles/headlessui-svelte 2.1.2-next.31 → 2.1.2-next.33

package/dist/popover/PopoverButton.svelte

@@ -1,228 +1,306 @@
-<script lang="ts" module>const DEFAULT_BUTTON_TAG = "button";
+<script lang="ts" module>
+  import type { Props } 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 PopoverButtonProps = Props<
+    typeof DEFAULT_BUTTON_TAG,
+    PopoverButtonSlot,
+    {
+      element?: HTMLElement
+      id?: string
+      disabled?: boolean
+      autofocus?: boolean
+    }
+  >
 </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">
+  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 {
+    element = $bindable(),
+    id = `headlessui-popover-button-${internalId}`,
+    disabled = false,
+    autofocus = false,
+    ...theirProps
+  }: PopoverButtonProps = $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(element)
+  })
+  $effect(() => {
+    if (isWithinPanel) return
+    element
+    untrack(() => {
+      if (element) {
+        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 (element) context.setButton(element)
+    })
+  })
+  const ownerDocument = $derived(getOwnerDocument(element))
+
+  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 (!element) return
+          if (ownerDocument?.activeElement && !element.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 ?? undefined, as: element ? element.tagName.toLowerCase() : DEFAULT_BUTTON_TAG }
     },
-    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
@@ -231,16 +309,18 @@ const handleFocus = () => {
   slots={slot}
   defaultTag={DEFAULT_BUTTON_TAG}
   name="PopoverButton"
-  bind:ref
+  bind:element
 />
 {#if visible && !isWithinPanel && isPortalled}
-  <Hidden
-    id={sentinelId}
-    bind:ref={context.afterButtonSentinel as HTMLElement}
-    features={HiddenFeatures.Focusable}
-    data-headlessui-focus-guard
-    as="button"
-    type="button"
-    onfocus={handleFocus}
-  />
+  <Hidden id={sentinelId} features={HiddenFeatures.Focusable} asChild>
+    {#snippet children({ props })}
+      <button
+        {...props}
+        type="button"
+        data-headlessui-focus-guard
+        onfocus={handleFocus}
+        bind:this={context.afterButtonSentinel}>&zwnj;</button
+      >
+    {/snippet}
+  </Hidden>
 {/if}

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

@@ -1,4 +1,4 @@
-import type { ElementType, Props, PropsOf } from "../utils/types.js";
+import type { Props } from "../utils/types.js";
 declare const DEFAULT_BUTTON_TAG: "button";
 export type PopoverButtonSlot = {
     open: boolean;
@@ -9,34 +9,11 @@ export type PopoverButtonSlot = {
     autofocus: boolean;
 };
 export type PopoverButtonPropsWeControl = "aria-controls" | "aria-expanded";
-export type PopoverButtonComponentProps = {
+export type PopoverButtonProps = Props<typeof DEFAULT_BUTTON_TAG, PopoverButtonSlot, {
+    element?: HTMLElement;
+    id?: string;
     disabled?: boolean;
     autofocus?: boolean;
-};
-export type PopoverButtonProps<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG> = Props<TTag, PopoverButtonSlot, PopoverButtonPropsWeControl, PopoverButtonComponentProps>;
-declare class __sveltets_Render<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG> {
-    props(): {
-        as?: TTag | undefined;
-    } & (Exclude<keyof PropsOf<TTag>, ("slot" | "as" | "children" | "class" | "ref") | PopoverButtonPropsWeControl | keyof PopoverButtonComponentProps> extends infer T extends keyof PropsOf<TTag> ? { [P in T]: PropsOf<TTag>[P]; } : never) & {
-        children?: import("svelte").Snippet<[{
-            slot: PopoverButtonSlot;
-            props: Record<string, any>;
-        }]> | undefined;
-        class?: string | ((bag: PopoverButtonSlot) => string) | null | undefined;
-        ref?: HTMLElement;
-    } & PopoverButtonComponentProps;
-    events(): {};
-    slots(): {};
-    bindings(): "ref";
-    exports(): {};
-}
-interface $$IsomorphicComponent {
-    new <TTag extends ElementType = typeof DEFAULT_BUTTON_TAG>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TTag>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TTag>['props']>, ReturnType<__sveltets_Render<TTag>['events']>, ReturnType<__sveltets_Render<TTag>['slots']>> & {
-        $$bindings?: ReturnType<__sveltets_Render<TTag>['bindings']>;
-    } & ReturnType<__sveltets_Render<TTag>['exports']>;
-    <TTag extends ElementType = typeof DEFAULT_BUTTON_TAG>(internal: unknown, props: ReturnType<__sveltets_Render<TTag>['props']> & {}): ReturnType<__sveltets_Render<TTag>['exports']>;
-    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
-}
-declare const PopoverButton: $$IsomorphicComponent;
-type PopoverButton<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG> = InstanceType<typeof PopoverButton<TTag>>;
+}>;
+declare const PopoverButton: import("svelte").Component<PopoverButtonProps, {}, "element">;
 export default PopoverButton;