svelte-kit-vice/src/uix/acel/alert-dialog/components/alert-dialog-content.svelte

<script lang="ts">
	import { boxWith, mergeProps, afterSleep } from "../../utilities/index";
	import { DialogContentState } from "../../dialog/dialog.svelte";
	import type { AlertDialogContentProps } from "../types";
	import { createId } from "../../internal/create-id";
	import { noop } from "../../internal/noop";

	const uid = $props.id();

	let {
		id = createId(uid),
		children,
		child,
		ref = $bindable(null),
		forceMount = false,
		onCloseAutoFocus = noop,
		onEscapeKeydown = noop,
		onOpenAutoFocus = noop,
		...restProps
	}: AlertDialogContentProps = $props();

	const contentState = DialogContentState.create({
		id: boxWith(() => id),
		ref: boxWith(
			() => ref,
			(v) => (ref = v)
		),
	});

	const mergedProps = $derived(mergeProps(restProps, contentState.props));

	function handleKeydown(e: KeyboardEvent) {
		if (e.key === "Escape") {
			onEscapeKeydown(e);
			// alert-dialog ignores Escape by default (must use action/cancel)
		}
	}

	$effect(() => {
		if (contentState.root.opts.open.current) {
			onOpenAutoFocus(new Event("focus"));
			afterSleep(0, () => ref?.focus());
		} else {
			onCloseAutoFocus(new Event("focus"));
		}
	});
</script>

<svelte:window onkeydown={handleKeydown} />

{#if contentState.shouldRender || forceMount}
	{#if child}
		{@render child({ props: mergedProps, ...contentState.snippetProps })}
	{:else}
		<div {...mergedProps} bind:this={ref}>
			{@render children?.(contentState.snippetProps)}
		</div>
	{/if}
{/if}