improve popout animations (#7040)

packages/ui/src/components/base/Combobox.vue

@@ -97,12 +97,7 @@
 		</ButtonFrame>
 
 		<Teleport to="#teleports">
-			<Transition
+			<Transition name="floating-expand">
-				enter-active-class="transition-opacity duration-150"
-				leave-active-class="transition-opacity duration-150"
-				enter-from-class="opacity-0"
-				leave-to-class="opacity-0"
-			>
 				<div
 					v-if="shouldRenderDropdown"
 					ref="dropdownRef"
@@ -110,7 +105,6 @@
 					:class="[
 						props.dropdownClass,
 						openDirection === 'up' ? 'shadow-[0_-25px_50px_-12px_rgb(0,0,0,0.25)]' : 'shadow-2xl',
-						props.dropdownClass,
 					]"
 					:style="dropdownStyle"
 					:role="listbox ? 'listbox' : 'menu'"

packages/ui/src/components/base/DropdownFilterBar.vue

@@ -128,12 +128,7 @@
 	</div>
 
 	<Teleport to="#teleports">
-		<Transition
+		<Transition name="floating-expand" :css="!isMobileAddMenuLayout">
-			:enter-active-class="addMenuTransitionEnterActiveClass"
-			leave-active-class="transition-none duration-0"
-			:enter-from-class="addMenuTransitionEnterFromClass"
-			leave-to-class="opacity-0"
-		>
 			<div
 				v-if="isAddMenuOpen && !isMobileActiveSubmenu"
 				ref="menuContainer"
@@ -166,207 +161,214 @@
 	</Teleport>
 
 	<Teleport to="#teleports">
-		<div
+		<Transition name="floating-expand" :css="!isMobileAddMenuLayout">
-			v-if="isAddMenuOpen && activeCategory && (isMobileAddMenuLayout || hasSubmenuPosition)"
-			ref="submenu"
-			class="fixed z-[10000] flex max-h-[min(70vh,32rem)] max-w-[calc(100vw-1rem)] flex-col overflow-hidden rounded-[14px] border border-solid border-surface-5 bg-surface-4 shadow-2xl"
-			:class="activeCategory.submenuClass ?? DEFAULT_SUBMENU_CLASS"
-			:style="submenuStyle"
-			@mouseenter="handleSubmenuMouseEnter"
-			@mouseleave="handleSubmenuMouseLeave"
-			@keydown="handleAddMenuKeydown"
-			@mousemove="(event) => handleMenuMouseMove(event, 'submenu')"
-		>
 			<div
