@spectrum-web-components/overlay 0.31.1-react.3 → 0.32.1-overlay.33

package/README.md

@@ -1,6 +1,6 @@
 ## Description
 
-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.
+An `<sp-overlay>` element is used to decorate content that you would like to present to your visitors as "overlaid" on the rest of the application. This includes dialogs (modal and not), pickers, tooltips, context menus, et al.
 
 ### Usage
 
@@ -11,190 +11,154 @@ Overlays in Spectrum Web Components are created via the `Overlay` class system,
 yarn add @spectrum-web-components/overlay
 ```
 
-Import the `Overlay` class to leverage its capabilities within your application or custom element:
+Import the side effectful registration of `<sp-overlay>` as follows:
 
-```js
-import { Overlay } from '@spectrum-web-components/overlay';
+```
+import '@spectrum-web-components/overlay/sp-overlay.js';
 ```
 
-Primarily, this class gives you access to the `open` method that will allow you to open an overlay:
+When looking to leverage the `Overlay` base class as a type and/or for extension purposes, do so via:
 
-```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
-);
 ```
-
-`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 {
+    Overlay
+} from '@spectrum-web-components/overlay';
 ```
 
-## Types
-
-### TriggerInteractions
-
-This outlines the user experience that is to be delivered through the process of opening and closing an overlay.
+## Example
 
+```html
+<sp-button id="trigger">Overlay Trigger</sp-button>
+<sp-overlay trigger="trigger@click">
+    <sp-popover>
+        <sp-dialog>
+            <h2 slot="heading">Clicking opens this popover...</h2>
+            <p>But, it really could be anything. Really.</p>
+        </sp-dialog>
+    </sp-popover>
+</sp-overlay>
 ```
-type TriggerInteractions =
-    | 'click'
-    | 'custom',
-    | 'hover'
-    | 'inline'
-    | 'modal'
-    | 'replace';
-```
-
-`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.
+## API
 
-`hover` will close the overlay as soon as the pointer leaves the trigger to which the overlay is connected.
+```html
+open delayed offset="Number | [Number, Number]" placement=${placement}
+received-focus=${‘true’ | ‘false’ | ‘auto’ (default)} trigger=${idOfTrigger AND
+${string}@${string}} .triggerElement(s)=${trigger Element by reference} // match
+naming to aria element reference spec .triggerInteraction=${ ‘click’ |
+‘longpress’ | ‘hover’ } type=${type}
+```
 
-`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.
+## Fallback support
 
-`modal` manages the overlay like a modal and will trap the tab order within its contents only.
+While the [`<dialog>` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog) is widely supported by browsers, the [`popover` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/popover) is still quite new. When leveraged in browsers that do not yet support the `popover` attribute, there may be additional intervention required to ensure your content is delivered to your visitors as expected.
 
-`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.
+### Complex layered
 
-### OverlayOptions
+When an overlay is places within a page with complex layering, it is possible for the content therein to fall behind other content in the `z-index` stack. The following example is somewhat contrived, but image a toolbar next to properties panel. If the toolbar has a lower `z-index` and the properties panel, any overlaid content (tooltips, etc.) within that toolbar will display underneath any content in the properties panel with which it may share pixels.
 
+```html
+<div class="complex-layered-demo">
+    <div class="complex-layered-holder">
+        <sp-action-button id="complex-layered">Trigger</sp-action-button>
+        <sp-overlay trigger="complex-layered@hover" placement="bottom-start">
+            <sp-tooltip>
+                I can be partially blocked when [popover] is not available
+            </sp-tooltip>
+        </sp-overlay>
+    </div>
+    <div class="complex-layered-blocker"></div>
+</div>
+<style>
+    .complex-layered-demo {
+        position: relative;
+    }
+    .complex-layered-holder {
+        z-index: 1;
+        position: relative;
+    }
+    .complex-layered-blocker {
+        position: relative;
+        z-index: 10;
+        background: white;
+        width: 100%;
+        height: 40px;
+    }
+</style>
 ```
-type OverlayOptions = {
-    delayed?: boolean;
-    placement?: Placement;
-    offset?: number;
-    receivesFocus?: 'auto';
-    notImmediatelyClosable?: boolean;
-}
-```
-
-`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.
+Properly managed `z-index` values will support working around this issue while browsers work to adopt the `popover` attribute. In this demo, you can easily achieve the same output but sharing one `z-index` between the various pieces of content, removing `z-index` values all together, or raising the `.complex-layered-holder` element to a higher `z-index` than the `.complex-layered-blocker` element.
 
-`receivesFocus` tells the overlay stack to throw focus into the overlay after it has opened.
+### Contained
 
