@nrk/core-toggle - npm Package Compare versions

Comparing version 3.0.4 to 3.0.5

core-toggle.cjs.js

@@ -143,13 +143,4 @@ 'use strict';
 
-var IS_IOS = IS_BROWSER && /iPad|iPhone|iPod/.test(String(navigator.platform)); // Polyfill toggleAttribute for IE
+var IS_IOS = IS_BROWSER && /iPad|iPhone|iPod/.test(String(navigator.platform)); // Mock HTMLElement for Node
 
-if (IS_BROWSER && !window.Element.prototype.toggleAttribute) {
-  window.Element.prototype.toggleAttribute = function (name) {
-    var force = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : !this.hasAttribute(name);
-    if (!force === this.hasAttribute(name)) this[force ? 'setAttribute' : 'removeAttribute'](name, '');
-    return force;
-  };
-} // Mock HTMLElement for Node
-
-
 if (!IS_BROWSER && !global.HTMLElement) {
@@ -227,3 +218,16 @@ global.HTMLElement =
 }
+/**
+ * toggleAttribute (Ponyfill for IE and Edge, fixes #299)
+ * @link https://developer.mozilla.org/en-US/docs/Web/API/Element/toggleAttribute
+ * @param {Element} el  Single DOM Element
+ * @param {String} name The name of the attribute to be toggled
+ * @param {Boolean} force Force attribute to be added or removed regardless of previous state
+ */
 
+function toggleAttribute(el, name) {
+  var force = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : !this.hasAttribute(name);
+  if (!force === el.hasAttribute(name)) el[force ? 'setAttribute' : 'removeAttribute'](name, '');
+  return force;
+}
+
 var CoreToggle =
@@ -323,3 +327,3 @@ /*#__PURE__*/
     set: function set(val) {
-      this.toggleAttribute('hidden', val);
+      toggleAttribute(this, 'hidden', val);
     } // Sets this.button aria-label, so visible button text can be augmentet with intension of button
@@ -326,0 +330,0 @@ // Example: Button text: "01.02.2019", aria-label: "01.02.2019, Choose date"

core-toggle.js

@@ -1,2 +0,2 @@
-import { IS_ANDROID, IS_IOS, closest, dispatchEvent, getUUID } from '../utils'
+import { IS_ANDROID, IS_IOS, closest, dispatchEvent, getUUID, toggleAttribute } from '../utils'
 
@@ -17,2 +17,3 @@ export default class CoreToggle extends HTMLElement {
   }
+
   disconnectedCallback () {
@@ -23,2 +24,3 @@ this._button = null
   }
