@duro-app/ui 0.35.3 → 0.35.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@duro-app/ui",
-  "version": "0.35.3",
+  "version": "0.35.4",
   "type": "module",
   "license": "MIT",
   "repository": {
@@ -54,7 +54,7 @@
     }
   },
   "dependencies": {
-    "@duro-app/tokens": "^0.35.3"
+    "@duro-app/tokens": "^0.35.4"
   },
   "devDependencies": {
     "@babel/preset-typescript": "^7.28.0",

package/src/components/Select/Select.stories.tsx

@@ -1,5 +1,6 @@
 import type {Meta, StoryObj} from '@storybook/react'
-import {expect, fn} from 'storybook/test'
+import {expect, fn, screen} from 'storybook/test'
+import {Dialog} from '../Dialog/Dialog'
 import {Select} from './Select'
 
 const meta: Meta = {
@@ -62,13 +63,16 @@ export const OpenAndSelect: Story = {
 
     await userEvent.click(trigger)
     await expect(trigger).toHaveAttribute('aria-expanded', 'true')
-    const options = canvas.getAllByRole('option')
+    // The popup portals to the ThemeProvider mount (outside the story canvas),
+    // so query the whole document via `screen`.
+    const options = screen.getAllByRole('option')
     await expect(options.length).toBe(3)
     await expect(options[0]).toHaveAttribute('aria-selected', 'true')
 
     await userEvent.click(options[1])
     await expect(trigger).toHaveTextContent(/Francais/)
-    await expect(canvas.queryByRole('listbox')).not.toBeInTheDocument()
+    // Closed listbox is aria-hidden, so it's no longer exposed by role.
+    await expect(screen.queryByRole('listbox')).not.toBeInTheDocument()
   },
 }
 
@@ -101,9 +105,9 @@ export const WithPlaceholder: Story = {
     // Shows placeholder when nothing selected
     await expect(trigger).toHaveTextContent(/Choose a language\.\.\./)
 
-    // Open and select
+    // Open and select (options portal to the ThemeProvider mount → use screen)
     await userEvent.click(trigger)
-    const options = canvas.getAllByRole('option')
+    const options = screen.getAllByRole('option')
     await expect(options.length).toBe(4)
 
     // None selected initially
@@ -111,7 +115,7 @@ export const WithPlaceholder: Story = {
       await expect(opt).toHaveAttribute('aria-selected', 'false')
     }
 
-    await userEvent.click(canvas.getByText('Vue'))
+    await userEvent.click(screen.getByText('Vue'))
     await expect(trigger).toHaveTextContent(/Vue/)
   },
 }
@@ -139,6 +143,54 @@ export const KeyboardNavigation: Story = {
   play: async ({canvas, userEvent}) => {
     const trigger = canvas.getByRole('combobox')
     await userEvent.click(trigger)
-    await expect(canvas.getByRole('listbox')).toBeInTheDocument()
+    await expect(screen.getByRole('listbox')).toBeInTheDocument()
+  },
+}
+
+// Regression: a Select inside a Dialog. The Dialog clips its content
+// (overflow: hidden + body overflowY: auto), so an in-tree absolutely
+// positioned popup would be cropped. The popup must portal to the
+// ThemeProvider mount (z-index above the Dialog) and render in full.
+export const InsideDialog: Story = {
+  render: () => (
+    <Dialog.Root open onOpenChange={() => {}}>
+      <Dialog.Portal>
+        <Dialog.Header>
+          <Dialog.Title>Add a zone</Dialog.Title>
+        </Dialog.Header>
+        <Dialog.Body>
+          <Select.Root defaultValue="">
+            <Select.Trigger aria-label="Macro-zone">
+              <Select.Value placeholder="— No macro-zone —" />
+              <Select.Icon />
+            </Select.Trigger>
+            <Select.Popup>
+              <Select.Item value="">
+                <Select.ItemText>— No macro-zone —</Select.ItemText>
+              </Select.Item>
+              <Select.Item value="north">
+                <Select.ItemText>North</Select.ItemText>
+              </Select.Item>
+              <Select.Item value="south">
+                <Select.ItemText>South</Select.ItemText>
+              </Select.Item>
+            </Select.Popup>
+          </Select.Root>
+        </Dialog.Body>
+      </Dialog.Portal>
+    </Dialog.Root>
+  ),
+  play: async ({userEvent}) => {
+    // Both the trigger and the (portaled) popup live outside the story canvas:
+    // the Dialog itself portals. Query the whole document.
+    const trigger = screen.getByRole('combobox', {name: 'Macro-zone'})
+    await userEvent.click(trigger)
+    const options = screen.getAllByRole('option')
+    await expect(options.length).toBe(3)
+    // The popup escapes the Dialog: it renders into the portal mount, which is
+    // a sibling of (and stacks above) the Dialog — not clipped by it.
+    const listbox = screen.getByRole('listbox')
+    await expect(listbox).toBeInTheDocument()
+    await expect(listbox.closest('[role="dialog"]')).toBeNull()
   },
 }

