@duro-app/ui 4.2.0 → 4.3.0

package/package.json

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

package/src/components/DetailPanel/DetailPanel.meta.ts

@@ -23,6 +23,12 @@ export const meta: ComponentMeta = {
       kind: 'contrast',
       relationship: 'Drawer is modal with backdrop; DetailPanel is non-modal and in-flow',
     },
+    {
+      component: 'Popover',
+      kind: 'contrast',
+      relationship:
+        'Popover is a small anchored overlay for a few controls; DetailPanel is an in-flow panel for long editing',
+    },
     {
       component: 'Table',
       kind: 'composition',

package/src/components/Dialog/Dialog.meta.ts

@@ -30,6 +30,12 @@ export const meta: ComponentMeta = {
       kind: 'contrast',
       relationship: 'DetailPanel is non-modal and in-flow; Dialog is modal with backdrop',
     },
+    {
+      component: 'Popover',
+      kind: 'contrast',
+      relationship:
+        'Popover is a small non-modal card anchored to an element; Dialog is a modal decision',
+    },
   ],
   example: `<Dialog.Root open={open} onOpenChange={setOpen}>
   <Dialog.Trigger>

package/src/components/Drawer/Drawer.meta.ts

@@ -30,6 +30,12 @@ export const meta: ComponentMeta = {
       kind: 'contrast',
       relationship: 'DetailPanel is non-modal and in-flow; Drawer is modal with backdrop',
     },
+    {
+      component: 'Popover',
+      kind: 'contrast',
+      relationship:
+        'Popover is a small card anchored to an element; Drawer takes its place at phone width',
+    },
   ],
   example: `<Drawer.Root anchor="right" open={open} onOpenChange={setOpen}>
   <Drawer.Trigger>

package/src/components/Menu/Menu.meta.ts

@@ -8,7 +8,11 @@ export const meta: ComponentMeta = {
     'Navigation links in a dropdown',
     'Overflow menu for toolbar actions',
   ],
