@pzerelles/headlessui-svelte 2.1.2-next.67 → 2.1.2-next.68

package/dist/popover/PopoverHoverArea.svelte

@@ -0,0 +1,162 @@
+<script lang="ts" module>
+  import type { Props } from "../utils/types.js"
+
+  const DEFAULT_HOVER_AREA_TAG = "span" as const
+  export type PopoverHoverAreaSlot = {
+    open: boolean
+    hover: boolean
+    disabled: boolean
+  }
+  export type PopoverHoverAreaPropsWeControl = "aria-controls" | "aria-expanded"
+
+  export type PopoverHoverAreaOwnProps = {
+    element?: HTMLElement
+    id?: string
+    disabled?: boolean
+    delay?: number
+  }
+
+  export type PopoverHoverAreaProps = Props<
+    typeof DEFAULT_HOVER_AREA_TAG,
+    PopoverHoverAreaSlot,
+    PopoverHoverAreaOwnProps
+  >
+</script>
+
+<script lang="ts">
+  import { useId } from "../hooks/use-id.js"
+  import { PopoverStates, usePopoverContext, usePopoverPanelContext } from "./context.svelte.js"
+  import { useFloatingReference } from "../internal/floating.svelte.js"
+  import { untrack } from "svelte"
+  import { useHover } from "../hooks/use-hover.svelte.js"
+  import { mergeProps } from "../utils/render.js"
+  import ElementOrComponent from "../utils/ElementOrComponent.svelte"
+
+  const internalId = useId()
+  let {
+    element = $bindable(),
+    id = `headlessui-popover-hover-area-${internalId}`,
+    disabled = false,
+    delay = 0,
+    ...theirProps
+  }: PopoverHoverAreaProps = $props()
+
+  const context = usePopoverContext("PopoverHoverArea")
+  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 { isHovered: hover, hoverProps } = $derived(
+    useHover({
+      get disabled() {
+        return disabled
+      },
+    })
+  )
+
+  const visible = $derived(context.popoverState === PopoverStates.Open)
+  const slot = $derived({
+    open: visible,
+    disabled,
+    hover,
+  } satisfies PopoverHoverAreaSlot)
+
+  const ourProps = $derived(
+    isWithinPanel
+      ? mergeProps(
+          {
+            disabled: disabled || undefined,
+          },
+          hoverProps
+        )
+      : mergeProps(
+          {
+            id: context.buttonId,
+            "aria-expanded": context.popoverState === PopoverStates.Open,
+            "aria-controls": context.panel ? context.panelId : undefined,
+            disabled: disabled || undefined,
+          },
+          hoverProps
+        )
+  )
+
+  $effect(() => {
+    if (hover && !visible) {
+      setTimeout(() => {
+        context.togglePopover()
+      }, delay)
+    } else if (!hover && visible) {
+      context.closePopover()
+    }
+  })
+</script>
+
+<ElementOrComponent
+  {ourProps}
+  {theirProps}
+  slots={slot}
+  defaultTag={DEFAULT_HOVER_AREA_TAG}
+  name="PopoverHoverArea"
+  bind:element
+/>

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

@@ -0,0 +1,18 @@
+import type { Props } from "../utils/types.js";
+declare const DEFAULT_HOVER_AREA_TAG: "span";
+export type PopoverHoverAreaSlot = {
+    open: boolean;
+    hover: boolean;
+    disabled: boolean;
+};
+export type PopoverHoverAreaPropsWeControl = "aria-controls" | "aria-expanded";
+export type PopoverHoverAreaOwnProps = {
+    element?: HTMLElement;
+    id?: string;
+    disabled?: boolean;
+    delay?: number;
+};
+export type PopoverHoverAreaProps = Props<typeof DEFAULT_HOVER_AREA_TAG, PopoverHoverAreaSlot, PopoverHoverAreaOwnProps>;
+declare const PopoverHoverArea: import("svelte").Component<PopoverHoverAreaProps, {}, "element">;
+type PopoverHoverArea = ReturnType<typeof PopoverHoverArea>;
+export default PopoverHoverArea;

package/dist/popover/index.d.ts

@@ -3,4 +3,5 @@ export { default as PopoverBackdrop, type PopoverBackdropProps, type BackdropRen
 export { default as PopoverButton, type PopoverButtonProps, type PopoverButtonSlot, type PopoverButtonOwnProps, } from "./PopoverButton.svelte";
 export { default as PopoverGroup, type PopoverGroupProps, type PopoverGroupOwnProps } from "./PopoverGroup.svelte";
 export { default as PopoverPanel, type PopoverPanelProps, type PanelRenderPropArg as PopoverPanelSlot, type PopoverPanelOwnProps, } from "./PopoverPanel.svelte";
+export { default as PopoverHoverArea, type PopoverHoverAreaProps, type PopoverHoverAreaSlot, type PopoverHoverAreaOwnProps, } from "./PopoverHoverArea.svelte";
 export { usePopoverContext } from "./context.svelte.js";

package/dist/popover/index.js

@@ -3,4 +3,5 @@ export { default as PopoverBackdrop, } from "./PopoverBackdrop.svelte";
 export { default as PopoverButton, } from "./PopoverButton.svelte";
 export { default as PopoverGroup } from "./PopoverGroup.svelte";
 export { default as PopoverPanel, } from "./PopoverPanel.svelte";
+export { default as PopoverHoverArea, } from "./PopoverHoverArea.svelte";
 export { usePopoverContext } from "./context.svelte.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pzerelles/headlessui-svelte",
-  "version": "2.1.2-next.67",
+  "version": "2.1.2-next.68",
   "repository": {
     "url": "https://github.com/pzerelles/headlessui-svelte"
   },