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

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

@@ -1,89 +1,4 @@
-import { untrack } from 'svelte';
-import { createAttachmentKey } from 'svelte/attachments';
-import { MenuBond, MenuBondState } from '../menu/bond.svelte';
-const DROPDOWN_ELEMENTS_KIND = {
-    placeholder: 'dropdown-placeholder',
-    arrow: 'popover-arrow',
-    trigger: 'popover-trigger',
-    content: 'popover-content',
-    indicator: 'popover-indicator'
-};
-export class DropdownBond extends MenuBond {
-    constructor(state) {
-        super(state);
-    }
-    content() {
-        const isMultiselect = this.state.props.multiple ?? false;
-        const highlightedId = this.state.highlightedItem?.id;
-        return {
-            ...super.content(),
-            role: 'listbox',
-            'aria-multiselectable': isMultiselect,
-            'aria-activedescendant': highlightedId ? `item-${highlightedId}` : undefined,
-            'aria-orientation': 'vertical'
-        };
-    }
-    item() {
-        return {
-            ...super.item(),
-            role: 'option'
-        };
-    }
-    placeholder() {
-        const id = [DROPDOWN_ELEMENTS_KIND.placeholder, this.id].join('-');
-        return {
-            id,
-            role: 'group',
-            'data-atom': 'dropdown',
-            'data-kind': 'placeholder',
-            [createAttachmentKey()]: (node) => {
-                this.elements.placeholder = node;
-            }
-        };
-    }
-    // static get = getDropdownContext;
-    // static set = setDropdownContext;
-    static get() {
-        return MenuBond.get();
-    }
-    static set(context) {
-        return MenuBond.set(context);
-    }
-}
-export class DropdownBondState extends MenuBondState {
-    #selections = $derived(this.props.values
-        ?.map((value) => this.items.get(value))
-        .filter(Boolean) ?? []);
-    constructor(props) {
-        super(props);
-    }
-    get selections() {
-        return this.#selections;
-    }
-    select(ids) {
-        if (untrack(() => this.props.multiple)) {
-            // eslint-disable-next-line svelte/prefer-svelte-reactivity
-            const sequence = new Set(untrack(() => [...ids, ...(this.props.values ?? [])]));
-            this.props.values = [...sequence];
-        }
-        else {
-            const value = ids[0];
-            this.props.values = value ? [value] : [];
-        }
-        this.updateLabels();
-    }
-    unselect(ids) {
-        // eslint-disable-next-line svelte/prefer-svelte-reactivity
-        const sequence = new Set(untrack(() => this.props.values ?? []));
-        for (const v of ids) {
-            sequence.delete(v);
-        }
-        this.props.values = [...sequence];
-        this.updateLabels();
-    }
-    updateLabels() {
-        const labels = this.#selections.map((s) => s.label);
-        this.props.labels = labels;
-        this.props.label = labels[0] ?? '';
-    }
-}
+/**
+ * @deprecated Import from `select/bond.svelte` instead. This module will be removed in a future version.
+ */
+export { SelectBond as DropdownBond, SelectBondState as DropdownBondState } from '../select/bond.svelte';

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

@@ -7,12 +7,6 @@
 	let {
 		class: klass = '',
 		children = undefined,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = undefined,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
 		...restProps
 	} = $props();
 

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

@@ -3,12 +3,6 @@ declare function $$render<T extends keyof HTMLElementTagNameMap = 'div', B exten
     props: {
         class?: string;
         children?: any;
-        onmount?: any;
-        ondestroy?: any;
-        animate?: any;
-        enter?: any;
-        exit?: any;
-        initial?: any;
     } & Record<string, any>;
     exports: {};
     bindings: "";

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

