@immich/ui 0.23.4 → 0.23.6

package/dist/components/ConfirmModal/ConfirmModal.svelte

@@ -10,6 +10,7 @@
 
 	interface Props {
 		title?: string;
+		icon?: string | boolean;
 		prompt?: string;
 		confirmText?: string;
 		confirmColor?: Color;
@@ -21,6 +22,7 @@
 
 	let {
 		title = t('confirm'),
+		icon,
 		prompt = t('prompt_default'),
 		confirmText = t('confirm'),
 		confirmColor = 'danger',
@@ -35,7 +37,7 @@
 	};
 </script>
 
-<Modal {title} onClose={() => onClose(false)} {size}>
+<Modal {title} onClose={() => onClose(false)} {size} {icon}>
 	<ModalBody>
 		{#if promptSnippet}{@render promptSnippet()}{:else}
 			<p>{prompt}</p>

package/dist/components/ConfirmModal/ConfirmModal.svelte.d.ts

@@ -2,6 +2,7 @@ import type { Color } from '../../types.js';
 import type { Snippet } from 'svelte';
 interface Props {
     title?: string;
+    icon?: string | boolean;
     prompt?: string;
     confirmText?: string;
     confirmColor?: Color;

package/dist/components/Modal/Modal.svelte

@@ -12,14 +12,13 @@
 	import type { ModalSize } from '../../types.js';
 	import { cleanClass } from '../../utils.js';
 	import { Dialog } from 'bits-ui';
-	import { type Snippet } from 'svelte';
+	import { tick, type Snippet } from 'svelte';
 	import { tv } from 'tailwind-variants';
 
 	type Props = {
 		title: string;
 		size?: ModalSize;
 		class?: string;
-		open?: boolean;
 		icon?: string | boolean;
 		expandable?: boolean;
 		children: Snippet;
@@ -29,7 +28,6 @@
 	let {
 		title,
 		size = 'medium',
-		open = true,
 		icon = true,
 		onClose,
 		class: className,
@@ -54,23 +52,24 @@
 	const bodyChildren = $derived(getChildSnippet(ChildKey.ModalBody));
 	const footerChildren = $derived(getChildSnippet(ChildKey.ModalFooter));
 
-	const onChange = (value: boolean) => {
-		if (!value) {
-			onClose?.();
-		}
+	const handleClose = async () => {
+		// wait for bits-ui to complete its event cycle
+		await tick();
+		await new Promise((resolve) => setTimeout(resolve, 10));
+
+		onClose?.();
 	};
 </script>
 
-<Dialog.Root {open} onOpenChange={onChange}>
+<Dialog.Root open={true}>
 	<Dialog.Portal>
 		<Dialog.Overlay class="fixed start-0 top-0 flex h-dvh w-screen bg-black/30" />
 		<Dialog.Content
 			onkeydown={(e) => {
-				if (e.key === 'Escape' && open) {
-					// Stop propagation to ensure modals close before immich-web takes over
+				if (e.key === 'Escape') {
 					e.stopPropagation();
-					open = false;
-					onClose?.();
+					e.preventDefault();
+					handleClose();
 				}
 			}}
 			class={cleanClass(
@@ -87,9 +86,7 @@
 								<Logo variant="icon" size="tiny" />
 							{/if}
 							<CardTitle tag="p" class="text-dark/90 grow text-lg font-semibold">{title}</CardTitle>
-							<Dialog.Close>
-								<CloseButton class="-me-2" />
-							</Dialog.Close>
+							<CloseButton class="-me-2" onclick={() => handleClose()} />
 						</div>
 					</CardHeader>
 

package/dist/components/Modal/Modal.svelte.d.ts

@@ -4,7 +4,6 @@ type Props = {
     title: string;
     size?: ModalSize;
     class?: string;
-    open?: boolean;
     icon?: string | boolean;
     expandable?: boolean;
     children: Snippet;

package/dist/services/modalManager.svelte.js

@@ -10,8 +10,7 @@ class ModalManager {
         const deferred = new Promise((resolve) => {
             onClose = async (...args) => {
                 await unmount(modal);
-                // make sure bits-ui clean up finishes before resolving
-                setTimeout(() => resolve(args?.[0]), 0);
+                resolve(args?.[0]);
             };
             modal = mount(Component, {
                 target: document.body,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@immich/ui",
-	"version": "0.23.4",
+	"version": "0.23.6",
 	"license": "GNU Affero General Public License version 3",
 	"scripts": {
 		"create": "node scripts/create.js",
@@ -57,7 +57,7 @@
 		"prettier-plugin-svelte": "^3.2.6",
 		"prettier-plugin-tailwindcss": "^0.6.11",
 		"publint": "^0.3.0",
-		"svelte": "^5.0.0",
+		"svelte": "^5.37.0",
 		"svelte-check": "^4.0.0",
 		"svelte-highlight": "^7.8.0",
 		"tailwindcss": "^4.1.7",