@duro-app/ui 5.1.0 → 5.3.0

package/src/components/VisuallyHidden/VisuallyHidden.stories.tsx

@@ -0,0 +1,30 @@
+import type {Meta, StoryObj} from '@storybook/react'
+import {expect} from 'storybook/test'
+import {VisuallyHidden} from './VisuallyHidden'
+import {Button} from '../Button/Button'
+import {Icon} from '../Icon/Icon'
+
+const meta: Meta<typeof VisuallyHidden> = {
+  title: 'Components/VisuallyHidden',
+  component: VisuallyHidden,
+}
+
+export default meta
+type Story = StoryObj<typeof VisuallyHidden>
+
+export const NamesAnIconButton: Story = {
+  render: () => (
+    <Button variant="secondary">
+      <Icon name="search" size="sm" />
+      <VisuallyHidden>Search</VisuallyHidden>
+    </Button>
+  ),
+  play: async ({canvas}) => {
+    const button = canvas.getByRole('button', {name: 'Search'})
+    await expect(button).toBeInTheDocument()
+    const text = canvas.getByText('Search')
+    const box = text.getBoundingClientRect()
+    await expect(box.width).toBeLessThanOrEqual(1)
+    await expect(box.height).toBeLessThanOrEqual(1)
+  },
+}

package/src/components/VisuallyHidden/VisuallyHidden.tsx

@@ -0,0 +1,22 @@
+import type {ReactNode} from 'react'
+import {html} from 'react-strict-dom'
+import {visuallyHidden} from '../../styles/visually-hidden.css'
+
+interface VisuallyHiddenProps {
+  children: ReactNode
+  /** For aria-describedby / aria-labelledby to point at. */
+  id?: string
+}
+
+/**
+ * Text for assistive tech only: in the accessibility tree, not on screen. Use
+ * it to give an icon-only control or a visual-only cue words — a status a
+ * colour shows, "(opens in a new tab)" after a link.
+ */
+export function VisuallyHidden({children, id}: VisuallyHiddenProps) {
+  return (
+    <html.span id={id} style={[visuallyHidden.base, visuallyHidden.text]}>
+      {children}
+    </html.span>
+  )
+}

package/src/docs/FlexGrow.stories.tsx

@@ -0,0 +1,83 @@
+import type {Meta, StoryObj} from '@storybook/react'
+import {expect} from 'storybook/test'
+import {css, html} from 'react-strict-dom'
+import {colors} from '@duro-app/tokens/tokens/colors.css'
+import {sizes} from '@duro-app/tokens/tokens/sizes.css'
+import {spacing} from '@duro-app/tokens/tokens/spacing.css'
+
+// The premise of `duro/no-flex-grow-web` was that react-strict-dom's web
+// runtime forces `flex-grow: 0`, so a growing child collapses. These stories
+// hold RSD on web to what it actually does, so the rule follows the evidence.
+const meta: Meta = {
+  title: 'Foundations/flexGrow on web',
+}
+
+export default meta
+type Story = StoryObj
+
+const styles = css.create({
+  row: {
+    display: 'flex',
+    flexDirection: 'row',
+    width: sizes.panelLg,
+    gap: spacing.sm,
+    backgroundColor: colors.bgCard,
+  },
+  column: {
+    display: 'flex',
+    flexDirection: 'column',
+    height: sizes.panelSm,
+    width: sizes.panelSm,
+    backgroundColor: colors.bgCard,
+  },
+  fixed: {
+    width: sizes.iconXxl,
+    height: sizes.iconXxl,
+    flexShrink: 0,
+    backgroundColor: colors.border,
+  },
+  grow: {
+    flexGrow: 1,
+    backgroundColor: colors.accent,
+  },
+  growFromZero: {
+    flexGrow: 1,
+    flexBasis: 0,
+    backgroundColor: colors.accent,
+  },
+})
+
+export const GrowInRow: Story = {
+  render: () => (
+    <html.div style={styles.row} role="group" aria-label="row">
+      <html.div style={styles.fixed} />
+      <html.div style={styles.grow} role="group" aria-label="grow" />
+      <html.div style={styles.growFromZero} role="group" aria-label="grow from zero" />
+    </html.div>
+  ),
+  play: async ({canvas}) => {
+    const row = canvas.getByRole('group', {name: 'row'}).getBoundingClientRect().width
+    const grow = canvas.getByRole('group', {name: 'grow'})
+    const zero = canvas.getByRole('group', {name: 'grow from zero'})
+    await expect(getComputedStyle(grow).flexGrow).toBe('1')
+    await expect(getComputedStyle(zero).flexGrow).toBe('1')
+    // The two growing children share what the fixed one leaves.
+    await expect(grow.getBoundingClientRect().width).toBeGreaterThan(row / 3)
+    await expect(zero.getBoundingClientRect().width).toBeGreaterThan(row / 3)
+  },
+}
+
+export const GrowInColumn: Story = {
+  render: () => (
+    <html.div style={styles.column} role="group" aria-label="column">
+      <html.div style={styles.fixed} />
+      <html.div style={styles.growFromZero} role="group" aria-label="grow" />
+    </html.div>
+  ),
+  play: async ({canvas}) => {
+    const column = canvas.getByRole('group', {name: 'column'}).getBoundingClientRect().height
+    const grow = canvas.getByRole('group', {name: 'grow'})
+    await expect(getComputedStyle(grow).flexGrow).toBe('1')
+    await expect(grow.getBoundingClientRect().height).toBeGreaterThan(column / 2)
+  },
+}

package/src/index.native.ts

@@ -34,6 +34,7 @@ export {Stack, type SpacingKey} from './components/Stack/Stack'
 export {Inline} from './components/Inline/Inline'
 export {Cluster} from './components/Cluster/Cluster'
 export {Grid} from './components/Grid/Grid'
+export type {GridTrack} from './shared/length'
 
 // Theming — resolves to ThemeProvider.native.tsx on Metro (RN-safe variant:
 // no display:contents / portal mount; applies the theme to a flex container).

package/src/index.ts

@@ -13,7 +13,7 @@ export {Alert, type AlertVariant} from './components/Alert/Alert'
 export {Icon, type IconName} from './components/Icon'
 export {Badge, type BadgeVariant, type BadgeSize} from './components/Badge/Badge'
 export {Button, type ButtonVariant, type ButtonSize} from './components/Button/Button'
-export {ButtonGroup} from './components/ButtonGroup/ButtonGroup'
+export {ButtonGroup, type ButtonGroupProps} from './components/ButtonGroup/ButtonGroup'
 export {Callout, type CalloutVariant} from './components/Callout/Callout'
 export {Card, type CardVariant, type CardSize} from './components/Card/Card'
 export {Checkbox} from './components/Checkbox/Checkbox'
@@ -48,6 +48,10 @@ export {Panel} from './components/Panel/Panel'
 export {RadioGroup} from './components/RadioGroup/RadioGroup'
 export {ScrollArea} from './components/ScrollArea/ScrollArea'
 export {Combobox} from './components/Combobox/Combobox'
+export {Listbox} from './components/Listbox/Listbox'
+export {VisuallyHidden} from './components/VisuallyHidden/VisuallyHidden'
+export {TextLink, type TextLinkVariant} from './components/TextLink/TextLink'
+export type {ListboxAnchorProps, ListboxMaxHeight} from './components/Listbox/Listbox'
 export {Select} from './components/Select/Select'
 export {SideNav} from './components/SideNav/SideNav'
 export {Spinner, type SpinnerSize} from './components/Spinner/Spinner'
@@ -90,6 +94,7 @@ export {Text, type TextVariant, type TextColor} from './components/Text/Text'
 export {Toggle, type ToggleSize} from './components/Toggle/Toggle'
 export {ToggleGroup} from './components/ToggleGroup/ToggleGroup'
 export {Tooltip} from './components/Tooltip/Tooltip'
+export {Toolbar, type ToolbarProps} from './components/Toolbar/Toolbar'
 export {Popover} from './components/Popover/Popover'
 export type {PopoverHandle} from './components/Popover/Popover'
 export {Switch} from './components/Switch/Switch'
@@ -99,6 +104,7 @@ export {Stack, type SpacingKey} from './components/Stack/Stack'
 export {Inline} from './components/Inline/Inline'
 export {Cluster} from './components/Cluster/Cluster'
 export {Grid} from './components/Grid/Grid'
