Drawer

The Drawer component is a panel that slides out from the edge of the screen. It can be useful when you need users to complete a task or view some details without leaving the current page.

Installation

import {
  Drawer,
  DrawerBody,
  DrawerFooter,
  DrawerHeader,
  DrawerOverlay,
  DrawerContent,
  DrawerCloseButton,
  DrawerTitle,
} from '@sajari-ui/core';

import {
  Drawer,
  DrawerBody,
  DrawerFooter,
  DrawerHeader,
  DrawerOverlay,
  DrawerContent,
  DrawerCloseButton,
  DrawerTitle,
} from '@sajari-ui/core';

Usage

Basic Drawer

Editable Example

function DrawerExample() {
  const { open, onOpen, onClose } = useDisclosure();
  const btnRef = React.useRef();
  const results = Array.from(Array(10)).map((_, i) => (
    <Card display="flex" flexDirection="flex-col" padding="p-3" space="space-y-3" key={i}>
      <Skeleton width="w-32" height="h-5" margin="mb-1" />
      <Skeleton height="h-2" />
      <Skeleton height="h-2" />
      <Skeleton height="h-2" />
    </Card>
  ));

  return (
    <>
      <Button ref={btnRef} appearance="primary" onClick={onOpen}>
        Open
      </Button>
      <Drawer open={open} placement="right" onClose={onClose} finalFocusRef={btnRef}>
        <DrawerOverlay />
        <DrawerContent>
          <DrawerHeader>
            <DrawerTitle>Preview</DrawerTitle>
            <DrawerCloseButton />
          </DrawerHeader>

          <DrawerBody>
            <SearchInput />

            <Box space="space-y-4" margin="my-4">
              {results}
            </Box>
          </DrawerBody>

          <DrawerFooter fullWidth>
            <Button appearance="primary">Save</Button>
            <Button onClick={onClose}>Cancel</Button>
          </DrawerFooter>
        </DrawerContent>
      </Drawer>
    </>
  );
}

function DrawerExample() {
  const { open, onOpen, onClose } = useDisclosure();
  const btnRef = React.useRef();
  const results = Array.from(Array(10)).map((_, i) => (
    <Card display="flex" flexDirection="flex-col" padding="p-3" space="space-y-3" key={i}>
      <Skeleton width="w-32" height="h-5" margin="mb-1" />
      <Skeleton height="h-2" />
      <Skeleton height="h-2" />
      <Skeleton height="h-2" />
    </Card>
  ));
  return (
    <>
      <Button ref={btnRef} appearance="primary" onClick={onOpen}>
        Open
      </Button>
      <Drawer open={open} placement="right" onClose={onClose} finalFocusRef={btnRef}>
        <DrawerOverlay />
        <DrawerContent>
          <DrawerHeader>
            <DrawerTitle>Preview</DrawerTitle>
            <DrawerCloseButton />
          </DrawerHeader>
          <DrawerBody>
            <SearchInput />
            <Box space="space-y-4" margin="my-4">
              {results}
            </Box>
          </DrawerBody>
          <DrawerFooter fullWidth>
            <Button appearance="primary">Save</Button>
            <Button onClick={onClose}>Cancel</Button>
          </DrawerFooter>
        </DrawerContent>
      </Drawer>
    </>
  );
}

Accessibility

When opening the Drawer, focus is trapped inside the Drawer.
By default, the drawer sets focus on the first focusable element. If the initialFocusRef prop is passed, the drawer sets focus on the element with the assigned ref.
After the drawer closes, it'll return focus to the element that triggered it.

Props

Drawer Props

Drawer composes the Modal component with these extra props:

Name	Type	Default	Description
`isFullHeight`	`boolean`	`false`	If `true` and `placement` is set to `top` or `bottom`, the drawer fills the height of the viewport.
`placement`	`left`, `right`, `top`, `bottom`	`right`	The ref to the initial element to receive focus when the drawer opens.

Other components

DrawerOverlay, DrawerFooter, DrawerHeader and DrawerBody composes Box component
DrawerCloseButton composes CloseButton