fix: constrain overlay to available window size

packages/overlay/package.json

@@ -46,6 +46,7 @@
     "dependencies": {
         "@popperjs/core": "^2.2.2",
         "@spectrum-web-components/theme": "^0.4.0",
+        "popper-max-size-modifier": "^0.2.0",
         "tslib": "^1.10.0"
     }
 }

packages/overlay/src/active-overlay.css

@@ -41,6 +41,11 @@ governing permissions and limitations under the License.
     pointer-events: none;
 }
 
+sp-theme,
+#contents {
+    height: 100%;
+}
+
 #contents {
     display: inline-block;
     pointer-events: none;
@@ -70,10 +75,10 @@ governing permissions and limitations under the License.
     --sp-overlay-from: translateX(var(--spectrum-global-dimension-size-75));
 }
 
-::slotted(*) {
-    position: relative;
-}
-
 :host([animating]) ::slotted(*) {
     pointer-events: none;
 }
+
+#contents ::slotted(*) {
+    position: relative;
+}

packages/overlay/src/active-overlay.ts

@@ -10,7 +10,7 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import { createPopper, Instance } from './popper';
+import { createPopper, Instance, maxSize, applyMaxSize } from './popper';
 import {
     Placement,
     OverlayOpenDetail,
@@ -182,6 +182,8 @@ export class ActiveOverlay extends LitElement {
             this.popper = createPopper(this.trigger, this, {
                 placement: this.placement,
                 modifiers: [
+                    maxSize,
+                    applyMaxSize,
                     {
                         name: 'arrow',
                         options: {

packages/overlay/src/apply-max-size.ts

@@ -0,0 +1,59 @@
+/*
+Copyright 2020 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+
+const appliedSizeDefaults = new WeakMap();
+
+export const applyMaxSize = {
+    name: 'applyMaxSize',
+    enabled: true,
+    phase: 'beforeWrite',
+    requires: ['maxSize'],
+    fn({
+        state,
+    }: {
+        state: {
+            modifiersData: {
+                maxSize: {
+                    height: number;
+                };
+            };
+            elements: {
+                popper: HTMLElement;
+            };
+            rects: {
+                popper: {
+                    height: number;
+                };
+            };
+            styles: {
+                popper: {
+                    maxHeight: string;
+                    height: string;
+                    overflow: string;
+                };
+            };
+        };
+    }) {
+        const { height: maxHeight } = state.modifiersData.maxSize;
+        if (!appliedSizeDefaults.has(state.elements.popper)) {
+            appliedSizeDefaults.set(
+                state.elements.popper,
+                state.rects.popper.height
+            );
+        }
+        const actualHeight = appliedSizeDefaults.get(state.elements.popper);
+        const constrainHeight = maxHeight > actualHeight;
+        const appliedHeight = constrainHeight ? `${maxHeight}px` : '';
+        state.styles.popper.maxHeight = appliedHeight;
+        state.styles.popper.height = appliedHeight;
+    },
+};

packages/overlay/src/popper.ts

@@ -25,6 +25,8 @@ import preventOverflow from '@popperjs/core/lib/modifiers/preventOverflow';
 import arrow from '@popperjs/core/lib/modifiers/arrow';
 import offset from '@popperjs/core/lib/modifiers/offset';
 import { computeArrowRotateStyles } from './popper-arrow-rotate';
+import maxSize from 'popper-max-size-modifier';
+import { applyMaxSize } from './apply-max-size.js';
 
 export const createPopper = popperGenerator({
     defaultModifiers: [
@@ -37,4 +39,4 @@ export const createPopper = popperGenerator({
     ],
 });
 
-export { Instance, Placement };
+export { Instance, Placement, maxSize, applyMaxSize };

packages/popover/src/popover.css

@@ -10,3 +10,52 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 @import './spectrum-popover.css';
+
+:host([placement*='bottom'][open]) {
+    /* .spectrum-Popover--bottom.is-open */
+    max-height: calc(
+        100% -
+            var(
+                --spectrum-dropdown-flyout-menu-offset-y,
+                var(--spectrum-global-dimension-size-75)
+            )
+    );
+}
+:host([placement*='top'][open]) {
+    /* .spectrum-Popover--top.is-open */
+    margin-top: var(
+        --spectrum-dropdown-flyout-menu-offset-y,
+        var(--spectrum-global-dimension-size-75)
+    );
+    max-height: calc(
+        100% -
+            var(
+                --spectrum-dropdown-flyout-menu-offset-y,
+                var(--spectrum-global-dimension-size-75)
+            )
+    );
+}
+:host([placement*='right'][open]) {
+    /* .spectrum-Popover--right.is-open */
+    max-width: calc(
+        100% -
+            var(
+                --spectrum-dropdown-flyout-menu-offset-y,
+                var(--spectrum-global-dimension-size-75)
+            )
+    );
+}
+:host([placement*='left'][open]) {
+    /* .spectrum-Popover--left.is-open */
+    margin-left: var(
+        --spectrum-dropdown-flyout-menu-offset-y,
+        var(--spectrum-global-dimension-size-75)
+    );
+    max-width: calc(
+        100% -
+            var(
+                --spectrum-dropdown-flyout-menu-offset-y,
+                var(--spectrum-global-dimension-size-75)
+            )
+    );
+}

packages/popover/stories/popover.stories.ts

@@ -43,7 +43,7 @@ export const Dialog = (): TemplateResult => {
     const placement = radios('Placement', placements, placements.bottom);
     return html`
         <div
-            style="color: var(--spectrum-global-color-gray-800); position: relative"
+            style="color: var(--spectrum-global-color-gray-800); position: relative; display: contents"
         >
             <sp-popover
                 variant="dialog"

yarn.lock

@@ -13857,6 +13857,11 @@ polymer-webpack-loader@^2.0.3:
     postcss "^6.0.9"
     source-map "^0.5.6"
 
+popper-max-size-modifier@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/popper-max-size-modifier/-/popper-max-size-modifier-0.2.0.tgz#1574744401296a488b4974909d130a85db94256f"
+  integrity sha512-UerPt9pZfTFnpSpIBVJrR3ibHMuU1k5K01AyNLfMUWCr4z1MFH+dsayPlAF9ZeYExa02HPiQn5OIMqUSVtJEbg==
+
 portfinder@^1.0.13, portfinder@^1.0.20, portfinder@^1.0.21, portfinder@^1.0.25:
   version "1.0.25"
   resolved "https://registry.yarnpkg.com/portfinder/-/portfinder-1.0.25.tgz#254fd337ffba869f4b9d37edc298059cb4d35eca"