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

package/dist/popover/Popover.svelte

@@ -1,225 +1,159 @@
-<script lang="ts" module>
-  import type { ElementType, Props } from "../utils/types.js"
-
-  export const DEFAULT_POPOVER_TAG = "div" as const
-  type PopoverRenderPropArg = {
-    open: boolean
-    close(focusableElement?: HTMLElement | MouseEvent<HTMLElement>): void
-  }
-  type PopoverPropsWeControl = never
-
-  export type PopoverProps<TTag extends ElementType = typeof DEFAULT_POPOVER_TAG> = Props<
-    TTag,
-    PopoverRenderPropArg,
-    PopoverPropsWeControl,
-    {
-      __demoMode?: boolean
-    }
-  >
+<script lang="ts" module>export const DEFAULT_POPOVER_TAG = "div";
 </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
-        }
+<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;
       }
-
-      // 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)))
-    )
+    }
+    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;
   }
-
-  $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()
+});
+const root = useRootContainers({
+  get mainTreeNode() {
+    return mainTreeNode.node;
+  },
+  get portals() {
+    return portals;
+  },
+  get defaultContainers() {
+    return [button, panel];
   }
-
-  const api: PopoverAPIContext = {
-    close,
-    get isPortalled() {
-      return isPortalled
-    },
+});
+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();
+    }
   }
-  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
-    },
-  })
+});
+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;
+  }
+});
+createOpenClosedContext({
+  get value() {
+    return context.popoverState === PopoverStates.Open ? State.Open : State.Closed;
+  }
+});
 </script>
 
 <MainTreeProvider node={mainTreeNode.node}>

package/dist/popover/PopoverBackdrop.svelte

@@ -1,73 +1,47 @@
-<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 lang="ts" module>import { RenderFeatures } from "../utils/render.js";
+let DEFAULT_BACKDROP_TAG = "div";
+const BackdropRenderFeatures = RenderFeatures.RenderStrategy | RenderFeatures.Static;
 </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}` 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()
+<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;
   }
-
-  const slot = $derived({
-    open: popoverState === PopoverStates.Open,
-  } satisfies BackdropRenderPropArg)
-
-  const ourProps = $derived({
-    id,
-    "aria-hidden": true,
-    onclick: handleClick,
-    ...transitionDataAttributes(transitionData),
-  })
+});
+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)
+});
 </script>
 
 <ElementOrComponent