@servicensw/drop-menu - npm Package Compare versions

Comparing version 2.4.0 to 2.4.1

dist/drop-menu.js

@@ -1,1 +0,1 @@
-!function(){"use strict";function t(t,e,i){return e in t?Object.defineProperty(t,e,{value:i,enumerable:!0,configurable:!0,writable:!0}):t[e]=i,t}function e(t,e,i){return e in t?Object.defineProperty(t,e,{value:i,enumerable:!0,configurable:!0,writable:!0}):t[e]=i,t}class i{constructor(){e(this,"attachDialog",(t,e,i,s)=>{SNSW.Dialogs.push({id:t,closefn:e,lastElement:s,firstElement:i})}),e(this,"detachDialog",t=>{SNSW.Dialogs=SNSW.Dialogs.filter(e=>e.id!==t)}),this.attachPopup=this.attachPopup.bind(this),this.detachPopup=this.detachPopup.bind(this),this.attachDialog=this.attachDialog.bind(this),this.detachDialog=this.detachDialog.bind(this),this.attachMenu=this.attachMenu.bind(this),this.detachMenu=this.detachMenu.bind(this),this.moveFocus=this.moveFocus.bind(this),this.handleGlobalKeydown=this.handleGlobalKeydown.bind(this),this.attachEventListeners=this.attachEventListeners.bind(this),this.detachEventListensers=this.detachEventListensers.bind(this),window.SNSW=window.SNSW||{},SNSW.Popups=SNSW.Popups||[],SNSW.Dialogs=SNSW.Dialogs||[],SNSW.Menu=null}attachPopup(t,e){SNSW.Popups.push({id:t,closefn:e})}detachPopup(t){SNSW.Popups=SNSW.Popups.filter(e=>e.id!==t)}attachMenu(t,e){SNSW.Menu={context:t,items:e}}detachMenu(){SNSW.Menu=null}getNextFocusableMenuItem(t){return arguments.length>1&&void 0!==arguments[1]&&arguments[1]?0===t?SNSW.Menu.items.length-1:t-1:SNSW.Menu.items.length>t+1?t+1:0}moveFocus(t){let e=arguments.length>1&&void 0!==arguments[1]&&arguments[1];const{items:i}=SNSW.Menu,s=[...i].findIndex(e=>e===t);let n=this.getNextFocusableMenuItem(s,e),a=i[n].getAttribute("tabindex");if("-1"!==a)i[n].focus();else{for(;"-1"===a;)n=this.getNextFocusableMenuItem(n,e),a=i[n].getAttribute("tabindex");i[n].focus()}SNSW.Menu.active=n}handleGlobalClick(){const t=SNSW.Popups[SNSW.Popups.length-1],e=SNSW.Dialogs[SNSW.Dialogs.length-1];t&&t.closefn(),e&&e.closefn()}handleGlobalKeydown(t){const{key:e,target:i}=t,s=SNSW.Popups[SNSW.Popups.length-1],n=SNSW.Dialogs[SNSW.Dialogs.length-1];switch(e){case"Escape":s?s.closefn():n&&n.closefn();break;case"Tab":n&&(document.activeElement!==n.lastElement||t.getModifierState("Shift")?document.activeElement===n.firstElement&&t.getModifierState("Shift")&&(t.preventDefault(),n.lastElement.focus()):(t.preventDefault(),n.firstElement.focus()));break;case"ArrowDown":case"ArrowRight":SNSW.Menu&&(t.preventDefault(),this.moveFocus(i));break;case"ArrowUp":case"ArrowLeft":SNSW.Menu&&(t.preventDefault(),this.moveFocus(i,!0))}}attachEventListeners(){SNSW.Popups&&SNSW.Menu&&SNSW.Dialogs||(window.addEventListener("click",this.handleGlobalClick),window.addEventListener("keydown",this.handleGlobalKeydown))}detachEventListensers(){window.removeEventListener("click",this.handleGlobalClick),window.removeEventListener("keydown",this.handleGlobalKeydown)}}class s{constructor(e,s){t(this,"keyboard",new i),t(this,"closeMenu",()=>{this.button.setAttribute("aria-expanded","false"),this.menu.setAttribute("aria-hidden","true"),this.menuItems.forEach(t=>t.setAttribute("tabIndex","-1")),this.button.setAttribute("tabIndex","0"),this.button.focus(),this.keyboard&&this.keyboard.detachPopup("DropMenu".concat(this.index))}),t(this,"buttonClickHandler",t=>{t.stopPropagation(),"false"!==this.button.getAttribute("aria-expanded")?this.closeMenu():this.openMenu()}),t(this,"buttonKeyDownHandler",t=>{switch(t.key){case"Enter":case" ":case"ArrowDown":t.preventDefault(),t.stopPropagation(),this.openMenu();break;case"ArrowUp":t.preventDefault(),t.stopPropagation(),this.openMenu(this.menuItems.length-1)}}),t(this,"menuItemClickHandler",t=>{t.stopPropagation(),this.setActiveMenuItem(t.currentTarget),this.closeMenu()}),t(this,"menuItemKeyDownHandler",t=>{switch(t.key){case"Enter":case" ":t.preventDefault(),t.currentTarget.click(),this.button.focus()}}),this.element=e,this.element&&this.element.nodeType&&(this.index=s,void 0===this.index&&(this.index=0),this.menu=this.element.querySelector("ul"),this.menu.setAttribute("id","menuButton".concat(this.index)),this.menu.setAttribute("role","menu"),this.menu.setAttribute("aria-hidden","true"),this.listItems=this.element.querySelectorAll("li"),this.listItems.forEach(t=>{t.setAttribute("role","none")}),this.menuItems=this.element.querySelectorAll("a"),this.menuItems.forEach((t,e)=>{t.setAttribute("role","menuitem"),t.setAttribute("tabIndex","-1"),0===e&&(t.setAttribute("aria-current","true"),this.listItems[e].classList.add("is-active")),t.addEventListener("click",this.menuItemClickHandler),t.addEventListener("keydown",this.menuItemKeyDownHandler)}),this.button=document.createElement("button"),this.button.setAttribute("aria-haspopup","true"),this.button.setAttribute("aria-controls",this.menu.getAttribute("id")),this.button.setAttribute("aria-expanded","false"),this.button.setAttribute("aria-label","Open ".concat(this.menu.getAttribute("aria-label"))),this.button.classList.add("reset--button"),this.element.insertBefore(this.button,this.menu),this.button.addEventListener("click",this.buttonClickHandler),this.button.addEventListener("keydown",this.buttonKeyDownHandler),this.keyboard&&(this.menu.addEventListener("focusin",()=>{this.keyboard.attachMenu(this,this.menuItems)}),this.menu.addEventListener("focusout",()=>{this.keyboard.detachMenu()}),this.keyboard.attachEventListeners()))}setActiveMenuItem(t){this.menuItems.forEach((e,i)=>{e!==t?(e.setAttribute("aria-current",""),this.listItems[i].classList.remove("is-active")):(e.setAttribute("aria-current","true"),this.listItems[i].classList.add("is-active"))})}openMenu(t){t=void 0!==t?t:0,this.button.setAttribute("aria-expanded","true"),this.menu.setAttribute("aria-hidden","false"),this.menuItems.forEach(t=>t.setAttribute("tabIndex","0")),this.menuItems[t].focus(),this.keyboard&&this.keyboard.attachPopup("DropMenu".concat(this.index),this.closeMenu)}}window.SNSW=window.SNSW||{},SNSW.DropMenu=s,window.addEventListener("DOMContentLoaded",()=>{const t=document.querySelectorAll(".drop-button:not(.is-excluded)");t&&t.forEach((t,e)=>{new s(t,e)})})}();
+!function(){"use strict";class Keyboard{constructor(){this.attachPopup=this.attachPopup.bind(this),this.detachPopup=this.detachPopup.bind(this),this.attachDialog=this.attachDialog.bind(this),this.detachDialog=this.detachDialog.bind(this),this.attachMenu=this.attachMenu.bind(this),this.detachMenu=this.detachMenu.bind(this),this.moveFocus=this.moveFocus.bind(this),this.handleGlobalKeydown=this.handleGlobalKeydown.bind(this),this.attachEventListeners=this.attachEventListeners.bind(this),this.detachEventListensers=this.detachEventListensers.bind(this),window.SNSW=window.SNSW||{},SNSW.Popups=SNSW.Popups||[],SNSW.Dialogs=SNSW.Dialogs||[],SNSW.Menu=null}attachPopup(t,e){SNSW.Popups.push({id:t,closefn:e})}detachPopup(t){SNSW.Popups=SNSW.Popups.filter(e=>e.id!==t)}attachDialog(t,e,s,i){SNSW.Dialogs.push({id:t,closefn:e,lastElement:i,firstElement:s})}detachDialog(t){SNSW.Dialogs=SNSW.Dialogs.filter(e=>e.id!==t)}attachMenu(t,e){SNSW.Menu={context:t,items:e}}detachMenu(){SNSW.Menu=null}getNextFocusableMenuItem(t,e=!1){return e?0===t?SNSW.Menu.items.length-1:t-1:SNSW.Menu.items.length>t+1?t+1:0}moveFocus(t,e=!1){const{items:s}=SNSW.Menu,i=[...s].findIndex(e=>e===t);let n=this.getNextFocusableMenuItem(i,e),a=s[n].getAttribute("tabindex");if("-1"!==a)s[n].focus();else{for(;"-1"===a;)n=this.getNextFocusableMenuItem(n,e),a=s[n].getAttribute("tabindex");s[n].focus()}SNSW.Menu.active=n}handleGlobalClick(){const t=SNSW.Popups[SNSW.Popups.length-1],e=SNSW.Dialogs[SNSW.Dialogs.length-1];t&&t.closefn(),e&&e.closefn()}handleGlobalKeydown(t){const{key:e,target:s}=t,i=SNSW.Popups[SNSW.Popups.length-1],n=SNSW.Dialogs[SNSW.Dialogs.length-1];switch(e){case"Escape":i?i.closefn():n&&n.closefn();break;case"Tab":n&&(document.activeElement!==n.lastElement||t.getModifierState("Shift")?document.activeElement===n.firstElement&&t.getModifierState("Shift")&&(t.preventDefault(),n.lastElement.focus()):(t.preventDefault(),n.firstElement.focus()));break;case"ArrowDown":case"ArrowRight":SNSW.Menu&&(t.preventDefault(),this.moveFocus(s));break;case"ArrowUp":case"ArrowLeft":SNSW.Menu&&(t.preventDefault(),this.moveFocus(s,!0))}}attachEventListeners(){SNSW.Popups&&SNSW.Menu&&SNSW.Dialogs||(window.addEventListener("click",this.handleGlobalClick),window.addEventListener("keydown",this.handleGlobalKeydown))}detachEventListensers(){window.removeEventListener("click",this.handleGlobalClick),window.removeEventListener("keydown",this.handleGlobalKeydown)}}class DropMenu{constructor(t,e){this.element=t,this.element&&this.element.nodeType&&(this.index=e,void 0===this.index&&(this.index=0),this.keyboard=new Keyboard,this.buttonClickHandler=this.buttonClickHandler.bind(this),this.buttonKeyDownHandler=this.buttonKeyDownHandler.bind(this),this.menuItemClickHandler=this.menuItemClickHandler.bind(this),this.menuItemKeyDownHandler=this.menuItemKeyDownHandler.bind(this),this.closeMenu=this.closeMenu.bind(this),this.menu=this.element.querySelector("ul"),this.menu.setAttribute("id","menuButton"+this.index),this.menu.setAttribute("role","menu"),this.menu.setAttribute("aria-hidden","true"),this.listItems=this.element.querySelectorAll("li"),this.listItems.forEach(t=>{t.setAttribute("role","none")}),this.menuItems=this.element.querySelectorAll("a"),this.menuItems.forEach((t,e)=>{t.setAttribute("role","menuitem"),t.setAttribute("tabIndex","-1"),0===e&&(t.setAttribute("aria-current","true"),this.listItems[e].classList.add("is-active")),t.addEventListener("click",this.menuItemClickHandler),t.addEventListener("keydown",this.menuItemKeyDownHandler)}),this.button=document.createElement("button"),this.button.setAttribute("aria-haspopup","true"),this.button.setAttribute("aria-controls",this.menu.getAttribute("id")),this.button.setAttribute("aria-expanded","false"),this.button.setAttribute("aria-label","Open "+this.menu.getAttribute("aria-label")),this.button.classList.add("reset--button"),this.element.insertBefore(this.button,this.menu),this.button.addEventListener("click",this.buttonClickHandler),this.button.addEventListener("keydown",this.buttonKeyDownHandler),this.keyboard&&(this.menu.addEventListener("focusin",()=>{this.keyboard.attachMenu(this,this.menuItems)}),this.menu.addEventListener("focusout",()=>{this.keyboard.detachMenu()}),this.keyboard.attachEventListeners()))}setActiveMenuItem(t){this.menuItems.forEach((e,s)=>{e!==t?(e.setAttribute("aria-current",""),this.listItems[s].classList.remove("is-active")):(e.setAttribute("aria-current","true"),this.listItems[s].classList.add("is-active"))})}openMenu(t){t=void 0!==t?t:0,this.button.setAttribute("aria-expanded","true"),this.menu.setAttribute("aria-hidden","false"),this.menuItems.forEach(t=>t.setAttribute("tabIndex","0")),this.menuItems[t].focus(),this.keyboard&&this.keyboard.attachPopup("DropMenu"+this.index,this.closeMenu)}closeMenu(){this.button.setAttribute("aria-expanded","false"),this.menu.setAttribute("aria-hidden","true"),this.menuItems.forEach(t=>t.setAttribute("tabIndex","-1")),this.button.setAttribute("tabIndex","0"),this.button.focus(),this.keyboard&&this.keyboard.detachPopup("DropMenu"+this.index)}buttonClickHandler(t){t.stopPropagation(),"false"!==this.button.getAttribute("aria-expanded")?this.closeMenu():this.openMenu()}buttonKeyDownHandler(t){switch(t.key){case"Enter":case" ":case"ArrowDown":t.preventDefault(),t.stopPropagation(),this.openMenu();break;case"ArrowUp":t.preventDefault(),t.stopPropagation(),this.openMenu(this.menuItems.length-1)}}menuItemClickHandler(t){t.stopPropagation(),this.setActiveMenuItem(t.currentTarget),this.closeMenu()}menuItemKeyDownHandler(t){switch(t.key){case"Enter":case" ":t.preventDefault(),t.currentTarget.click(),this.button.focus()}}}window.SNSW=window.SNSW||{},SNSW.DropMenu=DropMenu,window.addEventListener("DOMContentLoaded",()=>{const t=document.querySelectorAll(".drop-button:not(.is-excluded)");t&&t.forEach((t,e)=>{new DropMenu(t,e)})})}();

