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

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

@@ -1,123 +1,159 @@
-<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, Teleport } from '../portal';
+	import { HtmlAtom, type Base } from '../atom';
+	import type { HtmlElementTagName } from '../element';
+	import { PopoverBond } from './bond.svelte';
+	import { animatePopoverContent } from './motion';
+	import { ZLayer } from '../portal/zlayer.svelte';
+	import type { PopoverContentProps } from './types';
+	import Floating from './strategies/floating.svelte';
+	import { clickout } from '../../attachments';
+
+	const bond = PopoverBond.get();
+
+	if (!bond) {
+		throw new Error('<PopoverOverlay /> must be used within a <Popover />');
+	}
+
+	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();
+
+	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 = '',
+		children = undefined,
+		animate = animatePopoverContent(),
+		onclickoutside = undefined,
+		...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: 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 containerAnimate(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';
+	}
+
+	function clickoutAttachement(node: HTMLElement) {
+		const cleanup = clickout((ev) => {
+			if (onclickoutside) {
+				onclickoutside(ev, bond);
+				return;
+			}
+
+			const trigger = bond.element('trigger');
+
+			if (trigger && (trigger.contains(ev.target as Node) || trigger === ev.target)) {
+				return;
+			}
+
+			bond.state.close();
+		}, {})(node);
+
+		return cleanup;
+	}
+</script>
+
+<Floating />
+
+<Teleport
+	portal={portalId ?? 'root.l0'}
+	as="div"
+	class="top-0 left-0 h-min w-fit outline-none pointer-events-none"
+	style="z-index: {layer.get()}; position: {positionStrategy};"
+	initial={containerInitial?.bind(bond.state)}
+	animate={containerAnimate?.bind(bond.state)}
+	{...bond.content().spread}
+>
+	<HtmlAtom
+		{@attach clickoutAttachement}
+		{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>

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

@@ -0,0 +1,118 @@
+<script lang="ts">
+	import type { autoUpdate, ComputePositionConfig } from "@floating-ui/dom";
+	import { PopoverBond, type PopoverParams } from "./bond.svelte";
+	import { offset } from "@floating-ui/dom";
+	import { flip } from "svelte/animate";
+	import { shift } from "@floating-ui/dom";
+	import { computePosition } from "@floating-ui/dom";
+
+    const bond = PopoverBond.get();
+    const placement = $derived(bond?.state.props.placement);
+    const placements = $derived(bond?.state.props.placements);
+    const offsetValue = $derived(bond?.state.props.offset);
+    const portal = $derived(bond?.state.props.portal);
+
+    let {} = $props();
+
+    $effect.pre(() => {
+        if(!bond) {
+            return;
+        }
+
+        const trigger = bond.elements.trigger;
+        if(!trigger) {
+            return;
+        }
+        const content = bond.elements.content;
+        if(!content) {
+            return;
+        }
+
+
+
+    });
+
+    function popover(bond: PopoverBond) {
+	    return (props: Record<string, unknown>, updater?: typeof autoUpdate) => {
+            const { offset: ofs, placements, placement } = bond.state.props;
+
+            // Guard: ensure required elements exist
+            if (!bond.elements.content || !bond.elements.trigger) {
+                return;
+            }
+
+            const { content, trigger, arrow: arrowElement } = bond.elements;
+
+            // Build middleware stack
+            const middleware: ComputePositionConfig['middleware'] = [
+                offset(ofs),
+                flip({
+                    fallbackPlacements: placements,
+                    padding: 8,
+                    crossAxis: true,
+                    fallbackStrategy: 'bestFit',
+                    
+                }),
+                shift({
+                    padding: 8,
+                    limiter: {
+                        fn: (state) => {
+                            const { x, y } = state;
+                            return {
+                                x,
+                                y
+                            };
+                        }
+                    }
+                })
+            ];
+
+            // Add arrow middleware if element exists
+            if (arrowElement) {
+                middleware.push(arrow({ element: arrowElement }));
+            }
+
+            // Debounce position change callback
+            const onchangeCallback = props.onchange as PopoverParams['onchange'];
+
+            // Compute position and notify listeners
+            const compute = async () => {
+                // Wait for next frame to ensure DOM has settled and styles are applied
+                // Double requestAnimationFrame - This ensures the browser has completed both layout calculation AND painting, giving us accurate final dimensions
+                await new Promise((resolve) => requestAnimationFrame(() => requestAnimationFrame(resolve)));
+
+                const position = await computePosition(trigger, content, {
+                    placement: placement ?? 'bottom',
+                    middleware
+                });
+
+                // Round to 0.001 precision to avoid excessive updates from sub-pixel changes
+                const x = Math.round((position.x ?? 0) * 100) / 100;
+                const y = Math.round((position.y ?? 0) * 100) / 100;
+
+                bond.state.position = {
+                    middlewareData: position.middlewareData,
+                    placement: position.placement,
+                    strategy: position.strategy,
+                    x,
+                    y
+                };
+                onchangeCallback?.(content, position);
+
+                // Set minimum width to match trigger
+                requestAnimationFrame(() => {
+                    content.style.minWidth = `${trigger.clientWidth}px`;
+                });
+            };
+
+            // Use auto-update if provided, otherwise compute once
+            if (updater) {
+                return updater(trigger, content, compute, {
+                    ancestorScroll: false
+                });
+            }
+
+            compute();
+	};
+}
+</script>

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

@@ -0,0 +1,3 @@
+declare const PopoverEngine: import("svelte").Component<$$ComponentProps, {}, "">;
+type PopoverEngine = ReturnType<typeof PopoverEngine>;
+export default PopoverEngine;

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-root.svelte

@@ -1,49 +1,87 @@
-<script lang="ts">
-	import { PopoverState, PopoverBond, type PopoverStateProps } from './bond.svelte';
-	import { defineProperty, defineState } from '../../utils';
-	import type { PopoverRootProps } from './types';
-
-	let {
-		open = $bindable(false),
-		disabled = false,
-		placements = ['bottom-start', 'bottom-end', 'top-start', 'top-end'],
-		placement = 'bottom-start',
-		offset = 1,
-		portal = undefined,
-		extend = {},
-		factory = _factory,
-		children = undefined,
-		...restProps
-	}: PopoverRootProps = $props();
-
-	const bondProps = defineState<PopoverStateProps>([
-		defineProperty(
-			'open',
-			() => open,
-			(v) => {
-				open = v;
-			}
-		),
-		defineProperty('disabled', () => disabled),
-		defineProperty('placement', () => placement),
-		defineProperty('offset', () => offset),
-		defineProperty('placements', () => placements ?? []),
-		defineProperty('portal', () => portal),
-		defineProperty('rest', () => restProps)
-	]);
-
-	const bond = factory(bondProps).share();
-
-	function _factory(props: typeof bondProps) {
-		const popoverState = new PopoverState(() => props);
-		const popoverBond = new PopoverBond(popoverState);
-
-		return popoverBond;
-	}
-
-	export function getBond() {
-		return bond;
-	}
-</script>
-
-{@render children?.({ popover: bond })}
+<script lang="ts">
+	import { untrack } from 'svelte';
+	import { PopoverState, PopoverBond } from './bond.svelte';
+	import type { PopoverStateProps } from './bond.svelte';
+	import { type BondStateProps } from '../../shared/bond.svelte';
+	import { defineProperty, defineState } from '../../utils';
+	import type { PopoverRootProps } from './types';
+	import { DialogBond } from '../dialog/bond.svelte';
+	import { DrawerBond } from '../drawer';
+	import { SidebarBond } from '../sidebar';
+
+	interface PopoverOwnerState {
+		readonly props: PopoverStateProps;
+
+		open: () => void;
+		close: () => void;
+		toggle: () => void;
+	}
+	interface PopoverOwner {
+		readonly state: PopoverOwnerState;
+	}
+
+	const owner = (()=> {
+		const potentialOwners = [DialogBond, DrawerBond, SidebarBond];
+		for (const potentialOwner of potentialOwners) {
+			try {
+				return potentialOwner.get() as unknown as PopoverOwner;
+			} catch {
+				continue;
+			}
+		}
+		
+		return null;
+	})();
+
+	const positionStrategy = $derived.by(()=> {
+		if(owner instanceof DialogBond){
+			return 'fixed';
+		}
+
+		return 'absolute';
+	})
+
+	let {
+		open = $bindable(false),
+		disabled = false,
+		placements = ['bottom-start', 'bottom-end', 'top-start', 'top-end', 'bottom', 'top'],
+		placement = 'bottom',
+		offset = 1,
+		portal = undefined,
+		factory = _factory,
+		children = undefined,
+		...restProps
+	}: PopoverRootProps = $props();
+
+	const bondProps = defineState<PopoverStateProps>([
+		defineProperty(
+			'open',
+			() => open && (owner?.state?.props?.open ?? true),
+			(v) => {
+				open = v;
+			}
+		),
+		defineProperty('disabled', () => disabled),
+		defineProperty('placement', () => placement),
+		defineProperty('offset', () => offset),
+		defineProperty('placements', () => placements ?? []),
+		defineProperty('portal', () => portal),
+		defineProperty('positionStrategy', () => positionStrategy),
+		defineProperty('rest', () => restProps)
+	]);
+
+	const bond = untrack(() => factory(bondProps as unknown as BondStateProps)).share();
+
+	function _factory() {
+		const popoverState = new PopoverState(() => bondProps);
+		const popoverBond = new PopoverBond(popoverState);
+
+		return popoverBond;
+	}
+
+	export function getBond() {
+		return bond;
+	}
+</script>
+
+{@render children?.({ popover: bond })}

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

@@ -1,4 +1,5 @@
-import { PopoverState, PopoverBond, type PopoverStateProps } from './bond.svelte';
+import { PopoverState, PopoverBond } from './bond.svelte';
+import type { PopoverStateProps } from './bond.svelte';
 import type { PopoverRootProps } from './types';
 declare const PopoverRoot: import("svelte").Component<PopoverRootProps, {
     getBond: () => PopoverBond<PopoverStateProps, PopoverState<PopoverStateProps>, import("./bond.svelte").PopoverDomElements>;

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

@@ -1,35 +1,35 @@
-<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
-	import { HtmlAtom, type Base } from '../atom';
-	import { PopoverBond } from './bond.svelte';
-	import type { PopoverTriggerProps } from './types';
-
-	const bond = PopoverBond.get();
-
-	if (!bond) {
-		throw new Error('<PopoverTrigger /> must be used within a <Popover />');
-	}
-
-	let {
-		class: klass = '',
-		as = 'button' as E,
-		preset = 'popover.trigger',
-		children = undefined,
-		...restProps
-	}: PopoverTriggerProps<E, B> = $props();
-
-	const triggerProps = $derived({
-		...bond.trigger(),
-		...restProps
-	});
-</script>
-
-<HtmlAtom
-	{as}
-	{bond}
-	{preset}
-	class={['border-border flex w-fit cursor-pointer rounded-md p-2', '$preset', klass]}
-	type={as === 'button' ? 'button' : undefined}
-	{...triggerProps}
->
-	{@render children?.({ popover: bond })}
-</HtmlAtom>
+<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
+	import { HtmlAtom, type Base } from '../atom';
+	import { PopoverBond } from './bond.svelte';
+	import type { PopoverTriggerProps } from './types';
+
+	const bond = PopoverBond.get();
+
+	if (!bond) {
+		throw new Error('<PopoverTrigger /> must be used within a <Popover />');
+	}
+
+	let {
+		class: klass = '',
+		as = 'button' as E,
+		preset = 'popover.trigger',
+		children = undefined,
+		...restProps
+	}: PopoverTriggerProps<E, B> = $props();
+ 
+	const triggerProps = $derived({
+		...bond.trigger().spread,
+		...restProps
+	});
+</script>
+
+<HtmlAtom
+	{as}
+	{bond}
+	{preset}
+	class={['border-border flex w-fit cursor-pointer rounded-md p-2', '$preset', klass]}
+	type={as === 'button' ? 'button' : undefined}
+	{...triggerProps}
+>
+	{@render children?.({ popover: bond })}
+</HtmlAtom>