@nrk/core-toggle - npm Package Compare versions

Comparing version 2.0.0 to 2.2.0

core-toggle.cjs.js

 'use strict';
 
 var name = "@nrk/core-toggle";
-var version = "1.2.2";
+var version = "2.1.0";
 
@@ -90,3 +90,2 @@ var IS_BROWSER = typeof window !== 'undefined';
 var OPEN = 'aria-expanded';
-var POPUP = 'data-haspopup'; // aria-haspopup triggers forms mode in JAWS, therefore data-
 var KEYS = { ESC: 27 };
@@ -101,7 +100,7 @@
     var open = typeof options.open === 'boolean' ? options.open : (options.open === 'toggle' ? !isOpen : isOpen);
-    var popup = typeof options.popup === 'string' ? options.popup : toggle.getAttribute(POPUP);
+    var popup = String((options.hasOwnProperty('popup') ? options.popup : toggle.getAttribute(UUID)) || false);
     var content = getContentElement(toggle);
 
-    toggle.setAttribute(UUID, '');
-    toggle[popup ? 'setAttribute' : 'removeAttribute'](POPUP, popup);
+    toggle.setAttribute(UUID, popup); // aria-haspopup triggers forms mode in JAWS, therefore store in uuid
+    toggle.setAttribute('aria-label', ((toggle.textContent) + ", " + (popup.replace(/^true|false$/, ''))));
     toggle.setAttribute('aria-controls', content.id = content.id || getUUID());
@@ -111,3 +110,2 @@ content.setAttribute((ARIA + "-labelledby"), toggle.id = toggle.id || getUUID());
     if (options.value) { toggle.innerHTML = options.value; }
-    if (popup) { toggle.setAttribute('aria-label', ((toggle.textContent) + ", " + popup)); }
     return toggle
@@ -126,3 +124,3 @@ })
 
-    if (toggle.hasAttribute(UUID) && toggle.hasAttribute(POPUP) && toggle.getAttribute(OPEN) === 'true') {
+    if (toggle.getAttribute(UUID) !== 'false' && toggle.getAttribute(OPEN) === 'true') {
       event.preventDefault(); // Prevent leaving maximized window in Safari
@@ -156,3 +154,3 @@ toggle.focus();
     var open = toggle.getAttribute(OPEN) === 'true';
-    var popup = toggle.hasAttribute(POPUP);
+    var popup = toggle.getAttribute(UUID) !== 'false';
     var content = getContentElement(toggle);
@@ -159,0 +157,0 @@

core-toggle.js

@@ -7,3 +7,2 @@ import { name, version } from './package.json'
 const OPEN = 'aria-expanded'
-const POPUP = 'data-haspopup' // aria-haspopup triggers forms mode in JAWS, therefore data-
 const KEYS = { ESC: 27 }
@@ -18,7 +17,7 @@
     const open = typeof options.open === 'boolean' ? options.open : (options.open === 'toggle' ? !isOpen : isOpen)
-    const popup = typeof options.popup === 'string' ? options.popup : toggle.getAttribute(POPUP)
+    const popup = String((options.hasOwnProperty('popup') ? options.popup : toggle.getAttribute(UUID)) || false)
     const content = getContentElement(toggle)
 
-    toggle.setAttribute(UUID, '')
-    toggle[popup ? 'setAttribute' : 'removeAttribute'](POPUP, popup)
+    toggle.setAttribute(UUID, popup) // aria-haspopup triggers forms mode in JAWS, therefore store in uuid
+    toggle.setAttribute('aria-label', `${toggle.textContent}, ${popup.replace(/^true|false$/, '')}`)
     toggle.setAttribute('aria-controls', content.id = content.id || getUUID())
@@ -28,3 +27,2 @@ content.setAttribute(`${ARIA}-labelledby`, toggle.id = toggle.id || getUUID())
     if (options.value) toggle.innerHTML = options.value
-    if (popup) toggle.setAttribute('aria-label', `${toggle.textContent}, ${popup}`)
     return toggle
@@ -43,3 +41,3 @@ })
 