-				v-if="isMobileAddMenuLayout"
+				v-if="isAddMenuOpen && activeCategory && (isMobileAddMenuLayout || hasSubmenuPosition)"
-				class="flex items-center border-0 border-b border-solid border-b-surface-5 bg-surface-4"
+				ref="submenu"
-			>
+				class="fixed z-[10000] flex max-h-[min(70vh,32rem)] max-w-[calc(100vw-1rem)] flex-col overflow-hidden rounded-[14px] border border-solid border-surface-5 bg-surface-4 shadow-2xl"
-				<button
+				:class="activeCategory.submenuClass ?? DEFAULT_SUBMENU_CLASS"
-					type="button"
+				:style="submenuStyle"
-					class="flex h-12 w-full items-center gap-2 border-0 bg-transparent px-4 text-left text-base font-semibold text-primary shadow-none transition-all hover:brightness-110 focus-visible:brightness-110"
+				@mouseenter="handleSubmenuMouseEnter"
-					@click="returnToCategoryMenu"
+				@mouseleave="handleSubmenuMouseLeave"
-				>
+				@keydown="handleAddMenuKeydown"
-					<ChevronLeftIcon class="size-5 shrink-0 text-secondary" />
+				@mousemove="(event) => handleMenuMouseMove(event, 'submenu')"
-					<span class="min-w-0 truncate">{{ activeCategory.label }}</span>
-				</button>
-			</div>
-			<div
-				v-if="activeCategory.searchable"
-				class="flex justify-between border-0 border-b border-solid border-b-surface-5 py-1.5 w-full"
-			>
-				<StyledInput
-					v-model="categorySearchQuery"
-					:icon="SearchIcon"
-					type="text"
-					:placeholder="activeCategory.searchPlaceholder ?? 'Search...'"
-					wrapper-class="grow bg-surface-4 mx-1"
-					input-class="ps-9 mx-1.5"
-				/>
-				<slot
-					name="search-actions"
-					:category="activeCategory"
-					:selected-values="activeCategorySelectedValues"
-					:set-selected-values="setActiveCategorySelectedValues"
-					:close-menu="closeAddMenu"
-				></slot>
-			</div>
-
-			<div v-if="$slots['category-top']" class="border-0 border-b border-solid border-b-surface-5">
-				<slot
-					name="category-top"
-					:category="activeCategory"
-					:selected-values="activeCategorySelectedValues"
-					:set-selected-values="setActiveCategorySelectedValues"
-					:close-menu="closeAddMenu"
-				></slot>
-			</div>
-
-			<div
-				class="flex items-center justify-between gap-3 border-0 border-b border-solid border-b-surface-5 px-4 py-2.5 text-sm"
-			>
-				<span class="font-semibold text-secondary">{{ activeCategorySelectionLabel }}</span>
-				<button
-					type="button"
-					class="border-0 bg-transparent p-0 text-sm font-semibold text-secondary shadow-none transition-colors"
-					:class="
-						hasActiveCategorySelection
-							? 'hover:bg-transparent hover:text-contrast'
-							: 'cursor-not-allowed opacity-50'
-					"
-					:disabled="!hasActiveCategorySelection"
-					@click="clearActiveCategorySelection"
-					@keydown.enter.stop
-					@keydown.space.stop
-				>
-					Clear
-				</button>
-			</div>
-			<div
-				ref="activeCategoryOptionsScrollbar"
-				class="dropdown-filter-bar-options-scrollbar min-h-0 flex-1 bg-surface-4"
-				data-overlayscrollbars-initialize
 			>
 				<div
-					ref="activeCategoryOptionsContainer"
+					v-if="isMobileAddMenuLayout"
-					class="h-full min-h-0 overflow-y-auto"
+					class="flex items-center border-0 border-b border-solid border-b-surface-5 bg-surface-4"
-					data-overlayscrollbars-viewport
+				>
+					<button
+						type="button"
+						class="flex h-12 w-full items-center gap-2 border-0 bg-transparent px-4 text-left text-base font-semibold text-primary shadow-none transition-all hover:brightness-110 focus-visible:brightness-110"
+						@click="returnToCategoryMenu"
+					>
+						<ChevronLeftIcon class="size-5 shrink-0 text-secondary" />
+						<span class="min-w-0 truncate">{{ activeCategory.label }}</span>
+					</button>
+				</div>
+				<div
+					v-if="activeCategory.searchable"
+					class="flex justify-between border-0 border-b border-solid border-b-surface-5 py-1.5 w-full"
+				>
+					<StyledInput
+						v-model="categorySearchQuery"
+						:icon="SearchIcon"
+						type="text"
+						:placeholder="activeCategory.searchPlaceholder ?? 'Search...'"
+						wrapper-class="grow bg-surface-4 mx-1"
+						input-class="ps-9 mx-1.5"
+					/>
+					<slot
+						name="search-actions"
+						:category="activeCategory"
+						:selected-values="activeCategorySelectedValues"
+						:set-selected-values="setActiveCategorySelectedValues"
+						:close-menu="closeAddMenu"
+					></slot>
+				</div>
+
+				<div
+					v-if="$slots['category-top']"
+					class="border-0 border-b border-solid border-b-surface-5"
+				>
+					<slot
+						name="category-top"
+						:category="activeCategory"
+						:selected-values="activeCategorySelectedValues"
+						:set-selected-values="setActiveCategorySelectedValues"
+						:close-menu="closeAddMenu"
+					></slot>
+				</div>
+
+				<div
+					class="flex items-center justify-between gap-3 border-0 border-b border-solid border-b-surface-5 px-4 py-2.5 text-sm"
+				>
+					<span class="font-semibold text-secondary">{{ activeCategorySelectionLabel }}</span>
+					<button
+						type="button"
+						class="border-0 bg-transparent p-0 text-sm font-semibold text-secondary shadow-none transition-colors"
+						:class="
+							hasActiveCategorySelection
+								? 'hover:bg-transparent hover:text-contrast'
+								: 'cursor-not-allowed opacity-50'
+						"
+						:disabled="!hasActiveCategorySelection"
+						@click="clearActiveCategorySelection"
+						@keydown.enter.stop
+						@keydown.space.stop
+					>
+						Clear
+					</button>
+				</div>
+				<div
+					ref="activeCategoryOptionsScrollbar"
+					class="dropdown-filter-bar-options-scrollbar min-h-0 flex-1 bg-surface-4"
+					data-overlayscrollbars-initialize
 				>
 					<div
