@nrk/core-toggle - npm Package Compare versions

Comparing version 3.1.0 to 3.2.0

core-toggle.cjs.js

@@ -1,2 +0,2 @@
-/*! @nrk/core-toggle v3.1.0 - Copyright (c) 2017-2021 NRK */
+/*! @nrk/core-toggle v3.2.0 - Copyright (c) 2017-2021 NRK */
 'use strict';
@@ -3,0 +3,0 @@

core-toggle.jsx

@@ -6,5 +6,4 @@ import CoreToggle from './core-toggle.js'
 export default customElementToReact(CoreToggle, {
-  props: ['popup'],
   customEvents: ['toggle', 'toggle.select'],
   suffix: version
 })

core-toggle.jsx.js

@@ -1,2 +0,2 @@
-/*! @nrk/core-toggle v3.1.0 - Copyright (c) 2017-2021 NRK */
+/*! @nrk/core-toggle v3.2.0 - Copyright (c) 2017-2021 NRK */
 (function (global, factory) {
@@ -461,3 +461,3 @@ typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('react')) :
 
-  var version = "3.1.0";
+  var version = "3.2.0";
 
@@ -614,3 +614,2 @@ /**
   var coreToggle = customElementToReact(CoreToggle, {
-    props: ['popup'],
     customEvents: ['toggle', 'toggle.select'],
@@ -617,0 +616,0 @@ suffix: version

core-toggle.min.js

@@ -1,3 +0,3 @@
-/*! @nrk/core-toggle v3.1.0 - Copyright (c) 2017-2021 NRK */
+/*! @nrk/core-toggle v3.2.0 - Copyright (c) 2017-2021 NRK */
 !function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).coreToggle=e()}(this,(function(){"use strict";function t(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function e(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 n(t){return(n=Object.setPrototypeOf?Object.getPrototypeOf:function(t){return t.__proto__||Object.getPrototypeOf(t)})(t)}function i(t,e){return(i=Object.setPrototypeOf||function(t,e){return t.__proto__=e,t})(t,e)}function o(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(t){return!1}}function r(t,e,n){return(r=o()?Reflect.construct:function(t,e,n){var o=[null];o.push.apply(o,e);var r=new(Function.bind.apply(t,o));return n&&i(r,n.prototype),r}).apply(null,arguments)}function u(t){var e="function"==typeof Map?new Map:void 0;return(u=function(t){if(null===t||(o=t,-1===Function.toString.call(o).indexOf("[native code]")))return t;var o;if("function"!=typeof t)throw new TypeError("Super expression must either be null or a function");if(void 0!==e){if(e.has(t))return e.get(t);e.set(t,u)}function u(){return r(t,arguments,n(this).constructor)}return u.prototype=Object.create(t.prototype,{constructor:{value:u,enumerable:!1,writable:!0,configurable:!0}}),i(u,t)})(t)}function s(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 a="undefined"!=typeof window,c=a&&/(android)/i.test(navigator.userAgent),l=a&&/iPad|iPhone|iPod/.test(String(navigator.platform));a||global.HTMLElement||(global.HTMLElement=function(){return function e(){t(this,e)}}());var d,h,p=(d="undefined"==typeof window?{}:window.Element.prototype,h=d.matches||d.msMatchesSelector||d.webkitMatchesSelector,d.closest?function(t,e){return t.closest(e)}:function(t,e){for(t.correspondingUseElement&&(t=t.correspondingUseElement);t;t=t.parentElement)if(h.call(t,e))return t;return null});function f(t,e){var n,i=arguments.length>2&&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)}function v(t,e){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:!this.hasAttribute(e);return!n===t.hasAttribute(e)&&t[n?"setAttribute":"removeAttribute"](e,""),n}var g=a&&document.createElement("div");function y(t,e){e?(t._positionObserver&&t._positionObserver.disconnect(),g.parentNode&&g.parentNode.removeChild(g),t.style.position=t._positionObserver=null,window.removeEventListener("scroll",t,!0),window.removeEventListener("resize",t)):t.autoposition&&(t._positionObserver||(t._positionObserver=window.MutationObserver&&new window.MutationObserver(t.updatePosition.bind(t))),t._positionObserver&&t._positionObserver.observe(t,{childList:!0,subtree:!0,attributes:!0}),document.body.appendChild(g),window.addEventListener("scroll",t,!0),window.addEventListener("resize",t),t.updatePosition())}return function(r){!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&&i(t,e)}(_,r);var u,a,d,h,m,w=(u=_,a=o(),function(){var t,e=n(u);if(a){var i=n(this).constructor;t=Reflect.construct(e,arguments,i)}else t=e.apply(this,arguments);return s(this,t)});function _(){return t(this,_),w.apply(this,arguments)}return d=_,m=[{key:"observedAttributes",get:function(){return["hidden","autoposition"]}}],(h=[{key:"connectedCallback",value:function(){l&&(document.documentElement.style.cursor="pointer"),c||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),y(this,!0)}},{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){}y(this,this.hidden),f(this,"toggle")}}},{key:"handleEvent",value:function(t){if(!t.defaultPrevented){if("resize"===t.type||"scroll"===t.type)return this.updatePosition();if("keydown"===t.type&&27===t.keyCode&&(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?f(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:"updatePosition",value:function(){var t=this;if(!this._skipPosition&&this.button){this._skipPosition=!0,this.style.position="fixed";var e=this.button.getBoundingClientRect(),n=this.getBoundingClientRect(),i=e.left+n.width<window.innerWidth,o=e.bottom+n.height<window.innerHeight,r=e.top-n.height>0,u=o||!r,s=u?window.pageYOffset+e.bottom+n.height+30:0;this.style.left="".concat(Math.round(i?e.left:e.right-n.width),"px"),this.style.top="".concat(Math.round(u?e.bottom:e.top-n.height),"px"),g.style.cssText="position:absolute;padding:1px;top:".concat(Math.round(s),"px"),setTimeout((function(){return t._skipPosition=null}))}}},{key:"button",get:function(){return this._button&&(this._button.getAttribute("data-for")||this._button.getAttribute("for"))===this.id?this._button:(this._button=this.id&&document.querySelector('[for="'.concat(this.id,'"],[data-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:"autoposition",get:function(){return this.hasAttribute("autoposition")},set:function(t){v(this,"autoposition",t)}},{key:"hidden",get:function(){return this.hasAttribute("hidden")},set:function(t){v(this,"hidden",t)}},{key:"value",get:function(){return this.button.value||this.button.textContent},set:function(t){if(void 0===t&&(t=!1),this.button&&this.popup.length){var e=this.button,n=(e.getAttribute("aria-label")||",".concat(this.popup)).split(",")[1],i=t.textContent||t||"";if(n===this.popup){var o=e.querySelector("span")||e;e.value=t.value||i,o[t.innerHTML?"innerHTML":"textContent"]=t.innerHTML||i,e.setAttribute("aria-label","".concat(e.textContent,",").concat(this.popup))}}}}])&&e(d.prototype,h),m&&e(d,m),_}(u(HTMLElement))})),window.customElements.define("core-toggle",coreToggle);
 //# sourceMappingURL=core-toggle.min.js.map

core-toggle.test.cjs.js

@@ -1,2 +0,2 @@
-/*! @nrk/core-toggle v3.1.0 - Copyright (c) 2017-2021 NRK */
+/*! @nrk/core-toggle v3.2.0 - Copyright (c) 2017-2021 NRK */
 'use strict';
@@ -3,0 +3,0 @@

jsx.js

@@ -1,2 +0,2 @@
-/*! @nrk/core-toggle v3.1.0 - Copyright (c) 2017-2021 NRK */
+/*! @nrk/core-toggle v3.2.0 - Copyright (c) 2017-2021 NRK */
 'use strict';
@@ -459,3 +459,3 @@
 
-var version = "3.1.0";
+var version = "3.2.0";
 
@@ -612,3 +612,2 @@ /**
 var coreToggle = customElementToReact(CoreToggle, {
-  props: ['popup'],
   customEvents: ['toggle', 'toggle.select'],
@@ -615,0 +614,0 @@ suffix: version

package.json

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

readme.md

@@ -22,3 +22,3 @@ # Core Toggle
 <!--demo-->
-<button>Popup VanillaJS</button>
+<button type="button">Popup VanillaJS</button>
 <core-toggle class="my-dropdown" popup hidden>
@@ -28,3 +28,3 @@ <ul>
     <li>
-      <button>Can also be nested</button>
+      <button type="button">Can also be nested</button>
       <core-toggle class="my-dropdown" popup hidden>
@@ -46,9 +46,9 @@ <ul>
   ReactDOM.render(<>
-    <button>Popup JSX</button>
+    <button type="button">Popup JSX</button>
     <CoreToggle className='my-dropdown' hidden popup onToggleSelect={console.warn}>
       <ul>
-        <li><button>Select</button></li>
+        <li><button type="button">Select</button></li>
         <li><a href='#'>Link</a></li>
         <li>
-          <button>Can also be nested</button>
+          <button type="button">Can also be nested</button>
           <CoreToggle className='my-dropdown' hidden popup>
@@ -89,7 +89,8 @@ <ul>
 ```html
-<button>Toggle VanillaJS</button>       <!-- Must be <button> placed directly before <core-toggle> or use id + data-for attributes -->
+<button type="button">Toggle VanillaJS</button>       <!-- Must be <button> placed directly before <core-toggle> or use id + data-for attributes -->
 <core-toggle
   hidden                                <!-- Set hidden attribute to prevent FOUC -->
-  popup="{Boolean|String}">             <!-- Optional. Defaults to false. Enable or disable if clicking outside toggle should close it. Provide a string to control the aria-label text on the toggle -->
-  <div>Content</div>
+  popup="{String?}"                    <!-- Optional. If present, clicking outside open toggle will close it. Providing a string also enables select-behavior, by replacing value inside button with selected value, and suffixes provided string to aria-label on button -->
+>
+  Content                               <!-- Content to be toggled. Accepts text, elements and components -->
 </core-toggle>
@@ -111,5 +112,5 @@ ```
 // Setters
-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
-myToggle.hidden = true  // Set hidden attribute
-myToggle.value = 'Velg' // Sets innerHTML of the button and safely updates aria-label for screen readers. Defaults to button.innerHTML
+myToggle.popup = {Boolean|String}   // If true, clicking outside open toggle will close it. Providing a string also enables select-behavior, by replacing value inside button with selected value, and suffixes provided string to aria-label on button
+myToggle.hidden = true              // Set hidden attribute
+myToggle.value = 'Velg'             // Sets innerHTML of the button and safely updates aria-label for screen readers. Defaults to button.innerHTML
 ```
@@ -122,11 +123,12 @@
 
+<button type="button">Use with JSX</button>
 <CoreToggle
   hidden                         // Set hidden attribute to prevent FOUC
-  popup={Boolean|String}         // Optional. Defaults to false. Enable or disable if clicking outside toggle should close it. Provide a string to control the aria-label text on the toggle
+  popup={Boolean|String}         // Optional. If true, clicking outside open toggle will close it. Providing a string also enables select-behavior, by replacing value inside button with selected value, and suffixes provided string to aria-label on button
   ref={(comp) => {}}             // Optional. Get reference to React component
   forwardRef={(el) => {}}        // Optional. Get reference to underlying DOM custom element
   onToggle={Function}            // Optional. Toggle event listener. See event 'toggle'
-  onToggleSelect={Function}>     // Optional. Toggle select event listener. See event 'toggle.select'
-  <button>Use with JSX</button>  // First element must result in a <button>. Accepts both elements and components
-  <div>Content</div>             // Next element will be toggled. Accepts both elements and components
+  onToggleSelect={Function}      // Optional. Toggle select event listener. See event 'toggle.select'
+>
+  Content                        // Content to be toggled. Accepts text, elements and components
 </CoreToggle>
@@ -143,3 +145,3 @@ ```
 <div>
-  <button data-for="my-toggle">Toggle</button>
+  <button data-for="my-toggle" type="button">Toggle</button>
 </div>
@@ -154,3 +156,3 @@ <core-toggle id="my-toggle" hidden>...</core-toggle>
 ```html
-<button>
+<button type="button">
   <span>Toggle</span>
@@ -234,3 +236,3 @@ <svg style="width:1.5em; height:1.5em" aria-hidden="true"><use xlink:href="#nrk-heart"></use></svg>
 <!--demo-->
-<button>Toggle VanillaJS</button>  <!-- must be <button> -->
+<button type="button">Toggle VanillaJS</button>  <!-- must be <button> -->
 <core-toggle hidden>Content</core-toggle>  <!-- hidden prevents flash of unstyled content -->
@@ -243,3 +245,3 @@ ```
   ReactDOM.render(<>
-    <button>Toggle JSX</button>
+    <button type="button">Toggle JSX</button>
     <CoreToggle hidden onToggle={console.log}>Content</CoreToggle>
@@ -260,8 +262,8 @@ </>, document.getElementById('jsx-toggle-default'))
 <!--demo-->
-<button>Episode 1</button>
+<button type="button">Episode 1</button>
 <core-toggle class="my-select my-dropdown" hidden popup="Choose episode">
   <ul>
-    <li><button>Episode 1</button></li>
-    <li><button>Episode 2</button></li>
-    <li><button>Episode 3</button></li>
+    <li><button type="button">Episode 1</button></li>
+    <li><button type="button">Episode 2</button></li>
+    <li><button type="button">Episode 3</button></li>
   </ul>
@@ -295,8 +297,8 @@ </core-toggle>
       return <>
-        <button>{this.state.value}</button>
+        <button type="button">{this.state.value}</button>
         <CoreToggle className='my-dropdown' popup='Example picker' hidden onToggleSelect={this.onSelect}>
           <ul>
-            <li><button>One</button></li>
-            <li><button>Two</button></li>
-            <li><button>Three</button></li>
+            <li><button type="button">One</button></li>
+            <li><button type="button">Two</button></li>
+            <li><button type="button">Three</button></li>
           </ul>
@@ -303,0 +305,0 @@ </CoreToggle>

No alert changes

Improved metrics

Total package byte prevSize

173937

increased by0.23%

Number of lines in readme file

317

increased by0.63%

Worsened metrics

Lines of code

2319

decreased by-0.13%

No dependency changes