From 01d8dc72adb0b32ad68bb4a98bf24b17f435a89c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Hannes=20K=C3=BCttner?= Date: Thu, 17 Apr 2025 12:05:04 +0200 Subject: [PATCH] fix(components): respect `transform-origin` in popper content (#3919) Co-authored-by: Benjamin Canac --- src/theme/context-menu.ts | 2 +- src/theme/dropdown-menu.ts | 2 +- src/theme/input-menu.ts | 2 +- src/theme/popover.ts | 2 +- src/theme/select-menu.ts | 7 +- src/theme/select.ts | 2 +- src/theme/tooltip.ts | 2 +- .../ContextMenu-vue.spec.ts.snap | 34 +++---- .../__snapshots__/ContextMenu.spec.ts.snap | 34 +++---- .../DropdownMenu-vue.spec.ts.snap | 38 ++++---- .../__snapshots__/DropdownMenu.spec.ts.snap | 38 ++++---- .../__snapshots__/InputMenu-vue.spec.ts.snap | 74 ++++++++-------- .../__snapshots__/InputMenu.spec.ts.snap | 74 ++++++++-------- .../__snapshots__/Popover-vue.spec.ts.snap | 12 +-- .../__snapshots__/Popover.spec.ts.snap | 12 +-- .../__snapshots__/Select-vue.spec.ts.snap | 78 ++++++++-------- .../__snapshots__/Select.spec.ts.snap | 78 ++++++++-------- .../__snapshots__/SelectMenu-vue.spec.ts.snap | 88 +++++++++---------- .../__snapshots__/SelectMenu.spec.ts.snap | 88 +++++++++---------- .../__snapshots__/Tooltip-vue.spec.ts.snap | 14 +-- .../__snapshots__/Tooltip.spec.ts.snap | 14 +-- 21 files changed, 348 insertions(+), 347 deletions(-) diff --git a/src/theme/context-menu.ts b/src/theme/context-menu.ts index 1e946ceb..53fe97b0 100644 --- a/src/theme/context-menu.ts +++ b/src/theme/context-menu.ts @@ -2,7 +2,7 @@ import type { ModuleOptions } from '../module' export default (options: Required) => ({ slots: { - content: 'min-w-32 bg-(--ui-bg) shadow-lg rounded-md ring ring-(--ui-border) divide-y divide-(--ui-border) overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]', + content: 'min-w-32 bg-(--ui-bg) shadow-lg rounded-md ring ring-(--ui-border) divide-y divide-(--ui-border) overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-context-menu-content-transform-origin)', group: 'p-1 isolate', label: 'w-full flex items-center font-semibold text-(--ui-text-highlighted)', separator: '-mx-1 my-1 h-px bg-(--ui-border)', diff --git a/src/theme/dropdown-menu.ts b/src/theme/dropdown-menu.ts index b4684633..309b3998 100644 --- a/src/theme/dropdown-menu.ts +++ b/src/theme/dropdown-menu.ts @@ -2,7 +2,7 @@ import type { ModuleOptions } from '../module' export default (options: Required) => ({ slots: { - content: 'min-w-32 bg-(--ui-bg) shadow-lg rounded-md ring ring-(--ui-border) divide-y divide-(--ui-border) overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]', + content: 'min-w-32 bg-(--ui-bg) shadow-lg rounded-md ring ring-(--ui-border) divide-y divide-(--ui-border) overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-dropdown-menu-content-transform-origin)', arrow: 'fill-(--ui-border)', group: 'p-1 isolate', label: 'w-full flex items-center font-semibold text-(--ui-text-highlighted)', diff --git a/src/theme/input-menu.ts b/src/theme/input-menu.ts index 261d6c31..b5966696 100644 --- a/src/theme/input-menu.ts +++ b/src/theme/input-menu.ts @@ -8,7 +8,7 @@ export default (options: Required) => { base: () => ['rounded-md', options.theme.transitions && 'transition-colors'], trailing: 'group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75', arrow: 'fill-(--ui-border)', - content: 'max-h-60 w-(--reka-popper-anchor-width) bg-(--ui-bg) shadow-lg rounded-md ring ring-(--ui-border) overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto', + content: 'max-h-60 w-(--reka-combobox-trigger-width) bg-(--ui-bg) shadow-lg rounded-md ring ring-(--ui-border) overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto', viewport: 'divide-y divide-(--ui-border) scroll-py-1', group: 'p-1 isolate', empty: 'py-2 text-center text-sm text-(--ui-text-muted)', diff --git a/src/theme/popover.ts b/src/theme/popover.ts index 5ad238da..00c44a4e 100644 --- a/src/theme/popover.ts +++ b/src/theme/popover.ts @@ -1,6 +1,6 @@ export default { slots: { - content: 'bg-(--ui-bg) shadow-lg rounded-md ring ring-(--ui-border) data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] focus:outline-none pointer-events-auto', + content: 'bg-(--ui-bg) shadow-lg rounded-md ring ring-(--ui-border) data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-popover-content-transform-origin) focus:outline-none pointer-events-auto', arrow: 'fill-(--ui-border)' } } diff --git a/src/theme/select-menu.ts b/src/theme/select-menu.ts index 0205511e..f4bb88ca 100644 --- a/src/theme/select-menu.ts +++ b/src/theme/select-menu.ts @@ -1,12 +1,13 @@ -import { defu } from 'defu' +import { defuFn } from 'defu' import type { ModuleOptions } from '../module' import select from './select' export default (options: Required) => { - return defu({ + return defuFn({ slots: { input: 'border-b border-(--ui-border)', - focusScope: 'flex flex-col min-h-0' + focusScope: 'flex flex-col min-h-0', + content: (content: string) => [content, 'origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)'] } }, select(options)) } diff --git a/src/theme/select.ts b/src/theme/select.ts index 4cd9923b..b83666a5 100644 --- a/src/theme/select.ts +++ b/src/theme/select.ts @@ -11,7 +11,7 @@ export default (options: Required) => { value: 'truncate pointer-events-none', placeholder: 'truncate text-(--ui-text-dimmed)', arrow: 'fill-(--ui-border)', - content: 'max-h-60 w-(--reka-popper-anchor-width) bg-(--ui-bg) shadow-lg rounded-md ring ring-(--ui-border) overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto', + content: 'max-h-60 w-(--reka-select-trigger-width) bg-(--ui-bg) shadow-lg rounded-md ring ring-(--ui-border) overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-select-content-transform-origin) pointer-events-auto', viewport: 'divide-y divide-(--ui-border) scroll-py-1', group: 'p-1 isolate', empty: 'py-2 text-center text-sm text-(--ui-text-muted)', diff --git a/src/theme/tooltip.ts b/src/theme/tooltip.ts index 203e4b53..64347591 100644 --- a/src/theme/tooltip.ts +++ b/src/theme/tooltip.ts @@ -1,6 +1,6 @@ export default { slots: { - content: 'flex items-center gap-1 bg-(--ui-bg) text-(--ui-text-highlighted) shadow-sm rounded-sm ring ring-(--ui-border) h-6 px-2 py-1 text-xs select-none data-[state=delayed-open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto', + content: 'flex items-center gap-1 bg-(--ui-bg) text-(--ui-text-highlighted) shadow-sm rounded-sm ring ring-(--ui-border) h-6 px-2 py-1 text-xs select-none data-[state=delayed-open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-tooltip-content-transform-origin) pointer-events-auto', arrow: 'fill-(--ui-border)', text: 'truncate', kbds: `hidden lg:inline-flex items-center shrink-0 gap-0.5 before:content-['·'] before:me-0.5`, diff --git a/test/components/__snapshots__/ContextMenu-vue.spec.ts.snap b/test/components/__snapshots__/ContextMenu-vue.spec.ts.snap index 6d5a62d1..3763b1e2 100644 --- a/test/components/__snapshots__/ContextMenu-vue.spec.ts.snap +++ b/test/components/__snapshots__/ContextMenu-vue.spec.ts.snap @@ -7,7 +7,7 @@ exports[`ContextMenu > renders with class correctly 1`] = `
-