-						v-if="filteredActiveCategoryOptions.length === 0"
+						ref="activeCategoryOptionsContainer"
-						class="px-4 py-3.5 text-base font-medium text-secondary"
+						class="h-full min-h-0 overflow-y-auto"
-					>
+						data-overlayscrollbars-viewport
-						{{ activeCategoryEmptyStateLabel }}
-					</div>
-					<div
-						v-else
-						ref="activeCategoryOptionsListContainer"
-						:class="shouldVirtualizeActiveCategoryOptions ? 'relative' : 'flex flex-col'"
-						:style="activeCategoryOptionsListStyle"
 					>
 						<div
-							v-for="{ item, index } in renderedVisibleActiveCategoryOptions"
+							v-if="filteredActiveCategoryOptions.length === 0"
-							:key="getActiveCategoryItemKey(item, index)"
+							class="px-4 py-3.5 text-base font-medium text-secondary"
-							:class="shouldVirtualizeActiveCategoryOptions ? 'absolute left-0 right-0' : undefined"
+						>
-							:style="getActiveCategoryOptionWrapperStyle(index)"
+							{{ activeCategoryEmptyStateLabel }}
+						</div>
+						<div
+							v-else
+							ref="activeCategoryOptionsListContainer"
+							:class="shouldVirtualizeActiveCategoryOptions ? 'relative' : 'flex flex-col'"
+							:style="activeCategoryOptionsListStyle"
 						>
 							<div
-								v-if="isDropdownFilterSectionHeader(item)"
+								v-for="{ item, index } in renderedVisibleActiveCategoryOptions"
-								class="flex items-center justify-between gap-3 border-0 px-4 py-2.5 text-sm font-semibold text-secondary"
+								:key="getActiveCategoryItemKey(item, index)"
-								:class="[
+								:class="
-									item.class,
+									shouldVirtualizeActiveCategoryOptions ? 'absolute left-0 right-0' : undefined
-									item.dividerBefore && index > 0
+								"
-										? 'border-t border-solid border-surface-5'
+								:style="getActiveCategoryOptionWrapperStyle(index)"
-										: undefined,
-								]"
 							>
