@spectrum-web-components/reactive-controllers - npm Package Compare versions

Comparing version 0.35.1-rc.43 to 0.36.0

package.json

 {
     "name": "@spectrum-web-components/reactive-controllers",
-    "version": "0.35.1-rc.43+432051b80",
+    "version": "0.36.0",
     "publishConfig": {
@@ -82,3 +82,3 @@ "access": "public"
     ],
-    "gitHead": "432051b8085e7c86032333fa296bfa5334d47d84"
+    "gitHead": "a532ff8a410abeefb54d9638a2316ae82570566e"
 }

src/FocusGroup.d.ts

@@ -34,2 +34,3 @@ import type { ReactiveController, ReactiveElement } from 'lit';
     constructor(host: ReactiveElement, { direction, elementEnterAction, elements, focusInIndex, isFocusableElement, listenerScope, }?: FocusGroupConfig<T>);
+    handleItemMutation(): void;
     update({ elements }?: FocusGroupConfig<T>): void;
@@ -36,0 +37,0 @@ focus(options?: FocusOptions): void;

src/FocusGroup.dev.js

 "use strict";
+import { MutationController } from "@lit-labs/observers/mutation-controller.js";
 function ensureMethod(value, type, fallback) {
@@ -91,2 +92,11 @@ if (typeof value === type) {
     };
+    new MutationController(host, {
+      config: {
+        childList: true,
+        subtree: true
+      },
+      callback: () => {
+        this.handleItemMutation();
+      }
+    });
     this.host = host;
@@ -150,2 +160,20 @@ this.host.addController(this);
   }
