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

Comparing version 0.8.2 to 0.9.0

CHANGELOG.md

@@ -6,2 +6,12 @@ # Change Log
 
+# [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)
+
+### Bug Fixes
+
+-   **overlay:** place return focus element on demand ([d262237](https://github.com/adobe/spectrum-web-components/commit/d2622374346c0a0f55419f87dd4399918c3aaa15))
+
+### Features
+
+-   allow activation of longpress content ([55e71fd](https://github.com/adobe/spectrum-web-components/commit/55e71fdf9fd5dde489871c3d9798ef8957f4e5b6))
+
 ## [0.8.2](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/overlay@0.8.1...@spectrum-web-components/overlay@0.8.2) (2021-02-02)
@@ -8,0 +18,0 @@

custom-elements.json

@@ -36,6 +36,2 @@ {
         {
-          "name": "returnFocusElement",
-          "type": "HTMLSpanElement | undefined"
-        },
-        {
           "name": "state",
@@ -183,2 +179,6 @@ "type": "OverlayStateType"
           "description": "The content that will be displayed on click"
+        },
+        {
+          "name": "longpress-content",
+          "description": "The content that will be displayed on click"
         }
@@ -185,0 +185,0 @@ ]

package.json

@@ -21,3 +21,3 @@ {
     ],
-    "version": "0.8.2",
+    "version": "0.9.0",
     "description": "",
@@ -65,8 +65,9 @@ "main": "./src/index.js",
         "@popperjs/core": "^2.2.2",
-        "@spectrum-web-components/base": "^0.3.2",
-        "@spectrum-web-components/theme": "^0.7.3",
+        "@spectrum-web-components/action-button": "^0.3.0",
+        "@spectrum-web-components/base": "^0.3.3",
+        "@spectrum-web-components/theme": "^0.7.4",
         "popper-max-size-modifier": "^0.2.0",
         "tslib": "^2.0.0"
     },
-    "gitHead": "7783ce454deb5a97b3d274ee1b54a24c09065ce4"
+    "gitHead": "975a9d6bf075d367fbc77c9b5cec4eabce66f6c0"
 }

README.md

@@ -68,2 +68,19 @@ ## Description
     <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>
@@ -70,0 +87,0 @@ ```

src/ActiveOverlay.d.ts

@@ -18,3 +18,2 @@ import { CSSResultArray, PropertyValues, SpectrumElement, TemplateResult } from '@spectrum-web-components/base';
     trigger: HTMLElement;
-    returnFocusElement?: HTMLSpanElement;
     private placeholder?;
@@ -21,0 +20,0 @@ private popper?;

src/ActiveOverlay.js

@@ -226,6 +226,3 @@ /*
         }
-        if (this.returnFocusElement) {
-            this.returnFocusElement.remove();
-            this.trigger.removeEventListener('keydown', this.handleInlineTriggerKeydown);
-        }
+        this.trigger.removeEventListener('keydown', this.handleInlineTriggerKeydown);
         this.returnOverlayContent();
@@ -232,0 +229,0 @@ this.state = 'disposed';

src/ActiveOverlay.ts

@@ -109,3 +109,2 @@ /*
     public trigger!: HTMLElement;
-    public returnFocusElement?: HTMLSpanElement;
 
@@ -316,11 +315,7 @@ private placeholder?: Comment;
         }
+        this.trigger.removeEventListener(
+            'keydown',
+            this.handleInlineTriggerKeydown
+        );
 
-        if (this.returnFocusElement) {
-            this.returnFocusElement.remove();
-            this.trigger.removeEventListener(
-                'keydown',
-                this.handleInlineTriggerKeydown
-            );
-        }
-
         this.returnOverlayContent();
@@ -327,0 +322,0 @@ this.state = 'disposed';

src/overlay-stack.d.ts

@@ -32,2 +32,3 @@ import { ActiveOverlay } from './ActiveOverlay.js';
     private closeTopOverlay;
+    private initialLongpressClick;
     private handleMouse;
@@ -34,0 +35,0 @@ private handleKeyUp;

src/overlay-stack.js

@@ -49,3 +49,8 @@ /*
         };
+        this.initialLongpressClick = false;
         this.handleMouse = () => {
+            if (this.initialLongpressClick) {
+                this.initialLongpressClick = false;
+                return;
+            }
             if (!this.preventMouseRootClose) {
@@ -172,2 +177,5 @@ this.closeTopOverlay();
         }
+        if (details.interaction === 'longpress') {
+            this.initialLongpressClick = true;
+        }
         if (details.interaction === 'modal') {
@@ -251,11 +259,2 @@ this.startTabTrapping();
     addInlineOverlayEventListeners(activeOverlay) {
-        if (!activeOverlay.returnFocusElement) {
-            activeOverlay.returnFocusElement = document.createElement('span');
-            activeOverlay.returnFocusElement.tabIndex = -1;
-            if (activeOverlay.trigger.hasAttribute('slot')) {
-                activeOverlay.returnFocusElement.slot =
-                    activeOverlay.trigger.slot;
-            }
-            activeOverlay.trigger.insertAdjacentElement('afterend', activeOverlay.returnFocusElement);
-        }
         activeOverlay.trigger.addEventListener('keydown', activeOverlay.handleInlineTriggerKeydown);
@@ -268,4 +267,11 @@ activeOverlay.addEventListener('keydown', (event) => {
             activeOverlay.tabbingAway = true;
-            if (shiftKey && activeOverlay.returnFocusElement) {
-                activeOverlay.returnFocusElement.focus();
+            if (shiftKey) {
+                const returnFocusElement = document.createElement('span');
+                returnFocusElement.tabIndex = -1;
+                if (activeOverlay.trigger.hasAttribute('slot')) {
+                    returnFocusElement.slot = activeOverlay.trigger.slot;
+                }
+                activeOverlay.trigger.insertAdjacentElement('afterend', returnFocusElement);
+                returnFocusElement.focus();
+                returnFocusElement.remove();
                 return;
@@ -272,0 +278,0 @@ }

src/overlay-stack.ts

@@ -154,2 +154,5 @@ /*
         }
+        if (details.interaction === 'longpress') {
+            this.initialLongpressClick = true;
+        }
         if (details.interaction === 'modal') {
@@ -250,14 +253,2 @@ this.startTabTrapping();
     public addInlineOverlayEventListeners(activeOverlay: ActiveOverlay): void {
-        if (!activeOverlay.returnFocusElement) {
-            activeOverlay.returnFocusElement = document.createElement('span');
-            activeOverlay.returnFocusElement.tabIndex = -1;
-            if (activeOverlay.trigger.hasAttribute('slot')) {
-                activeOverlay.returnFocusElement.slot =
-                    activeOverlay.trigger.slot;
-            }
-            activeOverlay.trigger.insertAdjacentElement(
-                'afterend',
-                activeOverlay.returnFocusElement
-            );
-        }
         activeOverlay.trigger.addEventListener(
@@ -273,4 +264,14 @@ 'keydown',
             activeOverlay.tabbingAway = true;
-            if (shiftKey && activeOverlay.returnFocusElement) {
-                activeOverlay.returnFocusElement.focus();
+            if (shiftKey) {
+                const returnFocusElement = document.createElement('span');
+                returnFocusElement.tabIndex = -1;
+                if (activeOverlay.trigger.hasAttribute('slot')) {
+                    returnFocusElement.slot = activeOverlay.trigger.slot;
+                }
+                activeOverlay.trigger.insertAdjacentElement(
+                    'afterend',
+                    returnFocusElement
+                );
+                returnFocusElement.focus();
+                returnFocusElement.remove();
                 return;
@@ -399,3 +400,9 @@ }
 
+    private initialLongpressClick = false;
+
     private handleMouse = (): void => {
+        if (this.initialLongpressClick) {
+            this.initialLongpressClick = false;
+            return;
+        }
         if (!this.preventMouseRootClose) {
@@ -402,0 +409,0 @@ this.closeTopOverlay();

src/overlay-types.d.ts

 import { ThemeData } from '@spectrum-web-components/theme';
 import { Placement as PopperPlacement } from './popper';
-export declare type TriggerInteractions = 'click' | 'hover' | 'custom' | 'replace' | 'inline' | 'modal';
+export declare type TriggerInteractions = 'click' | 'longpress' | 'hover' | 'custom' | 'replace' | 'inline' | 'modal';
 export interface OverlayOpenDetail {
@@ -5,0 +5,0 @@ content: HTMLElement;

src/overlay-types.ts

@@ -18,2 +18,3 @@ /*
     | 'click'
+    | 'longpress'
     | 'hover'
@@ -20,0 +21,0 @@ | 'custom'

src/OverlayTrigger.d.ts

@@ -10,2 +10,3 @@ import { LitElement, CSSResultArray, TemplateResult, PropertyValues } from '@spectrum-web-components/base';
  * @slot click-content - The content that will be displayed on click
+ * @slot longpress-content - The content that will be displayed on click
  *
@@ -28,2 +29,3 @@ * @fires sp-open - Announces that the overlay has been opened
     private clickContent?;
+    private longpressContent?;
     private hoverContent?;
@@ -38,2 +40,3 @@ private targetContent?;
     onTriggerClick(): Promise<void>;
+    private onTriggerLongpress;
     private hoverOverlayReady;
@@ -43,2 +46,3 @@ onTriggerMouseEnter(): Promise<void>;
     private onClickSlotChange;
+    private onLongpressSlotChange;
     private onHoverSlotChange;
@@ -45,0 +49,0 @@ private onTargetSlotChange;

src/OverlayTrigger.js

@@ -23,2 +23,3 @@ /*
  * @slot click-content - The content that will be displayed on click
+ * @slot longpress-content - The content that will be displayed on click
  *
@@ -53,2 +54,3 @@ * @fires sp-open - Announces that the overlay has been opened
                 @click=${this.onTrigger}
+                @longpress=${this.onTrigger}
                 @mouseenter=${this.onTrigger}
@@ -70,2 +72,6 @@ @mouseleave=${this.onTrigger}
                 <slot
+                    @slotchange=${this.onLongpressSlotChange}
+                    name="longpress-content"
+                ></slot>
+                <slot
                     @slotchange=${this.onHoverSlotChange}
@@ -109,2 +115,5 @@ name="hover-content"
                 return;
+            case 'longpress':
+                this.onTriggerLongpress(event);
+                return;
         }
@@ -115,3 +124,3 @@ }
             if (this.type === 'modal') {
-                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) {
@@ -125,2 +134,17 @@ this.clickContent.tabIndex = 0;
     }
+    async onTriggerLongpress(event) {
+        if (!this.targetContent || !this.longpressContent) {
+            return;
+        }
+        const { targetContent, longpressContent } = this;
+        if (this.type === 'modal') {
+            const firstFocusable = this.querySelector('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"]), [focusable]');
+            if (!firstFocusable) {
+                longpressContent.tabIndex = 0;
+            }
+        }
+        const type = event.detail.source === 'keyboard' ? 'click' : 'longpress';
+        const interaction = this.type ? this.type : type || 'longpress';
+        this.closeClickOverlay = await OverlayTrigger.openOverlay(targetContent, interaction, longpressContent, Object.assign(Object.assign({}, this.overlayOptions), { receivesFocus: 'auto' }));
+    }
     async onTriggerMouseEnter() {
@@ -150,2 +174,6 @@ if (this.targetContent && this.hoverContent) {
     }
+    onLongpressSlotChange(event) {
+        const content = this.extractSlotContentFromEvent(event);
+        this.longpressContent = content;
+    }
     onHoverSlotChange(event) {
@@ -152,0 +180,0 @@ const content = this.extractSlotContentFromEvent(event);

src/OverlayTrigger.ts

@@ -21,2 +21,3 @@ /*
 } from '@spectrum-web-components/base';
+import type { LongpressEvent } from '@spectrum-web-components/action-button';
 
@@ -38,2 +39,3 @@ import {
  * @slot click-content - The content that will be displayed on click
+ * @slot longpress-content - The content that will be displayed on click
  *
@@ -68,2 +70,3 @@ * @fires sp-open - Announces that the overlay has been opened
     private clickContent?: HTMLElement;
+    private longpressContent?: HTMLElement;
     private hoverContent?: HTMLElement;
@@ -83,2 +86,3 @@ private targetContent?: HTMLElement;
                 @click=${this.onTrigger}
+                @longpress=${this.onTrigger}
                 @mouseenter=${this.onTrigger}
@@ -100,2 +104,6 @@ @mouseleave=${this.onTrigger}
                 <slot
+                    @slotchange=${this.onLongpressSlotChange}
+                    name="longpress-content"
+                ></slot>
+                <slot
                     @slotchange=${this.onHoverSlotChange}
@@ -138,3 +146,3 @@ name="hover-content"
 
-    private onTrigger(event: Event): void {
+    private onTrigger(event: CustomEvent<LongpressEvent>): void {
         if (this.disabled) {
@@ -155,2 +163,5 @@ return;
                 return;
+            case 'longpress':
+                this.onTriggerLongpress(event);
+                return;
         }
@@ -163,3 +174,3 @@ }
                 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;
@@ -180,2 +191,30 @@ if (!firstFocusable) {
 
+    private async onTriggerLongpress(
+        event: CustomEvent<LongpressEvent>
+    ): Promise<void> {
+        if (!this.targetContent || !this.longpressContent) {
+            return;
+        }
+        const { targetContent, longpressContent } = this;
+        if (this.type === 'modal') {
+            const firstFocusable = this.querySelector(
+                'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"]), [focusable]'
+            ) as HTMLElement;
+            if (!firstFocusable) {
+                longpressContent.tabIndex = 0;
+            }
+        }
+        const type = event.detail.source === 'keyboard' ? 'click' : 'longpress';
+        const interaction = this.type ? this.type : type || 'longpress';
+        this.closeClickOverlay = await OverlayTrigger.openOverlay(
+            targetContent,
+            interaction,
+            longpressContent,
+            {
+                ...this.overlayOptions,
+                receivesFocus: 'auto',
+            }
+        );
+    }
+
     private hoverOverlayReady = Promise.resolve();
@@ -217,2 +256,9 @@
 
+    private onLongpressSlotChange(
+        event: Event & { target: HTMLSlotElement }
+    ): void {
+        const content = this.extractSlotContentFromEvent(event);
+        this.longpressContent = content;
+    }
+
     private onHoverSlotChange(
@@ -219,0 +265,0 @@ event: Event & { target: HTMLSlotElement }

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

Improved metrics

Total package byte prevSize

257767

increased by3%

Lines of code

3454

increased by2.43%

Number of lines in readme file

91

increased by22.97%

Worsened metrics

Dependency count

6

increased by20%

Dependency changes

• + Added@spectrum-web-components/action-button@^0.3.0

• + Added@spectrum-web-components/action-button@0.3.0(transitive)

• + Added@spectrum-web-components/button@0.12.0(transitive)

• + Added@spectrum-web-components/icon@0.8.3(transitive)

• + Added@spectrum-web-components/icons-ui@0.5.3(transitive)

• + Added@spectrum-web-components/iconset@0.4.3(transitive)

• + Added@spectrum-web-components/shared@0.10.0(transitive)

• + Addedfocus-visible@5.2.1(transitive)

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

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