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

Comparing version 0.12.4-alpha.0 to 0.12.4

CHANGELOG.md

@@ -6,2 +6,9 @@ # Change Log
 
+## [0.12.4](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/shared@0.12.3...@spectrum-web-components/shared@0.12.4) (2021-05-24)
+
+### Bug Fixes
+
+-   no scroll update when managing elements outside of the tab order ([144c548](https://github.com/adobe/spectrum-web-components/commit/144c548d3eeeaec6054057f124e73bbb8928c73b))
+-   prevent tabindex=-1 elements from placing focus on their host ([1ac1293](https://github.com/adobe/spectrum-web-components/commit/1ac12931771c6d5fdbc99f5d214702ed644cb81a))
+
 ## [0.12.3](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/shared@0.12.2...@spectrum-web-components/shared@0.12.3) (2021-05-12)
@@ -8,0 +15,0 @@

package.json

 {
     "name": "@spectrum-web-components/shared",
-    "version": "0.12.4-alpha.0+f76f322c5",
+    "version": "0.12.4",
     "publishConfig": {
@@ -44,3 +44,3 @@ "access": "public"
     "dependencies": {
-        "@spectrum-web-components/base": "^0.4.4-alpha.74+f76f322c5",
+        "@spectrum-web-components/base": "^0.4.3",
         "focus-visible": "^5.1.0",
@@ -51,3 +51,3 @@ "tslib": "^2.0.0"
     "sideEffects": false,
-    "gitHead": "f76f322c5dc769ddfac85dc4d36a322e55e2cadb"
+    "gitHead": "912bb9aa6937f86b1f561900aa5ec7d6ec8c2bd5"
 }

README.md

@@ -10,3 +10,3 @@ ## Description
 
-```
+```bash
 npm install @spectrum-web-components/shared
@@ -17,3 +17,3 @@ ```
 
-```
+```javascript
 import {
@@ -24,3 +24,3 @@ Focusable,
     LikeAnchor,
-    ObserveSlotText
+    ObserveSlotText,
 } from '@spectrum-web-components/shared';
@@ -33,3 +33,3 @@ ```
 
-```js
+```javascript
 import { Focusable } from '@spectrum-web-components/shared';
@@ -43,6 +43,2 @@ import { html } from 'lit-element';
     public get focusElement(): HTMLElement {
-        /* c8 ignore next 3 */
-        if (!this.shadowRoot) {
-            return this;
-        }
         return this.shadowRoot.querySelector('#button') as HTMLElement;
@@ -79,3 +75,3 @@ }
 
-```js
+```javascript
 import { ObserveSlotPresence } from '@spectrum-web-components/shared';
@@ -115,3 +111,3 @@ import { LitElement, html } from 'lit-element';
 
-```js
+```javascript
 import { ObserveSlotText } from '@spectrum-web-components/shared';
@@ -118,0 +114,0 @@ import { LitElement, html } from 'lit-element';

src/focusable.d.ts

@@ -31,2 +31,3 @@ import { SpectrumElement, PropertyValues } from '@spectrum-web-components/base';
     private _tabIndex;
+    private onPointerdownManagementOfTabIndex;
     private manageFocusElementTabindex;
@@ -38,3 +39,3 @@ private manipulatingTabindex;
     get focusElement(): DisableableElement;
-    focus(): void;
+    focus(options?: FocusOptions): void;
     blur(): void;
@@ -41,0 +42,0 @@ click(): void;

src/focusable.js

@@ -81,4 +81,10 @@ import { __decorate } from "tslib";
         }
-        // All code paths are about to address the host tabindex without side effect.
-        this.manipulatingTabindex = true;
+        if (tabIndex === -1) {
+            this.addEventListener('pointerdown', this.onPointerdownManagementOfTabIndex);
+        }
+        else {
+            // All code paths are about to address the host tabindex without side effect.
+            this.manipulatingTabindex = true;
+            this.removeEventListener('pointerdown', this.onPointerdownManagementOfTabIndex);
+        }
         if (tabIndex === -1 || this.disabled) {
@@ -106,2 +112,8 @@ // Do not cange the tabindex of `focusElement` as it is the "old" value cache.
     }
+    onPointerdownManagementOfTabIndex() {
+        if (this.tabIndex === -1) {
+            this.tabIndex = 0;
+            this.focus({ preventScroll: true });
+        }
+    }
     async manageFocusElementTabindex(tabIndex) {
@@ -125,3 +137,3 @@ if (!this.focusElement) {
     }
-    focus() {
+    focus(options) {
         if (this.disabled || !this.focusElement) {
@@ -131,6 +143,6 @@ return;
         if (this.focusElement !== this) {
-            this.focusElement.focus();
+            this.focusElement.focus(options);
         }
         else {
-            HTMLElement.prototype.focus.apply(this);
+            HTMLElement.prototype.focus.apply(this, [options]);
         }
@@ -137,0 +149,0 @@ }

src/focusable.ts

@@ -90,4 +90,15 @@ /*
         }
-        // All code paths are about to address the host tabindex without side effect.
-        this.manipulatingTabindex = true;
+        if (tabIndex === -1) {
+            this.addEventListener(
+                'pointerdown',
+                this.onPointerdownManagementOfTabIndex
+            );
+        } else {
+            // All code paths are about to address the host tabindex without side effect.
+            this.manipulatingTabindex = true;
+            this.removeEventListener(
+                'pointerdown',
+                this.onPointerdownManagementOfTabIndex
+            );
+        }
         if (tabIndex === -1 || this.disabled) {
@@ -116,2 +127,9 @@ // Do not cange the tabindex of `focusElement` as it is the "old" value cache.
 
+    private onPointerdownManagementOfTabIndex(): void {
+        if (this.tabIndex === -1) {
+            this.tabIndex = 0;
+            this.focus({ preventScroll: true });
+        }
+    }
+
     private async manageFocusElementTabindex(tabIndex: number): Promise<void> {
@@ -138,3 +156,3 @@ if (!this.focusElement) {
 
-    public focus(): void {
+    public focus(options?: FocusOptions): void {
         if (this.disabled || !this.focusElement) {
@@ -145,5 +163,5 @@ return;
         if (this.focusElement !== this) {
-            this.focusElement.focus();
+            this.focusElement.focus(options);
         } else {
-            HTMLElement.prototype.focus.apply(this);
+            HTMLElement.prototype.focus.apply(this, [options]);
         }
@@ -150,0 +168,0 @@ }

src/like-anchor.d.ts

@@ -1,2 +0,2 @@
-import { ReactiveElement, TemplateResult } from '@spectrum-web-components/base';
+import { UpdatingElement, TemplateResult } from '@spectrum-web-components/base';
 declare type Constructor<T = Record<string, unknown>> = {
@@ -20,3 +20,3 @@ new (...args: any[]): T;
 }
-export declare function LikeAnchor<T extends Constructor<ReactiveElement>>(constructor: T): T & Constructor<LikeAnchorInterface>;
+export declare function LikeAnchor<T extends Constructor<UpdatingElement>>(constructor: T): T & Constructor<LikeAnchorInterface>;
 export {};

src/like-anchor.ts

@@ -13,3 +13,3 @@ /*
 import {
-    ReactiveElement,
+    UpdatingElement,
     property,
@@ -43,3 +43,3 @@ TemplateResult,
 
-export function LikeAnchor<T extends Constructor<ReactiveElement>>(
+export function LikeAnchor<T extends Constructor<UpdatingElement>>(
     constructor: T
@@ -46,0 +46,0 @@ ): T & Constructor<LikeAnchorInterface> {

src/observe-slot-presence.d.ts

@@ -1,2 +0,2 @@
-import { ReactiveElement } from '@spectrum-web-components/base';
+import { UpdatingElement } from '@spectrum-web-components/base';
 declare type Constructor<T = Record<string, unknown>> = {
@@ -11,3 +11,3 @@ new (...args: any[]): T;
 }
-export declare function ObserveSlotPresence<T extends Constructor<ReactiveElement>>(constructor: T, lightDomSelector: string | string[]): T & Constructor<SlotPresenceObservingInterface>;
+export declare function ObserveSlotPresence<T extends Constructor<UpdatingElement>>(constructor: T, lightDomSelector: string | string[]): T & Constructor<SlotPresenceObservingInterface>;
 export {};

src/observe-slot-presence.ts

@@ -11,3 +11,3 @@ /*
 */
-import { ReactiveElement } from '@spectrum-web-components/base';
+import { UpdatingElement } from '@spectrum-web-components/base';
 
@@ -30,3 +30,3 @@ const slotElementObserver = Symbol('slotElementObserver');
 
-export function ObserveSlotPresence<T extends Constructor<ReactiveElement>>(
+export function ObserveSlotPresence<T extends Constructor<UpdatingElement>>(
     constructor: T,
@@ -38,4 +38,3 @@ lightDomSelector: string | string[]
         : [lightDomSelector];
-    class SlotPresenceObservingElement
-        extends constructor
+    class SlotPresenceObservingElement extends constructor
         implements SlotPresenceObservingInterface {
@@ -42,0 +41,0 @@ private [slotElementObserver]!: MutationObserver;

src/observe-slot-text.d.ts

@@ -1,2 +0,2 @@
-import { ReactiveElement } from '@spectrum-web-components/base';
+import { UpdatingElement } from '@spectrum-web-components/base';
 declare type Constructor<T = Record<string, unknown>> = {
@@ -10,3 +10,3 @@ new (...args: any[]): T;
 }
-export declare function ObserveSlotText<T extends Constructor<ReactiveElement>>(constructor: T, slotSelector?: string): T & Constructor<SlotTextObservingInterface>;
+export declare function ObserveSlotText<T extends Constructor<UpdatingElement>>(constructor: T, slotSelector?: string): T & Constructor<SlotTextObservingInterface>;
 export {};

src/observe-slot-text.js

@@ -15,3 +15,2 @@ import { __decorate } from "tslib";
 const slotElementObserver = Symbol('slotElementObserver');
-// Fix needed for: https://github.com/lit/lit/issues/1789
 const assignedNodesList = Symbol('assignedNodes');
@@ -18,0 +17,0 @@ const startObserving = Symbol('startObserving');

src/observe-slot-text.ts

@@ -14,3 +14,3 @@ /*
     PropertyValues,
-    ReactiveElement,
+    UpdatingElement,
     queryAssignedNodes,
@@ -21,3 +21,2 @@ property,
 const slotElementObserver = Symbol('slotElementObserver');
-// Fix needed for: https://github.com/lit/lit/issues/1789
 const assignedNodesList = Symbol('assignedNodes');
@@ -37,8 +36,7 @@ const startObserving = Symbol('startObserving');
 
-export function ObserveSlotText<T extends Constructor<ReactiveElement>>(
+export function ObserveSlotText<T extends Constructor<UpdatingElement>>(
     constructor: T,
     slotSelector?: string
 ): T & Constructor<SlotTextObservingInterface> {
-    class SlotTextObservingElement
-        extends constructor
+    class SlotTextObservingElement extends constructor
         implements SlotTextObservingInterface {
@@ -45,0 +43,0 @@ private [slotElementObserver]: MutationObserver;

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

Manifest confusion

Supply chain risk

This package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

133669

increased by1.75%

Lines of code

1441

increased by1.84%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Number of lines in readme file

129

decreased by-3.01%

Dependency changes

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