INIT
This commit is contained in:
+2
@@ -0,0 +1,2 @@
|
||||
export { default as PopperLayer } from "./popper-layer.svelte";
|
||||
export type { PopperLayerProps } from "./types.js";
|
||||
+1
@@ -0,0 +1 @@
|
||||
export { default as PopperLayer } from "./popper-layer.svelte";
|
||||
+18
@@ -0,0 +1,18 @@
|
||||
<script lang="ts">
|
||||
import FloatingLayerContentStatic from "../floating-layer/components/floating-layer-content-static.svelte";
|
||||
import FloatingLayerContent from "../floating-layer/components/floating-layer-content.svelte";
|
||||
import type { FloatingLayerContentImplProps } from "../floating-layer/types.js";
|
||||
|
||||
let {
|
||||
content,
|
||||
isStatic = false,
|
||||
onPlaced,
|
||||
...restProps
|
||||
}: FloatingLayerContentImplProps & { isStatic: boolean } = $props();
|
||||
</script>
|
||||
|
||||
{#if isStatic}
|
||||
<FloatingLayerContentStatic {content} {onPlaced} />
|
||||
{:else}
|
||||
<FloatingLayerContent {content} {onPlaced} {...restProps} />
|
||||
{/if}
|
||||
+7
@@ -0,0 +1,7 @@
|
||||
import type { FloatingLayerContentImplProps } from "../floating-layer/types.js";
|
||||
type $$ComponentProps = FloatingLayerContentImplProps & {
|
||||
isStatic: boolean;
|
||||
};
|
||||
declare const PopperContent: import("svelte").Component<$$ComponentProps, {}, "">;
|
||||
type PopperContent = ReturnType<typeof PopperContent>;
|
||||
export default PopperContent;
|
||||
Generated
Vendored
+85
@@ -0,0 +1,85 @@
|
||||
<script lang="ts">
|
||||
import type { PopperLayerImplProps } from "./types.js";
|
||||
import PopperLayerInner from "./popper-layer-inner.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,
|
||||
...restProps
|
||||
}: Omit<PopperLayerImplProps, "open"> & {
|
||||
enabled: boolean;
|
||||
} = $props();
|
||||
</script>
|
||||
|
||||
<PopperLayerInner
|
||||
{popper}
|
||||
{onEscapeKeydown}
|
||||
{escapeKeydownBehavior}
|
||||
{preventOverflowTextSelection}
|
||||
{id}
|
||||
{onPointerDown}
|
||||
{onPointerUp}
|
||||
{side}
|
||||
{sideOffset}
|
||||
{align}
|
||||
{alignOffset}
|
||||
{arrowPadding}
|
||||
{avoidCollisions}
|
||||
{collisionBoundary}
|
||||
{collisionPadding}
|
||||
{sticky}
|
||||
{hideWhenDetached}
|
||||
{updatePositionStrategy}
|
||||
{strategy}
|
||||
{dir}
|
||||
{preventScroll}
|
||||
{wrapperId}
|
||||
{style}
|
||||
{onPlaced}
|
||||
{customAnchor}
|
||||
{isStatic}
|
||||
{enabled}
|
||||
{onInteractOutside}
|
||||
{onCloseAutoFocus}
|
||||
{onOpenAutoFocus}
|
||||
{interactOutsideBehavior}
|
||||
{loop}
|
||||
{trapFocus}
|
||||
{isValidEvent}
|
||||
{onFocusOutside}
|
||||
{...restProps}
|
||||
forceMount={true}
|
||||
/>
|
||||
Generated
Vendored
+7
@@ -0,0 +1,7 @@
|
||||
import type { PopperLayerImplProps } from "./types.js";
|
||||
type $$ComponentProps = Omit<PopperLayerImplProps, "open"> & {
|
||||
enabled: boolean;
|
||||
};
|
||||
declare const PopperLayerForceMount: import("svelte").Component<$$ComponentProps, {}, "">;
|
||||
type PopperLayerForceMount = ReturnType<typeof PopperLayerForceMount>;
|
||||
export default PopperLayerForceMount;
|
||||
+136
@@ -0,0 +1,136 @@
|
||||
<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>
|
||||
Generated
Vendored
+8
@@ -0,0 +1,8 @@
|
||||
import type { PopperLayerImplProps } from "./types.js";
|
||||
type $$ComponentProps = Omit<PopperLayerImplProps, "open" | "children" | "shouldRender"> & {
|
||||
enabled: boolean;
|
||||
contentPointerEvents?: "auto" | "none";
|
||||
};
|
||||
declare const PopperLayerInner: import("svelte").Component<$$ComponentProps, {}, "">;
|
||||
type PopperLayerInner = ReturnType<typeof PopperLayerInner>;
|
||||
export default PopperLayerInner;
|
||||
+88
@@ -0,0 +1,88 @@
|
||||
<script lang="ts">
|
||||
import type { PopperLayerImplProps } from "./types.js";
|
||||
import PopperLayerInner from "./popper-layer-inner.svelte";
|
||||
|
||||
let {
|
||||
popper,
|
||||
open,
|
||||
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,
|
||||
ref,
|
||||
shouldRender,
|
||||
...restProps
|
||||
}: PopperLayerImplProps = $props();
|
||||
</script>
|
||||
|
||||
{#if shouldRender}
|
||||
<PopperLayerInner
|
||||
{popper}
|
||||
{onEscapeKeydown}
|
||||
{escapeKeydownBehavior}
|
||||
{preventOverflowTextSelection}
|
||||
{id}
|
||||
{onPointerDown}
|
||||
{onPointerUp}
|
||||
{side}
|
||||
{sideOffset}
|
||||
{align}
|
||||
{alignOffset}
|
||||
{arrowPadding}
|
||||
{avoidCollisions}
|
||||
{collisionBoundary}
|
||||
{collisionPadding}
|
||||
{sticky}
|
||||
{hideWhenDetached}
|
||||
{updatePositionStrategy}
|
||||
{strategy}
|
||||
{dir}
|
||||
{preventScroll}
|
||||
{wrapperId}
|
||||
{style}
|
||||
{onPlaced}
|
||||
{customAnchor}
|
||||
{isStatic}
|
||||
enabled={open}
|
||||
{onInteractOutside}
|
||||
{onCloseAutoFocus}
|
||||
{onOpenAutoFocus}
|
||||
{interactOutsideBehavior}
|
||||
{loop}
|
||||
{trapFocus}
|
||||
{isValidEvent}
|
||||
{onFocusOutside}
|
||||
forceMount={false}
|
||||
{ref}
|
||||
{...restProps}
|
||||
/>
|
||||
{/if}
|
||||
+4
@@ -0,0 +1,4 @@
|
||||
import type { PopperLayerImplProps } from "./types.js";
|
||||
declare const PopperLayer: import("svelte").Component<PopperLayerImplProps, {}, "">;
|
||||
type PopperLayer = ReturnType<typeof PopperLayer>;
|
||||
export default PopperLayer;
|
||||
+43
@@ -0,0 +1,43 @@
|
||||
import type { Snippet } from "svelte";
|
||||
import type { EscapeLayerImplProps, EscapeLayerProps } from "../escape-layer/types.js";
|
||||
import type { DismissibleLayerImplProps, DismissibleLayerProps } from "../dismissible-layer/types.js";
|
||||
import type { FloatingLayerContentImplProps, FloatingLayerContentProps } from "../floating-layer/types.js";
|
||||
import type { TextSelectionLayerImplProps, TextSelectionLayerProps } from "../text-selection-layer/types.js";
|
||||
import type { PresenceLayerImplProps, PresenceLayerProps } from "../presence-layer/types.js";
|
||||
import type { FocusScopeImplProps, FocusScopeProps } from "../focus-scope/types.js";
|
||||
import type { ScrollLockProps } from "../scroll-lock/index.js";
|
||||
import type { Direction } from "../../../shared/index.js";
|
||||
export type PopperLayerProps = EscapeLayerProps & Omit<DismissibleLayerProps, "onInteractOutsideStart"> & FloatingLayerContentProps & PresenceLayerProps & TextSelectionLayerProps & FocusScopeProps & Omit<ScrollLockProps, "restoreScrollDelay">;
|
||||
export type PopperLayerStaticProps = EscapeLayerProps & Omit<DismissibleLayerProps, "onInteractOutsideStart"> & PresenceLayerProps & TextSelectionLayerProps & FocusScopeProps & Omit<ScrollLockProps, "restoreScrollDelay"> & {
|
||||
content?: Snippet<[{
|
||||
props: Record<string, unknown>;
|
||||
}]>;
|
||||
dir?: Direction;
|
||||
};
|
||||
export type PopperLayerImplProps = Omit<EscapeLayerImplProps & DismissibleLayerImplProps & FloatingLayerContentImplProps & Omit<PresenceLayerImplProps, "presence"> & TextSelectionLayerImplProps & FocusScopeImplProps & {
|
||||
popper: Snippet<[
|
||||
{
|
||||
props: Record<string, unknown>;
|
||||
wrapperProps: Record<string, unknown>;
|
||||
}
|
||||
]>;
|
||||
isStatic?: boolean;
|
||||
/**
|
||||
* Tooltips are special in that they are commonly composed
|
||||
* with other floating components, where the same trigger is
|
||||
* used for both the tooltip and the popover.
|
||||
*
|
||||
* For situations like this, we need to use a different context
|
||||
* symbol so that conflicts don't occur.
|
||||
*/
|
||||
tooltip?: boolean;
|
||||
/**
|
||||
* Whether the popper layer should be rendered.
|
||||
*/
|
||||
shouldRender: boolean;
|
||||
/**
|
||||
* Override for the content's pointer-events style.
|
||||
* @default "auto"
|
||||
*/
|
||||
contentPointerEvents?: "auto" | "none";
|
||||
}, "enabled">;
|
||||
+1
@@ -0,0 +1 @@
|
||||
export {};
|
||||
Reference in New Issue
Block a user