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

Comparing version 0.43.0 to 0.44.0

package.json

 {
     "name": "@spectrum-web-components/shared",
-    "version": "0.43.0",
+    "version": "0.44.0",
     "publishConfig": {
@@ -104,3 +104,3 @@ "access": "public"
         "@lit-labs/observers": "^2.0.2",
-        "@spectrum-web-components/base": "^0.43.0",
+        "@spectrum-web-components/base": "^0.44.0",
         "focus-visible": "^5.1.0"
@@ -113,3 +113,3 @@ },
     ],
-    "gitHead": "dd5179a5eae5fe69ac77c5e10faed912d0e780e3"
+    "gitHead": "0002d42ce82463b85022e5aa5f7aba8484cba096"
 }

src/focusable.d.ts

@@ -38,2 +38,8 @@ import { PropertyValues, SpectrumElement } from '@spectrum-web-components/base';
     get focusElement(): DisableableElement;
+    /**
+     * @public
+     * @returns {boolean} whether the component should manage its focusElement tab-index or not
+     * Needed for action-menu to be supported in action-group in an accessible way
+     */
+    get selfManageFocusElement(): boolean;
     focus(options?: FocusOptions): void;
@@ -40,0 +46,0 @@ blur(): void;

src/focusable.dev.js

@@ -41,5 +41,6 @@ "use strict";
     }
