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

package/dist/components/dropdown/item/bond.svelte.js

@@ -0,0 +1,85 @@
+import { BondAtom } from '../../../shared/bond.svelte';
+import { nanoid } from 'nanoid';
+export class DropdownItemAtom extends BondAtom {
+    #id;
+    #props;
+    #dropdownBond;
+    // eslint-disable-next-line svelte/prefer-svelte-reactivity
+    #createdAt = new Date();
+    constructor(props, dropdownBond) {
+        super(dropdownBond, `item-${props().value}`);
+        this.#props = props;
+        this.#dropdownBond = dropdownBond;
+        this.#id = props().id ?? nanoid();
+    }
+    get id() {
+        return this.#id;
+    }
+    get createdAt() {
+        return this.#createdAt;
+    }
+    get props() {
+        return this.#props();
+    }
+    get value() {
+        return this.props.value;
+    }
+    get data() {
+        return this.props.data;
+    }
+    get label() {
+        const element = (this.element?.querySelector('[data-label]') ?? this.element);
+        return element?.innerText ?? this.#props().label ?? '';
+    }
+    get isHighlighted() {
+        return this.#dropdownBond.state.highlightedItem?.id === this.id;
+    }
+    get isSelected() {
+        return this.#dropdownBond.state.props.values?.includes(this.value) ?? false;
+    }
+    get attrs() {
+        const itemId = `dropdown-item-${this.id}`;
+        return {
+            ...super.attrs,
+            id: itemId,
+            role: 'option',
+            'aria-selected': this.isSelected,
+            'data-selected': this.isSelected,
+            'data-highlighted': this.isHighlighted
+        };
+    }
+    get handlers() {
+        return {
+            onclick: () => {
+                this.toggle();
+                if (this.#dropdownBond?.state) {
+                    this.#dropdownBond.state.query = '';
+                }
+                this.close();
+            }
+        };
+    }
+    select() {
+        this.#dropdownBond?.state.select([this.value]);
+    }
+    unselect() {
+        this.#dropdownBond?.state.unselect([this.value]);
+    }
+    toggle() {
+        if (this.isSelected) {
+            this.unselect();
+        }
+        else {
+            this.select();
+        }
+    }
+    close() {
+        this.#dropdownBond?.state.close();
+    }
+    mount() {
+        return this.#dropdownBond?.state?.mountItem?.(this.#id, this);
+    }
+    unmount() {
+        // Items are unregistered via unmount hook
+    }
+}

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

@@ -16,7 +16,7 @@ export declare class DropdownItemController<T = unknown> implements MenuItemCont
     get element(): HTMLElement | null;
     get value(): string;
     get data(): T | undefined;
-    get dropdown(): DropdownBond<DropdownStateProps, DropdownBondState<DropdownStateProps>, import("..").DropdownBondElements> | undefined;
+    get dropdown(): DropdownBond<DropdownStateProps, DropdownBondState<DropdownStateProps, unknown>, import("..").DropdownBondElements, unknown> | undefined;
     get label(): string;
     get isHighlighted(): boolean;
     get isSelected(): boolean;

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

@@ -1,107 +1,81 @@
-<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
-	});
-
-	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>
+<script lang="ts" generics="D">
+	import { nanoid } from 'nanoid';
+	import { DropdownItemAtom, type DropdownItemAtomProps } from './bond.svelte';
+	import type { DropdownItemProps } from './types';
+	import { DropdownBond } from '../bond.svelte';
+	import { HtmlAtom } 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,
+		children = undefined,
+		onclick = undefined,
+		...restProps
+	}: DropdownItemProps<D> = $props();
+
+	// Create reactive props object for the atom
+	const itemProps = $derived<DropdownItemAtomProps<D>>({
+		id: value,
+		value,
+		data,
+		label: undefined
+	});
+
+	// Create the atom instance
+	const atom = new DropdownItemAtom<D>(() => itemProps, dropdown);
+
+	// Derived reactive properties
+	const isHighlighted = $derived(atom.isHighlighted);
+	const isSelected = $derived(atom.isSelected);
+
+	// Merge atom attrs with custom props
+	const itemAttrs = $derived({
+		...atom.attrs,
+		...restProps
+	});
+
+	// Register item with dropdown state and handle mounting
+	$effect.pre(() => {
+		dropdown.state.registerItem(value, atom as any);
+
+		return () => {
+			dropdown.state.unregisterItem(value);
+		};
+	});
+
+	function handleClick(ev: MouseEvent) {
+		onclick?.(ev);
+
+		if (ev.defaultPrevented) {
+			return;
+		}
+
+		ev.preventDefault();
+
+		atom.toggle();
+	}
+</script>
+
+<HtmlAtom
+	{preset}
+	class={[
+		isHighlighted && 'bg-foreground/5',
+		isSelected && 'bg-primary/5 hover:bg-primary/10 active:bg-primary/15',
+		'$preset',
+		klass
+	]
+		.filter(Boolean)
+		.join(' ')}
+	{...itemAttrs}
+	onclick={handleClick}
+>
+	{@render children?.({ dropdownItem: atom })}
+</HtmlAtom>

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

