drawer.md

Drawer

Drawer component that controls visibility of a section of content by following the WAI-ARIA Dialog(Modal) Pattern for it's keyboard interaction & accessibility properties.

Table of Contents

• Usage
• Composition
• Props
  • DrawerOptions

Usage

import * as React from "react";
import { Button, DialogDismiss, DialogHeading, useDialogState } from "ariakit";

import { Drawer } from "@adaptui/react";

export const DrawerBasic = props => {
  const dialog = useDialogState({ animated: true, ...props });

  return (
    <>
      <Button onClick={dialog.toggle} className="button">
        View details
      </Button>
      <Drawer
        state={dialog}
        className="dialog"
        backdropProps={{ className: "backdrop" }}
      >
        <header className="header">
          <DialogHeading className="heading">Apples</DialogHeading>
          <DialogDismiss className="button dismiss" />
        </header>
        <ul>
          <li>
            <strong>Calories:</strong> 95
          </li>
          <li>
            <strong>Carbs:</strong> 25 grams
          </li>
          <li>
            <strong>Fibers:</strong> 4 grams
          </li>
          <li>
            <strong>Vitamin C:</strong> 14% of the Reference Daily Intake (RDI)
          </li>
          <li>
            <strong>Potassium:</strong> 6% of the RDI
          </li>
          <li>
            <strong>Vitamin K:</strong> 5% of the RDI
          </li>
        </ul>
      </Drawer>
    </>
  );
};

export default DrawerBasic;

Composition

• Drawer uses useDialog

Props

DrawerOptions

Name	Type	Description
state	DisclosureState	Object returned by the useDialogState hook.
placement	"left" | "right" | "top" | "bottom" | undefined	Direction to place the drawer.

DialogOptions props

> These props are returned by the other props You can also provide these props.

Name	Type	Description
disabled	boolean | undefined	Determines whether the focusable element is disabled. If the focusableelement doesn't support the native disabled attribute, thearia-disabled attribute will be used instead.
autoFocus	boolean | undefined	Automatically focus the element when it is mounted. It works similarly tothe native autoFocus prop, but solves an issue where the element isgiven focus before React effects can run.
focusable	boolean | undefined	Whether the element should be focusable.
accessibleWhenDisabled	boolean | undefined	Determines whether the element should be focusable even when it isdisabled.This is important when discoverability is a concern. For example:> A toolbar in an editor contains a set of special smart paste functionsthat are disabled when the clipboard is empty or when the function is notapplicable to the current content of the clipboard. It could be helpful tokeep the disabled buttons focusable if the ability to discover theirfunctionality is primarily via their presence on the toolbar.Learn more on Focusability of disabledcontrols.
onFocusVisible	((event: SyntheticEvent<Element, Event>) => voi...	Custom event handler that is called when the element is focused via thekeyboard or when a key is pressed while the element is focused.
preserveTabOrder	boolean | undefined	When enabled, preserveTabOrder will keep the DOM element's tab order thesame as the order in which the Portal component was mounted in the Reacttree.
portalRef	((instance: HTMLElement | null) => void) | Muta...	portalRef is similar to ref but is scoped to the portal node. It'suseful when you need to be informed when the portal element is appended tothe DOM or removed from the DOM.
portal	boolean | undefined	Determines whether the element should be rendered as a React Portal.
portalElement	HTMLElement | ((element: HTMLElement) => HTMLEl...	An HTML element or a memoized callback function that returns an HTMLelement to be used as the portal element. By default, the portal elementwill be a div element appended to the document.body.
modal	boolean | undefined	Determines whether the dialog is modal. Modal dialogs have distinctstates and behaviors: - The portal, backdrop and preventBodyScroll props are set to true. They can still be manually set to false. - A visually hidden dismiss button will be rendered if the DialogDismiss component hasn't been used. This allows screen reader users to close the dialog. - The focus will be trapped within the dialog. - When the dialog is open, the elements outside of the dialog will be hidden to assistive technology users using the aria-hidden attribute. - When using the Heading or DialogHeading components within the dialog, their level will be reset so they start with h1.
backdrop	boolean | ElementType<Pick<DetailedHTMLProps<HT...	Determines whether there will be a backdrop behind the dialog. On modaldialogs, this is true by default. Besides a boolean, this prop canalso be a React component that will be rendered as the backdrop.
backdropProps	Omit<DisclosureContentProps<"div">, "state"> | ...	Props that will be passed to the backdrop element if backdrop istrue.
hideOnEscape	BooleanOrCallback<KeyboardEvent | React.Keyboar...	Determines whether the dialog will be hidden when the user presses theEscape key.
hideOnInteractOutside	BooleanOrCallback<Event | SyntheticEvent<Elemen...	Determines whether the dialog will be hidden when the user clicks orfocus on an element outside of the dialog.
preventBodyScroll	boolean | undefined	Determines whether the body scrolling will be prevented when the dialogis shown.
autoFocusOnShow	BooleanOrCallback<HTMLElement> | undefined	Determines whether an element inside the dialog will receive focus whenthe dialog is shown. By default, this is usually the first tabbableelement in the dialog or the dialog itself. The initialFocusRef propcan be used to set a different element to receive focus.
autoFocusOnHide	BooleanOrCallback<HTMLElement> | undefined	Determines whether an element outside of the dialog will be focused whenthe dialog is hidden if another element hasn't been focused in the actionof hiding the dialog (for example, by clicking or tabbing into anothertabbable element outside of the dialog). By default, this is usually thedisclosure element. The finalFocusRef prop can be used to define adifferent element to be focused.
initialFocusRef	RefObject<HTMLElement> | undefined	Determines which element will receive focus when the dialog is shown.This has no effect if autoFocusOnShow is false. If not set, the firsttabbable element inside the dialog or the dialog itself will receivefocus.
finalFocusRef	RefObject<HTMLElement> | undefined	Determines which element will receive focus when the dialog is hidden ifanother element hasn't been focused in the action of hiding the dialog(for example, by clicking or tabbing into another tabbable elementoutside of the dialog). This has no effect if autoFocusOnHide isfalse. If not set, the disclosure element will be used.