Merge pull request #64 from huntabyte/fix/dialog-animations

huntabyte · Aug 20, 2023 · 1490652 · 1490652
2 parents de3a27e + 879ab10
commit 1490652
Show file tree

Hide file tree

Showing 15 changed files with 107 additions and 54 deletions.
diff --git a/.changeset/serious-adults-watch.md b/.changeset/serious-adults-watch.md
@@ -0,0 +1,5 @@
+---
+"bits-ui": patch
+---
+
+Fix: issue preventing dialog transitions
diff --git a/package.json b/package.json
@@ -85,4 +85,5 @@
 		"svelte": "^4.0.0"
 	},
 	"packageManager": "pnpm@8.6.3"
+
 }
diff --git a/patches/@melt-ui__svelte@0.37.2.patch b/patches/@melt-ui__svelte@0.37.2.patch
@@ -0,0 +1,27 @@
+diff --git a/dist/builders/dialog/create.js b/dist/builders/dialog/create.js
+index 13cf6ab7c4ee392ae7530813b6f5a3edc2819628..d42908e0e139327970718e5c32731b3d0cc09de5 100644
+--- a/dist/builders/dialog/create.js
++++ b/dist/builders/dialog/create.js
+@@ -38,13 +38,15 @@ export function createDialog(props) {
+         activeTrigger.set(triggerEl);
+     }
+     function handleClose() {
+-        open.set(false);
+-        const triggerEl = document.getElementById(ids.trigger);
+-        if (triggerEl) {
+-            tick().then(() => {
+-                triggerEl.focus();
+-            });
+-        }
++        tick().then(() => {
++            open.set(false);
++            const triggerEl = document.getElementById(ids.trigger);
++            if (triggerEl) {
++                tick().then(() => {
++                    triggerEl.focus();
++                });
++            }
++        })
+     }
+     onMount(() => {
+         activeTrigger.set(document.getElementById(ids.trigger));
diff --git a/src/components/ui/sheet/sheet-content.svelte b/src/components/ui/sheet/sheet-content.svelte
@@ -3,6 +3,7 @@
 	import { SheetOverlay, SheetPortal, sheetVariants, type Side } from ".";
 	import { Cross2 } from "radix-icons-svelte";
 	import { cn } from "@/utils";
+	import { fly, slide } from "svelte/transition";
 
 	type $$Props = SheetPrimitive.ContentProps & {
 		side?: Side;

diff --git a/src/lib/bits/alert-dialog/components/AlertDialog.svelte b/src/lib/bits/alert-dialog/components/AlertDialog.svelte
@@ -8,7 +8,7 @@
 	export let closeOnEscape: $$Props["closeOnEscape"] = undefined;
 	export let closeOnOutsideClick: $$Props["closeOnOutsideClick"] = undefined;
 	export let portal: $$Props["portal"] = undefined;
-	export let forceVisible: $$Props["forceVisible"] = undefined;
+	export let forceVisible: $$Props["forceVisible"] = true;
 	export let open: $$Props["open"] = undefined;
 	export let onOpenChange: $$Props["onOpenChange"] = undefined;
 

diff --git a/src/lib/bits/alert-dialog/components/AlertDialogContent.svelte b/src/lib/bits/alert-dialog/components/AlertDialogContent.svelte
@@ -11,19 +11,23 @@
 	export let transitionConfig: ContentProps<T>["transitionConfig"] = undefined;
 	export let asChild = false;
 
-	const content = ctx.get().elements.content;
+	const {
+		elements: { content },
+		states: { open }
+	} = ctx.get();
 </script>
 
-{#if asChild}
-	<slot builder={$content} />
-{:else if transition}
+{#if $open}
 	{@const builder = $content}
-	<div use:melt={builder} {...$$restProps} transition:transition={transitionConfig}>
+	{#if asChild}
 		<slot {builder} />
-	</div>
-{:else}
-	{@const builder = $content}
-	<div use:melt={builder} {...$$restProps}>
-		<slot {builder} />
-	</div>
+	{:else if transition}
+		<div use:melt={builder} {...$$restProps} transition:transition={transitionConfig}>
+			<slot {builder} />
+		</div>
+	{:else}
+		<div use:melt={builder} {...$$restProps}>
+			<slot {builder} />
+		</div>
+	{/if}
 {/if}
diff --git a/src/lib/bits/alert-dialog/components/AlertDialogOverlay.svelte b/src/lib/bits/alert-dialog/components/AlertDialogOverlay.svelte
@@ -5,11 +5,17 @@
 
 	type $$Props = OverlayProps;
 	export let asChild = false;
-	const overlay = ctx.get().elements.overlay;
+	const {
+		elements: { overlay },
+		states: { open }
+	} = ctx.get();
 </script>
 
-{#if asChild}
-	<slot builder={$overlay} />
-{:else}
-	<div use:melt={$overlay} {...$$restProps} />
+{#if $open}
+	{@const builder = $overlay}
+	{#if asChild}
+		<slot {builder} />
+	{:else}
+		<div use:melt={builder} {...$$restProps} />
+	{/if}
 {/if}
diff --git a/src/lib/bits/alert-dialog/components/AlertDialogPortal.svelte b/src/lib/bits/alert-dialog/components/AlertDialogPortal.svelte
@@ -11,13 +11,11 @@
 	} = ctx.get();
 </script>
 
-{#if $open}
+{#if asChild}
+	<slot builder={$portalled} />
+{:else}
 	{@const builder = $portalled}
-	{#if asChild}
-		<slot builder={$portalled} />
-	{:else}
-		<div use:melt={builder} {...$$restProps}>
-			<slot {builder} />
-		</div>
-	{/if}
+	<div use:melt={builder} {...$$restProps}>
+		<slot {builder} />
+	</div>
 {/if}
diff --git a/src/lib/bits/alert-dialog/ctx.ts b/src/lib/bits/alert-dialog/ctx.ts
@@ -11,8 +11,7 @@ const NAME = "AlertDialog";
 function set(props: CreateAlertDialogProps) {
 	const alertDialog = createDialog({
 		...removeUndefined(props),
-		role: "alertdialog",
-		forceVisible: true
+		role: "alertdialog"
 	});
 	setContext(NAME, alertDialog);
 	return {

diff --git a/src/lib/bits/dialog/components/Dialog.svelte b/src/lib/bits/dialog/components/Dialog.svelte
@@ -8,7 +8,7 @@
 	export let closeOnEscape: $$Props["closeOnEscape"] = undefined;
 	export let closeOnOutsideClick: $$Props["closeOnOutsideClick"] = undefined;
 	export let portal: $$Props["portal"] = undefined;
-	export let forceVisible: $$Props["forceVisible"] = undefined;
+	export let forceVisible: $$Props["forceVisible"] = true;
 	export let open: $$Props["open"] = undefined;
 	export let onOpenChange: $$Props["onOpenChange"] = undefined;
 

diff --git a/src/lib/bits/dialog/components/DialogContent.svelte b/src/lib/bits/dialog/components/DialogContent.svelte
@@ -10,19 +10,24 @@
 	export let transition: ContentProps<T>["transition"] = undefined;
 	export let transitionConfig: ContentProps<T>["transitionConfig"] = undefined;
 	export let asChild = false;
-	const content = ctx.get().elements.content;
+	const {
+		elements: { content },
+		states: { open }
+	} = ctx.get();
 </script>
 
-{#if asChild}
-	<slot builder={$content} />
-{:else if transition}
-	{@const builder = $content}
-	<div use:melt={builder} {...$$restProps} transition:transition={transitionConfig}>
-		<slot {builder} />
-	</div>
-{:else}
-	{@const builder = $content}
-	<div use:melt={builder} {...$$restProps}>
-		<slot {builder} />
-	</div>
+{#if $open}
+	{#if asChild}
+		<slot builder={$content} />
+	{:else if transition}
+		{@const builder = $content}
+		<div use:melt={builder} {...$$restProps} transition:transition={transitionConfig}>
+			<slot {builder} />
+		</div>
+	{:else}
+		{@const builder = $content}
+		<div use:melt={builder} {...$$restProps}>
+			<slot {builder} />
+		</div>
+	{/if}
 {/if}
diff --git a/src/lib/bits/dialog/components/DialogOverlay.svelte b/src/lib/bits/dialog/components/DialogOverlay.svelte
@@ -5,11 +5,17 @@
 
 	type $$Props = OverlayProps;
 	export let asChild = false;
-	const overlay = ctx.get().elements.overlay;
+	const {
+		elements: { overlay },
+		states: { open }
+	} = ctx.get();
 </script>
 
-{#if asChild}
-	<slot builder={$overlay} />
-{:else}
-	<div use:melt={$overlay} {...$$restProps} />
+{#if $open}
+	{@const builder = $overlay}
+	{#if asChild}
+		<slot {builder} />
+	{:else}
+		<div use:melt={builder} {...$$restProps} />
+	{/if}
 {/if}
diff --git a/src/lib/bits/dialog/components/DialogPortal.svelte b/src/lib/bits/dialog/components/DialogPortal.svelte
@@ -5,13 +5,10 @@
 
 	type $$Props = PortalProps;
 	const {
-		elements: { portalled },
-		states: { open }
+		elements: { portalled }
 	} = ctx.get();
 </script>
 
-{#if $open}
-	<div use:melt={$portalled} {...$$restProps}>
-		<slot />
-	</div>
-{/if}
+<div use:melt={$portalled} {...$$restProps}>
+	<slot />
+</div>
diff --git a/src/lib/bits/dialog/ctx.ts b/src/lib/bits/dialog/ctx.ts
@@ -10,7 +10,7 @@ export const ctx = {
 };
 
 function set(props: CreateDialogProps) {
-	const dialog = createDialog({ ...removeUndefined(props), role: "dialog", forceVisible: true });
+	const dialog = createDialog({ ...removeUndefined(props), role: "dialog" });
 	setContext(NAME, dialog);
 	return {
 		...dialog,

diff --git a/src/lib/internal/helpers.ts b/src/lib/internal/helpers.ts
@@ -88,3 +88,7 @@ export function bitWrap<T extends object>(storeValues: T, bit: string): T {
 		[`data-bits-${bit}`]: ""
 	};
 }
+
+export function sleep(ms: number) {
+	return new Promise((resolve) => setTimeout(resolve, ms));
+}