@nrk/core-toggle - npm Package Compare versions

Comparing version 3.0.3 to 3.0.4

core-toggle.jsx

 import CoreToggle from './core-toggle.js'
-import { elementToReact } from '../utils.js'
+import { version } from './package.json'
+import customElementToReact from '@nrk/custom-element-to-react'
 
-export default elementToReact(CoreToggle, 'toggle', 'toggle.select')
+export default customElementToReact(CoreToggle, {
+  customEvents: ['toggle', 'toggle.select'],
+  suffix: version
+})

core-toggle.jsx.js

@@ -224,87 +224,2 @@ (function (global, factory) {
   }
-  function elementToReact(elementClass) {
-    for (var _len = arguments.length, attr = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
-      attr[_key - 1] = arguments[_key];
-    }
-
-    var name = elementClass.name || String(elementClass).match(/function ([^(]+)/)[1]; // String match for IE11
-
-    var tag = "".concat(name.replace(/\W+/, '-'), "-").concat(getUUID()).toLowerCase();
-    if (IS_BROWSER && !window.customElements.get(tag)) window.customElements.define(tag, elementClass);
-    return (
-      /*#__PURE__*/
-      function (_React$Component) {
-        _inherits(_class2, _React$Component);
-
-        function _class2(props) {
-          var _this;
-
-          _classCallCheck(this, _class2);
-
-          _this = _possibleConstructorReturn(this, _getPrototypeOf(_class2).call(this, props));
-
-          _this.ref = function (el) {
-            return _this.el = el;
-          };
-
-          attr.forEach(function (k) {
-            var on = "on".concat(k.replace(/(^|\.)./g, function (m) {
-              return m.slice(-1).toUpperCase();
-            })); // input.filter => onInputFilter
-
-            _this[k] = function (event) {
-              return _this.props[on] && closest(event.target, _this.el.nodeName) === _this.el && _this.props[on](event);
-            };
-          });
-          return _this;
-        }
-
-        _createClass(_class2, [{
-          key: "componentDidMount",
-          value: function componentDidMount() {
-            var _this2 = this;
-
-            attr.forEach(function (k) {
-              return _this2.props[k] ? _this2.el[k] = _this2.props[k] : _this2.el.addEventListener(k, _this2[k]);
-            });
-          }
-        }, {
-          key: "componentDidUpdate",
-          value: function componentDidUpdate(prev) {
-            var _this3 = this;
-
-            attr.forEach(function (k) {
-              return prev[k] !== _this3.props[k] && (_this3.el[k] = _this3.props[k]);
-            });
-          }
-        }, {
-          key: "componentWillUnmount",
-          value: function componentWillUnmount() {
-            var _this4 = this;
-
-            attr.forEach(function (k) {
-              return _this4.el.removeEventListener(k, _this4[k]);
-            });
-          }
-        }, {
-          key: "render",
-          value: function render() {
-            var _this5 = this;
-
-            // Convert React props to CustomElement props https://github.com/facebook/react/issues/12810
-            return React.createElement(tag, Object.keys(this.props).reduce(function (props, k) {
-              if (k === 'className') props["class"] = _this5.props[k]; // Fixes className for custom elements
-              else if (_this5.props[k] === true) props[k] = ''; // Fixes boolean attributes
-                else if (_this5.props[k] !== false) props[k] = _this5.props[k];
-              return props;
-            }, {
-              ref: this.ref
-            }));
-          }
-        }]);
-
-        return _class2;
-      }(React.Component)
-    );
-  }
   /**
@@ -446,4 +361,140 @@ * getUUID
 
-  var coreToggle = elementToReact(CoreToggle, 'toggle', 'toggle.select');
+  var version = "3.0.4";
 
+  /**
+  * closest
+  * @param {Element} element Element to traverse up from
+  * @param {String} selector A selector to search for matching parents or element itself
+  * @return {Element|null}  Element which is the closest ancestor matching selector
+  */
+
+  var closest$1 = function () {
+    var proto = typeof window === 'undefined' ? {} : window.Element.prototype;
+    var match = proto.matches || proto.msMatchesSelector || proto.webkitMatchesSelector;
+    return proto.closest ? function (el, css) {
+      return el.closest(css);
+    } : function (el, css) {
+      for (; el; el = el.parentElement) {
+        if (match.call(el, css)) {
+          return el;
+        }
+      }
+
+      return null;
+    };
+  }();
+  /**
+  * customElementToReact
+  * @param {Class|Function} elem A custom element definition.
+  * @param {Array} attr Props and events
+  * @return {Object} A React component
+  */
+
+
+  function customElementToReact(elementClass, options) {
+    if (options === void 0) options = {};
+    var name = elementClass.name || String(elementClass).match(/function ([^(]+)/)[1]; // String match for IE11
+
+    var dashCase = name.replace(/.[A-Z]/g, function (ref) {
+      var a = ref[0];
+      var b = ref[1];
+      return a + "-" + b;
+    }); // NameName -> name-name
+
+    var customProps = options.props || [];
+    var customEvents = options.customEvents || [];
+    var skipProps = customProps.slice(); // Keep a copy
+
+    var tagName = (dashCase + "-" + (options.suffix || 'react')).replace(/\W+/g, '-').toLowerCase();
+    return (
+      /*@__PURE__*/
+      function (superclass) {
+        function anonymous(props) {
+          var this$1 = this;
+          superclass.call(this, props);
+
+          this.ref = function (el) {
+            return this$1.el = el;
+          };
+
+          customEvents.forEach(function (eventName) {
+            var on = "on" + eventName.replace(/(^|\.)./g, function (m) {
+              return m.slice(-1).toUpperCase();
+            }); // input.filter => onInputFilter
+
+            this$1[eventName] = function (event) {
+              return this$1.props[on] && closest$1(event.target, this$1.el.nodeName) === this$1.el && this$1.props[on](event);
+            };
+
+            skipProps.push(on); // Skip props that are customEvents
+          });
+        }
+
+        if (superclass) anonymous.__proto__ = superclass;
+        anonymous.prototype = Object.create(superclass && superclass.prototype);
+        anonymous.prototype.constructor = anonymous;
+
+        anonymous.prototype.componentDidMount = function componentDidMount() {
+          var this$1 = this; // Do not run connectedCallback before after React componentDidMount, to allow React hydration to run first
+
+          if (!window.customElements.get(tagName)) {
+            window.customElements.define(tagName, elementClass);
+          }
+
+          customProps.forEach(function (key) {
+            return this$1.props.hasOwnProperty(key) && (this$1.el[key] = this$1.props[key]);
+          });
+          customEvents.forEach(function (key) {
+            return this$1.el.addEventListener(key, this$1[key]);
+          });
+        };
+
+        anonymous.prototype.componentDidUpdate = function componentDidUpdate(prev) {
+          var this$1 = this;
+          customProps.forEach(function (key) {
+            return prev[key] !== this$1.props[key] && (this$1.el[key] = this$1.props[key]);
+          });
+        };
+
+        anonymous.prototype.componentWillUnmount = function componentWillUnmount() {
+          var this$1 = this;
+          customEvents.forEach(function (eventName) {
+            return this$1.el.removeEventListener(eventName, this$1[eventName]);
+          });
+        };
+
+        anonymous.prototype.render = function render() {
+          var this$1 = this; // Convert React props to CustomElement props https://github.com/facebook/react/issues/12810
+
+          return React.createElement(tagName, Object.keys(this.props).reduce(function (thisProps, key) {
+            if (skipProps.indexOf(key) === -1) {
+              // Do not render customEvents and custom props as attributes
+              if (key === 'className') {
+                thisProps["class"] = this$1.props[key];
+              } // Fixes className for custom elements
+              else if (this$1.props[key] === true) {
+                  thisProps[key] = '';
+                } // Fixes boolean attributes
+                else if (this$1.props[key] !== false) {
+                    thisProps[key] = this$1.props[key];
+                  } // Pass only truthy, non-function props
+
+            }
+
+            return thisProps;
+          }, {
+            ref: this.ref
+          }));
+        };
+
+        return anonymous;
+      }(React.Component)
+    );
+  }
+
+  var coreToggle = customElementToReact(CoreToggle, {
+    customEvents: ['toggle', 'toggle.select'],
+    suffix: version
+  });
+
   return coreToggle;
@@ -450,0 +501,0 @@

core-toggle.min.js

@@ -1,3 +0,3 @@
-/*! @nrk/core-toggle v3.0.3 - Copyright (c) 2017-2019 NRK */
+/*! @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);
 //# sourceMappingURL=core-toggle.min.js.map

jsx.js

@@ -222,87 +222,2 @@ 'use strict';
 }
-function elementToReact(elementClass) {
-  for (var _len = arguments.length, attr = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
-    attr[_key - 1] = arguments[_key];
-  }
-
-  var name = elementClass.name || String(elementClass).match(/function ([^(]+)/)[1]; // String match for IE11
-
-  var tag = "".concat(name.replace(/\W+/, '-'), "-").concat(getUUID()).toLowerCase();
-  if (IS_BROWSER && !window.customElements.get(tag)) window.customElements.define(tag, elementClass);
-  return (
-    /*#__PURE__*/
-    function (_React$Component) {
-      _inherits(_class2, _React$Component);
-
-      function _class2(props) {
-        var _this;
-
-        _classCallCheck(this, _class2);
-
-        _this = _possibleConstructorReturn(this, _getPrototypeOf(_class2).call(this, props));
-
-        _this.ref = function (el) {
-          return _this.el = el;
-        };
-
-        attr.forEach(function (k) {
-          var on = "on".concat(k.replace(/(^|\.)./g, function (m) {
-            return m.slice(-1).toUpperCase();
-          })); // input.filter => onInputFilter
-
-          _this[k] = function (event) {
-            return _this.props[on] && closest(event.target, _this.el.nodeName) === _this.el && _this.props[on](event);
-          };
-        });
-        return _this;
-      }
-
-      _createClass(_class2, [{
-        key: "componentDidMount",
-        value: function componentDidMount() {
-          var _this2 = this;
-
-          attr.forEach(function (k) {
-            return _this2.props[k] ? _this2.el[k] = _this2.props[k] : _this2.el.addEventListener(k, _this2[k]);
-          });
-        }
-      }, {
-        key: "componentDidUpdate",
-        value: function componentDidUpdate(prev) {
-          var _this3 = this;
-
-          attr.forEach(function (k) {
-            return prev[k] !== _this3.props[k] && (_this3.el[k] = _this3.props[k]);
-          });
-        }
-      }, {
-        key: "componentWillUnmount",
-        value: function componentWillUnmount() {
-          var _this4 = this;
-
-          attr.forEach(function (k) {
-            return _this4.el.removeEventListener(k, _this4[k]);
-          });
-        }
-      }, {
-        key: "render",
-        value: function render() {
-          var _this5 = this;
-
-          // Convert React props to CustomElement props https://github.com/facebook/react/issues/12810
-          return React.createElement(tag, Object.keys(this.props).reduce(function (props, k) {
-            if (k === 'className') props["class"] = _this5.props[k]; // Fixes className for custom elements
-            else if (_this5.props[k] === true) props[k] = ''; // Fixes boolean attributes
-              else if (_this5.props[k] !== false) props[k] = _this5.props[k];
-            return props;
-          }, {
-            ref: this.ref
-          }));
-        }
-      }]);
-
-      return _class2;
-    }(React.Component)
-  );
-}
 /**
@@ -444,4 +359,140 @@ * getUUID
 
-var coreToggle = elementToReact(CoreToggle, 'toggle', 'toggle.select');
+var version = "3.0.4";
 
+/**
+* closest
+* @param {Element} element Element to traverse up from
+* @param {String} selector A selector to search for matching parents or element itself
+* @return {Element|null}  Element which is the closest ancestor matching selector
+*/
+
+var closest$1 = function () {
+  var proto = typeof window === 'undefined' ? {} : window.Element.prototype;
+  var match = proto.matches || proto.msMatchesSelector || proto.webkitMatchesSelector;
+  return proto.closest ? function (el, css) {
+    return el.closest(css);
+  } : function (el, css) {
+    for (; el; el = el.parentElement) {
+      if (match.call(el, css)) {
+        return el;
+      }
+    }
+
+    return null;
+  };
+}();
+/**
+* customElementToReact
+* @param {Class|Function} elem A custom element definition.
+* @param {Array} attr Props and events
+* @return {Object} A React component
+*/
+
+
+function customElementToReact(elementClass, options) {
+  if (options === void 0) options = {};
+  var name = elementClass.name || String(elementClass).match(/function ([^(]+)/)[1]; // String match for IE11
+
+  var dashCase = name.replace(/.[A-Z]/g, function (ref) {
+    var a = ref[0];
+    var b = ref[1];
+    return a + "-" + b;
+  }); // NameName -> name-name
+
+  var customProps = options.props || [];
+  var customEvents = options.customEvents || [];
+  var skipProps = customProps.slice(); // Keep a copy
+
+  var tagName = (dashCase + "-" + (options.suffix || 'react')).replace(/\W+/g, '-').toLowerCase();
+  return (
+    /*@__PURE__*/
+    function (superclass) {
+      function anonymous(props) {
+        var this$1 = this;
+        superclass.call(this, props);
+
+        this.ref = function (el) {
+          return this$1.el = el;
+        };
+
+        customEvents.forEach(function (eventName) {
+          var on = "on" + eventName.replace(/(^|\.)./g, function (m) {
+            return m.slice(-1).toUpperCase();
+          }); // input.filter => onInputFilter
+
+          this$1[eventName] = function (event) {
+            return this$1.props[on] && closest$1(event.target, this$1.el.nodeName) === this$1.el && this$1.props[on](event);
+          };
+
+          skipProps.push(on); // Skip props that are customEvents
+        });
+      }
+
+      if (superclass) anonymous.__proto__ = superclass;
+      anonymous.prototype = Object.create(superclass && superclass.prototype);
+      anonymous.prototype.constructor = anonymous;
+
+      anonymous.prototype.componentDidMount = function componentDidMount() {
+        var this$1 = this; // Do not run connectedCallback before after React componentDidMount, to allow React hydration to run first
+
+        if (!window.customElements.get(tagName)) {
+          window.customElements.define(tagName, elementClass);
+        }
+
+        customProps.forEach(function (key) {
+          return this$1.props.hasOwnProperty(key) && (this$1.el[key] = this$1.props[key]);
+        });
+        customEvents.forEach(function (key) {
+          return this$1.el.addEventListener(key, this$1[key]);
+        });
+      };
+
+      anonymous.prototype.componentDidUpdate = function componentDidUpdate(prev) {
+        var this$1 = this;
+        customProps.forEach(function (key) {
+          return prev[key] !== this$1.props[key] && (this$1.el[key] = this$1.props[key]);
+        });
+      };
+
+      anonymous.prototype.componentWillUnmount = function componentWillUnmount() {
+        var this$1 = this;
+        customEvents.forEach(function (eventName) {
+          return this$1.el.removeEventListener(eventName, this$1[eventName]);
+        });
+      };
+
+      anonymous.prototype.render = function render() {
+        var this$1 = this; // Convert React props to CustomElement props https://github.com/facebook/react/issues/12810
+
+        return React.createElement(tagName, Object.keys(this.props).reduce(function (thisProps, key) {
+          if (skipProps.indexOf(key) === -1) {
+            // Do not render customEvents and custom props as attributes
+            if (key === 'className') {
+              thisProps["class"] = this$1.props[key];
+            } // Fixes className for custom elements
+            else if (this$1.props[key] === true) {
+                thisProps[key] = '';
+              } // Fixes boolean attributes
+              else if (this$1.props[key] !== false) {
+                  thisProps[key] = this$1.props[key];
+                } // Pass only truthy, non-function props
+
+          }
+
+          return thisProps;
+        }, {
+          ref: this.ref
+        }));
+      };
+
+      return anonymous;
+    }(React.Component)
+  );
+}
+
+var coreToggle = customElementToReact(CoreToggle, {
+  customEvents: ['toggle', 'toggle.select'],
+  suffix: version
+});
+
 module.exports = coreToggle;

package.json

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

readme.md

@@ -138,3 +138,3 @@ # Core Toggle
 
-If you have form elements inside a `core-toggle`, you can optionally add a `autofocus` attribute to the most prominent form element. This helps the user navigate quickly when toggle is opened.
+If you have form elements inside a `<core-toggle>`, you can optionally add a `autofocus` attribute to the most prominent form element. This helps the user navigate quickly when toggle is opened.
 
@@ -171,3 +171,3 @@ ## Events
 
-**Note:** `core-toggle` is `display: inline` by default. Change this by for instance setting `core-tabs:not([hidden]) { display: block | flex | grid }` or similar in your app. Not needed when `position` or `float` is used. All styling in documentation is example only. Both the `<button>` and `core-toggle` element receive attributes reflecting the current toggle state:
+**Note:** `<core-toggle>` is `display: inline` by default. Change this by for instance setting `core-tabs:not([hidden]) { display: block | flex | grid }` or similar in your app. Not needed when `position` or `float` is used. All styling in documentation is example only. Both the `<button>` and `<core-toggle>` element receive attributes reflecting the current toggle state:
 
@@ -270,3 +270,3 @@ ```css
 ### Why does dropdowns not open on hover?
-Both touch devices and screen readers will have trouble properly interacting with hoverable interfaces (unless more complex fallback logic is implemented). To achieve a consistent and accessible interface, `core-toggle` is designed around click interactions.
+Both touch devices and screen readers will have trouble properly interacting with hoverable interfaces (unless more complex fallback logic is implemented). To achieve a consistent and accessible interface, `<core-toggle>` is designed around click interactions.
 
@@ -273,0 +273,0 @@ ### Why is there no group-option to achieve a single open toggle?

No alert changes

Improved metrics

Total package byte prevSize

118114

6.45%

Lines of code

1373

6.68%

No dependency changes