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

package/dist/popover/PopoverPanel.svelte

@@ -1,323 +1,241 @@
-<script lang="ts" module>
-  import type { ElementType, Props, PropsOf } from "../utils/types.js"
-  import { RenderFeatures } from "../utils/render.js"
-
-  const DEFAULT_PANEL_TAG = "div" as const
-  type PanelRenderPropArg = {
-    open: boolean
-    close: (focusableElement?: HTMLElement) => void
-  }
-
-  const PanelRenderFeatures = RenderFeatures.RenderStrategy | RenderFeatures.Static
-
-  type PanelPropsWeControl = "tabIndex"
-
-  export type PopoverPanelProps<TTag extends ElementType = typeof DEFAULT_PANEL_TAG> = Props<
-    TTag,
-    PanelRenderPropArg,
-    PanelPropsWeControl,
-    {
-      focus?: boolean
-      anchor?: AnchorProps
-      portal?: boolean
-      modal?: boolean
-      transition?: boolean
-
-      // ItemsRenderFeatures
-      static?: boolean
-      unmount?: boolean
-    }
-  >
+<script lang="ts" module>import { RenderFeatures } from "../utils/render.js";
+const DEFAULT_PANEL_TAG = "div";
+const PanelRenderFeatures = RenderFeatures.RenderStrategy | RenderFeatures.Static;
 </script>
 
