react-remove-scroll - npm Package Compare versions

Comparing version 2.0.4 to 2.1.0

dist/es2015/aggresiveCapture.js

@@ -8,3 +8,3 @@ var passiveSupported = false;
                 return true;
-            },
+            }
         });
@@ -11,0 +11,0 @@ window.addEventListener('test', options, options);

dist/es2015/Combination.d.ts

@@ -1,9 +0,3 @@
-import { IRemoveScrollProps } from './types';
-declare function ReactRemoveScroll(props: IRemoveScrollProps): JSX.Element;
-declare namespace ReactRemoveScroll {
-    let classNames: {
-        fullWidth: string;
-        zeroRight: string;
-    };
-}
+import { RemoveScrollType } from './types';
+declare const ReactRemoveScroll: RemoveScrollType;
 export default ReactRemoveScroll;

dist/es2015/Combination.js

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

dist/es2015/handleScroll.d.ts

 import { Axis } from './types';
 export declare const locationCouldBeScrolled: (axis: Axis, node: HTMLElement) => boolean;
-export declare const handleScroll: (axis: Axis, endTarget: HTMLElement, event: any, sourceDelta: number) => boolean;
+export declare const handleScroll: (axis: Axis, endTarget: HTMLElement, event: any, sourceDelta: number, noOverscroll: boolean) => boolean;

dist/es2015/handleScroll.js

 var elementCouldBeVScrolled = function (node) {
     var styles = window.getComputedStyle(node);
-    return (styles.overflowY !== 'hidden' &&
-        !(styles.overflowY === styles.overflowX && styles.overflowY === 'visible'));
+    return (styles.overflowY !== 'hidden' && // not-not-scrollable
+        !(styles.overflowY === styles.overflowX && styles.overflowY === 'visible') // scrollable
+    );
 };
 var elementCouldBeHScrolled = function (node) {
     var styles = window.getComputedStyle(node);
-    return (styles.overflowX !== 'hidden' &&
-        !(styles.overflowY === styles.overflowX && styles.overflowX === 'visible'));
+    return (styles.overflowX !== 'hidden' && // not-not-scrollable
+        !(styles.overflowY === styles.overflowX && styles.overflowX === 'visible') // scrollable
+    );
 };
@@ -33,6 +35,11 @@ export var locationCouldBeScrolled = function (axis, node) {
 };
