fix(overlays): hide local overlay on ESC (#1500)

* fix(overlays): hide local overlay on ESC
This commit is contained in:
gerjanvangeest 2021-09-21 17:29:52 +02:00 committed by GitHub
parent bb82f8b82b
commit 6e86fb4eab
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 31 additions and 0 deletions

View file

@ -0,0 +1,5 @@
---
'@lion/overlays': minor
---
Hide local overlays on ESC

View file

@ -156,6 +156,30 @@ export const hidesOnEsc = () => {
};
```
## hidesOnOutsideEsc
Boolean property. When enabled allows closing the overlay on ESC key, even when contentNode has no focus.
```js preview-story
export const hidesOnOutsideEsc = () => {
const hidesOnEscConfig = { hidesOnOutsideEsc: true };
return html`
<demo-overlay-system .config=${hidesOnEscConfig}>
<button slot="invoker">Click me to open the overlay!</button>
<div slot="content" class="demo-overlay">
Hello! You can close this notification here:
<button
class="close-button"
@click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}
>
</button>
</div>
</demo-overlay-system>
`;
};
```
## hidesOnOutsideClick
Boolean property. Will allow closing the overlay by clicking outside the `contentNode`.

View file

@ -7,6 +7,8 @@ export const withDropdownConfig = () =>
placementMode: 'local',
inheritsReferenceWidth: 'min',
hidesOnOutsideClick: true,
hidesOnOutsideEsc: true,
hidesOnEsc: true,
popperConfig: {
placement: 'bottom-start',
modifiers: [