-								<span class="flex min-w-0 items-center gap-2">
+								<div
-									<component
+									v-if="isDropdownFilterSectionHeader(item)"
-										:is="item.icon"
+									class="flex items-center justify-between gap-3 border-0 px-4 py-2.5 text-sm font-semibold text-secondary"
-										v-if="item.icon"
+									:class="[
-										class="size-4 shrink-0"
+										item.class,
-										aria-hidden="true"
+										item.dividerBefore && index > 0
-									/>
+											? 'border-t border-solid border-surface-5'
-									<span class="min-w-0 truncate">{{ item.label }}</span>
+											: undefined,
-								</span>
+									]"
+								>
+									<span class="flex min-w-0 items-center gap-2">
+										<component
+											:is="item.icon"
+											v-if="item.icon"
+											class="size-4 shrink-0"
+											aria-hidden="true"
+										/>
+										<span class="min-w-0 truncate">{{ item.label }}</span>
+									</span>
+									<button
+										v-if="hasSelectableSectionHeaderOptions(item)"
+										type="button"
+										class="border-0 bg-transparent p-0 text-sm font-semibold text-secondary shadow-none transition-colors hover:text-contrast"
+										@click="toggleSectionHeaderOptions(item)"
+									>
+										{{ areSectionHeaderOptionsSelected(item) ? 'Clear' : 'Select all' }}
+									</button>
+								</div>
 								<button
-									v-if="hasSelectableSectionHeaderOptions(item)"
+									v-else
 									type="button"
-									class="border-0 bg-transparent p-0 text-sm font-semibold text-secondary shadow-none transition-colors hover:text-contrast"
+									class="flex w-full cursor-pointer items-center gap-2.5 border-0 px-4 py-3.5 text-left text-contrast shadow-none transition-all duration-150 bg-surface-4 hover:brightness-[115%] focus-visible:brightness-[115%] focus-visible:outline-none"
-									@click="toggleSectionHeaderOptions(item)"
+									:class="[
+										shouldVirtualizeActiveCategoryOptions ? 'h-12' : undefined,
+										{
+											'brightness-[115%]': item.selected,
+											'pointer-events-none cursor-not-allowed opacity-50': item.disabled,
+										},
+									]"
+									:aria-disabled="item.disabled || undefined"
+									:aria-checked="item.selected"
+									role="checkbox"
+									@click="toggleFilterOption(activeCategory.key, item)"
 								>
-									{{ areSectionHeaderOptionsSelected(item) ? 'Clear' : 'Select all' }}
+									<span
-								</button>
+										v-if="checkboxPosition === 'left'"
-							</div>
+										class="checkbox-shadow flex h-5 w-5 shrink-0 items-center justify-center rounded-md border-[1px] border-solid"
-							<button
+										:class="
-								v-else
+											item.selected
-								type="button"
+												? 'border-button-border bg-brand text-brand-inverted'
-								class="flex w-full cursor-pointer items-center gap-2.5 border-0 px-4 py-3.5 text-left text-contrast shadow-none transition-all duration-150 bg-surface-4 hover:brightness-[115%] focus-visible:brightness-[115%] focus-visible:outline-none"
+												: 'border-surface-5 bg-surface-2'
-								:class="[
+										"
-									shouldVirtualizeActiveCategoryOptions ? 'h-12' : undefined,
+									>
-									{
+										<CheckIcon v-if="item.selected" aria-hidden="true" stroke-width="3" />
-										'brightness-[115%]': item.selected,
+									</span>
-										'pointer-events-none cursor-not-allowed opacity-50': item.disabled,
+									<div class="flex min-w-0 flex-1 items-center justify-between gap-3">
-									},
-								]"
-								:aria-disabled="item.disabled || undefined"
-								:aria-checked="item.selected"
-								role="checkbox"
-								@click="toggleFilterOption(activeCategory.key, item)"
-							>
-								<span
-									v-if="checkboxPosition === 'left'"
-									class="checkbox-shadow flex h-5 w-5 shrink-0 items-center justify-center rounded-md border-[1px] border-solid"
-									:class="
-										item.selected
-											? 'border-button-border bg-brand text-brand-inverted'
-											: 'border-surface-5 bg-surface-2'
-									"
-								>
-									<CheckIcon v-if="item.selected" aria-hidden="true" stroke-width="3" />
-								</span>
-								<div class="flex min-w-0 flex-1 items-center justify-between gap-3">
-									<slot
-										v-if="$slots.option"
-										name="option"
-										:category="activeCategory"
-										:option="item"
-										:selected="item.selected"
-										:index="index"
-									></slot>
-									<template v-else>
-										<span
-											class="min-w-0 truncate font-semibold leading-tight"
-											:class="item.selected ? 'text-contrast' : 'text-primary'"
-										>
-											{{ item.label }}
-										</span>
 										<slot
