INIT
CI / build (push) Has been skipped
CI / deploy (push) Successful in 1m11s

This commit is contained in:
eewing
2026-02-18 15:17:47 -06:00
parent e74c106f85
commit ec317eb17c
11532 changed files with 1631690 additions and 1 deletions
@@ -0,0 +1,8 @@
<script lang="ts">
import type { PopoverArrowProps } from "../types.js";
import FloatingLayerArrow from "../../utilities/floating-layer/components/floating-layer-arrow.svelte";
let { ref = $bindable(null), ...restProps }: PopoverArrowProps = $props();
</script>
<FloatingLayerArrow bind:ref {...restProps} data-popover-arrow="" />
@@ -0,0 +1,3 @@
declare const PopoverArrow: import("svelte").Component<import("../../utilities/arrow/types.js").ArrowProps, {}, "ref">;
type PopoverArrow = ReturnType<typeof PopoverArrow>;
export default PopoverArrow;
+33
View File
@@ -0,0 +1,33 @@
<script lang="ts">
import { boxWith, mergeProps } from "svelte-toolbelt";
import type { PopoverCloseProps } from "../types.js";
import { PopoverCloseState } from "../popover.svelte.js";
import { createId } from "../../../internal/create-id.js";
const uid = $props.id();
let {
child,
children,
id = createId(uid),
ref = $bindable(null),
...restProps
}: PopoverCloseProps = $props();
const closeState = PopoverCloseState.create({
id: boxWith(() => id),
ref: boxWith(
() => ref,
(v) => (ref = v)
),
});
const mergedProps = $derived(mergeProps(restProps, closeState.props));
</script>
{#if child}
{@render child({ props: mergedProps })}
{:else}
<button {...mergedProps}>
{@render children?.()}
</button>
{/if}
@@ -0,0 +1,4 @@
import type { PopoverCloseProps } from "../types.js";
declare const PopoverClose: import("svelte").Component<PopoverCloseProps, {}, "ref">;
type PopoverClose = ReturnType<typeof PopoverClose>;
export default PopoverClose;
@@ -0,0 +1,104 @@
<script lang="ts">
import { boxWith, mergeProps } from "svelte-toolbelt";
import type { PopoverContentStaticProps } from "../types.js";
import { PopoverContentState } from "../popover.svelte.js";
import PopperLayer from "../../utilities/popper-layer/popper-layer.svelte";
import { noop } from "../../../internal/noop.js";
import { createId } from "../../../internal/create-id.js";
import { getFloatingContentCSSVars } from "../../../internal/floating-svelte/floating-utils.svelte.js";
import PopperLayerForceMount from "../../utilities/popper-layer/popper-layer-force-mount.svelte";
const uid = $props.id();
let {
child,
children,
ref = $bindable(null),
id = createId(uid),
forceMount = false,
onCloseAutoFocus = noop,
onEscapeKeydown = noop,
onInteractOutside = noop,
trapFocus = true,
preventScroll = false,
style,
...restProps
}: PopoverContentStaticProps = $props();
const contentState = PopoverContentState.create({
id: boxWith(() => id),
ref: boxWith(
() => ref,
(v) => (ref = v)
),
onInteractOutside: boxWith(() => onInteractOutside),
onEscapeKeydown: boxWith(() => onEscapeKeydown),
customAnchor: boxWith(() => null),
});
const mergedProps = $derived(mergeProps(restProps, contentState.props));
</script>
{#if forceMount}
<PopperLayerForceMount
{...mergedProps}
{...contentState.popperProps}
ref={contentState.opts.ref}
isStatic
enabled={contentState.root.opts.open.current}
{id}
{trapFocus}
{preventScroll}
loop
forceMount={true}
{onCloseAutoFocus}
shouldRender={contentState.shouldRender}
>
{#snippet popper({ props })}
{@const finalProps = mergeProps(
props,
{
style: getFloatingContentCSSVars("popover"),
},
{ style }
)}
{#if child}
{@render child({ props: finalProps, ...contentState.snippetProps })}
{:else}
<div {...finalProps}>
{@render children?.()}
</div>
{/if}
{/snippet}
</PopperLayerForceMount>
{:else if !forceMount}
<PopperLayer
{...mergedProps}
{...contentState.popperProps}
ref={contentState.opts.ref}
isStatic
open={contentState.root.opts.open.current}
{id}
{trapFocus}
{preventScroll}
loop
forceMount={false}
{onCloseAutoFocus}
shouldRender={contentState.shouldRender}
>
{#snippet popper({ props })}
{@const finalProps = mergeProps(
props,
{ style: getFloatingContentCSSVars("popover") },
{ style }
)}
{#if child}
{@render child({ props: finalProps, ...contentState.snippetProps })}
{:else}
<div {...finalProps}>
{@render children?.()}
</div>
{/if}
{/snippet}
</PopperLayer>
{/if}
@@ -0,0 +1,4 @@
import type { PopoverContentStaticProps } from "../types.js";
declare const PopoverContentStatic: import("svelte").Component<PopoverContentStaticProps, {}, "ref">;
type PopoverContentStatic = ReturnType<typeof PopoverContentStatic>;
export default PopoverContentStatic;
@@ -0,0 +1,121 @@
<script lang="ts">
import { boxWith, mergeProps } from "svelte-toolbelt";
import type { PopoverContentProps } from "../types.js";
import { PopoverContentState } from "../popover.svelte.js";
import PopperLayer from "../../utilities/popper-layer/popper-layer.svelte";
import { noop } from "../../../internal/noop.js";
import { createId } from "../../../internal/create-id.js";
import { getFloatingContentCSSVars } from "../../../internal/floating-svelte/floating-utils.svelte.js";
import PopperLayerForceMount from "../../utilities/popper-layer/popper-layer-force-mount.svelte";
const uid = $props.id();
let {
child,
children,
ref = $bindable(null),
id = createId(uid),
forceMount = false,
onOpenAutoFocus = noop,
onCloseAutoFocus = noop,
onEscapeKeydown = noop,
onInteractOutside = noop,
trapFocus = true,
preventScroll = false,
customAnchor = null,
style,
...restProps
}: PopoverContentProps = $props();
const contentState = PopoverContentState.create({
id: boxWith(() => id),
ref: boxWith(
() => ref,
(v) => (ref = v)
),
onInteractOutside: boxWith(() => onInteractOutside),
onEscapeKeydown: boxWith(() => onEscapeKeydown),
customAnchor: boxWith(() => customAnchor),
});
const mergedProps = $derived(mergeProps(restProps, contentState.props));
// respect user's trapFocus setting, but disable when hover-opened without interaction
const effectiveTrapFocus = $derived(trapFocus && contentState.shouldTrapFocus);
// prevent auto-focus when opened via hover until user interacts
function handleOpenAutoFocus(e: Event) {
if (!contentState.shouldTrapFocus) {
e.preventDefault();
}
onOpenAutoFocus(e);
}
</script>
{#if forceMount}
<PopperLayerForceMount
{...mergedProps}
{...contentState.popperProps}
ref={contentState.opts.ref}
enabled={contentState.root.opts.open.current}
{id}
trapFocus={effectiveTrapFocus}
{preventScroll}
loop
forceMount={true}
{customAnchor}
onOpenAutoFocus={handleOpenAutoFocus}
{onCloseAutoFocus}
shouldRender={contentState.shouldRender}
>
{#snippet popper({ props, wrapperProps })}
{@const finalProps = mergeProps(
props,
{ style: getFloatingContentCSSVars("popover") },
{ style }
)}
{#if child}
{@render child({ props: finalProps, wrapperProps, ...contentState.snippetProps })}
{:else}
<div {...wrapperProps}>
<div {...finalProps}>
{@render children?.()}
</div>
</div>
{/if}
{/snippet}
</PopperLayerForceMount>
{:else if !forceMount}
<PopperLayer
{...mergedProps}
{...contentState.popperProps}
ref={contentState.opts.ref}
open={contentState.root.opts.open.current}
{id}
trapFocus={effectiveTrapFocus}
{preventScroll}
loop
forceMount={false}
{customAnchor}
onOpenAutoFocus={handleOpenAutoFocus}
{onCloseAutoFocus}
shouldRender={contentState.shouldRender}
>
{#snippet popper({ props, wrapperProps })}
{@const finalProps = mergeProps(
props,
{ style: getFloatingContentCSSVars("popover") },
{ style }
)}
{#if child}
{@render child({ props: finalProps, wrapperProps, ...contentState.snippetProps })}
{:else}
<div {...wrapperProps}>
<div {...finalProps}>
{@render children?.()}
</div>
</div>
{/if}
{/snippet}
</PopperLayer>
{/if}
@@ -0,0 +1,4 @@
import type { PopoverContentProps } from "../types.js";
declare const PopoverContent: import("svelte").Component<PopoverContentProps, {}, "ref">;
type PopoverContent = ReturnType<typeof PopoverContent>;
export default PopoverContent;
@@ -0,0 +1,37 @@
<script lang="ts">
import { boxWith, mergeProps } from "svelte-toolbelt";
import { PopoverOverlayState } from "../popover.svelte.js";
import type { PopoverOverlayProps } from "../types.js";
import { createId } from "../../../internal/create-id.js";
const uid = $props.id();
let {
id = createId(uid),
forceMount = false,
child,
children,
ref = $bindable(null),
...restProps
}: PopoverOverlayProps = $props();
const overlayState = PopoverOverlayState.create({
id: boxWith(() => id),
ref: boxWith(
() => ref,
(v) => (ref = v)
),
});
const mergedProps = $derived(mergeProps(restProps, overlayState.props));
</script>
{#if overlayState.shouldRender || forceMount}
{#if child}
{@render child({ props: mergeProps(mergedProps), ...overlayState.snippetProps })}
{:else}
<div {...mergeProps(mergedProps)}>
{@render children?.(overlayState.snippetProps)}
</div>
{/if}
{/if}
@@ -0,0 +1,4 @@
import type { PopoverOverlayProps } from "../types.js";
declare const PopoverOverlay: import("svelte").Component<PopoverOverlayProps, {}, "ref">;
type PopoverOverlay = ReturnType<typeof PopoverOverlay>;
export default PopoverOverlay;
@@ -0,0 +1,46 @@
<script lang="ts">
import { boxWith, mergeProps } from "svelte-toolbelt";
import type { PopoverTriggerProps } from "../types.js";
import { PopoverTriggerState } from "../popover.svelte.js";
import { createId } from "../../../internal/create-id.js";
import FloatingLayerAnchor from "../../utilities/floating-layer/components/floating-layer-anchor.svelte";
const uid = $props.id();
let {
children,
child,
id = createId(uid),
ref = $bindable(null),
type = "button",
disabled = false,
openOnHover = false,
openDelay = 700,
closeDelay = 300,
...restProps
}: PopoverTriggerProps = $props();
const triggerState = PopoverTriggerState.create({
id: boxWith(() => id),
ref: boxWith(
() => ref,
(v) => (ref = v)
),
disabled: boxWith(() => Boolean(disabled)),
openOnHover: boxWith(() => openOnHover),
openDelay: boxWith(() => openDelay),
closeDelay: boxWith(() => closeDelay),
});
const mergedProps = $derived(mergeProps(restProps, triggerState.props, { type }));
</script>
<FloatingLayerAnchor {id} ref={triggerState.opts.ref}>
{#if child}
{@render child({ props: mergedProps })}
{:else}
<button {...mergedProps}>
{@render children?.()}
</button>
{/if}
</FloatingLayerAnchor>
@@ -0,0 +1,4 @@
import type { PopoverTriggerProps } from "../types.js";
declare const PopoverTrigger: import("svelte").Component<PopoverTriggerProps, {}, "ref">;
type PopoverTrigger = ReturnType<typeof PopoverTrigger>;
export default PopoverTrigger;
+29
View File
@@ -0,0 +1,29 @@
<script lang="ts">
import { boxWith } from "svelte-toolbelt";
import type { PopoverRootProps } from "../types.js";
import { PopoverRootState } from "../popover.svelte.js";
import FloatingLayer from "../../utilities/floating-layer/components/floating-layer.svelte";
import { noop } from "../../../internal/noop.js";
let {
open = $bindable(false),
onOpenChange = noop,
onOpenChangeComplete = noop,
children,
}: PopoverRootProps = $props();
PopoverRootState.create({
open: boxWith(
() => open,
(v) => {
open = v;
onOpenChange(v);
}
),
onOpenChangeComplete: boxWith(() => onOpenChangeComplete),
});
</script>
<FloatingLayer>
{@render children?.()}
</FloatingLayer>
@@ -0,0 +1,3 @@
declare const Popover: import("svelte").Component<import("../types.js").PopoverRootPropsWithoutHTML, {}, "open">;
type Popover = ReturnType<typeof Popover>;
export default Popover;
+9
View File
@@ -0,0 +1,9 @@
export { default as Root } from "./components/popover.svelte";
export { default as Arrow } from "./components/popover-arrow.svelte";
export { default as Content } from "./components/popover-content.svelte";
export { default as ContentStatic } from "./components/popover-content-static.svelte";
export { default as Trigger } from "./components/popover-trigger.svelte";
export { default as Close } from "./components/popover-close.svelte";
export { default as Portal } from "../utilities/portal/portal.svelte";
export { default as Overlay } from "./components/popover-overlay.svelte";
export type { PopoverRootProps as RootProps, PopoverArrowProps as ArrowProps, PopoverContentProps as ContentProps, PopoverContentStaticProps as ContentStaticProps, PopoverTriggerProps as TriggerProps, PopoverCloseProps as CloseProps, PopoverPortalProps as PortalProps, PopoverOverlayProps as OverlayProps, } from "./types.js";
+8
View File
@@ -0,0 +1,8 @@
export { default as Root } from "./components/popover.svelte";
export { default as Arrow } from "./components/popover-arrow.svelte";
export { default as Content } from "./components/popover-content.svelte";
export { default as ContentStatic } from "./components/popover-content-static.svelte";
export { default as Trigger } from "./components/popover-trigger.svelte";
export { default as Close } from "./components/popover-close.svelte";
export { default as Portal } from "../utilities/portal/portal.svelte";
export { default as Overlay } from "./components/popover-overlay.svelte";
+1
View File
@@ -0,0 +1 @@
export * as Popover from "./exports.js";
+1
View File
@@ -0,0 +1 @@
export * as Popover from "./exports.js";
+144
View File
@@ -0,0 +1,144 @@
import { type ReadableBoxedValues, type WritableBoxedValues, DOMContext } from "svelte-toolbelt";
import type { BitsFocusEvent, BitsKeyboardEvent, BitsMouseEvent, BitsPointerEvent, OnChangeFn, RefAttachment, WithRefOpts } from "../../internal/types.js";
import type { Measurable } from "../../internal/floating-svelte/types.js";
import { PresenceManager } from "../../internal/presence-manager.svelte.js";
interface PopoverRootStateOpts extends WritableBoxedValues<{
open: boolean;
}>, ReadableBoxedValues<{
onOpenChangeComplete: OnChangeFn<boolean>;
}> {
}
export declare class PopoverRootState {
#private;
static create(opts: PopoverRootStateOpts): PopoverRootState;
readonly opts: PopoverRootStateOpts;
contentNode: HTMLElement | null;
contentPresence: PresenceManager;
triggerNode: HTMLElement | null;
overlayNode: HTMLElement | null;
overlayPresence: PresenceManager;
openedViaHover: boolean;
hasInteractedWithContent: boolean;
hoverCooldown: boolean;
closeDelay: number;
constructor(opts: PopoverRootStateOpts);
setDomContext(ctx: DOMContext): void;
toggleOpen(): void;
handleClose(): void;
handleHoverOpen(): void;
handleHoverClose(): void;
handleDelayedHoverClose(): void;
cancelDelayedClose(): void;
markInteraction(): void;
}
interface PopoverTriggerStateOpts extends WithRefOpts, ReadableBoxedValues<{
disabled: boolean;
openOnHover: boolean;
openDelay: number;
closeDelay: number;
}> {
}
export declare class PopoverTriggerState {
#private;
static create(opts: PopoverTriggerStateOpts): PopoverTriggerState;
readonly opts: PopoverTriggerStateOpts;
readonly root: PopoverRootState;
readonly attachment: RefAttachment;
readonly domContext: DOMContext;
constructor(opts: PopoverTriggerStateOpts, root: PopoverRootState);
onpointerenter(e: BitsPointerEvent): void;
onpointerleave(e: BitsPointerEvent): void;
onclick(e: BitsMouseEvent): void;
onkeydown(e: BitsKeyboardEvent): void;
readonly props: {
readonly id: string;
readonly "aria-haspopup": "dialog";
readonly "aria-expanded": "true" | "false";
readonly "data-state": "open" | "closed";
readonly "aria-controls": string | undefined;
readonly disabled: boolean;
readonly onkeydown: (e: BitsKeyboardEvent) => void;
readonly onclick: (e: BitsMouseEvent) => void;
readonly onpointerenter: (e: BitsPointerEvent) => void;
readonly onpointerleave: (e: BitsPointerEvent) => void;
};
}
interface PopoverContentStateOpts extends WithRefOpts, ReadableBoxedValues<{
onInteractOutside: (e: PointerEvent) => void;
onEscapeKeydown: (e: KeyboardEvent) => void;
customAnchor: string | HTMLElement | null | Measurable;
}> {
}
export declare class PopoverContentState {
static create(opts: PopoverContentStateOpts): PopoverContentState;
readonly opts: PopoverContentStateOpts;
readonly root: PopoverRootState;
readonly attachment: RefAttachment;
constructor(opts: PopoverContentStateOpts, root: PopoverRootState);
onpointerdown(_: BitsPointerEvent): void;
onfocusin(e: BitsFocusEvent): void;
onpointerenter(e: BitsPointerEvent): void;
onpointerleave(e: BitsPointerEvent): void;
onInteractOutside: (e: PointerEvent) => void;
onEscapeKeydown: (e: KeyboardEvent) => void;
get shouldRender(): boolean;
get shouldTrapFocus(): boolean;
readonly snippetProps: {
open: boolean;
};
readonly props: {
readonly id: string;
readonly tabindex: -1;
readonly "data-state": "open" | "closed";
readonly style: {
readonly pointerEvents: "auto";
readonly contain: "layout style";
};
readonly onpointerdown: (_: BitsPointerEvent) => void;
readonly onfocusin: (e: BitsFocusEvent) => void;
readonly onpointerenter: (e: BitsPointerEvent) => void;
readonly onpointerleave: (e: BitsPointerEvent) => void;
};
readonly popperProps: {
onInteractOutside: (e: PointerEvent) => void;
onEscapeKeydown: (e: KeyboardEvent) => void;
};
}
interface PopoverCloseStateOpts extends WithRefOpts {
}
export declare class PopoverCloseState {
static create(opts: PopoverCloseStateOpts): PopoverCloseState;
readonly opts: PopoverCloseStateOpts;
readonly root: PopoverRootState;
readonly attachment: RefAttachment;
constructor(opts: PopoverCloseStateOpts, root: PopoverRootState);
onclick(_: BitsPointerEvent): void;
onkeydown(e: BitsKeyboardEvent): void;
readonly props: {
readonly id: string;
readonly onclick: (_: BitsPointerEvent) => void;
readonly onkeydown: (e: BitsKeyboardEvent) => void;
readonly type: "button";
};
}
interface PopoverOverlayStateOpts extends WithRefOpts {
}
export declare class PopoverOverlayState {
static create(opts: PopoverOverlayStateOpts): PopoverOverlayState;
readonly opts: PopoverOverlayStateOpts;
readonly root: PopoverRootState;
readonly attachment: RefAttachment;
constructor(opts: PopoverOverlayStateOpts, root: PopoverRootState);
get shouldRender(): boolean;
readonly snippetProps: {
open: boolean;
};
readonly props: {
readonly id: string;
readonly style: {
readonly pointerEvents: "auto";
};
readonly "data-state": "open" | "closed";
};
}
export {};
+403
View File
@@ -0,0 +1,403 @@
import { attachRef, boxWith, DOMContext, } from "svelte-toolbelt";
import { Context, watch } from "runed";
import { kbd } from "../../internal/kbd.js";
import { createBitsAttrs, boolToStr, getDataOpenClosed } from "../../internal/attrs.js";
import { isElement, isTouch } from "../../internal/is.js";
import { PresenceManager } from "../../internal/presence-manager.svelte.js";
import { SafePolygon } from "../../internal/safe-polygon.svelte.js";
import { isTabbable } from "tabbable";
const popoverAttrs = createBitsAttrs({
component: "popover",
parts: ["root", "trigger", "content", "close", "overlay"],
});
const PopoverRootContext = new Context("Popover.Root");
export class PopoverRootState {
static create(opts) {
return PopoverRootContext.set(new PopoverRootState(opts));
}
opts;
contentNode = $state(null);
contentPresence;
triggerNode = $state(null);
overlayNode = $state(null);
overlayPresence;
// hover tracking state
openedViaHover = $state(false);
hasInteractedWithContent = $state(false);
hoverCooldown = $state(false);
closeDelay = $state(0);
#closeTimeout = null;
#domContext = null;
constructor(opts) {
this.opts = opts;
this.contentPresence = new PresenceManager({
ref: boxWith(() => this.contentNode),
open: this.opts.open,
onComplete: () => {
this.opts.onOpenChangeComplete.current(this.opts.open.current);
},
});
this.overlayPresence = new PresenceManager({
ref: boxWith(() => this.overlayNode),
open: this.opts.open,
});
watch(() => this.opts.open.current, (isOpen) => {
if (!isOpen) {
this.openedViaHover = false;
this.hasInteractedWithContent = false;
this.#clearCloseTimeout();
}
});
}
setDomContext(ctx) {
this.#domContext = ctx;
}
#clearCloseTimeout() {
if (this.#closeTimeout !== null && this.#domContext) {
this.#domContext.clearTimeout(this.#closeTimeout);
this.#closeTimeout = null;
}
}
toggleOpen() {
this.#clearCloseTimeout();
this.opts.open.current = !this.opts.open.current;
}
handleClose() {
this.#clearCloseTimeout();
if (!this.opts.open.current)
return;
this.opts.open.current = false;
}
handleHoverOpen() {
this.#clearCloseTimeout();
if (this.opts.open.current)
return;
this.openedViaHover = true;
this.opts.open.current = true;
}
handleHoverClose() {
if (!this.opts.open.current)
return;
// only close if opened via hover and user hasn't interacted with content
if (this.openedViaHover && !this.hasInteractedWithContent) {
this.opts.open.current = false;
}
}
handleDelayedHoverClose() {
if (!this.opts.open.current)
return;
if (!this.openedViaHover || this.hasInteractedWithContent)
return;
this.#clearCloseTimeout();
if (this.closeDelay <= 0) {
this.opts.open.current = false;
}
else if (this.#domContext) {
this.#closeTimeout = this.#domContext.setTimeout(() => {
if (this.openedViaHover && !this.hasInteractedWithContent) {
this.opts.open.current = false;
}
this.#closeTimeout = null;
}, this.closeDelay);
}
}
cancelDelayedClose() {
this.#clearCloseTimeout();
}
markInteraction() {
this.hasInteractedWithContent = true;
this.#clearCloseTimeout();
}
}
export class PopoverTriggerState {
static create(opts) {
return new PopoverTriggerState(opts, PopoverRootContext.get());
}
opts;
root;
attachment;
domContext;
#openTimeout = null;
#closeTimeout = null;
#isHovering = $state(false);
constructor(opts, root) {
this.opts = opts;
this.root = root;
this.attachment = attachRef(this.opts.ref, (v) => (this.root.triggerNode = v));
this.domContext = new DOMContext(opts.ref);
this.root.setDomContext(this.domContext);
this.onclick = this.onclick.bind(this);
this.onkeydown = this.onkeydown.bind(this);
this.onpointerenter = this.onpointerenter.bind(this);
this.onpointerleave = this.onpointerleave.bind(this);
watch(() => this.opts.closeDelay.current, (delay) => {
this.root.closeDelay = delay;
});
}
#clearOpenTimeout() {
if (this.#openTimeout !== null) {
this.domContext.clearTimeout(this.#openTimeout);
this.#openTimeout = null;
}
}
#clearCloseTimeout() {
if (this.#closeTimeout !== null) {
this.domContext.clearTimeout(this.#closeTimeout);
this.#closeTimeout = null;
}
}
#clearAllTimeouts() {
this.#clearOpenTimeout();
this.#clearCloseTimeout();
}
onpointerenter(e) {
if (this.opts.disabled.current)
return;
if (!this.opts.openOnHover.current)
return;
if (isTouch(e))
return;
this.#isHovering = true;
this.#clearCloseTimeout();
this.root.cancelDelayedClose();
if (this.root.opts.open.current || this.root.hoverCooldown)
return;
const delay = this.opts.openDelay.current;
if (delay <= 0) {
this.root.handleHoverOpen();
}
else {
this.#openTimeout = this.domContext.setTimeout(() => {
this.root.handleHoverOpen();
this.#openTimeout = null;
}, delay);
}
}
onpointerleave(e) {
if (this.opts.disabled.current)
return;
if (!this.opts.openOnHover.current)
return;
if (isTouch(e))
return;
this.#isHovering = false;
this.#clearOpenTimeout();
this.root.hoverCooldown = false;
// let GraceArea handle the close - it will call handleHoverClose via onPointerExit
// we just need to stop any pending open timer
}
onclick(e) {
if (this.opts.disabled.current)
return;
if (e.button !== 0)
return;
this.#clearAllTimeouts();
// if clicked while hovering and popover is open, convert to click-based open
if (this.#isHovering && this.root.opts.open.current && this.root.openedViaHover) {
this.root.openedViaHover = false;
this.root.hasInteractedWithContent = true;
return;
}
// if closing while hovering with openOnHover enabled, set cooldown to prevent
// immediate re-open via hover
if (this.#isHovering && this.opts.openOnHover.current && this.root.opts.open.current) {
this.root.hoverCooldown = true;
}
// if clicking to open while in cooldown, reset cooldown (explicit open)
if (this.root.hoverCooldown && !this.root.opts.open.current) {
this.root.hoverCooldown = false;
}
this.root.toggleOpen();
}
onkeydown(e) {
if (this.opts.disabled.current)
return;
if (!(e.key === kbd.ENTER || e.key === kbd.SPACE))
return;
e.preventDefault();
this.#clearAllTimeouts();
this.root.toggleOpen();
}
#getAriaControls() {
if (this.root.opts.open.current && this.root.contentNode?.id) {
return this.root.contentNode?.id;
}
}
props = $derived.by(() => ({
id: this.opts.id.current,
"aria-haspopup": "dialog",
"aria-expanded": boolToStr(this.root.opts.open.current),
"data-state": getDataOpenClosed(this.root.opts.open.current),
"aria-controls": this.#getAriaControls(),
[popoverAttrs.trigger]: "",
disabled: this.opts.disabled.current,
//
onkeydown: this.onkeydown,
onclick: this.onclick,
onpointerenter: this.onpointerenter,
onpointerleave: this.onpointerleave,
...this.attachment,
}));
}
export class PopoverContentState {
static create(opts) {
return new PopoverContentState(opts, PopoverRootContext.get());
}
opts;
root;
attachment;
constructor(opts, root) {
this.opts = opts;
this.root = root;
this.attachment = attachRef(this.opts.ref, (v) => (this.root.contentNode = v));
this.onpointerdown = this.onpointerdown.bind(this);
this.onfocusin = this.onfocusin.bind(this);
this.onpointerenter = this.onpointerenter.bind(this);
this.onpointerleave = this.onpointerleave.bind(this);
new SafePolygon({
triggerNode: () => this.root.triggerNode,
contentNode: () => this.root.contentNode,
enabled: () => this.root.opts.open.current &&
this.root.openedViaHover &&
!this.root.hasInteractedWithContent,
throttlePointerMove: true,
onPointerExit: () => {
this.root.handleDelayedHoverClose();
},
});
}
onpointerdown(_) {
this.root.markInteraction();
}
onfocusin(e) {
const target = e.target;
if (isElement(target) && isTabbable(target)) {
this.root.markInteraction();
}
}
onpointerenter(e) {
if (isTouch(e))
return;
this.root.cancelDelayedClose();
}
onpointerleave(e) {
if (isTouch(e))
return;
// handled by grace area
}
onInteractOutside = (e) => {
this.opts.onInteractOutside.current(e);
if (e.defaultPrevented)
return;
if (!isElement(e.target))
return;
const closestTrigger = e.target.closest(popoverAttrs.selector("trigger"));
if (closestTrigger && closestTrigger === this.root.triggerNode)
return;
if (this.opts.customAnchor.current) {
if (isElement(this.opts.customAnchor.current)) {
if (this.opts.customAnchor.current.contains(e.target))
return;
}
else if (typeof this.opts.customAnchor.current === "string") {
const el = document.querySelector(this.opts.customAnchor.current);
if (el && el.contains(e.target))
return;
}
}
this.root.handleClose();
};
onEscapeKeydown = (e) => {
this.opts.onEscapeKeydown.current(e);
if (e.defaultPrevented)
return;
this.root.handleClose();
};
get shouldRender() {
return this.root.contentPresence.shouldRender;
}
get shouldTrapFocus() {
if (this.root.openedViaHover && !this.root.hasInteractedWithContent)
return false;
return true;
}
snippetProps = $derived.by(() => ({ open: this.root.opts.open.current }));
props = $derived.by(() => ({
id: this.opts.id.current,
tabindex: -1,
"data-state": getDataOpenClosed(this.root.opts.open.current),
[popoverAttrs.content]: "",
style: {
pointerEvents: "auto",
// CSS containment isolates style/layout/paint calculations from the rest of the page
contain: "layout style",
},
onpointerdown: this.onpointerdown,
onfocusin: this.onfocusin,
onpointerenter: this.onpointerenter,
onpointerleave: this.onpointerleave,
...this.attachment,
}));
popperProps = {
onInteractOutside: this.onInteractOutside,
onEscapeKeydown: this.onEscapeKeydown,
};
}
export class PopoverCloseState {
static create(opts) {
return new PopoverCloseState(opts, PopoverRootContext.get());
}
opts;
root;
attachment;
constructor(opts, root) {
this.opts = opts;
this.root = root;
this.attachment = attachRef(this.opts.ref);
this.onclick = this.onclick.bind(this);
this.onkeydown = this.onkeydown.bind(this);
}
onclick(_) {
this.root.handleClose();
}
onkeydown(e) {
if (!(e.key === kbd.ENTER || e.key === kbd.SPACE))
return;
e.preventDefault();
this.root.handleClose();
}
props = $derived.by(() => ({
id: this.opts.id.current,
onclick: this.onclick,
onkeydown: this.onkeydown,
type: "button",
[popoverAttrs.close]: "",
...this.attachment,
}));
}
export class PopoverOverlayState {
static create(opts) {
return new PopoverOverlayState(opts, PopoverRootContext.get());
}
opts;
root;
attachment;
constructor(opts, root) {
this.opts = opts;
this.root = root;
this.attachment = attachRef(this.opts.ref, (v) => (this.root.overlayNode = v));
}
get shouldRender() {
return this.root.overlayPresence.shouldRender;
}
snippetProps = $derived.by(() => ({ open: this.root.opts.open.current }));
props = $derived.by(() => ({
id: this.opts.id.current,
[popoverAttrs.overlay]: "",
style: {
pointerEvents: "auto",
},
"data-state": getDataOpenClosed(this.root.opts.open.current),
...this.attachment,
}));
}
+57
View File
@@ -0,0 +1,57 @@
import type { ArrowProps, ArrowPropsWithoutHTML } from "../utilities/arrow/types.js";
import type { PopperLayerProps, PopperLayerStaticProps } from "../utilities/popper-layer/types.js";
import type { OnChangeFn, WithChild, WithChildNoChildrenSnippetProps, WithChildren, Without } from "../../internal/types.js";
import type { BitsPrimitiveButtonAttributes, BitsPrimitiveDivAttributes } from "../../shared/attributes.js";
import type { FloatingContentSnippetProps, StaticContentSnippetProps } from "../../shared/types.js";
import type { PortalProps } from "../../types.js";
import type { PresenceLayerProps } from "../utilities/presence-layer/types.js";
export type PopoverRootPropsWithoutHTML = WithChildren<{
/**
* The open state of the popover.
*/
open?: boolean;
/**
* A callback that is called when the popover's open state changes.
*/
onOpenChange?: OnChangeFn<boolean>;
/**
* A callback that is called when the popover's open state changes and the animation is complete.
*/
onOpenChangeComplete?: OnChangeFn<boolean>;
}>;
export type PopoverRootProps = PopoverRootPropsWithoutHTML;
export type PopoverContentPropsWithoutHTML = WithChildNoChildrenSnippetProps<Omit<PopperLayerProps, "content" | "loop">, FloatingContentSnippetProps>;
export type PopoverContentProps = PopoverContentPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, PopoverContentPropsWithoutHTML>;
export type PopoverContentStaticPropsWithoutHTML = WithChildNoChildrenSnippetProps<Omit<PopperLayerStaticProps, "content" | "loop">, StaticContentSnippetProps>;
export type PopoverContentStaticProps = PopoverContentStaticPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, PopoverContentStaticPropsWithoutHTML>;
export type PopoverTriggerPropsWithoutHTML = WithChild<{
/**
* Whether the popover should open when the trigger is hovered.
* @default false
*/
openOnHover?: boolean;
/**
* How long to wait before opening the popover on hover (ms).
* Only applies when `openOnHover` is `true`.
* @default 700
*/
openDelay?: number;
/**
* How long to wait before closing the popover after hover ends (ms).
* Only applies when `openOnHover` is `true`.
* @default 300
*/
closeDelay?: number;
}>;
export type PopoverTriggerProps = PopoverTriggerPropsWithoutHTML & Without<BitsPrimitiveButtonAttributes, PopoverTriggerPropsWithoutHTML>;
export type PopoverClosePropsWithoutHTML = WithChild;
export type PopoverCloseProps = PopoverClosePropsWithoutHTML & Without<BitsPrimitiveButtonAttributes, PopoverClosePropsWithoutHTML>;
export type PopoverArrowPropsWithoutHTML = ArrowPropsWithoutHTML;
export type PopoverArrowProps = ArrowProps;
export type PopoverPortalPropsWithoutHTML = PortalProps;
export type PopoverPortalProps = PortalProps;
export type PopoverOverlaySnippetProps = {
open: boolean;
};
export type PopoverOverlayPropsWithoutHTML = WithChild<PresenceLayerProps, PopoverOverlaySnippetProps>;
export type PopoverOverlayProps = PopoverOverlayPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, PopoverOverlayPropsWithoutHTML>;
+1
View File
@@ -0,0 +1 @@
export {};