INIT
This commit is contained in:
eewing
Generated
Vendored
+98
@@ -0,0 +1,98 @@
|
||||
<script lang="ts">
|
||||
import { boxWith, mergeProps } from "svelte-toolbelt";
|
||||
import type { LinkPreviewContentStaticProps } from "../types.js";
|
||||
import { LinkPreviewContentState } from "../link-preview.svelte.js";
|
||||
import { createId } from "../../../internal/create-id.js";
|
||||
import PopperLayer from "../../utilities/popper-layer/popper-layer.svelte";
|
||||
import { getFloatingContentCSSVars } from "../../../internal/floating-svelte/floating-utils.svelte.js";
|
||||
import PopperLayerForceMount from "../../utilities/popper-layer/popper-layer-force-mount.svelte";
|
||||
import Mounted from "../../utilities/mounted.svelte";
|
||||
import { noop } from "../../../internal/noop.js";
|
||||
|
||||
const uid = $props.id();
|
||||
|
||||
let {
|
||||
children,
|
||||
child,
|
||||
id = createId(uid),
|
||||
ref = $bindable(null),
|
||||
onInteractOutside = noop,
|
||||
onEscapeKeydown = noop,
|
||||
forceMount = false,
|
||||
style,
|
||||
...restProps
|
||||
}: LinkPreviewContentStaticProps = $props();
|
||||
|
||||
const contentState = LinkPreviewContentState.create({
|
||||
id: boxWith(() => id),
|
||||
ref: boxWith(
|
||||
() => ref,
|
||||
(v) => (ref = v)
|
||||
),
|
||||
onInteractOutside: boxWith(() => onInteractOutside),
|
||||
onEscapeKeydown: boxWith(() => onEscapeKeydown),
|
||||
});
|
||||
|
||||
const mergedProps = $derived(mergeProps(restProps, contentState.props));
|
||||
</script>
|
||||
|
||||
{#if forceMount}
|
||||
<PopperLayerForceMount
|
||||
{...mergedProps}
|
||||
{...contentState.popperProps}
|
||||
ref={contentState.opts.ref}
|
||||
enabled={contentState.root.opts.open.current}
|
||||
isStatic
|
||||
{id}
|
||||
trapFocus={false}
|
||||
loop={false}
|
||||
preventScroll={false}
|
||||
forceMount={true}
|
||||
shouldRender={contentState.shouldRender}
|
||||
>
|
||||
{#snippet popper({ props })}
|
||||
{@const finalProps = mergeProps(
|
||||
props,
|
||||
{ style: getFloatingContentCSSVars("link-preview") },
|
||||
{ style }
|
||||
)}
|
||||
{#if child}
|
||||
{@render child({ props: finalProps, ...contentState.snippetProps })}
|
||||
{:else}
|
||||
<div {...finalProps}>
|
||||
{@render children?.()}
|
||||
</div>
|
||||
{/if}
|
||||
<Mounted bind:mounted={contentState.root.contentMounted} />
|
||||
{/snippet}
|
||||
</PopperLayerForceMount>
|
||||
{:else if !forceMount}
|
||||
<PopperLayer
|
||||
{...mergedProps}
|
||||
{...contentState.popperProps}
|
||||
ref={contentState.opts.ref}
|
||||
open={contentState.root.opts.open.current}
|
||||
isStatic
|
||||
{id}
|
||||
trapFocus={false}
|
||||
loop={false}
|
||||
preventScroll={false}
|
||||
forceMount={false}
|
||||
shouldRender={contentState.shouldRender}
|
||||
>
|
||||
{#snippet popper({ props })}
|
||||
{@const finalProps = mergeProps(
|
||||
props,
|
||||
{ style: getFloatingContentCSSVars("link-preview") },
|
||||
{ style }
|
||||
)}
|
||||
{#if child}
|
||||
{@render child({ props: finalProps, ...contentState.snippetProps })}
|
||||
{:else}
|
||||
<div {...finalProps}>
|
||||
{@render children?.()}
|
||||
</div>
|
||||
{/if}
|
||||
{/snippet}
|
||||
</PopperLayer>
|
||||
{/if}
|
||||
Generated
Vendored
+4
@@ -0,0 +1,4 @@
|
||||
import type { LinkPreviewContentStaticProps } from "../types.js";
|
||||
declare const LinkPreviewContentStatic: import("svelte").Component<LinkPreviewContentStaticProps, {}, "ref">;
|
||||
type LinkPreviewContentStatic = ReturnType<typeof LinkPreviewContentStatic>;
|
||||
export default LinkPreviewContentStatic;
|
||||
Generated
Vendored
+120
@@ -0,0 +1,120 @@
|
||||
<script lang="ts">
|
||||
import { boxWith, mergeProps } from "svelte-toolbelt";
|
||||
import type { LinkPreviewContentProps } from "../types.js";
|
||||
import { LinkPreviewContentState } from "../link-preview.svelte.js";
|
||||
import PopperLayer from "../../utilities/popper-layer/popper-layer.svelte";
|
||||
import { getFloatingContentCSSVars } from "../../../internal/floating-svelte/floating-utils.svelte.js";
|
||||
import PopperLayerForceMount from "../../utilities/popper-layer/popper-layer-force-mount.svelte";
|
||||
import Mounted from "../../utilities/mounted.svelte";
|
||||
import { noop } from "../../../internal/noop.js";
|
||||
import { createId } from "../../../internal/create-id.js";
|
||||
|
||||
const uid = $props.id();
|
||||
|
||||
let {
|
||||
children,
|
||||
child,
|
||||
id = createId(uid),
|
||||
ref = $bindable(null),
|
||||
side = "top",
|
||||
sideOffset = 0,
|
||||
align = "center",
|
||||
avoidCollisions = true,
|
||||
arrowPadding = 0,
|
||||
sticky = "partial",
|
||||
hideWhenDetached = false,
|
||||
collisionPadding = 0,
|
||||
onInteractOutside = noop,
|
||||
onEscapeKeydown = noop,
|
||||
forceMount = false,
|
||||
style,
|
||||
...restProps
|
||||
}: LinkPreviewContentProps = $props();
|
||||
|
||||
const contentState = LinkPreviewContentState.create({
|
||||
id: boxWith(() => id),
|
||||
ref: boxWith(
|
||||
() => ref,
|
||||
(v) => (ref = v)
|
||||
),
|
||||
onInteractOutside: boxWith(() => onInteractOutside),
|
||||
onEscapeKeydown: boxWith(() => onEscapeKeydown),
|
||||
});
|
||||
|
||||
const floatingProps = $derived({
|
||||
side,
|
||||
sideOffset,
|
||||
align,
|
||||
avoidCollisions,
|
||||
arrowPadding,
|
||||
sticky,
|
||||
hideWhenDetached,
|
||||
collisionPadding,
|
||||
});
|
||||
|
||||
const mergedProps = $derived(mergeProps(restProps, floatingProps, contentState.props));
|
||||
</script>
|
||||
|
||||
{#if forceMount}
|
||||
<PopperLayerForceMount
|
||||
{...mergedProps}
|
||||
{...contentState.popperProps}
|
||||
ref={contentState.opts.ref}
|
||||
enabled={contentState.root.opts.open.current}
|
||||
{id}
|
||||
trapFocus={false}
|
||||
loop={false}
|
||||
preventScroll={false}
|
||||
forceMount={true}
|
||||
shouldRender={contentState.shouldRender}
|
||||
>
|
||||
{#snippet popper({ props, wrapperProps })}
|
||||
{@const finalProps = mergeProps(
|
||||
props,
|
||||
{ style: getFloatingContentCSSVars("link-preview") },
|
||||
{ style }
|
||||
)}
|
||||
{#if child}
|
||||
{@render child({ props: finalProps, wrapperProps, ...contentState.snippetProps })}
|
||||
{:else}
|
||||
<div {...wrapperProps}>
|
||||
<div {...finalProps}>
|
||||
{@render children?.()}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
<Mounted bind:mounted={contentState.root.contentMounted} />
|
||||
{/snippet}
|
||||
</PopperLayerForceMount>
|
||||
{:else if !forceMount}
|
||||
<PopperLayer
|
||||
{...mergedProps}
|
||||
{...contentState.popperProps}
|
||||
ref={contentState.opts.ref}
|
||||
open={contentState.root.opts.open.current}
|
||||
{id}
|
||||
trapFocus={false}
|
||||
loop={false}
|
||||
preventScroll={false}
|
||||
forceMount={false}
|
||||
shouldRender={contentState.shouldRender}
|
||||
>
|
||||
{#snippet popper({ props, wrapperProps })}
|
||||
{@const finalProps = mergeProps(
|
||||
props,
|
||||
{ style: getFloatingContentCSSVars("link-preview") },
|
||||
{ style }
|
||||
)}
|
||||
{#if child}
|
||||
{@render child({ props: finalProps, wrapperProps, ...contentState.snippetProps })}
|
||||
{:else}
|
||||
<div {...wrapperProps}>
|
||||
<div {...finalProps}>
|
||||
{@render children?.()}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
<Mounted bind:mounted={contentState.root.contentMounted} />
|
||||
{/snippet}
|
||||
</PopperLayer>
|
||||
{/if}
|
||||
Generated
Vendored
+4
@@ -0,0 +1,4 @@
|
||||
import type { LinkPreviewContentProps } from "../types.js";
|
||||
declare const LinkPreviewContent: import("svelte").Component<LinkPreviewContentProps, {}, "ref">;
|
||||
type LinkPreviewContent = ReturnType<typeof LinkPreviewContent>;
|
||||
export default LinkPreviewContent;
|
||||
Generated
Vendored
+37
@@ -0,0 +1,37 @@
|
||||
<script lang="ts">
|
||||
import { boxWith, mergeProps } from "svelte-toolbelt";
|
||||
import type { LinkPreviewTriggerProps } from "../types.js";
|
||||
import { LinkPreviewTriggerState } from "../link-preview.svelte.js";
|
||||
import { createId } from "../../../internal/create-id.js";
|
||||
import { FloatingLayer } from "../../utilities/floating-layer/index.js";
|
||||
|
||||
const uid = $props.id();
|
||||
|
||||
let {
|
||||
ref = $bindable(null),
|
||||
id = createId(uid),
|
||||
child,
|
||||
children,
|
||||
...restProps
|
||||
}: LinkPreviewTriggerProps = $props();
|
||||
|
||||
const triggerState = LinkPreviewTriggerState.create({
|
||||
id: boxWith(() => id),
|
||||
ref: boxWith(
|
||||
() => ref,
|
||||
(v) => (ref = v)
|
||||
),
|
||||
});
|
||||
|
||||
const mergedProps = $derived(mergeProps(restProps, triggerState.props));
|
||||
</script>
|
||||
|
||||
<FloatingLayer.Anchor {id} ref={triggerState.opts.ref}>
|
||||
{#if child}
|
||||
{@render child({ props: mergedProps })}
|
||||
{:else}
|
||||
<a {...mergedProps}>
|
||||
{@render children?.()}
|
||||
</a>
|
||||
{/if}
|
||||
</FloatingLayer.Anchor>
|
||||
Generated
Vendored
+4
@@ -0,0 +1,4 @@
|
||||
import type { LinkPreviewTriggerProps } from "../types.js";
|
||||
declare const LinkPreviewTrigger: import("svelte").Component<LinkPreviewTriggerProps, {}, "ref">;
|
||||
type LinkPreviewTrigger = ReturnType<typeof LinkPreviewTrigger>;
|
||||
export default LinkPreviewTrigger;
|
||||
+35
@@ -0,0 +1,35 @@
|
||||
<script lang="ts">
|
||||
import { boxWith } from "svelte-toolbelt";
|
||||
import type { LinkPreviewRootProps } from "../types.js";
|
||||
import { LinkPreviewRootState } from "../link-preview.svelte.js";
|
||||
import { noop } from "../../../internal/noop.js";
|
||||
import { FloatingLayer } from "../../utilities/floating-layer/index.js";
|
||||
|
||||
let {
|
||||
disabled = false,
|
||||
open = $bindable(false),
|
||||
onOpenChange = noop,
|
||||
onOpenChangeComplete = noop,
|
||||
openDelay = 700,
|
||||
closeDelay = 300,
|
||||
children,
|
||||
}: LinkPreviewRootProps = $props();
|
||||
|
||||
LinkPreviewRootState.create({
|
||||
disabled: boxWith(() => disabled),
|
||||
open: boxWith(
|
||||
() => open,
|
||||
(v) => {
|
||||
open = v;
|
||||
onOpenChange(v);
|
||||
}
|
||||
),
|
||||
openDelay: boxWith(() => openDelay),
|
||||
closeDelay: boxWith(() => closeDelay),
|
||||
onOpenChangeComplete: boxWith(() => onOpenChangeComplete),
|
||||
});
|
||||
</script>
|
||||
|
||||
<FloatingLayer.Root>
|
||||
{@render children?.()}
|
||||
</FloatingLayer.Root>
|
||||
+3
@@ -0,0 +1,3 @@
|
||||
declare const LinkPreview: import("svelte").Component<import("../types.js").LinkPreviewRootPropsWithoutHTML, {}, "open">;
|
||||
type LinkPreview = ReturnType<typeof LinkPreview>;
|
||||
export default LinkPreview;
|
||||
+7
@@ -0,0 +1,7 @@
|
||||
export { default as Arrow } from "../utilities/floating-layer/components/floating-layer-arrow.svelte";
|
||||
export { default as Root } from "./components/link-preview.svelte";
|
||||
export { default as Content } from "./components/link-preview-content.svelte";
|
||||
export { default as Trigger } from "./components/link-preview-trigger.svelte";
|
||||
export { default as Portal } from "../utilities/portal/portal.svelte";
|
||||
export { default as ContentStatic } from "./components/link-preview-content-static.svelte";
|
||||
export type { LinkPreviewRootProps as RootProps, LinkPreviewArrowProps as ArrowProps, LinkPreviewContentProps as ContentProps, LinkPreviewContentStaticProps as ContentStaticProps, LinkPreviewTriggerProps as TriggerProps, LinkPreviewPortalProps as PortalProps, } from "./types.js";
|
||||
+6
@@ -0,0 +1,6 @@
|
||||
export { default as Arrow } from "../utilities/floating-layer/components/floating-layer-arrow.svelte";
|
||||
export { default as Root } from "./components/link-preview.svelte";
|
||||
export { default as Content } from "./components/link-preview-content.svelte";
|
||||
export { default as Trigger } from "./components/link-preview-trigger.svelte";
|
||||
export { default as Portal } from "../utilities/portal/portal.svelte";
|
||||
export { default as ContentStatic } from "./components/link-preview-content-static.svelte";
|
||||
+1
@@ -0,0 +1 @@
|
||||
export * as LinkPreview from "./exports.js";
|
||||
+1
@@ -0,0 +1 @@
|
||||
export * as LinkPreview from "./exports.js";
|
||||
+94
@@ -0,0 +1,94 @@
|
||||
import { DOMContext, type ReadableBoxedValues, type WritableBoxedValues } from "svelte-toolbelt";
|
||||
import type { BitsFocusEvent, BitsPointerEvent, OnChangeFn, RefAttachment, WithRefOpts } from "../../internal/types.js";
|
||||
import { PresenceManager } from "../../internal/presence-manager.svelte.js";
|
||||
interface LinkPreviewRootStateOpts extends WritableBoxedValues<{
|
||||
open: boolean;
|
||||
}>, ReadableBoxedValues<{
|
||||
disabled: boolean;
|
||||
openDelay: number;
|
||||
closeDelay: number;
|
||||
onOpenChangeComplete: OnChangeFn<boolean>;
|
||||
}> {
|
||||
}
|
||||
export declare class LinkPreviewRootState {
|
||||
static create(opts: LinkPreviewRootStateOpts): LinkPreviewRootState;
|
||||
readonly opts: LinkPreviewRootStateOpts;
|
||||
hasSelection: boolean;
|
||||
isPointerDownOnContent: boolean;
|
||||
containsSelection: boolean;
|
||||
timeout: number | null;
|
||||
contentNode: HTMLElement | null;
|
||||
contentMounted: boolean;
|
||||
contentPresence: PresenceManager;
|
||||
triggerNode: HTMLElement | null;
|
||||
isOpening: boolean;
|
||||
domContext: DOMContext;
|
||||
constructor(opts: LinkPreviewRootStateOpts);
|
||||
clearTimeout(): void;
|
||||
handleOpen(): void;
|
||||
immediateClose(): void;
|
||||
handleClose(): void;
|
||||
}
|
||||
interface LinkPreviewTriggerStateOpts extends WithRefOpts {
|
||||
}
|
||||
export declare class LinkPreviewTriggerState {
|
||||
static create(opts: LinkPreviewTriggerStateOpts): LinkPreviewTriggerState;
|
||||
readonly opts: LinkPreviewTriggerStateOpts;
|
||||
readonly root: LinkPreviewRootState;
|
||||
readonly attachment: RefAttachment;
|
||||
constructor(opts: LinkPreviewTriggerStateOpts, root: LinkPreviewRootState);
|
||||
onpointerenter(e: BitsPointerEvent): void;
|
||||
onpointerleave(e: BitsPointerEvent): void;
|
||||
onfocus(e: BitsFocusEvent): void;
|
||||
onblur(_: BitsFocusEvent): 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 role: "button";
|
||||
readonly onpointerenter: (e: BitsPointerEvent) => void;
|
||||
readonly onfocus: (e: BitsFocusEvent) => void;
|
||||
readonly onblur: (_: BitsFocusEvent) => void;
|
||||
readonly onpointerleave: (e: BitsPointerEvent) => void;
|
||||
};
|
||||
}
|
||||
interface LinkPreviewContentStateOpts extends WithRefOpts, ReadableBoxedValues<{
|
||||
onInteractOutside: (e: PointerEvent) => void;
|
||||
onEscapeKeydown: (e: KeyboardEvent) => void;
|
||||
}> {
|
||||
}
|
||||
export declare class LinkPreviewContentState {
|
||||
static create(opts: LinkPreviewContentStateOpts): LinkPreviewContentState;
|
||||
readonly opts: LinkPreviewContentStateOpts;
|
||||
readonly root: LinkPreviewRootState;
|
||||
readonly attachment: RefAttachment;
|
||||
constructor(opts: LinkPreviewContentStateOpts, root: LinkPreviewRootState);
|
||||
onpointerdown(e: BitsPointerEvent): void;
|
||||
onpointerenter(e: BitsPointerEvent): void;
|
||||
onfocusout(e: BitsFocusEvent): void;
|
||||
onInteractOutside: (e: PointerEvent) => void;
|
||||
onEscapeKeydown: (e: KeyboardEvent) => void;
|
||||
onOpenAutoFocus: (e: Event) => void;
|
||||
onCloseAutoFocus: (e: Event) => void;
|
||||
get shouldRender(): boolean;
|
||||
readonly snippetProps: {
|
||||
open: boolean;
|
||||
};
|
||||
readonly props: {
|
||||
readonly id: string;
|
||||
readonly tabindex: -1;
|
||||
readonly "data-state": "open" | "closed";
|
||||
readonly onpointerdown: (e: BitsPointerEvent) => void;
|
||||
readonly onpointerenter: (e: BitsPointerEvent) => void;
|
||||
readonly onfocusout: (e: BitsFocusEvent) => void;
|
||||
};
|
||||
readonly popperProps: {
|
||||
onInteractOutside: (e: PointerEvent) => void;
|
||||
onEscapeKeydown: (e: KeyboardEvent) => void;
|
||||
onOpenAutoFocus: (e: Event) => void;
|
||||
onCloseAutoFocus: (e: Event) => void;
|
||||
};
|
||||
}
|
||||
export {};
|
||||
+240
@@ -0,0 +1,240 @@
|
||||
import { afterSleep, onDestroyEffect, attachRef, DOMContext, boxWith, } from "svelte-toolbelt";
|
||||
import { Context, watch } from "runed";
|
||||
import { on } from "svelte/events";
|
||||
import { createBitsAttrs, boolToStr, getDataOpenClosed } from "../../internal/attrs.js";
|
||||
import { isElement, isFocusVisible, isTouch } from "../../internal/is.js";
|
||||
import { getTabbableCandidates } from "../../internal/focus.js";
|
||||
import { SafePolygon } from "../../internal/safe-polygon.svelte.js";
|
||||
import { PresenceManager } from "../../internal/presence-manager.svelte.js";
|
||||
const linkPreviewAttrs = createBitsAttrs({
|
||||
component: "link-preview",
|
||||
parts: ["content", "trigger"],
|
||||
});
|
||||
const LinkPreviewRootContext = new Context("LinkPreview.Root");
|
||||
export class LinkPreviewRootState {
|
||||
static create(opts) {
|
||||
return LinkPreviewRootContext.set(new LinkPreviewRootState(opts));
|
||||
}
|
||||
opts;
|
||||
hasSelection = $state(false);
|
||||
isPointerDownOnContent = $state(false);
|
||||
containsSelection = $state(false);
|
||||
timeout = null;
|
||||
contentNode = $state(null);
|
||||
contentMounted = $state(false);
|
||||
contentPresence;
|
||||
triggerNode = $state(null);
|
||||
isOpening = false;
|
||||
domContext = new 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);
|
||||
},
|
||||
});
|
||||
watch(() => this.opts.open.current, (isOpen) => {
|
||||
if (!isOpen) {
|
||||
this.hasSelection = false;
|
||||
return;
|
||||
}
|
||||
if (!this.domContext)
|
||||
return;
|
||||
const handlePointerUp = () => {
|
||||
this.containsSelection = false;
|
||||
this.isPointerDownOnContent = false;
|
||||
afterSleep(1, () => {
|
||||
const isSelection = this.domContext.getDocument().getSelection()?.toString() !== "";
|
||||
if (isSelection) {
|
||||
this.hasSelection = true;
|
||||
}
|
||||
else {
|
||||
this.hasSelection = false;
|
||||
}
|
||||
});
|
||||
};
|
||||
const unsubListener = on(this.domContext.getDocument(), "pointerup", handlePointerUp);
|
||||
if (!this.contentNode)
|
||||
return;
|
||||
const tabCandidates = getTabbableCandidates(this.contentNode);
|
||||
for (const candidate of tabCandidates) {
|
||||
candidate.setAttribute("tabindex", "-1");
|
||||
}
|
||||
return () => {
|
||||
unsubListener();
|
||||
this.hasSelection = false;
|
||||
this.isPointerDownOnContent = false;
|
||||
};
|
||||
});
|
||||
}
|
||||
clearTimeout() {
|
||||
if (this.timeout) {
|
||||
this.domContext.clearTimeout(this.timeout);
|
||||
this.timeout = null;
|
||||
}
|
||||
}
|
||||
handleOpen() {
|
||||
this.clearTimeout();
|
||||
if (this.opts.open.current || this.opts.disabled.current)
|
||||
return;
|
||||
this.isOpening = true;
|
||||
this.timeout = this.domContext.setTimeout(() => {
|
||||
if (this.isOpening) {
|
||||
this.opts.open.current = true;
|
||||
this.isOpening = false;
|
||||
}
|
||||
}, this.opts.openDelay.current);
|
||||
}
|
||||
immediateClose() {
|
||||
this.clearTimeout();
|
||||
this.isOpening = false;
|
||||
this.opts.open.current = false;
|
||||
}
|
||||
handleClose() {
|
||||
this.isOpening = false;
|
||||
this.clearTimeout();
|
||||
if (!this.isPointerDownOnContent && !this.hasSelection) {
|
||||
this.timeout = this.domContext.setTimeout(() => {
|
||||
this.opts.open.current = false;
|
||||
}, this.opts.closeDelay.current);
|
||||
}
|
||||
}
|
||||
}
|
||||
export class LinkPreviewTriggerState {
|
||||
static create(opts) {
|
||||
return new LinkPreviewTriggerState(opts, LinkPreviewRootContext.get());
|
||||
}
|
||||
opts;
|
||||
root;
|
||||
attachment;
|
||||
constructor(opts, root) {
|
||||
this.opts = opts;
|
||||
this.root = root;
|
||||
this.attachment = attachRef(this.opts.ref, (v) => (this.root.triggerNode = v));
|
||||
this.root.domContext = new DOMContext(opts.ref);
|
||||
this.onpointerenter = this.onpointerenter.bind(this);
|
||||
this.onpointerleave = this.onpointerleave.bind(this);
|
||||
this.onfocus = this.onfocus.bind(this);
|
||||
this.onblur = this.onblur.bind(this);
|
||||
}
|
||||
onpointerenter(e) {
|
||||
if (isTouch(e))
|
||||
return;
|
||||
this.root.handleOpen();
|
||||
}
|
||||
onpointerleave(e) {
|
||||
if (isTouch(e))
|
||||
return;
|
||||
if (!this.root.contentMounted || !this.root.opts.open.current) {
|
||||
this.root.immediateClose();
|
||||
}
|
||||
}
|
||||
onfocus(e) {
|
||||
if (!isFocusVisible(e.currentTarget))
|
||||
return;
|
||||
this.root.handleOpen();
|
||||
}
|
||||
onblur(_) {
|
||||
this.root.handleClose();
|
||||
}
|
||||
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.root.contentNode?.id,
|
||||
role: "button",
|
||||
[linkPreviewAttrs.trigger]: "",
|
||||
onpointerenter: this.onpointerenter,
|
||||
onfocus: this.onfocus,
|
||||
onblur: this.onblur,
|
||||
onpointerleave: this.onpointerleave,
|
||||
...this.attachment,
|
||||
}));
|
||||
}
|
||||
export class LinkPreviewContentState {
|
||||
static create(opts) {
|
||||
return new LinkPreviewContentState(opts, LinkPreviewRootContext.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.root.domContext = new DOMContext(opts.ref);
|
||||
this.onpointerdown = this.onpointerdown.bind(this);
|
||||
this.onpointerenter = this.onpointerenter.bind(this);
|
||||
this.onfocusout = this.onfocusout.bind(this);
|
||||
new SafePolygon({
|
||||
triggerNode: () => this.root.triggerNode,
|
||||
contentNode: () => this.opts.ref.current,
|
||||
enabled: () => this.root.opts.open.current,
|
||||
onPointerExit: () => {
|
||||
this.root.handleClose();
|
||||
},
|
||||
});
|
||||
onDestroyEffect(() => {
|
||||
this.root.clearTimeout();
|
||||
});
|
||||
}
|
||||
onpointerdown(e) {
|
||||
const target = e.target;
|
||||
if (!isElement(target))
|
||||
return;
|
||||
if (e.currentTarget.contains(target)) {
|
||||
this.root.containsSelection = true;
|
||||
}
|
||||
this.root.hasSelection = true;
|
||||
this.root.isPointerDownOnContent = true;
|
||||
}
|
||||
onpointerenter(e) {
|
||||
if (isTouch(e))
|
||||
return;
|
||||
this.root.handleOpen();
|
||||
}
|
||||
onfocusout(e) {
|
||||
e.preventDefault();
|
||||
}
|
||||
onInteractOutside = (e) => {
|
||||
this.opts.onInteractOutside.current(e);
|
||||
if (e.defaultPrevented)
|
||||
return;
|
||||
this.root.handleClose();
|
||||
};
|
||||
onEscapeKeydown = (e) => {
|
||||
this.opts.onEscapeKeydown.current?.(e);
|
||||
if (e.defaultPrevented)
|
||||
return;
|
||||
this.root.handleClose();
|
||||
};
|
||||
onOpenAutoFocus = (e) => {
|
||||
e.preventDefault();
|
||||
};
|
||||
onCloseAutoFocus = (e) => {
|
||||
e.preventDefault();
|
||||
};
|
||||
get shouldRender() {
|
||||
return this.root.contentPresence.shouldRender;
|
||||
}
|
||||
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),
|
||||
[linkPreviewAttrs.content]: "",
|
||||
onpointerdown: this.onpointerdown,
|
||||
onpointerenter: this.onpointerenter,
|
||||
onfocusout: this.onfocusout,
|
||||
...this.attachment,
|
||||
}));
|
||||
popperProps = {
|
||||
onInteractOutside: this.onInteractOutside,
|
||||
onEscapeKeydown: this.onEscapeKeydown,
|
||||
onOpenAutoFocus: this.onOpenAutoFocus,
|
||||
onCloseAutoFocus: this.onCloseAutoFocus,
|
||||
};
|
||||
}
|
||||
+74
@@ -0,0 +1,74 @@
|
||||
import type { ArrowProps, ArrowPropsWithoutHTML } from "../utilities/arrow/types.js";
|
||||
import type { DismissibleLayerProps } from "../utilities/dismissible-layer/types.js";
|
||||
import type { EscapeLayerProps } from "../utilities/escape-layer/types.js";
|
||||
import type { FloatingLayerContentProps } from "../utilities/floating-layer/types.js";
|
||||
import type { PortalProps } from "../utilities/portal/types.js";
|
||||
import type { BitsPrimitiveAnchorAttributes, BitsPrimitiveDivAttributes } from "../../shared/attributes.js";
|
||||
import type { OnChangeFn, WithChild, WithChildNoChildrenSnippetProps, WithChildren, Without } from "../../internal/types.js";
|
||||
import type { FloatingContentSnippetProps, StaticContentSnippetProps } from "../../shared/types.js";
|
||||
export type LinkPreviewRootPropsWithoutHTML = WithChildren<{
|
||||
/**
|
||||
* The open state of the link preview.
|
||||
*
|
||||
* @defaultValue false
|
||||
*/
|
||||
open?: boolean;
|
||||
/**
|
||||
* A callback that will be called when the link preview is opened or closed.
|
||||
*/
|
||||
onOpenChange?: OnChangeFn<boolean>;
|
||||
/**
|
||||
* A callback that will be called when the link preview finishes opening/closing animations.
|
||||
*/
|
||||
onOpenChangeComplete?: OnChangeFn<boolean>;
|
||||
/**
|
||||
* The delay in milliseconds before the preview opens.
|
||||
*
|
||||
* @defaultValue 700
|
||||
*/
|
||||
openDelay?: number;
|
||||
/**
|
||||
* The delay in milliseconds before the preview closes.
|
||||
*
|
||||
* @defaultValue 300
|
||||
*/
|
||||
closeDelay?: number;
|
||||
/**
|
||||
* When `true`, the preview will be disabled and will not open.
|
||||
*
|
||||
* @defaultValue false
|
||||
*/
|
||||
disabled?: boolean;
|
||||
/**
|
||||
* Prevent the preview from opening if the focus did not come using
|
||||
* the keyboard.
|
||||
*
|
||||
* @defaultValue false
|
||||
*/
|
||||
ignoreNonKeyboardFocus?: boolean;
|
||||
}>;
|
||||
export type LinkPreviewRootProps = LinkPreviewRootPropsWithoutHTML;
|
||||
export type LinkPreviewContentPropsWithoutHTML = WithChildNoChildrenSnippetProps<Pick<FloatingLayerContentProps, "side" | "sideOffset" | "align" | "alignOffset" | "avoidCollisions" | "collisionBoundary" | "collisionPadding" | "arrowPadding" | "sticky" | "hideWhenDetached" | "dir" | "customAnchor"> & Omit<DismissibleLayerProps, "onInteractOutsideStart"> & EscapeLayerProps & {
|
||||
/**
|
||||
* When `true`, the link preview content will be forced to mount in the DOM.
|
||||
*
|
||||
* Useful for more control over the transition behavior.
|
||||
*/
|
||||
forceMount?: boolean;
|
||||
}, FloatingContentSnippetProps>;
|
||||
export type LinkPreviewContentProps = LinkPreviewContentPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, LinkPreviewContentPropsWithoutHTML>;
|
||||
export type LinkPreviewContentStaticPropsWithoutHTML = WithChildNoChildrenSnippetProps<Pick<FloatingLayerContentProps, "dir"> & Omit<DismissibleLayerProps, "onInteractOutsideStart"> & EscapeLayerProps & {
|
||||
/**
|
||||
* When `true`, the link preview content will be forced to mount in the DOM.
|
||||
*
|
||||
* Useful for more control over the transition behavior.
|
||||
*/
|
||||
forceMount?: boolean;
|
||||
}, StaticContentSnippetProps>;
|
||||
export type LinkPreviewContentStaticProps = LinkPreviewContentStaticPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, LinkPreviewContentStaticPropsWithoutHTML>;
|
||||
export type LinkPreviewArrowPropsWithoutHTML = ArrowPropsWithoutHTML;
|
||||
export type LinkPreviewArrowProps = ArrowProps;
|
||||
export type LinkPreviewPortalPropsWithoutHTML = PortalProps;
|
||||
export type LinkPreviewPortalProps = LinkPreviewPortalPropsWithoutHTML;
|
||||
export type LinkPreviewTriggerPropsWithoutHTML = WithChild;
|
||||
export type LinkPreviewTriggerProps = LinkPreviewTriggerPropsWithoutHTML & Without<BitsPrimitiveAnchorAttributes, LinkPreviewTriggerPropsWithoutHTML>;
|
||||
+1
@@ -0,0 +1 @@
|
||||
export {};
|
||||
Reference in New Issue
Block a user