Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@spectrum-web-components/overlay
Advanced tools
@spectrum-web-components/overlay - npm Package Compare versions
Comparing version 0.9.0 to 0.10.0
@@ -6,2 +6,14 @@ # Change Log | ||
| # [0.10.0](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/overlay@0.9.0...@spectrum-web-components/overlay@0.10.0) (2021-03-04) | ||
| ### Bug Fixes | ||
| - **overlay:** correct overlay content sizing ([d9bcd6f](https://github.com/adobe/spectrum-web-components/commit/d9bcd6fd6b4eecae297c6e5cc5330e79a9e198ff)) | ||
| - **overlay:** track "modalRoots" for expanded overlay management ([dceccb1](https://github.com/adobe/spectrum-web-components/commit/dceccb1617d54da4c0db8035954a4eb4e0367c30)) | ||
| - wait for fonts ready before positioning overlays ([cb8026a](https://github.com/adobe/spectrum-web-components/commit/cb8026a1999a4458b442673291214269fc1e1cef)) | ||
| ### Features | ||
| - use latest exports specification ([a7ecf4b](https://github.com/adobe/spectrum-web-components/commit/a7ecf4b6da7996f36a8a89f62cc2384709497008)) | ||
| # [0.9.0](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/overlay@0.8.2...@spectrum-web-components/overlay@0.9.0) (2021-02-11) | ||
@@ -8,0 +20,0 @@ |
@@ -83,2 +83,6 @@ { | ||
| { | ||
| "name": "hasModalRoot", | ||
| "type": "boolean" | ||
| }, | ||
| { | ||
| "name": "handleInlineTriggerKeydown", | ||
@@ -159,7 +163,7 @@ "type": "(event: KeyboardEvent) => void", | ||
| { | ||
| "name": "sp-open", | ||
| "name": "sp-opened", | ||
| "description": "Announces that the overlay has been opened" | ||
| }, | ||
| { | ||
| "name": "sp-close", | ||
| "name": "sp-closed", | ||
| "description": "Announces that the overlay has been closed" | ||
@@ -166,0 +170,0 @@ } |
@@ -21,3 +21,3 @@ { | ||
| ], | ||
| "version": "0.9.0", | ||
| "version": "0.10.0", | ||
| "description": "", | ||
@@ -30,3 +30,3 @@ "main": "./src/index.js", | ||
| ".": "./src/index.js", | ||
| "./src/": "./src/", | ||
| "./src/*": "./src/*", | ||
| "./custom-elements.json": "./custom-elements.json", | ||
@@ -66,9 +66,9 @@ "./package.json": "./package.json", | ||
| "@popperjs/core": "^2.2.2", | ||
| "@spectrum-web-components/action-button": "^0.3.0", | ||
| "@spectrum-web-components/base": "^0.3.3", | ||
| "@spectrum-web-components/theme": "^0.7.4", | ||
| "@spectrum-web-components/action-button": "^0.4.0", | ||
| "@spectrum-web-components/base": "^0.4.0", | ||
| "@spectrum-web-components/theme": "^0.8.0", | ||
| "popper-max-size-modifier": "^0.2.0", | ||
| "tslib": "^2.0.0" | ||
| }, | ||
| "gitHead": "975a9d6bf075d367fbc77c9b5cec4eabce66f6c0" | ||
| "gitHead": "aec24bb12d82dea387faa1e6d36dfc7620d230f7" | ||
| } |
217
README.md
| ## Description | ||
| To ensure that content the requires it (modals, menus, etc) can escape overflow rules, the z-index, et al, Spectrum Web Components provides an overlay system that is made up of three interrelated elements, `<overlay-trigger>`, `<active-overlay>`, and `<sp-theme>`. DOM that should be overlaid on _hover_ (`[slot="hover-content"]`) and _click_ (`[slot="click-content"]`) are outlined in the light DOM content of an `<overlay-trigger>`. Said content will be overlayed onto the DOM via an `<active-overlay>` element that will be appended to the `<body>`. Content delivered in this way will acquire CSS Custom Properties for `color` and `size` from the trigger's nearest ancestor `<sp-theme>`. | ||
| Overlays in Spectrum Web Components are created via the `Overlay` class system, which prepares an "overlay stack" that can manage the deployment of one or more overlays onto a page. Whether it's needed for transient content like a tooltip, for extended interactions like selecting a value from a picker, or for blocking content like a modal, the imperative APIs outlined below or the declarative APIs delivered by `<overlay-trigger>` should cover your overlay delivery needs. | ||
| Note: Cascading styles not applied via `<sp-theme>` are not currently projected along with the overlay content. To ensure that any additionoal styles for the overlaid content are applied, use the `style` attribute directly or encapsulate this content in a custom element that applies its styles via shadow DOM. | ||
| ### Usage | ||
@@ -16,76 +14,177 @@ | ||
| Import the side effectful registration of `<active-overlay>` or `<overlay-trigger>` via: | ||
| Import the `Overlay` class to leverage its capabilities within your application or custom element: | ||
| ```js | ||
| import { Overlay } from '@spectrum-web-components/overlay'; | ||
| ``` | ||
| import '@spectrum-web-components/overlay/active-overlay.js'; | ||
| import '@spectrum-web-components/overlay/overlay-trigger.js'; | ||
| Primarily, this class gives you access to the `open` method that will allow you to open an overlay: | ||
| ```js | ||
| Overlay.open( | ||
| (owner: HTMLElement), // the element to open the overlay in reference to, "trigger" | ||
| (interaction: TriggerInteractions), // the type of interaction type that opened the overlay | ||
| (overlayElement: HTMLElement), // the element that will be projected into the overlay, "content" | ||
| (options: OverlayOptions) // options to customize the overlay | ||
| ); | ||
| ``` | ||
| The default of `<overlay-trigger>` will load various dependencies asynchronously via a dynamic import. In the case that you would like to import those tranverse dependencies statically, import the side effectful registration of `<overlay-trigger>` as follows: | ||
| `Overlay.open()` is an asynchronous method that returns a function for closing the overlay, so it is common to leverage this functionality like the following: | ||
| ```js | ||
| (async () => { | ||
| const trigger = document.querySelector('#trigger'); | ||
| const interaction = 'click'; | ||
| const content = document.querySelector('#content'); | ||
| const options = { | ||
| offset: 0, | ||
| placement: 'bottom', | ||
| }; | ||
| const closeOverlay = await Overlay.open( | ||
| trigger, | ||
| interaction, | ||
| content, | ||
| options | ||
| ); | ||
| })(); | ||
| ``` | ||
| import '@spectrum-web-components/overlay/sync/overlay-trigger.js'; | ||
| ## Types | ||
| ### TriggerInteractions | ||
| This outlines the user experience that is to be delivered through the process of opening and closing an overlay. | ||
| ``` | ||
| type TriggerInteractions = | ||
| | 'click' | ||
| | 'custom', | ||
| | 'hover' | ||
| | 'inline' | ||
| | 'modal' | ||
| | 'replace'; | ||
| ``` | ||
| When looking to leverage the `ActiveOverlay` or `OverlayTrigger` base class as a type and/or for extension purposes, do so via: | ||
| `click` will open an overlay that will close immediately on the next click that is not on an element within the overlay. | ||
| `custom` is less opinionated and allows for some customization of the process from the outside. | ||
| `hover` will close the overlay as soon as the pointer leaves the trigger to which the overlay is connected. | ||
| `inline` places the overlay after the trigger but before the next element in the logical tab order. This means the `shift + tab` keyboard stroke will return to the trigger. | ||
| `modal` manages the overlay like a modal and will trap the tab order within its contents only. | ||
| `replace` will position the overlay directly in the position of the trigger in the logical tab order. This means the `shift + tab` keyboard stroke will return the focusable element immediately prior to the trigger. | ||
| ### OverlayOptions | ||
| ``` | ||
| import { | ||
| ActiveOverlay, | ||
| OverlayTrigger | ||
| } from '@spectrum-web-components/overlay'; | ||
| type OverlayOptions = { | ||
| delayed?: boolean; | ||
| placement?: Placement; | ||
| offset?: number; | ||
| receivesFocus?: 'auto'; | ||
| } | ||
| ``` | ||
| `delayed` allows for the overlay to open the overlay with warmup/cooldown behaviors as described at https://spectrum.adobe.com/page/tooltip/#Immediate-or-delayed-appearance | ||
| `placement` outlines where the overlay system should attempt to position the overlay in relation to the trigger. When the layout of the page and/or current scroll positioning prevents the successful placement of the content in this way, the `placement` will be automatically applied as the value best suited for those conditions. Placements available include: `"auto" | "auto-start" | "auto-end" | "top" | "bottom" | "right" | "left" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end" | "none"`. | ||
| `offset` defines the distance of the overlay content from the trigger, measured in pixels. | ||
| `receivesFocus` tells the overlay stack to throw focus into the overlay after it has opened. | ||
| ## Example | ||
| ```html | ||
| <style> | ||
| overlay-trigger { | ||
| flex: none; | ||
| } | ||
| <sp-button | ||
| onclick=" | ||
| const trigger = this; | ||
| const interaction = 'click'; | ||
| const content = this.nextElementSibling; | ||
| if (!content) return; | ||
| const options = { | ||
| offset: 0, | ||
| placement: 'right', | ||
| }; | ||
| content.open = true; | ||
| const closeOverlayPromise = Overlay.open( | ||
| trigger, | ||
| interaction, | ||
| content, | ||
| options | ||
| ); | ||
| setTimeout(function () { | ||
| closeOverlayPromise.then(function(close) { | ||
| close(); | ||
| content.open = false; | ||
| }); | ||
| }, 5000); | ||
| " | ||
| > | ||
| Click me for a 5 second overlay! | ||
| </sp-button> | ||
| <sp-popover> | ||
| <sp-dialog size="medium"> | ||
| <h2 slot="heading">Demo</h2> | ||
| Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod | ||
| tempor incididunt ut labore et dolore magna aliqua. Auctor augue mauris | ||
| augue neque gravida. Libero volutpat sed ornare arcu. Quisque egestas | ||
| diam in arcu cursus euismod quis viverra. Posuere ac ut consequat semper | ||
| viverra nam libero justo laoreet. Enim ut tellus elementum sagittis | ||
| vitae et leo duis ut. Neque laoreet suspendisse interdum consectetur | ||
| libero id faucibus nisl. Diam volutpat commodo sed egestas egestas. | ||
| Dolor magna eget est lorem ipsum dolor. Vitae suscipit tellus mauris a | ||
| diam maecenas sed. Turpis in eu mi bibendum neque egestas congue. | ||
| Rhoncus est pellentesque elit ullamcorper dignissim cras lobortis. | ||
| </sp-dialog> | ||
| </sp-popover> | ||
| ``` | ||
| .tooltip { | ||
| background-color: var(--spectrum-global-color-gray-800); | ||
| color: var(--spectrum-global-color-gray-50); | ||
| padding: 4px 10px; | ||
| font-size: 10px; | ||
| } | ||
| </style> | ||
| <overlay-trigger id="trigger" placement="bottom" offset="6"> | ||
| <sp-button variant="primary" slot="trigger">Button popover</sp-button> | ||
| <sp-popover dialog slot="click-content" direction="bottom" tip> | ||
| <div class="options-popover-content"> | ||
| <sp-slider | ||
| value="5" | ||
| step="0.5" | ||
| min="0" | ||
| max="20" | ||
| label="Awesomeness" | ||
| ></sp-slider> | ||
| <sp-button>Press me</sp-button> | ||
| </div> | ||
| </sp-popover> | ||
| <sp-tooltip slot="hover-content" delayed>Tooltip</sp-tooltip> | ||
| <sp-popover slot="longpress-content" tip> | ||
| <sp-action-group | ||
| selects="single" | ||
| vertical | ||
| style="margin: calc(var(--spectrum-actiongroup-button-gap-y,var(--spectrum-global-dimension-size-100)) / 2);" | ||
| > | ||
| <sp-action-button> | ||
| <sp-icon-magnify slot="icon"></sp-icon-magnify> | ||
| </sp-action-button> | ||
| <sp-action-button> | ||
| <sp-icon-magnify slot="icon"></sp-icon-magnify> | ||
| </sp-action-button> | ||
| <sp-action-button> | ||
| <sp-icon-magnify slot="icon"></sp-icon-magnify> | ||
| </sp-action-button> | ||
| </sp-action-group> | ||
| </sp-popover> | ||
| </overlay-trigger> | ||
| ## Advanced Usage | ||
| When working with the DOM-based APIs of custom elements, it is sometimes preferred to project content into an overlay from a different shadow root (eg projecting a single-slotted element into the overlay). To ensure that the content can be marshalled through any number of `<slot>` elements which are addressed into subsequent `<slot>` elements, be sure to use the `flatten: true` option when querying `slot.asignedNodes()`: | ||
| ```js | ||
| const trigger = shadowRoot.querySelector('#trigger'); | ||
| const slot = shadowRoot.querySeletor('slot'); | ||
| const interaction = 'click'; | ||
| const content = slot | ||
| .assignedNodes({ flatten: true }) | ||
| .find((node) => node instanceof HTMLElement); | ||
| const options = { | ||
| offset: 0, | ||
| placement: 'bottom', | ||
| }; | ||
| const closeOverlay = await Overlay.open(trigger, interaction, content, options); | ||
| ``` | ||
| ## Accessibility | ||
| Other times, you may want to compose content from multiple shadow roots into a single overlay. This is a pattern seen in the `<sp-dropdown>` element: its `<sp-menu>` light DOM child is wrapped by its `<sp-popover>` shadow DOM child before being projected into an overlay. What follows is a more trivial example, where content in the light DOM of an element is injected into an element in the shadow DOM of the same element and then projected into an overlay. Notice the added work here of setting a comment node into the light DOM as a placeholder for the "stolen" content, and then swapping that content back into the light DOM when the overlay is closed. | ||
| When using an `<overlay-trigger>` element, it is important to be sure the that content you project into `slot="trigger"` is "interactive". This means that an element within that branch of DOM will be able to receive focus and said element will appropriately convert keyboard interactions to `click` events similar to what you find with `<a href="#">Anchors</a>`, `<button>Buttons</button>`, etc. You can find further reading on the subject of accessible keyboard interactions at [https://www.w3.org/WAI/WCAG21/Understanding/keyboard](https://www.w3.org/WAI/WCAG21/Understanding/keyboard). | ||
| ```js | ||
| const trigger = this.shadowRoot.querySelector('#trigger'); | ||
| const outterContent = this.shadowRoot.querySelector('#outter-content'); | ||
| const innerContent = this.querySelector('#inner-content'); | ||
| const innerContentParent = | ||
| innerContent.parentElement || innerContent.getRootNode(); | ||
| const placeholder = document.createComment('placeholder for inner content'); | ||
| innerContentParent.replaceChild(placeholder, innerContent); | ||
| outterContent.append(innerContent); | ||
| const interaction = 'click'; | ||
| const options = { | ||
| offset: 0, | ||
| placement: 'bottom', | ||
| }; | ||
| const closeOverlayPromise = Overlay.open( | ||
| trigger, | ||
| interaction, | ||
| outterContent, | ||
| options | ||
| ); | ||
| const closeOverlay = function () { | ||
| closeOverlayPromise.then((close) => close()); | ||
| innerContentParent.replaceChild(placeholder, innerContent); | ||
| }; | ||
| ``` |
@@ -14,5 +14,5 @@ /* | ||
| const styles = css ` | ||
| @keyframes spOverlayFadeIn{0%{opacity:0;transform:var(--sp-overlay-from)}to{opacity:1;transform:translate(0)}}@keyframes spOverlayFadeOut{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:var(--sp-overlay-from)}}:host{z-index:1000;position:absolute;display:inline-block;pointer-events:none}:host(:focus){outline:none}:host([placement=none]) ::slotted(*){height:100vh}#contents,sp-theme{height:100%}#contents{display:inline-block;pointer-events:none;animation-duration:var(--spectrum-global-animation-duration-200,.16s);animation-timing-function:var(--spectrum-global-animation-ease-out,ease-out);opacity:1;visibility:visible}:host([data-popper-placement*=top]) #contents{--sp-overlay-from:translateY(var(--spectrum-global-dimension-size-75))}:host([data-popper-placement*=right]) #contents{--sp-overlay-from:translateX(calc(-1*var(--spectrum-global-dimension-size-75)))}:host([data-popper-placement*=bottom]) #contents{--sp-overlay-from:translateY(calc(-1*var(--spectrum-global-dimension-size-75)))}:host([data-popper-placement*=left]) #contents{--sp-overlay-from:translateX(var(--spectrum-global-dimension-size-75))}:host([animating]) ::slotted(*){pointer-events:none}#contents ::slotted(*){position:relative} | ||
| @keyframes spOverlayFadeIn{0%{opacity:0;transform:var(--sp-overlay-from)}to{opacity:1;transform:translate(0)}}@keyframes spOverlayFadeOut{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:var(--sp-overlay-from)}}:host{z-index:1000;position:absolute;display:inline-block;pointer-events:none}:host(:focus){outline:none}:host([placement=none]){top:0;left:0}:host([placement=none]) ::slotted(*){height:calc(100vh - var(--swc-body-margins-block, 0 * 1px))}#contents,sp-theme{height:100%}#contents{display:inline-block;pointer-events:none;animation-duration:var(--spectrum-global-animation-duration-200,.16s);animation-timing-function:var(--spectrum-global-animation-ease-out,ease-out);opacity:1;visibility:visible}:host([data-popper-placement*=top]) #contents{--sp-overlay-from:translateY(var(--spectrum-global-dimension-size-75))}:host([data-popper-placement*=right]) #contents{--sp-overlay-from:translateX(calc(-1*var(--spectrum-global-dimension-size-75)))}:host([data-popper-placement*=bottom]) #contents{--sp-overlay-from:translateY(calc(-1*var(--spectrum-global-dimension-size-75)))}:host([data-popper-placement*=left]) #contents{--sp-overlay-from:translateX(var(--spectrum-global-dimension-size-75))}:host([animating]) ::slotted(*){pointer-events:none}#contents ::slotted(*){position:relative} | ||
| `; | ||
| export default styles; | ||
| //# sourceMappingURL=active-overlay.css.js.map |
@@ -14,4 +14,4 @@ /* | ||
| const styles = css` | ||
| @keyframes spOverlayFadeIn{0%{opacity:0;transform:var(--sp-overlay-from)}to{opacity:1;transform:translate(0)}}@keyframes spOverlayFadeOut{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:var(--sp-overlay-from)}}:host{z-index:1000;position:absolute;display:inline-block;pointer-events:none}:host(:focus){outline:none}:host([placement=none]) ::slotted(*){height:100vh}#contents,sp-theme{height:100%}#contents{display:inline-block;pointer-events:none;animation-duration:var(--spectrum-global-animation-duration-200,.16s);animation-timing-function:var(--spectrum-global-animation-ease-out,ease-out);opacity:1;visibility:visible}:host([data-popper-placement*=top]) #contents{--sp-overlay-from:translateY(var(--spectrum-global-dimension-size-75))}:host([data-popper-placement*=right]) #contents{--sp-overlay-from:translateX(calc(-1*var(--spectrum-global-dimension-size-75)))}:host([data-popper-placement*=bottom]) #contents{--sp-overlay-from:translateY(calc(-1*var(--spectrum-global-dimension-size-75)))}:host([data-popper-placement*=left]) #contents{--sp-overlay-from:translateX(var(--spectrum-global-dimension-size-75))}:host([animating]) ::slotted(*){pointer-events:none}#contents ::slotted(*){position:relative} | ||
| @keyframes spOverlayFadeIn{0%{opacity:0;transform:var(--sp-overlay-from)}to{opacity:1;transform:translate(0)}}@keyframes spOverlayFadeOut{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:var(--sp-overlay-from)}}:host{z-index:1000;position:absolute;display:inline-block;pointer-events:none}:host(:focus){outline:none}:host([placement=none]){top:0;left:0}:host([placement=none]) ::slotted(*){height:calc(100vh - var(--swc-body-margins-block, 0 * 1px))}#contents,sp-theme{height:100%}#contents{display:inline-block;pointer-events:none;animation-duration:var(--spectrum-global-animation-duration-200,.16s);animation-timing-function:var(--spectrum-global-animation-ease-out,ease-out);opacity:1;visibility:visible}:host([data-popper-placement*=top]) #contents{--sp-overlay-from:translateY(var(--spectrum-global-dimension-size-75))}:host([data-popper-placement*=right]) #contents{--sp-overlay-from:translateX(calc(-1*var(--spectrum-global-dimension-size-75)))}:host([data-popper-placement*=bottom]) #contents{--sp-overlay-from:translateY(calc(-1*var(--spectrum-global-dimension-size-75)))}:host([data-popper-placement*=left]) #contents{--sp-overlay-from:translateX(var(--spectrum-global-dimension-size-75))}:host([animating]) ::slotted(*){pointer-events:none}#contents ::slotted(*){position:relative} | ||
| `; | ||
| export default styles; |
@@ -12,2 +12,9 @@ import { CSSResultArray, PropertyValues, SpectrumElement, TemplateResult } from '@spectrum-web-components/base'; | ||
| } | ||
| declare global { | ||
| interface Document { | ||
| fonts?: { | ||
| ready: Promise<void>; | ||
| }; | ||
| } | ||
| } | ||
| declare type OverlayStateType = 'idle' | 'active' | 'visible' | 'hiding' | 'dispose' | 'disposed'; | ||
@@ -46,4 +53,6 @@ declare type ContentAnimation = 'spOverlayFadeIn' | 'spOverlayFadeOut'; | ||
| constructor(); | ||
| private _modalRoot?; | ||
| get hasModalRoot(): boolean; | ||
| feature(): void; | ||
| obscure(): void; | ||
| obscure(nextOverlayInteraction: TriggerInteractions): ActiveOverlay | undefined; | ||
| firstUpdated(changedProperties: PropertyValues): void; | ||
@@ -50,0 +59,0 @@ private updateOverlayPopperPlacement; |
@@ -122,12 +122,32 @@ /* | ||
| } | ||
| get hasModalRoot() { | ||
| return !!this._modalRoot; | ||
| } | ||
| feature() { | ||
| this.tabIndex = 0; | ||
| if (this.interaction === 'modal') { | ||
| const parentOverlay = this.trigger.closest('active-overlay'); | ||
| const parentIsModal = parentOverlay && parentOverlay.slot === 'open'; | ||
| // If an overlay it triggered from within a "modal" overlay, it needs to continue | ||
| // to act like one to get treated correctly in regards to tab trapping. | ||
| if (this.interaction === 'modal' || parentIsModal || this._modalRoot) { | ||
| this.slot = 'open'; | ||
| // If this isn't a modal root, walk up the overlays to the next modal root | ||
| // and "feature" each on of the intervening overlays. | ||
| if (this._modalRoot) { | ||
| parentOverlay === null || parentOverlay === void 0 ? void 0 : parentOverlay.feature(); | ||
| } | ||
| } | ||
| } | ||
| obscure() { | ||
| if (this.interaction === 'modal') { | ||
| obscure(nextOverlayInteraction) { | ||
| if (this.slot && nextOverlayInteraction === 'modal') { | ||
| this.removeAttribute('slot'); | ||
| // Obscure upto and including the next modal root. | ||
| if (this.interaction !== 'modal') { | ||
| const parentOverlay = this.trigger.closest('active-overlay'); | ||
| this._modalRoot = parentOverlay === null || parentOverlay === void 0 ? void 0 : parentOverlay.obscure(nextOverlayInteraction); | ||
| return this._modalRoot; | ||
| } | ||
| return this; | ||
| } | ||
| return undefined; | ||
| } | ||
@@ -281,2 +301,3 @@ firstUpdated(changedProperties) { | ||
| if (this.popper) { | ||
| await (document.fonts ? document.fonts.ready : Promise.resolve()); | ||
| await this.popper.update(); | ||
@@ -283,0 +304,0 @@ } |
@@ -40,2 +40,10 @@ /* | ||
| declare global { | ||
| interface Document { | ||
| fonts?: { | ||
| ready: Promise<void>; | ||
| }; | ||
| } | ||
| } | ||
| type OverlayStateType = | ||
@@ -194,13 +202,40 @@ | 'idle' | ||
| private _modalRoot?: ActiveOverlay; | ||
| public get hasModalRoot(): boolean { | ||
| return !!this._modalRoot; | ||
| } | ||
| public feature(): void { | ||
| this.tabIndex = 0; | ||
| if (this.interaction === 'modal') { | ||
| const parentOverlay = this.trigger.closest('active-overlay'); | ||
| const parentIsModal = parentOverlay && parentOverlay.slot === 'open'; | ||
| // If an overlay it triggered from within a "modal" overlay, it needs to continue | ||
| // to act like one to get treated correctly in regards to tab trapping. | ||
| if (this.interaction === 'modal' || parentIsModal || this._modalRoot) { | ||
| this.slot = 'open'; | ||
| // If this isn't a modal root, walk up the overlays to the next modal root | ||
| // and "feature" each on of the intervening overlays. | ||
| if (this._modalRoot) { | ||
| parentOverlay?.feature(); | ||
| } | ||
| } | ||
| } | ||
| public obscure(): void { | ||
| if (this.interaction === 'modal') { | ||
| public obscure( | ||
| nextOverlayInteraction: TriggerInteractions | ||
| ): ActiveOverlay | undefined { | ||
| if (this.slot && nextOverlayInteraction === 'modal') { | ||
| this.removeAttribute('slot'); | ||
| // Obscure upto and including the next modal root. | ||
| if (this.interaction !== 'modal') { | ||
| const parentOverlay = this.trigger.closest('active-overlay'); | ||
| this._modalRoot = parentOverlay?.obscure( | ||
| nextOverlayInteraction | ||
| ); | ||
| return this._modalRoot; | ||
| } | ||
| return this; | ||
| } | ||
| return undefined; | ||
| } | ||
@@ -397,2 +432,3 @@ | ||
| if (this.popper) { | ||
| await (document.fonts ? document.fonts.ready : Promise.resolve()); | ||
| await this.popper.update(); | ||
@@ -399,0 +435,0 @@ } |
@@ -95,5 +95,5 @@ /* | ||
| position: relative; | ||
| height: 100%; | ||
| height: calc(100% - var(--swc-body-margins-block, 0px)); | ||
| z-index: 0; | ||
| min-height: 100vh; | ||
| min-height: calc(100vh - var(--swc-body-margins-block, 0px)); | ||
| } | ||
@@ -139,2 +139,7 @@ #holder { | ||
| this.overlayHolder.hidden = false; | ||
| requestAnimationFrame(() => { | ||
| const bodyStyles = getComputedStyle(document.body); | ||
| this.tabTrapper.style.setProperty('--swc-body-margins-inline', `calc(${bodyStyles.marginLeft} + ${bodyStyles.marginRight})`); | ||
| this.tabTrapper.style.setProperty('--swc-body-margins-block', `calc(${bodyStyles.marginTop} + ${bodyStyles.marginBottom})`); | ||
| }); | ||
| } | ||
@@ -199,7 +204,7 @@ stopTabTrapping() { | ||
| } | ||
| const activeOverlay = ActiveOverlay.create(details); | ||
| if (this.overlays.length) { | ||
| const topOverlay = this.overlays[this.overlays.length - 1]; | ||
| topOverlay.obscure(); | ||
| topOverlay.obscure(activeOverlay.interaction); | ||
| } | ||
| const activeOverlay = ActiveOverlay.create(details); | ||
| document.body.appendChild(activeOverlay); | ||
@@ -313,3 +318,4 @@ /** | ||
| topOverlay.feature(); | ||
| if (topOverlay.interaction === 'modal') { | ||
| if (topOverlay.interaction === 'modal' || | ||
| topOverlay.hasModalRoot) { | ||
| topOverlay.focus(); | ||
@@ -316,0 +322,0 @@ } |
@@ -60,5 +60,5 @@ /* | ||
| position: relative; | ||
| height: 100%; | ||
| height: calc(100% - var(--swc-body-margins-block, 0px)); | ||
| z-index: 0; | ||
| min-height: 100vh; | ||
| min-height: calc(100vh - var(--swc-body-margins-block, 0px)); | ||
| } | ||
@@ -105,2 +105,13 @@ #holder { | ||
| this.overlayHolder.hidden = false; | ||
| requestAnimationFrame(() => { | ||
| const bodyStyles = getComputedStyle(document.body); | ||
| this.tabTrapper.style.setProperty( | ||
| '--swc-body-margins-inline', | ||
| `calc(${bodyStyles.marginLeft} + ${bodyStyles.marginRight})` | ||
| ); | ||
| this.tabTrapper.style.setProperty( | ||
| '--swc-body-margins-block', | ||
| `calc(${bodyStyles.marginTop} + ${bodyStyles.marginBottom})` | ||
| ); | ||
| }); | ||
| } | ||
@@ -181,8 +192,9 @@ | ||
| const activeOverlay = ActiveOverlay.create(details); | ||
| if (this.overlays.length) { | ||
| const topOverlay = this.overlays[this.overlays.length - 1]; | ||
| topOverlay.obscure(); | ||
| topOverlay.obscure(activeOverlay.interaction); | ||
| } | ||
| const activeOverlay = ActiveOverlay.create(details); | ||
| document.body.appendChild(activeOverlay); | ||
@@ -346,3 +358,6 @@ | ||
| topOverlay.feature(); | ||
| if (topOverlay.interaction === 'modal') { | ||
| if ( | ||
| topOverlay.interaction === 'modal' || | ||
| topOverlay.hasModalRoot | ||
| ) { | ||
| topOverlay.focus(); | ||
@@ -349,0 +364,0 @@ } else { |
@@ -12,4 +12,4 @@ import { LitElement, CSSResultArray, TemplateResult, PropertyValues } from '@spectrum-web-components/base'; | ||
| * | ||
| * @fires sp-open - Announces that the overlay has been opened | ||
| * @fires sp-close - Announces that the overlay has been closed | ||
| * @fires sp-opened - Announces that the overlay has been opened | ||
| * @fires sp-closed - Announces that the overlay has been closed | ||
| */ | ||
@@ -16,0 +16,0 @@ export declare class OverlayTrigger extends LitElement { |
@@ -25,4 +25,4 @@ /* | ||
| * | ||
| * @fires sp-open - Announces that the overlay has been opened | ||
| * @fires sp-close - Announces that the overlay has been closed | ||
| * @fires sp-opened - Announces that the overlay has been opened | ||
| * @fires sp-closed - Announces that the overlay has been closed | ||
| */ | ||
@@ -29,0 +29,0 @@ export class OverlayTrigger extends LitElement { |
@@ -40,4 +40,4 @@ /* | ||
| * | ||
| * @fires sp-open - Announces that the overlay has been opened | ||
| * @fires sp-close - Announces that the overlay has been closed | ||
| * @fires sp-opened - Announces that the overlay has been opened | ||
| * @fires sp-closed - Announces that the overlay has been closed | ||
| */ | ||
@@ -44,0 +44,0 @@ export class OverlayTrigger extends LitElement { |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by4.91%
270434
- Lines of code
- increased by2.72%
3548
- Number of lines in readme file
- increased by108.79%
190
Dependency changes
+ Added@spectrum-web-components/action-button@0.4.7(transitive)
+ Added@spectrum-web-components/base@0.4.6(transitive)
+ Added@spectrum-web-components/button@0.13.7(transitive)
+ Added@spectrum-web-components/icon@0.9.11(transitive)
+ Added@spectrum-web-components/icons-ui@0.6.11(transitive)
+ Added@spectrum-web-components/iconset@0.5.8(transitive)
+ Added@spectrum-web-components/shared@0.12.11(transitive)
+ Added@spectrum-web-components/styles@0.10.1(transitive)
+ Added@spectrum-web-components/theme@0.8.16(transitive)
- Removed@spectrum-web-components/action-button@0.3.0(transitive)
- Removed@spectrum-web-components/base@0.3.3(transitive)
- Removed@spectrum-web-components/button@0.12.0(transitive)
- Removed@spectrum-web-components/icon@0.8.3(transitive)
- Removed@spectrum-web-components/icons-ui@0.5.3(transitive)
- Removed@spectrum-web-components/iconset@0.4.3(transitive)
- Removed@spectrum-web-components/shared@0.10.0(transitive)
- Removed@spectrum-web-components/styles@0.8.1(transitive)
- Removed@spectrum-web-components/theme@0.7.4(transitive)