137 lines
2.9 KiB
Svelte
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>
|