@@ -1,3 +1,11 @@
-export * from './attachments.svelte';
-export { DropdownItemController } from './controller.svelte';
-export { default as DropdownItem } from './dropdown-item.svelte';
+/**
+ * @deprecated Import from `select/item` instead. This module will be removed in a future version.
+ */
+export { SelectItemController as DropdownItemController, type SelectItemProps as DropdownItemProps } from '../../select/item/controller.svelte';
+export { 
+/**
+ * @deprecated Use `selectItem` instead.
+ */
+selectItem as dropdownItem } from '../../select/item/attachments.svelte';
+export { SelectItem as DropdownItem } from '../../select/item';
+export type { SelectItemProps as DropdownItemComponentProps } from '../../select/item/types';

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

@@ -1,3 +1,10 @@
-export * from './attachments.svelte';
-export { DropdownItemController } from './controller.svelte';
-export { default as DropdownItem } from './dropdown-item.svelte';
+/**
+ * @deprecated Import from `select/item` instead. This module will be removed in a future version.
+ */
+export { SelectItemController as DropdownItemController } from '../../select/item/controller.svelte';
+export { 
+/**
+ * @deprecated Use `selectItem` instead.
+ */
+selectItem as dropdownItem } from '../../select/item/attachments.svelte';
+export { SelectItem as DropdownItem } from '../../select/item';

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

@@ -1,69 +1,4 @@
-import type { Component, Snippet } from 'svelte';
-import type { HtmlAtomProps, Base } from '../atom';
-import type { Factory, Override } from '../../types';
-import type { DropdownBond } from './bond.svelte';
-import type { PopoverTriggerProps } from '../popover';
-import type { ClassValue } from 'svelte/elements';
-import type { DropdownItemController } from './item';
 /**
- * Extend this interface to add custom dropdown properties in your application.
+ * @deprecated Import from `select` instead. This module will be removed in a future version.
  */
-export interface DropdownExtendProps {
-}
-/**
- * Extend this interface to add custom dropdown trigger properties in your application.
- */
-export interface DropdownTriggerExtendProps {
-}
-export interface DropdownRootProps<T = any> extends DropdownExtendProps {
-    open?: boolean;
-    value?: T;
-    values?: T[];
-    label?: string;
-    labels?: string[];
-    multiple?: boolean;
-    disabled?: boolean;
-    placements?: string[];
-    placement?: string;
-    offset?: number;
-    keys?: string[];
-    factory?: Factory<DropdownBond>;
-    children?: Snippet<[{
-        dropdown: DropdownBond<any>;
-    }]>;
-    onquerychange?: (query: string) => void;
-}
-export interface DropdownTriggerProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends Override<PopoverTriggerProps<E, B>, {
-    children?: Snippet<[{
-        dropdown?: DropdownBond;
-    }]>;
-}>, DropdownTriggerExtendProps {
-}
-export interface DropdownSelectionsProps {
-    class?: ClassValue;
-    Selection?: Component | undefined;
-    children?: Snippet<[
-        {
-            selections: DropdownSelection[];
-            selection?: DropdownSelection | undefined;
-        }
-    ]>;
-    getSelections?: <T extends DropdownBond>(bond: T) => DropdownSelection[];
-}
-export interface DropdownSelectionProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends HtmlAtomProps<E, B> {
-    selection: DropdownSelection;
-    children?: Snippet;
-    onclose?: (event: Event) => void;
-}
-export interface DropdownQueryProps extends HtmlAtomProps<'input'> {
-    value?: string;
-    children?: Snippet;
-}
-export interface DropdownSelection {
-    readonly id: string;
-    readonly value?: string;
-    readonly label: string;
-    readonly createdAt: Date;
-    unselect: () => void;
-    controller?: DropdownItemController<unknown>;
-}
+export type { SelectRootProps as DropdownRootProps, SelectTriggerProps as DropdownTriggerProps, SelectSelectionsProps as DropdownSelectionsProps, SelectSelectionProps as DropdownSelectionProps, SelectQueryProps as DropdownQueryProps, SelectSelection as DropdownSelection } from '../select/types';

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

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

package/dist/components/dropdown-menu/atoms.js

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

package/dist/components/dropdown-menu/attachments.svelte.d.ts

