Sheet component · Kition Tessera

When to use

Editing a record’s field, a connection, a rule.

When not to

A quick question: use Modal or Confirm.

Examples

Edit a field

With unsaved changes, Escape, the backdrop, and the close button ask first.

sheet.tsx

import { useState } from 'react'
import { Button, Field, Sheet, TextInput } from '@kition/tessera-ui'

export default function Demo() {
  const [open, setOpen] = useState(false)
  const [label, setLabel] = useState('Status')
  const [saved, setSaved] = useState('Status')
  const dirty = label !== saved
  return (
    <>
      <Button variant="secondary" size="md" onClick={() => setOpen(true)}>Edit field…</Button>
      <Sheet
        open={open}
        title="Edit field"
        dirty={dirty}
        onRequestClose={() => {
          if (window.confirm('Discard your changes?')) {
            setLabel(saved)
            setOpen(false)
          }
        }}
        onClose={() => setOpen(false)}
        footer={
          <>
            <Button variant="secondary" size="md" onClick={() => setOpen(false)}>Close</Button>
            <Button variant="primary" size="md" disabled={!dirty} onClick={() => setSaved(label)}>Save</Button>
          </>
        }
      >
        <Field label="Field name">{({ id }) => <TextInput id={id} size="lg" value={label} onChange={(event) => setLabel(event.target.value)} />}</Field>
      </Sheet>
    </>
  )
}

Props

Sheet

A panel that slides in from the right over a dimmed page, for editing one thing beside the work.

Prop	Type	Default	Description
`open`required	`boolean`	—
`onClose`required	`() => void`	—
`title`required	`ReactNode`	—
`children`required	`ReactNode`	—
`footer`	`ReactNode`	—	Actions at the bottom, right-aligned.
`dirty`	`boolean`	`false`	With unsaved changes, closing (Escape, the backdrop, the close button) calls `onRequestClose` instead.
`onRequestClose`	`() => void`	—
`width`	`number`	`400`	Its width in pixels.
`label`	`string`	—	Its accessible name, when `title` is not plain text (a logo and a name).
`side`	`'left' \| 'right'`	`'right'`	The edge it slides in from: `right` (default, editing beside the work) or `left` (an app's navigation on a phone).
`testId`	`string`	`'sheet'`	Test id of the sheet; its parts take `${testId}-backdrop`, `-header`, `-close`, `-footer`.

Used in

1 of Kition's 16 kits use this component.

Table