@duro-app/ui 0.30.0 → 0.32.0

package/package.json

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

package/src/components/ActionBar/ActionBar.stories.tsx

@@ -9,6 +9,8 @@ import {Table} from '../Table/Table'
 
 interface ActionBarStoryArgs {
   onClearSelection: () => void
+  selectedItemCount?: number
+  isEmphasized?: boolean
 }
 
 const meta: Meta<ActionBarStoryArgs> = {

package/src/components/CheckboxGroup/CheckboxGroup.tsx

@@ -56,6 +56,7 @@ function Root({
     <CheckboxGroupContext.Provider value={{value, onToggle, disabled}}>
       <html.div
         role="group"
+        aria-orientation={orientation}
         style={[styles.root, orientation === 'horizontal' && styles.rootHorizontal]}
       >
         {children}

package/src/components/Combobox/Combobox.stories.tsx

@@ -58,11 +58,11 @@ export const WithDefaultValue: Story = {
 }
 
 function ControlledDemo() {
-  const [value, setValue] = useState<string | null>(null)
+  const [value, setValue] = useState<string | undefined>(undefined)
 
   return (
     <div style={{display: 'flex', flexDirection: 'column', gap: 16}}>
-      <Combobox.Root value={value} onValueChange={setValue}>
+      <Combobox.Root value={value} onValueChange={(v) => setValue(v ?? undefined)}>
         <Combobox.Input placeholder="Pick a role...">
           <Combobox.Trigger />
         </Combobox.Input>

package/src/components/Combobox/Combobox.tsx

@@ -1,8 +1,10 @@
-import {type ReactNode, useRef, useId, useEffect, useState} 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 {ComboboxContext, useCombobox} from './ComboboxContext'
 import {useComboboxRoot} from './useComboboxRoot'
+import {usePortalMount} from '../ThemeProvider/ThemeProvider'
 
 // --- Root ---
 interface RootProps {
@@ -129,16 +131,54 @@ function Trigger({children}: {children?: ReactNode}) {
 }
 
 // --- Popup ---
+// Rendered into the ThemeProvider portal mount and positioned with viewport
+// coordinates so it escapes ancestor `overflow: hidden` / `transform`
+// containing blocks (notably Dialog and Drawer).
 function Popup({children}: {children: ReactNode}) {
-  const {open, listboxId} = useCombobox()
+  const {open, listboxId, rootRef} = useCombobox()
+  const mount = usePortalMount()
+  const [coords, setCoords] = useState<{top: number; left: number; width: number} | null>(null)
 
-  if (!open) return null
+  // Measure the root each time the popup opens, and re-measure on scroll/resize
+  // so the dropdown follows the input. Capture-phase scroll listener catches
+  // scroll on any ancestor (e.g. Dialog body).
+  useLayoutEffect(() => {
+    if (!open) {
+      setCoords(null)
+      return
+    }
+    const update = () => {
+      const el = rootRef.current
+      if (!el) return
+      const rect = el.getBoundingClientRect()
+      // Position immediately below the input with a small gap. `xs` token = 4px.
+      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, rootRef])
 
-  return (
-    <html.div id={listboxId} role="listbox" style={styles.popup}>
+  if (!open || !coords) return null
+
+  const node = (
+    <html.div
+      id={listboxId}
+      role="listbox"
+      style={[styles.popup, styles.popupPosition(coords.top, coords.left, coords.width)]}
+    >
       {children}
     </html.div>
   )
+
+  // SSR / pre-mount fallback: render inline (will be invisible under
+  // overflow:hidden parents but won't crash). Once the mount is available,
+  // portal into it.
+  return mount ? createPortal(node, mount) : node
 }
 
 // --- Item ---

package/src/components/Combobox/ComboboxContext.ts

@@ -15,6 +15,7 @@ export interface ComboboxContextValue {
   setHighlightedId: (id: string | null) => void
   registerItem: (id: string, value: string, element: HTMLElement) => () => void
   inputRef: React.RefObject<HTMLInputElement | null>
+  rootRef: React.RefObject<HTMLDivElement | null>
 }
 
 export const ComboboxContext = createContext<ComboboxContextValue | null>(null)

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

@@ -63,11 +63,10 @@ export const styles = css.create({
     zIndex: 49,
   },
   popup: {
-    position: 'absolute',
-    top: '100%',
-    left: 0,
-    right: 0,
-    marginTop: spacing.xs,
+    // Position is `fixed` and the top/left/width are applied inline by Popup
+    // (computed from the root's bounding rect) so the dropdown can escape any
+    // ancestor with `overflow: hidden` or `transform` (e.g. inside a Dialog).
+    position: 'fixed',
     backgroundColor: colors.bgCard,
     borderWidth: 1,
     borderStyle: 'solid',
@@ -78,7 +77,9 @@ export const styles = css.create({
     paddingBottom: spacing.xs,
     maxHeight: 200,
     overflowY: 'auto',
-    zIndex: 50,
+    // Re-enable pointer events: the portal mount is pointer-events: none so
+    // clicks fall through except on the popup itself.
+    pointerEvents: 'auto',
   },
   item: {
     display: 'flex',
@@ -116,4 +117,10 @@ export const styles = css.create({
   hidden: {
     display: 'none',
   },
+  // Dynamic position — applied at runtime from the input's bounding rect.
+  popupPosition: (top: number, left: number, width: number) => ({
+    top,
+    left,
+    width,
+  }),
 })

package/src/components/Combobox/useComboboxRoot.ts

@@ -190,12 +190,26 @@ export function useComboboxRoot({
     item?.element.scrollIntoView({block: 'nearest'})
   }, [highlightedId])
 
-  // Sync input value with selected label when value changes externally
+  // Reconcile input text with the committed value once the popup closes.
+  // Three cases when transitioning from open → closed:
+  //   - inputValue is empty: user cleared the field, treat that as
+  //     "remove the selection" so the consumer's onValueChange fires
+  //     with null and downstream UI (e.g. dependent fields) can reset.
+  //   - inputValue doesn't match the selected label: user typed something
+  //     but didn't pick anything; restore the label so the visible text
+  //     and the committed value stay consistent.
+  //   - inputValue equals the selected label: nothing to do.
   useEffect(() => {
-    if (value && labels[value] && !open) {
+    if (open) return
+    if (value === null) return
+    if (inputValue === '') {
+      setValue(null)
+      return
+    }
+    if (labels[value] && inputValue !== labels[value]) {
       setInputValue(labels[value])
     }
-  }, [value, labels, open, setInputValue])
+  }, [open, value, labels, inputValue, setInputValue, setValue])
 
   const ctx: ComboboxContextValue = useMemo(
     () => ({
@@ -213,6 +227,7 @@ export function useComboboxRoot({
       setHighlightedId,
       registerItem,
       inputRef,
+      rootRef,
     }),
     [
       open,

package/src/components/Dialog/Dialog.tsx

@@ -202,7 +202,7 @@ function Portal({children, size = 'md'}: PortalProps) {
         <html.div
           ref={popupRef}
           role="dialog"
-          aria-modal="true"
+          aria-modal={true}
           aria-labelledby={titleId}
           aria-describedby={descriptionId}
           style={[

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

@@ -13,9 +13,7 @@ export const styles = css.create({
     zIndex: 1000,
   },
   backdropOpen: {
-    opacity: {
-      default: 1,
-    },
+    opacity: 1,
     animationName: css.keyframes({
       from: {opacity: 0},
       to: {opacity: 1},
@@ -25,9 +23,7 @@ export const styles = css.create({
     animationFillMode: 'both',
   },
   backdropClosing: {
-    opacity: {
-      default: 0,
-    },
+    opacity: 0,
     animationName: css.keyframes({
       from: {opacity: 1},
       to: {opacity: 0},
@@ -67,9 +63,7 @@ export const styles = css.create({
     borderColor: colors.border,
   },
   popupOpen: {
-    opacity: {
-      default: 1,
-    },
+    opacity: 1,
     animationName: css.keyframes({
       from: {
         opacity: 0,
@@ -85,9 +79,7 @@ export const styles = css.create({
     animationFillMode: 'both',
   },
   popupClosing: {
-    opacity: {
-      default: 0,
-    },
+    opacity: 0,
     animationName: css.keyframes({
       from: {
         opacity: 1,

package/src/components/Drawer/Drawer.tsx

@@ -256,7 +256,7 @@ function Portal({children, size = 'md'}: PortalProps) {
         <html.div
           ref={panelRef}
           role="dialog"
-          aria-modal="true"
+          aria-modal={true}
           aria-labelledby={titleId}
           aria-describedby={descriptionId}
           style={[

package/src/components/ThemeProvider/ThemeProvider.tsx

@@ -1,4 +1,4 @@
-import {type ReactNode} from 'react'
+import {createContext, type ReactNode, useContext, useState} from 'react'
 import {css, html} from 'react-strict-dom'
 import {colors} from '@duro-app/tokens/tokens/colors.css'
 import {lightTheme, lightShadows} from '@duro-app/tokens/themes/light.css'
@@ -21,15 +21,41 @@ const styles = css.create({
     display: 'contents',
     color: colors.text,
   },
+  // Sibling overlay where floating popups (Combobox, Menu, Tooltip) portal to.
+  // Lives inside ThemeProvider so theme tokens cascade. Fixed + inset 0 so
+  // popups can position freely with viewport coords; pointer-events: none lets
+  // clicks fall through except where children re-enable them.
+  portalMount: {
+    position: 'fixed',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    pointerEvents: 'none',
+    // Above Dialog (1001) so popups inside dialogs render on top.
+    zIndex: 1100,
+  },
 })
 
 // react-strict-dom's style prop rejects Theme<VarGroup<{named keys}>> because the
 // concrete VarGroup lacks the generic index signature. This is a known typing gap.
 type DivStyle = Parameters<typeof html.div>[0]['style']
 
+const PortalMountContext = createContext<HTMLElement | null>(null)
+
+export function usePortalMount(): HTMLElement | null {
+  return useContext(PortalMountContext)
+}
+
 export function ThemeProvider({theme = 'dark', children}: ThemeProviderProps) {
   const overrides = themeMap[theme]
   const themeStyles = [overrides?.[0], overrides?.[1], styles.root] as DivStyle
+  const [mount, setMount] = useState<HTMLElement | null>(null)
 
-  return <html.div style={themeStyles}>{children}</html.div>
+  return (
+    <html.div data-theme={theme} style={themeStyles}>
+      <PortalMountContext.Provider value={mount}>{children}</PortalMountContext.Provider>
+      <html.div ref={setMount} data-portal-mount style={styles.portalMount} />
+    </html.div>
+  )
 }

package/src/index.ts

@@ -50,7 +50,11 @@ export {Table, type TableVariant, type TableSize} from './components/Table/Table
 // Table.Pagination, Table.SortIndicator, Table.ColumnFilter for styled integration
 export {Tabs} from './components/Tabs/Tabs'
 export {Textarea, type TextareaVariant} from './components/Textarea/Textarea'
-export {ThemeProvider, type ThemeName} from './components/ThemeProvider/ThemeProvider'
+export {
+  ThemeProvider,
+  usePortalMount,
+  type ThemeName,
+} from './components/ThemeProvider/ThemeProvider'
 export {Text, type TextVariant, type TextColor} from './components/Text/Text'
 export {Toggle, type ToggleSize} from './components/Toggle/Toggle'
 export {ToggleGroup} from './components/ToggleGroup/ToggleGroup'