package.json

 {
   "name": "@servicensw/drop-menu",
-  "version": "2.4.0",
+  "version": "2.4.1",
   "description": "Drop menu component",
@@ -12,9 +12,9 @@ "repository": {
   "license": "MIT",
-  "main": "dist/cjs/index.js",
-  "module": "dist/esm/index.js",
+  "main": "dist/DropMenu.cjs",
+  "module": "src/DropMenu.js",
   "exports": {
     "./css": "./dist/drop-menu.css",
     ".": {
-      "import": "./dist/esm/index.js",
-      "require": "./dist/cjs/index.js"
+      "import": "./src/DropMenu.js",
+      "require": "./dist/DropMenu.cjs"
     }
@@ -36,3 +36,3 @@ },
     "build:css": "NODE_ENV=production postcss src/drop-menu.css --dir dist --config ../../postcss.config.js",
-    "build:js": "NODE_ENV=production rollup src/drop-menu.es6.js --o dist/drop-menu.js --f iife --name SNSW.DropMenu --config ../../rollup.config.js --silent && NODE_ENV=production rollup src/index.js --format cjs --o dist/cjs/index.js --config ../../rollup.config.js --silent && NODE_ENV=production rollup src/index.js --o dist/esm/index.js --config ../../rollup.config.js --silent",
+    "build:js": "NODE_ENV=production rollup src/drop-menu.es6.js --o dist/drop-menu.js --f iife --name SNSW.DropMenu --config ../../rollup.config.js --silent && NODE_ENV=production rollup src/DropMenu.js --format cjs --o dist/DropMenu.cjs --config ../../rollup.config.js --silent",
     "clean": "rm -rf ./dist",
@@ -48,3 +48,3 @@ "prepare": "npm run clean && npm run build:css && npm run build:js"
   "dependencies": {
-    "@servicensw/base": "^2.11.0",
+    "@servicensw/base": "^2.12.0",
     "@servicensw/constants": "^2.0.11"
@@ -62,3 +62,3 @@ },
   ],
-  "gitHead": "d9ed8d8209536c25d5345a3d8e5b21319230333f"
+  "gitHead": "7d5810c1d1251143a39298affc39b700e8ef7c25"
 }

