ComponentsModalLayer

ModalLayer

ModalLayer is a helper component intended to wrap components that are rendered inside portals inside other dialogs or popovers.

#

Documentation

#

Usage

Dialog and popover components internally use focus managers to ensure focus trapping works consistently across browsers. This works for all elements inside the DOM tree of the dialog/popover, but elements rendered via portals are not automatically tracked.

All of our components automatically handle this focus management when being rendered inside dialogs/popovers - but third party portalled components need to be manually wrapped in the ModalLayer component.

import {
  Dialog,
  DialogBody,
  DialogClose,
  DialogContent,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
  theme,
} from "@optiaxiom/react";
import ReactSelect from "react-select";
 
import { MenuPortal } from "./MenuPortal";
 
const options = [
  { label: "Chocolate", value: "chocolate" },
  { label: "Strawberry", value: "strawberry" },
  { label: "Vanilla", value: "vanilla" },
];
 
export function App() {
  return (
    <Dialog>
      <DialogTrigger>Open Dialog</DialogTrigger>
 
      <DialogContent>
        <DialogHeader>
          <DialogTitle>ModalLayer Demonstration</DialogTitle>
        </DialogHeader>
        <DialogBody>
          <ReactSelect
            components={{ MenuPortal }}
            menuPortalTarget={
              typeof document !== "undefined" ? document.body : undefined
            }
            options={options}
            styles={{
              menuPortal: (styles) => ({
                ...styles,
                zIndex: theme.zIndex.popover,
              }),
            }}
          />
        </DialogBody>
        <DialogFooter>
          <DialogClose appearance="primary">Done</DialogClose>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}

#

Props

#

ModalLayer

Renders a <div> element.

Prop

asChild

Change the default rendered element for the one passed as a child, merging their props and behavior.

Read the Composition guide for more details.

false | true

#

Changelog

#

0.7.8

  • Added component
Tooltip