+
   attributeChangedCallback () {
@@ -31,2 +33,3 @@ if (this._open === this.hidden) { // this._open comparison ensures actual change
   }
+
   handleEvent (event) {
@@ -50,2 +53,3 @@ if (event.defaultPrevented) return
   }
+
   get button () {
@@ -58,2 +62,3 @@ if (this._button && this._button.getAttribute('for') === this.id) return this._button // Speed up
   get popup () { return this.getAttribute('popup') === 'true' || this.getAttribute('popup') || this.hasAttribute('popup') }
+
   set popup (val) { this[val === false ? 'removeAttribute' : 'setAttribute']('popup', val) }
@@ -63,4 +68,5 @@
   get hidden () { return this.hasAttribute('hidden') }
-  set hidden (val) { this.toggleAttribute('hidden', val) }
 
+  set hidden (val) { toggleAttribute(this, 'hidden', val) }
+
   // Sets this.button aria-label, so visible button text can be augmentet with intension of button
@@ -70,2 +76,3 @@ // Example: Button text: "01.02.2019", aria-label: "01.02.2019, Choose date"
   get value () { return this.button.value || this.button.textContent }
+
   set value (data = false) {
@@ -72,0 +79,0 @@ if (!this.button || !this.popup.length) return

core-toggle.jsx.js

@@ -149,13 +149,4 @@ (function (global, factory) {
 
-  var IS_IOS = IS_BROWSER && /iPad|iPhone|iPod/.test(String(navigator.platform)); // Polyfill toggleAttribute for IE
+  var IS_IOS = IS_BROWSER && /iPad|iPhone|iPod/.test(String(navigator.platform)); // Mock HTMLElement for Node
 
-  if (IS_BROWSER && !window.Element.prototype.toggleAttribute) {
-    window.Element.prototype.toggleAttribute = function (name) {
-      var force = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : !this.hasAttribute(name);
-      if (!force === this.hasAttribute(name)) this[force ? 'setAttribute' : 'removeAttribute'](name, '');
-      return force;
-    };
-  } // Mock HTMLElement for Node
-
-
   if (!IS_BROWSER && !global.HTMLElement) {
@@ -233,3 +224,16 @@ global.HTMLElement =
   }
+  /**
+   * toggleAttribute (Ponyfill for IE and Edge, fixes #299)
+   * @link https://developer.mozilla.org/en-US/docs/Web/API/Element/toggleAttribute
+   * @param {Element} el  Single DOM Element
+   * @param {String} name The name of the attribute to be toggled
+   * @param {Boolean} force Force attribute to be added or removed regardless of previous state
+   */
 
+  function toggleAttribute(el, name) {
+    var force = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : !this.hasAttribute(name);
+    if (!force === el.hasAttribute(name)) el[force ? 'setAttribute' : 'removeAttribute'](name, '');
+    return force;
+  }
+
   var CoreToggle =
@@ -329,3 +333,3 @@ /*#__PURE__*/
       set: function set(val) {
-        this.toggleAttribute('hidden', val);
+        toggleAttribute(this, 'hidden', val);
       } // Sets this.button aria-label, so visible button text can be augmentet with intension of button
@@ -363,3 +367,3 @@ // Example: Button text: "01.02.2019", aria-label: "01.02.2019, Choose date"
 
-  var version = "3.0.4";
+  var version = "3.0.5";
 
@@ -408,3 +412,3 @@ /**
     var customEvents = options.customEvents || [];
-    var skipProps = customProps.slice(); // Keep a copy
+    var skipProps = customProps.concat('forwardRef'); // Keep a copy with forwardRef added
 
@@ -420,2 +424,9 @@ var tagName = (dashCase + "-" + (options.suffix || 'react')).replace(/\W+/g, '-').toLowerCase();
           this.ref = function (el) {
+            // Support callback ref https://reactjs.org/docs/refs-and-the-dom.html#callback-refs
+            if (typeof this$1.props.forwardRef === 'function') {
+              this$1.props.forwardRef(el);
+            } else if (this$1.props.forwardRef) {
+              this$1.props.forwardRef.current = el;
+            }
+
             return this$1.el = el;
@@ -449,3 +460,3 @@ };
           customProps.forEach(function (key) {
-            return this$1.props.hasOwnProperty(key) && (this$1.el[key] = this$1.props[key]);
+            return key in this$1.props && (this$1.el[key] = this$1.props[key]);
           });
@@ -452,0 +463,0 @@ customEvents.forEach(function (key) {

core-toggle.min.js

@@ -1,3 +0,3 @@
-/*! @nrk/core-toggle v3.0.4 - Copyright (c) 2017-2019 NRK */
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t=t||self).coreToggle=e()}(this,function(){"use strict";function r(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function u(t,e){for(var n=0;n<e.length;n++){var i=e[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(t,i.key,i)}}function c(t){return(c=Object.setPrototypeOf?Object.getPrototypeOf:function(t){return t.__proto__||Object.getPrototypeOf(t)})(t)}function s(t,e){return(s=Object.setPrototypeOf||function(t,e){return t.__proto__=e,t})(t,e)}function o(t,e,n){return(o=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Date.prototype.toString.call(Reflect.construct(Date,[],function(){})),!0}catch(t){return!1}}()?Reflect.construct:function(t,e,n){var i=[null];i.push.apply(i,e);var o=new(Function.bind.apply(t,i));return n&&s(o,n.prototype),o}).apply(null,arguments)}function a(t){var i="function"==typeof Map?new Map:void 0;return(a=function(t){if(null===t||(e=t,-1===Function.toString.call(e).indexOf("[native code]")))return t;var e;if("function"!=typeof t)throw new TypeError("Super expression must either be null or a function");if(void 0!==i){if(i.has(t))return i.get(t);i.set(t,n)}function n(){return o(t,arguments,c(this).constructor)}return n.prototype=Object.create(t.prototype,{constructor:{value:n,enumerable:!1,writable:!0,configurable:!0}}),s(n,t)})(t)}function l(t,e){return!e||"object"!=typeof e&&"function"!=typeof e?function(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}(t):e}var t="undefined"!=typeof window,f=t&&/(android)/i.test(navigator.userAgent),h=t&&/iPad|iPhone|iPod/.test(String(navigator.platform));t&&!window.Element.prototype.toggleAttribute&&(window.Element.prototype.toggleAttribute=function(t){var e=1<arguments.length&&void 0!==arguments[1]?arguments[1]:!this.hasAttribute(t);return!e===this.hasAttribute(t)&&this[e?"setAttribute":"removeAttribute"](t,""),e}),t||global.HTMLElement||(global.HTMLElement=function(){return function t(){r(this,t)}}());var e,n,p=(e="undefined"==typeof window?{}:window.Element.prototype,n=e.matches||e.msMatchesSelector||e.webkitMatchesSelector,e.closest?function(t,e){return t.closest(e)}:function(t,e){for(;t;t=t.parentElement)if(n.call(t,e))return t;return null});function d(t,e){var n,i=2<arguments.length&&void 0!==arguments[2]?arguments[2]:{},o="prevent_recursive_dispatch_maximum_callstack".concat(e);if(t[o])return!0;t[o]=!0,"function"==typeof window.CustomEvent?n=new window.CustomEvent(e,{bubbles:!0,cancelable:!0,detail:i}):(n=document.createEvent("CustomEvent")).initCustomEvent(e,!0,!0,i);var r=t.dispatchEvent(n);return t[o]=null,r}function b(){return Date.now().toString(36)+Math.random().toString(36).slice(2,5)}return function(t){function e(){return r(this,e),l(this,c(e).apply(this,arguments))}var n,i,o;return function(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),e&&s(t,e)}(e,a(HTMLElement)),n=e,o=[{key:"observedAttributes",get:function(){return["hidden"]}}],(i=[{key:"connectedCallback",value:function(){h&&(document.documentElement.style.cursor="pointer"),f||this.setAttribute("aria-labelledby",this.button.id=this.button.id||b()),this.value=this.button.textContent,this.setAttribute("role","group"),this.button.setAttribute("aria-expanded",this._open=!this.hidden),this.button.setAttribute("aria-controls",this.id=this.id||b()),document.addEventListener("keydown",this,!0),document.addEventListener("click",this)}},{key:"disconnectedCallback",value:function(){this._button=null,document.removeEventListener("keydown",this,!0),document.removeEventListener("click",this)}},{key:"attributeChangedCallback",value:function(){if(this._open===this.hidden){this.button.setAttribute("aria-expanded",this._open=!this.hidden);try{this.querySelector("[autofocus]").focus()}catch(t){}d(this,"toggle")}}},{key:"handleEvent",value:function(t){if(!t.defaultPrevented){if("keydown"===t.type&&27===t.keyCode)if(t.target.getAttribute&&"true"===t.target.getAttribute("aria-expanded")?t.target===this.button:p(t.target,this.nodeName)===this)return this.hidden=!0,this.button.focus(),t.preventDefault();if("click"===t.type){var e=p(t.target,"a,button");e&&!e.hasAttribute("aria-expanded")&&p(t.target,this.nodeName)===this?d(this,"toggle.select",e):e&&e.getAttribute("aria-controls")===this.id?this.hidden=!this.hidden:this.popup&&!this.contains(t.target)&&(this.hidden=!0)}}}},{key:"button",get:function(){return this._button&&this._button.getAttribute("for")===this.id?this._button:(this._button=this.id&&document.querySelector('[for="'.concat(this.id,'"]')))||this.previousElementSibling}},{key:"popup",get:function(){return"true"===this.getAttribute("popup")||this.getAttribute("popup")||this.hasAttribute("popup")},set:function(t){this[!1===t?"removeAttribute":"setAttribute"]("popup",t)}},{key:"hidden",get:function(){return this.hasAttribute("hidden")},set:function(t){this.toggleAttribute("hidden",t)}},{key:"value",get:function(){return this.button.value||this.button.textContent},set:function(){var t=0<arguments.length&&void 0!==arguments[0]&&arguments[0];if(this.button&&this.popup.length){var e=this.button,n=(e.getAttribute("aria-label")||",".concat(this.popup)).split(",")[1],i=t.textContent||t||"";n===this.popup&&(e.value=t.value||i,e[t.innerHTML?"innerHTML":"textContent"]=t.innerHTML||i,e.setAttribute("aria-label","".concat(e.textContent,",").concat(this.popup)))}}}])&&u(n.prototype,i),o&&u(n,o),e}()}),window.customElements.define("core-toggle",coreToggle);
+/*! @nrk/core-toggle v3.0.5 - Copyright (c) 2017-2019 NRK */
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t=t||self).coreToggle=e()}(this,function(){"use strict";function r(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function u(t,e){for(var n=0;n<e.length;n++){var i=e[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(t,i.key,i)}}function c(t){return(c=Object.setPrototypeOf?Object.getPrototypeOf:function(t){return t.__proto__||Object.getPrototypeOf(t)})(t)}function s(t,e){return(s=Object.setPrototypeOf||function(t,e){return t.__proto__=e,t})(t,e)}function o(t,e,n){return(o=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Date.prototype.toString.call(Reflect.construct(Date,[],function(){})),!0}catch(t){return!1}}()?Reflect.construct:function(t,e,n){var i=[null];i.push.apply(i,e);var o=new(Function.bind.apply(t,i));return n&&s(o,n.prototype),o}).apply(null,arguments)}function a(t){var i="function"==typeof Map?new Map:void 0;return(a=function(t){if(null===t||(e=t,-1===Function.toString.call(e).indexOf("[native code]")))return t;var e;if("function"!=typeof t)throw new TypeError("Super expression must either be null or a function");if(void 0!==i){if(i.has(t))return i.get(t);i.set(t,n)}function n(){return o(t,arguments,c(this).constructor)}return n.prototype=Object.create(t.prototype,{constructor:{value:n,enumerable:!1,writable:!0,configurable:!0}}),s(n,t)})(t)}function l(t,e){return!e||"object"!=typeof e&&"function"!=typeof e?function(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}(t):e}var t="undefined"!=typeof window,f=t&&/(android)/i.test(navigator.userAgent),h=t&&/iPad|iPhone|iPod/.test(String(navigator.platform));t||global.HTMLElement||(global.HTMLElement=function(){return function t(){r(this,t)}}());var e,n,d=(e="undefined"==typeof window?{}:window.Element.prototype,n=e.matches||e.msMatchesSelector||e.webkitMatchesSelector,e.closest?function(t,e){return t.closest(e)}:function(t,e){for(;t;t=t.parentElement)if(n.call(t,e))return t;return null});function p(t,e){var n,i=2<arguments.length&&void 0!==arguments[2]?arguments[2]:{},o="prevent_recursive_dispatch_maximum_callstack".concat(e);if(t[o])return!0;t[o]=!0,"function"==typeof window.CustomEvent?n=new window.CustomEvent(e,{bubbles:!0,cancelable:!0,detail:i}):(n=document.createEvent("CustomEvent")).initCustomEvent(e,!0,!0,i);var r=t.dispatchEvent(n);return t[o]=null,r}function b(){return Date.now().toString(36)+Math.random().toString(36).slice(2,5)}return function(t){function e(){return r(this,e),l(this,c(e).apply(this,arguments))}var n,i,o;return function(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),e&&s(t,e)}(e,a(HTMLElement)),n=e,o=[{key:"observedAttributes",get:function(){return["hidden"]}}],(i=[{key:"connectedCallback",value:function(){h&&(document.documentElement.style.cursor="pointer"),f||this.setAttribute("aria-labelledby",this.button.id=this.button.id||b()),this.value=this.button.textContent,this.setAttribute("role","group"),this.button.setAttribute("aria-expanded",this._open=!this.hidden),this.button.setAttribute("aria-controls",this.id=this.id||b()),document.addEventListener("keydown",this,!0),document.addEventListener("click",this)}},{key:"disconnectedCallback",value:function(){this._button=null,document.removeEventListener("keydown",this,!0),document.removeEventListener("click",this)}},{key:"attributeChangedCallback",value:function(){if(this._open===this.hidden){this.button.setAttribute("aria-expanded",this._open=!this.hidden);try{this.querySelector("[autofocus]").focus()}catch(t){}p(this,"toggle")}}},{key:"handleEvent",value:function(t){if(!t.defaultPrevented){if("keydown"===t.type&&27===t.keyCode)if(t.target.getAttribute&&"true"===t.target.getAttribute("aria-expanded")?t.target===this.button:d(t.target,this.nodeName)===this)return this.hidden=!0,this.button.focus(),t.preventDefault();if("click"===t.type){var e=d(t.target,"a,button");e&&!e.hasAttribute("aria-expanded")&&d(t.target,this.nodeName)===this?p(this,"toggle.select",e):e&&e.getAttribute("aria-controls")===this.id?this.hidden=!this.hidden:this.popup&&!this.contains(t.target)&&(this.hidden=!0)}}}},{key:"button",get:function(){return this._button&&this._button.getAttribute("for")===this.id?this._button:(this._button=this.id&&document.querySelector('[for="'.concat(this.id,'"]')))||this.previousElementSibling}},{key:"popup",get:function(){return"true"===this.getAttribute("popup")||this.getAttribute("popup")||this.hasAttribute("popup")},set:function(t){this[!1===t?"removeAttribute":"setAttribute"]("popup",t)}},{key:"hidden",get:function(){return this.hasAttribute("hidden")},set:function(t){!function(t,e){var n=2<arguments.length&&void 0!==arguments[2]?arguments[2]:!this.hasAttribute(e);!n===t.hasAttribute(e)&&t[n?"setAttribute":"removeAttribute"](e,"")}(this,"hidden",t)}},{key:"value",get:function(){return this.button.value||this.button.textContent},set:function(){var t=0<arguments.length&&void 0!==arguments[0]&&arguments[0];if(this.button&&this.popup.length){var e=this.button,n=(e.getAttribute("aria-label")||",".concat(this.popup)).split(",")[1],i=t.textContent||t||"";n===this.popup&&(e.value=t.value||i,e[t.innerHTML?"innerHTML":"textContent"]=t.innerHTML||i,e.setAttribute("aria-label","".concat(e.textContent,",").concat(this.popup)))}}}])&&u(n.prototype,i),o&&u(n,o),e}()}),window.customElements.define("core-toggle",coreToggle);
 //# sourceMappingURL=core-toggle.min.js.map