-var elementCouldBeScrolled = function (axis, node) { return (axis === 'v' ? elementCouldBeVScrolled(node) : elementCouldBeHScrolled(node)); };
-var getScrollVariables = function (axis, node) { return (axis === 'v' ? getVScrollVariables(node) : getHScrollVariables(node)); };
-export var handleScroll = function (axis, endTarget, event, sourceDelta) {
+var elementCouldBeScrolled = function (axis, node) {
+    return axis === 'v' ? elementCouldBeVScrolled(node) : elementCouldBeHScrolled(node);
+};
+var getScrollVariables = function (axis, node) {
+    return axis === 'v' ? getVScrollVariables(node) : getHScrollVariables(node);
+};
+export var handleScroll = function (axis, endTarget, event, sourceDelta, noOverscroll) {
     var delta = sourceDelta;
+    // find scrollable target
     var target = event.target;
@@ -46,3 +53,3 @@ var targetInLock = endTarget.contains(target);
         var _a = getScrollVariables(axis, target), position = _a[0], scroll_1 = _a[1], capacity = _a[2];
-        var elementScroll = (scroll_1 - capacity) - position;
+        var elementScroll = scroll_1 - capacity - position;
         if (position || elementScroll) {
@@ -55,8 +62,17 @@ if (elementCouldBeScrolled(axis, target)) {
         target = target.parentNode;
-    } while ((!targetInLock && target !== document.body) ||
+    } while (
+    // portaled content
+    (!targetInLock && target !== document.body) ||
+        // self content
         (targetInLock && (endTarget.contains(target) || endTarget === target)));
-    if (isDeltaPositive && delta > availableScroll) {
+    if (0) {
+    }
+    else if (isDeltaPositive &&
+        ((noOverscroll && availableScroll === 0) ||
+            (!noOverscroll && delta > availableScroll))) {
         shouldCancelScroll = true;
     }
-    else if (!isDeltaPositive && -delta > availableScrollTop) {
+    else if (!isDeltaPositive &&
+        ((noOverscroll && availableScrollTop === 0) ||
+            (!noOverscroll && -delta > availableScrollTop))) {
         shouldCancelScroll = true;
@@ -63,0 +79,0 @@ }

dist/es2015/index.d.ts

 import RemoveScroll from './Combination';
-export { RemoveScroll, };
+export { RemoveScroll };

dist/es2015/index.js

 import RemoveScroll from './Combination';
-export { RemoveScroll, };
+export { RemoveScroll };

dist/es2015/medium.d.ts

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

dist/es2015/sidecar.d.ts

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

dist/es2015/sidecar.js

@@ -1,4 +0,4 @@
-import { exportSidecar } from "use-sidecar";
-import { RemoveScrollSideCar } from "./SideEffect";
-import { effectCar } from "./medium";
+import { exportSidecar } from 'use-sidecar';
+import { RemoveScrollSideCar } from './SideEffect';
+import { effectCar } from './medium';
 export default exportSidecar(effectCar, RemoveScrollSideCar);

dist/es2015/SideEffect.d.ts

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

dist/es2015/SideEffect.js

 import * as React from 'react';
 import { RemoveScrollBar } from 'react-remove-scroll-bar';
 import { styleSingleton } from 'react-style-singleton';
-import { handleScroll, locationCouldBeScrolled } from "./handleScroll";
+import { handleScroll, locationCouldBeScrolled } from './handleScroll';
 import { nonPassive } from './aggresiveCapture';
-export var getTouchXY = function (event) { return (event.changedTouches
-    ? [event.changedTouches[0].clientX, event.changedTouches[0].clientY]
-    : [0, 0]); };
-export var getDeltaXY = function (event) { return ([event.deltaX, event.deltaY]); };
-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]); };
+export var getTouchXY = function (event) {
+    return event.changedTouches
+        ? [event.changedTouches[0].clientX, event.changedTouches[0].clientY]
+        : [0, 0];
+};
+export var getDeltaXY = function (event) { return [event.deltaX, event.deltaY]; };
+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"; };
@@ -34,3 +40,5 @@ var idCounter = 0;
                 document.body.classList.remove("block-interactivity-" + id);
-                allow_1.forEach(function (el) { return el.classList.remove("allow-interactivity-" + id); });
+                allow_1.forEach(function (el) {
+                    return el.classList.remove("allow-interactivity-" + id);
+                });
             };
@@ -43,4 +51,4 @@ }
         var touchStart = touchStartRef.current;
-        var deltaX = 'deltaX' in event ? event.deltaX : (touchStart[0] - touch[0]);
-        var deltaY = 'deltaY' in event ? event.deltaY : (touchStart[1] - touch[1]);
+        var deltaX = 'deltaX' in event ? event.deltaX : touchStart[0] - touch[0];
+        var deltaY = 'deltaY' in event ? event.deltaY : touchStart[1] - touch[1];
         var currentAxis;
@@ -59,2 +67,3 @@ var target = event.target;
             canBeScrolledInMainDirection = locationCouldBeScrolled(moveDirection, target);
+            // other axis might be not scrollable
         }
@@ -71,10 +80,16 @@ if (!canBeScrolledInMainDirection) {
         var cancelingAxis = activeAxis.current || currentAxis;
-        return handleScroll(cancelingAxis, parent, event, cancelingAxis == 'h' ? deltaX : deltaY);
+        return handleScroll(cancelingAxis, parent, event, cancelingAxis == 'h' ? deltaX : deltaY, true);
     }, []);
     var shouldPrevent = React.useCallback(function (event) {
         if (!lockStack.length || lockStack[lockStack.length - 1] !== Style) {
+            // not the last active
             return;
         }
         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
         if (sourceEvent && sourceEvent.should) {
@@ -84,2 +99,3 @@ event.preventDefault();
         }
+        // outside or shard event
         if (!sourceEvent) {
@@ -120,3 +136,3 @@ var shardNodes = (lastProps.current.shards || [])
             onWheelCapture: scrollWheel,
-            onTouchMoveCapture: scrollTouchMove,
+            onTouchMoveCapture: scrollTouchMove
         });
@@ -135,8 +151,4 @@ document.addEventListener('wheel', shouldPrevent, nonPassive);
     return (React.createElement(React.Fragment, null,
-        inert
-            ? React.createElement(Style, { styles: generateStyle(id) })
-            : null,
-        removeScrollBar
-            ? React.createElement(RemoveScrollBar, { gapMode: "margin" })
-            : null));
+        inert ? React.createElement(Style, { styles: generateStyle(id) }) : null,
+        removeScrollBar ? React.createElement(RemoveScrollBar, { gapMode: "margin" }) : null));
 }