@@ -1,43 +1,31 @@
-<script lang="ts">
-	import { DropdownBond } from './bond.svelte';
-	import { Input } from '../input';
-	import type { DropdownQueryProps } from './types';
-
-	const bond = DropdownBond.get() as DropdownBond;
-
-	if (!bond) {
-		throw new Error('Dropdown atom was not found');
-	}
-
-	let {
-		value = $bindable(),
-		class: klass = '',
-		children = undefined,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = undefined,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
-		...restProps
-	}: DropdownQueryProps = $props();
-</script>
-
-<Input.Control
-	bind:value={
-		() => value,
-		(v) => {
-			value = v;
-		}
-	}
-	{bond}
-	preset="dropdown.query"
-	class={['inline-flex h-auto w-auto flex-1 py-1', '$preset', klass]}
-	onmount={onmount?.bind(bond.state)}
-	ondestroy={ondestroy?.bind(bond.state)}
-	enter={enter?.bind(bond.state)}
-	exit={exit?.bind(bond.state)}
-	initial={initial?.bind(bond.state)}
-	animate={animate?.bind(bond.state)}
-	{...restProps}
-/>
+<script lang="ts">
+	import { DropdownBond } from './bond.svelte';
+	import { Input } from '../input';
+	import type { DropdownQueryProps } from './types';
+
+	const bond = DropdownBond.get() as DropdownBond;
+
+	if (!bond) {
+		throw new Error('Dropdown atom was not found');
+	}
+
+	let {
+		value = $bindable(),
+		class: klass = '',
+		children = undefined,
+		...restProps
+	}: DropdownQueryProps = $props();
+</script>
+
+<Input.Control
+	bind:value={
+		() => value,
+		(v) => {
+			value = v;
+		}
+	}
+	{bond}
+	preset="dropdown.query"
+	class={['inline-flex h-auto w-auto flex-1 py-1', '$preset', klass]}
+	{...restProps}
+/>

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

@@ -1,79 +1,79 @@
-<script lang="ts" generics="T">
-	import { defineProperty, defineState } from '../../utils';
-	import { DropdownBond, DropdownBondState, type DropdownStateProps } from './bond.svelte';
-	import type { DropdownRootProps } from './types';
-
-	let {
-		open = $bindable(false),
-		value = $bindable(),
-		values = $bindable(),
-		labels = $bindable(),
-		label = $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
-	}: DropdownRootProps<T> = $props();
-
-	const bondProps = defineState<DropdownStateProps>(
-		[
-			defineProperty(
-				'open',
-				() => open,
-				(v) => {
-					open = v;
-				}
-			),
-			defineProperty(
-				'values',
-				() => (multiple ? values : [value].filter(Boolean) as T[]),
-				(v) => {
-					values = v;
-					value = v[0];
-				}
-			),
-			defineProperty(
-				'label',
-				() => label,
-				(v) => (label = v)
-			),
-			defineProperty(
-				'labels',
-				() => labels,
-				(v) => (labels = v)
-			),
-			defineProperty('multiple', () => multiple),
-			defineProperty('disabled', () => disabled),
-			defineProperty('placement', () => placement),
-			defineProperty('offset', () => offset),
-			defineProperty('placements', () => placements ?? []),
-			defineProperty('keys', () => keys ?? []),
-			defineProperty('rest', () => restProps)
-		],
-		() => ({})
-	);
-	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 })}
+<script lang="ts" generics="T">
+	import { defineProperty, defineState } from '../../utils';
+	import { DropdownBond, DropdownBondState, type DropdownStateProps } from './bond.svelte';
+	import type { DropdownRootProps } from './types';
+
+	let {
+		open = $bindable(false),
+		value = $bindable(),
+		values = $bindable(),
+		labels = $bindable(),
+		label = $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
+	}: DropdownRootProps<T> = $props();
+
+	const bondProps = defineState<DropdownStateProps>(
+		[
+			defineProperty(
+				'open',
+				() => open,
+				(v) => {
+					open = v;
+				}
+			),
+			defineProperty(
+				'values',
+				() => (multiple ? values : [value].filter(Boolean) as T[]),
+				(v) => {
+					values = v;
+					value = v[0];
+				}
+			),
+			defineProperty(
+				'label',
+				() => label,
+				(v) => (label = v)
+			),
+			defineProperty(
+				'labels',
+				() => labels,
+				(v) => (labels = v)
+			),
+			defineProperty('multiple', () => multiple),
+			defineProperty('disabled', () => disabled),
+			defineProperty('placement', () => placement),
+			defineProperty('offset', () => offset),
+			defineProperty('placements', () => placements ?? []),
+			defineProperty('keys', () => keys ?? []),
+			defineProperty('rest', () => restProps)
+		],
+		() => ({})
+	);
+	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-root.svelte.d.ts

