@duro-app/ui 5.21.0 → 5.23.0

package/src/components/SplitPane/SplitPane.stories.tsx

@@ -1,5 +1,6 @@
 import type {Meta, StoryObj} from '@storybook/react'
 import {expect, fn, userEvent, waitFor} from 'storybook/test'
+import {useState, type ReactNode} from 'react'
 import {css, html} from 'react-strict-dom'
 import {SIZES_PX, SPACING_PX, type SizeToken} from '@duro-app/tokens/keys'
 import type {Breakpoint} from '@duro-app/tokens/tokens/breakpoints.css'
@@ -9,6 +10,10 @@ import {List} from '../List/List'
 import {Panel} from '../Panel/Panel'
 import {Heading} from '../Heading/Heading'
 import {Text} from '../Text/Text'
+import {Input} from '../Input/Input'
+import {Button} from '../Button/Button'
+import {Icon} from '../Icon/Icon'
+import {VirtualList} from '../VirtualList/VirtualList'
 
 const meta: Meta = {
   title: 'Components/SplitPane',
@@ -29,6 +34,8 @@ interface SplitArgs {
   maxSize: SizeToken
   collapseBelow: Breakpoint
   onSizeChange?: (px: number) => void
+  collapsed?: boolean
+  collapsedContent?: ReactNode
 }
 
 const DEFAULT_ARGS: SplitArgs = {
@@ -43,7 +50,11 @@ const PANE_SIZES: SizeToken[] = ['sidebarW', 'panelSm', 'panelMd', 'panelLg']
 
 /** The picked B0 direction (docs/mockups/split-pane/Hairline.dc.html). */
 function Split(props: Partial<SplitArgs>) {
-  const {defaultSize, minSize, maxSize, collapseBelow, onSizeChange} = {...DEFAULT_ARGS, ...props}
+  const {defaultSize, minSize, maxSize, collapseBelow, onSizeChange, collapsed, collapsedContent} =
+    {
+      ...DEFAULT_ARGS,
+      ...props,
+    }
   return (
     <html.div style={frame.fill}>
       <SplitPane.Root
@@ -53,8 +64,11 @@ function Split(props: Partial<SplitArgs>) {
         maxSize={maxSize}
         collapseBelow={collapseBelow}
         onSizeChange={onSizeChange}
+        collapsed={collapsed}
+        collapsedContent={collapsedContent}
       >
         <SplitPane.Pane>
+          <Button variant="secondary">Filter sessions</Button>
           <List.Root aria-label="Sessions">
             {SESSIONS.map((s) => (
               <List.Item key={s}>
@@ -146,3 +160,195 @@ export const NarrowStacksInOneColumn: Story = {
     )
   },
 }
+
+function Collapsible() {
+  const [collapsed, setCollapsed] = useState(false)
+  return (
+    <>
+      <Button variant="secondary" onClick={() => setCollapsed((c) => !c)}>
+        Toggle sessions
+      </Button>
+      <Split
+        collapsed={collapsed}
+        collapsedContent={
+          // As in the Focus artboard: an icon button that fits the strip.
+          <Button
+            variant="secondary"
+            size="small"
+            aria-label="Expand sessions"
+            onClick={() => setCollapsed(false)}
+          >
+            <Icon name="menu" size="sm" />
+          </Button>
+        }
+      />
+    </>
+  )
+}
+
+/**
+ * `collapsed`: the first pane shrinks to a strip holding `collapsedContent`, the
+ * handle goes away, and expanding restores the width it had.
+ */
+export const Collapsed: Story = {
+  render: () => <Collapsible />,
+}
+
+export const CollapsedShowsTheStrip: Story = {
+  render: () => <Collapsible />,
+  beforeEach: async () => {
+    await setViewport(1200, 800)
+  },
+  play: async ({canvas}) => {
+    await waitFor(() => expect(separator()).not.toBeNull())
+    const handle = separator()!
+    const primary = document.getElementById(handle.getAttribute('aria-controls')!)!
+    const toggle = canvas.getByRole('button', {name: 'Toggle sessions'})
+    await waitFor(() =>
+      expect(primary.getBoundingClientRect().width).toBeCloseTo(SIZES_PX.sidebarW, 0),
+    )
+
+    // widen the pane, then collapse
+    handle.focus()
+    await userEvent.keyboard('{ArrowRight}')
+    const widened = SIZES_PX.sidebarW + SPACING_PX.md
+    await waitFor(() => expect(primary.getBoundingClientRect().width).toBeCloseTo(widened, 0))
+
+    await userEvent.click(toggle)
+    await waitFor(() =>
+      expect(primary.getBoundingClientRect().width).toBeCloseTo(SIZES_PX.iconButton, 0),
+    )
+    // the handle is not rendered; the pane's own children are inert and out of the a11y tree
+    await expect(separator()).toBeNull()
+    await expect(canvas.queryByRole('separator')).toBeNull()
+    await expect(canvas.queryByRole('button', {name: 'Filter sessions'})).toBeNull()
+
+    // Tab from the toggle never reaches a control inside the collapsed children,
+    // but the strip's own button is reachable
+    toggle.focus()
+    const reached = new Set<Element>()
+    for (let i = 0; i < 6; i++) {
+      await userEvent.tab()
+      if (document.activeElement) reached.add(document.activeElement)
+    }
+    const filter = document.evaluate(
+      "//button[contains(., 'Filter sessions')]",
+      document,
+      null,
+      XPathResult.FIRST_ORDERED_NODE_TYPE,
+      null,
+    ).singleNodeValue
+    await expect(filter).not.toBeNull()
+    await expect(reached.has(filter as Element)).toBe(false)
+    await expect(reached.has(canvas.getByRole('button', {name: 'Expand sessions'}))).toBe(true)
+
+    // expanded again: the prior size returns and the handle is back
+    await userEvent.click(toggle)
+    await waitFor(() => expect(primary.getBoundingClientRect().width).toBeCloseTo(widened, 0))
+    await expect(separator()).toHaveAttribute('aria-valuenow', String(widened))
+    await expect(canvas.getByRole('button', {name: 'Filter sessions'})).toBeVisible()
+
+    // the re-mounted handle resizes by keyboard again
+    const again = separator()!
+    again.focus()
+    await userEvent.keyboard('{ArrowRight}')
+    await waitFor(() =>
+      expect(primary.getBoundingClientRect().width).toBeCloseTo(widened + SPACING_PX.md, 0),
+    )
+  },
+}
+
+function KeepsState() {
+  const [collapsed, setCollapsed] = useState(false)
+  return (
+    <>
+      <Button variant="secondary" onClick={() => setCollapsed((c) => !c)}>
+        Toggle sessions
+      </Button>
+      <html.div style={frame.fill}>
+        <SplitPane.Root
+          aria-label="Resize the session list"
+          collapsed={collapsed}
+          collapsedContent={
+            <Button variant="secondary" size="small" aria-label="Expand sessions">
+              <Icon name="menu" size="sm" />
+            </Button>
+          }
+        >
+          <SplitPane.Pane>
+            <Input aria-label="Search sessions" />
+          </SplitPane.Pane>
+          <SplitPane.Handle />
+          <SplitPane.Pane>
+            <Text>Detail</Text>
+          </SplitPane.Pane>
+        </SplitPane.Root>
+      </html.div>
+    </>
+  )
+}
+
+export const CollapseKeepsChildState: Story = {
+  render: () => <KeepsState />,
+  beforeEach: async () => {
+    await setViewport(1200, 800)
+  },
+  play: async ({canvas}) => {
+    const field = await canvas.findByRole('textbox', {name: 'Search sessions'})
+    await userEvent.type(field, 'auth')
+    await expect(field).toHaveValue('auth')
+
+    const toggle = canvas.getByRole('button', {name: 'Toggle sessions'})
+    await userEvent.click(toggle)
+    await waitFor(() => expect(separator()).toBeNull())
+    await userEvent.click(toggle)
+    await waitFor(() => expect(separator()).not.toBeNull())
+
+    const after = await canvas.findByRole('textbox', {name: 'Search sessions'})
+    await expect(after).toBe(field)
+    await expect(after).toHaveValue('auth')
+  },
+}
+
+const ROWS = Array.from({length: 500}, (_, i) => ({id: i, text: `Row ${i + 1}`}))
+
+const list = (name: string) => (
+  <VirtualList
+    aria-label={name}
+    items={ROWS}
+    getKey={(r) => r.id}
+    estimateSize="controlLg"
+    renderItem={(r) => <Text>{r.text}</Text>}
+  />
+)
+
+function ListsInEachPane() {
+  return (
+    <html.div style={frame.fill}>
+      <SplitPane.Root aria-label="Resize the lists">
+        <SplitPane.Pane>{list('Left')}</SplitPane.Pane>
+        <SplitPane.Handle />
+        <SplitPane.Pane>{list('Right')}</SplitPane.Pane>
+      </SplitPane.Root>
+    </html.div>
+  )
+}
+
+export const VirtualListsFillTheirPanes: Story = {
+  render: () => <ListsInEachPane />,
+  beforeEach: async () => {
+    await setViewport(1200, 800)
+  },
+  play: async ({canvas}) => {
+    // Each list sits in a pane that is a direct child of the split's root.
+    const root = (await canvas.findByRole('separator')).parentElement!
+    for (const name of ['Left', 'Right']) {
+      const list = await canvas.findByRole('list', {name})
+      let pane: HTMLElement = list
+      while (pane.parentElement !== root) pane = pane.parentElement!
+      await waitFor(() => expect(list.clientHeight).toBeGreaterThan(0))
+      await waitFor(() => expect(list.clientHeight).toBe(pane.clientHeight))
+      await expect(list.scrollHeight).toBeGreaterThan(list.clientHeight)
+    }
+  },
+}

package/src/components/SplitPane/SplitPane.tsx

@@ -22,6 +22,8 @@ interface SplitPaneContextValue {
   max: number
   setSize: (px: number) => void
   stacked: boolean
+  collapsed: boolean
+  collapsedContent: ReactNode
   primaryId: string
   label: string
 }
@@ -57,6 +59,15 @@ interface RootProps {
   maxSize?: SizeToken
   /** Below this breakpoint, measured on the split's own width, the panes stack. Default: `sm` */
   collapseBelow?: Breakpoint
+  /**
+   * Controlled: shrink the primary pane to a strip (the `iconButton` size),
+   * show `collapsedContent` in it and remove the handle. The pane's own
+   * children stay mounted (their state is kept) but are inert and hidden. When
+   * it turns false the pane returns to its prior width. Ignored when stacked.
+   */
+  collapsed?: boolean
+  /** What the strip shows while `collapsed` (an expand button, icons). */
+  collapsedContent?: ReactNode
   /** The handle's accessible name ("Resize list"). */
   'aria-label': string
 }
@@ -75,6 +86,8 @@ function Root({
   minSize = 'sidebarW',
   maxSize = 'panelLg',
   collapseBelow = 'sm',
+  collapsed = false,
+  collapsedContent,
   'aria-label': label,
 }: RootProps) {
   const min = SIZES_PX[minSize]
@@ -103,7 +116,9 @@ function Root({
   })
 
   return (
-    <SplitPaneContext.Provider value={{size, min, max, setSize, stacked, primaryId, label}}>
+    <SplitPaneContext.Provider
+      value={{size, min, max, setSize, stacked, collapsed, collapsedContent, primaryId, label}}
+    >
       <html.div ref={rootRef} style={[styles.root, stacked && styles.rootStacked]}>
         {items}
       </html.div>
@@ -112,23 +127,51 @@ function Root({
 }
 
 function Pane({children}: {children: ReactNode}) {
-  const {size, stacked, primaryId} = useSplitPane('Pane')
+  const {size, stacked, collapsed, collapsedContent, primaryId} = useSplitPane('Pane')
   const primary = useContext(PaneIndexContext) === 0
+  const strip = primary && collapsed && !stacked
+  const bodyRef = useRef<HTMLDivElement>(null)
+
+  // `inert` takes the stowed children out of the tab order and the accessibility
+  // tree; set on the node because the strict-DOM element has no such prop.
+  useEffect(() => {
+    const el = bodyRef.current
+    if (!el) return
+    if (strip) el.setAttribute('inert', '')
+    else el.removeAttribute('inert')
+  }, [strip])
+
   return (
     <html.div
       id={primary ? primaryId : undefined}
       style={[
-        primary ? [styles.primary, !stacked && styles.primarySize(size)] : styles.secondary,
+        primary
+          ? [
+              styles.primary,
+              !stacked && styles.primarySize(collapsed ? SIZES_PX.iconButton : size),
+              !stacked && collapsed && styles.primaryStrip,
+            ]
+          : styles.secondary,
         stacked && styles.stackedPane,
       ]}
     >
-      {children}
+      {strip ? collapsedContent : null}
+      {primary ? (
+        // The wrapper exists for the primary pane only, to stow its children
+        // (inert) while collapsed; unstowed it fills the pane, so a child that
+        // takes the pane's height keeps scrolling on its own.
+        <html.div ref={bodyRef} style={strip ? styles.stowed : styles.fill}>
+          {children}
+        </html.div>
+      ) : (
+        children
+      )}
     </html.div>
   )
 }
 
 function Handle() {
-  const {size, min, max, setSize, stacked, primaryId, label} = useSplitPane('Handle')
+  const {size, min, max, setSize, stacked, collapsed, primaryId, label} = useSplitPane('Handle')
   const [hovered, setHovered] = useState(false)
   const [keyboardFocus, setKeyboardFocus] = useState(false)
   const [dragging, setDragging] = useState(false)
@@ -158,9 +201,9 @@ function Handle() {
     }
     el.addEventListener('keydown', onKeyDown)
     return () => el.removeEventListener('keydown', onKeyDown)
-  }, [size, min, max, setSize, stacked])
+  }, [size, min, max, setSize, stacked, collapsed])
 
-  if (stacked) return null
+  if (stacked || collapsed) return null
   const active = hovered || keyboardFocus || dragging
 
   return (

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

@@ -28,6 +28,34 @@ export const styles = css.create({
     minWidth: 0,
     overflow: 'auto',
   },
+  // Collapsed: only a strip is left, so nothing spills out of it.
+  // Its content is centred under a top inset, and a hairline stands in for the
+  // handle it no longer has.
+  primaryStrip: {
+    position: 'relative',
+    overflow: 'hidden',
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    paddingTop: spacing.sm,
+    borderRightWidth: borders.hairline,
+    borderRightStyle: 'solid',
+    borderRightColor: colors.border,
+  },
+  // The collapsed pane's own children: mounted, so their state is kept, but
+  // out of sight, out of the tab order (with `inert`) and unclickable.
+  stowed: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    visibility: 'hidden',
+    pointerEvents: 'none',
+  },
+  // The primary pane's children wrapper, unstowed: it fills the pane.
+  fill: {
+    height: '100%',
+    minHeight: 0,
+  },
   primarySize: (px: number) => ({width: px}),
   secondary: {
     flexGrow: 1,

package/src/components/Textarea/Textarea.meta.ts

@@ -2,8 +2,12 @@ import type {ComponentMeta} from '../component-meta'
 
 export const meta: ComponentMeta = {
   description:
-    'Multi-line text input with automatic Field/Form integration. Same Field binding behavior as Input.',
-  whenToUse: ['Multi-line text entry (comments, messages, descriptions)'],
+    'Multi-line text input with automatic Field/Form integration. Same Field binding behavior as Input. autoGrow makes the height follow the content from rows up to maxRows, then it scrolls (CSS field-sizing, with a scrollHeight fallback; native grows with the content and caps at maxRows). The anchor props of Listbox.getAnchorProps() (role combobox, aria-controls, aria-expanded, aria-activedescendant) are forwarded as ARIA attributes on web and as the matching accessibility props on native, so a Listbox can be anchored to it while the editor keeps focus.',
+  whenToUse: [
+    'Multi-line text entry (comments, messages, descriptions)',
+    'A composer that grows with its text (autoGrow, maxRows)',
+    'An editor a Listbox is anchored to for mentions or slash commands (spread Listbox.getAnchorProps())',
+  ],
   whenNotToUse: ['Single-line input — use Input'],
   relatedTo: [
     {

package/src/components/Textarea/Textarea.stories.tsx

@@ -1,7 +1,9 @@
 import type {Meta, StoryObj} from '@storybook/react'
-import {expect, fn} from 'storybook/test'
+import {expect, fn, waitFor, within} from 'storybook/test'
+import {useCallback, useId, useRef, useState} from 'react'
 import {css, html} from 'react-strict-dom'
 import {Textarea} from './Textarea'
+import {Listbox} from '../Listbox/Listbox'
 import {spacing} from '@duro-app/tokens/tokens/spacing.css'
 import {sizes} from '@duro-app/tokens/tokens/sizes.css'
 
@@ -96,3 +98,136 @@ export const AllVariants: Story = {
     await expect(disabled).toBeDisabled()
   },
 }
+
+export const AutoGrow: Story = {
+  args: {placeholder: 'Grows', autoGrow: true, rows: 2, maxRows: 5},
+  play: async ({canvas, userEvent}) => {
+    const textarea = canvas.getByPlaceholderText('Grows') as HTMLTextAreaElement
+    const empty = textarea.getBoundingClientRect().height
+
+    await userEvent.click(textarea)
+    await userEvent.keyboard(
+      'a{Shift>}{Enter}{/Shift}b{Shift>}{Enter}{/Shift}c{Shift>}{Enter}{/Shift}d',
+    )
+    // four lines: taller than empty, nothing to scroll yet
+    await waitFor(() => expect(textarea.getBoundingClientRect().height).toBeGreaterThan(empty))
+    await expect(textarea.scrollHeight).toBeLessThanOrEqual(textarea.clientHeight)
+
+    // many more lines: the height stops at maxRows, then the field scrolls
+    await userEvent.keyboard('{Shift>}{Enter}{/Shift}e'.repeat(10))
+    await waitFor(() => expect(textarea.scrollHeight).toBeGreaterThan(textarea.clientHeight))
+    const capped = textarea.getBoundingClientRect().height
+    await userEvent.keyboard('{Shift>}{Enter}{/Shift}f')
+    await expect(textarea.getBoundingClientRect().height).toBe(capped)
+    await expect(capped).toBeLessThan(textarea.scrollHeight)
+    // the cap is maxRows (5) lines plus the vertical padding and border
+    const box = getComputedStyle(textarea)
+    const px = (v: string) => parseFloat(v)
+    const fiveLines =
+      5 * px(box.lineHeight) +
+      px(box.paddingTop) +
+      px(box.paddingBottom) +
+      px(box.borderTopWidth) +
+      px(box.borderBottomWidth)
+    await expect(Math.abs(capped - fiveLines)).toBeLessThan(1)
+  },
+}
+
+const FRUITS = ['Apple', 'Apricot', 'Banana', 'Cherry']
+
+// The editor keeps focus while the anchored Listbox filters and selects.
+function AnchoredEditor() {
+  const id = useId()
+  const ref = useRef<HTMLTextAreaElement | null>(null)
+  const [text, setText] = useState('')
+  const [highlighted, setHighlighted] = useState(0)
+  const [dismissed, setDismissed] = useState(false)
+  const query = text.startsWith('/') ? text.slice(1).toLowerCase() : null
+  const matches = query === null ? [] : FRUITS.filter((f) => f.toLowerCase().startsWith(query))
+  const open = query !== null && !dismissed && matches.length > 0
+  const optionId = useCallback((value: string) => `${id}-${value}`, [id])
+  const highlightedId = open ? optionId(matches[Math.min(highlighted, matches.length - 1)]!) : null
+
+  const pick = (value: string) => {
+    setText(`${value} `)
+    setDismissed(false)
+  }
+
+  return (
+    <>
+      <Textarea
+        placeholder="Type / to pick"
+        ref={ref}
+        value={text}
+        onChange={(e) => {
+          setText(e.target.value)
+          setHighlighted(0)
+          setDismissed(false)
+        }}
+        onKeyDown={(e) => {
+          if (!open) return
+          if (e.key === 'ArrowDown') {
+            e.preventDefault()
+            setHighlighted((i) => (i + 1) % matches.length)
+          } else if (e.key === 'Enter') {
+            e.preventDefault()
+            pick(matches[Math.min(highlighted, matches.length - 1)]!)
+          } else if (e.key === 'Escape') {
+            setDismissed(true)
+          }
+        }}
+        role="combobox"
+        {...Listbox.getAnchorProps({id, open, highlightedId})}
+      />
+      <Listbox.Root
+        id={id}
+        open={open}
+        anchor={() => ref.current?.getBoundingClientRect()}
+        highlightedId={highlightedId}
+        onSelect={pick}
+        getOptionId={optionId}
+        aria-label="Fruits"
+      >
+        {matches.map((f) => (
+          <Listbox.Option key={f} value={f}>
+            {f}
+          </Listbox.Option>
+        ))}
+      </Listbox.Root>
+    </>
+  )
+}
+
+export const AnchoredListbox: Story = {
+  render: () => <AnchoredEditor />,
+  play: async ({canvas, userEvent}) => {
+    const editor = canvas.getByRole('combobox')
+    await userEvent.click(editor)
+    await userEvent.keyboard('/a')
+    const list = await within(document.body).findByRole('listbox', {name: 'Fruits'})
+    await expect(editor).toHaveFocus()
+    await expect(editor).toHaveAttribute('aria-expanded', 'true')
+    await expect(editor).toHaveAttribute('aria-controls', list.id)
+    await expect(within(list).getAllByRole('option')).toHaveLength(2)
+
+    // filtering narrows the list; focus stays in the editor
+    await userEvent.keyboard('pr')
+    await waitFor(() => expect(within(list).getAllByRole('option')).toHaveLength(1))
+    await expect(editor).toHaveFocus()
+    await expect(editor).toHaveAttribute('aria-activedescendant', `${list.id}-Apricot`)
+
+    // selecting by key keeps focus and closes the list
+    await userEvent.keyboard('{Enter}')
+    await expect(editor).toHaveValue('Apricot ')
+    await expect(editor).toHaveFocus()
+    await waitFor(() => expect(editor).toHaveAttribute('aria-expanded', 'false'))
+
+    // selecting by pointer keeps focus too
+    await userEvent.clear(editor)
+    await userEvent.keyboard('/b')
+    const banana = await within(document.body).findByRole('option', {name: 'Banana'})
+    await userEvent.click(banana)
+    await expect(editor).toHaveValue('Banana ')
+    await expect(editor).toHaveFocus()
+  },
+}

package/src/components/Textarea/Textarea.tsx

@@ -1,12 +1,28 @@
+import {useCallback, useRef} from 'react'
 import {html} from 'react-strict-dom'
 import {useFieldContext} from '../Field/FieldContext'
+import type {ListboxAnchorProps} from '../Listbox/Listbox'
+import {useAutoGrowFallback} from './useAutoGrowFallback'
+import {grow} from './grow'
 import {styles} from './styles.css'
 
 type StrictTextareaProps = React.ComponentProps<typeof html.textarea>
 
 export type TextareaVariant = 'default' | 'error'
 
-interface TextareaProps {
+/** `maxRows` only means something on a field that grows. */
+type GrowProps =
+  | {
+      /** The height follows the content, from `rows` up to `maxRows`, then it scrolls. */
+      autoGrow: true
+      /** The most rows the field shows before it scrolls. Default: no limit */
+      maxRows?: number
+    }
+  | {autoGrow?: false; maxRows?: never}
+
+type TextareaProps = Partial<ListboxAnchorProps> & GrowProps & TextareaBaseProps
+
+interface TextareaBaseProps {
   variant?: TextareaVariant
   name?: string
   placeholder?: string
@@ -32,6 +48,14 @@ export function Textarea({
   placeholder,
   required,
   rows = 3,
+  autoGrow,
+  maxRows,
+  role,
+  'aria-controls': ariaControls,
+  'aria-expanded': ariaExpanded,
+  'aria-activedescendant': ariaActiveDescendant,
+  'aria-autocomplete': ariaAutocomplete,
+  'aria-haspopup': ariaHasPopup,
   value,
   defaultValue,
   disabled,
@@ -57,6 +81,18 @@ export function Textarea({
   const extraProps: Record<string, unknown> = {}
   if (autoFocus) extraProps.autoFocus = true
 
+  // Without CSS field-sizing, measure the content after each render.
+  const innerRef = useRef<HTMLTextAreaElement | null>(null)
+  const setRef = useCallback(
+    (el: HTMLTextAreaElement | null) => {
+      innerRef.current = el
+      if (typeof effectiveRef === 'function') effectiveRef(el)
+      else if (effectiveRef) (effectiveRef as {current: unknown}).current = el
+    },
+    [effectiveRef],
+  )
+  useAutoGrowFallback(innerRef, autoGrow ? 'content' : 'fixed')
+
   return (
     <html.textarea
       id={ctx?.controlId}
@@ -76,8 +112,19 @@ export function Textarea({
       onFocus={onFocus as StrictTextareaProps['onFocus']}
       onKeyDown={onKeyDown as StrictTextareaProps['onKeyDown']}
       onKeyUp={onKeyUp as StrictTextareaProps['onKeyUp']}
-      ref={effectiveRef as React.Ref<HTMLTextAreaElement>}
-      style={[styles.base, styles[effectiveVariant]]}
+      role={role}
+      aria-controls={ariaControls}
+      aria-expanded={ariaExpanded}
+      aria-activedescendant={ariaActiveDescendant}
+      aria-autocomplete={ariaAutocomplete}
+      aria-haspopup={ariaHasPopup}
+      ref={setRef}
+      style={[
+        styles.base,
+        styles[effectiveVariant],
+        autoGrow && grow.autoGrow,
+        autoGrow && maxRows !== undefined && grow.maxRows(maxRows),
+      ]}
       {...extraProps}
     />
   )

package/src/components/Textarea/autoGrow.ts

@@ -0,0 +1,33 @@
+/** How a Textarea sizes itself: to its content, or to its fixed rows. */
+export type GrowMode = 'content' | 'fixed'
+
+/**
+ * Fallback for browsers without CSS `field-sizing: content`: size the field to
+ * its content. The element's own `rows` give the floor, the style's maxHeight
+ * the ceiling (past it the field scrolls).
+ */
+export interface GrowableField {
+  style: {height: string}
+  scrollHeight: number
+  offsetHeight: number
+  clientHeight: number
+}
+
+/** True when the browser sizes a textarea to its content in CSS. */
+export function supportsFieldSizing(
+  css: {supports?: (property: string, value: string) => boolean} | undefined = (
+    globalThis as {CSS?: {supports?: (property: string, value: string) => boolean}}
+  ).CSS,
+): boolean {
+  return css?.supports?.('field-sizing', 'content') === true
+}
+
+/** Resize `el` to fit its content; returns the height set, in px. */
+export function fitToContent(el: GrowableField): number {
+  el.style.height = 'auto'
+  // scrollHeight excludes the border; add it back for a border-box field.
+  const border = el.offsetHeight - el.clientHeight
+  const height = el.scrollHeight + border
+  el.style.height = `${height}px`
+  return height
+}