-											name="option-right"
+											v-if="$slots.option"
+											name="option"
 											:category="activeCategory"
 											:option="item"
 											:selected="item.selected"
+											:index="index"
 										></slot>
-									</template>
+										<template v-else>
-								</div>
+											<span
-								<span
+												class="min-w-0 truncate font-semibold leading-tight"
-									v-if="checkboxPosition === 'right'"
+												:class="item.selected ? 'text-contrast' : 'text-primary'"
-									class="flex shrink-0 items-center justify-center text-brand"
+											>
-								>
+												{{ item.label }}
-									<CheckIcon v-if="item.selected" aria-hidden="true" class="size-5" />
+											</span>
-								</span>
+											<slot
-							</button>
+												name="option-right"
+												:category="activeCategory"
+												:option="item"
+												:selected="item.selected"
+											></slot>
+										</template>
+									</div>
+									<span
+										v-if="checkboxPosition === 'right'"
+										class="flex shrink-0 items-center justify-center text-brand"
+									>
+										<CheckIcon v-if="item.selected" aria-hidden="true" class="size-5" />
+									</span>
+								</button>
+							</div>
 						</div>
 					</div>
 				</div>
+				<slot
+					name="category-footer"
+					:category="activeCategory"
+					:selected-values="activeCategorySelectedValues"
+					:set-selected-values="setActiveCategorySelectedValues"
+					:close-menu="closeAddMenu"
+				></slot>
 			</div>
-			<slot
+		</Transition>
-				name="category-footer"
-				:category="activeCategory"
-				:selected-values="activeCategorySelectedValues"
-				:set-selected-values="setActiveCategorySelectedValues"
-				:close-menu="closeAddMenu"
-			></slot>
-		</div>
 	</Teleport>
 </template>
 
@@ -726,12 +728,6 @@ const isMobileActiveSubmenu = computed(
 	() =>
 		isMobileAddMenuLayout.value && activeCategory.value !== undefined && hasSubmenuPosition.value,
 )
-const addMenuTransitionEnterActiveClass = computed(() =>
-	isMobileAddMenuLayout.value ? 'transition-none duration-0' : 'transition-opacity duration-150',
-)
-const addMenuTransitionEnterFromClass = computed(() =>
-	isMobileAddMenuLayout.value ? 'opacity-100' : 'opacity-0',
-)
 const addMenuTriggerElement = computed(() => addMenuTrigger.value?.element ?? null)
 const addMenuOutsideClickTarget = computed(() => menuContainer.value ?? submenu.value)
 const addMenuOutsideClickIgnore = computed(() => [addMenuTriggerElement, menuContainer, submenu])

packages/ui/src/components/base/MultiSelect.vue

@@ -108,12 +108,7 @@
 		</component>
 
 		<Teleport to="#teleports">
-			<Transition
+			<Transition name="floating-expand">
-				enter-active-class="transition-opacity duration-150"
-				leave-active-class="transition-opacity duration-150"
-				enter-from-class="opacity-0"
-				leave-to-class="opacity-0"
-			>
 				<div
 					v-if="isOpen"
 					ref="dropdownRef"

packages/ui/src/components/base/buttons/TeleportOverflowMenu.vue

@@ -80,6 +80,19 @@ const { isOpen, panelStyle, anchorStyle, resolvedSide, open, close } = useAnchor
 	resolvedDistance,
 )
 
