Sheet

Usage

import {
  Sheet, SheetTrigger, SheetContent, SheetHeader, SheetTitle,
  SheetCloseButton, SheetBody, SheetDescription, SheetFooter,
} from '@acronis-platform/ui-react';

Sheet is a modal side panel — the same Base UI Dialog primitive the Dialog component uses (focus trap, scroll lock, ARIA), anchored to a screen edge via side (top / right / bottom / left, default right) with a slide transition. Compose it from parts: a trigger, the content panel, and an optional header (title + close), body (with a description), and footer. This is a design-pending v1 themed on the shared semantic tokens like the Dialog family.

Details is an alias. The Vue UI kit called this side panel Details. The full part family is re-exported under Details* (Details, DetailsContent, DetailsHeader, …) for a 1:1 migration — import { Details } from '@acronis-platform/ui-react'. Prefer Sheet in new code.

Examples

<Sheet>
  <SheetTrigger render={<Button variant="secondary">Open details</Button>} />
  <SheetContent side="right">
    <SheetHeader>
      <SheetTitle>Workload details</SheetTitle>
      <SheetCloseButton />
    </SheetHeader>
    <SheetBody>
      <SheetDescription>Inspect the selected workload.</SheetDescription>
    </SheetBody>
    <SheetFooter>
      <Button>Edit</Button>
    </SheetFooter>
  </SheetContent>
</Sheet>

side anchors the panel to any edge — left/right are full-height, top/bottom full-width:

<SheetContent side="left"> … </SheetContent>

Preset: SheetDetails

For the common "details of the selected item" panel, use the SheetDetails preset — the easy path that is the sheet-detail-panel pattern. It bakes the header (title + close), a body that switches by contentState (loading → Spinner, empty/error → Empty, else a property list or custom children), and an optional footer of actions:

import { SheetDetails, Button } from '@acronis-platform/ui-react';

<SheetDetails
  open={open}
  onOpenChange={setOpen}
  title="Workload details"
  contentState={loading ? 'loading' : 'content'}
  properties={[
    { label: 'Status', value: 'Protected' },
    { label: 'Owner', value: 'ken99@example.com' },
  ]}
  actions={<Button>Edit</Button>}
/>

Reach for the composable Sheet* parts (above) only when you need a layout the preset doesn't cover.

API Reference

The root Sheet (and Details) forwards the Base UI Dialog root props (open, defaultOpen, onOpenChange, modal). SheetContent adds: