@duro-app/ui 3.3.0 → 3.4.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@duro-app/ui",
-  "version": "3.3.0",
+  "version": "3.4.1",
   "type": "module",
   "license": "MIT",
   "repository": {
@@ -64,7 +64,7 @@
   },
   "dependencies": {
     "@tanstack/react-virtual": "^3.14.6",
-    "@duro-app/tokens": "^3.3.0"
+    "@duro-app/tokens": "^3.4.1"
   },
   "devDependencies": {
     "@babel/preset-typescript": "^7.28.0",

package/src/components/Dialog/Dialog.stories.tsx

@@ -9,7 +9,8 @@ import {Inline} from '../Inline/Inline'
 import {Stack} from '../Stack/Stack'
 import {Input} from '../Input/Input'
 import {Field} from '../Field/Field'
-import {Heading} from '../Heading/Heading'
+import {spacing} from '@duro-app/tokens/tokens/spacing.css'
+import {colors} from '@duro-app/tokens/tokens/colors.css'
 
 const meta: Meta = {
   title: 'Components/Dialog',
@@ -321,3 +322,54 @@ function BackdropDismissDemo() {
 export const BackdropDismiss: Story = {
   render: () => <BackdropDismissDemo />,
 }
+
+// --- Inside a transformed ancestor ---
+// A fixed overlay inside an ancestor with transform / filter / backdrop-filter
+// is positioned against that ancestor, not the viewport. A consumer's sticky
+// blurred top bar is exactly that: the dialog must still centre on the screen,
+// which it does because Portal renders into the ThemeProvider mount.
+
+const barStyles = css.create({
+  bar: {
+    transform: 'translateZ(0)',
+    padding: spacing.sm,
+    borderWidth: 1,
+    borderStyle: 'solid',
+    borderColor: colors.border,
+  },
+})
+
+export const InsideTransformedAncestor: Story = {
+  render: () => (
+    <html.div style={barStyles.bar}>
+      <Dialog.Root>
+        <Dialog.Trigger>
+          <Button>Open from the bar</Button>
+        </Dialog.Trigger>
+        <Dialog.Portal size="sm">
+          <Dialog.Header>
+            <Dialog.Title>Centred on the screen</Dialog.Title>
+            <Dialog.Close />
+          </Dialog.Header>
+          <Dialog.Body>
+            <Text>Not on the bar it was opened from.</Text>
+          </Dialog.Body>
+        </Dialog.Portal>
+      </Dialog.Root>
+    </html.div>
+  ),
+  play: async ({canvasElement}) => {
+    const canvas = within(canvasElement)
+    await userEvent.click(canvas.getByText('Open from the bar'))
+    const doc = canvasElement.ownerDocument
+    const dialog = doc.querySelector('[role="dialog"]') as HTMLElement
+    await expect(dialog).not.toBeNull()
+    const bar = canvas.getByText('Open from the bar').closest('div') as HTMLElement
+    // rendered outside the bar…
+    await expect(bar.contains(dialog)).toBe(false)
+    // …and fully on screen, not centred on a bar at the top edge
+    const r = dialog.getBoundingClientRect()
+    await expect(r.top).toBeGreaterThanOrEqual(0)
+    await expect(r.bottom).toBeLessThanOrEqual(doc.defaultView!.innerHeight)
+  },
+}

package/src/components/Dialog/Dialog.tsx

@@ -1,3 +1,4 @@
+import {createPortal} from 'react-dom'
 import {
   type ReactNode,
   type RefObject,
@@ -12,6 +13,7 @@ import {
 import {html} from 'react-strict-dom'
 import {DURATION_MS, type DurationToken} from '@duro-app/tokens/keys'
 import {styles} from './styles.css'
+import {usePortalMount} from '../ThemeProvider/ThemeProvider'
 
 // --- Types ---
 
@@ -194,6 +196,7 @@ function Portal({children, size = 'md'}: PortalProps) {
     descriptionId,
     popupRef,
   } = useDialog()
+  const mount = usePortalMount()
 
   const handleBackdropClick = useCallback(() => {
     if (dismissable) {
@@ -203,7 +206,7 @@ function Portal({children, size = 'md'}: PortalProps) {
 
   if (!open) return null
 
-  return (
+  const node = (
     <>
       {/* Backdrop — click to dismiss */}
       <html.div
@@ -238,6 +241,13 @@ function Portal({children, size = 'md'}: PortalProps) {
       </html.div>
     </>
   )
+
+  // Out of the tree into the ThemeProvider mount (like Select and Combobox):
+  // a fixed overlay inside an ancestor with transform / filter /
+  // backdrop-filter is positioned against THAT ancestor, not the viewport —
+  // a dialog opened from a sticky blurred top bar centred on the bar. Without
+  // a mount (SSR, no ThemeProvider) it renders in place.
+  return mount ? createPortal(node, mount) : node
 }
 
 // --- Header ---

package/src/components/Drawer/Drawer.tsx

@@ -1,3 +1,4 @@
+import {createPortal} from 'react-dom'
 import {
   type ReactNode,
   type RefObject,
@@ -12,6 +13,7 @@ import {
 import {html} from 'react-strict-dom'
 import {DURATION_MS, type DurationToken} from '@duro-app/tokens/keys'
 import {styles} from './styles.css'
+import {usePortalMount} from '../ThemeProvider/ThemeProvider'
 import {useSwipeDismiss} from './useSwipeDismiss'
 
 // --- Types ---
@@ -230,6 +232,7 @@ function Portal({children, size = 'md'}: PortalProps) {
     descriptionId,
     panelRef,
   } = useDrawer()
+  const mount = usePortalMount()
 
   const handleBackdropClick = useCallback(() => {
     if (dismissable) {
@@ -249,7 +252,7 @@ function Portal({children, size = 'md'}: PortalProps) {
 
   const isHorizontal = anchor === 'left' || anchor === 'right'
 
-  return (
+  const node = (
     <>
       {/* Backdrop — click to dismiss */}
       <html.div
@@ -287,6 +290,13 @@ function Portal({children, size = 'md'}: PortalProps) {
       </html.div>
     </>
   )
+
+  // Out of the tree into the ThemeProvider mount (like Select and Combobox):
+  // a fixed overlay inside an ancestor with transform / filter /
+  // backdrop-filter is positioned against THAT ancestor, not the viewport —
+  // a dialog opened from a sticky blurred top bar centred on the bar. Without
+  // a mount (SSR, no ThemeProvider) it renders in place.
+  return mount ? createPortal(node, mount) : node
 }
 
 // --- Header ---