@pzerelles/headlessui-svelte 2.1.2-next.30 → 2.1.2-next.32

package/dist/popover/Popover.svelte

@@ -1,159 +1,225 @@
-<script lang="ts" module>export const DEFAULT_POPOVER_TAG = "div";
-</script>
+<script lang="ts" module>
+  import type { ElementType, Props } from "../utils/types.js"
 
-<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_POPOVER_TAG">import { getOwnerDocument } from "../utils/owner.js";
-import { setContext, untrack } from "svelte";
-import {
-  createPopoverContext,
-  PopoverStates,
-  usePopoverGroupContext
-} from "./context.svelte.js";
-import { FocusableMode, getFocusableElements, isFocusableElement } from "../utils/focus-management.js";
-import { useNestedPortals } from "../portal/InternalPortal.svelte";
-import MainTreeProvider, { useMainTreeNode } from "../internal/MainTreeProvider.svelte";
-import { useRootContainers } from "../hooks/use-root-containers.svelte.js";
-import { useEventListener } from "../hooks/use-event-listener.svelte.js";
-import { useOutsideClick } from "../hooks/use-outside-click.svelte.js";
-import { useFloatingProvider } from "../internal/floating-provider.svelte.js";
-import { createCloseContext } from "../internal/close-provider.js";
-import { createOpenClosedContext, State } from "../internal/open-closed.js";
-import ElementOrComponent from "../utils/ElementOrComponent.svelte";
-let { ref = $bindable(), __demoMode = false, ...theirProps } = $props();
-let buttons = $state([]);
-const context = createPopoverContext({
-  __demoMode,
-  popoverState: __demoMode ? PopoverStates.Open : PopoverStates.Closed,
-  buttons
-});
-const {
-  popoverState,
-  button,
-  buttonId,
-  panel,
-  panelId,
-  beforePanelSentinel,
-  afterPanelSentinel,
-  afterButtonSentinel
-} = $derived(context);
-const ownerDocument = $derived(getOwnerDocument(ref ?? button));
-const isPortalled = $derived.by(() => {
-  if (!button) return false;
-  if (!panel) return false;
-  return untrack(() => {
-    for (let root2 of document.querySelectorAll("body > *")) {
-      if (Number(root2?.contains(button)) ^ Number(root2?.contains(panel))) {
-        return true;
-      }
-    }
-    let elements = getFocusableElements();
-    let buttonIdx = elements.indexOf(button);
-    let beforeIdx = (buttonIdx + elements.length - 1) % elements.length;
-    let afterIdx = (buttonIdx + 1) % elements.length;
-    let beforeElement = elements[beforeIdx];
-    let afterElement = elements[afterIdx];
-    if (!panel.contains(beforeElement) && !panel.contains(afterElement)) {
-      return true;
-    }
-    return false;
-  });
-});
-const registerBag = $derived({
-  buttonId,
-  panelId,
-  close: () => context.closePopover()
-});
-const groupContext = usePopoverGroupContext();
-const registerPopover = $derived(groupContext?.registerPopover);
-const isFocusWithinPopoverGroup = () => {
-  return groupContext?.isFocusWithinPopoverGroup() ?? (ownerDocument?.activeElement && (button?.contains(ownerDocument.activeElement) || panel?.contains(ownerDocument.activeElement)));
-};
-$effect(() => registerPopover?.(registerBag));
-const nestedPortals = useNestedPortals();
-const { portals } = $derived(nestedPortals);
-const mainTreeNode = useMainTreeNode({
-  get fallbackMainTreeNode() {
-    return button;
-  }
-});
-const root = useRootContainers({
-  get mainTreeNode() {
-    return mainTreeNode.node;
-  },
-  get portals() {
-    return portals;
-  },
-  get defaultContainers() {
-    return [button, panel];
+  export const DEFAULT_POPOVER_TAG = "div" as const
+  type PopoverRenderPropArg = {
+    open: boolean
+    close(focusableElement?: HTMLElement | MouseEvent<HTMLElement>): void
   }
-});
-useEventListener({
-  get element() {
-    return ownerDocument?.defaultView;
-  },
-  type: "focus",
-  listener: (event) => {
-    if (event.target === window) return;
-    if (!(event.target instanceof HTMLElement)) return;
-    if (popoverState !== PopoverStates.Open) return;
-    if (isFocusWithinPopoverGroup()) return;
-    if (!button) return;
-    if (!panel) return;
-    if (root.contains(event.target)) return;
-    if (beforePanelSentinel?.contains?.(event.target)) return;
-    if (afterPanelSentinel?.contains?.(event.target)) return;
-    if (afterButtonSentinel?.contains?.(event.target)) return;
-    context.closePopover();
-  },
-  options: true
-});
-const outsideClickEnabled = $derived(popoverState === PopoverStates.Open);
-useOutsideClick({
-  get enabled() {
-    return outsideClickEnabled;
-  },
-  get containers() {
-    return root.resolvedContainers;
-  },
-  cb: (event, target) => {
-    context.closePopover();
-    if (!isFocusableElement(target, FocusableMode.Loose)) {
-      event.preventDefault();
-      button?.focus();
+  type PopoverPropsWeControl = never
+
+  export type PopoverProps<TTag extends ElementType = typeof DEFAULT_POPOVER_TAG> = Props<
+    TTag,
+    PopoverRenderPropArg,
+    PopoverPropsWeControl,
+    {
+      __demoMode?: boolean
     }
+  >
+</script>
+
+<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_POPOVER_TAG">
+  import { getOwnerDocument } from "../utils/owner.js"
+
+  import { setContext, untrack } from "svelte"
+  import {
+    createPopoverContext,
+    PopoverStates,
+    usePopoverGroupContext,
+    type MouseEvent,
+    type PopoverAPIContext,
+    type PopoverPanelContext,
+  } from "./context.svelte.js"
+  import { FocusableMode, getFocusableElements, isFocusableElement } from "../utils/focus-management.js"
+  import { useNestedPortals } from "../portal/InternalPortal.svelte"
+  import MainTreeProvider, { useMainTreeNode } from "../internal/MainTreeProvider.svelte"
+  import { useRootContainers } from "../hooks/use-root-containers.svelte.js"
+  import { useEventListener } from "../hooks/use-event-listener.svelte.js"
+  import { useOutsideClick } from "../hooks/use-outside-click.svelte.js"
+  import { useFloatingProvider } from "../internal/floating-provider.svelte.js"
+  import { createCloseContext } from "../internal/close-provider.js"
+  import { createOpenClosedContext, State } from "../internal/open-closed.js"
+  import ElementOrComponent from "../utils/ElementOrComponent.svelte"
+
+  let { ref = $bindable(), __demoMode = false, ...theirProps }: { as?: TTag } & PopoverProps<TTag> = $props()
+
+  let buttons = $state([])
+  const context = createPopoverContext({
+    __demoMode,
+    popoverState: __demoMode ? PopoverStates.Open : PopoverStates.Closed,
+    buttons,
+  })
+  const {
+    popoverState,
+    button,
+    buttonId,
+    panel,
+    panelId,
+    beforePanelSentinel,
+    afterPanelSentinel,
+    afterButtonSentinel,
+  } = $derived(context)
+
+  const ownerDocument = $derived(getOwnerDocument(ref ?? button))
+
+  const isPortalled = $derived.by(() => {
+    if (!button) return false
+    if (!panel) return false
+
+    return untrack(() => {
+      // We are part of a different "root" tree, so therefore we can consider it portalled. This is a
+      // heuristic because 3rd party tools could use some form of portal, typically rendered at the
+      // end of the body but we don't have an actual reference to that.
+      for (let root of document.querySelectorAll("body > *")) {
+        if (Number(root?.contains(button)) ^ Number(root?.contains(panel))) {
+          return true
+        }
+      }
+
+      // Use another heuristic to try and calculate whether or not the focusable
+      // elements are near each other (aka, following the default focus/tab order
+      // from the browser). If they are then it doesn't really matter if they are
+      // portalled or not because we can follow the default tab order. But if they
+      // are not, then we can consider it being portalled so that we can ensure
+      // that tab and shift+tab (hopefully) go to the correct spot.
+      let elements = getFocusableElements()
+      let buttonIdx = elements.indexOf(button)
+
+      let beforeIdx = (buttonIdx + elements.length - 1) % elements.length
+      let afterIdx = (buttonIdx + 1) % elements.length
+
+      let beforeElement = elements[beforeIdx]
+      let afterElement = elements[afterIdx]
+
+      if (!panel.contains(beforeElement) && !panel.contains(afterElement)) {
+        return true
+      }
+
+      // It may or may not be portalled, but we don't really know.
+      return false
+    })
+  })
+
+  const registerBag = $derived({
+    buttonId,
+    panelId,
+    close: () => context.closePopover(),
+  })
+
+  const groupContext = usePopoverGroupContext()
+  const registerPopover = $derived(groupContext?.registerPopover)
+  const isFocusWithinPopoverGroup = () => {
+    return (
+      groupContext?.isFocusWithinPopoverGroup() ??
+      (ownerDocument?.activeElement &&
+        (button?.contains(ownerDocument.activeElement) || panel?.contains(ownerDocument.activeElement)))
+    )
   }
-});
-const close = (focusableElement) => {
-  context.closePopover();
-  const restoreElement = (() => {
-    if (!focusableElement) return button;
-    if (focusableElement instanceof HTMLElement) return focusableElement;
-    return button;
-  })();
-  restoreElement?.focus();
-};
-const api = {
-  close,
-  get isPortalled() {
-    return isPortalled;
-  }
-};
-setContext("PopoverAPIContext", api);
-const slot = $derived({
-  open: popoverState === PopoverStates.Open,
-  close
-});
-useFloatingProvider();
-setContext("PopoverPanelContext", void 0);
-createCloseContext({
-  get close() {
-    return close;
+
+  $effect(() => registerPopover?.(registerBag))
+
+  const nestedPortals = useNestedPortals()
+  const { portals } = $derived(nestedPortals)
+  const mainTreeNode = useMainTreeNode({
+    get fallbackMainTreeNode() {
+      return button
+    },
+  })
+  const root = useRootContainers({
+    get mainTreeNode() {
+      return mainTreeNode.node
+    },
+    get portals() {
+      return portals
+    },
+    get defaultContainers() {
+      return [button, panel]
+    },
+  })
+
+  // Handle focus out
+  useEventListener({
+    get element() {
+      return ownerDocument?.defaultView
+    },
+    type: "focus",
+    listener: (event) => {
+      if (event.target === window) return
+      if (!(event.target instanceof HTMLElement)) return
+      if (popoverState !== PopoverStates.Open) return
+      if (isFocusWithinPopoverGroup()) return
+      if (!button) return
+      if (!panel) return
+      if (root.contains(event.target)) return
+      if (beforePanelSentinel?.contains?.(event.target)) return
+      if (afterPanelSentinel?.contains?.(event.target)) return
+      if (afterButtonSentinel?.contains?.(event.target)) return
+
+      context.closePopover()
+    },
+    options: true,
+  })
+
+  // Handle outside click
+  const outsideClickEnabled = $derived(popoverState === PopoverStates.Open)
+  useOutsideClick({
+    get enabled() {
+      return outsideClickEnabled
+    },
+    get containers() {
+      return root.resolvedContainers
+    },
+    cb: (event, target) => {
+      context.closePopover()
+
+      if (!isFocusableElement(target, FocusableMode.Loose)) {
+        event.preventDefault()
+        button?.focus()
+      }
+    },
+  })
+
+  const close = (focusableElement?: HTMLElement | MouseEvent<HTMLElement>) => {
+    context.closePopover()
+
+    const restoreElement = (() => {
+      if (!focusableElement) return button
+      if (focusableElement instanceof HTMLElement) return focusableElement
+
+      return button
+    })()
+
+    restoreElement?.focus()
   }
-});
-createOpenClosedContext({
-  get value() {
-    return context.popoverState === PopoverStates.Open ? State.Open : State.Closed;
+
+  const api: PopoverAPIContext = {
+    close,
+    get isPortalled() {
+      return isPortalled
+    },
   }
-});
+  setContext("PopoverAPIContext", api)
+
+  const slot = $derived({
+    open: popoverState === PopoverStates.Open,
+    close,
+  } satisfies PopoverRenderPropArg)
+
+  useFloatingProvider()
+
+  setContext<PopoverPanelContext | undefined>("PopoverPanelContext", undefined)
+
+  createCloseContext({
+    get close() {
+      return close
+    },
+  })
+
+  createOpenClosedContext({
+    get value() {
+      return context.popoverState === PopoverStates.Open ? State.Open : State.Closed
+    },
+  })
 </script>
 
 <MainTreeProvider node={mainTreeNode.node}>

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

@@ -13,9 +13,8 @@ declare class __sveltets_Render<TTag extends ElementType = typeof DEFAULT_POPOVE
     props(): {
         as?: TTag | undefined;
     } & (Exclude<keyof import("../utils/types.js").PropsOf<TTag>, ("slot" | "as" | "children" | "class" | "ref") | "__demoMode"> extends infer T extends keyof import("../utils/types.js").PropsOf<TTag> ? { [P in T]: import("../utils/types.js").PropsOf<TTag>[P]; } : never) & {
-        children?: import("svelte").Snippet<[{
-            slot: PopoverRenderPropArg;
-            props: Record<string, any>;
+        children?: import("svelte").Snippet<[PopoverRenderPropArg & {
+            props?: Record<string, any>;
         }]> | undefined;
         class?: string | ((bag: PopoverRenderPropArg) => string) | null | undefined;
         ref?: HTMLElement;

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

@@ -14,9 +14,8 @@ declare class __sveltets_Render<TTag extends ElementType = typeof DEFAULT_BACKDR
     props(): {
         as?: TTag | undefined;
     } & (Exclude<keyof PropsOf<TTag>, ("slot" | "as" | "children" | "class" | "ref") | "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>;
+        children?: import("svelte").Snippet<[BackdropRenderPropArg & {
+            props?: Record<string, any>;
         }]> | undefined;
         class?: string | ((bag: BackdropRenderPropArg) => string) | null | undefined;
         ref?: HTMLElement;