@@ -3,9 +3,9 @@ import type { DropdownRootProps } from './types';
 declare function $$render<T>(): {
     props: DropdownRootProps<T>;
     exports: {
-        getBond: () => DropdownBond<DropdownStateProps, DropdownBondState<DropdownStateProps>, import("./bond.svelte").DropdownBondElements>;
+        getBond: () => DropdownBond<DropdownStateProps, DropdownBondState<DropdownStateProps, any>, import("./bond.svelte").DropdownBondElements, unknown>;
     };
-    bindings: "values" | "value" | "label" | "open" | "labels";
+    bindings: "label" | "values" | "value" | "open" | "labels";
     slots: {};
     events: {};
 };
@@ -13,9 +13,9 @@ declare class __sveltets_Render<T> {
     props(): ReturnType<typeof $$render<T>>['props'];
     events(): ReturnType<typeof $$render<T>>['events'];
     slots(): ReturnType<typeof $$render<T>>['slots'];
-    bindings(): "values" | "value" | "label" | "open" | "labels";
+    bindings(): "label" | "values" | "value" | "open" | "labels";
     exports(): {
-        getBond: () => DropdownBond<DropdownStateProps, DropdownBondState<DropdownStateProps>, import("./bond.svelte").DropdownBondElements>;
+        getBond: () => DropdownBond<DropdownStateProps, DropdownBondState<DropdownStateProps, any>, import("./bond.svelte").DropdownBondElements, unknown>;
     };
 }
 interface $$IsomorphicComponent {

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

@@ -1,55 +1,55 @@
-<script lang="ts" generics="T extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
-	import { type Base } from '../atom';
-	import { DropdownBond } from './bond.svelte';
-	import type { DropdownSelectionProps } from './types';
-	import { Chip } from '../chip';
-	import { HtmlAtom as Atom } from '../atom';
-
-	const bond = DropdownBond.get();
-
-	if (!bond) {
-		throw new Error('DropdownValue must be used within a Dropdown');
-	}
-
-	const isMultiple = $derived(bond.state.props.multiple);
-
-	let {
-		class: klass = '',
-		as = 'div' as T,
-		base = undefined,
-		selection,
-		children,
-		onclose,
-		...restProps
-	}: DropdownSelectionProps<T, B> = $props();
-
-	const _base = $derived((base ?? isMultiple) ? Chip : undefined);
-
-	function handleClose(ev: Event) {
-		onclose?.(ev);
-
-		if (ev.defaultPrevented) return;
-
-		selection.unselect();
-	}
-</script>
-
-<Atom
-	{as}
-	{bond}
-	base={_base}
-	preset="dropdown.value"
-	class={[
-		'dropdown-value border-border inline-flex h-6 flex-nowrap items-center gap-1 rounded-sm px-2 whitespace-nowrap',
-		'$preset',
-		klass
-	]}
-	onclose={handleClose}
-	{...restProps}
->
-	{#if children}
-		{@render children?.()}
-	{:else}
-		{selection.label}
-	{/if}
-</Atom>
+<script lang="ts" generics="T extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
+	import { type Base } from '../atom';
+	import { DropdownBond } from './bond.svelte';
+	import type { DropdownSelectionProps } from './types';
+	import { Chip } from '../chip';
+	import { HtmlAtom as Atom } from '../atom';
+
+	const bond = DropdownBond.get();
+
+	if (!bond) {
+		throw new Error('DropdownValue must be used within a Dropdown');
+	}
+
+	const isMultiple = $derived(bond.state.props.multiple);
+
+	let {
+		class: klass = '',
+		as = 'div' as T,
+		base = undefined,
+		selection,
+		children,
+		onclose,
+		...restProps
+	}: DropdownSelectionProps<T, B> = $props();
+
+	const _base = $derived((base ?? isMultiple) ? Chip : undefined);
+
+	function handleClose(ev: Event) {
+		onclose?.(ev);
+
+		if (ev.defaultPrevented) return;
+
+		selection.unselect();
+	}
+</script>
+
+<Atom
+	{as}
+	{bond}
+	base={_base}
+	preset="dropdown.value"
+	class={[
+		'dropdown-value border-border inline-flex h-6 flex-nowrap items-center gap-1 rounded-sm px-2 whitespace-nowrap',
+		'$preset',
+		klass
+	]}
+	onclose={handleClose}
+	{...restProps}
+>
+	{#if children}
+		{@render children?.()}
+	{:else}
+		{selection.label}
+	{/if}
+</Atom>

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

@@ -1,70 +1,70 @@
-<script lang="ts">
-	import { HtmlAtom as Atom } from '../atom';
-	import DropdownSelection from './dropdown-selection.svelte';
-	import { DropdownBond } from './bond.svelte';
-	import type { DropdownSelectionsProps } from './types';
-	import { onMount, type Component } from 'svelte';
-
-	const bond = DropdownBond.get();
-
-	if (!bond) {
-		throw new Error('DropdownValue must be used within a Dropdown');
-	}
-
-	let {
-		class: klass = '',
-		children,
-		getSelections = undefined,
-		Selection = DropdownSelection as unknown as Component,
-		...restProps
-	}: DropdownSelectionsProps = $props();
-
-	let isMounted = $state(false);
-
-	onMount(()=> {
-		isMounted = true;
-	})
-
-	const selections = $derived.by(() => {
-		isMounted; // ensure re-computation after mount
-
-		if (getSelections) {
-			return getSelections(bond);
-		}
-
-		return bond.state.selections.map((controller) => ({
-			id: controller.id,
-			value: controller.value,
-			get label() {
-				return controller.label;
-			},
-			unselect() {
-				controller.unselect();
-			},
-			get createdAt() {
-				return controller.createdAt;
-			},
-			controller
-		}));
-	});
-	const isMultiple = $derived(bond.state.props.multiple);
-</script>
-
-{#if isMultiple && selections.length}
-	<Atom class={['flex flex-wrap items-center gap-2', klass]} {...restProps}>
-		{#if children}
-			{@render children?.({ selections: selections, selection: selections[0] })}
-		{:else}
-			{#each selections as selection (selection.id)}
-				<Selection {selection}>
-					{selection.label}
-				</Selection>
-			{/each}
-		{/if}
-	</Atom>
-{:else if children && selections[0]}
-	{@render children?.({ selections: selections, selection: selections[0] })}
-{:else if selections[0]}
-	{@const selection = selections[0]}
-	{selection.label}
-{/if}
+<script lang="ts">
+	import { HtmlAtom as Atom } from '../atom';
+	import DropdownSelection from './dropdown-selection.svelte';
+	import { DropdownBond } from './bond.svelte';
+	import type { DropdownSelectionsProps } from './types';
+	import { onMount, type Component } from 'svelte';
+
+	const bond = DropdownBond.get();
+
+	if (!bond) {
+		throw new Error('DropdownValue must be used within a Dropdown');
+	}
+
+	let {
+		class: klass = '',
+		children,
+		getSelections = undefined,
+		Selection = DropdownSelection as unknown as Component,
+		...restProps
+	}: DropdownSelectionsProps = $props();
+
+	let isMounted = $state(false);
+
+	onMount(()=> {
+		isMounted = true;
+	})
+
+	const selections = $derived.by(() => {
+		isMounted; // ensure re-computation after mount
+
+		if (getSelections) {
+			return getSelections(bond);
+		}
+
+		return bond.state.selections.map((controller) => ({
+			id: controller.id,
+			value: controller.value,
+			get label() {
+				return controller.label;
+			},
+			unselect() {
+				controller.unselect();
+			},
+			get createdAt() {
+				return controller.createdAt;
+			},
+			controller
+		}));
+	});
+	const isMultiple = $derived(bond.state.props.multiple);
+</script>
+
+{#if isMultiple && selections.length}
+	<Atom class={['flex flex-wrap items-center gap-2', klass]} {...restProps}>
+		{#if children}
+			{@render children?.({ selections: selections, selection: selections[0] })}
+		{:else}
+			{#each selections as selection (selection.id)}
+				<Selection {selection}>
+					{selection.label}
+				</Selection>
+			{/each}
+		{/if}
+	</Atom>
+{:else if children && selections[0]}
+	{@render children?.({ selections: selections, selection: selections[0] })}
+{:else if selections[0]}
+	{@const selection = selections[0]}
+	{selection.label}
+{/if}