Dialog Frame

LyteNyte Grid offers dialog content that displays arbitrary dialogs on demand. Each grid instance maintains its own dialog provider. Open dialogs make the rest of the page inert.

A dialog frame is a component you render in an open dialog. Register the dialog frame on the dialogFrames property of the grid state before first use.

Use the dialogFrameOpen API method to open a registered dialog frame and dialogFrameClose to close it.

TODO;

Dialog Components

LyteNyte Grid provides dialog components you can use to assemble a dialog frame. These components deliver essential functionality like dismissal on outside click and focus capturing.

Import these components with:

import { Dialog } from "@1771technologies/lytenyte-pro/dialog";

Assemble the basic structure like this:

<>
  <Dialog.Backdrop />
  <Dialog.Container>
    <Dialog.Title />
    <Dialog.Description />
    <Dialog.Close />
  </Dialog.Container>
</>

Most of these components are HTML elements enhanced for accessibility. The Dialog.Container also provides focus management properties. Use initialFocus to set which element receives focus when the dialog opens. Use finalFocus to set which element receives focus when the dialog closes.