jsx.js

@@ -147,13 +147,4 @@ 'use strict';
 
-var IS_IOS = IS_BROWSER && /iPad|iPhone|iPod/.test(String(navigator.platform)); // Polyfill toggleAttribute for IE
+var IS_IOS = IS_BROWSER && /iPad|iPhone|iPod/.test(String(navigator.platform)); // Mock HTMLElement for Node
 
-if (IS_BROWSER && !window.Element.prototype.toggleAttribute) {
-  window.Element.prototype.toggleAttribute = function (name) {
-    var force = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : !this.hasAttribute(name);
-    if (!force === this.hasAttribute(name)) this[force ? 'setAttribute' : 'removeAttribute'](name, '');
-    return force;
-  };
-} // Mock HTMLElement for Node
-
-
 if (!IS_BROWSER && !global.HTMLElement) {
@@ -231,3 +222,16 @@ global.HTMLElement =
 }
+/**
+ * toggleAttribute (Ponyfill for IE and Edge, fixes #299)
+ * @link https://developer.mozilla.org/en-US/docs/Web/API/Element/toggleAttribute
+ * @param {Element} el  Single DOM Element
+ * @param {String} name The name of the attribute to be toggled
+ * @param {Boolean} force Force attribute to be added or removed regardless of previous state
+ */
 
