Add index paramter to toast for proper overlap styling (#4268)

Author: cmintey

.changeset/twelve-symbols-wave.md

@@ -0,0 +1,7 @@
+---
+"@skeletonlabs/skeleton-react": minor
+"@skeletonlabs/skeleton-svelte": minor
+---
+
+bugfix: Support proper Toast styling when using the `overlap` option.
+  

packages/skeleton-react/src/components/toast/anatomy/group.tsx

@@ -1,15 +1,18 @@
 import type { HTMLAttributes } from '../../../internal/html-attributes.js';
 import type { PropsWithElement } from '../../../internal/props-with-element.js';
 import { GroupContext } from '../modules/group-context.js';
+import type { ToastOptions } from './root.js';
 import { mergeProps, normalizeProps, useMachine } from '@zag-js/react';
 import { group } from '@zag-js/toast';
 import type { Props, Store } from '@zag-js/toast';
 import type { JSX } from 'react';
 import { useId } from 'react';
 
+export type ToastProps<T = any> = Props<T> & ToastOptions<T>;
+
 export interface ToastGroupProps extends PropsWithElement<'div'>, HTMLAttributes<'div', 'id' | 'dir' | 'children'> {
 	toaster: Store;
-	children?: (toast: Props) => JSX.Element | null;
+	children?: (toast: ToastProps) => JSX.Element | null;
 }
 
 export default function Group(props: ToastGroupProps) {
@@ -25,7 +28,7 @@ export default function Group(props: ToastGroupProps) {
 
 	return (
 		<GroupContext.Provider value={service}>
-			{element ? element(attributes) : <div {...attributes}>{api.getToasts().map((toast) => children?.(toast))}</div>}
+			{element ? element(attributes) : <div {...attributes}>{api.getToasts().map((toast, index) => children?.({ ...toast, index }))}</div>}
 		</GroupContext.Provider>
 	);
 }

packages/skeleton-react/src/components/toast/anatomy/root.tsx

@@ -7,8 +7,13 @@ import { connect, machine } from '@zag-js/toast';
 import type { Options } from '@zag-js/toast';
 import { use } from 'react';
 
+export interface ToastOptions<T = any> extends Options<T> {
+	index: number;
+}
+
 export interface ToastRootProps extends PropsWithElement<'div'>, HTMLAttributes<'div', 'id' | 'dir'> {
-	toast: Omit<Options, 'id' | 'parent'>;
+	toast: Omit<ToastOptions, 'id' | 'parent'>;
+	index?: number;
 }
 
 export default function Root(props: ToastRootProps) {

packages/skeleton-svelte/src/components/toast/anatomy/group.svelte

@@ -1,12 +1,15 @@
 <script lang="ts" module>
 	import type { HTMLAttributes } from '../../../internal/html-attributes.js';
 	import type { PropsWithElement } from '../../../internal/props-with-element.js';
+	import type { ToastOptions } from './root.svelte';
 	import type { Props, Store } from '@zag-js/toast';
 	import type { Snippet } from 'svelte';
 
+	export type ToastProps<T = any> = Props<T> & ToastOptions<T>;
+
 	export interface ToastGroupProps extends PropsWithElement<'div'>, HTMLAttributes<'div', 'id' | 'dir' | 'children'> {
 		toaster: Store;
-		children?: Snippet<[Props]>;
+		children?: Snippet<[ToastProps]>;
 	}
 </script>
 
@@ -35,8 +38,8 @@
 	{@render element(attributes)}
 {:else}
 	<div {...attributes}>
-		{#each api.getToasts() as toast (toast.id)}
-			{@render children?.(toast)}
+		{#each api.getToasts() as toast, index (toast.id)}
+			{@render children?.({ ...toast, index })}
 		{/each}
 	</div>
 {/if}

packages/skeleton-svelte/src/components/toast/anatomy/root.svelte

@@ -3,8 +3,12 @@
 	import type { PropsWithElement } from '../../../internal/props-with-element.js';
 	import type { Options } from '@zag-js/toast';
 
+	export interface ToastOptions<T = any> extends Options<T> {
+		index: number;
+	}
+
 	export interface ToastRootProps extends PropsWithElement<'div'>, HTMLAttributes<'div', 'id' | 'dir'> {
-		toast: Options;
+		toast: ToastOptions;
 	}
 </script>
 

playgrounds/skeleton-react/src/routes/components/toast/index.tsx

@@ -2,13 +2,22 @@
 
 import { Toast, createToaster } from '@skeletonlabs/skeleton-react';
 import { createFileRoute } from '@tanstack/react-router';
+import { useEffect, useState } from 'react';
 
 export const Route = createFileRoute('/components/toast/')({
 	component: Page,
 });
 
 function Page() {
-	const toaster = createToaster();
+	const [overlap, setOverlap] = useState(false);
+	const [duration, setDuration] = useState<number>(Infinity);
+
+	const [toaster] = useState(createToaster({ overlap }));
+
+	useEffect(() => {
+		toaster.attrs.overlap = overlap;
+	}, [toaster.attrs.overlap, overlap]);
+
 	return (
 		<>
 			<button
@@ -18,12 +27,28 @@ function Page() {
 						title: 'Toast',
 						description: 'This is a toast message.',
 						action: { label: 'Undo', onClick: () => {} },
-						duration: Infinity,
+						duration,
 					})
 				}
 			>
 				Toast
 			</button>
+
+			<label className="label">
+				<span className="label-text">Options</span>
+				<div className="rounded-container border border-surface-200-800 p-2 flex flex-col gap-2">
+					<label className="flex items-center space-x-2">
+						<input className="checkbox" type="checkbox" checked={overlap} onChange={(e) => setOverlap(e.currentTarget.checked)} />
+						<span>Overlap</span>
+					</label>
+
+					<label className="label">
+						<span className="label-text">Duration (ms)</span>
+						<input className="input w-32" type="number" value={duration} onChange={(e) => setDuration(e.currentTarget.valueAsNumber)} />
+					</label>
+				</div>
+			</label>
+
 			<Toast.Group toaster={toaster}>
 				{(toast) => (
 					<Toast toast={toast} key={toast.id}>

playgrounds/skeleton-svelte/src/routes/components/toast/+page.svelte

@@ -1,33 +1,51 @@
 <script lang="ts">
 	import { Toast, createToaster } from '@skeletonlabs/skeleton-svelte';
 
-	const toaster = createToaster();
-</script>
+	let overlap = $state(false);
+	let duration: number = $state(Infinity);
+
+	let toaster = $derived(createToaster({ overlap }));
 
-<button
-	class="btn preset-filled"
-	onclick={() =>
+	const createToast = () => {
 		toaster.info({
 			title: 'Toast',
 			description: 'This is a toast message.',
-			duration: Infinity,
+			duration,
 			action: { label: 'Undo', onClick: () => toaster.success({ title: 'Undone' }) },
-		})}
->
-	Toast
-</button>
+		});
+	};
+</script>
+
+<button class="btn preset-filled" onclick={createToast}> Toast </button>
+
+<label class="label">
+	<span class="label-text">Options</span>
+	<div class="rounded-container border border-surface-200-800 p-2 flex flex-col gap-2">
+		<label class="flex items-center space-x-2">
+			<input class="checkbox" type="checkbox" bind:checked={overlap} />
+			<span>Overlap</span>
+		</label>
+
+		<label class="label">
+			<span class="label-text">Duration (ms)</span>
+			<input class="input w-32" type="number" bind:value={duration} />
+		</label>
+	</div>
+</label>
 
-<Toast.Group {toaster}>
-	{#snippet children(toast)}
-		<Toast {toast}>
-			<Toast.Message>
-				<Toast.Title>{toast.title}</Toast.Title>
-				<Toast.Description>{toast.description}</Toast.Description>
-			</Toast.Message>
-			{#if toast.action}
-				<Toast.ActionTrigger>{toast.action.label}</Toast.ActionTrigger>
-			{/if}
-			<Toast.CloseTrigger />
-		</Toast>
-	{/snippet}
-</Toast.Group>
+{#key toaster}
+	<Toast.Group {toaster}>
+		{#snippet children(toast)}
+			<Toast {toast}>
+				<Toast.Message>
+					<Toast.Title>{toast.title}</Toast.Title>
+					<Toast.Description>{toast.description}</Toast.Description>
+				</Toast.Message>
+				{#if toast.action}
+					<Toast.ActionTrigger>{toast.action.label}</Toast.ActionTrigger>
+				{/if}
+				<Toast.CloseTrigger />
+			</Toast>
+		{/snippet}
+	</Toast.Group>
+{/key}