@duro-app/ui 3.4.1 → 3.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@duro-app/ui",
-  "version": "3.4.1",
+  "version": "3.5.0",
   "type": "module",
   "license": "MIT",
   "repository": {
@@ -64,7 +64,7 @@
   },
   "dependencies": {
     "@tanstack/react-virtual": "^3.14.6",
-    "@duro-app/tokens": "^3.4.1"
+    "@duro-app/tokens": "^3.5.0"
   },
   "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,6 +9,7 @@ import {Inline} from '../Inline/Inline'
 import {Stack} from '../Stack/Stack'
 import {Input} from '../Input/Input'
 import {Field} from '../Field/Field'
+import {Select} from '../Select/Select'
 import {spacing} from '@duro-app/tokens/tokens/spacing.css'
 import {colors} from '@duro-app/tokens/tokens/colors.css'
 
@@ -373,3 +374,82 @@ export const InsideTransformedAncestor: Story = {
     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/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/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/Icon/Icon.tsx

@@ -37,6 +37,9 @@ export type IconName =
   | 'mail'
   | 'file-text'
   | 'plug'
+  // Input / action glyphs
+  | 'search'
+  | 'mic'
   // Color-mode glyphs
   | 'sun'
   | 'moon'
@@ -264,6 +267,23 @@ const strokeIcons: Partial<Record<IconName, ReactNode>> = {
       <path d="M9 10.76V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v6.76a2 2 0 0 0 .55 1.38l1.68 1.78A1 1 0 0 1 16.5 16h-9a1 1 0 0 1-.73-1.68l1.68-1.78A2 2 0 0 0 9 10.76z" />
     </>
   ),
+  // ---- input / action ----
+  // Magnifying glass — search fields, find actions.
+  search: (
+    <>
+      <circle cx="11" cy="11" r="8" />
+      <line x1="21" y1="21" x2="16.65" y2="16.65" />
+    </>
+  ),
+  // Microphone — voice input, dictation.
+  mic: (
+    <>
+      <path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z" />
+      <path d="M19 10v2a7 7 0 0 1-14 0v-2" />
+      <line x1="12" y1="19" x2="12" y2="23" />
+      <line x1="8" y1="23" x2="16" y2="23" />
+    </>
+  ),
   // ---- color mode ----
   sun: (
     <>

package/src/components/InputGroup/InputGroup.stories.tsx

@@ -3,6 +3,7 @@ import {expect, fn} from 'storybook/test'
 import {css, html} from 'react-strict-dom'
 import {InputGroup} from './InputGroup'
 import {Input} from '../Input/Input'
+import {Icon} from '../Icon/Icon'
 import {spacing} from '@duro-app/tokens/tokens/spacing.css'
 
 const meta: Meta = {
@@ -64,6 +65,26 @@ export const BothSides: Story = {
   },
 }
 
+export const SearchField: Story = {
+  render: () => (
+    <html.div style={layoutStyles.container}>
+      <InputGroup.Root>
+        <InputGroup.Addon position="start">
+          <Icon name="search" size="sm" />
+        </InputGroup.Addon>
+        <Input type="search" name="q" aria-label="Search" placeholder="Search" />
+        <InputGroup.Addon>
+          <Icon name="mic" size="sm" />
+        </InputGroup.Addon>
+      </InputGroup.Root>
+    </html.div>
+  ),
+  play: async ({canvas}) => {
+    const input = canvas.getByRole('searchbox', {name: 'Search'})
+    await expect(input).toHaveAttribute('name', 'q')
+  },
+}
+
 export const ClickableAddon: Story = {
   render: () => (
     <html.div style={layoutStyles.container}>

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