src/DropMenu.js

@@ -10,8 +10,2 @@ /**
   /**
-   * Initialise Keyboard class.
-   * @type {*|Keyboard}
-   */
-  keyboard = new Keyboard()
-
-  /**
    * Initialise the component
@@ -31,2 +25,15 @@ * @param {HTMLElement} element - The drop menu element.
 
+    /**
+     * Initialise Keyboard class.
+     * @type {*|Keyboard}
+     */
+    this.keyboard = new Keyboard()
+
+    // Bind.
+    this.buttonClickHandler = this.buttonClickHandler.bind(this)
+    this.buttonKeyDownHandler = this.buttonKeyDownHandler.bind(this)
+    this.menuItemClickHandler = this.menuItemClickHandler.bind(this)
+    this.menuItemKeyDownHandler = this.menuItemKeyDownHandler.bind(this)
+    this.closeMenu = this.closeMenu.bind(this)
+
     // Setup the menu element.
@@ -113,3 +120,3 @@ this.menu = this.element.querySelector("ul")
 
-  closeMenu = () => {
+  closeMenu() {
     this.button.setAttribute("aria-expanded", "false")
@@ -126,3 +133,3 @@ this.menu.setAttribute("aria-hidden", "true")
 
-  buttonClickHandler = event => {
+  buttonClickHandler(event) {
     event.stopPropagation()
@@ -136,3 +143,3 @@ if (this.button.getAttribute("aria-expanded") === "false") {
 
-  buttonKeyDownHandler = event => {
+  buttonKeyDownHandler(event) {
     switch (event.key) {
@@ -158,3 +165,3 @@ case "Enter":
 
-  menuItemClickHandler = event => {
+  menuItemClickHandler(event) {
     event.stopPropagation()
@@ -165,3 +172,3 @@ this.setActiveMenuItem(event.currentTarget)
 
-  menuItemKeyDownHandler = event => {
+  menuItemKeyDownHandler(event) {
     switch (event.key) {
@@ -168,0 +175,0 @@ case "Enter":

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

27229

decreased by-18.7%

Number of package files

10

decreased by-16.67%

Lines of code

388

decreased by-5.6%

Dependency changes

• Updated@servicensw/base@^2.12.0