-<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_PANEL_TAG">
-  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 {
-    ref = $bindable(),
-    id = `headlessui-popover-panel-${internalId}` as PropsOf<TTag>["id"],
-    focus = false,
-    anchor: rawAnchor,
-    portal: theirPortal = false,
-    modal = false,
-    transition = false,
-    ...theirProps
-  }: { as?: TTag } & PopoverPanelProps<TTag> = $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(ref ?? null)
-    untrack(() => context.setPanel(ref))
-  })
-  const ownerDocument = $derived(getOwnerDocument(ref))
-
-  $effect(() => {
-    id
-    return untrack(() => {
-      context.setPanelId(id)
-      return () => {
-        context.setPanelId(undefined)
+<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_PANEL_TAG">import { useId } from "../hooks/use-id.js";
+import ElementOrComponent from "../utils/ElementOrComponent.svelte";
+import { mergeProps } from "../utils/render.js";
+import {
+  useFloatingPanel,
+  useFloatingPanelProps,
+  useResolvedAnchor
+} from "../internal/floating.svelte.js";
+import {
+  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 {
+  ref = $bindable(),
+  id = `headlessui-popover-panel-${internalId}`,
+  focus = false,
+  anchor: rawAnchor,
+  portal: theirPortal = false,
+  modal = false,
+  transition = false,
+  ...theirProps
+} = $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();
+const portal = $derived(!!anchor || theirPortal);
+$effect(() => {
+  if (anchor) setFloating(ref ?? null);
+  untrack(() => context.setPanel(ref));
+});
+const ownerDocument = $derived(getOwnerDocument(ref));
+$effect(() => {
+  id;
+  return untrack(() => {
+    context.setPanelId(id);
+    return () => {
+      context.setPanelId(void 0);
+    };
+  });
+});
+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 : context.popoverState === PopoverStates.Open;
+  }
+});
+const { visible, data: transitionData } = $derived(_transition);
+useOnDisappear({
+  get enabled() {
+    return visible;
+  },
+  get ref() {
+    return context.button;
+  },
+  ondisappear: () => {
+    context.closePopover();
+  }
+});
+const scrollLockEnabled = $derived(context.__demoMode ? false : modal && visible);
+useScrollLock({
+  get enabled() {
+    return scrollLockEnabled;
+  },
+  get ownerDocument() {
+    return ownerDocument;
+  }
+});
+const handleKeyDown = (event) => {
+  switch (event.key) {
+    case "Escape":
+      if (context.popoverState !== PopoverStates.Open) return;
+      if (!ref) return;
+      if (ownerDocument?.activeElement && !ref.contains(ownerDocument.activeElement)) {
+        return;
       }
-    })
-  })
-
-  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
-        : 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
-    },
+      event.preventDefault();
+      event.stopPropagation();
+      context.closePopover();
+      context.button?.focus();
+      break;
+  }
+};
+$effect(() => {
+  if (theirProps.static) return;
+  if (context.popoverState === PopoverStates.Closed && (theirProps.unmount ?? true)) {
+    context.setPanel(void 0);
+  }
+});
+$effect(() => {
+  if (context.__demoMode) return;
+  if (!focus) return;
+  if (context.popoverState !== PopoverStates.Open) return;
+  if (!ref) return;
+  const activeElement = ownerDocument?.activeElement;
+  if (ref.contains(activeElement)) return;
+  focusIn(ref, Focus.First);
+});
+const slot = $derived({
+  open: context.popoverState === PopoverStates.Open,
+  close
+});
+const buttonSize = useElementSize({
+  get element() {
+    return context.button ?? null;
+  },
+  unit: true
+});
+const ourProps = $derived(
+  mergeProps(anchor ? getFloatingPanelProps() : {}, {
+    id,
+    onkeydown: handleKeyDown,
+    onblur: focus && context.popoverState === PopoverStates.Open ? (event) => {
+      let el = event.relatedTarget;
+      if (!el) return;
+      if (!ref) return;
+      if (ref.contains(el)) return;
+      context.closePopover();
+      if (context.beforePanelSentinel?.contains?.(el) || context.afterPanelSentinel?.contains?.(el)) {
+        el.focus({ preventScroll: true });
+      }
+    } : void 0,
+    tabIndex: -1,
+    style: [theirProps.style, styles, `--button-width: ${buttonSize.width}`].filter(Boolean).join("; "),
+    ...transitionDataAttributes(transitionData)
   })
-
-  const handleKeyDown = (event: KeyboardEvent) => {
-    switch (event.key) {
-      case "Escape":
-        if (context.popoverState !== PopoverStates.Open) return
-        if (!ref) return
-        if (ownerDocument?.activeElement && !ref.contains(ownerDocument.activeElement)) {
-          return
+);
+const direction = useTabDirection();
+const handleBeforeFocus = () => {
+  let el = ref;
+  if (!el) return;
+  function run() {
+    match(direction.current, {
+      [TabDirection.Forwards]: () => {
+        let result = focusIn(el, Focus.First);
+        if (result === FocusResult.Error) {
+          context.afterPanelSentinel?.focus();
         }
-        event.preventDefault()
-        event.stopPropagation()
-        context.closePopover()
-        context.button?.focus()
-        break
-    }
+      },
+      [TabDirection.Backwards]: () => {
+        context.button?.focus({ preventScroll: true });
+      }
+    });
   }
-
-  // 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 (!ref) return
-
-    const activeElement = ownerDocument?.activeElement as HTMLElement
-    if (ref.contains(activeElement)) return // Already focused within Dialog
-
-    focusIn(ref, 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 (!ref) return
-              if (ref.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 = ref 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()
-    }
+  if (process.env.NODE_ENV === "test") {
+    microTask(run);
+  } else {
+    run();
   }
-
-  const handleAfterFocus = () => {
-    let el = ref 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" || ref?.contains(element)) {
-              let idx = combined.indexOf(element)
-              if (idx !== -1) combined.splice(idx, 1)
-            }
+};
+const handleAfterFocus = () => {
+  let el = ref;
+  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];
+        for (const element of combined.slice()) {
+          if (element.dataset.headlessuiFocusGuard === "true" || ref?.contains(element)) {
+            let idx2 = combined.indexOf(element);
+            if (idx2 !== -1) combined.splice(idx2, 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()
-    }
+        }
+        focusIn(combined, Focus.First, { sorted: false });
+      },
+      [TabDirection.Backwards]: () => {
+        let result = focusIn(el, Focus.Previous);
+        if (result === FocusResult.Error) {
+          context.button?.focus();
+        }
+      }
+    });
   }
-
-  clearOpenClosedContext()
-  setContext<PopoverPanelContext>("PopoverPanelContext", {
-    get value() {
-      return id
-    },
-  })
-  setContext<PopoverAPIContext>("PopoverAPIContext", {
-    get close() {
-      return close
-    },
-    get isPortalled() {
-      return isPortalled
-    },
-  })
+  if (process.env.NODE_ENV === "test") {
+    microTask(run);
+  } else {
+    run();
+  }
+};
+clearOpenClosedContext();
+setContext("PopoverPanelContext", {
+  get value() {
+    return id;
+  }
+});
+setContext("PopoverAPIContext", {
+  get close() {
+    return close;
+  },
+  get isPortalled() {
+    return isPortalled;
+  }
+});
 </script>
 
 <Portal enabled={portal ? theirProps.static || visible : false}>