@pzerelles/headlessui-svelte 2.1.2-next.6 → 2.1.2-next.60

package/dist/popover/PopoverButton.svelte

@@ -0,0 +1,324 @@
+<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 PopoverButtonOwnProps = {
+    element?: HTMLElement
+    id?: string
+    disabled?: boolean
+    autofocus?: boolean
+  }
+
+  export type PopoverButtonProps = Props<typeof DEFAULT_BUTTON_TAG, PopoverButtonSlot, PopoverButtonOwnProps>
+</script>
+
+<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 {
+      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: 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 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 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 buttonType = useResolveButtonType({
+    get props() {
+      return { type: theirProps.type ?? undefined, as: element ? element.tagName.toLowerCase() : DEFAULT_BUTTON_TAG }
+    },
+    get ref() {
+      return { current: context.button }
+    },
+  })
+  const ourProps = $derived(
+    isWithinPanel
+      ? mergeProps(
+          {
+            type: buttonType.type,
+            onkeydown: handleKeyDown,
+            onclick: handleClick,
+            disabled: disabled || undefined,
+            autofocus,
+          },
+          focusProps,
+          hoverProps,
+          pressProps
+        )
+      : mergeProps(
+          {
+            id: context.buttonId,
+            type: buttonType.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 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()
+    }
+  }
+</script>
+
+<ElementOrComponent
+  {ourProps}
+  {theirProps}
+  slots={slot}
+  defaultTag={DEFAULT_BUTTON_TAG}
+  name="PopoverButton"
+  bind:element
+/>
+{#if visible && !isWithinPanel && isPortalled}
+  <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

@@ -0,0 +1,21 @@
+import type { Props } from "../utils/types.js";
+declare const DEFAULT_BUTTON_TAG: "button";
+export type PopoverButtonSlot = {
+    open: boolean;
+    active: boolean;
+    hover: boolean;
+    focus: boolean;
+    disabled: boolean;
+    autofocus: boolean;
+};
+export type PopoverButtonPropsWeControl = "aria-controls" | "aria-expanded";
+export type PopoverButtonOwnProps = {
+    element?: HTMLElement;
+    id?: string;
+    disabled?: boolean;
+    autofocus?: boolean;
+};
+export type PopoverButtonProps = Props<typeof DEFAULT_BUTTON_TAG, PopoverButtonSlot, PopoverButtonOwnProps>;
+declare const PopoverButton: import("svelte").Component<PopoverButtonProps, {}, "element">;
+type PopoverButton = ReturnType<typeof PopoverButton>;
+export default PopoverButton;

package/dist/popover/PopoverGroup.svelte

@@ -0,0 +1,66 @@
+<script lang="ts" module>
+  import type { Props } from "../utils/types.js"
+  import { setContext } from "svelte"
+
+  const DEFAULT_GROUP_TAG = "div" as const
+
+  export type PopoverGroupOwnProps = {
+    element?: HTMLElement
+  }
+
+  export type PopoverGroupProps = Props<typeof DEFAULT_GROUP_TAG, {}, PopoverGroupOwnProps>
+</script>
+
+<script lang="ts">
+  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 { element = $bindable(), ...theirProps }: PopoverGroupProps = $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)
+  }
+
+  const isFocusWithinPopoverGroup = () => {
+    const ownerDocument = getOwnerDocument(element)
+    if (!ownerDocument) return false
+    const el = ownerDocument.activeElement
+
+    if (element?.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(el) ||
+        ownerDocument!.getElementById(bag.panelId!)?.contains(el)
+      )
+    })
+  }
+
+  const closeOthers = (buttonId: string) => {
+    for (const popover of popovers) {
+      if (popover.buttonId !== buttonId) popover.close()
+    }
+  }
+
+  setContext<PopoverGroupContext>("PopoverGroupContext", {
+    registerPopover,
+    unregisterPopover,
+    isFocusWithinPopoverGroup,
+    closeOthers,
+  })
+</script>
+
+<MainTreeProvider>
+  <ElementOrComponent {theirProps} defaultTag={DEFAULT_GROUP_TAG} name="PopoverGroup" bind:element />
+</MainTreeProvider>

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

@@ -0,0 +1,9 @@
+import type { Props } from "../utils/types.js";
+declare const DEFAULT_GROUP_TAG: "div";
+export type PopoverGroupOwnProps = {
+    element?: HTMLElement;
+};
+export type PopoverGroupProps = Props<typeof DEFAULT_GROUP_TAG, {}, PopoverGroupOwnProps>;
+declare const PopoverGroup: import("svelte").Component<PopoverGroupProps, {}, "element">;
+type PopoverGroup = ReturnType<typeof PopoverGroup>;
+export default PopoverGroup;