+export type {GridTrack} from './shared/length'
 export {PageShell, type PageShellMaxWidth, type PageShellPadding} from './components/PageShell'
 
 // Hooks

package/src/shared/ModalContext.ts

@@ -0,0 +1,18 @@
+import {createContext, useContext} from 'react'
+
+/**
+ * True inside a Dialog or Drawer. A Popover reads it to pick its layer: inside
+ * a modal it must clear that modal (`layers.popover`); outside one it stays at
+ * `layers.floating`, so a modal opened later, even from inside the Popover,
+ * covers it.
+ *
+ * holds-until: a Dialog opened from a Popover that itself sits inside a Dialog
+ * still renders under that Popover (1000/1001 < 1040). It is fixed when a
+ * nested Dialog lifts its layer above its opener, or when the parent Popover
+ * closes on a nested modal opening; no consumer needs it yet.
+ */
+export const ModalContext = createContext(false)
+
+export function useInModal() {
+  return useContext(ModalContext)
+}

package/src/shared/mergeRefs.ts

@@ -0,0 +1,11 @@
+import type {Ref, RefCallback} from 'react'
+
+/** One callback ref that sets every ref given (object or callback). */
+export function mergeRefs<T>(...refs: Array<Ref<T> | undefined>): RefCallback<T> {
+  return (value) => {
+    for (const ref of refs) {
+      if (typeof ref === 'function') ref(value)
+      else if (ref) (ref as {current: T | null}).current = value
+    }
+  }
+}

package/src/shared/useOrderedRegistry.ts

@@ -0,0 +1,57 @@
+import {useCallback, useLayoutEffect, useRef, useState} from 'react'
+
+/** A registered control: its id, in DOM order, and whether it is disabled. */
+export interface RegisteredControl {
+  id: string
+  disabled: boolean
+}
+
+function sameEntries(a: RegisteredControl[], b: RegisteredControl[]) {
+  return (
+    a.length === b.length && a.every((e, i) => e.id === b[i].id && e.disabled === b[i].disabled)
+  )
+}
+
+/**
+ * Controls register their element here and come back in DOM order (the way
+ * useRovingFocus orders a wrapping ToggleGroup). A control's place is read
+ * from where it sits in the document, not from its parent: a Select or Menu
+ * trigger sits inside its own Root, so `:first-child` cannot tell.
+ *
+ * Registration happens in a layout effect, so server-rendered HTML (and the
+ * first client render) sees an empty registry.
+ *
+ * Keyed children can move without remounting, so the order is also re-read
+ * after every commit of the owner; state changes only when the order did.
+ */
+export function useOrderedRegistry() {
+  const elements = useRef(new Map<string, {el: HTMLElement; disabled: boolean}>())
+  const [order, setOrder] = useState<RegisteredControl[]>([])
+
+  const sync = useCallback(() => {
+    const next = [...elements.current.entries()]
+      .sort(([, a], [, b]) =>
+        a.el.compareDocumentPosition(b.el) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1,
+      )
+      .map(([id, {disabled}]) => ({id, disabled}))
+    setOrder((prev) => (sameEntries(prev, next) ? prev : next))
+  }, [])
+
+  const register = useCallback(
+    (id: string, el: HTMLElement, disabled: boolean) => {
+      elements.current.set(id, {el, disabled})
+      sync()
+      return () => {
+        if (elements.current.get(id)?.el === el) elements.current.delete(id)
+        sync()
+      }
+    },
+    [sync],
+  )
+
+  useLayoutEffect(() => {
+    sync()
+  })
+
+  return {elements, order, register}
+}

package/src/styles/visually-hidden.css.ts

@@ -13,4 +13,12 @@ export const visuallyHidden = css.create({
     height: 1,
     overflow: 'hidden',
   },
+  // For text (VisuallyHidden): clipped to nothing, kept on one line so a
+  // screen reader reads it whole.
+  text: {
+    clip: 'rect(0, 0, 0, 0)',
+    whiteSpace: 'nowrap',
+    borderWidth: 0,
+    padding: 0,
+  },
 })