dist/es2015/types.d.ts

@@ -1,3 +0,5 @@
-import * as React from "react";
-import { RefObject } from "react";
+import * as React from 'react';
+import { RefObject } from 'react';
+import { ForwardRefExoticComponent } from 'react';
+import { RefAttributes } from 'react';
 export declare type Axis = 'v' | 'h';
@@ -37,1 +39,11 @@ export interface RemoveScrollEffectCallbacks {
 }
+interface WithClassNames {
+    classNames: {
+        fullWidth: string;
+        zeroRight: string;
+    };
+}
+declare type RefForwarded<T> = ForwardRefExoticComponent<T & RefAttributes<HTMLElement>> & WithClassNames;
+export declare type RemoveScrollType = RefForwarded<IRemoveScrollProps>;
+export declare type RemoveScrollUIType = RefForwarded<IRemoveScrollUIProps>;
+export {};

dist/es2015/UI.d.ts

@@ -1,16 +0,3 @@
-import { IRemoveScrollUIProps } from "./types";
-declare function RemoveScroll(props: IRemoveScrollUIProps): JSX.Element;
-declare namespace RemoveScroll {
-    var defaultProps: {
-        enabled: boolean;
-        removeScrollBar: boolean;
-        inert: boolean;
-    };
-}
-declare namespace RemoveScroll {
-    let classNames: {
-        fullWidth: string;
-        zeroRight: string;
-    };
-}
-export { RemoveScroll, };
+import { RemoveScrollUIType } from './types';
+declare const RemoveScroll: RemoveScrollUIType;
+export { RemoveScroll };

dist/es2015/UI.js

 import * as tslib_1 from "tslib";
 import * as React from 'react';
 import { fullWidthClassName, zeroRightClassName } from 'react-remove-scroll-bar/constants';
-import { effectCar } from "./medium";
+import { effectCar } from './medium';
+import { useMergeRefs } from 'use-callback-ref';
 var nothing = function () {
     return;
 };
-function RemoveScroll(props) {
+var RemoveScroll = React.forwardRef(function (props, parentRef) {
     var ref = React.useRef(null);
@@ -13,24 +14,23 @@ var _a = React.useState({
         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;
     var SideCar = sideCar;
-    var containerProps = tslib_1.__assign({ ref: ref }, callbacks);
+    var containerProps = tslib_1.__assign({ ref: useMergeRefs([
+            ref,
+            parentRef
+        ]) }, callbacks);
     return (React.createElement(React.Fragment, null,
         enabled && (React.createElement(SideCar, { sideCar: effectCar, removeScrollBar: removeScrollBar, shards: shards, noIsolation: noIsolation, inert: inert, setCallbacks: setCallbacks, lockRef: ref })),
-        forwardProps
-            ? React.cloneElement(React.Children.only(children), containerProps)
-            : React.createElement("div", tslib_1.__assign({}, containerProps, { className: className }), children)));
-}
+        forwardProps ? (React.cloneElement(React.Children.only(children), containerProps)) : (React.createElement("div", tslib_1.__assign({}, containerProps, { className: className }), children))));
+});
 RemoveScroll.defaultProps = {
     enabled: true,
     removeScrollBar: true,
-    inert: false,
+    inert: false
 };
-(function (RemoveScroll) {
-    RemoveScroll.classNames = {
-        fullWidth: fullWidthClassName,
-        zeroRight: zeroRightClassName,
-    };
-})(RemoveScroll || (RemoveScroll = {}));
-export { RemoveScroll, };
+RemoveScroll.classNames = {
+    fullWidth: fullWidthClassName,
+    zeroRight: zeroRightClassName
+};
+export { RemoveScroll };

dist/es5/aggresiveCapture.js

@@ -10,3 +10,3 @@ "use strict";
                 return true;
-            },
+            }
         });
@@ -13,0 +13,0 @@ window.addEventListener('test', options, options);