+function toggleAttribute(el, name) {
+  var force = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : !this.hasAttribute(name);
+  if (!force === el.hasAttribute(name)) el[force ? 'setAttribute' : 'removeAttribute'](name, '');
+  return force;
+}
+
 var CoreToggle =
@@ -327,3 +331,3 @@ /*#__PURE__*/
     set: function set(val) {
-      this.toggleAttribute('hidden', val);
+      toggleAttribute(this, 'hidden', val);
     } // Sets this.button aria-label, so visible button text can be augmentet with intension of button
@@ -361,3 +365,3 @@ // Example: Button text: "01.02.2019", aria-label: "01.02.2019, Choose date"
 
-var version = "3.0.4";
+var version = "3.0.5";
 
@@ -406,3 +410,3 @@ /**
   var customEvents = options.customEvents || [];
-  var skipProps = customProps.slice(); // Keep a copy
+  var skipProps = customProps.concat('forwardRef'); // Keep a copy with forwardRef added
 
@@ -418,2 +422,9 @@ var tagName = (dashCase + "-" + (options.suffix || 'react')).replace(/\W+/g, '-').toLowerCase();
         this.ref = function (el) {
+          // Support callback ref https://reactjs.org/docs/refs-and-the-dom.html#callback-refs
+          if (typeof this$1.props.forwardRef === 'function') {
+            this$1.props.forwardRef(el);
+          } else if (this$1.props.forwardRef) {
+            this$1.props.forwardRef.current = el;
+          }
+
           return this$1.el = el;
@@ -447,3 +458,3 @@ };
         customProps.forEach(function (key) {
-          return this$1.props.hasOwnProperty(key) && (this$1.el[key] = this$1.props[key]);
+          return key in this$1.props && (this$1.el[key] = this$1.props[key]);
         });
@@ -450,0 +461,0 @@ customEvents.forEach(function (key) {

package.json

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

readme.md

@@ -75,3 +75,3 @@ # Core Toggle
 ```html
-<script src="https://static.nrk.no/core-components/major/6/core-toggle/core-toggle.min.js"></script>  <!-- Using static -->
+<script src="https://static.nrk.no/core-components/major/7/core-toggle/core-toggle.min.js"></script>  <!-- Using static -->
 ```
@@ -103,2 +103,3 @@
 myToggle.value          // Get toggle button text
+
 // Setters
@@ -105,0 +106,0 @@ myToggle.popup = true   // Enable or disable if clicking outside toggle should close it. Provide a string to control the aria-label text on the toggle

No alert changes

Improved metrics

Lines of code

1400

increased by1.97%

Number of lines in readme file

276

increased by0.36%

Worsened metrics

Total package byte prevSize

114268

decreased by-3.26%

Number of package files

11

decreased by-8.33%

No dependency changes