@estiva-app/ui 0.17.0 → 0.19.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@estiva-app/ui",
-  "version": "0.17.0",
+  "version": "0.19.0",
   "description": "Estiva's design tokens (the contract) and a small set of primitives (a convenience) for every Estiva app.",
   "type": "module",
   "license": "MIT",

package/src/Checkbox.mdx

@@ -27,9 +27,18 @@ the parent owns the state.
 
 <Canvas of={CheckboxStories.WithLabel} />
 
+- A list you tick several from, where the whole row is the target: pass
+  **`row`**, with `label` and, if the row has one, a `leading` picture. The
+  box sits at the end, and the row fills on hover and while checked.
+
+<Canvas of={CheckboxStories.Row} />
+
 ## When not
 
 - One choice out of several → **Select** (a value) or **Tabs** (a view).
+- A row drawn by hand with `role="option"` and a Checkbox picture inside it: it
+  tells a screen reader "an option in a list" where there is no list. That is
+  `row`.
 - Inside a **Menu** — a checkbox inside a `menuitem` is invalid HTML;
   a checkable list lives in a DialogShell.
 
@@ -56,6 +65,16 @@ import { Checkbox } from '@estiva-app/ui'
   the box. When disabled, only the box shows it; the words keep their colour
   and lose the pointer. It is a field of its own, so it does not go inside a
   **Field**.
+- With `row` it is the same `Field`, its `Field.Label` the whole row:
+  `leading`, 12px, the words in `body-2` (cut off with an ellipsis when too
+  long), the box at the end; 40px tall, 12px in from each side, 8px corners.
+  It needs `onChange`: without one, `row` is ignored. Put the rows in a
+  column with `gap-0.5`.
+
+```tsx
+<Checkbox row leading={<IconSquareRounded size={16} stroke={1.5} />} label="Item one" checked={on} onChange={setOn} />
+```
+
 - Inside a busy **Form** it is disabled, and looks it.
 - It does not move when it toggles: the tick is always in the box, hidden
   when unchecked, so both states hang on a line of text the same way.
@@ -64,7 +83,7 @@ import { Checkbox } from '@estiva-app/ui'
 
 | Key | Does |
 |---|---|
-| Tab | Onto the box. |
+| Tab | Onto the box (in a row too: the row is not a Tab stop of its own). |
 | Space | Toggles it. |
 | Enter | Nothing. As on a native checkbox, Enter is the form's key. |
 

package/src/Checkbox.stories.tsx

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react-vite'
 import { fn } from 'storybook/test'
 import { useState } from 'react'
+import { IconSquareRounded } from '@tabler/icons-react'
 import { Checkbox } from './Checkbox'
 
 const meta = {
@@ -32,6 +33,49 @@ export const WithLabel: Story = {
 /** Disabled with words: only the box shows it; the words keep their colour. */
 export const WithLabelDisabled: Story = { args: { label: 'Label', 'aria-label': undefined, disabled: true } }
 
+/**
+ * A list you tick several from: each row is the target — a picture, the words,
+ * the box at the end — and fills on hover and while checked.
+ */
+export const Row: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => {
+    const [ticked, setTicked] = useState(new Set(['Item two']))
+    const toggle = (item: string) =>
+      setTicked((prev) => {
+        const next = new Set(prev)
+        if (next.has(item)) next.delete(item)
+        else next.add(item)
+        return next
+      })
+    return (
+      <div className="flex w-80 flex-col gap-0.5">
+        {['Item one', 'Item two', 'Item three'].map((item) => (
+          <Checkbox
+            key={item}
+            row
+            leading={<IconSquareRounded size={16} stroke={1.5} />}
+            label={item}
+            checked={ticked.has(item)}
+            onChange={() => toggle(item)}
+          />
+        ))}
+      </div>
+    )
+  },
+}
+
+/** A row that cannot be changed: the box shows it, and the row neither fills nor points. */
+export const RowDisabled: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <div className="flex w-80 flex-col gap-0.5">
+      <Checkbox row disabled leading={<IconSquareRounded size={16} stroke={1.5} />} label="Item one" checked onChange={() => {}} />
+      <Checkbox row disabled leading={<IconSquareRounded size={16} stroke={1.5} />} label="Item two" checked={false} onChange={() => {}} />
+    </div>
+  ),
+}
+
 /** Controlled, as always — the parent owns the state. */
 export const Toggles: Story = {
   parameters: { controls: { disable: true } },

package/src/Checkbox.test.tsx

@@ -124,4 +124,67 @@ describe('Checkbox', () => {
       expect(screen.getByText('Label')).not.toBeNull()
     })
   })