@@ -0,0 +1,2 @@
+import { PopoverBond } from '../popover/bond.svelte';
+export declare function dropdownMenu(callback: (node: HTMLElement, bond?: PopoverBond) => any): (node: HTMLElement) => any;

package/dist/components/dropdown-menu/attachments.svelte.js

@@ -0,0 +1,5 @@
+import { popover } from '../popover/attachments.svelte';
+import { PopoverBond } from '../popover/bond.svelte';
+export function dropdownMenu(callback) {
+    return popover(callback);
+}

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

@@ -0,0 +1,72 @@
+import { PopoverBond, PopoverState, PopoverContentAtom, PopoverTriggerAtom, type PopoverDomElements, type PopoverStateProps } from '../popover/bond.svelte';
+import { BondAtom } from '../../shared/bond.svelte';
+import type { DropdownMenuItemControllerInterface } from './item/controller.svelte';
+export type DropdownMenuBondProps = PopoverStateProps;
+export type DropdownMenuBondElements = PopoverDomElements;
+export declare class DropdownMenuContentAtom extends PopoverContentAtom {
+    constructor(bond: DropdownMenuBond);
+    protected bond: DropdownMenuBond;
+    get attrs(): {
+        role: "menu";
+        'aria-activedescendant': string | undefined;
+        'aria-orientation': "vertical";
+        'aria-modal': boolean;
+        'aria-labelledby': string;
+        inert: boolean | undefined;
+        tabindex: number;
+        'data-active': boolean;
+    };
+    get handlers(): {
+        onkeydown: (ev: KeyboardEvent) => void;
+    };
+}
+export declare class DropdownMenuTriggerAtom extends PopoverTriggerAtom {
+    constructor(bond: DropdownMenuBond);
+    protected bond: DropdownMenuBond;
+    get attrs(): {
+        'aria-haspopup': "menu";
+        role: string;
+        disabled: boolean | undefined;
+        tabindex: number;
+        'aria-expanded': boolean;
+        'aria-disabled': boolean;
+        'aria-controls': string;
+    };
+    get handlers(): {
+        onkeydown: (ev: KeyboardEvent) => void;
+        onclick: (ev: PointerEvent) => void;
+    };
+}
+export declare class DropdownMenuItemAtom<B extends DropdownMenuBond = DropdownMenuBond> extends BondAtom<B> {
+    constructor(bond: B);
+    get attrs(): {
+        role: "menuitem";
+    };
+    get handlers(): {
+        onkeyup: (ev: KeyboardEvent) => void;
+    };
+}
+export declare class DropdownMenuBond<Props extends DropdownMenuBondProps = DropdownMenuBondProps, State extends DropdownMenuBondState<Props> = DropdownMenuBondState<Props>, Elements extends DropdownMenuBondElements = DropdownMenuBondElements> extends PopoverBond<Props, State, Elements> {
+    constructor(state: State);
+    content(): DropdownMenuContentAtom;
+    trigger(): DropdownMenuTriggerAtom;
+    item(): DropdownMenuItemAtom<this>;
+    static get<Props extends DropdownMenuBondProps = DropdownMenuBondProps, State extends DropdownMenuBondState<Props> = DropdownMenuBondState<Props>, Elements extends DropdownMenuBondElements = DropdownMenuBondElements>(): DropdownMenuBond<Props, State, Elements> | undefined;
+    static set<Props extends DropdownMenuBondProps = DropdownMenuBondProps, State extends DropdownMenuBondState<Props> = DropdownMenuBondState<Props>, Elements extends DropdownMenuBondElements = DropdownMenuBondElements>(context: DropdownMenuBond<Props, State, Elements>): DropdownMenuBond<Props, State, Elements>;
+}
+export declare class DropdownMenuBondState<Props extends DropdownMenuBondProps = DropdownMenuBondProps> extends PopoverState<Props> {
+    #private;
+    constructor(props: () => Props);
+    get items(): Map<string, DropdownMenuItemControllerInterface<Record<string, any>> | DropdownMenuItemAtom<DropdownMenuBond<PopoverStateProps, DropdownMenuBondState<PopoverStateProps>, PopoverDomElements>>>;
+    get highlightedId(): string | null;
+    get highlightedItem(): DropdownMenuItemControllerInterface<Record<string, any>> | DropdownMenuItemAtom<DropdownMenuBond<PopoverStateProps, DropdownMenuBondState<PopoverStateProps>, PopoverDomElements>> | null;
+    get navigation(): {
+        next: () => DropdownMenuItemControllerInterface<Record<string, any>> | DropdownMenuItemAtom<DropdownMenuBond<PopoverStateProps, DropdownMenuBondState<PopoverStateProps>, PopoverDomElements>> | null;
+        previous: () => DropdownMenuItemControllerInterface<Record<string, any>> | DropdownMenuItemAtom<DropdownMenuBond<PopoverStateProps, DropdownMenuBondState<PopoverStateProps>, PopoverDomElements>> | null;
+    };
+    mountItem(id: string, item: DropdownMenuItemControllerInterface<Record<string, any>> | DropdownMenuItemAtom): () => void;
+    unmountItem(id: string): void;
+    item(id: string): DropdownMenuItemControllerInterface<Record<string, any>> | DropdownMenuItemAtom<DropdownMenuBond<PopoverStateProps, DropdownMenuBondState<PopoverStateProps>, PopoverDomElements>> | undefined;
+    registerItem(id: string, atom: DropdownMenuItemAtom): void;
+    unregisterItem(id: string): void;
+}

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

@@ -0,0 +1,173 @@
+import { SvelteMap, SvelteSet } from 'svelte/reactivity';
+import { PopoverBond, PopoverState, PopoverContentAtom, PopoverTriggerAtom } from '../popover/bond.svelte';
+import { BondAtom } from '../../shared/bond.svelte';
+export class DropdownMenuContentAtom extends PopoverContentAtom {
+    constructor(bond) {
+        super(bond);
+    }
+    get attrs() {
+        const highlightedId = this.bond.state.highlightedId;
+        return {
+            ...super.attrs,
+            role: 'menu',
+            'aria-activedescendant': highlightedId ? `item-${highlightedId}` : undefined,
+            'aria-orientation': 'vertical'
+        };
+    }
+    get handlers() {
+        const superHandlers = super.handlers;
+        return {
+            ...superHandlers,
+            onkeydown: (ev) => {
+                superHandlers.onkeydown?.(ev);
+                if (ev.defaultPrevented)
+                    return;
+                if (ev.key === 'ArrowDown') {
+                    this.bond.state.navigation.next();
+                }
+                if (ev.key === 'ArrowUp') {
+                    this.bond.state.navigation.previous();
+                }
+            }
+        };
+    }
+}
+export class DropdownMenuTriggerAtom extends PopoverTriggerAtom {
+    constructor(bond) {
+        super(bond);
+    }
+    get attrs() {
+        return {
+            ...super.attrs,
+            'aria-haspopup': 'menu'
+        };
+    }
+    get handlers() {
+        const superHandlers = super.handlers;
+        return {
+            ...superHandlers,
+            onkeydown: (ev) => {
+                if (ev.key === 'ArrowDown') {
+                    this.bond.state.navigation.next();
+                }
+                if (ev.key === 'ArrowUp') {
+                    this.bond.state.navigation.previous();
+                }
+                if ((ev.key === 'Enter' || ev.key === ' ') &&
+                    this.bond.state.props.open &&
+                    this.bond.state.highlightedItem) {
+                    if (ev.key === ' ') {
+                        ev.preventDefault();
+                    }
+                    this.bond.state.highlightedItem?.element?.click?.();
+                }
+                superHandlers.onkeydown?.(ev);
+            }
+        };
+    }
+}
+export class DropdownMenuItemAtom extends BondAtom {
+    constructor(bond) {
+        super(bond, 'item');
+    }
+    get attrs() {
+        return {
+            ...super.attrs,
+            role: 'menuitem'
+        };
+    }
+    get handlers() {
+        return {
+            onkeyup: (ev) => {
+                const currentTarget = ev.currentTarget;
+                const disabled = currentTarget.getAttribute('disabled') ||
+                    currentTarget.getAttribute('aria-disabled') === 'true';
+                if (disabled)
+                    return;
+                if (ev.key === 'Enter' || ev.key === ' ') {
+                    ev.preventDefault();
+                    this.bond?.state.close();
+                }
+            }
+        };
+    }
+}
+export class DropdownMenuBond extends PopoverBond {
+    constructor(state) {
+        super(state);
+    }
+    content() {
+        return this.atom('content', () => new DropdownMenuContentAtom(this));
+    }
+    trigger() {
+        return this.atom('trigger', () => new DropdownMenuTriggerAtom(this));
+    }
+    item() {
+        return this.atom('item', () => new DropdownMenuItemAtom(this));
+    }
+    static get() {
+        return PopoverBond.get();
+    }
+    static set(context) {
+        return PopoverBond.set(context);
+    }
+}
+export class DropdownMenuBondState 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;
+        this.#items.delete(id);
+    }
+    item(id) {
+        return this.#items.get(id);
+    }
+    registerItem(id, atom) {
+        this.#items.set(id, atom);
+    }
+    unregisterItem(id) {
+        this.#items.delete(id);
+    }
+}