@duro-app/ui 3.4.0 → 3.4.2

package/package.json

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

package/src/components/Combobox/styles.css.ts

@@ -61,7 +61,9 @@ export const styles = css.create({
     left: 0,
     right: 0,
     bottom: 0,
-    zIndex: 49,
+    // Above Dialog/Drawer (1000/1001): they portal into the same mount, so a
+    // popup opened from inside a dialog must out-rank the dialog itself.
+    zIndex: 1049,
   },
   popup: {
     // Position is `fixed` and the top/left/width are applied inline by Popup
@@ -78,6 +80,7 @@ export const styles = css.create({
     paddingBottom: spacing.xs,
     maxHeight: 200,
     overflowY: 'auto',
+    zIndex: 1050,
     // Re-enable pointer events: the portal mount is pointer-events: none so
     // clicks fall through except on the popup itself.
     pointerEvents: 'auto',

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

@@ -9,7 +9,9 @@ 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 {Select} from '../Select/Select'
+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 +323,133 @@ 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)
+  },
+}
+
+// --- A Select inside a Dialog ---
+// Dialog and Select both render into the ThemeProvider portal mount, so the
+// Select's listbox must stack ABOVE the dialog or its options cannot be
+// picked (they were covered by the dialog when Dialog started portaling).
+
+function SelectInDialogDemo() {
+  const [value, setValue] = useState('en')
+  return (
+    <Dialog.Root>
+      <Dialog.Trigger>
+        <Button>Open settings</Button>
+      </Dialog.Trigger>
+      <Dialog.Portal size="sm">
+        <Dialog.Header>
+          <Dialog.Title>Settings</Dialog.Title>
+          <Dialog.Close />
+        </Dialog.Header>
+        <Dialog.Body>
+          <Select.Root value={value} onValueChange={(v) => v && setValue(v)}>
+            <Select.Trigger aria-label="Language">
+              <Select.Value />
+              <Select.Icon />
+            </Select.Trigger>
+            <Select.Popup>
+              <Select.Item value="en">
+                <Select.ItemText>English</Select.ItemText>
+              </Select.Item>
+              <Select.Item value="fr">
+                <Select.ItemText>Français</Select.ItemText>
+              </Select.Item>
+            </Select.Popup>
+          </Select.Root>
+          <Text>Chosen: {value}</Text>
+        </Dialog.Body>
+      </Dialog.Portal>
+    </Dialog.Root>
+  )
+}
+
+export const SelectInsideDialog: Story = {
+  render: () => <SelectInDialogDemo />,
+  play: async ({canvasElement}) => {
+    const canvas = within(canvasElement)
+    const doc = within(canvasElement.ownerDocument.body)
+    await userEvent.click(canvas.getByText('Open settings'))
+    await userEvent.click(await doc.findByRole('combobox', {name: 'Language'}))
+    // Hit-test every option: an option that sits over the dialog panel (not
+    // only over the click-through backdrop) must still be the topmost element.
+    for (const name of ['English', 'Français']) {
+      const opt = await doc.findByRole('option', {name})
+      const r = opt.getBoundingClientRect()
+      const top = canvasElement.ownerDocument.elementFromPoint(
+        r.left + r.width / 2,
+        r.top + r.height / 2,
+      )
+      await expect(opt.contains(top)).toBe(true)
+    }
+    const option = await doc.findByRole('option', {name: 'Français'})
+    await userEvent.click(option)
+    await expect(await doc.findByText('Chosen: fr')).toBeInTheDocument()
+  },
+}
+
+// --- Backdrop click dismisses (the portal mount is pointer-events: none) ---
+
+export const BackdropClickDismisses: Story = {
+  render: () => <BackdropDismissDemo />,
+  play: async ({canvasElement}) => {
+    const canvas = within(canvasElement)
+    const docEl = canvasElement.ownerDocument
+    await userEvent.click(canvas.getByText('Open dialog'))
+    await expect(docEl.querySelector('[role="dialog"]')).not.toBeNull()
+    // a point on the backdrop, well outside the centred dialog
+    const target = docEl.elementFromPoint(5, 5) as HTMLElement
+    await userEvent.click(target)
+    await expect(await canvas.findByText('Last action: Dismissed')).toBeInTheDocument()
+  },
+}

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/Dialog/styles.css.ts

@@ -12,6 +12,9 @@ export const styles = css.create({
     inset: 0,
     backgroundColor: 'rgba(0, 0, 0, 0.4)',
     zIndex: 1000,
+    // Portaled into the ThemeProvider mount, which is pointer-events: none:
+    // the backdrop must take clicks back (outside click dismisses).
+    pointerEvents: 'auto',
   },
   backdropOpen: {
     opacity: 1,

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 ---

package/src/components/Drawer/styles.css.ts

@@ -12,6 +12,9 @@ export const styles = css.create({
     inset: 0,
     backgroundColor: 'rgba(0, 0, 0, 0.4)',
     zIndex: 1000,
+    // Portaled into the ThemeProvider mount, which is pointer-events: none:
+    // the backdrop must take clicks back (outside click dismisses).
+    pointerEvents: 'auto',
   },
   backdropOpen: {
     animationName: css.keyframes({

package/src/components/Select/styles.css.ts

@@ -51,7 +51,9 @@ export const styles = css.create({
     left: 0,
     right: 0,
     bottom: 0,
-    zIndex: 49,
+    // Above Dialog/Drawer (1000/1001): they portal into the same mount, so a
+    // popup opened from inside a dialog must out-rank the dialog itself.
+    zIndex: 1049,
     // The portal mount is pointer-events: none, so re-enable here to catch
     // outside clicks that close the popup.
     pointerEvents: 'auto',
@@ -72,7 +74,7 @@ export const styles = css.create({
     minWidth: 120,
     maxHeight: 280,
     overflowY: 'auto',
-    zIndex: 50,
+    zIndex: 1050,
     // Re-enable pointer events: the portal mount is pointer-events: none.
     pointerEvents: 'auto',
   },