@nrk/core-toggle - npm Package Compare versions

Comparing version 1.0.1 to 1.0.2

core-toggle.js

 import {name, version} from './package.json'
 import {addEvent, ariaExpand, ariaTarget, queryAll} from '../utils'
 
-const UUID = `data-${name}-${version}`.replace(/\W+/g, '-')         // Strip invalid attribute characters
+const UUID = `data-${name}-${version}`.replace(/\W+/g, '-') // Strip invalid attribute characters
 const OPEN = 'aria-expanded'
@@ -12,5 +12,4 @@ const POPS = 'aria-haspopup'
   const options = typeof open === 'object' ? open : {open}
-  const buttons = queryAll(selector)
 
-  buttons.forEach((button) => {
+  return queryAll(selector).forEach((button) => {
     const open = isBool(options.open) ? options.open : button.getAttribute(OPEN) === 'true'
@@ -24,5 +23,4 @@ const pops = isBool(options.popup) ? options.popup : button.getAttribute(POPS) === 'true'
     ariaExpand(button, open)
+    return button
   })
-
-  return buttons
 }
@@ -35,5 +33,5 @@
 
-    if (el.contains(target)) toggle(el, !open)                  // Click on toggle
-    else if (pops) toggle(el, ariaTarget(el).contains(target))  // Click in target or outside
+    if (el.contains(target)) toggle(el, !open) // Click on toggle
+    else if (pops) toggle(el, ariaTarget(el).contains(target)) // Click in target or outside
   })
 })

core-toggle.jsx

 import React from 'react'
-import ReactDOM from 'react-dom';
 import coreToggle from '../core-toggle/core-toggle'
-import {assign} from '../utils'
+import {exclude} from '../utils'
 
