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

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

@@ -1,59 +1,65 @@
-<script lang="ts" generics="T">
-	import { defineProperty, defineState } from '../../utils';
-	import { DropdownBond, DropdownBondState, type DropdownStateProps } from './bond.svelte';
-
-	let {
-		open = $bindable(false),
-		value = $bindable(),
-		values = $bindable(),
-		multiple = false,
-		disabled = false,
-		placements = ['bottom-start', 'bottom-end', 'top-start', 'top-end'],
-		placement = 'bottom-start',
-		offset = 1,
-		keys = [],
-		factory = _factory,
-		children = undefined,
-		onquerychange = undefined,
-		...restProps
-	} = $props();
-
-	const bondProps = defineState<DropdownStateProps>(
-		[
-			defineProperty(
-				'open',
-				() => open,
-				(v) => {
-					open = v;
-				}
-			),
-			defineProperty(
-				'values',
-				() => (multiple ? values : [value].filter(Boolean)),
-				(v) => {
-					values = v;
-					value = v[0];
-				}
-			),
-			defineProperty('multiple', () => multiple),
-			defineProperty('disabled', () => disabled),
-			defineProperty('placement', () => placement),
-			defineProperty('offset', () => offset),
-			defineProperty('placements', () => placements ?? []),
-			defineProperty('keys', () => keys ?? [])
-		],
-		() => ({ onquerychange })
-	);
-	const bond = factory(bondProps).share();
-
-	function _factory(props: typeof bondProps) {
-		const bondState = new DropdownBondState<T>(() => props);
-		return new DropdownBond(bondState);
-	}
-
-	export function getBond() {
-		return bond;
-	}
-</script>
-
-{@render children?.({ dropdown: bond })}
+<script lang="ts" generics="T">
+	import { defineProperty, defineState } from '../../utils';
+	import { DropdownBond, DropdownBondState, type DropdownStateProps } from './bond.svelte';
+
+	let {
+		open = $bindable(false),
+		value = $bindable(),
+		values = $bindable(),
+		multiple = false,
+		disabled = false,
+		placements = ['bottom-start', 'bottom-end', 'top-start', 'top-end'],
+		placement = 'bottom-start',
+		offset = 1,
+		keys = [],
+		factory = _factory,
+		children = undefined,
+		onquerychange = undefined,
+		...restProps
+	} = $props();
+
+	const bondProps = defineState<DropdownStateProps>(
+		[
+			defineProperty(
+				'open',
+				() => open,
+				(v) => {
+					open = v;
+				}
+			),
+			defineProperty(
+				'values',
+				() => (multiple ? values : [value].filter(Boolean)),
+				(v) => {
+					values = v;
+					value = v[0];
+				}
+			),
+			defineProperty('multiple', () => multiple),
+			defineProperty('disabled', () => disabled),
+			defineProperty('placement', () => placement),
+			defineProperty('offset', () => offset),
+			defineProperty('placements', () => placements ?? []),
+			defineProperty('keys', () => keys ?? [])
+		],
+		() => ({ onquerychange })
+	);
+	const bond = factory(bondProps).share();
+
+	function _factory(props: typeof bondProps) {
+		const bondState = new DropdownBondState(() => props);
+		return new DropdownBond(bondState);
+	}
+
+	export function getBond() {
+		return bond;
+	}
+
+	$effect(() => {
+		return () => {
+			bond.destroy();
+		};
+	});
+</script>
+
+{@render children?.({ dropdown: bond })}

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

