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

package/dist/components/dropdown/item/dropdown-item.svelte

@@ -1,102 +1,109 @@
-<script
-	lang="ts"
-	generics="D, E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base"
->
-	import { nanoid } from 'nanoid';
-	import {
-		DropdownItemBond,
-		DropdownItemBondState,
-		type DropdownItemBondProps
-	} from './bond.svelte';
-	import { DropdownBond } from '../bond.svelte';
-	import { Item } from '../../menu/atoms';
-	import { defineProperty, defineState } from '../../../utils';
-	import type { Base } from '../../atom';
-
-	const dropdown = DropdownBond.get();
-
-	if (!dropdown) {
-		throw new Error('<DropdownItem> must be used within a <Dropdown>.');
-	}
-
-	let {
-		class: klass = '',
-		preset = 'dropdown.item',
-		value = nanoid(),
-		data = undefined,
-		factory = _factory,
-		children = undefined,
-		onclick = undefined,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = undefined,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
-		...restProps
-	} = $props();
-
-	const bond = factory().share();
-
-	const unmount = bond.mount();
-	$effect(() => unmount);
-
-	const rootProps = $derived({
-		...bond?.root?.(),
-		...restProps
-	});
-
-	function _factory() {
-		const item = dropdown?.state.item(value);
-
-		if (item) {
-			return item as DropdownItemBond;
-		}
-
-		const bondProps = defineState<DropdownItemBondProps<D>>([
-			defineProperty('value', () => value),
-			defineProperty('data', () => data)
-		]);
-		const bondState = new DropdownItemBondState(() => bondProps);
-		return new DropdownItemBond(bondState);
-	}
-
-	function handleClick(ev: MouseEvent) {
-		onclick?.(ev);
-
-		if (ev.defaultPrevented) {
-			return;
-		}
-
-		ev.preventDefault();
-
-		bond.state.toggle();
-
-		if (bond.state.dropdown) {
-			bond.state.dropdown.query = '';
-		}
-
-		bond.state.close();
-	}
-</script>
-
-<Item
-	{bond}
-	{preset}
-	class={[
-		bond.state.isHighlighted && 'bg-foreground/5',
-		bond.state.isSelected && 'bg-primary/5 hover:bg-primary/10 active:bg-primary/15',
-		'$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)}
-	onclick={handleClick}
-	{...rootProps}
->
-	{@render children?.({ dropdownItem: bond })}
-</Item>
+<script lang="ts" generics="D">
+	import { nanoid } from 'nanoid';
+	import { defineProperty, defineState } from '../../../utils';
+	import {
+		DropdownItemController,
+		type DropdownItemProps as ControllerProps
+	} from './controller.svelte';
+	import type { DropdownItemProps } from './types';
+	import { DropdownBond } from '../bond.svelte';
+	import Item from '../../menu/item/menu-item.svelte';
+
+	const dropdown = DropdownBond.get();
+
+	if (!dropdown) {
+		throw new Error('<DropdownItem> must be used within a <Dropdown>.');
+	}
+
+	let {
+		class: klass = '',
+		preset = 'dropdown.item',
+		value = nanoid(),
+		data = undefined,
+		factory = _factory,
+		children = undefined,
+		onclick = undefined,
+		onmount = undefined,
+		ondestroy = undefined,
+		animate = undefined,
+		enter = undefined,
+		exit = undefined,
+		initial = undefined,
+		...restProps
+	}: DropdownItemProps<D> = $props();
+
+	let item: typeof Item = $state(undefined);
+	const controller = $derived(item?.getController());
+	const isHighlighted = $derived(controller?.isHighlighted ?? false);
+	const isSelected = $derived(controller?.isSelected ?? false);
+
+	// const item = factory().share();
+
+	const rootProps = $derived({
+		...controller?.elementProps(),
+		...restProps
+	});
+
+	const ID = $props.id();
+
+	function _factory() {
+		const existing = (dropdown?.state as any)?.item?.(value);
+
+		if (existing) {
+			return existing as DropdownItemController<D>;
+		}
+
+		const itemProps = defineState<ControllerProps<D>>([
+			defineProperty('value', () => value),
+			defineProperty('data', () => data),
+			defineProperty('id', () => value)
+		]);
+		const controller = new DropdownItemController<D>(() => itemProps);
+
+		controller.mount();
+
+		return controller;
+	}
+
+	function handleClick(ev: MouseEvent) {
+		onclick?.(ev);
+
+		if (ev.defaultPrevented) {
+			return;
+		}
+
+		ev.preventDefault();
+
+		controller.toggle();
+
+		if (controller.dropdown?.state) {
+			controller.dropdown.state.query = '';
+		}
+
+		controller.close();
+	}
+</script>
+
+<Item
+	bind:this={item}
+	{preset}
+	class={[
+		isHighlighted && 'bg-foreground/5',
+		isSelected && 'bg-primary/5 hover:bg-primary/10 active:bg-primary/15',
+		'$preset',
+		klass
+	]
+		.filter(Boolean)
+		.join(' ')}
+	enter={enter?.bind(controller)}
+	exit={exit?.bind(controller)}
+	initial={initial?.bind(controller)}
+	animate={animate?.bind(controller)}
+	onmount={onmount?.bind(controller)}
+	ondestroy={ondestroy?.bind(controller)}
+	onclick={handleClick}
+	{factory}
+	{...rootProps}
+>
+	{@render children?.({ dropdownItem: controller })}
+</Item>

package/dist/components/dropdown/item/dropdown-item.svelte.d.ts

@@ -1,40 +1,25 @@
-import { DropdownItemBond } from './bond.svelte';
-import type { Base } from '../../atom';
-declare function $$render<D, E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(): {
-    props: {
-        class?: string;
-        preset?: string;
-        value?: any;
-        data?: any;
-        factory?: () => DropdownItemBond<unknown>;
-        children?: any;
-        onclick?: any;
-        onmount?: any;
-        ondestroy?: any;
-        animate?: any;
-        enter?: any;
-        exit?: any;
-        initial?: any;
-    } & Record<string, any>;
+import type { DropdownItemProps } from './types';
+declare function $$render<D>(): {
+    props: DropdownItemProps<D>;
     exports: {};
     bindings: "";
     slots: {};
     events: {};
 };
-declare class __sveltets_Render<D, E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> {
-    props(): ReturnType<typeof $$render<D, E, B>>['props'];
-    events(): ReturnType<typeof $$render<D, E, B>>['events'];
-    slots(): ReturnType<typeof $$render<D, E, B>>['slots'];
+declare class __sveltets_Render<D> {
+    props(): ReturnType<typeof $$render<D>>['props'];
+    events(): ReturnType<typeof $$render<D>>['events'];
+    slots(): ReturnType<typeof $$render<D>>['slots'];
     bindings(): "";
     exports(): {};
 }
 interface $$IsomorphicComponent {
-    new <D, E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<D, E, B>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<D, E, B>['props']>, ReturnType<__sveltets_Render<D, E, B>['events']>, ReturnType<__sveltets_Render<D, E, B>['slots']>> & {
-        $$bindings?: ReturnType<__sveltets_Render<D, E, B>['bindings']>;
-    } & ReturnType<__sveltets_Render<D, E, B>['exports']>;
-    <D, E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(internal: unknown, props: ReturnType<__sveltets_Render<D, E, B>['props']> & {}): ReturnType<__sveltets_Render<D, E, B>['exports']>;
-    z_$$bindings?: ReturnType<__sveltets_Render<any, any, any>['bindings']>;
+    new <D>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<D>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<D>['props']>, ReturnType<__sveltets_Render<D>['events']>, ReturnType<__sveltets_Render<D>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<D>['bindings']>;
+    } & ReturnType<__sveltets_Render<D>['exports']>;
+    <D>(internal: unknown, props: ReturnType<__sveltets_Render<D>['props']> & {}): ReturnType<__sveltets_Render<D>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
 }
 declare const DropdownItem: $$IsomorphicComponent;
-type DropdownItem<D, E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> = InstanceType<typeof DropdownItem<D, E, B>>;
+type DropdownItem<D> = InstanceType<typeof DropdownItem<D>>;
 export default DropdownItem;

package/dist/components/dropdown/item/index.d.ts

@@ -0,0 +1,3 @@
+export * from './attachments.svelte';
+export { DropdownItemController } from './controller.svelte';
+export { default as DropdownItem } from './dropdown-item.svelte';

package/dist/components/dropdown/item/index.js

@@ -0,0 +1,3 @@
+export * from './attachments.svelte';
+export { DropdownItemController } from './controller.svelte';
+export { default as DropdownItem } from './dropdown-item.svelte';

package/dist/components/dropdown/item/types.d.ts

@@ -0,0 +1,29 @@
+import type { Snippet } from 'svelte';
+import type { MenuItemProps } from '../../menu/item/types';
+import type { DropdownItemController } from './controller.svelte';
+export interface DropdownItemProps<T = unknown> extends Omit<MenuItemProps, 'factory' | 'children' | 'preset'> {
+    /**
+     * Preset key for styling
+     * @default 'dropdown.item'
+     */
+    preset?: string;
+    /**
+     * The value of the dropdown item
+     * @default nanoid()
+     */
+    value?: string;
+    /**
+     * Custom data associated with the item
+     */
+    data?: T;
+    /**
+     * Factory function to create a custom DropdownItemController instance
+     */
+    factory?: () => DropdownItemController<T>;
+    /**
+     * Render prop for children
+     */
+    children?: Snippet<[{
+        dropdownItem: DropdownItemController<T>;
+    }]>;
+}

package/dist/components/dropdown/item/types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/list/list-item.svelte

@@ -1,20 +1,20 @@
-<script lang="ts" generics="T extends keyof HTMLElementTagNameMap = 'li', B extends Base = Base">
-	import { HtmlAtom, type Base } from '../atom';
-
-	let {
-		class: klass = '',
-		as = 'li' as T,
-		preset = 'list.item',
-		children = undefined,
-		...restProps
-	} = $props();
-</script>
-
-<HtmlAtom
-	{as}
-	{preset}
-	class={['border-border flex w-full gap-2 px-4 py-1', '$preset', klass]}
-	{...restProps}
->
-	{@render children?.()}
-</HtmlAtom>
+<script lang="ts" generics="T extends keyof HTMLElementTagNameMap = 'li', B extends Base = Base">
+	import { HtmlAtom, type Base } from '../atom';
+
+	let {
+		class: klass = '',
+		as = 'li' as T,
+		preset = 'list.item',
+		children = undefined,
+		...restProps
+	} = $props();
+</script>
+
+<HtmlAtom
+	{as}
+	{preset}
+	class={['border-border flex w-full gap-2 px-4 py-1', '$preset', klass]}
+	{...restProps}
+>
+	{@render children?.()}
+</HtmlAtom>

package/dist/components/menu/atoms.d.ts

@@ -1,4 +1,9 @@
-export { Root, Trigger, Arrow, Indicator } from '../popover/atoms';
-export { default as List } from './menu-list.svelte';
-export { default as Item } from './menu-item.svelte';
+export { default as Root } from './menu-root.svelte';
+export { default as Content } from './menu-content.svelte';
+/**
+ * @deprecated Use Menu.Content instead
+ */
+export { default as List } from './menu-content.svelte';
+export { default as Item } from './item/menu-item.svelte';
+export { Trigger, Arrow, Indicator } from '../popover/atoms';
 export { Divider, Group, Title } from '../list/atoms';

package/dist/components/menu/atoms.js

@@ -1,4 +1,9 @@
-export { Root, Trigger, Arrow, Indicator } from '../popover/atoms';
-export { default as List } from './menu-list.svelte';
-export { default as Item } from './menu-item.svelte';
+export { default as Root } from './menu-root.svelte';
+export { default as Content } from './menu-content.svelte';
+/**
+ * @deprecated Use Menu.Content instead
+ */
+export { default as List } from './menu-content.svelte';
+export { default as Item } from './item/menu-item.svelte';
+export { Trigger, Arrow, Indicator } from '../popover/atoms';
 export { Divider, Group, Title } from '../list/atoms';

package/dist/components/menu/bond.svelte.d.ts

@@ -0,0 +1,54 @@
+import { PopoverBond, PopoverState, type PopoverDomElements, type PopoverStateProps } from '../popover/bond.svelte';
+import type { MenuItemController } from './item/controller.svelte';
+export type MenuBondProps = PopoverStateProps;
+export type MenuBondElements = PopoverDomElements;
+export declare class MenuBond<Props extends MenuBondProps = MenuBondProps, State extends MenuBondState<Props> = MenuBondState<Props>, Elements extends MenuBondElements = MenuBondElements> extends PopoverBond<Props, State, Elements> {
+    constructor(state: State);
+    content(): {
+        role: string;
+        'aria-activedescendant': string | undefined;
+        'aria-orientation': "vertical";
+        onkeydown: (ev: KeyboardEvent) => void;
+        id: string;
+        'aria-modal': boolean;
+        'aria-labelledby': string;
+        inert: boolean | undefined;
+        tabindex: number;
+        'data-atom': string;
+        'data-kind': string;
+        'data-active': boolean;
+    };
+    trigger(): {
+        'aria-haspopup': "menu";
+        onkeydown: (ev: KeyboardEvent) => void;
+        id: string;
+        role: string;
+        disabled: boolean | undefined;
+        tabindex: number;
+        'aria-expanded': boolean;
+        'aria-disabled': boolean;
+        'aria-controls': string;
+        'data-kind': string;
+        onclick: (ev: PointerEvent) => void;
+    };
+    item(): {
+        role: string;
+        onkeyup: (ev: KeyboardEvent) => void;
+    };
+    static get<Props extends MenuBondProps = MenuBondProps, State extends MenuBondState<Props> = MenuBondState<Props>, Elements extends MenuBondElements = MenuBondElements>(): MenuBond<Props, State, Elements> | undefined;
+    static set<Props extends MenuBondProps = MenuBondProps, State extends MenuBondState<Props> = MenuBondState<Props>, Elements extends MenuBondElements = MenuBondElements>(context: MenuBond<Props, State, Elements>): MenuBond<Props, State, Elements>;
+}
+export declare class MenuBondState<Props extends MenuBondProps = MenuBondProps> extends PopoverState<Props> {
+    #private;
+    constructor(props: () => Props);
+    get items(): Map<string, MenuItemController>;
+    get highlightedId(): string | null;
+    get highlightedItem(): MenuItemController | null;
+    get navigation(): {
+        next: () => MenuItemController | null;
+        previous: () => MenuItemController | null;
+    };
+    mountItem(id: string, item: MenuItemController): () => void;
+    unmountItem(id: string): void;
+    item(id: string): MenuItemController | undefined;
+}

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

@@ -0,0 +1,132 @@
+import { SvelteMap, SvelteSet } from 'svelte/reactivity';
+import { PopoverBond, PopoverState } from '../popover/bond.svelte';
+export class MenuBond extends PopoverBond {
+    constructor(state) {
+        super(state);
+    }
+    content() {
+        const superProps = super.content();
+        const onkeydown = superProps.onkeydown;
+        const highlightedId = this.state.highlightedId;
+        return {
+            ...superProps,
+            role: 'menu',
+            'aria-activedescendant': highlightedId ? `item-${highlightedId}` : undefined,
+            'aria-orientation': 'vertical',
+            onkeydown: (ev) => {
+                // Call any additional onkeydown handler
+                onkeydown?.(ev);
+                if (ev.defaultPrevented)
+                    return;
+                // Handle arrow key navigation
+                if (ev.key === 'ArrowDown') {
+                    this.state.navigation.next();
+                }
+                if (ev.key === 'ArrowUp') {
+                    this.state.navigation.previous();
+                }
+            }
+        };
+    }
+    trigger() {
+        const superProps = super.trigger();
+        return {
+            ...superProps,
+            'aria-haspopup': 'menu',
+            'onkeydown': (ev) => {
+                if (ev.key === 'ArrowDown') {
+                    this.state.navigation.next();
+                }
+                if (ev.key === 'ArrowUp') {
+                    this.state.navigation.previous();
+                }
+                if ((ev.key === 'Enter' || ev.key === ' ') && this.state.props.open && this.state.highlightedItem) {
+                    if (ev.key === ' ') {
+                        ev.preventDefault();
+                    }
+                    this.state.highlightedItem?.element?.click();
+                }
+                // Call any additional onkeydown handler
+                superProps.onkeydown?.(ev);
+            }
+        };
+    }
+    item() {
+        return {
+            role: 'menuitem',
+            onkeyup: (ev) => {
+                const currentTarget = ev.currentTarget;
+                const disabled = currentTarget.getAttribute('disabled') ||
+                    currentTarget.getAttribute('aria-disabled') === 'true';
+                if (disabled)
+                    return;
+                // Activate on Enter or Space
+                if (ev.key === 'Enter' || ev.key === ' ') {
+                    ev.preventDefault();
+                    // Call the click handler if provided
+                    // cast to any to avoid strict event-type mismatch when forwarding
+                    this?.state.close();
+                }
+            }
+        };
+    }
+    static get() {
+        return PopoverBond.get();
+    }
+    static set(context) {
+        return PopoverBond.set(context);
+    }
+}
+export class MenuBondState extends PopoverState {
+    #keys = new SvelteSet();
+    #items = new SvelteMap();
+    #itemsAsArray = $derived(Array.from(this.#items.values()));
+    #index = $state(-1);
+    #highlightedId = $derived(Array.from(this.#items.keys())[this.#index] ?? null);
+    #highlightedItem = $derived(this.#itemsAsArray[this.#index] ?? null);
+    constructor(props) {
+        super(props);
+    }
+    get items() {
+        return this.#items;
+    }
+    get highlightedId() {
+        return this.#highlightedId;
+    }
+    get highlightedItem() {
+        return this.#highlightedItem;
+    }
+    get navigation() {
+        return {
+            next: () => {
+                if (this.#index < 0) {
+                    this.#index = 0;
+                    return this.#highlightedItem;
+                }
+                const length = this.#items.size;
+                this.#index = Math.min((this.#index + 1) % length, length - 1);
+                return this.#highlightedItem;
+            },
+            previous: () => {
+                if (this.#index <= 0) {
+                    this.#index = this.#items.size - 1;
+                    return this.#highlightedItem;
+                }
+                this.#index = Math.max(this.#index - 1, 0);
+                return this.#highlightedItem;
+            }
+        };
+    }
+    mountItem(id, item) {
+        this.#items.set(id, item);
+        return () => this.unmountItem(id);
+    }
+    unmountItem(id) {
+        if (this.#keys.has(id))
+            return; // keep the item if it's still in the data source
+        this.#items.delete(id);
+    }
+    item(id) {
+        return this.#items.get(id);
+    }
+}

package/dist/components/menu/index.d.ts

@@ -2,3 +2,4 @@ export * as Menu from './atoms';
 export * from './types';
 export { PopoverBond, type PopoverDomElements, type PopoverParams, PopoverState, type PopoverStateProps, type TriggerParams } from '../popover';
 export type { AnimatePopoverContentParams as AnimateMenuContentParams, animatePopoverContent as animateMenuContent } from '../popover/motion';
+export * from './item';

package/dist/components/menu/index.js

@@ -1,3 +1,4 @@
 export * as Menu from './atoms';
 export * from './types';
 export { PopoverBond, PopoverState } from '../popover';
+export * from './item';

package/dist/components/menu/item/controller.svelte.d.ts

@@ -0,0 +1,26 @@
+import { MenuBond, MenuBondState, type MenuBondProps } from '../bond.svelte';
+export type MenuItemControllerProps = {
+    id?: string;
+};
+export declare class MenuItemController {
+    #private;
+    static CONTEXT_KEY: string;
+    constructor(props?: () => MenuItemControllerProps);
+    get id(): string;
+    get props(): MenuItemControllerProps;
+    get element(): HTMLElement | null;
+    get menu(): MenuBond<MenuBondProps, MenuBondState<MenuBondProps>, import("..").PopoverDomElements> | undefined;
+    get isHighlighted(): boolean;
+    mount(): () => void;
+    unmount(): void;
+    destroy(): void;
+    share(): MenuItemController;
+    elementProps(): {
+        readonly [x: symbol]: (node: HTMLElement) => () => void;
+        readonly id: string;
+        readonly role: "menuitem";
+        readonly 'data-highlighted': boolean;
+    };
+    static get(): MenuItemController | undefined;
+    static set(item: MenuItemController): MenuItemController;
+}