dist/es5/Combination.d.ts

@@ -1,9 +0,3 @@
-import { IRemoveScrollProps } from './types';
-declare function ReactRemoveScroll(props: IRemoveScrollProps): JSX.Element;
-declare namespace ReactRemoveScroll {
-    let classNames: {
-        fullWidth: string;
-        zeroRight: string;
-    };
-}
+import { RemoveScrollType } from './types';
+declare const ReactRemoveScroll: RemoveScrollType;
 export default ReactRemoveScroll;

dist/es5/Combination.js

@@ -7,8 +7,4 @@ "use strict";
 var sidecar_1 = require("./sidecar");
-function ReactRemoveScroll(props) {
-    return (React.createElement(UI_1.RemoveScroll, tslib_1.__assign({}, props, { sideCar: sidecar_1.default })));
-}
-(function (ReactRemoveScroll) {
-    ReactRemoveScroll.classNames = UI_1.RemoveScroll.classNames;
-})(ReactRemoveScroll || (ReactRemoveScroll = {}));
+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.d.ts

 import { Axis } from './types';
 export declare const locationCouldBeScrolled: (axis: Axis, node: HTMLElement) => boolean;
-export declare const handleScroll: (axis: Axis, endTarget: HTMLElement, event: any, sourceDelta: number) => boolean;
+export declare const handleScroll: (axis: Axis, endTarget: HTMLElement, event: any, sourceDelta: number, noOverscroll: boolean) => boolean;

dist/es5/handleScroll.js

@@ -5,9 +5,11 @@ "use strict";
     var styles = window.getComputedStyle(node);
-    return (styles.overflowY !== 'hidden' &&
-        !(styles.overflowY === styles.overflowX && styles.overflowY === 'visible'));
+    return (styles.overflowY !== 'hidden' && // not-not-scrollable
+        !(styles.overflowY === styles.overflowX && styles.overflowY === 'visible') // scrollable
+    );
 };
 var elementCouldBeHScrolled = function (node) {
     var styles = window.getComputedStyle(node);
-    return (styles.overflowX !== 'hidden' &&
-        !(styles.overflowY === styles.overflowX && styles.overflowX === 'visible'));
+    return (styles.overflowX !== 'hidden' && // not-not-scrollable
+        !(styles.overflowY === styles.overflowX && styles.overflowX === 'visible') // scrollable
+    );
 };
@@ -36,6 +38,11 @@ exports.locationCouldBeScrolled = function (axis, node) {
 };