-function mountToggle (self) {
-  coreToggle(ReactDOM.findDOMNode(self).firstElementChild)      // Button must be first child
-}
+const DEFAULTS = {open: null, popup: null}
 
 export default class Toggle extends React.Component {
-  componentDidMount () { mountToggle(this) }                    // Mount client side only to avoid rerender
-  componentDidUpdate () { mountToggle(this) }                   // Must mount also on update in case content changes
+  componentDidMount () { coreToggle(this.el.firstElementChild) } // Mount client side only to avoid rerender
+  componentDidUpdate () { coreToggle(this.el.firstElementChild) } // Must mount also on update in case content changes
   render () {
-    return <div {...assign({}, this.props, {open: null, popup: null})}>
-      {React.Children.map(this.props.children, (child, i) => {  // Augment children with aria-attributes
-        return assign({}, child, {
-          props: assign({}, child.props, i ?
-            {'hidden': !this.props.open} :
-            {
-              'aria-expanded': String(Boolean(this.props.open)),
-              'aria-haspopup': String(Boolean(this.props.popup))
-            }
-          )
+    return React.createElement('div', exclude(this.props, DEFAULTS, {ref: (el) => (this.el = el)}),
+      React.Children.map(this.props.children, (child, adjacent) => adjacent
+        ? React.cloneElement(child, {'hidden': !this.props.open})
+        : React.cloneElement(child, {
+          'aria-expanded': String(Boolean(this.props.open)),
+          'aria-haspopup': String(Boolean(this.props.popup))
         })
-      })}
-    </div>
+      )
+    )
   }
 }

core-toggle.min.js

@@ -1,2 +0,2 @@
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):t.coreToggle=e()}(this,function(){"use strict";var t="undefined"!=typeof window&&/(android)/i.test(window.navigator.userAgent),e='a,button,input,select,textarea,iframe,[tabindex],[contenteditable="true"]';function n(t,e){var n=o(t),r="true"===t.getAttribute("aria-expanded"),u="boolean"==typeof e?e:"toggle"===e?!r:r,a=r===u||function(t,e,n){void 0===n&&(n={});return t.dispatchEvent(new i(e,{bubbles:!0,cancelable:!0,detail:n}))}(t,"toggle",{relatedTarget:n,isOpen:r})?u:r;return n[a?"removeAttribute":"setAttribute"]("hidden",""),t.setAttribute("aria-expanded",a),a}function o(e,n,o){var i=e.getAttribute("aria-controls")||e.getAttribute("aria-owns")||e.getAttribute("list"),u=o||document.getElementById(i)||e.nextElementSibling,a=t?"data":"aria";if(!u)throw new Error("missing nextElementSibling on "+e.outerHTML);return n&&(e.setAttribute("aria-"+n,u.id=u.id||r()),u.setAttribute(a+"-labelledby",e.id=e.id||r())),u}var i=function(){if("undefined"!=typeof window)return"function"==typeof window.CustomEvent?window.CustomEvent:(t.prototype=window.Event.prototype,t);function t(t,e){void 0===e&&(e={});var n=document.createEvent("CustomEvent");return n.initCustomEvent(t,Boolean(e.bubbles),Boolean(e.cancelable),e.detail),n}}();function r(t,e){return Date.now().toString(36)+Math.random().toString(36).slice(2,5)}function u(t,n){return void 0===n&&(n=document),":focusable"===t?u(e,n).filter(function(t){return!t.disabled&&function(t){return t.offsetWidth&&t.offsetHeight&&"hidden"!==window.getComputedStyle(t).getPropertyValue("visibility")}(t)}):"string"==typeof t?u(n.querySelectorAll(t)):t.length?[].slice.call(t):t.nodeType?[t]:[]}var a,d,c,l="data-@nrk/core-toggle-1.0.0".replace(/\W+/g,"-"),f="aria-expanded",s="aria-haspopup",p=function(t){return"boolean"==typeof t};function b(t,e){var i="object"==typeof e?e:{open:e},r=u(t);return r.forEach(function(t){var e=p(i.open)?i.open:"true"===t.getAttribute(f),r=p(i.popup)?i.popup:"true"===t.getAttribute(s);t.setAttribute(l,""),t.setAttribute(s,r),o(t,"controls"),n(t,e)}),r}return a=l,d="click",c=function(t){var e=t.target;u("["+l+"]").forEach(function(t){var n="true"===t.getAttribute(f),i="true"===t.getAttribute(s);t.contains(e)?b(t,!n):i&&b(t,o(t).contains(e))})},"undefined"==typeof window||window[a+"-"+d]||document.addEventListener(d,c,window[a+"-"+d]=!0),b});
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):t.coreToggle=e()}(this,function(){"use strict";var t="undefined"!=typeof window,e=t&&/(android)/i.test(navigator.userAgent);t&&/iPad|iPhone|iPod/.test(String(navigator.platform));function n(t,e){var n=r(t),i="true"===t.getAttribute("aria-expanded"),o="boolean"==typeof e?e:"toggle"===e?!i:i,u=i===o||function(t,e,n){void 0===n&&(n={});var r;"function"==typeof window.CustomEvent?r=new window.CustomEvent(e,{bubbles:!0,cancelable:!0,detail:n}):(r=document.createEvent("CustomEvent")).initCustomEvent(e,!0,!0,n);return t.dispatchEvent(r)}(t,"toggle",{relatedTarget:n,isOpen:i})?o:i;return n[u?"removeAttribute":"setAttribute"]("hidden",""),t.setAttribute("aria-expanded",u),u}function r(t,n){var r=t.getAttribute("aria-controls")||t.getAttribute("aria-owns"),o=document.getElementById(r)||t.nextElementSibling,u=e?"data":"aria";if(!o)throw new Error("missing nextElementSibling on "+t.outerHTML);return n&&(t.setAttribute("aria-"+n,o.id=o.id||i()),o.setAttribute(u+"-labelledby",t.id=t.id||i())),o}function i(t,e){return Date.now().toString(36)+Math.random().toString(36).slice(2,5)}function o(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 u,a,d,c,f="data-@nrk/core-toggle-1.0.1".replace(/\W+/g,"-"),l="aria-expanded",s="aria-haspopup",p=function(t){return"boolean"==typeof t};function g(t,e){var i="object"==typeof e?e:{open:e};return o(t).forEach(function(t){var e=p(i.open)?i.open:"true"===t.getAttribute(l),o=p(i.popup)?i.popup:"true"===t.getAttribute(s);return t.setAttribute(f,""),t.setAttribute(s,o),r(t,"controls"),n(t,e),t})}return a=function(t){var e=t.target;o("["+f+"]").forEach(function(t){var n="true"===t.getAttribute(l),i="true"===t.getAttribute(s);t.contains(e)?g(t,!n):i&&g(t,r(t).contains(e))})},d="blur"===(u="click")||"focus"===u,c=f+"-"+u,"undefined"==typeof window||window[c]||document.addEventListener(window[c]=u,a,d),g});
 //# sourceMappingURL=core-toggle.min.js.map

core-toggle.test.js

@@ -1,3 +0,2 @@
-/* globals describe, it, beforeEach, afterEach */
-const toggle = require('./core-toggle.cjs')
+const toggle = require('./core-toggle.min.js')
 
@@ -4,0 +3,0 @@ describe('toggle', () => {

jsx/index.js

@@ -1,2 +0,2 @@
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e(require("react"),require("react-dom")):"function"==typeof define&&define.amd?define(["react","react-dom"],e):t.Toggle=e(t.React,t.ReactDOM)}(this,function(t,e){"use strict";t=t&&t.hasOwnProperty("default")?t.default:t,e=e&&e.hasOwnProperty("default")?e.default:e;var n="undefined"!=typeof window&&/(android)/i.test(window.navigator.userAgent),o='a,button,input,select,textarea,iframe,[tabindex],[contenteditable="true"]';function r(t){for(var e=[],n=arguments.length-1;n-- >0;)e[n]=arguments[n+1];return e.filter(Boolean).forEach(function(e){Object.keys(e).forEach(function(n){return t[n]=e[n]})}),t}function i(t,e){var n=u(t),o="true"===t.getAttribute("aria-expanded"),r="boolean"==typeof e?e:"toggle"===e?!o:o,i=o===r||function(t,e,n){void 0===n&&(n={});return t.dispatchEvent(new a(e,{bubbles:!0,cancelable:!0,detail:n}))}(t,"toggle",{relatedTarget:n,isOpen:o})?r:o;return n[i?"removeAttribute":"setAttribute"]("hidden",""),t.setAttribute("aria-expanded",i),i}function u(t,e,o){var r=t.getAttribute("aria-controls")||t.getAttribute("aria-owns")||t.getAttribute("list"),i=o||document.getElementById(r)||t.nextElementSibling,u=n?"data":"aria";if(!i)throw new Error("missing nextElementSibling on "+t.outerHTML);return e&&(t.setAttribute("aria-"+e,i.id=i.id||p()),i.setAttribute(u+"-labelledby",t.id=t.id||p())),i}var a=function(){if("undefined"!=typeof window)return"function"==typeof window.CustomEvent?window.CustomEvent:(t.prototype=window.Event.prototype,t);function t(t,e){void 0===e&&(e={});var n=document.createEvent("CustomEvent");return n.initCustomEvent(t,Boolean(e.bubbles),Boolean(e.cancelable),e.detail),n}}();function p(t,e){return Date.now().toString(36)+Math.random().toString(36).slice(2,5)}function d(t,e){return void 0===e&&(e=document),":focusable"===t?d(o,e).filter(function(t){return!t.disabled&&function(t){return t.offsetWidth&&t.offsetHeight&&"hidden"!==window.getComputedStyle(t).getPropertyValue("visibility")}(t)}):"string"==typeof t?d(e.querySelectorAll(t)):t.length?[].slice.call(t):t.nodeType?[t]:[]}var c,f,l,s="data-@nrk/core-toggle-1.0.0".replace(/\W+/g,"-"),b="aria-expanded",g="aria-haspopup",y=function(t){return"boolean"==typeof t};function h(t,e){var n="object"==typeof e?e:{open:e},o=d(t);return o.forEach(function(t){var e=y(n.open)?n.open:"true"===t.getAttribute(b),o=y(n.popup)?n.popup:"true"===t.getAttribute(g);t.setAttribute(s,""),t.setAttribute(g,o),u(t,"controls"),i(t,e)}),o}function m(t){h(e.findDOMNode(t).firstElementChild)}return c=s,f="click",l=function(t){var e=t.target;d("["+s+"]").forEach(function(t){var n="true"===t.getAttribute(b),o="true"===t.getAttribute(g);t.contains(e)?h(t,!n):o&&h(t,u(t).contains(e))})},"undefined"==typeof window||window[c+"-"+f]||document.addEventListener(f,l,window[c+"-"+f]=!0),function(e){function n(){e.apply(this,arguments)}return e&&(n.__proto__=e),n.prototype=Object.create(e&&e.prototype),n.prototype.constructor=n,n.prototype.componentDidMount=function(){m(this)},n.prototype.componentDidUpdate=function(){m(this)},n.prototype.render=function(){var e=this;return t.createElement("div",r({},this.props,{open:null,popup:null}),t.Children.map(this.props.children,function(t,n){return r({},t,{props:r({},t.props,n?{hidden:!e.props.open}:{"aria-expanded":String(Boolean(e.props.open)),"aria-haspopup":String(Boolean(e.props.popup))})})}))},n}(t.Component)});
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e(require("react")):"function"==typeof define&&define.amd?define(["react"],e):t.CoreToggle=e(t.React)}(this,function(t){"use strict";t=t&&t.hasOwnProperty("default")?t.default:t;var e="undefined"!=typeof window,n=e&&/(android)/i.test(navigator.userAgent);e&&/iPad|iPhone|iPod/.test(String(navigator.platform));function r(t,e){var n=o(t),r="true"===t.getAttribute("aria-expanded"),i="boolean"==typeof e?e:"toggle"===e?!r:r,u=r===i||function(t,e,n){void 0===n&&(n={});var r;"function"==typeof window.CustomEvent?r=new window.CustomEvent(e,{bubbles:!0,cancelable:!0,detail:n}):(r=document.createEvent("CustomEvent")).initCustomEvent(e,!0,!0,n);return t.dispatchEvent(r)}(t,"toggle",{relatedTarget:n,isOpen:r})?i:r;return n[u?"removeAttribute":"setAttribute"]("hidden",""),t.setAttribute("aria-expanded",u),u}function o(t,e){var r=t.getAttribute("aria-controls")||t.getAttribute("aria-owns"),o=document.getElementById(r)||t.nextElementSibling,u=n?"data":"aria";if(!o)throw new Error("missing nextElementSibling on "+t.outerHTML);return e&&(t.setAttribute("aria-"+e,o.id=o.id||i()),o.setAttribute(u+"-labelledby",t.id=t.id||i())),o}function i(t,e){return Date.now().toString(36)+Math.random().toString(36).slice(2,5)}function u(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 a,p,d,c,l="data-@nrk/core-toggle-1.0.1".replace(/\W+/g,"-"),f="aria-expanded",s="aria-haspopup",g=function(t){return"boolean"==typeof t};function b(t,e){var n="object"==typeof e?e:{open:e};return u(t).forEach(function(t){var e=g(n.open)?n.open:"true"===t.getAttribute(f),i=g(n.popup)?n.popup:"true"===t.getAttribute(s);return t.setAttribute(l,""),t.setAttribute(s,i),o(t,"controls"),r(t,e),t})}p=function(t){var e=t.target;u("["+l+"]").forEach(function(t){var n="true"===t.getAttribute(f),r="true"===t.getAttribute(s);t.contains(e)?b(t,!n):r&&b(t,o(t).contains(e))})},d="blur"===(a="click")||"focus"===a,c=l+"-"+a,"undefined"==typeof window||window[c]||document.addEventListener(window[c]=a,p,d);var m={open:null,popup:null};return function(e){function n(){e.apply(this,arguments)}return e&&(n.__proto__=e),n.prototype=Object.create(e&&e.prototype),n.prototype.constructor=n,n.prototype.componentDidMount=function(){b(this.el.firstElementChild)},n.prototype.componentDidUpdate=function(){b(this.el.firstElementChild)},n.prototype.render=function(){var e=this;return t.createElement("div",function(t,e,n){return void 0===n&&(n={}),Object.keys(t).reduce(function(n,r){return e.hasOwnProperty(r)||(n[r]=t[r]),n},n)}(this.props,m,{ref:function(t){return e.el=t}}),t.Children.map(this.props.children,function(n,r){return r?t.cloneElement(n,{hidden:!e.props.open}):t.cloneElement(n,{"aria-expanded":String(Boolean(e.props.open)),"aria-haspopup":String(Boolean(e.props.popup))})}))},n}(t.Component)});
 //# sourceMappingURL=index.js.map

package.json

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

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

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

Improved metrics

Total package byte prevSize

33063

increased by8.82%

Number of package files

9

increased by12.5%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Lines of code

74

decreased by-13.95%

No dependency changes