fix: bug with exit transitions (#268)

huntabyte · Jan 8, 2024 · 8f77b42 · 8f77b42
1 parent 19eda54
commit 8f77b42
Show file tree

Hide file tree

Showing 7 changed files with 46 additions and 11 deletions.
diff --git a/.changeset/spotty-insects-work.md b/.changeset/spotty-insects-work.md
@@ -0,0 +1,5 @@
+---
+"bits-ui": patch
+---
+
+fix: bug with exit transitions
diff --git a/src/components/demos/date-picker-demo.svelte b/src/components/demos/date-picker-demo.svelte
@@ -35,7 +35,12 @@
 				<CalendarBlank class="sq-5" />
 			</DatePicker.Trigger>
 		</DatePicker.Input>
-		<DatePicker.Content sideOffset={6} transition={flyAndScale} class="z-50">
+		<DatePicker.Content
+			sideOffset={6}
+			transition={flyAndScale}
+			transitionConfig={{ duration: 150, y: -8 }}
+			class="z-50"
+		>
 			<DatePicker.Calendar
 				class="rounded-[15px] border border-dark-10 bg-background p-[22px] shadow-card"
 				let:months

diff --git a/src/components/demos/link-preview-demo.svelte b/src/components/demos/link-preview-demo.svelte
@@ -1,6 +1,9 @@
 <script lang="ts">
 	import { LinkPreview, Avatar } from "$lib";
+	import { flyAndScale } from "@/utils";
 	import { MapPin, CalendarBlank } from "phosphor-svelte";
+	let loadingStatusTrigger: Avatar.Props["loadingStatus"] = undefined;
+	let loadingStatusContent: Avatar.Props["loadingStatus"] = undefined;
 </script>
 
 <LinkPreview.Root>
@@ -11,22 +14,38 @@
 		class="rounded-sm underline-offset-4 hover:underline focus-visible:outline-2 focus-visible:outline-offset-8 focus-visible:outline-black"
 	>
 		<Avatar.Root
-			class="flex items-center justify-center rounded-full bg-muted text-[17px] font-medium uppercase text-muted-foreground sq-12"
+			bind:loadingStatus={loadingStatusTrigger}
+			class="h-12 w-12 rounded-full border {loadingStatusTrigger === 'loaded'
+				? 'border-foreground'
+				: 'border-transparent'} bg-muted text-[17px] font-medium uppercase text-muted-foreground"
 		>
-			<Avatar.Image src="/avatar-1.png" alt="@huntabyte" />
-			<Avatar.Fallback>HB</Avatar.Fallback>
+			<div
+				class="flex h-full w-full items-center justify-center rounded-full border border-background"
+			>
+				<Avatar.Image src="/avatar-1.png" alt="@huntabyte" />
+				<Avatar.Fallback class="border border-muted">HB</Avatar.Fallback>
+			</div>
 		</Avatar.Root>
 	</LinkPreview.Trigger>
 	<LinkPreview.Content
 		class="w-[331px] rounded-xl border border-muted bg-background p-[17px] shadow-popover"
 		sideOffset={8}
+		transition={flyAndScale}
+		transitionConfig={{ duration: 150, y: -8 }}
 	>
 		<div class="flex space-x-4">
 			<Avatar.Root
-				class="flex items-center justify-center rounded-full bg-muted text-[17px] font-medium uppercase text-muted-foreground sq-12"
+				bind:loadingStatus={loadingStatusContent}
+				class="h-12 w-12 rounded-full border {loadingStatusContent === 'loaded'
+					? 'border-foreground'
+					: 'border-transparent'} bg-muted text-[17px] font-medium uppercase text-muted-foreground"
 			>
-				<Avatar.Image src="/avatar-1.png" alt="@huntabyte" />
-				<Avatar.Fallback>HB</Avatar.Fallback>
+				<div
+					class="flex h-full w-full items-center justify-center rounded-full border border-background"
+				>
+					<Avatar.Image src="/avatar-1.png" alt="@huntabyte" />
+					<Avatar.Fallback class="border border-muted">HB</Avatar.Fallback>
+				</div>
 			</Avatar.Root>
 			<div class="space-y-1 text-sm">
 				<h4 class="font-medium">@huntabyte</h4>

diff --git a/src/lib/bits/date-picker/ctx.ts b/src/lib/bits/date-picker/ctx.ts
@@ -26,7 +26,7 @@ export function setCtx(props: CreateDatePickerProps) {
 	const getPopoverAttrs = createBitAttrs(POPOVER_NAME, POPOVER_PARTS);
 
 	const datePicker = {
-		...createDatePicker(removeUndefined(props)),
+		...createDatePicker({ ...removeUndefined(props), forceVisible: true }),
 		getCalendarAttrs,
 		getFieldAttrs,
 		getPopoverAttrs

diff --git a/src/lib/bits/date-range-picker/ctx.ts b/src/lib/bits/date-range-picker/ctx.ts
@@ -27,7 +27,7 @@ export function setCtx(props: CreateDateRangePickerProps) {
 	const getPopoverAttrs = createBitAttrs(POPOVER_NAME, POPOVER_PARTS);
 
 	const dateRangePicker = {
-		...createDateRangePicker(removeUndefined(props)),
+		...createDateRangePicker({ ...removeUndefined(props), forceVisible: true }),
 		getCalendarAttrs,
 		getFieldAttrs,
 		getPopoverAttrs

diff --git a/src/lib/bits/dialog/ctx.ts b/src/lib/bits/dialog/ctx.ts
@@ -27,7 +27,10 @@ export function setCtx(props: SetProps) {
 	const { NAME, PARTS } = getDialogData();
 	const getAttrs = createBitAttrs(NAME, PARTS);
 
-	const dialog = { ...createDialog({ ...removeUndefined(props), role: "dialog" }), getAttrs };
+	const dialog = {
+		...createDialog({ ...removeUndefined(props), role: "dialog", forceVisible: true }),
+		getAttrs
+	};
 
 	setContext(NAME, dialog);
 	return {

diff --git a/src/lib/bits/select/ctx.ts b/src/lib/bits/select/ctx.ts
@@ -59,7 +59,10 @@ export function setCtx<T = unknown, M extends boolean = false>(
 	const { NAME, PARTS } = getSelectData();
 	const getAttrs = createBitAttrs(NAME, PARTS);
 
-	const select = { ...createSelect<T, M>(removeUndefined(props)), getAttrs };
+	const select = {
+		...createSelect<T, M>({ ...removeUndefined(props), forceVisible: true }),
+		getAttrs
+	};
 	setContext(NAME, select);
 	return {
 		...select,