+  /*  In  handleItemMutation() method the first if condition is checking if the element is not focused or if the element's children's length is not decreasing then it means no element has been deleted and we must return.
+      Then we are checking if the deleted element was the focused one before the deletion if so then we need to proceed else we casn return;
+  */
+  handleItemMutation() {
+    if (this._currentIndex == -1 || this.elements.length <= this._elements().length)
+      return;
+    const focusedElement = this.elements[this.currentIndex];
+    this.clearElementCache();
+    if (this.elements.includes(focusedElement))
+      return;
+    const moveToNextElement = this.currentIndex !== this.elements.length;
+    const diff = moveToNextElement ? 1 : -1;
+    if (moveToNextElement) {
+      this.setCurrentIndexCircularly(-1);
+    }
+    this.setCurrentIndexCircularly(diff);
+    this.focus();
+  }
   update({ elements } = { elements: () => [] }) {
@@ -158,6 +186,9 @@ this.unmanage();
   focus(options) {
-    let focusElement = this.elements[this.currentIndex];
+    const elements = this.elements;
+    if (!elements.length)
+      return;
+    let focusElement = elements[this.currentIndex];
     if (!focusElement || !this.isFocusableElement(focusElement)) {
       this.setCurrentIndexCircularly(1);
-      focusElement = this.elements[this.currentIndex];
+      focusElement = elements[this.currentIndex];
     }
@@ -194,3 +225,2 @@ if (focusElement && this.isFocusableElement(focusElement)) {
     this.host.removeEventListener("keydown", this.handleKeydown);
-    this.currentIndex = this.focusInIndex;
     this.focused = false;
@@ -197,0 +227,0 @@ }

src/FocusGroup.js

@@ -1,2 +0,2 @@
-"use strict";function r(i,e,t){return typeof i===e?()=>i:typeof i=="function"?i:t}export class FocusGroupController{constructor(e,{direction:t,elementEnterAction:n,elements:s,focusInIndex:o,isFocusableElement:h,listenerScope:c}={elements:()=>[]}){this._currentIndex=-1;this._direction=()=>"both";this.directionLength=5;this.elementEnterAction=e=>{};this._focused=!1;this._focusInIndex=e=>0;this.isFocusableElement=e=>!0;this._listenerScope=()=>this.host;this.offset=0;this.handleFocusin=e=>{if(!this.isEventWithinListenerScope(e))return;this.isRelatedTargetAnElement(e)&&this.hostContainsFocus();const t=e.composedPath();let n=-1;t.find(s=>(n=this.elements.indexOf(s),n!==-1)),this.currentIndex=n>-1?n:this.currentIndex};this.handleFocusout=e=>{this.isRelatedTargetAnElement(e)&&this.hostNoLongerContainsFocus()};this.handleKeydown=e=>{if(!this.acceptsEventCode(e.code)||e.defaultPrevented)return;let t=0;switch(e.code){case"ArrowRight":t+=1;break;case"ArrowDown":t+=this.direction==="grid"?this.directionLength:1;break;case"ArrowLeft":t-=1;break;case"ArrowUp":t-=this.direction==="grid"?this.directionLength:1;break;case"End":this.currentIndex=0,t-=1;break;case"Home":this.currentIndex=this.elements.length-1,t+=1;break}e.preventDefault(),this.direction==="grid"&&this.currentIndex+t<0?this.currentIndex=0:this.direction==="grid"&&this.currentIndex+t>this.elements.length-1?this.currentIndex=this.elements.length-1:this.setCurrentIndexCircularly(t),this.elementEnterAction(this.elements[this.currentIndex]),this.focus()};this.host=e,this.host.addController(this),this._elements=s,this.isFocusableElement=h||this.isFocusableElement,this._direction=r(t,"string",this._direction),this.elementEnterAction=n||this.elementEnterAction,this._focusInIndex=r(o,"number",this._focusInIndex),this._listenerScope=r(c,"object",this._listenerScope)}get currentIndex(){return this._currentIndex===-1&&(this._currentIndex=this.focusInIndex),this._currentIndex-this.offset}set currentIndex(e){this._currentIndex=e+this.offset}get direction(){return this._direction()}get elements(){return this.cachedElements||(this.cachedElements=this._elements()),this.cachedElements}set focused(e){e!==this.focused&&(this._focused=e)}get focused(){return this._focused}get focusInElement(){return this.elements[this.focusInIndex]}get focusInIndex(){return this._focusInIndex(this.elements)}isEventWithinListenerScope(e){return this._listenerScope()===this.host?!0:e.composedPath().includes(this._listenerScope())}update({elements:e}={elements:()=>[]}){this.unmanage(),this._elements=e,this.clearElementCache(),this.manage()}focus(e){let t=this.elements[this.currentIndex];(!t||!this.isFocusableElement(t))&&(this.setCurrentIndexCircularly(1),t=this.elements[this.currentIndex]),t&&this.isFocusableElement(t)&&t.focus(e)}clearElementCache(e=0){delete this.cachedElements,this.offset=e}setCurrentIndexCircularly(e){const{length:t}=this.elements;let n=t,s=(t+this.currentIndex+e)%t;for(;n&&this.elements[s]&&!this.isFocusableElement(this.elements[s]);)s=(t+s+e)%t,n-=1;this.currentIndex=s}hostContainsFocus(){this.host.addEventListener("focusout",this.handleFocusout),this.host.addEventListener("keydown",this.handleKeydown),this.focused=!0}hostNoLongerContainsFocus(){this.host.addEventListener("focusin",this.handleFocusin),this.host.removeEventListener("focusout",this.handleFocusout),this.host.removeEventListener("keydown",this.handleKeydown),this.currentIndex=this.focusInIndex,this.focused=!1}isRelatedTargetAnElement(e){const t=e.relatedTarget;return!this.elements.includes(t)}acceptsEventCode(e){if(e==="End"||e==="Home")return!0;switch(this.direction){case"horizontal":return e==="ArrowLeft"||e==="ArrowRight";case"vertical":return e==="ArrowUp"||e==="ArrowDown";case"both":case"grid":return e.startsWith("Arrow")}}manage(){this.addEventListeners()}unmanage(){this.removeEventListeners()}addEventListeners(){this.host.addEventListener("focusin",this.handleFocusin)}removeEventListeners(){this.host.removeEventListener("focusin",this.handleFocusin),this.host.removeEventListener("focusout",this.handleFocusout),this.host.removeEventListener("keydown",this.handleKeydown)}hostConnected(){this.addEventListeners()}hostDisconnected(){this.removeEventListeners()}}
+"use strict";import{MutationController as l}from"@lit-labs/observers/mutation-controller.js";function r(i,e,t){return typeof i===e?()=>i:typeof i=="function"?i:t}export class FocusGroupController{constructor(e,{direction:t,elementEnterAction:n,elements:s,focusInIndex:o,isFocusableElement:h,listenerScope:c}={elements:()=>[]}){this._currentIndex=-1;this._direction=()=>"both";this.directionLength=5;this.elementEnterAction=e=>{};this._focused=!1;this._focusInIndex=e=>0;this.isFocusableElement=e=>!0;this._listenerScope=()=>this.host;this.offset=0;this.handleFocusin=e=>{if(!this.isEventWithinListenerScope(e))return;this.isRelatedTargetAnElement(e)&&this.hostContainsFocus();const t=e.composedPath();let n=-1;t.find(s=>(n=this.elements.indexOf(s),n!==-1)),this.currentIndex=n>-1?n:this.currentIndex};this.handleFocusout=e=>{this.isRelatedTargetAnElement(e)&&this.hostNoLongerContainsFocus()};this.handleKeydown=e=>{if(!this.acceptsEventCode(e.code)||e.defaultPrevented)return;let t=0;switch(e.code){case"ArrowRight":t+=1;break;case"ArrowDown":t+=this.direction==="grid"?this.directionLength:1;break;case"ArrowLeft":t-=1;break;case"ArrowUp":t-=this.direction==="grid"?this.directionLength:1;break;case"End":this.currentIndex=0,t-=1;break;case"Home":this.currentIndex=this.elements.length-1,t+=1;break}e.preventDefault(),this.direction==="grid"&&this.currentIndex+t<0?this.currentIndex=0:this.direction==="grid"&&this.currentIndex+t>this.elements.length-1?this.currentIndex=this.elements.length-1:this.setCurrentIndexCircularly(t),this.elementEnterAction(this.elements[this.currentIndex]),this.focus()};new l(e,{config:{childList:!0,subtree:!0},callback:()=>{this.handleItemMutation()}}),this.host=e,this.host.addController(this),this._elements=s,this.isFocusableElement=h||this.isFocusableElement,this._direction=r(t,"string",this._direction),this.elementEnterAction=n||this.elementEnterAction,this._focusInIndex=r(o,"number",this._focusInIndex),this._listenerScope=r(c,"object",this._listenerScope)}get currentIndex(){return this._currentIndex===-1&&(this._currentIndex=this.focusInIndex),this._currentIndex-this.offset}set currentIndex(e){this._currentIndex=e+this.offset}get direction(){return this._direction()}get elements(){return this.cachedElements||(this.cachedElements=this._elements()),this.cachedElements}set focused(e){e!==this.focused&&(this._focused=e)}get focused(){return this._focused}get focusInElement(){return this.elements[this.focusInIndex]}get focusInIndex(){return this._focusInIndex(this.elements)}isEventWithinListenerScope(e){return this._listenerScope()===this.host?!0:e.composedPath().includes(this._listenerScope())}handleItemMutation(){if(this._currentIndex==-1||this.elements.length<=this._elements().length)return;const e=this.elements[this.currentIndex];if(this.clearElementCache(),this.elements.includes(e))return;const t=this.currentIndex!==this.elements.length,n=t?1:-1;t&&this.setCurrentIndexCircularly(-1),this.setCurrentIndexCircularly(n),this.focus()}update({elements:e}={elements:()=>[]}){this.unmanage(),this._elements=e,this.clearElementCache(),this.manage()}focus(e){const t=this.elements;if(!t.length)return;let n=t[this.currentIndex];(!n||!this.isFocusableElement(n))&&(this.setCurrentIndexCircularly(1),n=t[this.currentIndex]),n&&this.isFocusableElement(n)&&n.focus(e)}clearElementCache(e=0){delete this.cachedElements,this.offset=e}setCurrentIndexCircularly(e){const{length:t}=this.elements;let n=t,s=(t+this.currentIndex+e)%t;for(;n&&this.elements[s]&&!this.isFocusableElement(this.elements[s]);)s=(t+s+e)%t,n-=1;this.currentIndex=s}hostContainsFocus(){this.host.addEventListener("focusout",this.handleFocusout),this.host.addEventListener("keydown",this.handleKeydown),this.focused=!0}hostNoLongerContainsFocus(){this.host.addEventListener("focusin",this.handleFocusin),this.host.removeEventListener("focusout",this.handleFocusout),this.host.removeEventListener("keydown",this.handleKeydown),this.focused=!1}isRelatedTargetAnElement(e){const t=e.relatedTarget;return!this.elements.includes(t)}acceptsEventCode(e){if(e==="End"||e==="Home")return!0;switch(this.direction){case"horizontal":return e==="ArrowLeft"||e==="ArrowRight";case"vertical":return e==="ArrowUp"||e==="ArrowDown";case"both":case"grid":return e.startsWith("Arrow")}}manage(){this.addEventListeners()}unmanage(){this.removeEventListeners()}addEventListeners(){this.host.addEventListener("focusin",this.handleFocusin)}removeEventListeners(){this.host.removeEventListener("focusin",this.handleFocusin),this.host.removeEventListener("focusout",this.handleFocusout),this.host.removeEventListener("keydown",this.handleKeydown)}hostConnected(){this.addEventListeners()}hostDisconnected(){this.removeEventListeners()}}
 //# sourceMappingURL=FocusGroup.js.map

test/match-media.test.js

@@ -6,7 +6,7 @@ "use strict";
 import { MatchMediaController } from "@spectrum-web-components/reactive-controllers/src/MatchMedia.js";
-class TestEl extends LitElement {
-}
-customElements.define("test-match-media-el", TestEl);
 describe("Match Media", () => {
   it("responds to media changes", async () => {
+    class TestEl extends LitElement {
+    }
+    customElements.define("test-match-media-el", TestEl);
     const el = await fixture(
@@ -13,0 +13,0 @@ html`

New alerts

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Fixed alerts

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

179464

3.18%

Lines of code

1161

2.93%

Number of medium supply chain risk alerts

0

-100%

Worsened metrics

Number of low quality alerts

4

33.33%

No dependency changes