-  whenNotToUse: ['Picking a value — use Select', 'Primary navigation — use SideNav or Tabs'],
+  whenNotToUse: [
+    'Picking a value — use Select',
+    'Primary navigation — use SideNav or Tabs',
+    'A small form tied to the trigger — use Popover',
+  ],
   anatomy: {
     required: ['Root', 'Trigger', 'Popup', 'Item'],
     optional: ['LinkItem', 'Separator'],

package/src/components/Popover/Popover.meta.ts

@@ -0,0 +1,69 @@
+import type {ComponentMeta} from '../component-meta'
+
+export const meta: ComponentMeta = {
+  description:
+    'Non-modal anchored overlay for small interactive content. Compound component — Root is required (throws without it). Anchored to Popover.Trigger, or to a virtual anchor (a () => DOMRect) when there is no Trigger; call reposition() through a ref when the anchor moves.',
+  whenToUse: [
+    'A small form or controls tied to one element that stay open while you work in them',
+    'Anchoring to a spot that is not a button (a canvas point, a text selection) with a virtual anchor',
+  ],
+  whenNotToUse: [
+    'A list of actions — use Menu',
+    'Hover-only text — use Tooltip',
+    'A blocking decision — use Dialog or ConfirmDialog',
+    'A long editor, or one that follows the selection — use DetailPanel',
+    'Phone width — use Drawer',
+  ],
+  anatomy: {
+    required: ['Root', 'Popup'],
+    optional: ['Trigger', 'Close'],
+  },
+  relatedTo: [
+    {
+      component: 'Menu',
+      kind: 'contrast',
+      relationship: 'Menu opens a list of actions; Popover holds small forms and controls',
+    },
+    {
+      component: 'Tooltip',
+      kind: 'contrast',
+      relationship:
+        'Tooltip shows hover-only text; Popover holds interactive content and stays open',
+    },
+    {
+      component: 'Dialog',
+      kind: 'contrast',
+      relationship: 'Dialog is modal and blocks the page; Popover is non-modal and anchored',
+    },
+    {
+      component: 'DetailPanel',
+      kind: 'contrast',
+      relationship:
+        'DetailPanel is an in-flow panel for long editing; Popover is a small anchored overlay',
+    },
+    {
+      component: 'Drawer',
+      kind: 'contrast',
+      relationship:
+        'Drawer is the modal edge panel for phone width; Popover is anchored and non-modal',
+    },
+    {
+      component: 'Field',
+      kind: 'composition',
+      relationship: 'Place Field.Root with its control inside Popover.Popup for a labelled field',
+    },
+  ],
+  example: `const ref = useRef<PopoverHandle>(null)
+const anchor = () => new DOMRect(point.x, point.y, 0, 0)
+
+<Popover.Root ref={ref} open={open} onOpenChange={setOpen} anchor={anchor} side="bottom" align="start">
+  <Popover.Popup label="Edit label">
+    <Field.Root>
+      <Field.Label>Label</Field.Label>
+      <Input value={label} onChange={(e) => setLabel(e.target.value)} />
+    </Field.Root>
+    <Popover.Close>Done</Popover.Close>
+  </Popover.Popup>
+</Popover.Root>
+// after the anchor moves: ref.current?.reposition()`,
+}

package/src/components/Popover/Popover.stories.tsx

@@ -0,0 +1,250 @@
+import {useRef, useState} from 'react'
+import type {Meta, StoryObj} from '@storybook/react'
+import {expect, fn, waitFor, within} from 'storybook/test'
+import {css, html} from 'react-strict-dom'
+import {spacing} from '@duro-app/tokens/tokens/spacing.css'
+import {colors} from '@duro-app/tokens/tokens/colors.css'
+import {Popover, type PopoverHandle} from './Popover'
+import {Button} from '../Button/Button'
+import {Field} from '../Field/Field'
+import {Input} from '../Input/Input'
+import {Select} from '../Select/Select'
+import {Stack} from '../Stack/Stack'
+
+const meta: Meta = {
+  title: 'Components/Popover',
+}
+
+export default meta
+type Story = StoryObj
+
+// The popup is portalled out of the story's canvas, so query the document.
+const page = () => within(document.body)
+
+const styles = css.create({
+  stage: {
+    position: 'relative',
+    height: 320,
+    borderWidth: 1,
+    borderStyle: 'dashed',
+    borderColor: colors.border,
+    padding: spacing.md,
+  },
+  spot: {
+    position: 'absolute',
+    top: 120,
+    left: 160,
+    width: 120,
+    padding: spacing.sm,
+    borderWidth: 1,
+    borderStyle: 'solid',
+    borderColor: colors.accent,
+  },
+  shifted: {
+    transform: 'translateX(120px)',
+  },
+})
+
+export const Default: Story = {
+  render: () => (
+    <Popover.Root>
+      <Popover.Trigger>Rename</Popover.Trigger>
+      <Popover.Popup label="Rename">
+        <Stack gap="sm">
+          <Field.Root>
+            <Field.Label>Label</Field.Label>
+            <Input defaultValue="Get started" />
+          </Field.Root>
+          <Popover.Close>Done</Popover.Close>
+        </Stack>
+      </Popover.Popup>
+    </Popover.Root>
+  ),
+  play: async ({canvas, userEvent}) => {
+    const trigger = canvas.getByRole('button', {name: 'Rename'})
+    await userEvent.click(trigger)
+    await expect(trigger).toHaveAttribute('aria-expanded', 'true')
+    const dialog = page().getByRole('dialog', {name: 'Rename'})
+    await expect(dialog).toBeVisible()
+    // Focus moves to the first field.
+    await waitFor(() => expect(page().getByRole('textbox', {name: 'Label'})).toHaveFocus())
+
+    await userEvent.keyboard('{Escape}')
+    await expect(page().queryByRole('dialog')).not.toBeInTheDocument()
+    // ...and comes back to the trigger.
+    await waitFor(() => expect(trigger).toHaveFocus())
+  },
+}
+
+export const CloseButton: Story = {
+  render: Default.render,
+  play: async ({canvas, userEvent}) => {
+    const trigger = canvas.getByRole('button', {name: 'Rename'})
+    await userEvent.click(trigger)
+    await userEvent.click(page().getByRole('button', {name: 'Done'}))
+    await expect(page().queryByRole('dialog')).not.toBeInTheDocument()
+    await waitFor(() => expect(trigger).toHaveFocus())
+  },
+}
+
+function WithIgnored({onOpenChange}: {onOpenChange: (open: boolean) => void}) {
+  const ignored = useRef<HTMLButtonElement | null>(null)
+  return (
+    <Stack gap="md">
+      <Popover.Root onOpenChange={onOpenChange} ignore={[() => ignored.current]}>
+        <Popover.Trigger>Open</Popover.Trigger>
+        <Popover.Popup label="Item">
+          <Popover.Close>Close</Popover.Close>
+        </Popover.Popup>
+      </Popover.Root>
+      <html.button ref={ignored} type="button">
+        Grip (ignored)
+      </html.button>
+      <html.button type="button">Elsewhere</html.button>
+    </Stack>
+  )
+}
+
+export const OutsidePress: Story = {
+  render: () => <WithIgnored onOpenChange={fn()} />,
+  play: async ({canvas, userEvent}) => {
+    await userEvent.click(canvas.getByRole('button', {name: 'Open'}))
+    await expect(page().getByRole('dialog', {name: 'Item'})).toBeVisible()
+
+    // A press on an ignored element keeps it open.
+    await userEvent.click(canvas.getByRole('button', {name: 'Grip (ignored)'}))
+    await expect(page().getByRole('dialog', {name: 'Item'})).toBeVisible()
+
+    // A press anywhere else closes it.
+    await userEvent.click(canvas.getByRole('button', {name: 'Elsewhere'}))
+    await expect(page().queryByRole('dialog')).not.toBeInTheDocument()
+  },
+}
+
+export const NestedSelectOwnsEscape: Story = {
+  render: () => (
+    <Popover.Root>
+      <Popover.Trigger>Style</Popover.Trigger>
+      <Popover.Popup label="Style">
+        <Select.Root defaultValue="primary">
+          <Select.Trigger aria-label="Variant">
+            <Select.Value />
+            <Select.Icon />
+          </Select.Trigger>
+          <Select.Popup>
+            <Select.Item value="primary">
+              <Select.ItemText>Primary</Select.ItemText>
+            </Select.Item>
+            <Select.Item value="secondary">
+              <Select.ItemText>Secondary</Select.ItemText>
+            </Select.Item>
+          </Select.Popup>
+        </Select.Root>
+      </Popover.Popup>
+    </Popover.Root>
+  ),
+  play: async ({canvas, userEvent}) => {
+    await userEvent.click(canvas.getByRole('button', {name: 'Style'}))
+    const variant = page().getByRole('combobox', {name: 'Variant'})
+    await userEvent.click(variant)
+    await expect(variant).toHaveAttribute('aria-expanded', 'true')
+
+    // The first Esc closes only the Select...
+    await userEvent.keyboard('{Escape}')
+    await expect(variant).toHaveAttribute('aria-expanded', 'false')
+    await expect(page().getByRole('dialog', {name: 'Style'})).toBeVisible()
+
+    // ...the second closes the popover.
+    await userEvent.keyboard('{Escape}')
+    await expect(page().queryByRole('dialog')).not.toBeInTheDocument()
+  },
+}
+
+function VirtualAnchorDemo() {
+  const spot = useRef<HTMLDivElement | null>(null)
+  const handle = useRef<PopoverHandle | null>(null)
+  const [open, setOpen] = useState(false)
+  const [shifted, setShifted] = useState(false)
+  return (
+    <Stack gap="sm">
+      <Button onClick={() => setOpen(true)}>Edit the spot</Button>
+      <html.div style={styles.stage}>
+        <html.div ref={spot} style={[styles.spot, shifted && styles.shifted]}>
+          Spot
+        </html.div>
+      </html.div>
+      <Popover.Root
+        ref={handle}
+        open={open}
+        onOpenChange={setOpen}
+        anchor={() => spot.current!.getBoundingClientRect()}
+      >
+        <Popover.Popup label="Spot">
+          <Stack gap="sm">
+            <Button
+              variant="secondary"
+              onClick={() => {
+                setShifted((s) => !s)
+                // The anchor moved without a scroll or resize: re-measure.
+                requestAnimationFrame(() => handle.current?.reposition())
+              }}
+            >
+              Move the spot
+            </Button>
+            <Popover.Close>Done</Popover.Close>
+          </Stack>
+        </Popover.Popup>
+      </Popover.Root>
+    </Stack>
+  )
+}
+
+export const VirtualAnchor: Story = {
+  render: () => <VirtualAnchorDemo />,
+  play: async ({canvas, userEvent}) => {
+    await userEvent.click(canvas.getByRole('button', {name: 'Edit the spot'}))
+    const dialog = page().getByRole('dialog', {name: 'Spot'})
+    const spot = canvas.getByText('Spot')
+    await waitFor(() =>
+      expect(dialog.getBoundingClientRect().left).toBeCloseTo(spot.getBoundingClientRect().left, 0),
+    )
+    // Below the spot (side bottom).
+    await expect(dialog.getBoundingClientRect().top).toBeGreaterThanOrEqual(
+      spot.getBoundingClientRect().bottom,
+    )
+
+    const before = spot.getBoundingClientRect().left
+    await userEvent.click(page().getByRole('button', {name: 'Move the spot'}))
+    await waitFor(() => expect(spot.getBoundingClientRect().left).toBeGreaterThan(before))
+    await waitFor(() =>
+      expect(dialog.getBoundingClientRect().left).toBeCloseTo(spot.getBoundingClientRect().left, 0),
+    )
+  },
+}
+
+function DisclosureDemo() {
+  const [expanded, setExpanded] = useState(true)
+  return (
+    <Popover.Root>
+      <Popover.Trigger>Details</Popover.Trigger>
+      <Popover.Popup label="Details">
+        <html.button type="button" aria-expanded={expanded} onClick={() => setExpanded((e) => !e)}>
+          More
+        </html.button>
+      </Popover.Popup>
+    </Popover.Root>
+  )
+}
+
+export const DisclosureDoesNotOwnEscape: Story = {
+  render: () => <DisclosureDemo />,
+  play: async ({canvas, userEvent}) => {
+    await userEvent.click(canvas.getByRole('button', {name: 'Details'}))
+    const more = page().getByRole('button', {name: 'More'})
+    await waitFor(() => expect(more).toHaveFocus())
+    await expect(more).toHaveAttribute('aria-expanded', 'true')
+    // An expanded disclosure opens no popup of its own: Esc closes the popover.
+    await userEvent.keyboard('{Escape}')
+    await expect(page().queryByRole('dialog')).not.toBeInTheDocument()
+  },
+}

package/src/components/Popover/Popover.tsx

@@ -0,0 +1,293 @@
+import {
+  type ReactNode,
+  type Ref,
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useId,
+  useImperativeHandle,
+  useLayoutEffect,
+  useRef,
+  useState,
+} from 'react'
+import {createPortal} from 'react-dom'
+import {html} from 'react-strict-dom'
+import {usePortalMount} from '../ThemeProvider/ThemeProvider'
+import {styles} from './styles.css'
+import {computePopoverPosition, type PopoverAlign, type PopoverSide} from './position'
+import {isOutsidePress} from './outside'
+
+// --- Context ---
+
+type IgnoreEntry = Element | null | (() => Element | null)
+
+interface PopoverContextValue {
+  open: boolean
+  setOpen: (open: boolean) => void
+  popoverId: string
+  side: PopoverSide
+  align: PopoverAlign
+  anchor?: () => DOMRect
+  triggerRef: React.RefObject<HTMLButtonElement | null>
+  popupRef: React.RefObject<HTMLDivElement | null>
+  repositionRef: React.RefObject<(() => void) | null>
+}
+
+const PopoverContext = createContext<PopoverContextValue | null>(null)
+
+function usePopover(part: string) {
+  const ctx = useContext(PopoverContext)
+  if (!ctx) throw new Error(`Popover.${part} must be used within Popover.Root`)
+  return ctx
+}
+
+const FOCUSABLE =
+  'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])'
+
+const OFFSET = 4 // `xs` token
+
+/**
+ * Whether a nested popup control owns this Escape: a Select, Menu or
+ * Combobox inside the popup closes on Esc without preventing default, and
+ * that Esc must close only it. Only controls that open a popup count — an
+ * expanded trigger that declares one (`aria-haspopup`), an expanded combobox,
+ * or focus inside a listbox or menu — never a plain disclosure, and never
+ * this popover's own Trigger.
+ *
+ * holds-until: Duro's Select, Menu and Combobox call preventDefault on the
+ * Escape they consume; the defaultPrevented check alone then suffices and
+ * this selector goes.
+ */
+const NESTED_POPUP_OWNER =
+  '[aria-expanded="true"][aria-haspopup], [role="combobox"][aria-expanded="true"], [role="listbox"], [role="menu"]'
+
+function nestedOwnsEscape(target: EventTarget | null, ownTrigger: Element | null): boolean {
+  if (!(target instanceof Element)) return false
+  const owner = target.closest(NESTED_POPUP_OWNER)
+  return owner !== null && owner !== ownTrigger
+}
+
+// --- Root ---
+
+export interface PopoverHandle {
+  /** Re-measure the anchor and re-place the popup. */
+  reposition: () => void
+}
+
+interface RootProps {
+  children: ReactNode
+  open?: boolean
+  defaultOpen?: boolean
+  onOpenChange?: (open: boolean) => void
+  side?: PopoverSide
+  align?: PopoverAlign
+  /** Virtual anchor: a viewport rect. Replaces the Trigger as the anchor. */
+  anchor?: () => DOMRect
+  /** Elements (or getters) whose pointerdown does not count as an outside press. */
+  ignore?: ReadonlyArray<IgnoreEntry>
+  ref?: Ref<PopoverHandle>
+}
+
+function Root({
+  children,
+  open: openProp,
+  defaultOpen = false,
+  onOpenChange,
+  side = 'bottom',
+  align = 'start',
+  anchor,
+  ignore,
+  ref,
+}: RootProps) {
+  const [inner, setInner] = useState(defaultOpen)
+  const controlled = openProp !== undefined
+  const open = controlled ? openProp : inner
+  const popoverId = useId()
+  const triggerRef = useRef<HTMLButtonElement | null>(null)
+  const popupRef = useRef<HTMLDivElement | null>(null)
+  const repositionRef = useRef<(() => void) | null>(null)
+  const previousFocusRef = useRef<HTMLElement | null>(null)
+  const ignoreRef = useRef(ignore)
+  ignoreRef.current = ignore
+  const openRef = useRef(open)
+  openRef.current = open
+
+  const setOpen = useCallback(
+    (next: boolean) => {
+      if (!controlled) setInner(next)
+      if (next !== openRef.current) onOpenChange?.(next)
+    },
+    [controlled, onOpenChange],
+  )
+
+  useImperativeHandle(ref, () => ({reposition: () => repositionRef.current?.()}), [])
+
+  // Focus: into the popup on open, back to the trigger (or the previously
+  // focused element when there is no trigger) on close.
+  const wasOpenRef = useRef(false)
+  useEffect(() => {
+    if (open && !wasOpenRef.current) {
+      previousFocusRef.current = document.activeElement as HTMLElement | null
+      const popup = popupRef.current
+      if (popup) {
+        const first = popup.querySelector<HTMLElement>(FOCUSABLE)
+        ;(first ?? popup).focus({preventScroll: true})
+      }
+    } else if (!open && wasOpenRef.current) {
+      const target = triggerRef.current ?? previousFocusRef.current
+      target?.focus?.()
+      previousFocusRef.current = null
+    }
+    wasOpenRef.current = open
+  }, [open])
+
+  // Esc and outside press.
+  useEffect(() => {
+    if (!open) return
+
+    function onKeyDown(e: KeyboardEvent) {
+      if (e.key !== 'Escape' || e.defaultPrevented) return
+      if (nestedOwnsEscape(e.target, triggerRef.current)) return
+      e.preventDefault()
+      setOpen(false)
+    }
+
+    function onPointerDown(e: PointerEvent) {
+      const ignored = (ignoreRef.current ?? []).map((entry) =>
+        typeof entry === 'function' ? entry() : entry,
+      )
+      const inside = [popupRef.current, triggerRef.current, ...ignored]
+      if (isOutsidePress(e.target as Node | null, inside)) setOpen(false)
+    }
+
+    document.addEventListener('keydown', onKeyDown)
+    document.addEventListener('pointerdown', onPointerDown, true)
+    return () => {
+      document.removeEventListener('keydown', onKeyDown)
+      document.removeEventListener('pointerdown', onPointerDown, true)
+    }
+  }, [open, setOpen])
+
+  const ctx: PopoverContextValue = {
+    open,
+    setOpen,
+    popoverId,
+    side,
+    align,
+    anchor,
+    triggerRef,
+    popupRef,
+    repositionRef,
+  }
+
+  return <PopoverContext.Provider value={ctx}>{children}</PopoverContext.Provider>
+}
+
+// --- Trigger ---
+// Trigger IS the button (like Menu.Trigger): give it a label, not a Button.
+
+function Trigger({children}: {children: ReactNode}) {
+  const {open, setOpen, popoverId, triggerRef} = usePopover('Trigger')
+
+  return (
+    <html.button
+      ref={triggerRef}
+      type="button"
+      onClick={() => setOpen(!open)}
+      aria-haspopup="dialog"
+      aria-expanded={open}
+      aria-controls={open ? popoverId : undefined}
+      style={styles.trigger}
+    >
+      {children}
+    </html.button>
+  )
+}
+
+// --- Popup ---
+
+interface PopupProps {
+  children: ReactNode
+  /** Accessible name for the dialog. */
+  label: string
+}
+
+function Popup({children, label}: PopupProps) {
+  const {open, popoverId, side, align, anchor, triggerRef, popupRef, repositionRef} =
+    usePopover('Popup')
+  const [coords, setCoords] = useState({top: 0, left: 0})
+  // Inside ThemeProvider's portal layer, like Select/Dialog/Drawer: theme
+  // tokens cascade into the popup and it stacks above dialogs.
+  const mount = usePortalMount()
+
+  // Measure before paint on open; re-measure on scroll/resize (capture phase
+  // catches any scrolling ancestor) and when Root.reposition() is called.
+  useLayoutEffect(() => {
+    if (!open) {
+      repositionRef.current = null
+      return
+    }
+    const update = () => {
+      const popup = popupRef.current
+      if (!popup) return
+      const rect = anchor ? anchor() : triggerRef.current?.getBoundingClientRect()
+      if (!rect) return
+      const next = computePopoverPosition({
+        anchor: {top: rect.top, left: rect.left, width: rect.width, height: rect.height},
+        popup: {width: popup.offsetWidth, height: popup.offsetHeight},
+        viewport: {width: window.innerWidth, height: window.innerHeight},
+        side,
+        align,
+        offset: OFFSET,
+      })
+      setCoords((prev) =>
+        prev.top === next.top && prev.left === next.left ? prev : {top: next.top, left: next.left},
+      )
+    }
+    repositionRef.current = update
+    update()
+    window.addEventListener('resize', update)
+    window.addEventListener('scroll', update, true)
+    return () => {
+      repositionRef.current = null
+      window.removeEventListener('resize', update)
+      window.removeEventListener('scroll', update, true)
+    }
+  }, [open, side, align, anchor, triggerRef, popupRef, repositionRef])
+
+  if (!open || typeof document === 'undefined') return null
+
+  return createPortal(
+    <html.div
+      ref={popupRef}
+      id={popoverId}
+      role="dialog"
+      aria-label={label}
+      tabIndex={-1}
+      style={[styles.popup, styles.popupPosition(coords.top, coords.left)]}
+    >
+      {children}
+    </html.div>,
+    mount ?? document.body,
+  )
+}
+
+// --- Close ---
+
+function Close({children}: {children: ReactNode}) {
+  const {setOpen} = usePopover('Close')
+
+  return (
+    <html.button type="button" onClick={() => setOpen(false)} style={styles.close}>
+      {children}
+    </html.button>
+  )
+}
+
+export const Popover = {
+  Root,
+  Trigger,
+  Popup,
+  Close,
+}

package/src/components/Popover/outside.ts

@@ -0,0 +1,9 @@
+// True when a pointerdown target lies outside the popup, the trigger and every
+// ignored element. `inside` may hold nulls (refs not yet attached).
+export function isOutsidePress(
+  target: Node | null,
+  inside: ReadonlyArray<Element | null>,
+): boolean {
+  if (!target) return true
+  return !inside.some((el) => el != null && el.contains(target))
+}