react-remove-scroll - npm Package Compare versions

Comparing version 2.4.4 to 2.5.0

dist/es2015/aggresiveCapture.js

@@ -8,5 +8,7 @@ var passiveSupported = false;
                 return true;
-            }
+            },
         });
+        // @ts-ignore
         window.addEventListener('test', options, options);
+        // @ts-ignore
         window.removeEventListener('test', options, options);
@@ -13,0 +15,0 @@ }

dist/es2015/Combination.js

@@ -1,7 +0,7 @@
-import * as tslib_1 from "tslib";
+import { __assign } from "tslib";
 import * as React from 'react';
 import { RemoveScroll } from './UI';
 import SideCar from './sidecar';
-var ReactRemoveScroll = React.forwardRef(function (props, ref) { return (React.createElement(RemoveScroll, tslib_1.__assign({}, props, { ref: ref, sideCar: SideCar }))); });
+var ReactRemoveScroll = React.forwardRef(function (props, ref) { return (React.createElement(RemoveScroll, __assign({}, props, { ref: ref, sideCar: SideCar }))); });
 ReactRemoveScroll.classNames = RemoveScroll.classNames;
 export default ReactRemoveScroll;

dist/es2015/handleScroll.js

@@ -9,6 +9,2 @@ var elementCouldBeVScrolled = function (node) {
     var styles = window.getComputedStyle(node);
-    // we allow horizontal scroll on range elements
-    if (node.type === "range") {
-        return true;
-    }
     return (styles.overflowX !== 'hidden' && // not-not-scrollable
@@ -22,3 +18,3 @@ !(styles.overflowY === styles.overflowX && styles.overflowX === 'visible') // scrollable
         // Skip over shadow root
-        if (typeof ShadowRoot !== "undefined" && current instanceof ShadowRoot) {
+        if (typeof ShadowRoot !== 'undefined' && current instanceof ShadowRoot) {
             current = current.host;
@@ -39,7 +35,15 @@ }
     var scrollTop = _a.scrollTop, scrollHeight = _a.scrollHeight, clientHeight = _a.clientHeight;
-    return [scrollTop, scrollHeight, clientHeight];
+    return [
+        scrollTop,
+        scrollHeight,
+        clientHeight,
+    ];
 };
 var getHScrollVariables = function (_a) {
     var scrollLeft = _a.scrollLeft, scrollWidth = _a.scrollWidth, clientWidth = _a.clientWidth;
-    return [scrollLeft, scrollWidth, clientWidth];
+    return [
+        scrollLeft,
+        scrollWidth,
+        clientWidth,
+    ];
 };
@@ -52,9 +56,10 @@ var elementCouldBeScrolled = function (axis, node) {
 };
-var getDirectionFactor = function (axis, direction) { return (
-/**
- * If the element's direction is rtl (right-to-left), then scrollLeft is 0 when the scrollbar is at its rightmost position,
- * and then increasingly negative as you scroll towards the end of the content.
- * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollLeft
- */
-axis === 'h' && direction === 'rtl' ? -1 : 1); };
+var getDirectionFactor = function (axis, direction) {
+    /**
+     * If the element's direction is rtl (right-to-left), then scrollLeft is 0 when the scrollbar is at its rightmost position,
+     * and then increasingly negative as you scroll towards the end of the content.
+     * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollLeft
+     */
+    return axis === 'h' && direction === 'rtl' ? -1 : 1;
+};
 export var handleScroll = function (axis, endTarget, event, sourceDelta, noOverscroll) {
@@ -85,10 +90,7 @@ var directionFactor = getDirectionFactor(axis, window.getComputedStyle(endTarget).direction);
         (targetInLock && (endTarget.contains(target) || endTarget === target)));
-    if (isDeltaPositive &&
-        ((noOverscroll && availableScroll === 0) ||
-            (!noOverscroll && delta > availableScroll))) {
+    if (isDeltaPositive && ((noOverscroll && availableScroll === 0) || (!noOverscroll && delta > availableScroll))) {
         shouldCancelScroll = true;
     }
     else if (!isDeltaPositive &&
-        ((noOverscroll && availableScrollTop === 0) ||
-            (!noOverscroll && -delta > availableScrollTop))) {
+        ((noOverscroll && availableScrollTop === 0) || (!noOverscroll && -delta > availableScrollTop))) {
         shouldCancelScroll = true;
@@ -95,0 +97,0 @@ }

dist/es2015/medium.d.ts

@@ -1,2 +0,2 @@
-/// <reference types="react" />
-export declare const effectCar: Readonly<import("use-sidecar/dist/es5/types").SideMedium<import("react").ComponentType<{}>>>;
+import { IRemoveScrollEffectProps } from './types';
+export declare const effectCar: Readonly<import("use-sidecar/dist/es5/types").SideCarMedium<IRemoveScrollEffectProps>>;

dist/es2015/pinchAndZoom.js

@@ -1,4 +0,2 @@
-var ds = function (ab) {
-    return (ab[0] <= 0 && ab[1] >= 0) || (ab[0] >= 0 && ab[1] <= 0);
-};
+var ds = function (ab) { return (ab[0] <= 0 && ab[1] >= 0) || (ab[0] >= 0 && ab[1] <= 0); };
 var sign = function (x) { return (x < 0 ? -1 : 1); };
@@ -10,21 +8,12 @@ export var pinchOrZoom = function (event, cache) {
     if (event.touches.length === 2) {
-        var oldPoints = [
-            cache[event.touches[0].identifier],
-            cache[event.touches[1].identifier]
-        ];
+        var oldPoints = [cache[event.touches[0].identifier], cache[event.touches[1].identifier]];
         var newPoints = [event.touches[0], event.touches[1]];
         if (oldPoints[0] && oldPoints[1]) {
             // Calculate the difference between the start and move coordinates
-            var diffx = [
-                oldPoints[0].clientX - newPoints[0].clientX,
-                oldPoints[1].clientX - newPoints[1].clientX
-            ];
-            var diffy = [
-                oldPoints[0].clientY - newPoints[0].clientY,
-                oldPoints[1].clientY - newPoints[1].clientY
-            ];
+            var diffx = [oldPoints[0].clientX - newPoints[0].clientX, oldPoints[1].clientX - newPoints[1].clientX];
+            var diffy = [oldPoints[0].clientY - newPoints[0].clientY, oldPoints[1].clientY - newPoints[1].clientY];
             console.log(diffx, diffy);
             if (ds(diffx) || ds(diffy)) {
                 return {
-                    action: 'zoom'
+                    action: 'zoom',
                 };
@@ -36,3 +25,3 @@ }
                 action: 'pinch',
-                coords: [mx * sign(diffx[0]), my * sign(diffx[1])]
+                coords: [mx * sign(diffx[0]), my * sign(diffx[1])],
             };
@@ -44,4 +33,4 @@ }
         action: 'move',
-        coords: [event.changedTouches[0].clientX, event.changedTouches[0].clientY]
+        coords: [event.changedTouches[0].clientX, event.changedTouches[0].clientY],
     };
 };

dist/es2015/sidecar.d.ts

@@ -1,3 +0,2 @@
-/// <reference types="react" />
-declare const _default: import("react").FunctionComponent<import("./types").IRemoveScrollEffectProps & import("use-sidecar/dist/es5/types").SideCarHOC>;
+declare const _default: import("use-sidecar").SideCarComponent<import("./types").IRemoveScrollEffectProps>;
 export default _default;

dist/es2015/SideEffect.d.ts

@@ -1,5 +0,5 @@
-import * as React from 'react';
+import { TouchEvent } from 'react';
 import { IRemoveScrollEffectProps } from './types';
-export declare const getTouchXY: (event: WheelEvent | React.TouchEvent<Element>) => number[];
+export declare const getTouchXY: (event: TouchEvent | WheelEvent) => number[];
 export declare const getDeltaXY: (event: WheelEvent) => number[];
 export declare function RemoveScrollSideCar(props: IRemoveScrollEffectProps): JSX.Element;

dist/es2015/SideEffect.js

@@ -0,10 +1,9 @@
+import { __spreadArray } from "tslib";
 import * as React from 'react';
 import { RemoveScrollBar } from 'react-remove-scroll-bar';
 import { styleSingleton } from 'react-style-singleton';
+import { nonPassive } from './aggresiveCapture';
 import { handleScroll, locationCouldBeScrolled } from './handleScroll';
-import { nonPassive } from './aggresiveCapture';
 export var getTouchXY = function (event) {
-    return 'changedTouches' in event
-        ? [event.changedTouches[0].clientX, event.changedTouches[0].clientY]
-        : [0, 0];
+    return 'changedTouches' in event ? [event.changedTouches[0].clientX, event.changedTouches[0].clientY] : [0, 0];
 };
@@ -15,6 +14,4 @@ export var getDeltaXY = function (event) { return [event.deltaX, event.deltaY]; };
 };
-var deltaCompare = function (x, y) {
-    return x[0] === y[0] && x[1] === y[1];
-};
-var generateStyle = function (id) { return "\n  .block-interactivity-" + id + " {pointer-events: none;}\n  .allow-interactivity-" + id + " {pointer-events: all;}\n"; };
+var deltaCompare = function (x, y) { return x[0] === y[0] && x[1] === y[1]; };
+var generateStyle = function (id) { return "\n  .block-interactivity-".concat(id, " {pointer-events: none;}\n  .allow-interactivity-").concat(id, " {pointer-events: all;}\n"); };
 var idCounter = 0;
@@ -34,12 +31,8 @@ var lockStack = [];
         if (props.inert) {
-            document.body.classList.add("block-interactivity-" + id);
-            var allow_1 = [
-                props.lockRef.current
-            ].concat((props.shards || []).map(extractRef)).filter(Boolean);
-            allow_1.forEach(function (el) { return el.classList.add("allow-interactivity-" + id); });
+            document.body.classList.add("block-interactivity-".concat(id));
+            var allow_1 = __spreadArray([props.lockRef.current], (props.shards || []).map(extractRef), true).filter(Boolean);
+            allow_1.forEach(function (el) { return el.classList.add("allow-interactivity-".concat(id)); });
             return function () {
-                document.body.classList.remove("block-interactivity-" + id);
-                allow_1.forEach(function (el) {
-                    return el.classList.remove("allow-interactivity-" + id);
-                });
+                document.body.classList.remove("block-interactivity-".concat(id));
+                allow_1.forEach(function (el) { return el.classList.remove("allow-interactivity-".concat(id)); });
             };
@@ -60,2 +53,6 @@ }
         var moveDirection = Math.abs(deltaX) > Math.abs(deltaY) ? 'h' : 'v';
+        // allow horizontal touch move on Range inputs. They will not cause any scroll
+        if ('touches' in event && moveDirection === 'h' && target.type === 'range') {
+            return false;
+        }
         var canBeScrolledInMainDirection = locationCouldBeScrolled(moveDirection, target);
@@ -76,5 +73,3 @@ if (!canBeScrolledInMainDirection) {
         }
-        if (!activeAxis.current &&
-            'changedTouches' in event &&
-            (deltaX || deltaY)) {
+        if (!activeAxis.current && 'changedTouches' in event && (deltaX || deltaY)) {
             activeAxis.current = currentAxis;
@@ -95,7 +90,3 @@ }
         var delta = 'deltaY' in event ? getDeltaXY(event) : getTouchXY(event);
-        var sourceEvent = shouldPreventQueue.current.filter(function (e) {
-            return e.name === event.type &&
-                e.target === event.target &&
-                deltaCompare(e.delta, delta);
-        })[0];
+        var sourceEvent = shouldPreventQueue.current.filter(function (e) { return e.name === event.type && e.target === event.target && deltaCompare(e.delta, delta); })[0];
         // self event, and should be canceled
@@ -112,5 +103,3 @@ if (sourceEvent && sourceEvent.should) {
                 .filter(function (node) { return node.contains(event.target); });
-            var shouldStop = shardNodes.length > 0
-                ? shouldCancelEvent(event, shardNodes[0])
-                : !lastProps.current.noIsolation;
+            var shouldStop = shardNodes.length > 0 ? shouldCancelEvent(event, shardNodes[0]) : !lastProps.current.noIsolation;
             if (shouldStop) {
@@ -143,3 +132,3 @@ event.preventDefault();
             onWheelCapture: scrollWheel,
-            onTouchMoveCapture: scrollTouchMove
+            onTouchMoveCapture: scrollTouchMove,
         });
@@ -146,0 +135,0 @@ document.addEventListener('wheel', shouldPrevent, nonPassive);

dist/es2015/UI.js

@@ -1,6 +0,6 @@
-import * as tslib_1 from "tslib";
+import { __assign, __rest } from "tslib";
 import * as React from 'react';
 import { fullWidthClassName, zeroRightClassName } from 'react-remove-scroll-bar/constants';
+import { useMergeRefs } from 'use-callback-ref';
 import { effectCar } from './medium';
-import { useMergeRefs } from 'use-callback-ref';
 var nothing = function () {
@@ -17,14 +17,11 @@ return;
         onWheelCapture: nothing,
-        onTouchMoveCapture: nothing
+        onTouchMoveCapture: nothing,
     }), callbacks = _a[0], setCallbacks = _a[1];
-    var forwardProps = props.forwardProps, children = props.children, className = props.className, removeScrollBar = props.removeScrollBar, enabled = props.enabled, shards = props.shards, sideCar = props.sideCar, noIsolation = props.noIsolation, inert = props.inert, allowPinchZoom = props.allowPinchZoom, _b = props.as, Container = _b === void 0 ? 'div' : _b, rest = tslib_1.__rest(props, ["forwardProps", "children", "className", "removeScrollBar", "enabled", "shards", "sideCar", "noIsolation", "inert", "allowPinchZoom", "as"]);
+    var forwardProps = props.forwardProps, children = props.children, className = props.className, removeScrollBar = props.removeScrollBar, enabled = props.enabled, shards = props.shards, sideCar = props.sideCar, noIsolation = props.noIsolation, inert = props.inert, allowPinchZoom = props.allowPinchZoom, _b = props.as, Container = _b === void 0 ? 'div' : _b, rest = __rest(props, ["forwardProps", "children", "className", "removeScrollBar", "enabled", "shards", "sideCar", "noIsolation", "inert", "allowPinchZoom", "as"]);
     var SideCar = sideCar;
-    var containerRef = useMergeRefs([
-        ref,
-        parentRef
-    ]);
-    var containerProps = tslib_1.__assign({}, rest, callbacks);
+    var containerRef = useMergeRefs([ref, parentRef]);
+    var containerProps = __assign(__assign({}, rest), callbacks);
     return (React.createElement(React.Fragment, null,
         enabled && (React.createElement(SideCar, { sideCar: effectCar, removeScrollBar: removeScrollBar, shards: shards, noIsolation: noIsolation, inert: inert, setCallbacks: setCallbacks, allowPinchZoom: !!allowPinchZoom, lockRef: ref })),
-        forwardProps ? (React.cloneElement(React.Children.only(children), tslib_1.__assign({}, containerProps, { ref: containerRef }))) : (React.createElement(Container, tslib_1.__assign({}, containerProps, { className: className, ref: containerRef }), children))));
+        forwardProps ? (React.cloneElement(React.Children.only(children), __assign(__assign({}, containerProps), { ref: containerRef }))) : (React.createElement(Container, __assign({}, containerProps, { className: className, ref: containerRef }), children))));
 });