-var elementCouldBeScrolled = function (axis, node) { return (axis === 'v' ? elementCouldBeVScrolled(node) : elementCouldBeHScrolled(node)); };
-var getScrollVariables = function (axis, node) { return (axis === 'v' ? getVScrollVariables(node) : getHScrollVariables(node)); };
-exports.handleScroll = function (axis, endTarget, event, sourceDelta) {
+var elementCouldBeScrolled = function (axis, node) {
+    return axis === 'v' ? elementCouldBeVScrolled(node) : elementCouldBeHScrolled(node);
+};
+var getScrollVariables = function (axis, node) {
+    return axis === 'v' ? getVScrollVariables(node) : getHScrollVariables(node);
+};
+exports.handleScroll = function (axis, endTarget, event, sourceDelta, noOverscroll) {
     var delta = sourceDelta;
+    // find scrollable target
     var target = event.target;
@@ -49,3 +56,3 @@ var targetInLock = endTarget.contains(target);
         var _a = getScrollVariables(axis, target), position = _a[0], scroll_1 = _a[1], capacity = _a[2];
-        var elementScroll = (scroll_1 - capacity) - position;
+        var elementScroll = scroll_1 - capacity - position;
         if (position || elementScroll) {
@@ -58,8 +65,17 @@ if (elementCouldBeScrolled(axis, target)) {
         target = target.parentNode;
-    } while ((!targetInLock && target !== document.body) ||
+    } while (
+    // portaled content
+    (!targetInLock && target !== document.body) ||
+        // self content
         (targetInLock && (endTarget.contains(target) || endTarget === target)));
-    if (isDeltaPositive && delta > availableScroll) {
+    if (0) {
+    }
+    else if (isDeltaPositive &&
+        ((noOverscroll && availableScroll === 0) ||
+            (!noOverscroll && delta > availableScroll))) {
         shouldCancelScroll = true;
     }
-    else if (!isDeltaPositive && -delta > availableScrollTop) {
+    else if (!isDeltaPositive &&
+        ((noOverscroll && availableScrollTop === 0) ||
+            (!noOverscroll && -delta > availableScrollTop))) {
         shouldCancelScroll = true;
@@ -66,0 +82,0 @@ }

dist/es5/index.d.ts

 import RemoveScroll from './Combination';
-export { RemoveScroll, };
+export { RemoveScroll };

dist/es5/medium.d.ts

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

dist/es5/sidecar.d.ts

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

dist/es5/SideEffect.d.ts

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

dist/es5/SideEffect.js

@@ -8,8 +8,14 @@ "use strict";
 var aggresiveCapture_1 = require("./aggresiveCapture");
-exports.getTouchXY = function (event) { return (event.changedTouches
-    ? [event.changedTouches[0].clientX, event.changedTouches[0].clientY]
-    : [0, 0]); };
-exports.getDeltaXY = function (event) { return ([event.deltaX, event.deltaY]); };
-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]); };
+exports.getTouchXY = function (event) {
+    return event.changedTouches
+        ? [event.changedTouches[0].clientX, event.changedTouches[0].clientY]
+        : [0, 0];
+};
+exports.getDeltaXY = function (event) { return [event.deltaX, event.deltaY]; };
+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"; };
@@ -37,3 +43,5 @@ var idCounter = 0;
                 document.body.classList.remove("block-interactivity-" + id);
-                allow_1.forEach(function (el) { return el.classList.remove("allow-interactivity-" + id); });
+                allow_1.forEach(function (el) {
+                    return el.classList.remove("allow-interactivity-" + id);
+                });
             };
@@ -46,4 +54,4 @@ }
         var touchStart = touchStartRef.current;
-        var deltaX = 'deltaX' in event ? event.deltaX : (touchStart[0] - touch[0]);
-        var deltaY = 'deltaY' in event ? event.deltaY : (touchStart[1] - touch[1]);
+        var deltaX = 'deltaX' in event ? event.deltaX : touchStart[0] - touch[0];
+        var deltaY = 'deltaY' in event ? event.deltaY : touchStart[1] - touch[1];
         var currentAxis;
@@ -62,2 +70,3 @@ var target = event.target;
             canBeScrolledInMainDirection = handleScroll_1.locationCouldBeScrolled(moveDirection, target);
+            // other axis might be not scrollable
         }
@@ -74,10 +83,16 @@ if (!canBeScrolledInMainDirection) {
         var cancelingAxis = activeAxis.current || currentAxis;
-        return handleScroll_1.handleScroll(cancelingAxis, parent, event, cancelingAxis == 'h' ? deltaX : deltaY);
+        return handleScroll_1.handleScroll(cancelingAxis, parent, event, cancelingAxis == 'h' ? deltaX : deltaY, true);
     }, []);
     var shouldPrevent = React.useCallback(function (event) {
         if (!lockStack.length || lockStack[lockStack.length - 1] !== Style) {
+            // not the last active
             return;
         }
         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 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
         if (sourceEvent && sourceEvent.should) {
@@ -87,2 +102,3 @@ event.preventDefault();
         }
+        // outside or shard event
         if (!sourceEvent) {
@@ -123,3 +139,3 @@ var shardNodes = (lastProps.current.shards || [])
             onWheelCapture: scrollWheel,
-            onTouchMoveCapture: scrollTouchMove,
+            onTouchMoveCapture: scrollTouchMove
         });
@@ -138,9 +154,5 @@ document.addEventListener('wheel', shouldPrevent, aggresiveCapture_1.nonPassive);
     return (React.createElement(React.Fragment, null,
-        inert
-            ? React.createElement(Style, { styles: generateStyle(id) })
-            : null,
-        removeScrollBar
-            ? React.createElement(react_remove_scroll_bar_1.RemoveScrollBar, { gapMode: "margin" })
-            : null));
+        inert ? React.createElement(Style, { styles: generateStyle(id) }) : null,
+        removeScrollBar ? React.createElement(react_remove_scroll_bar_1.RemoveScrollBar, { gapMode: "margin" }) : null));
 }
 exports.RemoveScrollSideCar = RemoveScrollSideCar;