+
+  describe('with row', () => {
+    const picture = <svg data-testid="picture" />
+
+    it('is named by its words, and a click anywhere on the row toggles it once', async () => {
+      const user = userEvent.setup()
+      const onChange = vi.fn()
+      render(<Checkbox row leading={picture} checked={false} onChange={onChange} label="Item one" />)
+      const box = screen.getByRole('checkbox', { name: 'Item one' })
+      await user.click(screen.getByText('Item one'))
+      await user.click(screen.getByTestId('picture'))
+      await user.click(box)
+      expect(onChange).toHaveBeenCalledTimes(3)
+      expect(onChange).toHaveBeenNthCalledWith(1, true)
+    })
+
+    it('draws the picture, the words, then the box, in one row', () => {
+      const { container } = render(<Checkbox row leading={picture} checked={false} onChange={() => {}} label="Item one" />)
+      const children = [...(container.querySelector('label')?.children ?? [])]
+      expect(children[0]?.getAttribute('data-testid')).toBe('picture')
+      expect(children[1]?.textContent).toBe('Item one')
+      expect(children[2]?.getAttribute('role')).toBe('checkbox')
+      expect(container.querySelector('label')?.className).toContain('h-10')
+    })
+
+    it('fills while checked, and on hover', () => {
+      const { container, rerender } = render(<Checkbox row checked={false} onChange={() => {}} label="Item one" />)
+      const row = () => container.querySelector('label')?.className ?? ''
+      expect(row()).not.toContain('bg-bg-selected')
+      expect(row()).toContain('hover:bg-bg-hover')
+      rerender(<Checkbox row checked onChange={() => {}} label="Item one" />)
+      expect(row()).toContain('bg-bg-selected')
+    })
+
+    it('does nothing when disabled, and neither fills under the pointer nor points', async () => {
+      const user = userEvent.setup()
+      const onChange = vi.fn()
+      const { container } = render(<Checkbox row disabled checked={false} onChange={onChange} label="Item one" />)
+      await user.click(screen.getByText('Item one'))
+      expect(onChange).not.toHaveBeenCalled()
+      const className = container.querySelector('label')?.className ?? ''
+      expect(className).not.toContain('cursor-pointer')
+      expect(className).not.toContain('hover:bg-bg-hover')
+    })
+
+    it('keeps Space on the box, and adds no Tab stop of its own', async () => {
+      const user = userEvent.setup()
+      const onChange = vi.fn()
+      render(<Checkbox row checked={false} onChange={onChange} label="Item one" />)
+      await user.tab()
+      expect(document.activeElement).toBe(screen.getByRole('checkbox', { name: 'Item one' }))
+      await user.keyboard(' ')
+      expect(onChange).toHaveBeenCalledWith(true)
+      await user.tab()
+      expect(document.activeElement).toBe(document.body)
+    })
+
+    it('is ignored with no onChange', () => {
+      const { container } = render(<Checkbox row checked label="Item one" />)
+      expect(container.querySelector('label')).toBeNull()
+      expect(screen.queryByRole('checkbox')).toBeNull()
+    })
+  })
 })

package/src/Checkbox.tsx

@@ -1,6 +1,7 @@
 import { Checkbox as BaseCheckbox } from '@base-ui/react/checkbox'
 import { Field as BaseField } from '@base-ui/react/field'
 import { IconCheck } from '@tabler/icons-react'
+import type { ReactNode } from 'react'
 import { cn } from './cn'
 import { useFormBusy } from './formBusy'
 
