Overlay

The Overlay component is the base for building interactions like Modal and Drawer. It contains all the core features necessary for a great experience.

Auto-Focusing
Focus Trapping
Render in-Place or in-Portal.
Press Esc to dismiss
Click on the backdrop to dismiss
Animations

Important: You must have a focusable element inside of the Overlay.

Examples

Usage

Edit this demo

<Button
  {{on "click" this.toggle}}
>
  Open Overlay
</Button>

<Overlay
  @isOpen={{this.isOpen}}
  @onClose={{this.toggle}}
  as |m|
>
  <div class="bg-white p-8">
    <p>Some contents...</p>
    <p>Some contents...</p>
    <p>Some contents...</p>
    <Button {{on "click" this.toggle}}>Close</Button>
  </div>
</Overlay>

Note on Overlays and other portal elements

FormSelect uses Power Select under the hood and has @renderInPlace={{false}} set by default, which will insert the content of the drop-down outside of the Overlay (or Drawer or Modal) and because of that focus-trap will prevent accessing focusable elements (search input) in said Power Select. To solve this you have following options:

<Overlay @disableFocusTrap={{true}} /> (not recommended)
<FormSelect @renderInPlace={{true}} /> (recommended)

API

Arg	Type	Description	Required	Default
`isOpen`	`boolean`	Whether it is open or not	Yes	-
`backdropTransitionName`	`string`	The name of the transition to be used in the backdrop.	-	`'overlay-transition--fade'`
`closeOnEscapeKey`	`boolean`	Whether to close when the escape key is pressed	-	`true`
`closeOnOutsideClick`	`boolean`	Whether to close when the area outside (the backdrop) is clicked	-	`true`
`contentTransitionName`	`string`	The name of the transition to be used in the content.	-	`'overlay-transition--fade'`
`destinationElementId`	`string`	The destination where the overlay will be inserted, defaults to `document.body`	-	`undefined`
`didClose`	`() => void`	A function that will be called when closing is finished executing, this includes waiting for animations/transitions to finish.	-	-
`disableBackdrop`	`boolean`	Whether to hide the backdrop or not	-	`false`
`disableFocusTrap`	`boolean`	Whether the focus trap is disabled or not	-	`false`
`disableTransitions`	`boolean`	Disable css transitions	-	`false`
`focusTrapOptions`	`unknown`	Focus trap options	-	`{ allowOutsideClick: true }`
`onClose`	`() => void`	A function that will be called when closed	-	-
`onOpen`	`() => void`	A function that will be called when opened	-	-
`renderInPlace`	`boolean`	Whether to render in place or in the specified/default destination	-	`false`
`transitionDuration`	`number`	Duration of the animation	-	`200`