@@ -1,17 +1,17 @@
-<script lang="ts">
-	import { DropdownBond } from './bond.svelte';
-
-	const bond = DropdownBond.get();
-
-	if (!bond) {
-		throw new Error('DropdownValue must be used within a Dropdown');
-	}
-
-	const selectedItems = $derived(bond.state.selectedItems);
-
-	let { class: klass = '', children, ...restProps } = $props();
-</script>
-
-<!-- <Render class={cn('dropdown-value inline-flex gap-2 items-center flex-wrap', klass)} {...restProps}>
-</Render> -->
-{@render children?.({ items: selectedItems })}
+<script lang="ts">
+	import { DropdownBond } from './bond.svelte';
+
+	const bond = DropdownBond.get();
+
+	if (!bond) {
+		throw new Error('DropdownValue must be used within a Dropdown');
+	}
+
+	const selectedItems = $derived(bond.state.selectedItems);
+
+	let { children } = $props();
+</script>
+
+<!-- <Render class={cn('dropdown-value inline-flex gap-2 items-center flex-wrap', klass)} {...restProps}>
+</Render> -->
+{@render children?.({ items: selectedItems })}

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

@@ -1,6 +1,5 @@
 declare const DropdownValues: import("svelte").Component<{
-    class?: string;
     children: any;
-} & Record<string, any>, {}, "">;
+}, {}, "">;
 type DropdownValues = ReturnType<typeof DropdownValues>;
 export default DropdownValues;

package/dist/components/dropdown/dropdown.stories.svelte