@@ -34,8 +31,8 @@ RemoveScroll.defaultProps = {
     removeScrollBar: true,
-    inert: false
+    inert: false,
 };
 RemoveScroll.classNames = {
     fullWidth: fullWidthClassName,
-    zeroRight: zeroRightClassName
+    zeroRight: zeroRightClassName,
 };
 export { RemoveScroll };

dist/es5/aggresiveCapture.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.nonPassive = void 0;
 var passiveSupported = false;
@@ -10,5 +11,7 @@ if (typeof window !== 'undefined') {
                 return true;
-            }
+            },
         });
+        // @ts-ignore
         window.addEventListener('test', options, options);
+        // @ts-ignore
         window.removeEventListener('test', options, options);
@@ -15,0 +18,0 @@ }

dist/es5/Combination.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
-var React = require("react");
+var React = tslib_1.__importStar(require("react"));
 var UI_1 = require("./UI");
-var sidecar_1 = require("./sidecar");
+var sidecar_1 = tslib_1.__importDefault(require("./sidecar"));
 var ReactRemoveScroll = React.forwardRef(function (props, ref) { return (React.createElement(UI_1.RemoveScroll, tslib_1.__assign({}, props, { ref: ref, sideCar: sidecar_1.default }))); });
 ReactRemoveScroll.classNames = UI_1.RemoveScroll.classNames;
 exports.default = ReactRemoveScroll;