package/src/components/Select/Select.tsx

@@ -1,9 +1,11 @@
-import {type ReactNode, useRef, useId, useEffect} from 'react'
+import {type ReactNode, useRef, useId, useEffect, useLayoutEffect, useState} from 'react'
+import {createPortal} from 'react-dom'
 import {html} from 'react-strict-dom'
 import {styles} from './styles.css'
 import {SelectContext, useSelect} from './SelectContext'
 import {useSelectRoot} from './useSelectRoot'
 import {useFieldContext} from '../Field/FieldContext'
+import {usePortalMount} from '../ThemeProvider/ThemeProvider'
 
 // --- Root ---
 interface RootProps {
@@ -108,22 +110,58 @@ function Icon({children}: {children?: ReactNode}) {
 }
 
 // --- Popup ---
+// Rendered into the ThemeProvider portal mount and positioned with viewport
+// coordinates (measured off the trigger) so it escapes ancestor
+// `overflow: hidden` / `transform` containing blocks (notably Dialog/Drawer).
+// The listbox stays mounted while closed (display: none) so Items can register
+// their labels from DOM text before the popup is ever opened.
 function Popup({children}: {children: ReactNode}) {
-  const {open, close, listboxId} = useSelect()
-
-  return (
+  const {open, close, listboxId, triggerRef} = useSelect()
+  const mount = usePortalMount()
+  const [coords, setCoords] = useState<{top: number; left: number; width: number} | null>(null)
+
+  // Measure the trigger when the popup opens, and re-measure on scroll/resize so
+  // the dropdown follows it. Capture-phase scroll catches scroll on any ancestor
+  // (e.g. a Dialog body).
+  useLayoutEffect(() => {
+    if (!open) return
+    const update = () => {
+      const el = triggerRef.current
+      if (!el) return
+      const rect = el.getBoundingClientRect()
+      // `xs` token = 4px gap below the trigger.
+      setCoords({top: rect.bottom + 4, left: rect.left, width: rect.width})
+    }
+    update()
+    window.addEventListener('resize', update)
+    window.addEventListener('scroll', update, true)
+    return () => {
+      window.removeEventListener('resize', update)
+      window.removeEventListener('scroll', update, true)
+    }
+  }, [open, triggerRef])
+
+  const node = (
     <>
       {open && <html.div style={styles.backdrop} onClick={close} />}
       <html.div
         id={listboxId}
         role="listbox"
         aria-hidden={!open}
-        style={[styles.popup, !open && styles.hidden]}
+        style={[
+          styles.popup,
+          (!open || !coords) && styles.hidden,
+          coords && styles.popupPosition(coords.top, coords.left, coords.width),
+        ]}
       >
         {children}
       </html.div>
     </>
   )
+
+  // SSR / pre-mount fallback: render inline (hidden under overflow parents but
+  // won't crash). Once the mount exists, portal into it.
+  return mount ? createPortal(node, mount) : node
 }
 
 // --- Item ---

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

@@ -51,12 +51,15 @@ export const styles = css.create({
     right: 0,
     bottom: 0,
     zIndex: 49,
+    // The portal mount is pointer-events: none, so re-enable here to catch
+    // outside clicks that close the popup.
+    pointerEvents: 'auto',
   },
   popup: {
-    position: 'absolute',
-    top: '100%',
-    left: 0,
-    marginTop: spacing.xs,
+    // Position is `fixed` and top/left/minWidth are applied inline by Popup
+    // (computed from the trigger's bounding rect) so the dropdown escapes any
+    // ancestor with `overflow: hidden` / `transform` (notably inside a Dialog).
+    position: 'fixed',
     backgroundColor: colors.bgCard,
     borderWidth: 1,
     borderStyle: 'solid',
@@ -66,8 +69,17 @@ export const styles = css.create({
     paddingTop: spacing.xs,
     paddingBottom: spacing.xs,
     minWidth: 120,
+    maxHeight: 280,
+    overflowY: 'auto',
     zIndex: 50,
+    // Re-enable pointer events: the portal mount is pointer-events: none.
+    pointerEvents: 'auto',
   },
+  popupPosition: (top: number, left: number, minWidth: number) => ({
+    top,
+    left,
+    minWidth,
+  }),
   item: {
     display: 'flex',
     alignItems: 'center',