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;