dist/es5/handleScroll.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.handleScroll = exports.locationCouldBeScrolled = void 0;
 var elementCouldBeVScrolled = function (node) {
@@ -11,6 +12,2 @@ var styles = window.getComputedStyle(node);
     var styles = window.getComputedStyle(node);
-    // we allow horizontal scroll on range elements
-    if (node.type === "range") {
-        return true;
-    }
     return (styles.overflowX !== 'hidden' && // not-not-scrollable
@@ -20,7 +17,7 @@ !(styles.overflowY === styles.overflowX && styles.overflowX === 'visible') // scrollable
 };
-exports.locationCouldBeScrolled = function (axis, node) {
+var locationCouldBeScrolled = function (axis, node) {
     var current = node;
     do {
         // Skip over shadow root
-        if (typeof ShadowRoot !== "undefined" && current instanceof ShadowRoot) {
+        if (typeof ShadowRoot !== 'undefined' && current instanceof ShadowRoot) {
             current = current.host;
@@ -39,9 +36,18 @@ }
 };
+exports.locationCouldBeScrolled = locationCouldBeScrolled;
 var getVScrollVariables = function (_a) {
     var scrollTop = _a.scrollTop, scrollHeight = _a.scrollHeight, clientHeight = _a.clientHeight;
-    return [scrollTop, scrollHeight, clientHeight];
+    return [
+        scrollTop,
+        scrollHeight,
+        clientHeight,
+    ];
 };
 var getHScrollVariables = function (_a) {
     var scrollLeft = _a.scrollLeft, scrollWidth = _a.scrollWidth, clientWidth = _a.clientWidth;
-    return [scrollLeft, scrollWidth, clientWidth];
+    return [
+        scrollLeft,
+        scrollWidth,
+        clientWidth,
+    ];
 };
@@ -54,10 +60,11 @@ var elementCouldBeScrolled = function (axis, node) {
 };
-var getDirectionFactor = function (axis, direction) { return (
-/**
- * If the element's direction is rtl (right-to-left), then scrollLeft is 0 when the scrollbar is at its rightmost position,
- * and then increasingly negative as you scroll towards the end of the content.
- * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollLeft
- */
-axis === 'h' && direction === 'rtl' ? -1 : 1); };
-exports.handleScroll = function (axis, endTarget, event, sourceDelta, noOverscroll) {
+var getDirectionFactor = function (axis, direction) {
+    /**
+     * If the element's direction is rtl (right-to-left), then scrollLeft is 0 when the scrollbar is at its rightmost position,
+     * and then increasingly negative as you scroll towards the end of the content.
+     * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollLeft
+     */
+    return axis === 'h' && direction === 'rtl' ? -1 : 1;
+};
+var handleScroll = function (axis, endTarget, event, sourceDelta, noOverscroll) {
     var directionFactor = getDirectionFactor(axis, window.getComputedStyle(endTarget).direction);
@@ -87,10 +94,7 @@ var delta = directionFactor * sourceDelta;
         (targetInLock && (endTarget.contains(target) || endTarget === target)));
-    if (isDeltaPositive &&
-        ((noOverscroll && availableScroll === 0) ||
-            (!noOverscroll && delta > availableScroll))) {
+    if (isDeltaPositive && ((noOverscroll && availableScroll === 0) || (!noOverscroll && delta > availableScroll))) {
         shouldCancelScroll = true;
     }
     else if (!isDeltaPositive &&
-        ((noOverscroll && availableScrollTop === 0) ||
-            (!noOverscroll && -delta > availableScrollTop))) {
+        ((noOverscroll && availableScrollTop === 0) || (!noOverscroll && -delta > availableScrollTop))) {
         shouldCancelScroll = true;
@@ -100,1 +104,2 @@ }
 };
+exports.handleScroll = handleScroll;

dist/es5/index.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-var Combination_1 = require("./Combination");
+exports.RemoveScroll = void 0;
+var tslib_1 = require("tslib");
+var Combination_1 = tslib_1.__importDefault(require("./Combination"));
 exports.RemoveScroll = Combination_1.default;

dist/es5/medium.d.ts

@@ -1,2 +0,2 @@
-/// <reference types="react" />
-export declare const effectCar: Readonly<import("use-sidecar/dist/es5/types").SideMedium<import("react").ComponentType<{}>>>;
+import { IRemoveScrollEffectProps } from './types';
+export declare const effectCar: Readonly<import("use-sidecar/dist/es5/types").SideCarMedium<IRemoveScrollEffectProps>>;

dist/es5/medium.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.effectCar = void 0;
 var use_sidecar_1 = require("use-sidecar");
-exports.effectCar = use_sidecar_1.createSidecarMedium();
+exports.effectCar = (0, use_sidecar_1.createSidecarMedium)();

dist/es5/pinchAndZoom.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-var ds = function (ab) {
-    return (ab[0] <= 0 && ab[1] >= 0) || (ab[0] >= 0 && ab[1] <= 0);
-};
+exports.pinchOrZoom = void 0;
+var ds = function (ab) { return (ab[0] <= 0 && ab[1] >= 0) || (ab[0] >= 0 && ab[1] <= 0); };
 var sign = function (x) { return (x < 0 ? -1 : 1); };
-exports.pinchOrZoom = function (event, cache) {
+var pinchOrZoom = function (event, cache) {
     if (!event.changedTouches) {
@@ -12,21 +11,12 @@ return false;
     if (event.touches.length === 2) {
-        var oldPoints = [
-            cache[event.touches[0].identifier],
-            cache[event.touches[1].identifier]
-        ];
+        var oldPoints = [cache[event.touches[0].identifier], cache[event.touches[1].identifier]];
         var newPoints = [event.touches[0], event.touches[1]];
         if (oldPoints[0] && oldPoints[1]) {
             // Calculate the difference between the start and move coordinates
-            var diffx = [
-                oldPoints[0].clientX - newPoints[0].clientX,
-                oldPoints[1].clientX - newPoints[1].clientX
-            ];
-            var diffy = [
-                oldPoints[0].clientY - newPoints[0].clientY,
-                oldPoints[1].clientY - newPoints[1].clientY
-            ];
+            var diffx = [oldPoints[0].clientX - newPoints[0].clientX, oldPoints[1].clientX - newPoints[1].clientX];
+            var diffy = [oldPoints[0].clientY - newPoints[0].clientY, oldPoints[1].clientY - newPoints[1].clientY];
             console.log(diffx, diffy);
             if (ds(diffx) || ds(diffy)) {
                 return {
-                    action: 'zoom'
+                    action: 'zoom',
                 };
@@ -38,3 +28,3 @@ }
                 action: 'pinch',
-                coords: [mx * sign(diffx[0]), my * sign(diffx[1])]
+                coords: [mx * sign(diffx[0]), my * sign(diffx[1])],
             };
@@ -46,4 +36,5 @@ }
         action: 'move',
-        coords: [event.changedTouches[0].clientX, event.changedTouches[0].clientY]
+        coords: [event.changedTouches[0].clientX, event.changedTouches[0].clientY],
     };
 };
+exports.pinchOrZoom = pinchOrZoom;

dist/es5/sidecar.d.ts

@@ -1,3 +0,2 @@
-/// <reference types="react" />
-declare const _default: import("react").FunctionComponent<import("./types").IRemoveScrollEffectProps & import("use-sidecar/dist/es5/types").SideCarHOC>;
+declare const _default: import("use-sidecar").SideCarComponent<import("./types").IRemoveScrollEffectProps>;
 export default _default;

dist/es5/sidecar.js

@@ -6,2 +6,2 @@ "use strict";
 var medium_1 = require("./medium");
-exports.default = use_sidecar_1.exportSidecar(medium_1.effectCar, SideEffect_1.RemoveScrollSideCar);
+exports.default = (0, use_sidecar_1.exportSidecar)(medium_1.effectCar, SideEffect_1.RemoveScrollSideCar);

dist/es5/SideEffect.d.ts

@@ -1,5 +0,5 @@
-import * as React from 'react';
+import { TouchEvent } from 'react';
 import { IRemoveScrollEffectProps } from './types';
-export declare const getTouchXY: (event: WheelEvent | React.TouchEvent<Element>) => number[];
+export declare const getTouchXY: (event: TouchEvent | WheelEvent) => number[];
 export declare const getDeltaXY: (event: WheelEvent) => number[];
 export declare function RemoveScrollSideCar(props: IRemoveScrollEffectProps): JSX.Element;

dist/es5/SideEffect.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-var React = require("react");
+exports.RemoveScrollSideCar = exports.getDeltaXY = exports.getTouchXY = void 0;
+var tslib_1 = require("tslib");
+var React = tslib_1.__importStar(require("react"));
 var react_remove_scroll_bar_1 = require("react-remove-scroll-bar");
 var react_style_singleton_1 = require("react-style-singleton");
+var aggresiveCapture_1 = require("./aggresiveCapture");
 var handleScroll_1 = require("./handleScroll");
-var aggresiveCapture_1 = require("./aggresiveCapture");
-exports.getTouchXY = function (event) {
-    return 'changedTouches' in event
-        ? [event.changedTouches[0].clientX, event.changedTouches[0].clientY]
-        : [0, 0];
+var getTouchXY = function (event) {
+    return 'changedTouches' in event ? [event.changedTouches[0].clientX, event.changedTouches[0].clientY] : [0, 0];
 };
-exports.getDeltaXY = function (event) { return [event.deltaX, event.deltaY]; };
+exports.getTouchXY = getTouchXY;
+var getDeltaXY = function (event) { return [event.deltaX, event.deltaY]; };
+exports.getDeltaXY = getDeltaXY;
 var extractRef = function (ref) {
     return ref && 'current' in ref ? ref.current : ref;
 };
-var deltaCompare = function (x, y) {
-    return x[0] === y[0] && x[1] === y[1];
-};
-var generateStyle = function (id) { return "\n  .block-interactivity-" + id + " {pointer-events: none;}\n  .allow-interactivity-" + id + " {pointer-events: all;}\n"; };
+var deltaCompare = function (x, y) { return x[0] === y[0] && x[1] === y[1]; };
+var generateStyle = function (id) { return "\n  .block-interactivity-".concat(id, " {pointer-events: none;}\n  .allow-interactivity-").concat(id, " {pointer-events: all;}\n"); };
 var idCounter = 0;
@@ -28,3 +28,3 @@ var lockStack = [];
     var id = React.useState(idCounter++)[0];
-    var Style = React.useState(function () { return react_style_singleton_1.styleSingleton(); })[0];
+    var Style = React.useState(function () { return (0, react_style_singleton_1.styleSingleton)(); })[0];
     var lastProps = React.useRef(props);
@@ -36,12 +36,8 @@ React.useEffect(function () {
         if (props.inert) {
-            document.body.classList.add("block-interactivity-" + id);
-            var allow_1 = [
-                props.lockRef.current
-            ].concat((props.shards || []).map(extractRef)).filter(Boolean);
-            allow_1.forEach(function (el) { return el.classList.add("allow-interactivity-" + id); });
+            document.body.classList.add("block-interactivity-".concat(id));
+            var allow_1 = tslib_1.__spreadArray([props.lockRef.current], (props.shards || []).map(extractRef), true).filter(Boolean);
+            allow_1.forEach(function (el) { return el.classList.add("allow-interactivity-".concat(id)); });
             return function () {
-                document.body.classList.remove("block-interactivity-" + id);
-                allow_1.forEach(function (el) {
-                    return el.classList.remove("allow-interactivity-" + id);
-                });
+                document.body.classList.remove("block-interactivity-".concat(id));
+                allow_1.forEach(function (el) { return el.classList.remove("allow-interactivity-".concat(id)); });
             };
@@ -55,3 +51,3 @@ }
         }
-        var touch = exports.getTouchXY(event);
+        var touch = (0, exports.getTouchXY)(event);
         var touchStart = touchStartRef.current;
@@ -63,3 +59,7 @@ var deltaX = 'deltaX' in event ? event.deltaX : touchStart[0] - touch[0];
         var moveDirection = Math.abs(deltaX) > Math.abs(deltaY) ? 'h' : 'v';
-        var canBeScrolledInMainDirection = handleScroll_1.locationCouldBeScrolled(moveDirection, target);
+        // allow horizontal touch move on Range inputs. They will not cause any scroll
+        if ('touches' in event && moveDirection === 'h' && target.type === 'range') {
+            return false;
+        }
+        var canBeScrolledInMainDirection = (0, handleScroll_1.locationCouldBeScrolled)(moveDirection, target);
         if (!canBeScrolledInMainDirection) {
@@ -73,3 +73,3 @@ return true;
             currentAxis = moveDirection === 'v' ? 'h' : 'v';
-            canBeScrolledInMainDirection = handleScroll_1.locationCouldBeScrolled(moveDirection, target);
+            canBeScrolledInMainDirection = (0, handleScroll_1.locationCouldBeScrolled)(moveDirection, target);
             // other axis might be not scrollable
@@ -80,5 +80,3 @@ }
         }
-        if (!activeAxis.current &&
-            'changedTouches' in event &&
-            (deltaX || deltaY)) {
+        if (!activeAxis.current && 'changedTouches' in event && (deltaX || deltaY)) {
             activeAxis.current = currentAxis;
@@ -90,3 +88,3 @@ }
         var cancelingAxis = activeAxis.current || currentAxis;
-        return handleScroll_1.handleScroll(cancelingAxis, parent, event, cancelingAxis === 'h' ? deltaX : deltaY, true);
+        return (0, handleScroll_1.handleScroll)(cancelingAxis, parent, event, cancelingAxis === 'h' ? deltaX : deltaY, true);
     }, []);
@@ -99,8 +97,4 @@ var shouldPrevent = React.useCallback(function (_event) {
         }
-        var delta = 'deltaY' in event ? exports.getDeltaXY(event) : exports.getTouchXY(event);
-        var sourceEvent = shouldPreventQueue.current.filter(function (e) {
-            return e.name === event.type &&
-                e.target === event.target &&
-                deltaCompare(e.delta, delta);
-        })[0];
+        var delta = 'deltaY' in event ? (0, exports.getDeltaXY)(event) : (0, exports.getTouchXY)(event);
+        var sourceEvent = shouldPreventQueue.current.filter(function (e) { return e.name === event.type && e.target === event.target && deltaCompare(e.delta, delta); })[0];
         // self event, and should be canceled
@@ -117,5 +111,3 @@ if (sourceEvent && sourceEvent.should) {
                 .filter(function (node) { return node.contains(event.target); });
-            var shouldStop = shardNodes.length > 0
-                ? shouldCancelEvent(event, shardNodes[0])
-                : !lastProps.current.noIsolation;
+            var shouldStop = shardNodes.length > 0 ? shouldCancelEvent(event, shardNodes[0]) : !lastProps.current.noIsolation;
             if (shouldStop) {
@@ -134,10 +126,10 @@ event.preventDefault();
     var scrollTouchStart = React.useCallback(function (event) {
-        touchStartRef.current = exports.getTouchXY(event);
+        touchStartRef.current = (0, exports.getTouchXY)(event);
         activeAxis.current = undefined;
     }, []);
     var scrollWheel = React.useCallback(function (event) {
-        shouldCancel(event.type, exports.getDeltaXY(event), event.target, shouldCancelEvent(event, props.lockRef.current));
+        shouldCancel(event.type, (0, exports.getDeltaXY)(event), event.target, shouldCancelEvent(event, props.lockRef.current));
     }, []);
     var scrollTouchMove = React.useCallback(function (event) {
-        shouldCancel(event.type, exports.getTouchXY(event), event.target, shouldCancelEvent(event, props.lockRef.current));
+        shouldCancel(event.type, (0, exports.getTouchXY)(event), event.target, shouldCancelEvent(event, props.lockRef.current));
     }, []);
@@ -149,3 +141,3 @@ React.useEffect(function () {
             onWheelCapture: scrollWheel,
-            onTouchMoveCapture: scrollTouchMove
+            onTouchMoveCapture: scrollTouchMove,
         });
@@ -152,0 +144,0 @@ document.addEventListener('wheel', shouldPrevent, aggresiveCapture_1.nonPassive);

dist/es5/UI.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.RemoveScroll = void 0;
 var tslib_1 = require("tslib");
-var React = require("react");
+var React = tslib_1.__importStar(require("react"));
 var constants_1 = require("react-remove-scroll-bar/constants");
+var use_callback_ref_1 = require("use-callback-ref");
 var medium_1 = require("./medium");
-var use_callback_ref_1 = require("use-callback-ref");
 var nothing = function () {
@@ -19,14 +20,11 @@ return;
         onWheelCapture: nothing,
-        onTouchMoveCapture: nothing
+        onTouchMoveCapture: nothing,
     }), callbacks = _a[0], setCallbacks = _a[1];
     var forwardProps = props.forwardProps, children = props.children, className = props.className, removeScrollBar = props.removeScrollBar, enabled = props.enabled, shards = props.shards, sideCar = props.sideCar, noIsolation = props.noIsolation, inert = props.inert, allowPinchZoom = props.allowPinchZoom, _b = props.as, Container = _b === void 0 ? 'div' : _b, rest = tslib_1.__rest(props, ["forwardProps", "children", "className", "removeScrollBar", "enabled", "shards", "sideCar", "noIsolation", "inert", "allowPinchZoom", "as"]);
     var SideCar = sideCar;
-    var containerRef = use_callback_ref_1.useMergeRefs([
-        ref,
-        parentRef
-    ]);
-    var containerProps = tslib_1.__assign({}, rest, callbacks);
+    var containerRef = (0, use_callback_ref_1.useMergeRefs)([ref, parentRef]);
+    var containerProps = tslib_1.__assign(tslib_1.__assign({}, rest), callbacks);
     return (React.createElement(React.Fragment, null,
         enabled && (React.createElement(SideCar, { sideCar: medium_1.effectCar, removeScrollBar: removeScrollBar, shards: shards, noIsolation: noIsolation, inert: inert, setCallbacks: setCallbacks, allowPinchZoom: !!allowPinchZoom, lockRef: ref })),
-        forwardProps ? (React.cloneElement(React.Children.only(children), tslib_1.__assign({}, containerProps, { ref: containerRef }))) : (React.createElement(Container, tslib_1.__assign({}, containerProps, { className: className, ref: containerRef }), children))));
+        forwardProps ? (React.cloneElement(React.Children.only(children), tslib_1.__assign(tslib_1.__assign({}, containerProps), { ref: containerRef }))) : (React.createElement(Container, tslib_1.__assign({}, containerProps, { className: className, ref: containerRef }), children))));
 });
@@ -37,7 +35,7 @@ exports.RemoveScroll = RemoveScroll;
     removeScrollBar: true,
-    inert: false
+    inert: false,
 };
 RemoveScroll.classNames = {
     fullWidth: constants_1.fullWidthClassName,
-    zeroRight: constants_1.zeroRightClassName
+    zeroRight: constants_1.zeroRightClassName,
 };

package.json

 {
   "name": "react-remove-scroll",
-  "version": "2.4.4",
+  "version": "2.5.0",
   "description": "Disables scroll outside of `children` node.",
   "main": "dist/es5/index.js",
+  "jsnext:main": "dist/es2015/index.js",
+  "module": "dist/es2015/index.js",
+  "types": "dist/es5/index.d.ts",
+  "module:es2019": "dist/es2019/index.js",
   "scripts": {
-    "test": "ts-react-toolbox test",
-    "bootstrap": "ts-react-toolbox init",
-    "dev": "ts-react-toolbox dev",
-    "test:ci": "ts-react-toolbox test --runInBand --coverage",
-    "build": "rm -Rf ./dist && ts-react-toolbox build",
-    "prepublish": "yarn build",
-    "release": "ts-react-toolbox release",
-    "lint": "ts-react-toolbox lint",
-    "static": "ts-react-toolbox publish",
-    "format": "ts-react-toolbox format",
-    "analyze": "ts-react-toolbox analyze",
-    "storybook": "start-storybook -p 6006",
-    "build-storybook": "build-storybook",
-    "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s -r 0"
+    "dev": "lib-builder dev",
+    "test": "jest",
+    "test:ci": "jest --runInBand --coverage",
+    "build": "lib-builder build && yarn size:report",
+    "release": "yarn build && yarn test",
+    "size": "npx size-limit",
+    "size:report": "npx size-limit --json > .size.json",
+    "lint": "lib-builder lint",
+    "format": "lib-builder format",
+    "update": "lib-builder update",
+    "prepublish": "yarn build && yarn changelog",
+    "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s",
+    "changelog:rewrite": "conventional-changelog -p angular -i CHANGELOG.md -s -r 0",
+    "storybook": "start-storybook -p 6006"
   },
@@ -28,21 +32,17 @@ "keywords": [
   "devDependencies": {
-    "@babel/core": "^7.4.5",
-    "@storybook/addon-actions": "^5.1.8",
-    "@storybook/addon-links": "^5.1.8",
-    "@storybook/addons": "^5.1.8",
-    "@storybook/react": "^5.1.8",
-    "@types/enzyme": "^3.9.3",
-    "@types/enzyme-adapter-react-16": "^1.0.5",
-    "@types/react": "^16.8.20",
-    "babel-loader": "^8.0.6",
-    "conventional-changelog-cli": "^2.0.25",
-    "enzyme": "^3.10.0",
-    "enzyme-adapter-react-16": "^1.14.0",
-    "jsx-compress-loader": "^1.1.1",
-    "react": "^16.8.6",
-    "react-dom": "^16.8.6",
-    "ts-react-toolbox": "^0.2.10"
+    "@babel/core": "^7.17.9",
+    "@size-limit/preset-small-lib": "^2.1.6",
+    "@storybook/react": "^6.4.22",
+    "@theuiteam/lib-builder": "^0.1.4",
+    "@types/enzyme-adapter-react-16": "^1.0.6",
+    "@types/react": "^18.0.0",
+    "babel-loader": "^8.2.4",
+    "enzyme-adapter-react-16": "^1.15.6"
   },
+  "resolutions": {
+    "@types/react": "^18.0.0",
+    "tslib": "^2.0.0"
+  },
   "engines": {
-    "node": ">=8.5.0"
+    "node": ">=10"
   },
@@ -58,17 +58,12 @@ "peerDependencies": {
   },
-  "jsnext:main": "dist/es2015/index.js",
-  "module": "dist/es2015/index.js",
-  "types": "dist/es5/index.d.ts",
   "files": [
-    "dist",
-    "UI",
-    "sidecar"
+    "dist"
   ],
   "repository": "https://github.com/theKashey/react-remove-scroll",
   "dependencies": {
-    "react-remove-scroll-bar": "^2.1.0",
-    "react-style-singleton": "^2.1.0",
-    "tslib": "^1.0.0",
-    "use-callback-ref": "^1.2.3",
-    "use-sidecar": "^1.0.1"
+    "react-remove-scroll-bar": "^2.3.0",
+    "react-style-singleton": "^2.2.0",
+    "tslib": "^2.0.0",
+    "use-callback-ref": "^1.3.0",
+    "use-sidecar": "^1.1.2"
   },
@@ -78,5 +73,25 @@ "sideEffects": [
   ],
-  "resolutions": {
-    "typescript": "^3.0.0"
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  },
+  "lint-staged": {
+    "*.{ts,tsx}": [
+      "prettier --write",
+      "eslint --fix",
+      "git add"
+    ],
+    "*.{js,css,json,md}": [
+      "prettier --write",
+      "git add"
+    ]
+  },
+  "prettier": {
+    "printWidth": 120,
+    "trailingComma": "es5",
+    "tabWidth": 2,
+    "semi": true,
+    "singleQuote": true
   }
 }

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

Deprecated

Maintenance

The maintainer of the package marked it as deprecated. This could indicate that a single version should not be used, or that the package is no longer maintained and any new vulnerabilities will not be fixed.

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

74219

increased by46.69%

Dev dependency count

8

decreased by-50%

Number of package files

64

increased by39.13%

Lines of code

1504

increased by51.31%

Worsened metrics

Number of medium maintenance alerts

1

increased byInfinity%

Dependency changes

• - Removedtslib@1.14.1(transitive)

• Updatedreact-remove-scroll-bar@^2.3.0

• Updatedreact-style-singleton@^2.2.0

• Updatedtslib@^2.0.0

• Updateduse-callback-ref@^1.3.0

• Updateduse-sidecar@^1.1.2