@@ -1,80 +1,83 @@
-<script module>
-	import { defineMeta } from '@storybook/addon-svelte-csf';
-	import { Dropdown as ADropdown } from '.';
-	import { Input } from '../input';
-	import { flip } from 'svelte/animate';
-	import { filter } from './runes.svelte';
-
-	// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
-	const { Story } = defineMeta({
-		title: 'Atoms/Dropdown',
-		// 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);
-
-	const data = $state([
-		{ id: 1, value: 'apple', text: 'Apple' },
-		{ id: 2, value: 'banana', text: 'Banana' },
-		{ id: 3, value: 'cherry', text: 'Cherry' },
-		{ id: 4, value: 'date', text: 'Date' },
-		{ id: 5, value: 'elderberry', text: 'Elderberry' }
-	]);
-
-	const dd = filter(
-		() => data,
-		(query, item) => item.text.toLowerCase().includes(query.toLowerCase())
-	);
-</script>
-
-<Story name="Dropdown" args={{}}>
-	<!-- Multi-select dropdown with search functionality -->
-	<ADropdown.Root
-		bind:open
-		keys={data.map((item) => item.value)}
-		multiple
-		onquerychange={(q) => (dd.query = q)}
-	>
-		{#snippet children({ dropdown })}
-			<!-- Compose ADropdown.Trigger with Input.Root for a custom trigger -->
-			<ADropdown.Trigger
-				base={Input.Root}
-				class="h-auto min-h-12 max-w-sm min-w-sm items-center gap-2 rounded-sm px-4 transition-colors duration-200"
-				onclick={(ev) => {
-					ev.preventDefault();
-
-					dropdown.state.open();
-				}}
-			>
-				<!-- Display selected values with animation -->
-				{#each dropdown?.state?.selectedItems ?? [] as item (item.id)}
-					<div animate:flip={{ duration: 200 }}>
-						<ADropdown.Value value={item.value} class="text-foreground/80">
-							{item.text}
-						</ADropdown.Value>
-					</div>
-				{/each}
-
-				<!-- Inline search input within the trigger -->
-				<ADropdown.Query class="flex-1 px-1" placeholder="Search for fruits..." />
-			</ADropdown.Trigger>
-
-			<!-- ADropdown list with filtered items -->
-			<ADropdown.List>
-				{#each dd.current as item (item.id)}
-					<div animate:flip={{ duration: 200 }}>
-						<ADropdown.Item value={item.value}>{item.text}</ADropdown.Item>
-					</div>
-				{/each}
-			</ADropdown.List>
-		{/snippet}
-	</ADropdown.Root>
-</Story>
+<script module>
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import { Dropdown as ADropdown } from '.';
+	import { Input } from '../input';
+	import { flip } from 'svelte/animate';
+	import { filter } from './runes.svelte';
+
+	// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+	const { Story } = defineMeta({
+		title: 'Atoms/Dropdown',
+		// 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);
+
+	const data = $state([
+		{ id: 1, value: 'apple', text: 'Apple' },
+		{ id: 2, value: 'banana', text: 'Banana' },
+		{ id: 3, value: 'cherry', text: 'Cherry' },
+		{ id: 4, value: 'date', text: 'Date' },
+		{ id: 5, value: 'elderberry', text: 'Elderberry' }
+	]);
+
+	const dd = filter(
+		() => data,
+		(query, item) => item.text.toLowerCase().includes(query.toLowerCase())
+	);
+</script>
+
+<Story name="Dropdown" args={{}}>
+	<!-- Multi-select dropdown with search functionality -->
+	<ADropdown.Root
+		bind:open
+		keys={data.map((item) => item.value)}
+		multiple
+		onquerychange={(q) => (dd.query = q)}
+	>
+		{#snippet children({ dropdown })}
+			<!-- Compose ADropdown.Trigger with Input.Root for a custom trigger -->
+			<ADropdown.Trigger
+				base={Input.Root}
+				class="flex h-auto min-h-12 max-w-sm min-w-sm flex-col items-start gap-1 rounded-sm px-4 transition-colors duration-200"
+				onclick={(ev) => {
+					ev.preventDefault();
+
+					dropdown.state.open();
+				}}
+			>
+				<!-- Inline search input within the trigger -->
+				<ADropdown.Query class="flex-1 px-1" placeholder="Search for fruits..." />
+				<!-- Display selected values with animation -->
+				{#if dropdown?.state?.selectedItems?.length}
+					<div class="flex flex-wrap gap-1">
+						{#each dropdown?.state?.selectedItems ?? [] as item (item.id)}
+							<div animate:flip={{ duration: 200 }}>
+								<ADropdown.Value value={item.value} class="text-foreground/80">
+									{item.text}
+								</ADropdown.Value>
+							</div>
+						{/each}
+					</div>
+				{/if}
+			</ADropdown.Trigger>
+
+			<!-- ADropdown list with filtered items -->
+			<ADropdown.List>
+				{#each dd.current as item (item.id)}
+					<div animate:flip={{ duration: 200 }}>
+						<ADropdown.Item value={item.value}>{item.text}</ADropdown.Item>
+					</div>
+				{/each}
+			</ADropdown.List>
+		{/snippet}
+	</ADropdown.Root>
+</Story>

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

@@ -1,5 +1,6 @@
 export * as Dropdown from './atoms';
 export { DropdownBond, type DropdownBondElements, DropdownBondState, type DropdownStateProps } from './bond.svelte';
+export * from './item';
 export { filter } from './runes.svelte';
 export * from './types';
 export type { AnimatePopoverContentParams as AnimateDropdownContentParams, animatePopoverContent as animateDropdownContent } from '../popover/motion';

package/dist/components/dropdown/index.js

@@ -1,4 +1,5 @@
 export * as Dropdown from './atoms';
 export { DropdownBond, DropdownBondState } from './bond.svelte';
+export * from './item';
 export { filter } from './runes.svelte';
 export * from './types';

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

@@ -1,3 +1,3 @@
 import type { DropdownBond } from '../bond.svelte';
-import { DropdownItemBond } from './bond.svelte';
-export declare function dropdownItem(callback: (node: HTMLElement, item?: DropdownItemBond, dropdown?: DropdownBond) => any): (node: HTMLElement) => any;
+import { DropdownItemController } from './controller.svelte';
+export declare function dropdownItem(callback: (node: HTMLElement, item?: DropdownItemController, dropdown?: DropdownBond) => any): (node: HTMLElement) => any;

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

@@ -1,6 +1,6 @@
-import { DropdownItemBond } from './bond.svelte';
+import { DropdownItemController } from './controller.svelte';
 export function dropdownItem(callback) {
-    const item = DropdownItemBond.get();
+    const item = DropdownItemController.get();
     const bond = item?.dropdown;
     return (node) => callback(node, item, bond);
 }

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

@@ -0,0 +1,34 @@
+import { DropdownBond, DropdownBondState, type DropdownStateProps } from '../bond.svelte';
+import { MenuItemController } from '../../menu';
+export type DropdownItemProps<T = unknown> = {
+    id?: string;
+    value: string;
+    data?: T;
+};
+export declare class DropdownItemController<T = unknown> extends MenuItemController {
+    #private;
+    static CONTEXT_KEY: string;
+    constructor(props: () => DropdownItemProps<T>);
+    get value(): any;
+    get data(): any;
+    get element(): HTMLElement | null;
+    get dropdown(): DropdownBond<DropdownStateProps, DropdownBondState<DropdownStateProps>, import("..").DropdownBondElements> | undefined;
+    get text(): string;
+    get isHighlighted(): boolean;
+    get isSelected(): boolean;
+    select(): void;
+    unselect(): void;
+    toggle(): void;
+    close(): void;
+    share(): DropdownItemController<T>;
+    elementProps(): {
+        [x: symbol]: (node: HTMLElement) => () => void;
+        id: string;
+        role: string;
+        'aria-selected': boolean;
+        'data-selected': boolean;
+        'data-highlighted': boolean;
+    };
+    static get<T = unknown>(): DropdownItemController<T> | undefined;
+    static set<T = unknown>(item: DropdownItemController<T>): DropdownItemController<T>;
+}

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

@@ -0,0 +1,82 @@
+import { getContext, setContext } from 'svelte';
+import { createAttachmentKey } from 'svelte/attachments';
+import { DropdownBond, DropdownBondState } from '../bond.svelte';
+import { MenuItemController } from '../../menu';
+export class DropdownItemController extends MenuItemController {
+    static CONTEXT_KEY = '@atoms/context/dropdown/item';
+    #element = null;
+    #dropdown;
+    #unmount;
+    constructor(props) {
+        super(props);
+        this.#dropdown = DropdownBond.get();
+        if (!this.#dropdown) {
+            throw new Error('DropdownItem must be used within a Dropdown context');
+        }
+    }
+    get value() {
+        return this.props?.value;
+    }
+    get data() {
+        return this.props?.data;
+    }
+    get element() {
+        return this.#element;
+    }
+    get dropdown() {
+        return this.#dropdown;
+    }
+    get text() {
+        const element = (this.#element?.querySelector('[data-text]') ?? this.#element);
+        return element?.innerText ?? '';
+    }
+    get isHighlighted() {
+        return this.#dropdown?.state.highlightedItem?.id === this.id;
+    }
+    get isSelected() {
+        return this.#dropdown?.state.props.values?.includes(this.value) ?? false;
+    }
+    select() {
+        this.#dropdown?.state.select([this.value]);
+    }
+    unselect() {
+        this.#dropdown?.state.unselect([this.value]);
+    }
+    toggle() {
+        if (this.isSelected) {
+            this.unselect();
+        }
+        else {
+            this.select();
+        }
+    }
+    close() {
+        this.#dropdown?.state.close();
+    }
+    share() {
+        return DropdownItemController.set(this);
+    }
+    elementProps() {
+        const itemId = `item-${this.id}`;
+        return {
+            id: itemId,
+            role: 'option',
+            'aria-selected': this.isSelected,
+            'data-selected': this.isSelected,
+            'data-highlighted': this.isHighlighted,
+            [createAttachmentKey()]: (node) => {
+                this.#element = node;
+                return () => {
+                    this.#unmount?.();
+                    this.#element = null;
+                };
+            }
+        };
+    }
+    static get() {
+        return getContext(DropdownItemController.CONTEXT_KEY);
+    }
+    static set(item) {
+        return setContext(DropdownItemController.CONTEXT_KEY, item);
+    }
+}