dist/es5/types.d.ts

@@ -1,3 +0,5 @@
-import * as React from "react";
-import { RefObject } from "react";
+import * as React from 'react';
+import { RefObject } from 'react';
+import { ForwardRefExoticComponent } from 'react';
+import { RefAttributes } from 'react';
 export declare type Axis = 'v' | 'h';
@@ -37,1 +39,11 @@ export interface RemoveScrollEffectCallbacks {
 }
+interface WithClassNames {
+    classNames: {
+        fullWidth: string;
+        zeroRight: string;
+    };
+}
+declare type RefForwarded<T> = ForwardRefExoticComponent<T & RefAttributes<HTMLElement>> & WithClassNames;
+export declare type RemoveScrollType = RefForwarded<IRemoveScrollProps>;
+export declare type RemoveScrollUIType = RefForwarded<IRemoveScrollUIProps>;
+export {};

dist/es5/UI.d.ts

@@ -1,16 +0,3 @@
-import { IRemoveScrollUIProps } from "./types";
-declare function RemoveScroll(props: IRemoveScrollUIProps): JSX.Element;
-declare namespace RemoveScroll {
-    var defaultProps: {
-        enabled: boolean;
-        removeScrollBar: boolean;
-        inert: boolean;
-    };
-}
-declare namespace RemoveScroll {
-    let classNames: {
-        fullWidth: string;
-        zeroRight: string;
-    };
-}
-export { RemoveScroll, };
+import { RemoveScrollUIType } from './types';
+declare const RemoveScroll: RemoveScrollUIType;
+export { RemoveScroll };

dist/es5/UI.js

@@ -7,6 +7,7 @@ "use strict";
 var medium_1 = require("./medium");
+var use_callback_ref_1 = require("use-callback-ref");
 var nothing = function () {
     return;
 };
-function RemoveScroll(props) {
+var RemoveScroll = React.forwardRef(function (props, parentRef) {
     var ref = React.useRef(null);
@@ -16,13 +17,14 @@ var _a = React.useState({
         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;
     var SideCar = sideCar;
-    var containerProps = tslib_1.__assign({ ref: ref }, callbacks);
+    var containerProps = tslib_1.__assign({ ref: use_callback_ref_1.useMergeRefs([
+            ref,
+            parentRef
+        ]) }, 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, lockRef: ref })),
-        forwardProps
-            ? React.cloneElement(React.Children.only(children), containerProps)
-            : React.createElement("div", tslib_1.__assign({}, containerProps, { className: className }), children)));
-}
+        forwardProps ? (React.cloneElement(React.Children.only(children), containerProps)) : (React.createElement("div", tslib_1.__assign({}, containerProps, { className: className }), children))));
+});
 exports.RemoveScroll = RemoveScroll;
@@ -32,10 +34,7 @@ RemoveScroll.defaultProps = {
     removeScrollBar: true,
-    inert: false,
+    inert: false
 };
-(function (RemoveScroll) {
-    RemoveScroll.classNames = {
-        fullWidth: constants_1.fullWidthClassName,
-        zeroRight: constants_1.zeroRightClassName,
-    };
-})(RemoveScroll || (RemoveScroll = {}));
-exports.RemoveScroll = RemoveScroll;
+RemoveScroll.classNames = {
+    fullWidth: constants_1.fullWidthClassName,
+    zeroRight: constants_1.zeroRightClassName
+};

package.json

 {
   "name": "react-remove-scroll",
-  "version": "2.0.4",
+  "version": "2.1.0",
   "description": "Disables scroll outside of `children` node.",
@@ -41,3 +41,3 @@ "main": "dist/es5/index.js",
     "react-dom": "^16.8.6",
-    "ts-react-toolbox": "^0.2.2"
+    "ts-react-toolbox": "^0.2.10"
   },
@@ -63,2 +63,3 @@ "engines": {
     "tslib": "^1.0.0",
+    "use-callback-ref": "^1.2.1",
     "use-sidecar": "^1.0.1"
@@ -65,0 +66,0 @@ },

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

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

40748

increased by3.54%

Lines of code

750

increased by5.19%

Worsened metrics

Dependency count

6

increased by20%

Dependency changes

• + Addeduse-callback-ref@^1.2.1

• + Addeduse-callback-ref@1.3.2(transitive)