-    if (toggle.hasAttribute(UUID) && toggle.hasAttribute(POPUP) && toggle.getAttribute(OPEN) === 'true') {
+    if (toggle.getAttribute(UUID) !== 'false' && toggle.getAttribute(OPEN) === 'true') {
       event.preventDefault() // Prevent leaving maximized window in Safari
@@ -70,3 +68,3 @@ toggle.focus()
     const open = toggle.getAttribute(OPEN) === 'true'
-    const popup = toggle.hasAttribute(POPUP)
+    const popup = toggle.getAttribute(UUID) !== 'false'
     const content = getContentElement(toggle)
@@ -73,0 +71,0 @@

core-toggle.jsx

@@ -7,14 +7,30 @@ import React from 'react'
 export default class Toggle extends React.Component {
-  static get defaultProps () { return { open: null, popup: null, onToggle: null } }
+  static get defaultProps () { return { open: null, popup: null, onToggle: null, onToggleSelect: null } }
   constructor (props) {
     super(props)
     this.onToggle = this.onToggle.bind(this)
+    this.onToggleSelect = this.onToggleSelect.bind(this)
   }
+  update () {
+    coreToggle(this.el.firstElementChild, {
+      popup: this.props.popup,
+      open: this.props.open
+    })
+  }
   componentDidMount () {
-    coreToggle(this.el.firstElementChild) // Mount client side only to avoid rerender
+    this.update()
     this.el.addEventListener('toggle', this.onToggle)
+    this.el.addEventListener('toggle.select', this.onToggleSelect)
   }
-  componentDidUpdate () { coreToggle(this.el.firstElementChild) } // Must mount also on update in case content changes
-  componentWillUnmount () { this.el.removeEventListener('toggle', this.onToggle) }
-  onToggle (event) { this.props.onToggle && this.props.onToggle(event) }
+  componentDidUpdate () { this.update() }
+  componentWillUnmount () {
+    this.el.removeEventListener('toggle', this.onToggle)
+    this.el.removeEventListener('toggle.select', this.onToggleSelect)
+  }
+  onToggle (event) {
+    this.props.onToggle && this.props.onToggle(event)
+  }
+  onToggleSelect (event) {
+    this.props.onToggleSelect && this.props.onToggleSelect(event)
+  }
   render () {
@@ -25,4 +41,3 @@ return React.createElement('div', exclude(this.props, Toggle.defaultProps, { ref: (el) => (this.el = el) }),
           return React.cloneElement(child, {
-            'aria-expanded': String(Boolean(this.props.open)),
-            'data-haspopup': this.props.popup
+            'aria-expanded': String(Boolean(this.props.open))
           })
@@ -29,0 +44,0 @@ }

core-toggle.jsx.js

@@ -1,3 +0,3 @@
-/*! @nrk/core-toggle v1.2.2 - Copyright (c) 2017-2018 NRK */
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("react"),require("prop-types")):"function"==typeof define&&define.amd?define(["react","prop-types"],t):e.CoreToggle=t(e.React,e.PropTypes)}("undefined"!=typeof self?self:this,function(u,e){"use strict";u=u&&u.hasOwnProperty("default")?u.default:u,e=e&&e.hasOwnProperty("default")?e.default:e;var t="undefined"!=typeof window,n=t&&/(android)/i.test(navigator.userAgent),o=t&&/iPad|iPhone|iPod/.test(String(navigator.platform)),r=function(e){void 0===e&&(e=!1);try{window.addEventListener("test",null,{get passive(){e=!0}})}catch(e){}return e}();function i(e,t,n,o){(void 0===o&&(o=!1),"undefined"==typeof window||window[e=e+"-"+t])||(r||"object"!=typeof o||(o=Boolean(o.capture)),("resize"===t||"load"===t?window:document).addEventListener(window[e]=t,n,o))}var a="prevent_recursive_dispatch_maximum_callstack";function l(e,t,n){void 0===n&&(n={});var o,r=""+a+t;if(e[r])return!0;e[r]=!0,"function"==typeof window.CustomEvent?o=new window.CustomEvent(t,{bubbles:!0,cancelable:!0,detail:n}):(o=document.createEvent("CustomEvent")).initCustomEvent(t,!0,!0,n);var i=e.dispatchEvent(o);return e[r]=null,i}function p(e){return Date.now().toString(36)+Math.random().toString(36).slice(2,5)}function d(e,t){if(void 0===t&&(t=document),e){if(e.nodeType)return[e];if("string"==typeof e)return[].slice.call(t.querySelectorAll(e));if(e.length)return[].slice.call(e)}return[]}var c="data-@nrk/core-toggle-1.2.2".replace(/\W+/g,"-"),s=n?"data":"aria",f="aria-expanded",g="data-haspopup",v=27;function m(e,t){var i="object"==typeof t?t:{open:t};return o&&(document.documentElement.style.cursor="pointer"),d(e).map(function(e){var t="true"===e.getAttribute(f),n="boolean"==typeof i.open?i.open:"toggle"===i.open?!t:t,o="string"==typeof i.popup?i.popup:e.getAttribute(g),r=b(e);return e.setAttribute(c,""),e[o?"setAttribute":"removeAttribute"](g,o),e.setAttribute("aria-controls",r.id=r.id||p()),r.setAttribute(s+"-labelledby",e.id=e.id||p()),y(e,n),i.value&&(e.innerHTML=i.value),o&&e.setAttribute("aria-label",e.textContent+", "+o),e})}function b(e){return document.getElementById(e.getAttribute("aria-controls"))||e.nextElementSibling}function y(e,t){var n=b(e),o="true"===e.getAttribute(f),r="boolean"==typeof t?t:"toggle"===t?!o:o,i=o===r||l(e,"toggle",{relatedTarget:n,isOpen:o,willOpen:r})?r:"true"===e.getAttribute(f),u=!o&&i&&n.querySelector("[autofocus]");u&&setTimeout(function(){return u&&u.focus()}),e.setAttribute(f,i),n[i?"removeAttribute":"setAttribute"]("hidden","")}i(c,"keydown",function(e){if(e.keyCode===v)for(var t=e.target;t;t=t.parentElement){var n=t.id&&document.querySelector('[aria-controls="'+t.id+'"]')||t;if(n.hasAttribute(c)&&n.hasAttribute(g)&&"true"===n.getAttribute(f))return e.preventDefault(),n.focus(),y(n,!1)}},!0),i(c,"click",function(e){var r=e.target;if(e.defaultPrevented)return!1;for(var t=r,n=void 0;t;t=t.parentElement){var o=n&&t.id&&document.querySelector("["+c+'][aria-controls="'+t.id+'"]');if("BUTTON"!==t.nodeName&&"A"!==t.nodeName||t.hasAttribute(c)||(n=t),o){l(o,"toggle.select",{relatedTarget:b(o),currentTarget:n,value:n.textContent.trim()});break}}d("["+c+"]").forEach(function(e){var t="true"===e.getAttribute(f),n=e.hasAttribute(g),o=b(e);e.contains(r)?y(e,!t):n&&t&&y(e,o.contains(r))})});var h=function(t){function i(e){t.call(this,e),this.onToggle=this.onToggle.bind(this)}t&&(i.__proto__=t),(i.prototype=Object.create(t&&t.prototype)).constructor=i;var e={defaultProps:{configurable:!0}};return e.defaultProps.get=function(){return{open:null,popup:null,onToggle:null}},i.prototype.componentDidMount=function(){m(this.el.firstElementChild),this.el.addEventListener("toggle",this.onToggle)},i.prototype.componentDidUpdate=function(){m(this.el.firstElementChild)},i.prototype.componentWillUnmount=function(){this.el.removeEventListener("toggle",this.onToggle)},i.prototype.onToggle=function(e){this.props.onToggle&&this.props.onToggle(e)},i.prototype.render=function(){var n,o,e,r=this;return u.createElement("div",(n=this.props,o=i.defaultProps,void 0===(e={ref:function(e){return r.el=e}})&&(e={}),Object.keys(n).reduce(function(e,t){return o.hasOwnProperty(t)||(e[t]=n[t]),e},e)),u.Children.map(this.props.children,function(e,t){return 0===t?u.cloneElement(e,{"aria-expanded":String(Boolean(r.props.open)),"data-haspopup":r.props.popup}):1===t?u.cloneElement(e,{hidden:!r.props.open}):e}))},Object.defineProperties(i,e),i}(u.Component);return h.propTypes={open:e.bool,popup:e.oneOfType([e.bool,e.string]),onToggle:e.func},h});
+/*! @nrk/core-toggle v2.1.0 - Copyright (c) 2017-2019 NRK */
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("react"),require("prop-types")):"function"==typeof define&&define.amd?define(["react","prop-types"],t):(e=e||self).CoreToggle=t(e.React,e.PropTypes)}(this,function(u,e){"use strict";u=u&&u.hasOwnProperty("default")?u.default:u,e=e&&e.hasOwnProperty("default")?e.default:e;var t="undefined"!=typeof window,o=t&&/(android)/i.test(navigator.userAgent),n=t&&/iPad|iPhone|iPod/.test(String(navigator.platform)),r=function(e){void 0===e&&(e=!1);try{window.addEventListener("test",null,{get passive(){e=!0}})}catch(e){}return e}();function i(e,t,o,n){(void 0===n&&(n=!1),"undefined"==typeof window||window[e=e+"-"+t])||(r||"object"!=typeof n||(n=Boolean(n.capture)),("resize"===t||"load"===t?window:document).addEventListener(window[e]=t,o,n))}var l="prevent_recursive_dispatch_maximum_callstack";function p(e,t,o){void 0===o&&(o={});var n,r=""+l+t;if(e[r])return!0;e[r]=!0,"function"==typeof window.CustomEvent?n=new window.CustomEvent(t,{bubbles:!0,cancelable:!0,detail:o}):(n=document.createEvent("CustomEvent")).initCustomEvent(t,!0,!0,o);var i=e.dispatchEvent(n);return e[r]=null,i}function a(e){return Date.now().toString(36)+Math.random().toString(36).slice(2,5)}function s(e,t){if(void 0===t&&(t=document),e){if(e.nodeType)return[e];if("string"==typeof e)return[].slice.call(t.querySelectorAll(e));if(e.length)return[].slice.call(e)}return[]}var c="data-@nrk/core-toggle-2.1.0".replace(/\W+/g,"-"),d=o?"data":"aria",g="aria-expanded",f=27;function v(e){return document.getElementById(e.getAttribute("aria-controls"))||e.nextElementSibling}function h(e,t){var o=v(e),n="true"===e.getAttribute(g),r="boolean"==typeof t?t:"toggle"===t?!n:n,i=n===r||p(e,"toggle",{relatedTarget:o,isOpen:n,willOpen:r})?r:"true"===e.getAttribute(g),u=!n&&i&&o.querySelector("[autofocus]");u&&setTimeout(function(){return u&&u.focus()}),e.setAttribute(g,i),o[i?"removeAttribute":"setAttribute"]("hidden","")}i(c,"keydown",function(e){if(e.keyCode===f)for(var t=e.target;t;t=t.parentElement){var o=t.id&&document.querySelector('[aria-controls="'+t.id+'"]')||t;if("false"!==o.getAttribute(c)&&"true"===o.getAttribute(g))return e.preventDefault(),o.focus(),h(o,!1)}},!0),i(c,"click",function(e){var r=e.target;if(e.defaultPrevented)return!1;for(var t=r,o=void 0;t;t=t.parentElement){var n=o&&t.id&&document.querySelector("["+c+'][aria-controls="'+t.id+'"]');if("BUTTON"!==t.nodeName&&"A"!==t.nodeName||t.hasAttribute(c)||(o=t),n){p(n,"toggle.select",{relatedTarget:v(n),currentTarget:o,value:o.textContent.trim()});break}}s("["+c+"]").forEach(function(e){var t="true"===e.getAttribute(g),o="false"!==e.getAttribute(c),n=v(e);e.contains(r)?h(e,!t):o&&t&&h(e,n.contains(r))})});var m=function(t){function i(e){t.call(this,e),this.onToggle=this.onToggle.bind(this),this.onToggleSelect=this.onToggleSelect.bind(this)}t&&(i.__proto__=t),(i.prototype=Object.create(t&&t.prototype)).constructor=i;var e={defaultProps:{configurable:!0}};return e.defaultProps.get=function(){return{open:null,popup:null,onToggle:null,onToggleSelect:null}},i.prototype.update=function(){var e,t,i;e=this.el.firstElementChild,t={popup:this.props.popup,open:this.props.open},i="object"==typeof t?t:{open:t},n&&(document.documentElement.style.cursor="pointer"),s(e).map(function(e){var t="true"===e.getAttribute(g),o="boolean"==typeof i.open?i.open:"toggle"===i.open?!t:t,n=String((i.hasOwnProperty("popup")?i.popup:e.getAttribute(c))||!1),r=v(e);return e.setAttribute(c,n),e.setAttribute("aria-label",e.textContent+", "+n.replace(/^true|false$/,"")),e.setAttribute("aria-controls",r.id=r.id||a()),r.setAttribute(d+"-labelledby",e.id=e.id||a()),h(e,o),i.value&&(e.innerHTML=i.value),e})},i.prototype.componentDidMount=function(){this.update(),this.el.addEventListener("toggle",this.onToggle),this.el.addEventListener("toggle.select",this.onToggleSelect)},i.prototype.componentDidUpdate=function(){this.update()},i.prototype.componentWillUnmount=function(){this.el.removeEventListener("toggle",this.onToggle),this.el.removeEventListener("toggle.select",this.onToggleSelect)},i.prototype.onToggle=function(e){this.props.onToggle&&this.props.onToggle(e)},i.prototype.onToggleSelect=function(e){this.props.onToggleSelect&&this.props.onToggleSelect(e)},i.prototype.render=function(){var o,n,e,r=this;return u.createElement("div",(o=this.props,n=i.defaultProps,void 0===(e={ref:function(e){return r.el=e}})&&(e={}),Object.keys(o).reduce(function(e,t){return n.hasOwnProperty(t)||(e[t]=o[t]),e},e)),u.Children.map(this.props.children,function(e,t){return 0===t?u.cloneElement(e,{"aria-expanded":String(Boolean(r.props.open))}):1===t?u.cloneElement(e,{hidden:!r.props.open}):e}))},Object.defineProperties(i,e),i}(u.Component);return m.propTypes={open:e.bool,popup:e.oneOfType([e.bool,e.string]),onToggle:e.func},m});
 //# sourceMappingURL=core-toggle.jsx.js.map

core-toggle.min.js

@@ -1,3 +0,3 @@
-/*! @nrk/core-toggle v1.2.2 - Copyright (c) 2017-2018 NRK */
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):t.coreToggle=e()}("undefined"!=typeof self?self:this,function(){"use strict";var t="undefined"!=typeof window,e=t&&/(android)/i.test(navigator.userAgent),n=t&&/iPad|iPhone|iPod/.test(String(navigator.platform)),o=function(t){void 0===t&&(t=!1);try{window.addEventListener("test",null,{get passive(){t=!0}})}catch(t){}return t}();function r(t,e,n,r){(void 0===r&&(r=!1),"undefined"==typeof window||window[t=t+"-"+e])||(o||"object"!=typeof r||(r=Boolean(r.capture)),("resize"===e||"load"===e?window:document).addEventListener(window[t]=e,n,r))}var u="prevent_recursive_dispatch_maximum_callstack";function a(t,e,n){void 0===n&&(n={});var r,o=""+u+e;if(t[o])return!0;t[o]=!0,"function"==typeof window.CustomEvent?r=new window.CustomEvent(e,{bubbles:!0,cancelable:!0,detail:n}):(r=document.createEvent("CustomEvent")).initCustomEvent(e,!0,!0,n);var i=t.dispatchEvent(r);return t[o]=null,i}function d(t){return Date.now().toString(36)+Math.random().toString(36).slice(2,5)}function c(t,e){if(void 0===e&&(e=document),t){if(t.nodeType)return[t];if("string"==typeof t)return[].slice.call(e.querySelectorAll(t));if(t.length)return[].slice.call(t)}return[]}var l="data-@nrk/core-toggle-1.2.2".replace(/\W+/g,"-"),f=e?"data":"aria",s="aria-expanded",p="data-haspopup",i=27;function v(t){return document.getElementById(t.getAttribute("aria-controls"))||t.nextElementSibling}function g(t,e){var n=v(t),r="true"===t.getAttribute(s),o="boolean"==typeof e?e:"toggle"===e?!r:r,i=r===o||a(t,"toggle",{relatedTarget:n,isOpen:r,willOpen:o})?o:"true"===t.getAttribute(s),u=!r&&i&&n.querySelector("[autofocus]");u&&setTimeout(function(){return u&&u.focus()}),t.setAttribute(s,i),n[i?"removeAttribute":"setAttribute"]("hidden","")}return r(l,"keydown",function(t){if(t.keyCode===i)for(var e=t.target;e;e=e.parentElement){var n=e.id&&document.querySelector('[aria-controls="'+e.id+'"]')||e;if(n.hasAttribute(l)&&n.hasAttribute(p)&&"true"===n.getAttribute(s))return t.preventDefault(),n.focus(),g(n,!1)}},!0),r(l,"click",function(t){var o=t.target;if(t.defaultPrevented)return!1;for(var e=o,n=void 0;e;e=e.parentElement){var r=n&&e.id&&document.querySelector("["+l+'][aria-controls="'+e.id+'"]');if("BUTTON"!==e.nodeName&&"A"!==e.nodeName||e.hasAttribute(l)||(n=e),r){a(r,"toggle.select",{relatedTarget:v(r),currentTarget:n,value:n.textContent.trim()});break}}c("["+l+"]").forEach(function(t){var e="true"===t.getAttribute(s),n=t.hasAttribute(p),r=v(t);t.contains(o)?g(t,!e):n&&e&&g(t,r.contains(o))})}),function(t,e){var i="object"==typeof e?e:{open:e};return n&&(document.documentElement.style.cursor="pointer"),c(t).map(function(t){var e="true"===t.getAttribute(s),n="boolean"==typeof i.open?i.open:"toggle"===i.open?!e:e,r="string"==typeof i.popup?i.popup:t.getAttribute(p),o=v(t);return t.setAttribute(l,""),t[r?"setAttribute":"removeAttribute"](p,r),t.setAttribute("aria-controls",o.id=o.id||d()),o.setAttribute(f+"-labelledby",t.id=t.id||d()),g(t,n),i.value&&(t.innerHTML=i.value),r&&t.setAttribute("aria-label",t.textContent+", "+r),t})}});
+/*! @nrk/core-toggle v2.1.0 - Copyright (c) 2017-2019 NRK */
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e=e||self).coreToggle=t()}(this,function(){"use strict";var e="undefined"!=typeof window,t=e&&/(android)/i.test(navigator.userAgent),n=e&&/iPad|iPhone|iPod/.test(String(navigator.platform)),o=function(e){void 0===e&&(e=!1);try{window.addEventListener("test",null,{get passive(){e=!0}})}catch(e){}return e}();function r(e,t,n,r){(void 0===r&&(r=!1),"undefined"==typeof window||window[e=e+"-"+t])||(o||"object"!=typeof r||(r=Boolean(r.capture)),("resize"===t||"load"===t?window:document).addEventListener(window[e]=t,n,r))}var u="prevent_recursive_dispatch_maximum_callstack";function a(e,t,n){void 0===n&&(n={});var r,o=""+u+t;if(e[o])return!0;e[o]=!0,"function"==typeof window.CustomEvent?r=new window.CustomEvent(t,{bubbles:!0,cancelable:!0,detail:n}):(r=document.createEvent("CustomEvent")).initCustomEvent(t,!0,!0,n);var i=e.dispatchEvent(r);return e[o]=null,i}function d(e){return Date.now().toString(36)+Math.random().toString(36).slice(2,5)}function l(e,t){if(void 0===t&&(t=document),e){if(e.nodeType)return[e];if("string"==typeof e)return[].slice.call(t.querySelectorAll(e));if(e.length)return[].slice.call(e)}return[]}var c="data-@nrk/core-toggle-2.1.0".replace(/\W+/g,"-"),f=t?"data":"aria",s="aria-expanded",i=27;function p(e){return document.getElementById(e.getAttribute("aria-controls"))||e.nextElementSibling}function g(e,t){var n=p(e),r="true"===e.getAttribute(s),o="boolean"==typeof t?t:"toggle"===t?!r:r,i=r===o||a(e,"toggle",{relatedTarget:n,isOpen:r,willOpen:o})?o:"true"===e.getAttribute(s),u=!r&&i&&n.querySelector("[autofocus]");u&&setTimeout(function(){return u&&u.focus()}),e.setAttribute(s,i),n[i?"removeAttribute":"setAttribute"]("hidden","")}return r(c,"keydown",function(e){if(e.keyCode===i)for(var t=e.target;t;t=t.parentElement){var n=t.id&&document.querySelector('[aria-controls="'+t.id+'"]')||t;if("false"!==n.getAttribute(c)&&"true"===n.getAttribute(s))return e.preventDefault(),n.focus(),g(n,!1)}},!0),r(c,"click",function(e){var o=e.target;if(e.defaultPrevented)return!1;for(var t=o,n=void 0;t;t=t.parentElement){var r=n&&t.id&&document.querySelector("["+c+'][aria-controls="'+t.id+'"]');if("BUTTON"!==t.nodeName&&"A"!==t.nodeName||t.hasAttribute(c)||(n=t),r){a(r,"toggle.select",{relatedTarget:p(r),currentTarget:n,value:n.textContent.trim()});break}}l("["+c+"]").forEach(function(e){var t="true"===e.getAttribute(s),n="false"!==e.getAttribute(c),r=p(e);e.contains(o)?g(e,!t):n&&t&&g(e,r.contains(o))})}),function(e,t){var i="object"==typeof t?t:{open:t};return n&&(document.documentElement.style.cursor="pointer"),l(e).map(function(e){var t="true"===e.getAttribute(s),n="boolean"==typeof i.open?i.open:"toggle"===i.open?!t:t,r=String((i.hasOwnProperty("popup")?i.popup:e.getAttribute(c))||!1),o=p(e);return e.setAttribute(c,r),e.setAttribute("aria-label",e.textContent+", "+r.replace(/^true|false$/,"")),e.setAttribute("aria-controls",o.id=o.id||d()),o.setAttribute(f+"-labelledby",e.id=e.id||d()),g(e,n),i.value&&(e.innerHTML=i.value),e})}});
 //# sourceMappingURL=core-toggle.min.js.map

core-toggle.test.js

 /* global expect, describe, it */
-
+const { name, version } = require('./package.json')
 const coreToggle = require('./core-toggle.min')
+const UUID = `data-${name}-${version}`.replace(/\W+/g, '-')
 
@@ -20,3 +21,3 @@ const standardHTML = `
     coreToggle(button)
-    expect(button.hasAttribute('data-haspopup')).toEqual(false)
+    expect(button.getAttribute(UUID)).toEqual('false')
     expect(button.getAttribute('aria-expanded')).toEqual('false')
@@ -50,3 +51,3 @@ expect(button.getAttribute('aria-controls')).toEqual(container.id)
     coreToggle(button, { popup: 'Test' })
-    expect(button.hasAttribute('data-haspopup')).toEqual(true)
+    expect(button.getAttribute(UUID)).toEqual('Test')
   })
@@ -59,3 +60,3 @@
     coreToggle(button, { popup: 'Tekst', open: true })
-    expect(button.getAttribute('data-haspopup')).toEqual('Tekst')
+    expect(button.getAttribute(UUID)).toEqual('Tekst')
     expect(container.hasAttribute('hidden')).toEqual(false)
@@ -62,0 +63,0 @@ })

core-toggle.test.jsx

@@ -48,3 +48,3 @@ /* global expect, describe, it */
     expect(container.hasAttribute('hidden')).toEqual(true)
-    expect(button.getAttribute('data-haspopup')).toEqual('Tekst')
+    expect(button.getAttribute(UUID)).toEqual('Tekst')
     expect(button.getAttribute('aria-expanded')).toEqual('false')
@@ -58,5 +58,5 @@ })
     expect(container.hasAttribute('hidden')).toEqual(false)
-    expect(button.getAttribute('data-haspopup')).toEqual('Tekst')
+    expect(button.getAttribute(UUID)).toEqual('Tekst')
     expect(button.getAttribute('aria-expanded')).toEqual('true')
   })
 })

jsx.js

@@ -9,3 +9,3 @@ 'use strict';
 var name = "@nrk/core-toggle";
-var version = "1.2.2";
+var version = "2.1.0";
 
@@ -111,3 +111,2 @@ var IS_BROWSER = typeof window !== 'undefined';
 var OPEN = 'aria-expanded';
-var POPUP = 'data-haspopup'; // aria-haspopup triggers forms mode in JAWS, therefore data-
 var KEYS = { ESC: 27 };
@@ -122,7 +121,7 @@
     var open = typeof options.open === 'boolean' ? options.open : (options.open === 'toggle' ? !isOpen : isOpen);
-    var popup = typeof options.popup === 'string' ? options.popup : toggle.getAttribute(POPUP);
+    var popup = String((options.hasOwnProperty('popup') ? options.popup : toggle.getAttribute(UUID)) || false);
     var content = getContentElement(toggle);
 
-    toggle.setAttribute(UUID, '');
-    toggle[popup ? 'setAttribute' : 'removeAttribute'](POPUP, popup);
+    toggle.setAttribute(UUID, popup); // aria-haspopup triggers forms mode in JAWS, therefore store in uuid
+    toggle.setAttribute('aria-label', ((toggle.textContent) + ", " + (popup.replace(/^true|false$/, ''))));
     toggle.setAttribute('aria-controls', content.id = content.id || getUUID());
@@ -132,3 +131,2 @@ content.setAttribute((ARIA + "-labelledby"), toggle.id = toggle.id || getUUID());
     if (options.value) { toggle.innerHTML = options.value; }
-    if (popup) { toggle.setAttribute('aria-label', ((toggle.textContent) + ", " + popup)); }
     return toggle
@@ -147,3 +145,3 @@ })
 
-    if (toggle.hasAttribute(UUID) && toggle.hasAttribute(POPUP) && toggle.getAttribute(OPEN) === 'true') {
+    if (toggle.getAttribute(UUID) !== 'false' && toggle.getAttribute(OPEN) === 'true') {
       event.preventDefault(); // Prevent leaving maximized window in Safari
@@ -177,3 +175,3 @@ toggle.focus();
     var open = toggle.getAttribute(OPEN) === 'true';
-    var popup = toggle.hasAttribute(POPUP);
+    var popup = toggle.getAttribute(UUID) !== 'false';
     var content = getContentElement(toggle);
@@ -204,2 +202,3 @@
     this.onToggle = this.onToggle.bind(this);
+    this.onToggleSelect = this.onToggleSelect.bind(this);
   }
@@ -212,11 +211,26 @@
   var staticAccessors = { defaultProps: { configurable: true } };
-  staticAccessors.defaultProps.get = function () { return { open: null, popup: null, onToggle: null } };
+  staticAccessors.defaultProps.get = function () { return { open: null, popup: null, onToggle: null, onToggleSelect: null } };
 
+  Toggle.prototype.update = function update () {
+    toggle(this.el.firstElementChild, {
+      popup: this.props.popup,
+      open: this.props.open
+    });
+  };
   Toggle.prototype.componentDidMount = function componentDidMount () {
-    toggle(this.el.firstElementChild); // Mount client side only to avoid rerender
+    this.update();
     this.el.addEventListener('toggle', this.onToggle);
+    this.el.addEventListener('toggle.select', this.onToggleSelect);
   };
-  Toggle.prototype.componentDidUpdate = function componentDidUpdate () { toggle(this.el.firstElementChild); }; // Must mount also on update in case content changes
-  Toggle.prototype.componentWillUnmount = function componentWillUnmount () { this.el.removeEventListener('toggle', this.onToggle); };
-  Toggle.prototype.onToggle = function onToggle (event) { this.props.onToggle && this.props.onToggle(event); };
+  Toggle.prototype.componentDidUpdate = function componentDidUpdate () { this.update(); };
+  Toggle.prototype.componentWillUnmount = function componentWillUnmount () {
+    this.el.removeEventListener('toggle', this.onToggle);
+    this.el.removeEventListener('toggle.select', this.onToggleSelect);
+  };
+  Toggle.prototype.onToggle = function onToggle (event) {
+    this.props.onToggle && this.props.onToggle(event);
+  };
+  Toggle.prototype.onToggleSelect = function onToggleSelect (event) {
+    this.props.onToggleSelect && this.props.onToggleSelect(event);
+  };
   Toggle.prototype.render = function render () {
@@ -229,4 +243,3 @@ var this$1 = this;
           return React.cloneElement(child, {
-            'aria-expanded': String(Boolean(this$1.props.open)),
-            'data-haspopup': this$1.props.popup
+            'aria-expanded': String(Boolean(this$1.props.open))
           })
@@ -233,0 +246,0 @@ }

package.json

@@ -5,3 +5,3 @@ {
   "author": "NRK <[e-mail]> (https://www.nrk.no/)",
-  "version": "2.0.0",
+  "version": "2.2.0",
   "license": "MIT",
@@ -8,0 +8,0 @@ "main": "core-toggle.cjs.js",

readme.md

@@ -113,5 +113,33 @@ # Core Toggle
 
+```html
+<!--demo-->
+<div id="jsx-toggle-select"></div>
+<script type="text/jsx">
+  class MyToggleSelect extends React.Component {
+    constructor (props) {
+      super(props)
+      this.state = { value: 'Select number' }
+      this.onSelect = this.onSelect.bind(this)
+    }
+    onSelect (event) {
+      this.setState({ value: event.detail.value })
+    }
+    render () {
+      return <CoreToggle popup='Example picker' open={false} onToggleSelect={this.onSelect}>
+        <button>{this.state.value}</button>
+        <ul className='my-dropdown'>
+          <li><button>One</button></li>
+          <li><button>Two</button></li>
+          <li><button>Three</button></li>
+        </ul>
+      </CoreToggle>
+    }
+  }
+  ReactDOM.render(<MyToggleSelect/>, document.getElementById('jsx-toggle-select'))
+</script>
+```
+
 ## Usage
 
-### JavaScript
+### HTML / JavaScript
 
@@ -126,9 +154,15 @@ ```html
 
-coreToggle(String|Element|Elements, { // Accepts a selector string, NodeList, Element or array of Elements
-  open: null,                         // Defaults to value of aria-expanded or false. Use true|false to force open state
-  popup: false|String                 // Defaults to false. Use string to enable popup (click-outside-to-close)
-  value: undefined|String             // Defaults to existing markup value. Pass string to change the button's innerHTML.
+coreToggle(
+  selector, // Accepts a selector string, NodeList, Element or array of Elements
+  options   // An object. See table below for possible properties
 })
 ```
 
+
+Property | Default | Type | Description
+:-- | :-- | :-- | :--
+open | `aria-expanded` or `false` | `null` or `String` | Use `true` or `false` to force open state.
+popup | `false` | `Boolean` or `String` | Enable or disable if clicking outside toggle should close it. Provide a string to control the `aria-label` text on the toggle.
+
+
 ### React / Preact
@@ -135,0 +169,0 @@

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

90133

increased by20.38%

Number of package files

13

increased by8.33%

Lines of code

644

increased by4.21%

Number of lines in readme file

266

increased by14.66%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes