react-remove-scroll - npm Package Compare versions

Comparing version 2.3.0 to 2.4.0

dist/es2015/handleScroll.js

@@ -65,5 +65,3 @@ var elementCouldBeVScrolled = function (node) {
         (targetInLock && (endTarget.contains(target) || endTarget === target)));
-    if (0) {
-    }
-    else if (isDeltaPositive &&
+    if (isDeltaPositive &&
         ((noOverscroll && availableScroll === 0) ||
@@ -70,0 +68,0 @@ (!noOverscroll && delta > availableScroll))) {

dist/es2015/SideEffect.js

@@ -82,3 +82,3 @@ import * as React from 'react';
         var cancelingAxis = activeAxis.current || currentAxis;
-        return handleScroll(cancelingAxis, parent, event, cancelingAxis == 'h' ? deltaX : deltaY, true);
+        return handleScroll(cancelingAxis, parent, event, cancelingAxis === 'h' ? deltaX : deltaY, true);
     }, []);
@@ -85,0 +85,0 @@ var shouldPrevent = React.useCallback(function (_event) {

dist/es2015/types.d.ts

@@ -12,2 +12,7 @@ import * as React from 'react';
 export interface ChildrenNode {
+    /**
+     * if forwardProps is false - children should be ReactNode
+     * and it would be wrapper with a div
+     * @see {@link IRemoveScrollSelfProps.as}
+     */
     forwardProps?: false;
@@ -17,2 +22,7 @@ children: React.ReactNode;
 export interface ChildrenForward {
+    /**
+     * if forwardProps is true - children should be single Element
+     * which would NOT with a div
+     * @see {@link IRemoveScrollSelfProps.as}
+     */
     forwardProps: true;
@@ -22,9 +32,38 @@ children: React.ReactElement;
 export interface IRemoveScrollSelfProps {
+    /**
+     * disables "event isolation" (suppressing of events happening outside of the Lock)
+     * @default false
+     */
     noIsolation?: boolean;
+    /**
+     * enabled complete Lock isolation using `pointer-events:none` for anything outside the Lock
+     * you probably don't need it, except you do
+     * @default false
+     * @see {IRemoveScrollSelfProps.noIsolation}
+     */
     inert?: boolean;
+    /**
+     * allows pinch-zoom, however might work not perfectly for normal scroll
+     */
     allowPinchZoom?: boolean;
+    /**
+     * switches on/off the behavior of the component
+     */
     enabled?: boolean;
+    /**
+     * Controls the body scroll bar removal
+     * @default false
+     */
+    removeScrollBar?: boolean;
     className?: string;
-    removeScrollBar?: boolean;
+    style?: React.CSSProperties;
+    /**
+     * array of refs to other Elements, which should be considered as a part of the Lock
+     */
     shards?: Array<React.RefObject<any> | HTMLElement>;
+    /**
+     * Control host node used for the lock.
+     * @default 'div'
+     */
+    as?: string | React.ElementType;
 }
@@ -31,0 +70,0 @@ export declare type IRemoveScrollProps = IRemoveScrollSelfProps & (ChildrenForward | ChildrenNode);

dist/es2015/UI.d.ts

 import { RemoveScrollUIType } from './types';
+/**
+ * Removes scrollbar from the page and contain the scroll within the Lock
+ */
 declare const RemoveScroll: RemoveScrollUIType;
 export { RemoveScroll };

dist/es2015/UI.js

@@ -9,2 +9,5 @@ import * as tslib_1 from "tslib";
 };
+/**
+ * Removes scrollbar from the page and contain the scroll within the Lock
+ */
 var RemoveScroll = React.forwardRef(function (props, parentRef) {
@@ -17,11 +20,12 @@ var ref = React.useRef(null);
     }), 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, rest = tslib_1.__rest(props, ["forwardProps", "children", "className", "removeScrollBar", "enabled", "shards", "sideCar", "noIsolation", "inert", "allowPinchZoom"]);
+    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 containerProps = tslib_1.__assign({ ref: useMergeRefs([
-            ref,
-            parentRef
-        ]) }, rest, callbacks);
+    var containerRef = useMergeRefs([
+        ref,
+        parentRef
+    ]);
+    var containerProps = tslib_1.__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), containerProps)) : (React.createElement("div", tslib_1.__assign({}, containerProps, { className: className }), children))));
+        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))));
 });
@@ -28,0 +32,0 @@ RemoveScroll.defaultProps = {

dist/es5/handleScroll.js

@@ -67,5 +67,3 @@ "use strict";
         (targetInLock && (endTarget.contains(target) || endTarget === target)));
-    if (0) {
-    }
-    else if (isDeltaPositive &&
+    if (isDeltaPositive &&
         ((noOverscroll && availableScroll === 0) ||
@@ -72,0 +70,0 @@ (!noOverscroll && delta > availableScroll))) {

dist/es5/SideEffect.js

@@ -84,3 +84,3 @@ "use strict";
         var cancelingAxis = activeAxis.current || currentAxis;
-        return handleScroll_1.handleScroll(cancelingAxis, parent, event, cancelingAxis == 'h' ? deltaX : deltaY, true);
+        return handleScroll_1.handleScroll(cancelingAxis, parent, event, cancelingAxis === 'h' ? deltaX : deltaY, true);
     }, []);
@@ -87,0 +87,0 @@ var shouldPrevent = React.useCallback(function (_event) {

dist/es5/types.d.ts

@@ -12,2 +12,7 @@ import * as React from 'react';
 export interface ChildrenNode {
+    /**
+     * if forwardProps is false - children should be ReactNode
+     * and it would be wrapper with a div
+     * @see {@link IRemoveScrollSelfProps.as}
+     */
     forwardProps?: false;
@@ -17,2 +22,7 @@ children: React.ReactNode;
 export interface ChildrenForward {
+    /**
+     * if forwardProps is true - children should be single Element
+     * which would NOT with a div
+     * @see {@link IRemoveScrollSelfProps.as}
+     */
     forwardProps: true;
@@ -22,9 +32,38 @@ children: React.ReactElement;
 export interface IRemoveScrollSelfProps {
+    /**
+     * disables "event isolation" (suppressing of events happening outside of the Lock)
+     * @default false
+     */
     noIsolation?: boolean;
+    /**
+     * enabled complete Lock isolation using `pointer-events:none` for anything outside the Lock
+     * you probably don't need it, except you do
+     * @default false
+     * @see {IRemoveScrollSelfProps.noIsolation}
+     */
     inert?: boolean;
+    /**
+     * allows pinch-zoom, however might work not perfectly for normal scroll
+     */
     allowPinchZoom?: boolean;
+    /**
+     * switches on/off the behavior of the component
+     */
     enabled?: boolean;
+    /**
+     * Controls the body scroll bar removal
+     * @default false
+     */
+    removeScrollBar?: boolean;
     className?: string;
-    removeScrollBar?: boolean;
+    style?: React.CSSProperties;
+    /**
+     * array of refs to other Elements, which should be considered as a part of the Lock
+     */
     shards?: Array<React.RefObject<any> | HTMLElement>;
+    /**
+     * Control host node used for the lock.
+     * @default 'div'
+     */
+    as?: string | React.ElementType;
 }
@@ -31,0 +70,0 @@ export declare type IRemoveScrollProps = IRemoveScrollSelfProps & (ChildrenForward | ChildrenNode);

dist/es5/UI.d.ts

 import { RemoveScrollUIType } from './types';
+/**
+ * Removes scrollbar from the page and contain the scroll within the Lock
+ */
 declare const RemoveScroll: RemoveScrollUIType;
 export { RemoveScroll };

dist/es5/UI.js

@@ -11,2 +11,5 @@ "use strict";
 };
+/**
+ * Removes scrollbar from the page and contain the scroll within the Lock
+ */
 var RemoveScroll = React.forwardRef(function (props, parentRef) {
@@ -19,11 +22,12 @@ var ref = React.useRef(null);
     }), 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, rest = tslib_1.__rest(props, ["forwardProps", "children", "className", "removeScrollBar", "enabled", "shards", "sideCar", "noIsolation", "inert", "allowPinchZoom"]);
+    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 containerProps = tslib_1.__assign({ ref: use_callback_ref_1.useMergeRefs([
-            ref,
-            parentRef
-        ]) }, rest, callbacks);
+    var containerRef = use_callback_ref_1.useMergeRefs([
+        ref,
+        parentRef
+    ]);
+    var containerProps = 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), containerProps)) : (React.createElement("div", tslib_1.__assign({}, containerProps, { className: className }), children))));
+        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))));
 });
@@ -30,0 +34,0 @@ exports.RemoveScroll = RemoveScroll;

package.json

 {
   "name": "react-remove-scroll",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "description": "Disables scroll outside of `children` node.",
@@ -5,0 +5,0 @@ "main": "dist/es5/index.js",

README.md

@@ -54,3 +54,3 @@ <div align="center">
 But if you are using _shadowbox_ of some sort - you dont need it.
-- `[inert=false]` - ☠️(be careful) disables events the rest of page completely using `pointer-events` expect the Lock(+shard). 
+- `[inert=false]` - ☠️(be careful) disables events the rest of page completely using `pointer-events` except the Lock(+shards). 
 React portals not friendly, might lead to production issues. Enable only for __rare__ cases, when you have to disable scrollbars somewhere on the page(except body, Lock and shards).  
@@ -57,0 +57,0 @@ - `[forwardProps]` - will forward all props to the `children`

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

52507

increased by5.92%

Lines of code

962

increased by10.07%

No dependency changes