+const menuTransformOrigin = computed(() => {
+	switch (resolvedSide.value) {
+		case 'top':
+			return 'bottom center'
+		case 'left':
+			return 'right center'
+		case 'right':
+			return 'left center'
+		default:
+			return 'top center'
+	}
+})
+
 const menuItemClasses =
 	'overflow-menu-item flex min-h-10 w-full items-center gap-2 rounded-[10px] border-0 bg-transparent px-3 py-2 text-left text-base font-semibold leading-5 text-contrast no-underline ' +
 	'cursor-pointer whitespace-nowrap hover:bg-surface-4 focus-visible:bg-surface-4 focus-visible:outline-none ' +
@@ -294,20 +307,13 @@ defineExpose({ open: openMenu, close: closeMenu })
 	</component>
 
 	<Teleport to="body">
-		<Transition
+		<Transition name="floating-expand">
-			enter-active-class="transition duration-125 ease-out"
-			enter-from-class="scale-95 opacity-0"
-			enter-to-class="scale-100 opacity-100"
-			leave-active-class="transition duration-100 ease-in"
-			leave-from-class="scale-100 opacity-100"
-			leave-to-class="scale-95 opacity-0"
-		>
 			<div
 				v-if="isOpen"
 				:id="menuId"
 				ref="panelElement"
 				class="fixed isolate z-[9999] flex min-w-48 flex-col gap-1 rounded-[14px] bg-surface-3 p-2 shadow-lg ring-1 ring-surface-5"
-				:style="panelStyle"
+				:style="[panelStyle, { transformOrigin: menuTransformOrigin }]"
 				role="menu"
 				:aria-label="props.label"
 				@keydown="handleMenuKeydown"

packages/ui/src/components/base/buttons/TeleportPopoutMenu.vue

@@ -123,14 +123,7 @@ defineExpose({ open: openMenu, close: closeMenu })
 	</component>
 
 	<Teleport to="body">
-		<Transition
+		<Transition name="floating-expand">
-			enter-active-class="transition duration-125 ease-out"
-			enter-from-class="scale-95 opacity-0"
-			enter-to-class="scale-100 opacity-100"
-			leave-active-class="transition duration-100 ease-in"
-			leave-from-class="scale-100 opacity-100"
-			leave-to-class="scale-95 opacity-0"
-		>
 			<div
 				v-if="isOpen"
 				:id="panelId"

packages/ui/src/layouts/shared/files-tab/components/FileContextMenu.vue

@@ -1,18 +1,11 @@
 <template>
 	<Teleport to="#teleports">
-		<Transition
+		<Transition name="floating-expand">
-			enter-active-class="transition duration-125 ease-out"
-			enter-from-class="transform scale-75 opacity-0"
-			enter-to-class="transform scale-100 opacity-100"
-			leave-active-class="transition duration-125 ease-in"
-			leave-from-class="transform scale-100 opacity-100"
-			leave-to-class="transform scale-75 opacity-0"
-		>
 			<div
 				v-if="visible"
 				ref="menuRef"
 				class="fixed isolate z-[9999] flex w-fit min-w-[180px] flex-col gap-2 overflow-hidden rounded-2xl border border-solid border-surface-5 bg-bg-raised p-2 shadow-lg"
-				:style="{ left: `${position.x}px`, top: `${position.y}px` }"
+				:style="{ left: `${position.x}px`, top: `${position.y}px`, transformOrigin: 'top left' }"
 				role="menu"
 				tabindex="-1"
 				@mousedown.stop

packages/ui/src/styles/tailwind-utilities.css

@@ -1,3 +1,26 @@
+:root {
+	--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.floating-expand-enter-from,
+.floating-expand-leave-to {
+	opacity: 0;
+	scale: 0.9 0.3;
+}
+
+.floating-expand-enter-to,
+.floating-expand-leave-from {
+	opacity: 1;
+}
+
+.floating-expand-enter-active,
+.floating-expand-leave-active {
+	transition:
+		opacity 0.125s var(--ease-out-expo),
+		scale 0.125s var(--ease-out-expo);
+	transform-origin: top;
+}
+
 @layer utilities {
 	.heading-xl {
 		@apply m-0 text-xl font-semibold leading-none text-contrast;