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

package/dist/popover/PopoverPanel.svelte

@@ -0,0 +1,359 @@
+<script lang="ts" module>
+  import type { Props } from "../utils/types.js"
+  import { RenderFeatures } from "../utils/render.js"
+
+  const DEFAULT_PANEL_TAG = "div" as const
+  export type PanelRenderPropArg = {
+    open: boolean
+    close: (focusableElement?: HTMLElement) => void
+  }
+
+  const PanelRenderFeatures = RenderFeatures.RenderStrategy | RenderFeatures.Static
+
+  type PanelPropsWeControl = "tabIndex"
+
+  export type PopoverPanelOwnProps = {
+    element?: HTMLElement
+    id?: string
+    focus?: boolean
+    anchor?: AnchorProps
+    portal?: boolean
+    modal?: boolean
+    transition?: boolean
+
+    // ItemsRenderFeatures
+    static?: boolean
+    unmount?: boolean
+  }
+
+  export type PopoverPanelProps = Props<typeof DEFAULT_PANEL_TAG, PanelRenderPropArg, PopoverPanelOwnProps>
+</script>
+
+<script lang="ts">
+  import { useId } from "../hooks/use-id.js"
+  import ElementOrComponent from "../utils/ElementOrComponent.svelte"
+  import { mergeProps } from "../utils/render.js"
+  import {
+    useFloatingPanel,
+    useFloatingPanelProps,
+    useResolvedAnchor,
+    type AnchorProps,
+  } from "../internal/floating.svelte.js"
+  import {
+    type PopoverAPIContext,
+    type PopoverPanelContext,
+    PopoverStates,
+    usePopoverAPIContext,
+    usePopoverContext,
+  } from "./context.svelte.js"
+  import { getOwnerDocument } from "../utils/owner.js"
+  import { clearOpenClosedContext, State, useOpenClosed } from "../internal/open-closed.js"
+  import { transitionDataAttributes, useTransition } from "../hooks/use-transition.svelte.js"
+  import { useOnDisappear } from "../hooks/use-on-disappear.svelte.js"
+  import { useScrollLock } from "../hooks/use-scroll-lock.svelte.js"
+  import { Focus, focusIn, FocusResult, getFocusableElements } from "../utils/focus-management.js"
+  import { useElementSize } from "../hooks/use-element-size.svelte.js"
+  import { useTabDirection, Direction as TabDirection } from "../hooks/use-tab-direction.svelte.js"
+  import { match } from "../utils/match.js"
+  import { microTask } from "../utils/microTask.js"
+  import { setContext, untrack } from "svelte"
+  import Portal from "../portal/Portal.svelte"
+  import Hidden, { HiddenFeatures } from "../internal/Hidden.svelte"
+
+  let internalId = useId()
+  let {
+    element = $bindable(),
+    id = `headlessui-popover-panel-${internalId}`,
+    focus = false,
+    anchor: rawAnchor,
+    portal: theirPortal = false,
+    modal = false,
+    transition = false,
+    ...theirProps
+  }: PopoverPanelProps = $props()
+
+  const context = usePopoverContext("PopoverPanel")
+  const api = usePopoverAPIContext("PopoverPanel")
+  const { close, isPortalled } = $derived(api)
+
+  const beforePanelSentinelId = `headlessui-focus-sentinel-before-${internalId}`
+  const afterPanelSentinelId = `headlessui-focus-sentinel-after-${internalId}`
+
+  const resolvedAnchor = useResolvedAnchor({
+    get anchor() {
+      return rawAnchor
+    },
+  })
+  const { anchor } = $derived(resolvedAnchor)
+  const floatingPanel = useFloatingPanel({
+    get placement() {
+      return anchor
+    },
+  })
+  const { setFloating, styles } = $derived(floatingPanel)
+  const getFloatingPanelProps = useFloatingPanelProps()
+
+  // Always enable `portal` functionality, when `anchor` is enabled
+  const portal = $derived(!!anchor || theirPortal)
+
+  $effect(() => {
+    if (anchor) setFloating(element ?? null)
+    untrack(() => context.setPanel(element))
+  })
+  const ownerDocument = $derived(getOwnerDocument(element))
+
+  $effect(() => {
+    id
+    return untrack(() => {
+      context.setPanelId(id)
+      return () => {
+        context.setPanelId(undefined)
+      }
+    })
+  })
+
+  const usesOpenClosedState = useOpenClosed()
+  const _transition = useTransition({
+    get enabled() {
+      return transition
+    },
+    get element() {
+      return element
+    },
+    get show() {
+      return usesOpenClosedState !== null
+        ? (usesOpenClosedState.value & State.Open) === State.Open
+        : context.popoverState === PopoverStates.Open
+    },
+  })
+  const { visible, data: transitionData } = $derived(_transition)
+
+  // Ensure we close the popover as soon as the button becomes hidden
+  useOnDisappear({
+    get enabled() {
+      return visible
+    },
+    get ref() {
+      return context.button
+    },
+    ondisappear: () => {
+      context.closePopover()
+    },
+  })
+
+  // Enable scroll locking when the popover is visible, and `modal` is enabled
+  const scrollLockEnabled = $derived(context.__demoMode ? false : modal && visible)
+  useScrollLock({
+    get enabled() {
+      return scrollLockEnabled
+    },
+    get ownerDocument() {
+      return ownerDocument
+    },
+  })
+
+  const handleKeyDown = (event: KeyboardEvent) => {
+    switch (event.key) {
+      case "Escape":
+        if (context.popoverState !== PopoverStates.Open) return
+        if (!element) return
+        if (ownerDocument?.activeElement && !element.contains(ownerDocument.activeElement)) {
+          return
+        }
+        event.preventDefault()
+        event.stopPropagation()
+        context.closePopover()
+        context.button?.focus()
+        break
+    }
+  }
+
+  // Unlink on "unmount" children
+  $effect(() => {
+    if (theirProps.static) return
+
+    if (context.popoverState === PopoverStates.Closed && (theirProps.unmount ?? true)) {
+      context.setPanel(undefined)
+    }
+  }) //, [state.popoverState, props.unmount, props.static, dispatch])
+
+  // Move focus within panel
+  $effect(() => {
+    if (context.__demoMode) return
+    if (!focus) return
+    if (context.popoverState !== PopoverStates.Open) return
+    if (!element) return
+
+    const activeElement = ownerDocument?.activeElement as HTMLElement
+    if (element.contains(activeElement)) return // Already focused within Dialog
+
+    focusIn(element, Focus.First)
+  }) //, [state.__demoMode, focus, internalPanelRef.current, state.popoverState])
+
+  const slot = $derived({
+    open: context.popoverState === PopoverStates.Open,
+    close,
+  } satisfies PanelRenderPropArg)
+
+  const buttonSize = useElementSize({
+    get element() {
+      return context.button ?? null
+    },
+    unit: true,
+  })
+  const ourProps: Record<string, any> = $derived(
+    mergeProps(anchor ? getFloatingPanelProps() : {}, {
+      id,
+      onkeydown: handleKeyDown,
+      onblur:
+        focus && context.popoverState === PopoverStates.Open
+          ? (event: FocusEvent) => {
+              let el = event.relatedTarget as HTMLElement
+              if (!el) return
+              if (!element) return
+              if (element.contains(el)) return
+
+              context.closePopover()
+
+              if (context.beforePanelSentinel?.contains?.(el) || context.afterPanelSentinel?.contains?.(el)) {
+                el.focus({ preventScroll: true })
+              }
+            }
+          : undefined,
+      tabIndex: -1,
+      style: [theirProps.style, styles, `--button-width: ${buttonSize.width}`].filter(Boolean).join("; "),
+      ...transitionDataAttributes(transitionData),
+    })
+  )
+
+  const direction = useTabDirection()
+  const handleBeforeFocus = () => {
+    let el = element as HTMLElement
+    if (!el) return
+
+    function run() {
+      match(direction.current, {
+        [TabDirection.Forwards]: () => {
+          // Try to focus the first thing in the panel. But if that fails (e.g.: there are no
+          // focusable elements, then we can move outside of the panel)
+          let result = focusIn(el, Focus.First)
+          if (result === FocusResult.Error) {
+            context.afterPanelSentinel?.focus()
+          }
+        },
+        [TabDirection.Backwards]: () => {
+          // Coming from the PopoverPanel (which is portalled to somewhere else). Let's redirect
+          // the focus to the PopoverButton again.
+          context.button?.focus({ preventScroll: true })
+        },
+      })
+    }
+
+    // TODO: Cleanup once we are using real browser tests
+    if (process.env.NODE_ENV === "test") {
+      microTask(run)
+    } else {
+      run()
+    }
+  }
+
+  const handleAfterFocus = () => {
+    let el = element as HTMLElement
+    if (!el) return
+
+    function run() {
+      match(direction.current, {
+        [TabDirection.Forwards]: () => {
+          if (!context.button) return
+
+          const elements = getFocusableElements()
+
+          const idx = elements.indexOf(context.button)
+          const before = elements.slice(0, idx + 1)
+          const after = elements.slice(idx + 1)
+
+          const combined = [...after, ...before]
+
+          // Ignore sentinel buttons and items inside the panel
+          for (const element of combined.slice()) {
+            if (element.dataset.headlessuiFocusGuard === "true" || element?.contains(element)) {
+              let idx = combined.indexOf(element)
+              if (idx !== -1) combined.splice(idx, 1)
+            }
+          }
+
+          focusIn(combined, Focus.First, { sorted: false })
+        },
+        [TabDirection.Backwards]: () => {
+          // Try to focus the first thing in the panel. But if that fails (e.g.: there are no
+          // focusable elements, then we can move outside of the panel)
+          let result = focusIn(el, Focus.Previous)
+          if (result === FocusResult.Error) {
+            context.button?.focus()
+          }
+        },
+      })
+    }
+
+    // TODO: Cleanup once we are using real browser tests
+    if (process.env.NODE_ENV === "test") {
+      microTask(run)
+    } else {
+      run()
+    }
+  }
+
+  clearOpenClosedContext()
+  setContext<PopoverPanelContext>("PopoverPanelContext", {
+    get value() {
+      return id
+    },
+  })
+  setContext<PopoverAPIContext>("PopoverAPIContext", {
+    get close() {
+      return close
+    },
+    get isPortalled() {
+      return isPortalled
+    },
+  })
+</script>
+
+<Portal enabled={portal ? theirProps.static || visible : false}>
+  {#if visible && isPortalled}
+    <Hidden asChild id={beforePanelSentinelId} features={HiddenFeatures.Focusable}>
+      {#snippet children({ props })}
+        <button
+          {...props}
+          type="button"
+          data-headlessui-focus-guard
+          onfocus={handleBeforeFocus}
+          bind:this={context.beforePanelSentinel}>&zwnj;</button
+        >
+      {/snippet}
+    </Hidden>
+  {/if}
+  <ElementOrComponent
+    {ourProps}
+    {theirProps}
+    slots={slot}
+    defaultTag={DEFAULT_PANEL_TAG}
+    features={PanelRenderFeatures}
+    {visible}
+    name="PopoverPanel"
+    bind:element
+  />
+  {#if visible && isPortalled}
+    <Hidden asChild id={afterPanelSentinelId} features={HiddenFeatures.Focusable}>
+      {#snippet children({ props })}
+        <button
+          {...props}
+          type="button"
+          data-headlessui-focus-guard
+          onfocus={handleAfterFocus}
+          bind:this={context.afterPanelSentinel}>&zwnj;</button
+        >
+      {/snippet}
+    </Hidden>
+  {/if}
+</Portal>

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

@@ -0,0 +1,22 @@
+import type { Props } from "../utils/types.js";
+declare const DEFAULT_PANEL_TAG: "div";
+export type PanelRenderPropArg = {
+    open: boolean;
+    close: (focusableElement?: HTMLElement) => void;
+};
+export type PopoverPanelOwnProps = {
+    element?: HTMLElement;
+    id?: string;
+    focus?: boolean;
+    anchor?: AnchorProps;
+    portal?: boolean;
+    modal?: boolean;
+    transition?: boolean;
+    static?: boolean;
+    unmount?: boolean;
+};
+export type PopoverPanelProps = Props<typeof DEFAULT_PANEL_TAG, PanelRenderPropArg, PopoverPanelOwnProps>;
+import { type AnchorProps } from "../internal/floating.svelte.js";
+declare const PopoverPanel: import("svelte").Component<PopoverPanelProps, {}, "element">;
+type PopoverPanel = ReturnType<typeof PopoverPanel>;
+export default PopoverPanel;

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

@@ -0,0 +1,51 @@
+import type { MouseEventHandler } from "svelte/elements";
+export type MouseEvent<T extends EventTarget> = Parameters<MouseEventHandler<T>>[0];
+export declare enum PopoverStates {
+    Open = 0,
+    Closed = 1
+}
+export interface StateDefinition {
+    popoverState: PopoverStates;
+    buttons: symbol[];
+    button?: HTMLElement;
+    buttonId?: string;
+    panel?: HTMLElement;
+    panelId?: string;
+    beforePanelSentinel?: HTMLButtonElement;
+    afterPanelSentinel?: HTMLButtonElement;
+    afterButtonSentinel?: HTMLButtonElement;
+    __demoMode: boolean;
+}
+interface ActionDefinition {
+    togglePopover(): void;
+    closePopover(): void;
+    setButton(button: HTMLElement): void;
+    setButtonId(buttonId: string | undefined): void;
+    setPanel(panel?: HTMLElement): void;
+    setPanelId(panelId?: string): void;
+}
+export type PopoverContext = StateDefinition & ActionDefinition;
+export declare const createPopoverContext: (initialState: StateDefinition) => PopoverContext;
+export declare function usePopoverContext(component: string): PopoverContext;
+export type PopoverAPIContext = {
+    close(focusableElement?: HTMLElement | MouseEvent<HTMLElement>): void;
+    isPortalled: boolean;
+};
+export declare function usePopoverAPIContext(component: string): PopoverAPIContext;
+export type PopoverGroupContext = {
+    registerPopover(registerBag: PopoverRegisterBag): void;
+    unregisterPopover(registerBag: PopoverRegisterBag): void;
+    isFocusWithinPopoverGroup(): boolean;
+    closeOthers(buttonId: string): void;
+};
+export declare function usePopoverGroupContext(): PopoverGroupContext | undefined;
+export type PopoverPanelContext = {
+    value: string;
+};
+export declare function usePopoverPanelContext(): PopoverPanelContext | undefined;
+export interface PopoverRegisterBag {
+    buttonId?: string;
+    panelId?: string;
+    close(): void;
+}
+export {};

package/dist/popover/context.svelte.js

@@ -0,0 +1,108 @@
+import { getContext, setContext } from "svelte";
+export var PopoverStates;
+(function (PopoverStates) {
+    PopoverStates[PopoverStates["Open"] = 0] = "Open";
+    PopoverStates[PopoverStates["Closed"] = 1] = "Closed";
+})(PopoverStates || (PopoverStates = {}));
+export const createPopoverContext = (initialState) => {
+    const _state = $state(initialState);
+    const context = {
+        get popoverState() {
+            return _state.popoverState;
+        },
+        get buttons() {
+            return _state.buttons;
+        },
+        get button() {
+            return _state.button;
+        },
+        get buttonId() {
+            return _state.buttonId;
+        },
+        get panel() {
+            return _state.panel;
+        },
+        get panelId() {
+            return _state.panelId;
+        },
+        get beforePanelSentinel() {
+            return _state.beforePanelSentinel;
+        },
+        set beforePanelSentinel(value) {
+            _state.beforePanelSentinel = value;
+        },
+        get afterPanelSentinel() {
+            return _state.afterPanelSentinel;
+        },
+        set afterPanelSentinel(value) {
+            _state.afterPanelSentinel = value;
+        },
+        get afterButtonSentinel() {
+            return _state.afterButtonSentinel;
+        },
+        set afterButtonSentinel(value) {
+            _state.afterButtonSentinel = value;
+        },
+        get __demoMode() {
+            return _state.__demoMode;
+        },
+        togglePopover() {
+            _state.__demoMode = false;
+            _state.popoverState = _state.popoverState === PopoverStates.Closed ? PopoverStates.Open : PopoverStates.Closed;
+        },
+        closePopover() {
+            if (_state.popoverState === PopoverStates.Closed)
+                return;
+            _state.__demoMode = false;
+            _state.popoverState = PopoverStates.Closed;
+        },
+        setButton(button) {
+            if (_state.button === button)
+                return;
+            _state.button = button;
+        },
+        setButtonId(buttonId) {
+            if (_state.buttonId === buttonId)
+                return;
+            _state.buttonId = buttonId;
+        },
+        setPanel(panel) {
+            if (_state.panel === panel)
+                return;
+            _state.panel = panel;
+        },
+        setPanelId(panelId) {
+            if (_state.panelId === panelId)
+                return;
+            _state.panelId = panelId;
+        },
+    };
+    setContext("PopoverContext", context);
+    return context;
+};
+export function usePopoverContext(component) {
+    const context = getContext("PopoverContext");
+    if (!context) {
+        const err = new Error(`<${component} /> is missing a parent <Popover /> component.`);
+        if (Error.captureStackTrace)
+            Error.captureStackTrace(err, usePopoverContext);
+        throw err;
+    }
+    return context;
+}
+export function usePopoverAPIContext(component) {
+    const context = getContext("PopoverAPIContext");
+    if (!context) {
+        const err = new Error(`<${component} /> is missing a parent <Popover /> component.`);
+        if (Error.captureStackTrace)
+            Error.captureStackTrace(err, usePopoverAPIContext);
+        throw err;
+    }
+    return context;
+}
+export function usePopoverGroupContext() {
+    return getContext("PopoverGroupContext");
+}
+export function usePopoverPanelContext() {
+    return getContext("PopoverPanelContext");
+}

package/dist/popover/index.d.ts

@@ -0,0 +1,5 @@
+export { default as Popover, type PopoverProps, type PopoverRenderPropArg as PopoverSlot, type PopoverOwnProps, } from "./Popover.svelte";
+export { default as PopoverBackdrop, type PopoverBackdropProps, type BackdropRenderPropArg as PopoverBackdropSlot, type PopoverBackdropOwnProps, } from "./PopoverBackdrop.svelte";
+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";

package/dist/popover/index.js

@@ -0,0 +1,5 @@
+export { default as Popover, } from "./Popover.svelte";
+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";

package/dist/portal/InternalPortal.svelte

@@ -3,7 +3,7 @@
   import { getOwnerDocument } from "../utils/owner.js"
   import { getContext, onMount, setContext } from "svelte"
   import { env } from "../utils/env.js"
-  import type { ElementType, Props } from "../utils/types.js"
+  import type { Props } from "../utils/types.js"
   import type { PortalGroupContext } from "./PortalGroup.svelte"
 
   function usePortalTarget(options: { element: HTMLElement | null }): { readonly target: HTMLElement | null } {
@@ -56,7 +56,7 @@
 
   // ---
 
-  type PortalParentContext = {
+  export type PortalParentContext = {
     register: (portal: HTMLElement) => () => void
     unregister: (portal: HTMLElement) => void
     readonly portals: HTMLElement[]
@@ -85,7 +85,6 @@
         return portals
       },
     }
-    setContext("PortalParentContext", context)
 
     return context
   }
@@ -93,27 +92,27 @@
   // ---
 
   export const DEFAULT_PORTAL_TAG = "div"
-  type PortalRenderPropArg = {}
+  export type PortalRenderPropArg = {}
   type PortalPropsWeControl = never
 
-  export type PortalProps<TTag extends ElementType = typeof DEFAULT_PORTAL_TAG> = Props<
-    TTag,
+  export type PortalProps = Props<
+    typeof DEFAULT_PORTAL_TAG,
     PortalRenderPropArg,
-    PortalPropsWeControl,
     {
+      element?: HTMLElement
       enabled?: boolean
     }
   >
 </script>
 
-<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_PORTAL_TAG">
+<script lang="ts">
   import ElementOrComponent from "../utils/ElementOrComponent.svelte"
 
-  let { ref = $bindable(), ...theirProps }: { as?: TTag } & PortalProps<TTag> = $props()
+  let { element = $bindable(), ...theirProps }: PortalProps = $props()
 
   const portalTarget = usePortalTarget({
     get element() {
-      return ref ?? null
+      return element ?? null
     },
   })
   const { target } = $derived(portalTarget)
@@ -121,24 +120,24 @@
   //const ready = useServerHandoffComplete()
 
   $effect(() => {
-    if (!target || !ref) return
+    if (!target || !element) return
 
     // Element already exists in target, always calling target.appendChild(element) will cause a
     // brief unmount/remount.
-    if (ref.parentNode !== target) {
-      ref.setAttribute("data-headlessui-portal", "")
-      target.appendChild(ref)
+    if (element.parentNode !== target) {
+      element.setAttribute("data-headlessui-portal", "")
+      target.appendChild(element)
     }
   })
 
   onMount(() => {
-    if (parent) parent.register(ref!)
+    if (parent) parent.register(element!)
 
     return () => {
-      if (!target || !ref) return
+      if (!target || !element) return
 
-      if (ref instanceof Node && target.contains(ref)) {
-        target.removeChild(ref)
+      if (element instanceof Node && target.contains(element)) {
+        target.removeChild(element)
       }
 
       if (target.childNodes.length <= 0) {
@@ -149,5 +148,5 @@
 </script>
 
 {#if target}
-  <ElementOrComponent {theirProps} defaultTag={DEFAULT_PORTAL_TAG} name="InternalPortal" bind:ref />
+  <ElementOrComponent {theirProps} defaultTag={DEFAULT_PORTAL_TAG} name="InternalPortal" bind:element />
 {/if}