@svelte-atoms/core 1.0.0-alpha.41 → 1.0.0-alpha.46

package/dist/components/popover/popover-arrow.svelte

@@ -1,110 +1,99 @@
-<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
-	import type { HTMLAttributes } from 'svelte/elements';
-	import { animate as motion } from 'motion';
-	import { HtmlAtom, type Base } from '../atom';
-	import { PopoverBond } from './bond.svelte';
-	import type { PopoverArrowProps } from './types';
-
-	type Element = HTMLElementTagNameMap[E];
-
-	const bond = PopoverBond.get();
-
-	if (!bond) {
-		throw new Error('');
-	}
-
-	let {
-		class: klass = '',
-		children = undefined,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = _animate,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
-		...restProps
-	}: PopoverArrowProps<E, B> & HTMLAttributes<Element> = $props();
-
-	const position = $derived(bond.state.position);
-	const middlewareArrowData = $derived(position?.middlewareData?.arrow);
-	const side = $derived(position?.placement?.split('-')[0] ?? 'top');
-
-	const arrowProps = $derived({
-		...bond.arrow(),
-		...restProps
-	});
-
-	// Rotation based on placement side
-	const rotation = $derived.by(() => {
-		switch (side) {
-			case 'top':
-				return 180;
-			case 'bottom':
-				return 0;
-			case 'left':
-				return 90;
-			case 'right':
-				return -90;
-			default:
-				return 0;
-		}
-	});
-
-	function _animate(node: HTMLElement) {
-		if (!middlewareArrowData) {
-			return;
-		}
-
-		const { x, y } = middlewareArrowData;
-
-		const isMainAxis = side === 'top' || side === 'bottom';
-
-		const crossAxisStyle = isMainAxis
-			? {
-					left: 0
-				}
-			: {
-					top: 0
-				};
-
-		motion(
-			node,
-			{
-				x: x ?? 0,
-				y: y ?? 0,
-				opacity: 1,
-				...crossAxisStyle
-			},
-			{ duration: 0 }
-		);
-	}
-</script>
-
-<HtmlAtom
-	{bond}
-	preset="popover.arrow"
-	class={['text-border border-border pointer-events-none absolute opacity-0', '$preset', klass]}
-	onmount={onmount?.bind(bond.state)}
-	ondestroy={ondestroy?.bind(bond.state)}
-	animate={animate?.bind(bond.state)}
-	enter={enter?.bind(bond.state)}
-	exit={exit?.bind(bond.state)}
-	initial={initial?.bind(bond.state)}
-	style="{side}: 100%;"
-	{...arrowProps}
->
-	{#if children}
-		{@render children({ popover: bond })}
-	{:else}
-		<svg
-			width="16"
-			height="8"
-			viewBox="0 0 16 8"
-			fill="none"
-			xmlns="http://www.w3.org/2000/svg"
-			style="transform: rotate({rotation}deg);"
-		>
-			<path d="M0 8C2 8 6 4 8 0C10 4 14 8 16 8H0Z" fill="currentColor" />
-		</svg>
-	{/if}
-</HtmlAtom>
+<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
+	import { animate as motion } from 'motion';
+	import { HtmlAtom, type Base } from '../atom';
+	import { PopoverBond } from './bond.svelte';
+	import type { PopoverArrowProps } from './types';
+
+	const bond = PopoverBond.get();
+
+	if (!bond) {
+		throw new Error('');
+	}
+
+	let {
+		class: klass = '',
+		children = undefined,
+		fallback = {
+			animate: _animate
+		},
+		...restProps
+	}: PopoverArrowProps<E, B> = $props();
+
+	const position = $derived(bond.state.position);
+	const middlewareArrowData = $derived(position?.middlewareData?.arrow);
+	const side = $derived(position?.placement?.split('-')[0] ?? 'top');
+
+	const arrowProps = $derived({
+		...bond.arrow().spread,
+		...restProps
+	} as Record<string, unknown>);
+
+	// Rotation based on placement side
+	const rotation = $derived.by(() => {
+		switch (side) {
+			case 'top':
+				return 180;
+			case 'bottom':
+				return 0;
+			case 'left':
+				return 90;
+			case 'right':
+				return -90;
+			default:
+				return 0;
+		}
+	});
+
+	function _animate(node: HTMLElement) {
+		if (!middlewareArrowData) {
+			return;
+		}
+
+		const { x, y } = middlewareArrowData;
+
+		const isMainAxis = side === 'top' || side === 'bottom';
+
+		const crossAxisStyle = isMainAxis
+			? {
+					left: 0
+				}
+			: {
+					top: 0
+				};
+
+		motion(
+			node,
+			{
+				x: x ?? 0,
+				y: y ?? 0,
+				opacity: 1,
+				...crossAxisStyle
+			},
+			{ duration: 0 }
+		);
+	}
+</script>
+
+<HtmlAtom
+	{bond}
+	{fallback}
+	preset="popover.arrow"
+	class={['text-border border-border pointer-events-none absolute opacity-0', '$preset', klass]}
+	style="{side}: 100%;"
+	{...arrowProps}
+>
+	{#if children}
+		{@render children({ popover: bond })}
+	{:else}
+		<svg
+			width="16"
+			height="8"
+			viewBox="0 0 16 8"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+			style="transform: rotate({rotation}deg);"
+		>
+			<path d="M0 8C2 8 6 4 8 0C10 4 14 8 16 8H0Z" fill="currentColor" />
+		</svg>
+	{/if}
+</HtmlAtom>

package/dist/components/popover/popover-arrow.svelte.d.ts

@@ -1,8 +1,7 @@
-import type { HTMLAttributes } from 'svelte/elements';
 import { type Base } from '../atom';
 import type { PopoverArrowProps } from './types';
 declare function $$render<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(): {
-    props: PopoverArrowProps<E, B> & HTMLAttributes<HTMLElementTagNameMap[E]>;
+    props: PopoverArrowProps<E, B>;
     exports: {};
     bindings: "";
     slots: {};

package/dist/components/popover/popover-content.svelte

@@ -1,123 +1,86 @@
-<script lang="ts" generics="E extends HtmlElementTagName, B extends Base = Base">
-	import { PortalBond, PortalsBond, Teleport } from '../portal';
-	import { HtmlAtom, type Base } from '../atom';
-	import type { HtmlElementTagName, HtmlElementType } from '../element';
-	import { PopoverBond } from './bond.svelte';
-	import { animatePopoverContent } from './motion';
-	import type { AnimateParams, PopoverContentProps } from './types';
-
-	type Element = HtmlElementType<E>;
-
-	const bond = PopoverBond.get();
-	
-	const activePortalBond = (() => {
-		const key = bond.state.props.portal;
-		if (key instanceof PortalBond) {
-			return key;
-		}
-
-		let portal: PortalBond | undefined | null = undefined;
-
-		if (typeof key === 'string') {
-			portal = PortalsBond.get()?.state.get(key);
-			console.error('portal was not found');
-		}
-
-		return portal ?? PortalBond.get();
-	})();
-
-	if (!bond) {
-		throw new Error('<PopoverOverlay /> must be used within a <Popover />');
-	}
-
-	let {
-		class: klass = '',
-		children = undefined,
-		animate = animatePopoverContent(),
-		...restProps
-	}: PopoverContentProps<E, B> = $props();
-
-	const isOpen = $derived(bond.state.isOpen && !!bond.elements.trigger);
-	const portalId = $derived(activePortalBond?.id);
-
-	/**
-	 * Calculate the final position and opacity for the popover content
-	 */
-	function calculatePosition() {
-		const position = bond.state.position;
-		
-		if (!position) {
-			return null;
-		}
-
-		const { placement, x = 0, y = 0, middlewareData } = position;
-		const offset = bond.state.props.offset;
-		const openState = +isOpen;
-
-		// Calculate direction multipliers based on placement
-		const directionY = placement?.startsWith('top') ? -1 : placement?.startsWith('bottom') ? 1 : 0;
-		const directionX = placement?.startsWith('left') ? -1 : placement?.startsWith('right') ? 1 : 0;
-
-		// Calculate arrow dimensions and delta
-		const arrowWidth = bond?.elements.arrow?.clientWidth ?? 0;
-		const arrowHeight = bond?.elements.arrow?.clientHeight ?? 0;
-		const arrowDelta = middlewareData?.arrow ? 1 : 0;
-
-		// Calculate final position with offset and arrow adjustment
-		const finalX = x + (directionX * offset * openState) + (arrowDelta * directionX * arrowWidth);
-		const finalY = y + (directionY * offset * openState) + (arrowDelta * directionY * arrowHeight);
-
-		return {
-			transform: `translate3d(${finalX}px, ${finalY}px, 1px)`,
-			opacity: openState.toString()
-		};
-	}
-
-	function containerInitial(this: typeof bond.state, node: Element) {
-		const styles = calculatePosition();
-		
-		// Hide content until position is calculated to avoid ghosting
-		if (!styles) {
-			node.style.opacity = '0';
-			return;
-		}
-
-		node.style.transform = styles.transform;
-		node.style.opacity = styles.opacity;
-	}
-
-	function containerAnimate(this: typeof bond.state, node: Element, _?: AnimateParams) {
-		const styles = calculatePosition();
-		
-		if (!styles) {
-			return;
-		}
-
-		node.style.transform = styles.transform;
-		node.style.opacity = '1';
-	}
-</script>
-
-<Teleport
-	portal={portalId ?? 'root.l0'}
-	as="div"
-	class="absolute top-0 left-0 h-min w-fit outline-none"
-	initial={containerInitial?.bind(bond.state)}
-	animate={containerAnimate?.bind(bond.state)}
-	{...bond.content({ engine: 'internal' })}
->
-	<HtmlAtom
-		{bond}
-		preset="popover.content"
-		class={[
-			'popover-content bg-popover text-popover-foreground border-border rounded-md border p-2 opacity-0 shadow-lg outline-none',
-			isOpen && 'pointer-events-auto',
-			'$preset',
-			klass
-		]}
-		animate={animate?.bind(bond.state)}
-		{...restProps}
-	>
-		{@render children?.({ popover: bond })}
-	</HtmlAtom>
-</Teleport>
+<script lang="ts" generics="E extends HtmlElementTagName, B extends Base = Base">
+	import { PortalBond, PortalsBond } from '../portal';
+	import { HtmlAtom, type Base } from '../atom';
+	import type { HtmlElementTagName } from '../element';
+	import { clickout } from '../../attachments';
+	import { PopoverBond } from './bond.svelte';
+	import { animatePopoverContent } from './motion.svelte';
+	import type { PopoverContentProps } from './types';
+	import Floating from './strategies/floating.svelte';
+	import PopoverOverlay from './popover-overlay.svelte';
+
+	const bond = PopoverBond.get();
+
+	if (!bond) {
+		throw new Error('<PopoverOverlay /> must be used within a <Popover />');
+	}
+
+	const activePortalBond = $derived.by(() => {
+		const key = bond.state.props.portal;
+		if (key instanceof PortalBond) {
+			return key;
+		}
+
+		if (typeof key === 'string') {
+			return PortalsBond.get()?.state.get(key);
+		}
+
+		return PortalBond.get();
+	});
+
+	let {
+		class: klass = '',
+		overlay: Overlay = PopoverOverlay,
+		children = undefined,
+		onclickoutside = undefined,
+		fallback = {
+			animate: animatePopoverContent()
+		},
+		...restProps
+	}: PopoverContentProps<E, B> = $props();
+
+	const portalId = $derived(activePortalBond?.id);
+
+	const contentProps = $derived({
+		...bond?.content().spread,
+		...restProps
+	});
+
+	function clickoutAttachement(node: HTMLElement) {
+		const cleanup = clickout((ev) => {
+			if (onclickoutside) {
+				onclickoutside(ev, bond);
+				return;
+			}
+
+			const trigger = bond.element('trigger');
+
+			if (trigger instanceof Element && (trigger.contains(ev.target as Node) || trigger === ev.target)) {
+				return;
+			}
+
+			bond.state.close();
+		}, {})(node);
+
+		return cleanup;
+	}
+</script>
+
+<Floating />
+
+<Overlay portal={portalId ?? 'root.l0'} as="div">
+	<HtmlAtom
+		{@attach clickoutAttachement}
+		{bond}
+		{fallback}
+		preset="popover.content"
+		class={[
+			'popover-content bg-popover text-popover-foreground border-border rounded-md border p-2 opacity-0 shadow-lg outline-none',
+			'$preset',
+			klass
+		]}
+		{...contentProps}
+	>
+		{@render children?.({ popover: bond })}
+	</HtmlAtom>
+</Overlay>

package/dist/components/popover/popover-indicator.svelte

@@ -9,13 +9,7 @@
 
 	let {
 		class: klass = '',
-		children = undefined,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = undefined,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined
+		children = undefined
 	} = $props();
 
 	const isOpen = $derived(bond?.state.props.open ?? false);
@@ -25,12 +19,7 @@
 	{bond}
 	preset="popover.indicator"
 	class={['border-border flex h-5 items-center justify-center', '$preset', klass]}
-	onmount={onmount?.bind(bond.state)}
-	ondestroy={ondestroy?.bind(bond.state)}
-	animate={animate?.bind(bond.state)}
-	enter={enter?.bind(bond.state)}
-	exit={exit?.bind(bond.state)}
-	initial={initial?.bind(bond.state)}
+	{...bond.indicator().spread}
 >
 	{#if children}
 		{@render children?.({ popover: bond })}

package/dist/components/popover/popover-indicator.svelte.d.ts

@@ -1,12 +1,6 @@
 declare const PopoverIndicator: import("svelte").Component<{
     class?: string;
     children?: any;
-    onmount?: any;
-    ondestroy?: any;
-    animate?: any;
-    enter?: any;
-    exit?: any;
-    initial?: any;
 }, {}, "">;
 type PopoverIndicator = ReturnType<typeof PopoverIndicator>;
 export default PopoverIndicator;

package/dist/components/popover/popover-overlay.svelte

@@ -0,0 +1,98 @@
+<script lang="ts">
+	import { Teleport, ZLayer } from "../portal";
+	import { PopoverBond } from "./bond.svelte";
+	import type { PopoverOverlayProps } from "./types";
+
+    const bond = PopoverBond.get();
+    const isOpen = $derived(bond?.state.isOpen ?? false);
+    const positionStrategy = $derived(bond?.state.props.positionStrategy ?? 'absolute');
+
+    const parentLayer = (() => {
+		try {
+			return ZLayer.get();
+		} catch {
+			return undefined;
+		}
+	})();
+
+	const layer = new ZLayer('popover', () => parentLayer?.get() ?? 0).share();
+
+    let { portal, children = undefined, ...restProps}: PopoverOverlayProps = $props();
+
+    const overlayProps = $derived({
+        ...bond?.overlay().spread,
+        ...restProps
+    });
+
+	/**
+	 * Calculate the final position and opacity for the popover content
+	 */
+	function calculatePosition() {
+		const position = bond.state.position;
+
+		if (!position) {
+			return null;
+		}
+
+		const { placement, x = 0, y = 0, middlewareData } = position;
+		const offset = bond.state.props.offset;
+		const openState = +isOpen;
+
+		// Calculate direction multipliers based on placement
+		const directionY = placement?.startsWith('top') ? -1 : placement?.startsWith('bottom') ? 1 : 0;
+		const directionX = placement?.startsWith('left') ? -1 : placement?.startsWith('right') ? 1 : 0;
+
+        const arrow = bond.element('arrow');
+		// Calculate arrow dimensions and delta
+		const arrowWidth = arrow?.clientWidth ?? 0;
+		const arrowHeight = arrow?.clientHeight ?? 0;
+		const arrowDelta = middlewareData?.arrow ? 1 : 0;
+
+		// Calculate final position with offset and arrow adjustment
+		const finalX = x + directionX * offset * openState + arrowDelta * directionX * arrowWidth;
+		const finalY = y + directionY * offset * openState + arrowDelta * directionY * arrowHeight;
+
+		return {
+			transform: `translate3d(${finalX}px, ${finalY}px, 1px)`,
+			opacity: openState.toString()
+		};
+	}
+
+	function initial(this: typeof bond.state, node: HTMLElement) {
+		const styles = calculatePosition();
+
+		// Hide content until position is calculated to avoid ghosting
+		if (!styles) {
+			node.style.opacity = '0';
+			return;
+		}
+
+		node.style.transform = styles.transform;
+		node.style.opacity = styles.opacity;
+	}
+
+	function animate(this: typeof bond.state, node: HTMLElement) {
+		void bond.state.props.open; // Ensure reactivity to open state changes
+
+		const styles = calculatePosition();
+
+		if (!styles) {
+			return;
+		}
+
+		node.style.transform = styles.transform;
+		node.style.opacity = '1';
+	}
+</script>
+
+<Teleport
+	{portal}
+	as="div"
+	class="top-0 left-0 h-min w-fit outline-none pointer-events-none"
+	style="z-index: {layer.get()}; position: {positionStrategy};"
+	initial={initial}
+	animate={animate}
+	{...overlayProps}
+>
+	{@render children?.({ popover: bond })}
+</Teleport>

package/dist/components/popover/popover-overlay.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { PopoverOverlayProps } from "./types";
+declare const PopoverOverlay: import("svelte").Component<PopoverOverlayProps<"div", import("..").SnippetBase>, {}, "">;
+type PopoverOverlay = ReturnType<typeof PopoverOverlay>;
+export default PopoverOverlay;