fix(overlays): hide local overlay on ESC (#1500)
* fix(overlays): hide local overlay on ESC
This commit is contained in:
parent
bb82f8b82b
commit
6e86fb4eab
3 changed files with 31 additions and 0 deletions
5
.changeset/early-badgers-smell.md
Normal file
5
.changeset/early-badgers-smell.md
Normal file
|
|
@ -0,0 +1,5 @@
|
||||||
|
---
|
||||||
|
'@lion/overlays': minor
|
||||||
|
---
|
||||||
|
|
||||||
|
Hide local overlays on ESC
|
||||||
|
|
@ -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
|
## hidesOnOutsideClick
|
||||||
|
|
||||||
Boolean property. Will allow closing the overlay by clicking outside the `contentNode`.
|
Boolean property. Will allow closing the overlay by clicking outside the `contentNode`.
|
||||||
|
|
|
||||||
|
|
@ -7,6 +7,8 @@ export const withDropdownConfig = () =>
|
||||||
placementMode: 'local',
|
placementMode: 'local',
|
||||||
inheritsReferenceWidth: 'min',
|
inheritsReferenceWidth: 'min',
|
||||||
hidesOnOutsideClick: true,
|
hidesOnOutsideClick: true,
|
||||||
|
hidesOnOutsideEsc: true,
|
||||||
|
hidesOnEsc: true,
|
||||||
popperConfig: {
|
popperConfig: {
|
||||||
placement: 'bottom-start',
|
placement: 'bottom-start',
|
||||||
modifiers: [
|
modifiers: [
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue