@spectrum-web-components/overlay - npm Package Compare versions

Comparing version 0.8.0 to 0.8.1

CHANGELOG.md

@@ -6,2 +6,9 @@ # Change Log
 
+## [0.8.1](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/overlay@0.8.0...@spectrum-web-components/overlay@0.8.1) (2021-01-28)
+
+### Bug Fixes
+
+-   **overlay:** remove trapped content from a11y tree, manage focus, open projected content ([6c496c0](https://github.com/adobe/spectrum-web-components/commit/6c496c0a930737b7fd74a565766ab41339691551))
+-   **tooltip:** correct arrow orientation, remove popper-arrow-rotate ([fcd6ea2](https://github.com/adobe/spectrum-web-components/commit/fcd6ea28ef5e4f06a07994ebd8f8b9be1a934eb2))
+
 # [0.8.0](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/overlay@0.6.4...@spectrum-web-components/overlay@0.8.0) (2021-01-21)
@@ -8,0 +15,0 @@

package.json

@@ -21,3 +21,3 @@ {
     ],
-    "version": "0.8.0",
+    "version": "0.8.1",
     "description": "",
@@ -65,8 +65,8 @@ "main": "./src/index.js",
         "@popperjs/core": "^2.2.2",
-        "@spectrum-web-components/base": "^0.3.0",
-        "@spectrum-web-components/theme": "^0.7.1",
+        "@spectrum-web-components/base": "^0.3.1",
+        "@spectrum-web-components/theme": "^0.7.2",
         "popper-max-size-modifier": "^0.2.0",
         "tslib": "^2.0.0"
     },
-    "gitHead": "a5734426f36555951dc10c5740c9044bbd951315"
+    "gitHead": "7bac515d0291c21c9fc7482120904fe5c5c83200"
 }

README.md

@@ -54,6 +54,4 @@ ## Description
 <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 open>
+    <sp-button variant="primary" slot="trigger">Button popover</sp-button>
+    <sp-popover dialog slot="click-content" direction="bottom" tip>
         <div class="options-popover-content">
@@ -70,5 +68,3 @@ <sp-slider
     </sp-popover>
-    <sp-tooltip slot="hover-content" delayed open>
-        Tooltip
-    </sp-tooltip>
+    <sp-tooltip slot="hover-content" delayed>Tooltip</sp-tooltip>
 </overlay-trigger>
@@ -75,0 +71,0 @@ ```

src/active-overlay.css.js

@@ -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}#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]) ::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}
 `;
 export default styles;
 //# sourceMappingURL=active-overlay.css.js.map

src/active-overlay.css.ts

@@ -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}#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]) ::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}
 `;
 export default styles;

src/ActiveOverlay.d.ts

@@ -1,4 +0,4 @@
-import { Placement, OverlayOpenDetail, TriggerInteractions } from './overlay-types.js';
-import { Scale, Color } from '@spectrum-web-components/theme';
-import { SpectrumElement, TemplateResult, CSSResultArray, PropertyValues } from '@spectrum-web-components/base';
+import { CSSResultArray, PropertyValues, SpectrumElement, TemplateResult } from '@spectrum-web-components/base';
+import { Color, Scale } from '@spectrum-web-components/theme';
+import { OverlayOpenDetail, Placement, TriggerInteractions } from './overlay-types.js';
 export interface PositionResult {
@@ -5,0 +5,0 @@ arrowOffsetLeft: number;

src/ActiveOverlay.js

@@ -13,5 +13,5 @@ /*
 import { __decorate } from "tslib";
-import { createPopper, maxSize, applyMaxSize } from './popper.js';
-import { html, SpectrumElement, property, ifDefined, } from '@spectrum-web-components/base';
+import { html, ifDefined, property, SpectrumElement, } from '@spectrum-web-components/base';
 import styles from './active-overlay.css.js';
+import { applyMaxSize, createPopper, maxSize } from './popper.js';
 const stateMachine = {
@@ -107,3 +107,3 @@ initial: 'idle',
     focus() {
-        const firstFocusable = this.querySelector('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
+        const firstFocusable = this.querySelector('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"]), [focusable]');
         if (firstFocusable) {
@@ -110,0 +110,0 @@ firstFocusable.focus();

src/ActiveOverlay.ts

@@ -13,19 +13,19 @@ /*
 
-import { createPopper, Instance, maxSize, applyMaxSize } from './popper.js';
 import {
-    Placement,
-    OverlayOpenDetail,
-    TriggerInteractions,
-} from './overlay-types.js';
-import { Scale, Color } from '@spectrum-web-components/theme';
-import {
+    CSSResultArray,
     html,
+    ifDefined,
+    property,
+    PropertyValues,
     SpectrumElement,
     TemplateResult,
-    CSSResultArray,
-    property,
-    PropertyValues,
-    ifDefined,
 } from '@spectrum-web-components/base';
+import { Color, Scale } from '@spectrum-web-components/theme';
 import styles from './active-overlay.css.js';
+import {
+    OverlayOpenDetail,
+    Placement,
+    TriggerInteractions,
+} from './overlay-types.js';
+import { applyMaxSize, createPopper, Instance, maxSize } from './popper.js';
 
@@ -163,3 +163,3 @@ export interface PositionResult {
         const firstFocusable = this.querySelector(
-            'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+            'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"]), [focusable]'
         ) as HTMLElement;
@@ -166,0 +166,0 @@ if (firstFocusable) {

src/overlay-stack.js

@@ -131,2 +131,3 @@ /*
         this.tabTrapper.tabIndex = -1;
+        this.tabTrapper.setAttribute('aria-hidden', 'true');
         this.overlayHolder.hidden = false;
@@ -140,2 +141,3 @@ }
         this.tabTrapper.removeAttribute('tabindex');
+        this.tabTrapper.removeAttribute('aria-hidden');
         this.overlayHolder.hidden = true;
@@ -204,2 +206,6 @@ }
             this.addOverlayEventListeners(activeOverlay);
+            const contentWithOpen = activeOverlay.overlayContent;
+            if (typeof contentWithOpen.open !== 'undefined') {
+                contentWithOpen.open = true;
+            }
             if (details.receivesFocus === 'auto') {
@@ -213,3 +219,3 @@ activeOverlay.focus();
                 detail: {
-                    interaction: details.interaction
+                    interaction: details.interaction,
                 },
@@ -289,2 +295,6 @@ }));
             await overlay.hide(animated);
+            const contentWithOpen = overlay.overlayContent;
+            if (typeof contentWithOpen.open !== 'undefined') {
+                contentWithOpen.open = false;
+            }
             if (overlay.state != 'dispose')
@@ -291,0 +301,0 @@ return;

src/overlay-stack.ts

@@ -102,2 +102,3 @@ /*
         this.tabTrapper.tabIndex = -1;
+        this.tabTrapper.setAttribute('aria-hidden', 'true');
         this.overlayHolder.hidden = false;
@@ -112,2 +113,3 @@ }
         this.tabTrapper.removeAttribute('tabindex');
+        this.tabTrapper.removeAttribute('aria-hidden');
         this.overlayHolder.hidden = true;
@@ -194,2 +196,8 @@ }
                 this.addOverlayEventListeners(activeOverlay);
+                const contentWithOpen = (activeOverlay.overlayContent as unknown) as {
+                    open: boolean;
+                };
+                if (typeof contentWithOpen.open !== 'undefined') {
+                    contentWithOpen.open = true;
+                }
                 if (details.receivesFocus === 'auto') {
@@ -204,3 +212,3 @@ activeOverlay.focus();
                         detail: {
-                            interaction: details.interaction
+                            interaction: details.interaction,
                         },
@@ -323,2 +331,8 @@ })
             await overlay.hide(animated);
+            const contentWithOpen = (overlay.overlayContent as unknown) as {
+                open: boolean;
+            };
+            if (typeof contentWithOpen.open !== 'undefined') {
+                contentWithOpen.open = false;
+            }
             if (overlay.state != 'dispose') return;
@@ -325,0 +339,0 @@

src/overlay-trigger.css.js

@@ -14,5 +14,5 @@ /*
 const styles = css `
-:host([disabled]) #trigger{pointer-events:none}#overlay-content{display:none}
+#trigger{display:contents}:host([disabled]) #trigger{pointer-events:none}#overlay-content{display:none}
 `;
 export default styles;
 //# sourceMappingURL=overlay-trigger.css.js.map

src/overlay-trigger.css.ts

@@ -14,4 +14,4 @@ /*
 const styles = css`
-:host([disabled]) #trigger{pointer-events:none}#overlay-content{display:none}
+#trigger{display:contents}:host([disabled]) #trigger{pointer-events:none}#overlay-content{display:none}
 `;
 export default styles;

src/OverlayTrigger.js

@@ -54,2 +54,4 @@ /*
                 @mouseleave=${this.onTrigger}
+                @focusin=${this.onTrigger}
+                @focusout=${this.onTrigger}
             >
@@ -98,5 +100,7 @@ <slot
             case 'mouseenter':
+            case 'focusin':
                 this.onTriggerMouseEnter();
                 return;
             case 'mouseleave':
+            case 'focusout':
                 this.onTriggerMouseLeave();
@@ -103,0 +107,0 @@ return;

src/OverlayTrigger.ts

@@ -82,2 +82,4 @@ /*
                 @mouseleave=${this.onTrigger}
+                @focusin=${this.onTrigger}
+                @focusout=${this.onTrigger}
             >
@@ -141,5 +143,7 @@ <slot
             case 'mouseenter':
+            case 'focusin':
                 this.onTriggerMouseEnter();
                 return;
             case 'mouseleave':
+            case 'focusout':
                 this.onTriggerMouseLeave();
@@ -146,0 +150,0 @@ return;

src/popper.d.ts

 /// <reference path="../local.d.ts" />
+import type { Placement } from '@popperjs/core/dist/esm/enums.js';
 import type { Instance } from '@popperjs/core/dist/esm/types.js';
-import type { Placement } from '@popperjs/core/dist/esm/enums.js';
 import maxSize from 'popper-max-size-modifier';
@@ -5,0 +5,0 @@ import { applyMaxSize } from './apply-max-size.js';

src/popper.js

@@ -12,12 +12,7 @@ /*
 */
-// Bundle only what we want from popper
-// See: https://popper.js.org/docs#popper-lite-tree-shaking
-// eslint-disable-next-line @typescript-eslint/triple-slash-reference
-/// <reference path="../local.d.ts" />
-import { popperGenerator, defaultModifiers, } from '@popperjs/core/dist/esm/popper-lite.js';
+import arrow from '@popperjs/core/dist/esm/modifiers/arrow.js';
 import flip from '@popperjs/core/dist/esm/modifiers/flip.js';
+import offset from '@popperjs/core/dist/esm/modifiers/offset.js';
 import preventOverflow from '@popperjs/core/dist/esm/modifiers/preventOverflow.js';
-import arrow from '@popperjs/core/dist/esm/modifiers/arrow.js';
-import offset from '@popperjs/core/dist/esm/modifiers/offset.js';
-import { computeArrowRotateStyles } from './popper-arrow-rotate.js';
+import { defaultModifiers, popperGenerator, } from '@popperjs/core/dist/esm/popper-lite.js';
 import maxSize from 'popper-max-size-modifier';
@@ -32,3 +27,2 @@ import { applyMaxSize } from './apply-max-size.js';
         offset,
-        computeArrowRotateStyles,
     ],
@@ -35,0 +29,0 @@ });

src/popper.ts

@@ -18,14 +18,12 @@ /*
 /// <reference path="../local.d.ts" />
+import type { Placement } from '@popperjs/core/dist/esm/enums.js';
+import arrow from '@popperjs/core/dist/esm/modifiers/arrow.js';
+import flip from '@popperjs/core/dist/esm/modifiers/flip.js';
+import offset from '@popperjs/core/dist/esm/modifiers/offset.js';
+import preventOverflow from '@popperjs/core/dist/esm/modifiers/preventOverflow.js';
 import {
+    defaultModifiers,
     popperGenerator,
-    defaultModifiers,
 } from '@popperjs/core/dist/esm/popper-lite.js';
 import type { Instance } from '@popperjs/core/dist/esm/types.js';
-import type { Placement } from '@popperjs/core/dist/esm/enums.js';
-
-import flip from '@popperjs/core/dist/esm/modifiers/flip.js';
-import preventOverflow from '@popperjs/core/dist/esm/modifiers/preventOverflow.js';
-import arrow from '@popperjs/core/dist/esm/modifiers/arrow.js';
-import offset from '@popperjs/core/dist/esm/modifiers/offset.js';
-import { computeArrowRotateStyles } from './popper-arrow-rotate.js';
 import maxSize from 'popper-max-size-modifier';
@@ -41,3 +39,2 @@ import { applyMaxSize } from './apply-max-size.js';
         offset,
-        computeArrowRotateStyles,
     ],
@@ -44,0 +41,0 @@ });

New alerts

License Policy Violation

License

This 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

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Unidentified License

License

(Experimental) Something that seems like a license was found, but its contents could not be matched with a known license.

Found 1 instance in 1 package

Improved metrics

Number of low license alerts

10

decreased by-9.09%

Worsened metrics

Total package byte prevSize

250028

decreased by-2.28%

Number of package files

66

decreased by-5.71%

Lines of code

3372

decreased by-2.82%

Number of lines in readme file

74

decreased by-5.13%

Dependency changes

• Updated@spectrum-web-components/base@^0.3.1

• Updated@spectrum-web-components/theme@^0.7.2