@@ -33,6 +34,12 @@ import { useFormBusy } from './formBusy'
  * Read state panel's, where it was written by hand (UIG-7, 16 September). The
  * words keep their colour when the box is disabled (Katerina: "no need").
  *
+ * With `row`, the whole row is the target: an optional `leading` picture, the
+ * words, the box at the end, and the row fills on hover and while checked — a
+ * list you tick several from. The class list is Peek's "Add to Open work" rows,
+ * which drew it by hand as a `role="option"` in a list that was not one (UIG-8,
+ * Katerina's pick B, 16 September: the same pixels, on the package part).
+ *
  * Inside a busy `Form` it is disabled, and looks it (`formBusy.ts`).
  */
 export interface CheckboxProps {
@@ -44,6 +51,14 @@ export interface CheckboxProps {
    * they name it, so no `aria-label` is needed. `className` stays on the box.
    */
   label?: string
+  /**
+   * The whole row is the target: `leading`, then the words, then the box at
+   * the end; the row fills on hover and while checked. For a list you tick
+   * several from. Needs `label` and `onChange`; without `onChange` it is ignored.
+   */
+  row?: boolean
+  /** In a `row`, a picture before the words: an icon, a status. */
+  leading?: ReactNode
   'aria-label'?: string
   /** Set by a `Field` with `required`; a caller inside one owes nothing. */
   'aria-required'?: boolean | 'true' | 'false'
@@ -65,7 +80,9 @@ const tickClasses = (checked: boolean) => cn('flex', !checked && 'invisible')
 
 const WORDS_CLASSES = 'text-body-2 text-text-primary'
 
-export function Checkbox({ checked, onChange, disabled: ownDisabled = false, label, className, ...aria }: CheckboxProps) {
+const ROW_CLASSES = 'flex shrink-0 items-center gap-3 h-10 px-3 rounded-lg transition-colors'
+
+export function Checkbox({ checked, onChange, disabled: ownDisabled = false, label, row, leading, className, ...aria }: CheckboxProps) {
   const formBusy = useFormBusy()
   const disabled = ownDisabled || formBusy
   if (!onChange) {
@@ -101,6 +118,18 @@ export function Checkbox({ checked, onChange, disabled: ownDisabled = false, lab
     </BaseCheckbox.Root>
   )
   if (label === undefined) return box
+  if (row) {
+    return (
+      <BaseField.Root disabled={disabled}>
+        {/* No fill under the pointer, and no pointer, over a row that toggles nothing. */}
+        <BaseField.Label className={cn(ROW_CLASSES, checked && 'bg-bg-selected', !disabled && 'cursor-pointer hover:bg-bg-hover')}>
+          {leading}
+          <span className={cn('flex-1 min-w-0 truncate', WORDS_CLASSES)}>{label}</span>
+          {box}
+        </BaseField.Label>
+      </BaseField.Root>
+    )
+  }
   return (
     <BaseField.Root disabled={disabled}>
       {/* No pointer over words that toggle nothing. */}

package/src/CommandPalette.mdx

@@ -90,7 +90,10 @@ import { CommandPalette, CommandPaletteSearch } from '@estiva-app/ui'
   send the highlight to the first or last row; the palette stops that.
 - **The field is named by its placeholder**, so say what it asks for.
 - **A form's fields go in `Field`s.** Mark the missing ones with `error` inside
-  `onSubmit`, and the first of them takes focus. `working` locks the fields,
+  `onSubmit`, and the first of them takes focus. The level is the package
+  **Form** (`enterSends={false}`), so work a mark out from what is typed — a
+  field that is filled must stop saying it is missing, or the Form will not
+  send again. `working` locks the fields,
   puts its words on the button and beside it, and holds focus on the form so
   Esc still closes it; when it clears, focus goes to the first field that needs
   something, or back where it was. `error` is what went wrong, beside the
@@ -111,7 +114,8 @@ import { CommandPalette, CommandPaletteSearch } from '@estiva-app/ui'
 | | Home / End | move the text cursor; the lit row stays |
 | inside a level | Backspace at the start of the field, or the chip's ✕ | back, with focus in the field |
 | a form | Tab / Shift+Tab | between the fields, never out of the window |
-| | Ctrl+Enter | submits; if a field needs something, focus goes to the first |
+| | Enter in a text field | nothing; Enter in a text area is a new line |
+| | Ctrl+Enter, or the button | submits; if a field needs something, focus goes to the first |
 | | Backspace in an empty text field | back. In a form that is one list, Backspace anywhere; in a list inside a form with text fields, nothing |
 | | while working | nothing but Esc |
 | | Esc in an open list | closes the list first |

package/src/CommandPalette.stories.tsx

@@ -155,7 +155,11 @@ function Demo({ start, where, modKey, label }: { start: Start; where?: string; m
 
   // ── The form keeps what was typed while the palette is open.
   const [draft, setDraft] = useState({ title: '', notes: '', kind: 'one', group: '' })
-  const [missing, setMissing] = useState<{ title?: string; group?: string }>({})
+  // What a field needs is worked out from the draft once a send has been tried, so a field that is
+  // filled stops saying so at once. A mark left standing would keep the Form from ever sending.
+  const [tried, setTried] = useState(false)
+  const need = { title: draft.title.trim() ? undefined : 'Give it a title.', group: draft.group ? undefined : 'Choose a group.' }
+  const missing: { title?: string; group?: string } = tried ? need : {}
   const [working, setWorking] = useState(false)
   const [refused, setRefused] = useState(false)
   const [kind, setKind] = useState('one')
@@ -264,8 +268,7 @@ function Demo({ start, where, modKey, label }: { start: Start; where?: string; m
   }, [frame, level, asked, recent, searching])
 
   const submitForm = async () => {
-    const need = { title: draft.title.trim() ? undefined : 'Give it a title.', group: draft.group ? undefined : 'Choose a group.' }
-    setMissing(need)
+    setTried(true)
     setRefused(false)
     if (need.title || need.group) return
     setWorking(true)

package/src/CommandPalette.test.tsx

@@ -316,6 +316,21 @@ describe('CommandPaletteForm', () => {
     expect(onSubmit).toHaveBeenCalledTimes(1)
   })
 
+  it('sends nothing on a plain Enter in a field; the button sends, through the same Form submit', async () => {
+    const onSubmit = vi.fn()
+    const user = userEvent.setup()
+    render(<Form onSubmit={onSubmit} />)
+    const title = screen.getByRole('textbox', { name: 'Title' }) as HTMLInputElement
+    await waitFor(() => expect(document.activeElement).toBe(title))
+    await user.keyboard('A{Enter}')
+    expect(onSubmit).not.toHaveBeenCalled()
+    expect(title.value).toBe('A')
+    const button = screen.getByRole('button', { name: 'Create item' })
+    expect(button.getAttribute('type')).toBe('submit')
+    await user.click(button)
+    expect(onSubmit).toHaveBeenCalledTimes(1)
+  })
+
   it('puts focus on the first field that needs something', async () => {
     const user = userEvent.setup()
     render(<Form />)

package/src/CommandPalette.tsx

@@ -19,6 +19,7 @@ import { Button } from './Button'
 import { InputChip } from './ChipInput'
 import { EmptyState } from './EmptyState'
 import { FieldLine } from './Field'
+import { Form } from './Form'
 import { Kbd } from './Kbd'
 import { EnterHint, MenuItemBody, menuItemClassName } from './Menu'
 import { ScrollArea } from './ScrollArea'
@@ -484,15 +485,18 @@ export function CommandPaletteForm({ chip, icon, submitLabel, onSubmit, submitWa
   const busy = !!working
   const busyRef = useRef(busy)
   busyRef.current = busy
-  const returnTo = useRef<HTMLElement | null>(null)
 
   /** A field that says it needs something: Base UI marks the `Field` itself. */
   const firstInvalid = () => frameRef.current?.querySelector<HTMLElement>('[data-invalid]')?.querySelector<HTMLElement>(CONTROL) ?? null
 
+  /*
+    The form's one way in: its button (type="submit") and Ctrl+Enter both
+    arrive here through the package Form's submit, so Base UI's field check
+    runs for both. The guard stays: a waiting button is focusable while
+    disabled, so it is not the browser that stops it.
+  */
   const submit = () => {
     if (busyRef.current || submitWaits) return
-    const active = document.activeElement
-    returnTo.current = active instanceof HTMLElement && frameRef.current?.contains(active) ? active : null
     onSubmit()
     // If the caller marked fields instead of starting, the first of them
     // takes focus: the key list's "focus goes to the first".
@@ -502,26 +506,12 @@ export function CommandPaletteForm({ chip, icon, submitLabel, onSubmit, submitWa
   }
 
   /*
-    The lock must not lose focus.
-
-    Locking disables the fields, and a disabled field drops focus to the page
-    — measured in the prototype, where after Ctrl+Enter no key but Esc ever
-    worked again, even after the error came back. So while the form works,
-    focus sits on the form's own box, where its keys still arrive; when it
-    stops, focus goes to the first field that needs something, or back where
-    it was, or to the first field.
+    The lock must not lose focus — measured in the prototype, where after
+    Ctrl+Enter no key but Esc ever worked again. The package Form does it now
+    (UIG-7): while it works, focus sits on the form, where its keys still
+    arrive; when it stops, focus goes to the first field that needs something,
+    or back where it was, or to the first field.
   */
-  useLayoutEffect(() => {
-    if (busy) {
-      frameRef.current?.focus()
-      return
-    }
-    if (document.activeElement !== frameRef.current) return
-    const was = returnTo.current
-    const target = firstInvalid() ?? (was?.isConnected && !(was as HTMLButtonElement).disabled ? was : null) ?? firstControl(popupRef.current)
-    target?.focus()
-    // Runs when the lock changes, and reads the DOM it leaves behind.
-  }, [busy])
 
   /*
     Backspace goes back only where nothing typed is lost: from an empty text
@@ -541,12 +531,8 @@ export function CommandPaletteForm({ chip, icon, submitLabel, onSubmit, submitWa
   const measure = () => setBackNamed(backWorksFrom(document.activeElement))
   useLayoutEffect(measure)
 
+  // Ctrl+Enter is the Form's; plain Enter in a field sends nothing here (`enterSends={false}`).
   const onKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {
-    if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) {
-      e.preventDefault()
-      submit()
-      return
-    }
     if (e.key === 'Backspace' && !e.ctrlKey && !e.metaKey && !e.altKey && backWorksFrom(e.target as Element)) {
       e.preventDefault()
       back()
@@ -565,27 +551,29 @@ export function CommandPaletteForm({ chip, icon, submitLabel, onSubmit, submitWa
         {icon != null && <span className="flex shrink-0 items-center text-text-secondary">{icon}</span>}
         <LevelChip chip={chip} onBack={back} />
       </div>
-      <ScrollArea viewportClassName="max-h-[420px]" contentClassName="flex flex-col px-5 py-4">
-        {/* `contents`: the fieldset only locks; the fields lay out as if it
-            were not there. */}
-        <fieldset data-command-palette-fields="" disabled={busy} className="contents">
+      {/* The package Form, from the fields to the button (UIG-7). The chip row
+          stays outside it, so its ✕ still goes back while the form works; the
+          button row is inside it, so focus that was on the button is held.
+          The fields are found through data-command-palette-fields. */}
+      <Form data-command-palette-fields="" busy={busy} enterSends={false} onSubmit={submit} className="flex min-h-0 flex-col">
+        <ScrollArea viewportClassName="max-h-[420px]" contentClassName="flex flex-col px-5 py-4">
           <div className="flex flex-col gap-4">{children}</div>
-        </fieldset>
-      </ScrollArea>
-      <div className="flex shrink-0 items-center gap-3 px-5 pb-4">
-        <div className="min-w-0 flex-1">
-          {working ? <FieldLine>{working.line}</FieldLine> : error ? <FieldLine tone="error">{error}</FieldLine> : null}
+        </ScrollArea>
+        <div className="flex shrink-0 items-center gap-3 px-5 pb-4">
+          <div className="min-w-0 flex-1">
+            {working ? <FieldLine>{working.line}</FieldLine> : error ? <FieldLine tone="error">{error}</FieldLine> : null}
+          </div>
+          <Button
+            type="submit"
+            variant="primary"
+            disabled={busy}
+            disabledReason={busy ? undefined : submitWaits}
+            leadingIcon={busy ? <IconLoader2 size={16} stroke={1.5} className="animate-spin" /> : undefined}
+          >
+            {working ? working.button : submitLabel}
+          </Button>
         </div>
-        <Button
-          variant="primary"
-          onClick={submit}
-          disabled={busy}
-          disabledReason={busy ? undefined : submitWaits}
-          leadingIcon={busy ? <IconLoader2 size={16} stroke={1.5} className="animate-spin" /> : undefined}
-        >
-          {working ? working.button : submitLabel}
-        </Button>
-      </div>
+      </Form>
       <Footer keys={keys} />
     </div>
   )

package/src/Form.mdx

@@ -36,7 +36,10 @@ import { Button, Field, Form, TextInput } from '@estiva-app/ui'
 ```
 
 - **`onSubmit` takes nothing.** The page's own submit is already prevented;
-  there is no event to stop.
+  there is no event to stop. Every way of sending — Enter, Ctrl+Enter, a
+  submit button — arrives here the same way, after the same field check.
+- **`enterSends={false}`** keeps Enter in a one-line field from sending, where
+  only Ctrl+Enter may: a form inside **CommandPalette**, which uses it.
 - **`busy` switches off every field and button inside**, so they do not
   each need `disabled={busy}`. A button outside the form that sends it —
   a dialog's footer, with `form="<id>"` and the form's `id` — is outside,
@@ -57,10 +60,17 @@ import { Button, Field, Form, TextInput } from '@estiva-app/ui'
 
 ## Keys
 
+The same in every form (Katerina, 16 September).
+
 | Key | Does |
 |---|---|
-| Enter, in a one-line field | Sends the form. |
+| Enter, in a one-line field | Sends the form — with or without a submit button, however many fields. Not with `enterSends={false}`. |
+| Shift+Enter or Alt+Enter, in a one-line field | Nothing — the browser would send the form on its own; the form stops it. |
 | Enter, in a Textarea | A new line; it does not send. |
+| Enter, in a list or a people picker | Picks; it does not send. |
+| Enter, in a field that handles Enter itself | What the field does; the form does not send. |
+| Ctrl+Enter (Cmd+Enter), anywhere inside | Sends the form. |
+| Any of these, while busy | Nothing: a form that is sending does not send again. |
 | Tab, while busy | Nothing inside takes focus. |
 
 ## Props

package/src/Form.test.tsx

@@ -54,6 +54,109 @@ describe('Form', () => {
     expect(onSubmit).toHaveBeenCalledTimes(1)
   })
 
+  describe('the keys, the same in every form', () => {
+    function Keys({ onSubmit, enterSends }: { onSubmit: () => void; enterSends?: boolean }) {
+      return (
+        <Form onSubmit={onSubmit} enterSends={enterSends} aria-label="Probe">
+          <Field label="One">
+            <TextInput />
+          </Field>
+          <Field label="Two">
+            <TextInput />
+          </Field>
+          <Field label="Words">
+            <Textarea />
+          </Field>
+          <input role="combobox" aria-label="Pick" aria-expanded="false" aria-controls="none" />
+        </Form>
+      )
+    }
+
+    it('Enter in a one-line field sends, even with two fields and no submit button', async () => {
+      const user = userEvent.setup()
+      const onSubmit = vi.fn()
+      render(<Keys onSubmit={onSubmit} />)
+      await user.type(screen.getByRole('textbox', { name: 'Two' }), 'x{Enter}')
+      expect(onSubmit).toHaveBeenCalledTimes(1)
+    })
+
+    it('Enter in a text area is a new line; Ctrl+Enter and Cmd+Enter there send', async () => {
+      const user = userEvent.setup()
+      const onSubmit = vi.fn()
+      render(<Keys onSubmit={onSubmit} />)
+      const words = screen.getByRole('textbox', { name: 'Words' }) as HTMLTextAreaElement
+      await user.type(words, 'a{Enter}b')
+      expect(words.value).toBe('a\nb')
+      expect(onSubmit).not.toHaveBeenCalled()
+      await user.keyboard('{Control>}{Enter}{/Control}')
+      expect(onSubmit).toHaveBeenCalledTimes(1)
+      await user.keyboard('{Meta>}{Enter}{/Meta}')
+      expect(onSubmit).toHaveBeenCalledTimes(2)
+    })
+
+    it("Enter in a picker's input does not send", async () => {
+      const user = userEvent.setup()
+      const onSubmit = vi.fn()
+      render(<Keys onSubmit={onSubmit} />)
+      await user.type(screen.getByRole('combobox', { name: 'Pick' }), 'x{Enter}')
+      expect(onSubmit).not.toHaveBeenCalled()
+    })
+
+    it('a field that handles its own Enter keeps it', async () => {
+      const user = userEvent.setup()
+      const onSubmit = vi.fn()
+      render(
+        <Form onSubmit={onSubmit} aria-label="Probe">
+          <TextInput aria-label="Own" onKeyDown={(event) => event.key === 'Enter' && event.preventDefault()} />
+        </Form>,
+      )
+      await user.type(screen.getByRole('textbox', { name: 'Own' }), 'x{Enter}')
+      expect(onSubmit).not.toHaveBeenCalled()
+    })
+
+    it('with enterSends off, Enter in a one-line field does nothing and Ctrl+Enter sends', async () => {
+      const user = userEvent.setup()
+      const onSubmit = vi.fn()
+      render(<Keys onSubmit={onSubmit} enterSends={false} />)
+      const one = screen.getByRole('textbox', { name: 'One' }) as HTMLInputElement
+      await user.type(one, 'x{Enter}')
+      expect(onSubmit).not.toHaveBeenCalled()
+      expect(one.value).toBe('x')
+      await user.keyboard('{Control>}{Enter}{/Control}')
+      expect(onSubmit).toHaveBeenCalledTimes(1)
+    })
+
+    it('Shift+Enter and Alt+Enter in a one-line field send nothing, even with a submit button', async () => {
+      const onSubmit = vi.fn()
+      render(<Harness onSubmit={onSubmit} />)
+      const field = screen.getByRole('textbox', { name: 'First' })
+      // The browser's implicit submission is the default action of this keydown: prevented, it does not happen.
+      for (const modifier of [{ shiftKey: true }, { altKey: true }]) {
+        expect(fireEvent.keyDown(field, { key: 'Enter', ...modifier })).toBe(false)
+      }
+      expect(onSubmit).not.toHaveBeenCalled()
+    })
+
+    it('Enter with a submit button in the form sends once, not twice', async () => {
+      const user = userEvent.setup()
+      const onSubmit = vi.fn()
+      render(<Harness onSubmit={onSubmit} />)
+      await user.type(screen.getByRole('textbox', { name: 'First' }), 'x{Enter}')
+      expect(onSubmit).toHaveBeenCalledTimes(1)
+    })
+
+    it('does not send again while busy', async () => {
+      const onSubmit = vi.fn()
+      const { rerender } = render(<Harness onSubmit={onSubmit} />)
+      act(() => screen.getByRole('textbox', { name: 'First' }).focus())
+      rerender(<Harness onSubmit={onSubmit} busy />)
+      const form = screen.getByRole('form', { name: 'Probe' })
+      fireEvent.keyDown(form, { key: 'Enter', ctrlKey: true })
+      fireEvent.submit(form)
+      expect(onSubmit).not.toHaveBeenCalled()
+    })
+  })
+
   it('does not send while a field shows its error', async () => {
     const user = userEvent.setup()
     const onSubmit = vi.fn()