@svelte-atoms/core 1.0.0-alpha.31 → 1.0.0-alpha.32

package/dist/components/popover/bond.svelte.js

@@ -1,7 +1,7 @@
 import { getContext, setContext, untrack } from 'svelte';
 import { createAttachmentKey } from 'svelte/attachments';
 import { autoUpdate, computePosition, arrow, flip, offset } from '@floating-ui/dom';
-import { getElementId, isBrowser } from '../../utils/dom.svelte.js';
+import { focus, focusTrap, getElementId, isBrowser } from '../../utils/dom.svelte.js';
 import { Bond, BondState } from '../../shared/bond.svelte.js';
 const POPOVER_ELEMENTS_KIND = {
     trigger: 'popover-trigger',
@@ -15,7 +15,7 @@ export class PopoverBond extends Bond {
     constructor(state) {
         super(state);
     }
-    trigger(props = {}) {
+    trigger() {
         const isButtonElement = isBrowser()
             ? this.elements.trigger instanceof HTMLButtonElement
             : false;
@@ -42,32 +42,29 @@ export class PopoverBond extends Bond {
                     return;
                 }
                 this.state.toggle();
-                props.onclick?.(ev);
             },
             onkeydown: (ev) => {
                 if (isDisabled)
                     return;
                 // Toggle on Enter or Space
                 if (ev.key === 'Enter' || ev.key === ' ') {
-                    ev.preventDefault();
                     this.state.toggle();
-                    props.onkeydown?.(ev);
+                    return;
+                }
+                if (ev.key === 'Tab') {
+                    this.elements.content?.focus();
+                    return;
                 }
-                // Close on Escape
-                else if (ev.key === 'Escape' && isOpen) {
-                    ev.preventDefault();
+                if (ev.key === 'Escape') {
                     this.state.close();
-                    props.onkeydown?.(ev);
                 }
             },
-            ...props,
             [createAttachmentKey()]: (node) => {
                 this.elements.trigger = node;
                 const position = untrack(() => this.position);
                 if (!position) {
                     const init = async () => {
                         popover(this)({
-                            ...props,
                             onchange: (_node, position) => {
                                 this.position = position;
                             }
@@ -86,7 +83,7 @@ export class PopoverBond extends Bond {
             }
         };
     }
-    content(props = {}) {
+    content() {
         const kind = POPOVER_ELEMENTS_KIND.content;
         const id = getElementId(this.id, kind);
         const triggerId = getElementId(this.id, POPOVER_ELEMENTS_KIND.trigger);
@@ -94,59 +91,47 @@ export class PopoverBond extends Bond {
         const isDisabled = this.state?.props?.disabled ?? false;
         const isActive = isOpen && !isDisabled;
         // Focus management
-        const focusTrap = (ev) => {
-            const node = ev.currentTarget;
+        const focusManager = (ev) => {
             if (ev.key === 'Escape') {
-                ev.preventDefault();
                 this.state.close();
                 this.elements.trigger?.focus();
+                return;
             }
-            // Tab trap - keep focus within popover
-            else if (ev.key === 'Tab') {
-                const focusableElements = node.querySelectorAll('a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])');
-                const firstElement = focusableElements[0];
-                const lastElement = focusableElements[focusableElements.length - 1];
-                if (ev.shiftKey && document.activeElement === firstElement) {
-                    ev.preventDefault();
-                    lastElement?.focus();
-                }
-                else if (!ev.shiftKey && document.activeElement === lastElement) {
-                    ev.preventDefault();
-                    firstElement?.focus();
-                }
-            }
+            focusTrap(ev);
         };
         return {
             id,
             role: 'dialog',
             'aria-modal': false,
             'aria-labelledby': triggerId,
-            'aria-hidden': !isActive,
-            inert: !isActive ? '' : undefined,
+            inert: !isActive ? true : undefined,
             tabindex: -1,
             'data-atom': this.id,
             'data-kind': 'content',
             'data-active': isActive,
-            onkeydown: isOpen ? focusTrap : undefined,
-            ...props,
+            onkeydown: isOpen ? focusManager : undefined,
             [createAttachmentKey()]: (node) => {
                 this.elements.content = node;
-                if (!this.elements.trigger) {
+                const triggerElement = this.elements.trigger;
+                if (!triggerElement) {
                     return;
                 }
                 if (!this.state.isOpen) {
                     return;
                 }
+                // check if trigger contains a focusable element and the focus is already inside
+                // check if the in-focus element is an input, textarea or select to avoid stealing focus
+                const activeElement = document.activeElement;
+                const triggerContainsFocus = ['input', 'textarea'].includes(activeElement.tagName.toLowerCase()) ||
+                    triggerElement === activeElement ||
+                    triggerElement.contains(activeElement);
                 // Move focus to popover when opened
-                setTimeout(() => {
-                    const firstFocusable = node.querySelector('a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])');
-                    (firstFocusable || node).focus();
-                }, 0);
+                if (!triggerContainsFocus) {
+                    setTimeout(() => focus(node), 0);
+                }
                 const cleanup = popover(this)({
-                    ...props,
                     onchange: (node, position) => {
                         this.position = position;
-                        props.onchange?.(node, position);
                     }
                 }, autoUpdate);
                 return () => {
@@ -155,7 +140,7 @@ export class PopoverBond extends Bond {
             }
         };
     }
-    indicator(props = {}) {
+    indicator() {
         const kind = POPOVER_ELEMENTS_KIND.indicator;
         const id = getElementId(this.id, kind);
         const isOpen = this.state?.props?.open ?? false;
@@ -164,13 +149,12 @@ export class PopoverBond extends Bond {
             'aria-hidden': true,
             'aria-live': isOpen ? 'polite' : 'off',
             'data-kind': kind,
-            ...props,
             [createAttachmentKey()]: (node) => {
                 this.elements.indicator = node;
             }
         };
     }
-    arrow(props = {}) {
+    arrow() {
         const kind = POPOVER_ELEMENTS_KIND.arrow;
         const id = getElementId(this.id, kind);
         return {
@@ -178,7 +162,6 @@ export class PopoverBond extends Bond {
             role: 'presentation',
             'aria-hidden': true,
             'data-kind': kind,
-            ...props,
             [createAttachmentKey()]: (node) => {
                 this.elements.arrow = node;
             }

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

@@ -1,137 +1,137 @@
-<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 type { AnimateParams, PopoverContentProps } from './types';
-	import { animatePopoverContent } from './motion';
-
-	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,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = animatePopoverContent(),
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
-		...restProps
-	}: PopoverContentProps<E, B> = $props();
-
-	const isOpen = $derived(bond.state.isOpen && !!bond.elements.trigger);
-	const portalId = $derived(activePortalBond?.id);
-
-	let isInitialized = false;
-
-	function _containerInitial(this: typeof bond.state, node: Element) {
-		const position = bond.position;
-		const placement = position?.placement;
-
-		const x = position?.x ?? 0;
-		const y = position?.y ?? 0;
-
-		const dy = placement?.startsWith('top') ? -1 : placement?.startsWith('bottom') ? 1 : 0;
-		const dx = placement?.startsWith('left') ? -1 : placement?.startsWith('right') ? 1 : 0;
-
-		const offset = bond.state.props.offset;
-
-		const xOffset = dx * offset;
-		const yOffset = dy * offset;
-
-		const openAsNumber = +isOpen;
-		const deltaArrow = position?.middlewareData?.arrow ? 1 : 0;
-
-		const arrowClientWidth = bond?.elements.arrow?.clientWidth ?? 0;
-		const arrowClientHeight = bond?.elements.arrow?.clientHeight ?? 0;
-
-		const _x = x + xOffset * openAsNumber + deltaArrow * dx * arrowClientWidth;
-		const _y = y + yOffset * openAsNumber + deltaArrow * dy * arrowClientHeight;
-
-		node.style.transform = `translate3d(${_x}px, ${_y}px, 1px)`;
-
-		isInitialized = true;
-	}
-
-	function _containerAnimate(this: typeof bond.state, node: Element, _?: AnimateParams) {
-		if (!isInitialized) {
-			return;
-		}
-
-		const position = bond.position;
-		const placement = position?.placement;
-
-		const x = position?.x ?? 0;
-		const y = position?.y ?? 0;
-
-		const dy = placement?.startsWith('top') ? -1 : placement?.startsWith('bottom') ? 1 : 0;
-		const dx = placement?.startsWith('left') ? -1 : placement?.startsWith('right') ? 1 : 0;
-
-		const offset = bond.state.props.offset;
-
-		const xOffset = dx * offset;
-		const yOffset = dy * offset;
-
-		const openAsNumber = +isOpen;
-		const deltaArrow = position?.middlewareData?.arrow ? 1 : 0;
-
-		const arrowClientWidth = bond?.elements.arrow?.clientWidth ?? 0;
-		const arrowClientHeight = bond?.elements.arrow?.clientHeight ?? 0;
-
-		const _x = x + xOffset * openAsNumber + deltaArrow * dx * arrowClientWidth;
-		const _y = y + yOffset * openAsNumber + deltaArrow * dy * arrowClientHeight;
-
-		node.style.transform = `translate3d(${_x}px, ${_y}px, 1px)`;
-	}
-</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({ onchange: _containerInitial })}
->
-	<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
-		]}
-		enter={enter?.bind(bond.state)}
-		exit={exit?.bind(bond.state)}
-		initial={initial?.bind(bond.state)}
-		animate={animate?.bind(bond.state)}
-		onmount={onmount?.bind(bond.state)}
-		ondestroy={ondestroy?.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, HtmlElementType } from '../element';
+	import { PopoverBond } from './bond.svelte';
+	import type { AnimateParams, PopoverContentProps } from './types';
+	import { animatePopoverContent } from './motion';
+
+	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,
+		onmount = undefined,
+		ondestroy = undefined,
+		animate = animatePopoverContent(),
+		enter = undefined,
+		exit = undefined,
+		initial = undefined,
+		...restProps
+	}: PopoverContentProps<E, B> = $props();
+
+	const isOpen = $derived(bond.state.isOpen && !!bond.elements.trigger);
+	const portalId = $derived(activePortalBond?.id);
+
+	let isInitialized = false;
+
+	function _containerInitial(this: typeof bond.state, node: Element) {
+		const position = bond.position;
+		const placement = position?.placement;
+
+		const x = position?.x ?? 0;
+		const y = position?.y ?? 0;
+
+		const dy = placement?.startsWith('top') ? -1 : placement?.startsWith('bottom') ? 1 : 0;
+		const dx = placement?.startsWith('left') ? -1 : placement?.startsWith('right') ? 1 : 0;
+
+		const offset = bond.state.props.offset;
+
+		const xOffset = dx * offset;
+		const yOffset = dy * offset;
+
+		const openAsNumber = +isOpen;
+		const deltaArrow = position?.middlewareData?.arrow ? 1 : 0;
+
+		const arrowClientWidth = bond?.elements.arrow?.clientWidth ?? 0;
+		const arrowClientHeight = bond?.elements.arrow?.clientHeight ?? 0;
+
+		const _x = x + xOffset * openAsNumber + deltaArrow * dx * arrowClientWidth;
+		const _y = y + yOffset * openAsNumber + deltaArrow * dy * arrowClientHeight;
+
+		node.style.transform = `translate3d(${_x}px, ${_y}px, 1px)`;
+
+		isInitialized = true;
+	}
+
+	function _containerAnimate(this: typeof bond.state, node: Element, _?: AnimateParams) {
+		if (!isInitialized) {
+			return;
+		}
+
+		const position = bond.position;
+		const placement = position?.placement;
+
+		const x = position?.x ?? 0;
+		const y = position?.y ?? 0;
+
+		const dy = placement?.startsWith('top') ? -1 : placement?.startsWith('bottom') ? 1 : 0;
+		const dx = placement?.startsWith('left') ? -1 : placement?.startsWith('right') ? 1 : 0;
+
+		const offset = bond.state.props.offset;
+
+		const xOffset = dx * offset;
+		const yOffset = dy * offset;
+
+		const openAsNumber = +isOpen;
+		const deltaArrow = position?.middlewareData?.arrow ? 1 : 0;
+
+		const arrowClientWidth = bond?.elements.arrow?.clientWidth ?? 0;
+		const arrowClientHeight = bond?.elements.arrow?.clientHeight ?? 0;
+
+		const _x = x + xOffset * openAsNumber + deltaArrow * dx * arrowClientWidth;
+		const _y = y + yOffset * openAsNumber + deltaArrow * dy * arrowClientHeight;
+
+		node.style.transform = `translate3d(${_x}px, ${_y}px, 1px)`;
+	}
+</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({ onchange: _containerInitial })}
+>
+	<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
+		]}
+		enter={enter?.bind(bond.state)}
+		exit={exit?.bind(bond.state)}
+		initial={initial?.bind(bond.state)}
+		animate={animate?.bind(bond.state)}
+		onmount={onmount?.bind(bond.state)}
+		ondestroy={ondestroy?.bind(bond.state)}
+		{...restProps}
+	>
+		{@render children?.({ popover: bond })}
+	</HtmlAtom>
+</Teleport>

package/dist/components/popover/popover.stories.svelte

@@ -1,49 +1,37 @@
-<script module>
-	import { defineMeta } from '@storybook/addon-svelte-csf';
-	import { Popover as Popover_ } from '.';
-	import { clickoutPopover } from './attachments.svelte';
-	import { Button } from '../button';
-
-	// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
-	const { Story } = defineMeta({
-		title: 'Atoms/Popover',
-		// This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
-
-		parameters: {
-			// More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
-			layout: 'fullscreen'
-		},
-		args: {}
-	});
-</script>
-
-<script lang="ts">
-	let open = $state(false);
-</script>
-
-<Story name="Popover" args={{}}>
-	{#snippet children(args)}
-		<Popover_.Root bind:open offset={0} {...args}>
-			{#snippet children({ popover })}
-				<!-- {#if dev}
-					<RenderScan duration={400} />
-				{/if} -->
-
-				<Popover_.Trigger base={Button} class="items-center gap-4">
-					<div>Open Popover</div>
-					<Popover_.Indicator />
-				</Popover_.Trigger>
-
-				<Popover_.Content
-					{@attach clickoutPopover((_, atom) => {
-						atom.state.close();
-					})}
-					class="bg-card"
-				>
-					<div>Hello World !</div>
-					<Popover_.Arrow />
-				</Popover_.Content>
-			{/snippet}
-		</Popover_.Root>
-	{/snippet}
-</Story>
+<script module>
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import { Popover as Popover_ } from '.';
+	import { Button } from '../button';
+
+	// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+	const { Story } = defineMeta({
+		title: 'Atoms/Popover',
+		// This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+
+		parameters: {
+			// More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
+			layout: 'fullscreen'
+		},
+		args: {}
+	});
+</script>
+
+<script lang="ts">
+	let open = $state(false);
+</script>
+
+<Story name="Popover" args={{}}>
+	{#snippet children(args)}
+		<Popover_.Root bind:open offset={0} {...args}>
+			<Popover_.Trigger base={Button} class="items-center gap-4">
+				<div>Open Popover</div>
+				<Popover_.Indicator />
+			</Popover_.Trigger>
+
+			<Popover_.Content class="bg-card" autoClose>
+				<div>Hello World !</div>
+				<Popover_.Arrow />
+			</Popover_.Content>
+		</Popover_.Root>
+	{/snippet}
+</Story>

package/dist/components/portal/active-portal.svelte

@@ -1,29 +1,29 @@
-<script lang="ts">
-	import type { PortalBond } from './bond.svelte';
-	import { PortalsBond } from './portals/bond.svelte';
-
-	let { portal, children = undefined } = $props();
-
-	const portalsBond = PortalsBond.get();
-	const activePortal = $derived.by(() => {
-		if (typeof portal === 'string') {
-			return portalsBond?.state?.get(portal) ?? undefined;
-		}
-
-		return portal as PortalBond;
-	});
-
-	if (!portalsBond) {
-		throw new Error('Portals bond is not found');
-	}
-
-	function proxy(...args: any[]) {
-		activePortal?.share();
-
-		return children?.(...args);
-	}
-</script>
-
-{#if activePortal}
-	{@render proxy?.()}
-{/if}
+<script lang="ts">
+	import type { PortalBond } from './bond.svelte';
+	import { PortalsBond } from './portals/bond.svelte';
+
+	let { portal, children = undefined } = $props();
+
+	const portalsBond = PortalsBond.get();
+	const activePortal = $derived.by(() => {
+		if (typeof portal === 'string') {
+			return portalsBond?.state?.get(portal) ?? undefined;
+		}
+
+		return portal as PortalBond;
+	});
+
+	if (!portalsBond) {
+		throw new Error('Portals bond is not found');
+	}
+
+	function proxy(...args: any[]) {
+		activePortal?.share();
+
+		return children?.(...args);
+	}
+</script>
+
+{#if activePortal}
+	{@render proxy?.()}
+{/if}