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

package/dist/popover/PopoverPanel.svelte

@@ -1,254 +1,339 @@
-<script lang="ts" module>import { RenderFeatures } from "../utils/render.js";
-const DEFAULT_PANEL_TAG = "div";
-const PanelRenderFeatures = RenderFeatures.RenderStrategy | RenderFeatures.Static;
-</script>
+<script lang="ts" module>
+  import type { Props } from "../utils/types.js"
+  import { RenderFeatures } from "../utils/render.js"
 
-<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_PANEL_TAG">import { useId } from "../hooks/use-id.js";
-import ElementOrComponent from "../utils/ElementOrComponent.svelte";
-import { mergeProps } from "../utils/render.js";
-import {
-  useFloatingPanel,
-  useFloatingPanelProps,
-  useResolvedAnchor
-} from "../internal/floating.svelte.js";
-import {
-  PopoverStates,
-  usePopoverAPIContext,
-  usePopoverContext
-} from "./context.svelte.js";
-import { getOwnerDocument } from "../utils/owner.js";
-import { clearOpenClosedContext, State, useOpenClosed } from "../internal/open-closed.js";
-import { transitionDataAttributes, useTransition } from "../hooks/use-transition.svelte.js";
-import { useOnDisappear } from "../hooks/use-on-disappear.svelte.js";
-import { useScrollLock } from "../hooks/use-scroll-lock.svelte.js";
-import { Focus, focusIn, FocusResult, getFocusableElements } from "../utils/focus-management.js";
-import { useElementSize } from "../hooks/use-element-size.svelte.js";
-import { useTabDirection, Direction as TabDirection } from "../hooks/use-tab-direction.svelte.js";
-import { match } from "../utils/match.js";
-import { microTask } from "../utils/microTask.js";
-import { setContext, untrack } from "svelte";
-import Portal from "../portal/Portal.svelte";
-import Hidden, { HiddenFeatures } from "../internal/Hidden.svelte";
-let internalId = useId();
-let {
-  ref = $bindable(),
-  id = `headlessui-popover-panel-${internalId}`,
-  focus = false,
-  anchor: rawAnchor,
-  portal: theirPortal = false,
-  modal = false,
-  transition = false,
-  ...theirProps
-} = $props();
-const context = usePopoverContext("PopoverPanel");
-const api = usePopoverAPIContext("PopoverPanel");
-const { close, isPortalled } = $derived(api);
-const beforePanelSentinelId = `headlessui-focus-sentinel-before-${internalId}`;
-const afterPanelSentinelId = `headlessui-focus-sentinel-after-${internalId}`;
-const resolvedAnchor = useResolvedAnchor({
-  get anchor() {
-    return rawAnchor;
-  }
-});
-const { anchor } = $derived(resolvedAnchor);
-const floatingPanel = useFloatingPanel({
-  get placement() {
-    return anchor;
-  }
-});
-const { setFloating, styles } = $derived(floatingPanel);
-const getFloatingPanelProps = useFloatingPanelProps();
-const portal = $derived(!!anchor || theirPortal);
-$effect(() => {
-  if (anchor) setFloating(ref ?? null);
-  untrack(() => context.setPanel(ref));
-});
-const ownerDocument = $derived(getOwnerDocument(ref));
-$effect(() => {
-  id;
-  return untrack(() => {
-    context.setPanelId(id);
-    return () => {
-      context.setPanelId(void 0);
-    };
-  });
-});
-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 : context.popoverState === PopoverStates.Open;
-  }
-});
-const { visible, data: transitionData } = $derived(_transition);
-useOnDisappear({
-  get enabled() {
-    return visible;
-  },
-  get ref() {
-    return context.button;
-  },
-  ondisappear: () => {
-    context.closePopover();
-  }
-});
-const scrollLockEnabled = $derived(context.__demoMode ? false : modal && visible);
-useScrollLock({
-  get enabled() {
-    return scrollLockEnabled;
-  },
-  get ownerDocument() {
-    return ownerDocument;
-  }
-});
-const handleKeyDown = (event) => {
-  switch (event.key) {
-    case "Escape":
-      if (context.popoverState !== PopoverStates.Open) return;
-      if (!ref) return;
-      if (ownerDocument?.activeElement && !ref.contains(ownerDocument.activeElement)) {
-        return;
-      }
-      event.preventDefault();
-      event.stopPropagation();
-      context.closePopover();
-      context.button?.focus();
-      break;
-  }
-};
-$effect(() => {
-  if (theirProps.static) return;
-  if (context.popoverState === PopoverStates.Closed && (theirProps.unmount ?? true)) {
-    context.setPanel(void 0);
+  const DEFAULT_PANEL_TAG = "div" as const
+  type PanelRenderPropArg = {
+    open: boolean
+    close: (focusableElement?: HTMLElement) => void
   }
-});
-$effect(() => {
-  if (context.__demoMode) return;
-  if (!focus) return;
-  if (context.popoverState !== PopoverStates.Open) return;
-  if (!ref) return;
-  const activeElement = ownerDocument?.activeElement;
-  if (ref.contains(activeElement)) return;
-  focusIn(ref, Focus.First);
-});
-const slot = $derived({
-  open: context.popoverState === PopoverStates.Open,
-  close
-});
-const buttonSize = useElementSize({
-  get element() {
-    return context.button ?? null;
-  },
-  unit: true
-});
-const ourProps = $derived(
-  mergeProps(anchor ? getFloatingPanelProps() : {}, {
-    id,
-    onkeydown: handleKeyDown,
-    onblur: focus && context.popoverState === PopoverStates.Open ? (event) => {
-      let el = event.relatedTarget;
-      if (!el) return;
-      if (!ref) return;
-      if (ref.contains(el)) return;
-      context.closePopover();
-      if (context.beforePanelSentinel?.contains?.(el) || context.afterPanelSentinel?.contains?.(el)) {
-        el.focus({ preventScroll: true });
+
+  const PanelRenderFeatures = RenderFeatures.RenderStrategy | RenderFeatures.Static
+
+  type PanelPropsWeControl = "tabIndex"
+
+  export type PopoverPanelProps = Props<
+    typeof DEFAULT_PANEL_TAG,
+    PanelRenderPropArg,
+    {
+      element?: HTMLElement
+      id?: string
+      focus?: boolean
+      anchor?: AnchorProps
+      portal?: boolean
+      modal?: boolean
+      transition?: boolean
+
+      // ItemsRenderFeatures
+      static?: boolean
+      unmount?: boolean
+    }
+  >
+</script>
+
+<script lang="ts">
+  import { useId } from "../hooks/use-id.js"
+  import ElementOrComponent from "../utils/ElementOrComponent.svelte"
+  import { mergeProps } from "../utils/render.js"
+  import {
+    useFloatingPanel,
+    useFloatingPanelProps,
+    useResolvedAnchor,
+    type AnchorProps,
+  } from "../internal/floating.svelte.js"
+  import {
+    type PopoverAPIContext,
+    type PopoverPanelContext,
+    PopoverStates,
+    usePopoverAPIContext,
+    usePopoverContext,
+  } from "./context.svelte.js"
+  import { getOwnerDocument } from "../utils/owner.js"
+  import { clearOpenClosedContext, State, useOpenClosed } from "../internal/open-closed.js"
+  import { transitionDataAttributes, useTransition } from "../hooks/use-transition.svelte.js"
+  import { useOnDisappear } from "../hooks/use-on-disappear.svelte.js"
+  import { useScrollLock } from "../hooks/use-scroll-lock.svelte.js"
+  import { Focus, focusIn, FocusResult, getFocusableElements } from "../utils/focus-management.js"
+  import { useElementSize } from "../hooks/use-element-size.svelte.js"
+  import { useTabDirection, Direction as TabDirection } from "../hooks/use-tab-direction.svelte.js"
+  import { match } from "../utils/match.js"
+  import { microTask } from "../utils/microTask.js"
+  import { setContext, untrack } from "svelte"
+  import Portal from "../portal/Portal.svelte"
+  import Hidden, { HiddenFeatures } from "../internal/Hidden.svelte"
+
+  let internalId = useId()
+  let {
+    element = $bindable(),
+    id = `headlessui-popover-panel-${internalId}`,
+    focus = false,
+    anchor: rawAnchor,
+    portal: theirPortal = false,
+    modal = false,
+    transition = false,
+    ...theirProps
+  }: PopoverPanelProps = $props()
+
+  const context = usePopoverContext("PopoverPanel")
+  const api = usePopoverAPIContext("PopoverPanel")
+  const { close, isPortalled } = $derived(api)
+
+  const beforePanelSentinelId = `headlessui-focus-sentinel-before-${internalId}`
+  const afterPanelSentinelId = `headlessui-focus-sentinel-after-${internalId}`
+
+  const resolvedAnchor = useResolvedAnchor({
+    get anchor() {
+      return rawAnchor
+    },
+  })
+  const { anchor } = $derived(resolvedAnchor)
+  const floatingPanel = useFloatingPanel({
+    get placement() {
+      return anchor
+    },
+  })
+  const { setFloating, styles } = $derived(floatingPanel)
+  const getFloatingPanelProps = useFloatingPanelProps()
+
+  // Always enable `portal` functionality, when `anchor` is enabled
+  const portal = $derived(!!anchor || theirPortal)
+
+  $effect(() => {
+    if (anchor) setFloating(element ?? null)
+    untrack(() => context.setPanel(element))
+  })
+  const ownerDocument = $derived(getOwnerDocument(element))
+
+  $effect(() => {
+    id
+    return untrack(() => {
+      context.setPanelId(id)
+      return () => {
+        context.setPanelId(undefined)
       }
-    } : void 0,
-    tabIndex: -1,
-    style: [theirProps.style, styles, `--button-width: ${buttonSize.width}`].filter(Boolean).join("; "),
-    ...transitionDataAttributes(transitionData)
+    })
   })
-);
-const direction = useTabDirection();
-const handleBeforeFocus = () => {
-  let el = ref;
-  if (!el) return;
-  function run() {
-    match(direction.current, {
-      [TabDirection.Forwards]: () => {
-        let result = focusIn(el, Focus.First);
-        if (result === FocusResult.Error) {
-          context.afterPanelSentinel?.focus();
+
+  const usesOpenClosedState = useOpenClosed()
+  const _transition = useTransition({
+    get enabled() {
+      return transition
+    },
+    get element() {
+      return element
+    },
+    get show() {
+      return usesOpenClosedState !== null
+        ? (usesOpenClosedState.value & State.Open) === State.Open
+        : context.popoverState === PopoverStates.Open
+    },
+  })
+  const { visible, data: transitionData } = $derived(_transition)
+
+  // Ensure we close the popover as soon as the button becomes hidden
+  useOnDisappear({
+    get enabled() {
+      return visible
+    },
+    get ref() {
+      return context.button
+    },
+    ondisappear: () => {
+      context.closePopover()
+    },
+  })
+
+  // Enable scroll locking when the popover is visible, and `modal` is enabled
+  const scrollLockEnabled = $derived(context.__demoMode ? false : modal && visible)
+  useScrollLock({
+    get enabled() {
+      return scrollLockEnabled
+    },
+    get ownerDocument() {
+      return ownerDocument
+    },
+  })
+
+  const handleKeyDown = (event: KeyboardEvent) => {
+    switch (event.key) {
+      case "Escape":
+        if (context.popoverState !== PopoverStates.Open) return
+        if (!element) return
+        if (ownerDocument?.activeElement && !element.contains(ownerDocument.activeElement)) {
+          return
         }
-      },
-      [TabDirection.Backwards]: () => {
-        context.button?.focus({ preventScroll: true });
-      }
-    });
+        event.preventDefault()
+        event.stopPropagation()
+        context.closePopover()
+        context.button?.focus()
+        break
+    }
   }
-  if (process.env.NODE_ENV === "test") {
-    microTask(run);
-  } else {
-    run();
-  }
-};
-const handleAfterFocus = () => {
-  let el = ref;
-  if (!el) return;
-  function run() {
-    match(direction.current, {
-      [TabDirection.Forwards]: () => {
-        if (!context.button) return;
-        const elements = getFocusableElements();
-        const idx = elements.indexOf(context.button);
-        const before = elements.slice(0, idx + 1);
-        const after = elements.slice(idx + 1);
-        const combined = [...after, ...before];
-        for (const element of combined.slice()) {
-          if (element.dataset.headlessuiFocusGuard === "true" || ref?.contains(element)) {
-            let idx2 = combined.indexOf(element);
-            if (idx2 !== -1) combined.splice(idx2, 1);
+
+  // Unlink on "unmount" children
+  $effect(() => {
+    if (theirProps.static) return
+
+    if (context.popoverState === PopoverStates.Closed && (theirProps.unmount ?? true)) {
+      context.setPanel(undefined)
+    }
+  }) //, [state.popoverState, props.unmount, props.static, dispatch])
+
+  // Move focus within panel
+  $effect(() => {
+    if (context.__demoMode) return
+    if (!focus) return
+    if (context.popoverState !== PopoverStates.Open) return
+    if (!element) return
+
+    const activeElement = ownerDocument?.activeElement as HTMLElement
+    if (element.contains(activeElement)) return // Already focused within Dialog
+
+    focusIn(element, Focus.First)
+  }) //, [state.__demoMode, focus, internalPanelRef.current, state.popoverState])
+
+  const slot = $derived({
+    open: context.popoverState === PopoverStates.Open,
+    close,
+  } satisfies PanelRenderPropArg)
+
+  const buttonSize = useElementSize({
+    get element() {
+      return context.button ?? null
+    },
+    unit: true,
+  })
+  const ourProps: Record<string, any> = $derived(
+    mergeProps(anchor ? getFloatingPanelProps() : {}, {
+      id,
+      onkeydown: handleKeyDown,
+      onblur:
+        focus && context.popoverState === PopoverStates.Open
+          ? (event: FocusEvent) => {
+              let el = event.relatedTarget as HTMLElement
+              if (!el) return
+              if (!element) return
+              if (element.contains(el)) return
+
+              context.closePopover()
+
+              if (context.beforePanelSentinel?.contains?.(el) || context.afterPanelSentinel?.contains?.(el)) {
+                el.focus({ preventScroll: true })
+              }
+            }
+          : undefined,
+      tabIndex: -1,
+      style: [theirProps.style, styles, `--button-width: ${buttonSize.width}`].filter(Boolean).join("; "),
+      ...transitionDataAttributes(transitionData),
+    })
+  )
+
+  const direction = useTabDirection()
+  const handleBeforeFocus = () => {
+    let el = element as HTMLElement
+    if (!el) return
+
+    function run() {
+      match(direction.current, {
+        [TabDirection.Forwards]: () => {
+          // Try to focus the first thing in the panel. But if that fails (e.g.: there are no
+          // focusable elements, then we can move outside of the panel)
+          let result = focusIn(el, Focus.First)
+          if (result === FocusResult.Error) {
+            context.afterPanelSentinel?.focus()
           }
-        }
-        focusIn(combined, Focus.First, { sorted: false });
-      },
-      [TabDirection.Backwards]: () => {
-        let result = focusIn(el, Focus.Previous);
-        if (result === FocusResult.Error) {
-          context.button?.focus();
-        }
-      }
-    });
-  }
-  if (process.env.NODE_ENV === "test") {
-    microTask(run);
-  } else {
-    run();
-  }
-};
-clearOpenClosedContext();
-setContext("PopoverPanelContext", {
-  get value() {
-    return id;
+        },
+        [TabDirection.Backwards]: () => {
+          // Coming from the PopoverPanel (which is portalled to somewhere else). Let's redirect
+          // the focus to the PopoverButton again.
+          context.button?.focus({ preventScroll: true })
+        },
+      })
+    }
+
+    // TODO: Cleanup once we are using real browser tests
+    if (process.env.NODE_ENV === "test") {
+      microTask(run)
+    } else {
+      run()
+    }
   }
-});
-setContext("PopoverAPIContext", {
-  get close() {
-    return close;
-  },
-  get isPortalled() {
-    return isPortalled;
+
+  const handleAfterFocus = () => {
+    let el = element as HTMLElement
+    if (!el) return
+
+    function run() {
+      match(direction.current, {
+        [TabDirection.Forwards]: () => {
+          if (!context.button) return
+
+          const elements = getFocusableElements()
+
+          const idx = elements.indexOf(context.button)
+          const before = elements.slice(0, idx + 1)
+          const after = elements.slice(idx + 1)
+
+          const combined = [...after, ...before]
+
+          // Ignore sentinel buttons and items inside the panel
+          for (const element of combined.slice()) {
+            if (element.dataset.headlessuiFocusGuard === "true" || element?.contains(element)) {
+              let idx = combined.indexOf(element)
+              if (idx !== -1) combined.splice(idx, 1)
+            }
+          }
+
+          focusIn(combined, Focus.First, { sorted: false })
+        },
+        [TabDirection.Backwards]: () => {
+          // Try to focus the first thing in the panel. But if that fails (e.g.: there are no
+          // focusable elements, then we can move outside of the panel)
+          let result = focusIn(el, Focus.Previous)
+          if (result === FocusResult.Error) {
+            context.button?.focus()
+          }
+        },
+      })
+    }
+
+    // TODO: Cleanup once we are using real browser tests
+    if (process.env.NODE_ENV === "test") {
+      microTask(run)
+    } else {
+      run()
+    }
   }
-});
+
+  clearOpenClosedContext()
+  setContext<PopoverPanelContext>("PopoverPanelContext", {
+    get value() {
+      return id
+    },
+  })
+  setContext<PopoverAPIContext>("PopoverAPIContext", {
+    get close() {
+      return close
+    },
+    get isPortalled() {
+      return isPortalled
+    },
+  })
 </script>
 
 <Portal enabled={portal ? theirProps.static || visible : false}>
   {#if visible && isPortalled}
-    <Hidden
-      id={beforePanelSentinelId}
-      bind:ref={context.beforePanelSentinel as HTMLElement}
-      features={HiddenFeatures.Focusable}
-      data-headlessui-focus-guard
-      as="button"
-      type="button"
-      onfocus={handleBeforeFocus}
-    />
+    <Hidden asChild id={beforePanelSentinelId} features={HiddenFeatures.Focusable}>
+      {#snippet children({ props })}
+        <button
+          {...props}
+          type="button"
+          data-headlessui-focus-guard
+          onfocus={handleBeforeFocus}
+          bind:this={context.beforePanelSentinel}>&zwnj;</button
+        >
+      {/snippet}
+    </Hidden>
   {/if}
   <ElementOrComponent
     {ourProps}
@@ -258,17 +343,19 @@ setContext("PopoverAPIContext", {
     features={PanelRenderFeatures}
     {visible}
     name="PopoverPanel"
-    bind:ref
+    bind:element
   />
   {#if visible && isPortalled}
-    <Hidden
-      id={afterPanelSentinelId}
-      bind:ref={context.afterPanelSentinel as HTMLElement}
-      features={HiddenFeatures.Focusable}
-      data-headlessui-focus-guard
-      as="button"
-      type="button"
-      onfocus={handleAfterFocus}
-    />
+    <Hidden asChild id={afterPanelSentinelId} features={HiddenFeatures.Focusable}>
+      {#snippet children({ props })}
+        <button
+          {...props}
+          type="button"
+          data-headlessui-focus-guard
+          onfocus={handleAfterFocus}
+          bind:this={context.afterPanelSentinel}>&zwnj;</button
+        >
+      {/snippet}
+    </Hidden>
   {/if}
 </Portal>

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

@@ -1,11 +1,12 @@
-import type { ElementType, Props, PropsOf } from "../utils/types.js";
+import type { Props } from "../utils/types.js";
 declare const DEFAULT_PANEL_TAG: "div";
 type PanelRenderPropArg = {
     open: boolean;
     close: (focusableElement?: HTMLElement) => void;
 };
-type PanelPropsWeControl = "tabIndex";
-export type PopoverPanelProps<TTag extends ElementType = typeof DEFAULT_PANEL_TAG> = Props<TTag, PanelRenderPropArg, PanelPropsWeControl, {
+export type PopoverPanelProps = Props<typeof DEFAULT_PANEL_TAG, PanelRenderPropArg, {
+    element?: HTMLElement;
+    id?: string;
     focus?: boolean;
     anchor?: AnchorProps;
     portal?: boolean;
@@ -15,37 +16,5 @@ export type PopoverPanelProps<TTag extends ElementType = typeof DEFAULT_PANEL_TA
     unmount?: boolean;
 }>;
 import { type AnchorProps } from "../internal/floating.svelte.js";
-declare class __sveltets_Render<TTag extends ElementType = typeof DEFAULT_PANEL_TAG> {
-    props(): {
-        as?: TTag | undefined;
-    } & (Exclude<keyof PropsOf<TTag>, ("slot" | "as" | "children" | "class" | "ref") | "focus" | "anchor" | "unmount" | "static" | "tabIndex" | "transition" | "portal" | "modal"> extends infer T extends keyof PropsOf<TTag> ? { [P in T]: PropsOf<TTag>[P]; } : never) & {
-        children?: import("svelte").Snippet<[{
-            slot: PanelRenderPropArg;
-            props: Record<string, any>;
-        }]> | undefined;
-        class?: string | ((bag: PanelRenderPropArg) => string) | null | undefined;
-        ref?: HTMLElement;
-    } & {
-        focus?: boolean;
-        anchor?: AnchorProps;
-        portal?: boolean;
-        modal?: boolean;
-        transition?: boolean;
-        static?: boolean;
-        unmount?: boolean;
-    };
-    events(): {};
-    slots(): {};
-    bindings(): "ref";
-    exports(): {};
-}
-interface $$IsomorphicComponent {
-    new <TTag extends ElementType = typeof DEFAULT_PANEL_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_PANEL_TAG>(internal: unknown, props: ReturnType<__sveltets_Render<TTag>['props']> & {}): ReturnType<__sveltets_Render<TTag>['exports']>;
-    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
-}
-declare const PopoverPanel: $$IsomorphicComponent;
-type PopoverPanel<TTag extends ElementType = typeof DEFAULT_PANEL_TAG> = InstanceType<typeof PopoverPanel<TTag>>;
+declare const PopoverPanel: import("svelte").Component<PopoverPanelProps, {}, "element">;
 export default PopoverPanel;

package/dist/popover/index.d.ts

@@ -1,5 +1,5 @@
 export { default as Popover, type PopoverProps } from "./Popover.svelte";
 export { default as PopoverBackdrop, type PopoverBackdropProps } from "./PopoverBackdrop.svelte";
-export { default as PopoverButton, type PopoverButtonProps, type PopoverButtonComponentProps, type PopoverButtonSlot, type PopoverButtonPropsWeControl, } from "./PopoverButton.svelte";
+export { default as PopoverButton, type PopoverButtonProps, type PopoverButtonSlot, type PopoverButtonPropsWeControl, } from "./PopoverButton.svelte";
 export { default as PopoverGroup, type PopoverGroupProps } from "./PopoverGroup.svelte";
 export { default as PopoverPanel, type PopoverPanelProps } from "./PopoverPanel.svelte";