@duro-app/ui 0.35.3 → 0.36.0

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

package/src/index.ts

@@ -62,6 +62,12 @@ export {
   usePortalMount,
   type ThemeName,
 } from './components/ThemeProvider/ThemeProvider'
+export {
+  ColorModeProvider,
+  ColorModeToggle,
+  useColorMode,
+  type ColorModePreference,
+} from './components/ColorMode'
 export {Text, type TextVariant, type TextColor} from './components/Text/Text'
 export {Toggle, type ToggleSize} from './components/Toggle/Toggle'
 export {ToggleGroup} from './components/ToggleGroup/ToggleGroup'