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

package/dist/popover/PopoverButton.svelte

@@ -1,308 +1,228 @@
-<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 lang="ts" module>const DEFAULT_BUTTON_TAG = "button";
 </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"
-  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
-      }
+<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);
     } else {
-      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
-      }
+      let idx = context.buttons.indexOf(uniqueIdentifier);
+      if (idx !== -1) context.buttons.splice(idx, 1);
     }
-  }
-
-  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()
+    if (context.buttons.length > 1) {
+      console.warn("You are already using a <PopoverButton /> but only 1 <PopoverButton /> is supported.");
     }
-  }
-
-  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()
+    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;
     }
   }
-
-  const handleMouseDown = (event: MouseEvent) => {
-    event.preventDefault()
-    event.stopPropagation()
+};
+const handleKeyUp = (event) => {
+  if (isWithinPanel) return;
+  if (event.key === "Space") {
+    event.preventDefault();
   }
-
-  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 }
+};
+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 { 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
+});
+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
     },
-    get ref() {
-      return { current: context.button }
+    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
     },
-  })
-  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
-        )
+    focusProps,
+    hoverProps,
+    pressProps
   )
-
-  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()
+);
+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 }
+      );
     }
   }
+  if (process.env.NODE_ENV === "test") {
+    microTask(run);
+  } else {
+    run();
+  }
+};
 </script>
 
 <ElementOrComponent

package/dist/popover/PopoverGroup.svelte

@@ -1,68 +1,41 @@
-<script lang="ts" module>
-  import type { ElementType, Props } from "../utils/types.js"
-  import { setContext } from "svelte"
-
-  const DEFAULT_GROUP_TAG = "div" as const
-  type GroupRenderPropArg = {}
-  type GroupPropsWeControl = never
-
-  export type PopoverGroupProps<TTag extends ElementType = typeof DEFAULT_GROUP_TAG> = Props<
-    TTag,
-    GroupRenderPropArg,
-    GroupPropsWeControl
-  >
+<script lang="ts" module>import { setContext } from "svelte";
+const DEFAULT_GROUP_TAG = "div";
 </script>
 
-<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_GROUP_TAG">
-  import type { PopoverGroupContext, PopoverRegisterBag } from "./context.svelte"
-  import MainTreeProvider from "../internal/MainTreeProvider.svelte"
-  import ElementOrComponent from "../utils/ElementOrComponent.svelte"
-  import { getOwnerDocument } from "../utils/owner.js"
-
-  let { ref = $bindable(), ...theirProps }: { as?: TTag } & PopoverGroupProps<TTag> = $props()
-
-  const popovers = $state<PopoverRegisterBag[]>([])
-
-  const unregisterPopover = (registerBag: PopoverRegisterBag) => {
-    const idx = popovers.indexOf(registerBag)
-    if (idx !== -1) popovers.splice(idx, 1)
-  }
-
-  const registerPopover = (registerBag: PopoverRegisterBag) => {
-    popovers.push(registerBag)
-    return () => unregisterPopover(registerBag)
+<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_GROUP_TAG">import MainTreeProvider from "../internal/MainTreeProvider.svelte";
+import ElementOrComponent from "../utils/ElementOrComponent.svelte";
+import { getOwnerDocument } from "../utils/owner.js";
+let { ref = $bindable(), ...theirProps } = $props();
+const popovers = $state([]);
+const unregisterPopover = (registerBag) => {
+  const idx = popovers.indexOf(registerBag);
+  if (idx !== -1) popovers.splice(idx, 1);
+};
+const registerPopover = (registerBag) => {
+  popovers.push(registerBag);
+  return () => unregisterPopover(registerBag);
+};
+const isFocusWithinPopoverGroup = () => {
+  const ownerDocument = getOwnerDocument(ref);
+  if (!ownerDocument) return false;
+  let element = ownerDocument.activeElement;
+  if (ref?.contains(element)) return true;
+  return popovers.some((bag) => {
+    return ownerDocument.getElementById(bag.buttonId)?.contains(element) || ownerDocument.getElementById(bag.panelId)?.contains(element);
+  });
+};
+const closeOthers = (buttonId) => {
+  for (const popover of popovers) {
+    if (popover.buttonId !== buttonId) popover.close();
   }
-
-  const isFocusWithinPopoverGroup = () => {
-    const ownerDocument = getOwnerDocument(ref)
-    if (!ownerDocument) return false
-    let element = ownerDocument.activeElement
-
-    if (ref?.contains(element)) return true
-
-    // Check if the focus is in one of the button or panel elements. This is important in case you are rendering inside a Portal.
-    return popovers.some((bag) => {
-      return (
-        ownerDocument!.getElementById(bag.buttonId!)?.contains(element) ||
-        ownerDocument!.getElementById(bag.panelId!)?.contains(element)
-      )
-    })
-  }
-
-  const closeOthers = (buttonId: string) => {
-    for (const popover of popovers) {
-      if (popover.buttonId !== buttonId) popover.close()
-    }
-  }
-
-  setContext<PopoverGroupContext>("PopoverGroupContext", {
-    registerPopover,
-    unregisterPopover,
-    isFocusWithinPopoverGroup,
-    closeOthers,
-  })
-
-  const slot = {} satisfies GroupRenderPropArg
+};
+setContext("PopoverGroupContext", {
+  registerPopover,
+  unregisterPopover,
+  isFocusWithinPopoverGroup,
+  closeOthers
+});
+const slot = {};
 </script>
 
 <MainTreeProvider>