-`notImmediatelyClosable` prevents immediate clicks from closing the overlay. If you find that a trigger event is immediately overridden with a subsequent click (for instance, a `focus` trigger that should be closed on `click`), set `notImmediatelyClosable: true` to disregard clicks that coincide with the opening trigger.
+[CSS Containment](https://developer.mozilla.org/en-US/docs/Web/CSS/contain) allows a developer direct control on how the internals of one element effect the paint and layout of the internals of other elements on the same page. While leveraging some of its values can offer performance gains, they can interupt the delivery of your overlaid content.
 
-### Events
+```html
+<div class="contained-demo">
+    <sp-action-button id="contained">Trigger</sp-action-button>
+    <sp-overlay trigger="contained@hover" placement="bottom-start">
+        <sp-tooltip>
+            I can be blocked when [popover] is not available
+        </sp-tooltip>
+    </sp-overlay>
+</div>
+<style>
+    .contained-demo {
+        contain: content;
+    }
+</style>
+```
 
-The work to both open and close an overlay is asynchronous. This asynchrony is surfaced into the application via DOM events dispatched from the `trigger` element of your overlay. An `sp-opened` event will be dispatched once the overlay has finished opening, and an `sp-closed` event will be dispatched once the overlay has finished closing. In both cases, the dispatched event will include a `detail` property with an `interaction: TriggerInteractions` key to support associating the event/overlay with its originating `interaction`.
-
-## Example
+This situation is a little more complex to handle, if you are not OK with simply removing the `contain` value. In the case that you would like to continue to leverage `contain` is to place "contained" content separately from your overlaid content, like so:
 
 ```html
-<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>
+<div class="contained-demo">
+    <sp-action-button id="contained-working">Trigger</sp-action-button>
+</div>
+<sp-overlay trigger="contained-working@hover" placement="bottom-start">
+    <sp-tooltip>I can be blocked when [popover] is not available</sp-tooltip>
+</sp-overlay>
+<style>
+    .contained-demo {
+        contain: content;
+    }
+</style>
 ```
 
-## Styling
-
-When an overlay is opened from within a styled DOM scope as created by an `<sp-theme>` element, this scope will be resolved and recreated with in the `<active-overlay>` element that is created to host the overlaid content directly in the `<body>`. By default, the generated `<sp-theme>` element will be supplied with settings of the scope from which the overlay is triggered, including any "app" centric CSS Custom Properties that might be applied via `Theme.registerThemeFragment('app', 'app', themeFragment)` therein. In the case that you have set CSS Custom Properties for the scope created by an `<sp-theme>` element via other methods, you can specify that those values should also be applied to overlay content using the `theme` part on the `<active-overlay>` element via the `active-overlay::part(theme) { /* styles */ }` selector.
+`<sp-overlay>` accepts an ID reference via the `trigger` attribute in order to relate it to interactions and positioning in the DOM. To fulfill this reference the two elements need to be in the same DOM tree. However, `<sp-overlay>` alternatively accepts a `triggerElement` _property_ that opens even more flexibility in addressing this situation.
 
-## Advanced Usage
+### Clip pathed
 
-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()`:
+While not offering the same performance opportunities as `contain`, `clip-path` can also restrict how content in an element is surfaced at paint time. When overlaid content should display outside of the `clip-path`, without the `popover` attribute that content could be _clipped_.
 
-```js
-const trigger = shadowRoot.querySelector('#trigger');
-const slot = shadowRoot.querySelector('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);
+```html
+<div class="clip-pathed-demo">
+    <sp-action-button id="clip-pathed">Trigger</sp-action-button>
+    <sp-overlay trigger="clip-pathed@hover" placement="bottom-start">
+        <sp-tooltip>
+            I can be blocked when [popover] is not available
+        </sp-tooltip>
+    </sp-overlay>
+</div>
+<style>
+    .clip-pathed-demo {
+        clip-path: inset(0 0);
+    }
+</style>
 ```
 
-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.
-
-```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);
-};
+Here, again, working with your content needs (whether you actually want to leverage `clip-path`) or DOM structure (not colocating clipped and non-clipped content) will allow you to avoid this issue:
+
+```html
+<div class="clip-pathed-demo">
+    <sp-action-button id="clip-pathed-working">Trigger</sp-action-button>
+</div>
+<sp-overlay trigger="clip-pathed-working@hover" placement="bottom-start">
+    <sp-tooltip>I can be blocked when [popover] is not available</sp-tooltip>
+</sp-overlay>
+<style>
+    .clip-pathed-demo {
+        clip-path: inset(0 0);
+    }
+</style>
 ```