-    return this.focusElement.tabIndex;
+    return this._tabIndex;
   }
   set tabIndex(tabIndex) {
+    var _a;
     if (this.manipulatingTabindex) {
@@ -50,5 +51,7 @@ this.manipulatingTabindex = false;
     if (this.focusElement === this) {
-      if (tabIndex !== this._tabIndex) {
+      if (this.disabled) {
         this._tabIndex = tabIndex;
-        const tabindex = this.disabled ? "-1" : "" + tabIndex;
+      } else if (tabIndex !== this._tabIndex) {
+        this._tabIndex = tabIndex;
+        const tabindex = "" + tabIndex;
         this.manipulatingTabindex = true;
@@ -72,6 +75,13 @@ this.setAttribute("tabindex", tabindex);
     if (tabIndex === -1 || this.disabled) {
+      this.manipulatingTabindex = true;
       this.setAttribute("tabindex", "-1");
       this.removeAttribute("focusable");
+      if (this.selfManageFocusElement) {
+        return;
+      }
       if (tabIndex !== -1) {
+        this._tabIndex = tabIndex;
         this.manageFocusElementTabindex(tabIndex);
+      } else {
+        (_a = this.focusElement) == null ? void 0 : _a.removeAttribute("tabindex");
       }
@@ -86,2 +96,3 @@ return;
     }
+    this._tabIndex = tabIndex;
     this.manageFocusElementTabindex(tabIndex);
@@ -105,3 +116,5 @@ }
     } else {
-      this.focusElement.tabIndex = tabIndex;
+      if (this.focusElement !== this) {
+        this.focusElement.tabIndex = tabIndex;
+      }
     }
@@ -115,2 +128,10 @@ }
   }
+  /**
+   * @public
+   * @returns {boolean} whether the component should manage its focusElement tab-index or not
+   * Needed for action-menu to be supported in action-group in an accessible way
+   */
+  get selfManageFocusElement() {
+    return false;
+  }
   focus(options) {
@@ -117,0 +138,0 @@ if (this.disabled || !this.focusElement) {

src/focusable.js

@@ -1,2 +0,2 @@
-"use strict";var d=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var n=(s,a,e,t)=>{for(var i=t>1?void 0:t?b(a,e):a,o=s.length-1,r;o>=0;o--)(r=s[o])&&(i=(t?r(a,e,i):r(i))||i);return t&&i&&d(a,e,i),i};import{SpectrumElement as h}from"@spectrum-web-components/base";import{property as l}from"@spectrum-web-components/base/src/decorators.js";import{FocusVisiblePolyfillMixin as m}from"./focus-visible.js";function u(){return new Promise(s=>requestAnimationFrame(()=>s()))}export class Focusable extends m(h){constructor(){super(...arguments);this.disabled=!1;this.autofocus=!1;this._tabIndex=0;this.manipulatingTabindex=!1;this.autofocusReady=Promise.resolve()}get tabIndex(){if(this.focusElement===this){const t=this.hasAttribute("tabindex")?Number(this.getAttribute("tabindex")):NaN;return isNaN(t)?-1:t}const e=parseFloat(this.hasAttribute("tabindex")&&this.getAttribute("tabindex")||"0");return this.disabled||e<0?-1:this.focusElement?this.focusElement.tabIndex:e}set tabIndex(e){if(this.manipulatingTabindex){this.manipulatingTabindex=!1;return}if(this.focusElement===this){if(e!==this._tabIndex){this._tabIndex=e;const t=this.disabled?"-1":""+e;this.manipulatingTabindex=!0,this.setAttribute("tabindex",t)}return}if(e===-1?this.addEventListener("pointerdown",this.onPointerdownManagementOfTabIndex):(this.manipulatingTabindex=!0,this.removeEventListener("pointerdown",this.onPointerdownManagementOfTabIndex)),e===-1||this.disabled){this.setAttribute("tabindex","-1"),this.removeAttribute("focusable"),e!==-1&&this.manageFocusElementTabindex(e);return}this.setAttribute("focusable",""),this.hasAttribute("tabindex")?this.removeAttribute("tabindex"):this.manipulatingTabindex=!1,this.manageFocusElementTabindex(e)}onPointerdownManagementOfTabIndex(){this.tabIndex===-1&&setTimeout(()=>{this.tabIndex=0,this.focus({preventScroll:!0}),this.tabIndex=-1})}async manageFocusElementTabindex(e){this.focusElement||await this.updateComplete,e===null?this.focusElement.removeAttribute("tabindex"):this.focusElement.tabIndex=e}get focusElement(){throw new Error("Must implement focusElement getter!")}focus(e){this.disabled||!this.focusElement||(this.focusElement!==this?this.focusElement.focus(e):HTMLElement.prototype.focus.apply(this,[e]))}blur(){const e=this.focusElement||this;e!==this?e.blur():HTMLElement.prototype.blur.apply(this)}click(){if(this.disabled)return;const e=this.focusElement||this;e!==this?e.click():HTMLElement.prototype.click.apply(this)}manageAutoFocus(){this.autofocus&&(this.dispatchEvent(new KeyboardEvent("keydown",{code:"Tab"})),this.focusElement.focus())}firstUpdated(e){super.firstUpdated(e),(!this.hasAttribute("tabindex")||this.getAttribute("tabindex")!=="-1")&&this.setAttribute("focusable","")}update(e){e.has("disabled")&&this.handleDisabledChanged(this.disabled,e.get("disabled")),super.update(e)}updated(e){super.updated(e),e.has("disabled")&&this.disabled&&this.blur()}async handleDisabledChanged(e,t){const i=()=>this.focusElement!==this&&typeof this.focusElement.disabled!="undefined";e?(this.manipulatingTabindex=!0,this.setAttribute("tabindex","-1"),await this.updateComplete,i()?this.focusElement.disabled=!0:this.setAttribute("aria-disabled","true")):t&&(this.manipulatingTabindex=!0,this.focusElement===this?this.setAttribute("tabindex",""+this._tabIndex):this.removeAttribute("tabindex"),await this.updateComplete,i()?this.focusElement.disabled=!1:this.removeAttribute("aria-disabled"))}async getUpdateComplete(){const e=await super.getUpdateComplete();return await this.autofocusReady,e}connectedCallback(){super.connectedCallback(),this.autofocus&&(this.autofocusReady=new Promise(async e=>{await u(),await u(),e()}),this.updateComplete.then(()=>{this.manageAutoFocus()}))}}n([l({type:Boolean,reflect:!0})],Focusable.prototype,"disabled",2),n([l({type:Boolean})],Focusable.prototype,"autofocus",2),n([l({type:Number})],Focusable.prototype,"tabIndex",1);
+"use strict";var d=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var n=(s,a,e,t)=>{for(var i=t>1?void 0:t?b(a,e):a,o=s.length-1,r;o>=0;o--)(r=s[o])&&(i=(t?r(a,e,i):r(i))||i);return t&&i&&d(a,e,i),i};import{SpectrumElement as h}from"@spectrum-web-components/base";import{property as l}from"@spectrum-web-components/base/src/decorators.js";import{FocusVisiblePolyfillMixin as m}from"./focus-visible.js";function u(){return new Promise(s=>requestAnimationFrame(()=>s()))}export class Focusable extends m(h){constructor(){super(...arguments);this.disabled=!1;this.autofocus=!1;this._tabIndex=0;this.manipulatingTabindex=!1;this.autofocusReady=Promise.resolve()}get tabIndex(){if(this.focusElement===this){const t=this.hasAttribute("tabindex")?Number(this.getAttribute("tabindex")):NaN;return isNaN(t)?-1:t}const e=parseFloat(this.hasAttribute("tabindex")&&this.getAttribute("tabindex")||"0");return this.disabled||e<0?-1:this.focusElement?this._tabIndex:e}set tabIndex(e){var t;if(this.manipulatingTabindex){this.manipulatingTabindex=!1;return}if(this.focusElement===this){if(this.disabled)this._tabIndex=e;else if(e!==this._tabIndex){this._tabIndex=e;const i=""+e;this.manipulatingTabindex=!0,this.setAttribute("tabindex",i)}return}if(e===-1?this.addEventListener("pointerdown",this.onPointerdownManagementOfTabIndex):(this.manipulatingTabindex=!0,this.removeEventListener("pointerdown",this.onPointerdownManagementOfTabIndex)),e===-1||this.disabled){if(this.manipulatingTabindex=!0,this.setAttribute("tabindex","-1"),this.removeAttribute("focusable"),this.selfManageFocusElement)return;e!==-1?(this._tabIndex=e,this.manageFocusElementTabindex(e)):(t=this.focusElement)==null||t.removeAttribute("tabindex");return}this.setAttribute("focusable",""),this.hasAttribute("tabindex")?this.removeAttribute("tabindex"):this.manipulatingTabindex=!1,this._tabIndex=e,this.manageFocusElementTabindex(e)}onPointerdownManagementOfTabIndex(){this.tabIndex===-1&&setTimeout(()=>{this.tabIndex=0,this.focus({preventScroll:!0}),this.tabIndex=-1})}async manageFocusElementTabindex(e){this.focusElement||await this.updateComplete,e===null?this.focusElement.removeAttribute("tabindex"):this.focusElement!==this&&(this.focusElement.tabIndex=e)}get focusElement(){throw new Error("Must implement focusElement getter!")}get selfManageFocusElement(){return!1}focus(e){this.disabled||!this.focusElement||(this.focusElement!==this?this.focusElement.focus(e):HTMLElement.prototype.focus.apply(this,[e]))}blur(){const e=this.focusElement||this;e!==this?e.blur():HTMLElement.prototype.blur.apply(this)}click(){if(this.disabled)return;const e=this.focusElement||this;e!==this?e.click():HTMLElement.prototype.click.apply(this)}manageAutoFocus(){this.autofocus&&(this.dispatchEvent(new KeyboardEvent("keydown",{code:"Tab"})),this.focusElement.focus())}firstUpdated(e){super.firstUpdated(e),(!this.hasAttribute("tabindex")||this.getAttribute("tabindex")!=="-1")&&this.setAttribute("focusable","")}update(e){e.has("disabled")&&this.handleDisabledChanged(this.disabled,e.get("disabled")),super.update(e)}updated(e){super.updated(e),e.has("disabled")&&this.disabled&&this.blur()}async handleDisabledChanged(e,t){const i=()=>this.focusElement!==this&&typeof this.focusElement.disabled!="undefined";e?(this.manipulatingTabindex=!0,this.setAttribute("tabindex","-1"),await this.updateComplete,i()?this.focusElement.disabled=!0:this.setAttribute("aria-disabled","true")):t&&(this.manipulatingTabindex=!0,this.focusElement===this?this.setAttribute("tabindex",""+this._tabIndex):this.removeAttribute("tabindex"),await this.updateComplete,i()?this.focusElement.disabled=!1:this.removeAttribute("aria-disabled"))}async getUpdateComplete(){const e=await super.getUpdateComplete();return await this.autofocusReady,e}connectedCallback(){super.connectedCallback(),this.autofocus&&(this.autofocusReady=new Promise(async e=>{await u(),await u(),e()}),this.updateComplete.then(()=>{this.manageAutoFocus()}))}}n([l({type:Boolean,reflect:!0})],Focusable.prototype,"disabled",2),n([l({type:Boolean})],Focusable.prototype,"autofocus",2),n([l({type:Number})],Focusable.prototype,"tabIndex",1);
 //# sourceMappingURL=focusable.js.map

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

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

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

216680

increased by1.27%

Lines of code

1330

increased by2.07%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Added@spectrum-web-components/base@0.44.0(transitive)

• - Removed@spectrum-web-components/base@0.43.0(transitive)

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