@nrk/core-scroll - npm Package Compare versions

Comparing version 4.1.4 to 4.2.0

core-scroll.cjs.js

@@ -0,1 +1,2 @@
+/*! @nrk/core-scroll v4.2.0 - Copyright (c) 2017-2021 NRK */
 'use strict';
@@ -72,3 +73,3 @@
 
-function isNativeReflectConstruct() {
+function _isNativeReflectConstruct() {
   if (typeof Reflect === "undefined" || !Reflect.construct) return false;
@@ -79,3 +80,3 @@ if (Reflect.construct.sham) return false;
   try {
-    Date.prototype.toString.call(Reflect.construct(Date, [], function () {}));
+    Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {}));
     return true;
@@ -88,3 +89,3 @@ } catch (e) {
 function _construct(Parent, args, Class) {
-  if (isNativeReflectConstruct()) {
+  if (_isNativeReflectConstruct()) {
     _construct = Reflect.construct;
@@ -159,6 +160,26 @@ } else {
 
+function _createSuper(Derived) {
+  var hasNativeReflectConstruct = _isNativeReflectConstruct();
+
+  return function _createSuperInternal() {
+    var Super = _getPrototypeOf(Derived),
+        result;
+
+    if (hasNativeReflectConstruct) {
+      var NewTarget = _getPrototypeOf(this).constructor;
+
+      result = Reflect.construct(Super, arguments, NewTarget);
+    } else {
+      result = Super.apply(this, arguments);
+    }
+
+    return _possibleConstructorReturn(this, result);
+  };
+}
+
 var IS_BROWSER = typeof window !== 'undefined';
-var IS_ANDROID = IS_BROWSER && /(android)/i.test(navigator.userAgent); // Bad, but needed
+IS_BROWSER && /(android)/i.test(navigator.userAgent); // Bad, but needed
 
-var IS_IOS = IS_BROWSER && /iPad|iPhone|iPod/.test(String(navigator.platform)); // Mock HTMLElement for Node
+IS_BROWSER && /iPad|iPhone|iPod/.test(String(navigator.platform));
+// Mock HTMLElement for Node
 
@@ -334,6 +355,8 @@ if (!IS_BROWSER && !global.HTMLElement) {
 
+  var _super = _createSuper(CoreScroll);
+
   function CoreScroll() {
     _classCallCheck(this, CoreScroll);
 
-    return _possibleConstructorReturn(this, _getPrototypeOf(CoreScroll).apply(this, arguments));
+    return _super.apply(this, arguments);
   }
@@ -350,4 +373,2 @@
 
-      this.style.willChange = 'scroll-position'; // Enhance performance
-
       this.style.webkitOverflowScrolling = 'touch'; // Momentum scroll on iOS
@@ -390,28 +411,29 @@ // Calculate sizes for hiding, must be after setting overflow:scroll
       var event = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-      if (event.defaultPrevented) return;
+      if (!this.parentNode || event.defaultPrevented) return; // Abort if removed from DOM or event is prevented
+
       if (event.type === 'wheel') DRAG.animate = false; // Stop momentum animation onWheel
       else if (event.type === 'mousedown') onMousedown.call(this, event);else if (event.type === 'click') {
-          var btn = this.id && closest(event.target, "[for=\"".concat(this.id, "\"]"));
-          if (btn && dispatchEvent(this, 'scroll.click', {
-            move: btn.value
-          })) this.scroll(btn.value);
-        } else {
-          var scroll = {
-            left: this.scrollLeft,
-            up: this.scrollTop,
-            right: this.scrollRight,
-            down: this.scrollBottom
-          };
-          var cursor = scroll.left || scroll.right || scroll.up || scroll.down ? 'grab' : '';
-          queryAll(this.id && "[for=\"".concat(this.id, "\"]")).forEach(function (el) {
-            return el.disabled = !scroll[el.value];
-          });
-          dispatchEvent(this, 'scroll.change');
+        var btn = this.id && closest(event.target, "[for=\"".concat(this.id, "\"],[data-for=\"").concat(this.id, "\"]"));
+        if (btn && dispatchEvent(this, 'scroll.click', {
+          move: btn.value
+        })) this.scroll(btn.value);
+      } else {
+        var scroll = {
+          left: this.scrollLeft,
+          up: this.scrollTop,
+          right: this.scrollRight,
+          down: this.scrollBottom
+        };
+        var cursor = scroll.left || scroll.right || scroll.up || scroll.down ? 'grab' : '';
+        queryAll(this.id && "[for=\"".concat(this.id, "\"],[data-for=\"").concat(this.id, "\"]")).forEach(function (el) {
+          return el.disabled = !scroll[el.value];
+        });
+        dispatchEvent(this, 'scroll.change');
 
-          if (!event.type) {
-            // Do not change cursor while dragging
-            this.style.cursor = "-webkit-".concat(cursor);
-            this.style.cursor = cursor;
-          }
+        if (!event.type) {
+          // Do not change cursor while dragging
+          this.style.cursor = "-webkit-".concat(cursor);
+          this.style.cursor = cursor;
         }
+      }
     }
@@ -418,0 +440,0 @@ }, {

core-scroll.js

@@ -25,3 +25,2 @@ import { IS_BROWSER, addStyle, closest, dispatchEvent, throttle, getUUID, queryAll } from '../utils'
     this.style.overflow = 'scroll' // Ensure visible scrollbars
-    this.style.willChange = 'scroll-position' // Enhance performance
     this.style.webkitOverflowScrolling = 'touch' // Momentum scroll on iOS
@@ -59,7 +58,7 @@
   handleEvent (event = {}) {
-    if (event.defaultPrevented) return
+    if (!this.parentNode || event.defaultPrevented) return // Abort if removed from DOM or event is prevented
     if (event.type === 'wheel') DRAG.animate = false // Stop momentum animation onWheel
     else if (event.type === 'mousedown') onMousedown.call(this, event)
     else if (event.type === 'click') {
-      const btn = this.id && closest(event.target, `[for="${this.id}"]`)
+      const btn = this.id && closest(event.target, `[for="${this.id}"],[data-for="${this.id}"]`)
       if (btn && dispatchEvent(this, 'scroll.click', { move: btn.value })) this.scroll(btn.value)
@@ -70,3 +69,3 @@ } else {
 
-      queryAll(this.id && `[for="${this.id}"]`).forEach((el) => (el.disabled = !scroll[el.value]))
+      queryAll(this.id && `[for="${this.id}"],[data-for="${this.id}"]`).forEach((el) => (el.disabled = !scroll[el.value]))
       dispatchEvent(this, 'scroll.change')
@@ -73,0 +72,0 @@

core-scroll.jsx.js

@@ -0,9 +1,12 @@
+/*! @nrk/core-scroll v4.2.0 - Copyright (c) 2017-2021 NRK */
 (function (global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('react')) :
   typeof define === 'function' && define.amd ? define(['react'], factory) :
-  (global = global || self, global.CoreScroll = factory(global.React));
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.CoreScroll = factory(global.React));
 }(this, (function (React) { 'use strict';
 
-  React = React && Object.prototype.hasOwnProperty.call(React, 'default') ? React['default'] : React;
+  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
+  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
   function _typeof(obj) {
@@ -78,3 +81,3 @@ "@babel/helpers - typeof";
 
-  function isNativeReflectConstruct() {
+  function _isNativeReflectConstruct() {
     if (typeof Reflect === "undefined" || !Reflect.construct) return false;
@@ -85,3 +88,3 @@ if (Reflect.construct.sham) return false;
     try {
-      Date.prototype.toString.call(Reflect.construct(Date, [], function () {}));
+      Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {}));
       return true;
@@ -94,3 +97,3 @@ } catch (e) {
   function _construct(Parent, args, Class) {
-    if (isNativeReflectConstruct()) {
+    if (_isNativeReflectConstruct()) {
       _construct = Reflect.construct;
@@ -165,6 +168,26 @@ } else {
 
+  function _createSuper(Derived) {
+    var hasNativeReflectConstruct = _isNativeReflectConstruct();
+
+    return function _createSuperInternal() {
+      var Super = _getPrototypeOf(Derived),
+          result;
+
+      if (hasNativeReflectConstruct) {
+        var NewTarget = _getPrototypeOf(this).constructor;
+
+        result = Reflect.construct(Super, arguments, NewTarget);
+      } else {
+        result = Super.apply(this, arguments);
+      }
+
+      return _possibleConstructorReturn(this, result);
+    };
+  }
+
   var IS_BROWSER = typeof window !== 'undefined';
-  var IS_ANDROID = IS_BROWSER && /(android)/i.test(navigator.userAgent); // Bad, but needed
+  IS_BROWSER && /(android)/i.test(navigator.userAgent); // Bad, but needed
 
-  var IS_IOS = IS_BROWSER && /iPad|iPhone|iPod/.test(String(navigator.platform)); // Mock HTMLElement for Node
+  IS_BROWSER && /iPad|iPhone|iPod/.test(String(navigator.platform));
+  // Mock HTMLElement for Node
 
@@ -198,3 +221,3 @@ if (!IS_BROWSER && !global.HTMLElement) {
 
-  var closest = function () {
+  var closest$1 = function () {
     var proto = typeof window === 'undefined' ? {} : window.Element.prototype;
@@ -341,6 +364,8 @@ var match = proto.matches || proto.msMatchesSelector || proto.webkitMatchesSelector;
 
+    var _super = _createSuper(CoreScroll);
+
     function CoreScroll() {
       _classCallCheck(this, CoreScroll);
 
-      return _possibleConstructorReturn(this, _getPrototypeOf(CoreScroll).apply(this, arguments));
+      return _super.apply(this, arguments);
     }
@@ -357,4 +382,2 @@
 
-        this.style.willChange = 'scroll-position'; // Enhance performance
-
         this.style.webkitOverflowScrolling = 'touch'; // Momentum scroll on iOS
@@ -397,28 +420,29 @@ // Calculate sizes for hiding, must be after setting overflow:scroll
         var event = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-        if (event.defaultPrevented) return;
+        if (!this.parentNode || event.defaultPrevented) return; // Abort if removed from DOM or event is prevented
+
         if (event.type === 'wheel') DRAG.animate = false; // Stop momentum animation onWheel
         else if (event.type === 'mousedown') onMousedown.call(this, event);else if (event.type === 'click') {
-            var btn = this.id && closest(event.target, "[for=\"".concat(this.id, "\"]"));
-            if (btn && dispatchEvent(this, 'scroll.click', {
-              move: btn.value
-            })) this.scroll(btn.value);
-          } else {
-            var scroll = {
-              left: this.scrollLeft,
-              up: this.scrollTop,
-              right: this.scrollRight,
-              down: this.scrollBottom
-            };
-            var cursor = scroll.left || scroll.right || scroll.up || scroll.down ? 'grab' : '';
-            queryAll(this.id && "[for=\"".concat(this.id, "\"]")).forEach(function (el) {
-              return el.disabled = !scroll[el.value];
-            });
-            dispatchEvent(this, 'scroll.change');
+          var btn = this.id && closest$1(event.target, "[for=\"".concat(this.id, "\"],[data-for=\"").concat(this.id, "\"]"));
+          if (btn && dispatchEvent(this, 'scroll.click', {
+            move: btn.value
+          })) this.scroll(btn.value);
+        } else {
+          var scroll = {
+            left: this.scrollLeft,
+            up: this.scrollTop,
+            right: this.scrollRight,
+            down: this.scrollBottom
+          };
+          var cursor = scroll.left || scroll.right || scroll.up || scroll.down ? 'grab' : '';
+          queryAll(this.id && "[for=\"".concat(this.id, "\"],[data-for=\"").concat(this.id, "\"]")).forEach(function (el) {
+            return el.disabled = !scroll[el.value];
+          });
+          dispatchEvent(this, 'scroll.change');
 
-            if (!event.type) {
-              // Do not change cursor while dragging
-              this.style.cursor = "-webkit-".concat(cursor);
-              this.style.cursor = cursor;
-            }
+          if (!event.type) {
+            // Do not change cursor while dragging
+            this.style.cursor = "-webkit-".concat(cursor);
+            this.style.cursor = cursor;
           }
+        }
       }
@@ -484,3 +508,3 @@ }, {
   function onMousedown(event) {
-    if (closest(event.target, NEEDS_MOUSEDOWN)) return;
+    if (closest$1(event.target, NEEDS_MOUSEDOWN)) return;
     if (event.button !== 0) return; // Only react to left clicking
@@ -567,3 +591,3 @@
 
-  var version = "4.1.4";
+  var version = "4.2.0";
 
@@ -577,3 +601,3 @@ /**
 
-  var closest$1 = function () {
+  var closest = function () {
     var proto = typeof window === 'undefined' ? {} : window.Element.prototype;
@@ -624,97 +648,96 @@ var match = proto.matches || proto.msMatchesSelector || proto.webkitMatchesSelector;
     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); // Register ref prop for accessing custom element https://reactjs.org/docs/refs-and-the-dom.html#callback-refs
+    return function (superclass) {
+      function anonymous(props) {
+        var this$1$1 = this;
+        superclass.call(this, props); // Register ref prop for accessing custom element https://reactjs.org/docs/refs-and-the-dom.html#callback-refs
 
-          this.ref = function (el) {
-            if (typeof this$1.props.forwardRef === 'function') {
-              this$1.props.forwardRef(el);
-            } else if (this$1.props.forwardRef) {
-              this$1.props.forwardRef.current = el;
-            }
+        this.ref = function (el) {
+          if (typeof this$1$1.props.forwardRef === 'function') {
+            this$1$1.props.forwardRef(el);
+          } else if (this$1$1.props.forwardRef) {
+            this$1$1.props.forwardRef.current = el;
+          }
 
-            return this$1.el = el;
-          }; // Register event handler on component for each custom event
+          return this$1$1.el = el;
+        }; // Register event handler on component for each custom event
 
 
-          Object.keys(eventMap).forEach(function (eventName) {
-            var onEventName = eventMap[eventName];
+        Object.keys(eventMap).forEach(function (eventName) {
+          var onEventName = eventMap[eventName];
 
-            this$1[eventName] = function (event) {
-              if (this$1.props[onEventName] && closest$1(event.target, this$1.el.nodeName) === this$1.el) {
-                this$1.props[onEventName](event);
-              }
-            };
-          });
-        }
+          this$1$1[eventName] = function (event) {
+            if (this$1$1.props[onEventName] && closest(event.target, this$1$1.el.nodeName) === this$1$1.el) {
+              this$1$1.props[onEventName](event);
+            }
+          };
+        });
+      }
 
-        if (superclass) anonymous.__proto__ = superclass;
-        anonymous.prototype = Object.create(superclass && superclass.prototype);
-        anonymous.prototype.constructor = anonymous;
+      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; // Run connectedCallback() after React componentDidMount() to allow React hydration to run first
+      anonymous.prototype.componentDidMount = function componentDidMount() {
+        var this$1$1 = this; // Run connectedCallback() after React componentDidMount() to allow React hydration to run first
 
-          if (!window.customElements.get(tagName)) {
-            window.customElements.define(tagName, elementClass);
-          } // Populate properties on custom element
+        if (!window.customElements.get(tagName)) {
+          window.customElements.define(tagName, elementClass);
+        } // Populate properties on custom element
 
 
-          customProps.forEach(function (propName) {
-            if (propName in this$1.props) {
-              this$1.el[propName] = this$1.props[propName];
-            }
-          }); // Register events on custom element
+        customProps.forEach(function (propName) {
+          if (propName in this$1$1.props) {
+            this$1$1.el[propName] = this$1$1.props[propName];
+          }
+        }); // Register events on custom element
 
-          customEvents.forEach(function (eventName) {
-            this$1.el.addEventListener(eventName, this$1[eventName]);
-          });
-        };
+        customEvents.forEach(function (eventName) {
+          this$1$1.el.addEventListener(eventName, this$1$1[eventName]);
+        });
+      };
 
-        anonymous.prototype.componentDidUpdate = function componentDidUpdate(prev) {
-          var this$1 = this; // Sync prop changes to custom element
+      anonymous.prototype.componentDidUpdate = function componentDidUpdate(prev) {
+        var this$1$1 = this; // Sync prop changes to custom element
 
-          customProps.forEach(function (propName) {
-            if (prev[propName] !== this$1.props[propName]) {
-              this$1.el[propName] = this$1.props[propName];
-            }
-          });
-        };
+        customProps.forEach(function (propName) {
+          if (prev[propName] !== this$1$1.props[propName]) {
+            this$1$1.el[propName] = this$1$1.props[propName];
+          }
+        });
+      };
 
-        anonymous.prototype.componentWillUnmount = function componentWillUnmount() {
-          var this$1 = this; // Remove event handlers on custom element on unmount
+      anonymous.prototype.componentWillUnmount = function componentWillUnmount() {
+        var this$1$1 = this; // Remove event handlers on custom element on unmount
 
-          customEvents.forEach(function (eventName) {
-            this$1.el.removeEventListener(eventName, this$1[eventName]);
-          });
-        };
+        customEvents.forEach(function (eventName) {
+          this$1$1.el.removeEventListener(eventName, this$1$1[eventName]);
+        });
+      };
 
-        anonymous.prototype.render = function render() {
-          var this$1 = this; // Convert React props to CustomElement props https://github.com/facebook/react/issues/12810
+      anonymous.prototype.render = function render() {
+        var this$1$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, propName) {
-            if (skipProps.indexOf(propName) === -1) {
-              // Do not render customEvents and custom props as attributes
-              if (propName === 'className') {
-                thisProps["class"] = this$1.props[propName];
-              } // Fixes className for custom elements
-              else if (this$1.props[propName] === true) {
-                  thisProps[propName] = '';
-                } // Fixes boolean attributes
-                else if (this$1.props[propName] !== false) {
-                    thisProps[propName] = this$1.props[propName];
-                  } // Pass only truthy, non-function props
+        return React__default['default'].createElement(tagName, Object.keys(this.props).reduce(function (thisProps, propName) {
+          if (skipProps.indexOf(propName) === -1) {
+            // Do not render customEvents and custom props as attributes
+            if (propName === 'className') {
+              thisProps["class"] = this$1$1.props[propName];
+            } // Fixes className for custom elements
+            else if (this$1$1.props[propName] === true) {
+              thisProps[propName] = '';
+            } // Fixes boolean attributes
+            else if (this$1$1.props[propName] !== false) {
+              thisProps[propName] = this$1$1.props[propName];
+            } // Pass only truthy, non-function props
 
-            }
+          }
 
-            return thisProps;
-          }, {
-            ref: this.ref
-          }));
-        };
+          return thisProps;
+        }, {
+          ref: this.ref
+        }));
+      };
 
-        return anonymous;
-      }(React.Component)
-    );
+      return anonymous;
+    }(React__default['default'].Component);
   }
@@ -721,0 +744,0 @@

core-scroll.min.js

@@ -1,3 +0,3 @@
-/*! @nrk/core-scroll v4.1.4 - Copyright (c) 2017-2020 NRK */
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t=t||self).coreScroll=e()}(this,function(){"use strict";function u(t){return(u="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}function i(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function r(t,e){for(var n=0;n<e.length;n++){var o=e[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(t,o.key,o)}}function l(t){return(l=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 c(t,e,n){return(c=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 o=[null];o.push.apply(o,e);var i=new(Function.bind.apply(t,o));return n&&s(i,n.prototype),i}).apply(null,arguments)}function a(t){var o="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!==o){if(o.has(t))return o.get(t);o.set(t,n)}function n(){return c(t,arguments,l(this).constructor)}return n.prototype=Object.create(t.prototype,{constructor:{value:n,enumerable:!1,writable:!0,configurable:!0}}),s(n,t)})(t)}function f(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;t&&/(android)/i.test(navigator.userAgent),t&&/iPad|iPhone|iPod/.test(String(navigator.platform));t||global.HTMLElement||(global.HTMLElement=function(){return function t(){i(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.correspondingUseElement&&(t=t.correspondingUseElement);t;t=t.parentElement)if(n.call(t,e))return t;return null});function h(t,e,n){var o,i=2<arguments.length&&void 0!==n?n:{},r="prevent_recursive_dispatch_maximum_callstack".concat(e);if(t[r])return!0;t[r]=!0,"function"==typeof window.CustomEvent?o=new window.CustomEvent(e,{bubbles:!0,cancelable:!0,detail:i}):(o=document.createEvent("CustomEvent")).initCustomEvent(e,!0,!0,i);var l=t.dispatchEvent(o);return t[r]=null,l}function p(t,e){var n=1<arguments.length&&void 0!==e?e:document;if(t){if(t.nodeType)return[t];if("string"==typeof t)return[].slice.call(n.querySelectorAll(t));if(t.length)return[].slice.call(t)}return[]}var m={},v={up:{y:-1,prop:"top"},down:{y:1,prop:"bottom"},left:{x:-1},right:{x:1}},o=10,y=function(t){var e=0<arguments.length&&void 0!==t&&t;try{window.addEventListener("test",null,{get passive(){e={passive:!0}}})}catch(t){}return e}(),g=t&&window.matchMedia&&window.matchMedia("(prefers-reduced-motion)").matches,b=t&&(window.requestAnimationFrame||window.setTimeout);function w(t){m.diffX=m.pageX-(m.pageX=t.pageX),m.diffY=m.pageY-(m.pageY=t.pageY),m.diffSumX+=m.diffX,m.diffSumY+=m.diffY,m.target.scrollLeft=m.scrollX+=m.diffX,m.target.scrollTop=m.scrollY+=m.diffY,Math.max(Math.abs(m.diffSumX),Math.abs(m.diffSumY))>o&&(m.target.style.pointerEvents="none")}function E(t){var e=Math.abs(m.diffX||m.diffY)>o?20:0;document.removeEventListener("mousemove",w),document.removeEventListener("mouseup",E),document.body.style.cursor="",e&&m.target.scroll({x:m.scrollX+m.diffX*e,y:m.scrollY+m.diffY*e}),m.target.style.pointerEvents="",m.target.style.cursor="-webkit-grab",m.target.style.cursor="grab",m.target=null}return function(){function t(){return i(this,t),f(this,l(t).apply(this,arguments))}var e,n,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)}(t,a(HTMLElement)),e=t,(n=[{key:"connectedCallback",value:function(){var t,e,n,o,i=this;t=this.nodeName,e="\n      ".concat(this.nodeName,"{display:block}\n      ").concat(this.nodeName,"::-webkit-scrollbar{display:none}\n    "),n="style-".concat(t.toLowerCase()),o=e.replace(/\/\*[^!][^*]*\*\//g,"").replace(/\s*(^|[:;,{}]|$)\s*/g,"$1"),document.getElementById(n)||document.head.insertAdjacentHTML("afterbegin",'<style id="'.concat(n,'">').concat(o,"</style>")),this.style.overflow="scroll",this.style.willChange="scroll-position",this.style.webkitOverflowScrolling="touch";var r,l,s,c=this.offsetWidth-this.clientWidth,u=this.offsetHeight-this.clientHeight;this.style.marginRight="-".concat(c,"px"),this.style.marginBottom="-".concat(u,"px"),this.style.maxHeight="calc(100% + ".concat(u,"px)"),this._throttledEvent=(r=this.handleEvent.bind(this),l=500,function(){for(var t=arguments.length,e=new Array(t),n=0;n<t;n++)e[n]=arguments[n];s=s||setTimeout(function(){r.apply(this,e),s=null},l)}),this.addEventListener("mousedown",this),this.addEventListener("wheel",this,y),this.addEventListener("scroll",this._throttledEvent,y),window.addEventListener("resize",this._throttledEvent,y),window.addEventListener("load",this),document.addEventListener("click",this),setTimeout(function(){return i.handleEvent()})}},{key:"disconnectedCallback",value:function(){this._throttledEvent=null,this.removeEventListener("mousedown",this),this.removeEventListener("wheel",this,y),this.removeEventListener("scroll",this._throttledEvent,y),window.removeEventListener("resize",this._throttledEvent,y),window.removeEventListener("load",this),document.removeEventListener("click",this)}},{key:"handleEvent",value:function(t){var e=0<arguments.length&&void 0!==t?t:{};if(!e.defaultPrevented)if("wheel"===e.type)m.animate=!1;else if("mousedown"===e.type)(function(t){if(d(t.target,'[contenteditable="true"],input,select,textarea'))return;if(0!==t.button)return;t.preventDefault(),m.pageX=t.pageX,m.pageY=t.pageY,m.diffSumX=0,m.diffSumY=0,m.animate=m.diffX=m.diffY=0,m.scrollX=this.scrollLeft,m.scrollY=this.scrollTop,m.target=this,document.body.style.cursor=this.style.cursor="-webkit-grabbing",document.body.style.cursor=this.style.cursor="grabbing",document.addEventListener("mousemove",w),document.addEventListener("mouseup",E)}).call(this,e);else if("click"===e.type){var n=this.id&&d(e.target,'[for="'.concat(this.id,'"]'));n&&h(this,"scroll.click",{move:n.value})&&this.scroll(n.value)}else{var o={left:this.scrollLeft,up:this.scrollTop,right:this.scrollRight,down:this.scrollBottom},i=o.left||o.right||o.up||o.down?"grab":"";p(this.id&&'[for="'.concat(this.id,'"]')).forEach(function(t){return t.disabled=!o[t.value]}),h(this,"scroll.change"),e.type||(this.style.cursor="-webkit-".concat(i),this.style.cursor=i)}}},{key:"scroll",value:function(t){var e=this,n=function(t,o){var i="object"===u(o)?o:{move:o};"number"!=typeof i.x&&(i.x=t.scrollLeft);"number"!=typeof i.y&&(i.y=t.scrollTop);if(i.move=v[i.move]){var r=i.move.x?"x":"y",l=i.move.x?"left":"top",e=t.getBoundingClientRect(),s=e[l]-t[i.move.x?"scrollLeft":"scrollTop"],c=e[l]+e[i.move.x?"width":"height"]*i.move[r];t.items.every(function(t){var e=t.getBoundingClientRect(),n=t.ownerDocument.defaultView.getComputedStyle(t)["margin-".concat(l)];return i[r]=e[l]-parseInt(n,10)-s,e[i.move.prop||o]<c})}return{x:Math.max(0,Math.min(i.x,t.scrollWidth-t.clientWidth)),y:Math.max(0,Math.min(i.y,t.scrollHeight-t.clientHeight))}}(this,t),o=n.x,i=n.y,r=m.animate=Date.now().toString(36)+Math.random().toString(36).slice(2,5),l=this.friction,s=g?1:o-this.scrollLeft,c=g?1:i-this.scrollTop;!function t(){m.animate===r&&(Math.round(s)||Math.round(c))&&(e.scrollLeft=o-Math.round(s*=l),e.scrollTop=i-Math.round(c*=l),b(t))}()}},{key:"items",get:function(){return p(this.getAttribute("items")||this.children,this)},set:function(t){this.setAttribute("items",t||"")}},{key:"scrollRight",get:function(){return this.scrollWidth-this.clientWidth-this.scrollLeft}},{key:"scrollBottom",get:function(){return this.scrollHeight-this.clientHeight-this.scrollTop}},{key:"friction",get:function(){return Math.min(.99,this.getAttribute("friction"))||.8},set:function(t){this.setAttribute("friction",t)}}])&&r(e.prototype,n),o&&r(e,o),t}()}),window.customElements.define("core-scroll",coreScroll);
+/*! @nrk/core-scroll v4.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).coreScroll=e()}(this,(function(){"use strict";function t(e){return(t="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(e)}function e(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function n(t,e){for(var n=0;n<e.length;n++){var o=e[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(t,o.key,o)}}function o(t){return(o=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 r(){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 s(t,e,n){return(s=r()?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 c(t){var e="function"==typeof Map?new Map:void 0;return(c=function(t){if(null===t||(n=t,-1===Function.toString.call(n).indexOf("[native code]")))return t;var n;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,r)}function r(){return s(t,arguments,o(this).constructor)}return r.prototype=Object.create(t.prototype,{constructor:{value:r,enumerable:!1,writable:!0,configurable:!0}}),i(r,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 a="undefined"!=typeof window;a&&/(android)/i.test(navigator.userAgent),a&&/iPad|iPhone|iPod/.test(String(navigator.platform)),a||global.HTMLElement||(global.HTMLElement=function(){return function t(){e(this,t)}}());var u,f,d=(u="undefined"==typeof window?{}:window.Element.prototype,f=u.matches||u.msMatchesSelector||u.webkitMatchesSelector,u.closest?function(t,e){return t.closest(e)}:function(t,e){for(t.correspondingUseElement&&(t=t.correspondingUseElement);t;t=t.parentElement)if(f.call(t,e))return t;return null});function h(t,e){var n,o=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},i="prevent_recursive_dispatch_maximum_callstack".concat(e);if(t[i])return!0;t[i]=!0,"function"==typeof window.CustomEvent?n=new window.CustomEvent(e,{bubbles:!0,cancelable:!0,detail:o}):(n=document.createEvent("CustomEvent")).initCustomEvent(e,!0,!0,o);var r=t.dispatchEvent(n);return t[i]=null,r}function p(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:document;if(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 m={},v={up:{y:-1,prop:"top"},down:{y:1,prop:"bottom"},left:{x:-1},right:{x:1}},y=function(){var t=arguments.length>0&&void 0!==arguments[0]&&arguments[0];try{window.addEventListener("test",null,{get passive(){t={passive:!0}}})}catch(t){}return t}(),g=a&&window.matchMedia&&window.matchMedia("(prefers-reduced-motion)").matches,b=a&&(window.requestAnimationFrame||window.setTimeout);function w(t){d(t.target,'[contenteditable="true"],input,select,textarea')||0===t.button&&(t.preventDefault(),m.pageX=t.pageX,m.pageY=t.pageY,m.diffSumX=0,m.diffSumY=0,m.animate=m.diffX=m.diffY=0,m.scrollX=this.scrollLeft,m.scrollY=this.scrollTop,m.target=this,document.body.style.cursor=this.style.cursor="-webkit-grabbing",document.body.style.cursor=this.style.cursor="grabbing",document.addEventListener("mousemove",E),document.addEventListener("mouseup",L))}function E(t){m.diffX=m.pageX-(m.pageX=t.pageX),m.diffY=m.pageY-(m.pageY=t.pageY),m.diffSumX+=m.diffX,m.diffSumY+=m.diffY,m.target.scrollLeft=m.scrollX+=m.diffX,m.target.scrollTop=m.scrollY+=m.diffY,Math.max(Math.abs(m.diffSumX),Math.abs(m.diffSumY))>10&&(m.target.style.pointerEvents="none")}function L(t){var e=Math.abs(m.diffX||m.diffY)>10?20:0;document.removeEventListener("mousemove",E),document.removeEventListener("mouseup",L),document.body.style.cursor="",e&&m.target.scroll({x:m.scrollX+m.diffX*e,y:m.scrollY+m.diffY*e}),m.target.style.pointerEvents="",m.target.style.cursor="-webkit-grab",m.target.style.cursor="grab",m.target=null}return function(s){!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)}(x,s);var c,a,u,f,E,L=(c=x,a=r(),function(){var t,e=o(c);if(a){var n=o(this).constructor;t=Reflect.construct(e,arguments,n)}else t=e.apply(this,arguments);return l(this,t)});function x(){return e(this,x),L.apply(this,arguments)}return u=x,(f=[{key:"connectedCallback",value:function(){var t,e,n,o,i=this;t=this.nodeName,e="\n      ".concat(this.nodeName,"{display:block}\n      ").concat(this.nodeName,"::-webkit-scrollbar{display:none}\n    "),n="style-".concat(t.toLowerCase()),o=e.replace(/\/\*[^!][^*]*\*\//g,"").replace(/\s*(^|[:;,{}]|$)\s*/g,"$1"),document.getElementById(n)||document.head.insertAdjacentHTML("afterbegin",'<style id="'.concat(n,'">').concat(o,"</style>")),this.style.overflow="scroll",this.style.webkitOverflowScrolling="touch";var r,s,c,l=this.offsetWidth-this.clientWidth,a=this.offsetHeight-this.clientHeight;this.style.marginRight="-".concat(l,"px"),this.style.marginBottom="-".concat(a,"px"),this.style.maxHeight="calc(100% + ".concat(a,"px)"),this._throttledEvent=(r=this.handleEvent.bind(this),s=500,function(){for(var t=arguments.length,e=new Array(t),n=0;n<t;n++)e[n]=arguments[n];c||(c=setTimeout((function(){r.apply(this,e),c=null}),s))}),this.addEventListener("mousedown",this),this.addEventListener("wheel",this,y),this.addEventListener("scroll",this._throttledEvent,y),window.addEventListener("resize",this._throttledEvent,y),window.addEventListener("load",this),document.addEventListener("click",this),setTimeout((function(){return i.handleEvent()}))}},{key:"disconnectedCallback",value:function(){this._throttledEvent=null,this.removeEventListener("mousedown",this),this.removeEventListener("wheel",this,y),this.removeEventListener("scroll",this._throttledEvent,y),window.removeEventListener("resize",this._throttledEvent,y),window.removeEventListener("load",this),document.removeEventListener("click",this)}},{key:"handleEvent",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};if(this.parentNode&&!t.defaultPrevented)if("wheel"===t.type)m.animate=!1;else if("mousedown"===t.type)w.call(this,t);else if("click"===t.type){var e=this.id&&d(t.target,'[for="'.concat(this.id,'"],[data-for="').concat(this.id,'"]'));e&&h(this,"scroll.click",{move:e.value})&&this.scroll(e.value)}else{var n={left:this.scrollLeft,up:this.scrollTop,right:this.scrollRight,down:this.scrollBottom},o=n.left||n.right||n.up||n.down?"grab":"";p(this.id&&'[for="'.concat(this.id,'"],[data-for="').concat(this.id,'"]')).forEach((function(t){return t.disabled=!n[t.value]})),h(this,"scroll.change"),t.type||(this.style.cursor="-webkit-".concat(o),this.style.cursor=o)}}},{key:"scroll",value:function(e){var n=this,o=function(e,n){var o="object"===t(n)?n:{move:n};if("number"!=typeof o.x&&(o.x=e.scrollLeft),"number"!=typeof o.y&&(o.y=e.scrollTop),o.move=v[o.move]){var i=o.move.x?"x":"y",r=o.move.x?"left":"top",s=e.getBoundingClientRect(),c=s[r]-e[o.move.x?"scrollLeft":"scrollTop"],l=s[r]+s[o.move.x?"width":"height"]*o.move[i];e.items.every((function(t){var e=t.getBoundingClientRect(),s=t.ownerDocument.defaultView.getComputedStyle(t)["margin-".concat(r)];return o[i]=e[r]-parseInt(s,10)-c,e[o.move.prop||n]<l}))}return{x:Math.max(0,Math.min(o.x,e.scrollWidth-e.clientWidth)),y:Math.max(0,Math.min(o.y,e.scrollHeight-e.clientHeight))}}(this,e),i=o.x,r=o.y,s=m.animate=Date.now().toString(36)+Math.random().toString(36).slice(2,5),c=this.friction,l=g?1:i-this.scrollLeft,a=g?1:r-this.scrollTop;!function t(){m.animate===s&&(Math.round(l)||Math.round(a))&&(n.scrollLeft=i-Math.round(l*=c),n.scrollTop=r-Math.round(a*=c),b(t))}()}},{key:"items",get:function(){return p(this.getAttribute("items")||this.children,this)},set:function(t){this.setAttribute("items",t||"")}},{key:"scrollRight",get:function(){return this.scrollWidth-this.clientWidth-this.scrollLeft}},{key:"scrollBottom",get:function(){return this.scrollHeight-this.clientHeight-this.scrollTop}},{key:"friction",get:function(){return Math.min(.99,this.getAttribute("friction"))||.8},set:function(t){this.setAttribute("friction",t)}}])&&n(u.prototype,f),E&&n(u,E),x}(c(HTMLElement))})),window.customElements.define("core-scroll",coreScroll);
 //# sourceMappingURL=core-scroll.min.js.map

core-scroll.test.cjs.js

@@ -0,8 +1,12 @@
+/*! @nrk/core-scroll v4.2.0 - Copyright (c) 2017-2021 NRK */
 'use strict';
 
-function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
+var fs = require('fs');
+var path = require('path');
 
-var fs = _interopDefault(require('fs'));
-var path = _interopDefault(require('path'));
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
+var fs__default = /*#__PURE__*/_interopDefaultLegacy(fs);
+var path__default = /*#__PURE__*/_interopDefaultLegacy(path);
+
 function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
@@ -44,4 +48,4 @@ try {
 
-var coreScroll = fs.readFileSync(path.resolve(__dirname, 'core-scroll.min.js'), 'utf-8');
-var customElements = fs.readFileSync(require.resolve('@webcomponents/custom-elements'), 'utf-8');
+var coreScroll = fs__default['default'].readFileSync(path__default['default'].resolve(__dirname, 'core-scroll.min.js'), 'utf-8');
+var customElements = fs__default['default'].readFileSync(require.resolve('@webcomponents/custom-elements'), 'utf-8');
 describe('core-scroll', function () {
@@ -78,3 +82,3 @@ beforeEach( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
             return browser.executeScript(function () {
-              document.body.innerHTML = "\n        <button for=\"scroller\" value=\"down\">Down</button>\n        <core-scroll id=\"scroller\">\n          <div>This is overflowing content</div>\n          <div>This is overflowing content</div>\n          <div>This is overflowing content</div>\n        </core-scroll>\n      ";
+              document.body.innerHTML = "\n        <button data-for=\"scroller\" value=\"down\">Down</button>\n        <core-scroll id=\"scroller\">\n          <div>This is overflowing content</div>\n          <div>This is overflowing content</div>\n          <div>This is overflowing content</div>\n        </core-scroll>\n      ";
             });
@@ -81,0 +85,0 @@

core-scroll.test.js

@@ -17,3 +17,3 @@ import fs from 'fs'
       document.body.innerHTML = `
-        <button for="scroller" value="down">Down</button>
+        <button data-for="scroller" value="down">Down</button>
         <core-scroll id="scroller">
@@ -20,0 +20,0 @@ <div>This is overflowing content</div>

jsx.js

@@ -0,7 +1,10 @@
+/*! @nrk/core-scroll v4.2.0 - Copyright (c) 2017-2021 NRK */
 'use strict';
 
-function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
+var React = require('react');
 
-var React = _interopDefault(require('react'));
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
 function _typeof(obj) {
@@ -76,3 +79,3 @@ "@babel/helpers - typeof";
 
-function isNativeReflectConstruct() {
+function _isNativeReflectConstruct() {
   if (typeof Reflect === "undefined" || !Reflect.construct) return false;
@@ -83,3 +86,3 @@ if (Reflect.construct.sham) return false;
   try {
-    Date.prototype.toString.call(Reflect.construct(Date, [], function () {}));
+    Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {}));
     return true;
@@ -92,3 +95,3 @@ } catch (e) {
 function _construct(Parent, args, Class) {
-  if (isNativeReflectConstruct()) {
+  if (_isNativeReflectConstruct()) {
     _construct = Reflect.construct;
@@ -163,6 +166,26 @@ } else {
 
+function _createSuper(Derived) {
+  var hasNativeReflectConstruct = _isNativeReflectConstruct();
+
+  return function _createSuperInternal() {
+    var Super = _getPrototypeOf(Derived),
+        result;
+
+    if (hasNativeReflectConstruct) {
+      var NewTarget = _getPrototypeOf(this).constructor;
+
+      result = Reflect.construct(Super, arguments, NewTarget);
+    } else {
+      result = Super.apply(this, arguments);
+    }
+
+    return _possibleConstructorReturn(this, result);
+  };
+}
+
 var IS_BROWSER = typeof window !== 'undefined';
-var IS_ANDROID = IS_BROWSER && /(android)/i.test(navigator.userAgent); // Bad, but needed
+IS_BROWSER && /(android)/i.test(navigator.userAgent); // Bad, but needed
 
-var IS_IOS = IS_BROWSER && /iPad|iPhone|iPod/.test(String(navigator.platform)); // Mock HTMLElement for Node
+IS_BROWSER && /iPad|iPhone|iPod/.test(String(navigator.platform));
+// Mock HTMLElement for Node
 
@@ -196,3 +219,3 @@ if (!IS_BROWSER && !global.HTMLElement) {
 
-var closest = function () {
+var closest$1 = function () {
   var proto = typeof window === 'undefined' ? {} : window.Element.prototype;
@@ -339,6 +362,8 @@ var match = proto.matches || proto.msMatchesSelector || proto.webkitMatchesSelector;
 
+  var _super = _createSuper(CoreScroll);
+
   function CoreScroll() {
     _classCallCheck(this, CoreScroll);
 
-    return _possibleConstructorReturn(this, _getPrototypeOf(CoreScroll).apply(this, arguments));
+    return _super.apply(this, arguments);
   }
@@ -355,4 +380,2 @@
 
-      this.style.willChange = 'scroll-position'; // Enhance performance
-
       this.style.webkitOverflowScrolling = 'touch'; // Momentum scroll on iOS
@@ -395,28 +418,29 @@ // Calculate sizes for hiding, must be after setting overflow:scroll
       var event = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-      if (event.defaultPrevented) return;
+      if (!this.parentNode || event.defaultPrevented) return; // Abort if removed from DOM or event is prevented
+
       if (event.type === 'wheel') DRAG.animate = false; // Stop momentum animation onWheel
       else if (event.type === 'mousedown') onMousedown.call(this, event);else if (event.type === 'click') {
-          var btn = this.id && closest(event.target, "[for=\"".concat(this.id, "\"]"));
-          if (btn && dispatchEvent(this, 'scroll.click', {
-            move: btn.value
-          })) this.scroll(btn.value);
-        } else {
-          var scroll = {
-            left: this.scrollLeft,
-            up: this.scrollTop,
-            right: this.scrollRight,
-            down: this.scrollBottom
-          };
-          var cursor = scroll.left || scroll.right || scroll.up || scroll.down ? 'grab' : '';
-          queryAll(this.id && "[for=\"".concat(this.id, "\"]")).forEach(function (el) {
-            return el.disabled = !scroll[el.value];
-          });
-          dispatchEvent(this, 'scroll.change');
+        var btn = this.id && closest$1(event.target, "[for=\"".concat(this.id, "\"],[data-for=\"").concat(this.id, "\"]"));
+        if (btn && dispatchEvent(this, 'scroll.click', {
+          move: btn.value
+        })) this.scroll(btn.value);
+      } else {
+        var scroll = {
+          left: this.scrollLeft,
+          up: this.scrollTop,
+          right: this.scrollRight,
+          down: this.scrollBottom
+        };
+        var cursor = scroll.left || scroll.right || scroll.up || scroll.down ? 'grab' : '';
+        queryAll(this.id && "[for=\"".concat(this.id, "\"],[data-for=\"").concat(this.id, "\"]")).forEach(function (el) {
+          return el.disabled = !scroll[el.value];
+        });
+        dispatchEvent(this, 'scroll.change');
 
-          if (!event.type) {
-            // Do not change cursor while dragging
-            this.style.cursor = "-webkit-".concat(cursor);
-            this.style.cursor = cursor;
-          }
+        if (!event.type) {
+          // Do not change cursor while dragging
+          this.style.cursor = "-webkit-".concat(cursor);
+          this.style.cursor = cursor;
         }
+      }
     }
@@ -482,3 +506,3 @@ }, {
 function onMousedown(event) {
-  if (closest(event.target, NEEDS_MOUSEDOWN)) return;
+  if (closest$1(event.target, NEEDS_MOUSEDOWN)) return;
   if (event.button !== 0) return; // Only react to left clicking
@@ -565,3 +589,3 @@
 
-var version = "4.1.4";
+var version = "4.2.0";
 
@@ -575,3 +599,3 @@ /**
 
-var closest$1 = function () {
+var closest = function () {
   var proto = typeof window === 'undefined' ? {} : window.Element.prototype;
@@ -622,97 +646,96 @@ var match = proto.matches || proto.msMatchesSelector || proto.webkitMatchesSelector;
   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); // Register ref prop for accessing custom element https://reactjs.org/docs/refs-and-the-dom.html#callback-refs
+  return function (superclass) {
+    function anonymous(props) {
+      var this$1$1 = this;
+      superclass.call(this, props); // Register ref prop for accessing custom element https://reactjs.org/docs/refs-and-the-dom.html#callback-refs
 
-        this.ref = function (el) {
-          if (typeof this$1.props.forwardRef === 'function') {
-            this$1.props.forwardRef(el);
-          } else if (this$1.props.forwardRef) {
-            this$1.props.forwardRef.current = el;
-          }
+      this.ref = function (el) {
+        if (typeof this$1$1.props.forwardRef === 'function') {
+          this$1$1.props.forwardRef(el);
+        } else if (this$1$1.props.forwardRef) {
+          this$1$1.props.forwardRef.current = el;
+        }
 
-          return this$1.el = el;
-        }; // Register event handler on component for each custom event
+        return this$1$1.el = el;
+      }; // Register event handler on component for each custom event
 
 
-        Object.keys(eventMap).forEach(function (eventName) {
-          var onEventName = eventMap[eventName];
+      Object.keys(eventMap).forEach(function (eventName) {
+        var onEventName = eventMap[eventName];
 
-          this$1[eventName] = function (event) {
-            if (this$1.props[onEventName] && closest$1(event.target, this$1.el.nodeName) === this$1.el) {
-              this$1.props[onEventName](event);
-            }
-          };
-        });
-      }
+        this$1$1[eventName] = function (event) {
+          if (this$1$1.props[onEventName] && closest(event.target, this$1$1.el.nodeName) === this$1$1.el) {
+            this$1$1.props[onEventName](event);
+          }
+        };
+      });
+    }
 
-      if (superclass) anonymous.__proto__ = superclass;
-      anonymous.prototype = Object.create(superclass && superclass.prototype);
-      anonymous.prototype.constructor = anonymous;
+    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; // Run connectedCallback() after React componentDidMount() to allow React hydration to run first
+    anonymous.prototype.componentDidMount = function componentDidMount() {
+      var this$1$1 = this; // Run connectedCallback() after React componentDidMount() to allow React hydration to run first
 
-        if (!window.customElements.get(tagName)) {
-          window.customElements.define(tagName, elementClass);
-        } // Populate properties on custom element
+      if (!window.customElements.get(tagName)) {
+        window.customElements.define(tagName, elementClass);
+      } // Populate properties on custom element
 
 
-        customProps.forEach(function (propName) {
-          if (propName in this$1.props) {
-            this$1.el[propName] = this$1.props[propName];
-          }
-        }); // Register events on custom element
+      customProps.forEach(function (propName) {
+        if (propName in this$1$1.props) {
+          this$1$1.el[propName] = this$1$1.props[propName];
+        }
+      }); // Register events on custom element
 
-        customEvents.forEach(function (eventName) {
-          this$1.el.addEventListener(eventName, this$1[eventName]);
-        });
-      };
+      customEvents.forEach(function (eventName) {
+        this$1$1.el.addEventListener(eventName, this$1$1[eventName]);
+      });
+    };
 
-      anonymous.prototype.componentDidUpdate = function componentDidUpdate(prev) {
-        var this$1 = this; // Sync prop changes to custom element
+    anonymous.prototype.componentDidUpdate = function componentDidUpdate(prev) {
+      var this$1$1 = this; // Sync prop changes to custom element
 
-        customProps.forEach(function (propName) {
-          if (prev[propName] !== this$1.props[propName]) {
-            this$1.el[propName] = this$1.props[propName];
-          }
-        });
-      };
+      customProps.forEach(function (propName) {
+        if (prev[propName] !== this$1$1.props[propName]) {
+          this$1$1.el[propName] = this$1$1.props[propName];
+        }
+      });
+    };
 
-      anonymous.prototype.componentWillUnmount = function componentWillUnmount() {
-        var this$1 = this; // Remove event handlers on custom element on unmount
+    anonymous.prototype.componentWillUnmount = function componentWillUnmount() {
+      var this$1$1 = this; // Remove event handlers on custom element on unmount
 
-        customEvents.forEach(function (eventName) {
-          this$1.el.removeEventListener(eventName, this$1[eventName]);
-        });
-      };
+      customEvents.forEach(function (eventName) {
+        this$1$1.el.removeEventListener(eventName, this$1$1[eventName]);
+      });
+    };
 
-      anonymous.prototype.render = function render() {
-        var this$1 = this; // Convert React props to CustomElement props https://github.com/facebook/react/issues/12810
+    anonymous.prototype.render = function render() {
+      var this$1$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, propName) {
-          if (skipProps.indexOf(propName) === -1) {
-            // Do not render customEvents and custom props as attributes
-            if (propName === 'className') {
-              thisProps["class"] = this$1.props[propName];
-            } // Fixes className for custom elements
-            else if (this$1.props[propName] === true) {
-                thisProps[propName] = '';
-              } // Fixes boolean attributes
-              else if (this$1.props[propName] !== false) {
-                  thisProps[propName] = this$1.props[propName];
-                } // Pass only truthy, non-function props
+      return React__default['default'].createElement(tagName, Object.keys(this.props).reduce(function (thisProps, propName) {
+        if (skipProps.indexOf(propName) === -1) {
+          // Do not render customEvents and custom props as attributes
+          if (propName === 'className') {
+            thisProps["class"] = this$1$1.props[propName];
+          } // Fixes className for custom elements
+          else if (this$1$1.props[propName] === true) {
+            thisProps[propName] = '';
+          } // Fixes boolean attributes
+          else if (this$1$1.props[propName] !== false) {
+            thisProps[propName] = this$1$1.props[propName];
+          } // Pass only truthy, non-function props
 
-          }
+        }
 
-          return thisProps;
-        }, {
-          ref: this.ref
-        }));
-      };
+        return thisProps;
+      }, {
+        ref: this.ref
+      }));
+    };
 
-      return anonymous;
-    }(React.Component)
-  );
+    return anonymous;
+  }(React__default['default'].Component);
 }
@@ -719,0 +742,0 @@

package.json

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

readme.md

@@ -31,7 +31,7 @@ # Core Scroll
 <!--demo-->
-<button for="my-scroll-js" value="up" aria-label="Rull opp">&uarr;</button>
-<button for="my-scroll-js" value="down" aria-label="Rull ned">&darr;</button>
+<button data-for="my-scroll-js" value="up" aria-label="Rull opp">&uarr;</button>
+<button data-for="my-scroll-js" value="down" aria-label="Rull ned">&darr;</button>
 <br>
-<button for="my-scroll-js" value="left" aria-label="Rull til venstre">&larr;</button>
-<button for="my-scroll-js" value="right" aria-label="Rull til høyre">&rarr;</button>
+<button data-for="my-scroll-js" value="left" aria-label="Rull til venstre">&larr;</button>
+<button data-for="my-scroll-js" value="right" aria-label="Rull til høyre">&rarr;</button>
 <div class="my-wrap my-wrap-js">
@@ -128,4 +128,4 @@ <core-scroll id="my-scroll-js" class="my-scroll">
 <!--demo-->
-<button for="my-scroll-child" value="left" aria-label="Rull til venstre">&larr;</button>
-<button for="my-scroll-child" value="right" aria-label="Rull til høyre">&rarr;</button>
+<button data-for="my-scroll-child" value="left" aria-label="Rull til venstre">&larr;</button>
+<button data-for="my-scroll-child" value="right" aria-label="Rull til høyre">&rarr;</button>
 <div class="my-wrap">
@@ -157,3 +157,3 @@ <core-scroll id="my-scroll-child" class="my-scroll" items="li">
 
-Remember to [polyfill](https://github.com/webcomponents/polyfills#custom-elements) custom elements if needed.
+Remember to [polyfill](https://github.com/webcomponents/polyfills/tree/master/packages/custom-elements) custom elements if needed.
 
@@ -167,3 +167,3 @@
 <button
-  for="my-scroll-js"      <!-- {String} Id of <core-scroll> -->
+  data-for="my-scroll-js"      <!-- {String} Id of <core-scroll> -->
   value="up"              <!-- {String} Sets direction of scroll. Possible values: "left", "right", "up" or "down" -->
@@ -170,0 +170,0 @@ aria-label="Rull opp">  <!-- {String} Sets label -->

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

160851

increased by1.81%

Lines of code

2006

increased by2.61%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes