Files
eewing cf73cd3b4c INIT
2026-02-17 14:10:16 -06:00

137 lines
2.9 KiB
Svelte

<script lang="ts">
import { mergeProps } from "svelte-toolbelt";
import ScrollLock from "../scroll-lock/scroll-lock.svelte";
import type { PopperLayerImplProps } from "./types.js";
import PopperContent from "./popper-content.svelte";
import EscapeLayer from "../escape-layer/escape-layer.svelte";
import DismissibleLayer from "../dismissible-layer/dismissible-layer.svelte";
import TextSelectionLayer from "../text-selection-layer/text-selection-layer.svelte";
import FocusScope from "../focus-scope/focus-scope.svelte";
let {
popper,
onEscapeKeydown,
escapeKeydownBehavior,
preventOverflowTextSelection,
id,
onPointerDown,
onPointerUp,
side,
sideOffset,
align,
alignOffset,
arrowPadding,
avoidCollisions,
collisionBoundary,
collisionPadding,
sticky,
hideWhenDetached,
updatePositionStrategy,
strategy,
dir,
preventScroll,
wrapperId,
style,
onPlaced,
onInteractOutside,
onCloseAutoFocus,
onOpenAutoFocus,
onFocusOutside,
interactOutsideBehavior = "close",
loop,
trapFocus = true,
isValidEvent = () => false,
customAnchor = null,
isStatic = false,
enabled,
ref,
tooltip = false,
contentPointerEvents = "auto",
...restProps
}: Omit<PopperLayerImplProps, "open" | "children" | "shouldRender"> & {
enabled: boolean;
contentPointerEvents?: "auto" | "none";
} = $props();
</script>
<PopperContent
{isStatic}
{id}
{side}
{sideOffset}
{align}
{alignOffset}
{arrowPadding}
{avoidCollisions}
{collisionBoundary}
{collisionPadding}
{sticky}
{hideWhenDetached}
{updatePositionStrategy}
{strategy}
{dir}
{wrapperId}
{style}
{onPlaced}
{customAnchor}
{enabled}
{tooltip}
>
{#snippet content({ props: floatingProps, wrapperProps })}
{#if restProps.forceMount && enabled}
<ScrollLock {preventScroll} />
{:else if !restProps.forceMount}
<ScrollLock {preventScroll} />
{/if}
<FocusScope
{onOpenAutoFocus}
{onCloseAutoFocus}
{loop}
{enabled}
{trapFocus}
forceMount={restProps.forceMount}
{ref}
>
{#snippet focusScope({ props: focusScopeProps })}
<EscapeLayer {onEscapeKeydown} {escapeKeydownBehavior} {enabled} {ref}>
<DismissibleLayer
{id}
{onInteractOutside}
{onFocusOutside}
{interactOutsideBehavior}
{isValidEvent}
{enabled}
{ref}
>
{#snippet children({ props: dismissibleProps })}
<TextSelectionLayer
{id}
{preventOverflowTextSelection}
{onPointerDown}
{onPointerUp}
{enabled}
{ref}
>
{@render popper?.({
props: mergeProps(
restProps,
floatingProps,
dismissibleProps,
focusScopeProps,
{
style: {
pointerEvents: contentPointerEvents,
},
}
),
wrapperProps,
})}
</TextSelectionLayer>
{/snippet}
</DismissibleLayer>
</EscapeLayer>
{/snippet}
</FocusScope>
{/snippet}
</PopperContent>