react-remove-scroll - npm Package Compare versions

Comparing version 1.0.8 to 2.0.0

dist/es2015/aggresiveCapture.d.ts

@@ -1,3 +0,3 @@
-export declare const aggressive: boolean | {
+export declare const nonPassive: boolean | {
     passive: boolean;
 };

dist/es2015/aggresiveCapture.js

@@ -17,2 +17,2 @@ var passiveSupported = false;
 }
-export var aggressive = passiveSupported ? { passive: false } : false;
+export var nonPassive = passiveSupported ? { passive: false } : false;

dist/es2015/handleScroll.d.ts

@@ -1,1 +0,3 @@
-export declare const handleScroll: (endTarget: HTMLElement, event: any, sourceDelta: number) => boolean;
+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;

dist/es2015/handleScroll.js

@@ -1,2 +0,2 @@
-var elementCouldBeScrolled = function (node) {
+var elementCouldBeVScrolled = function (node) {
     var styles = window.getComputedStyle(node);
@@ -6,3 +6,32 @@ return (styles.overflowY !== 'hidden' &&
 };
-export var handleScroll = function (endTarget, event, sourceDelta) {
+var elementCouldBeHScrolled = function (node) {
+    var styles = window.getComputedStyle(node);
+    return (styles.overflowX !== 'hidden' &&
+        !(styles.overflowY === styles.overflowX && styles.overflowX === 'visible'));
+};
+export var locationCouldBeScrolled = function (axis, node) {
+    var current = node;
+    do {
+        var isScrollable = elementCouldBeScrolled(axis, current);
+        if (isScrollable) {
+            var _a = getScrollVariables(axis, current), s = _a[1], d = _a[2];
+            if (s > d) {
+                return true;
+            }
+        }
+        current = current.parentNode;
+    } while (current && current !== document.body);
+    return false;
+};
+var getVScrollVariables = function (_a) {
+    var scrollTop = _a.scrollTop, scrollHeight = _a.scrollHeight, clientHeight = _a.clientHeight;
+    return [scrollTop, scrollHeight, clientHeight];
+};
+var getHScrollVariables = function (_a) {
+    var scrollLeft = _a.scrollLeft, scrollWidth = _a.scrollWidth, clientWidth = _a.clientWidth;
+    return [scrollLeft, scrollWidth, clientWidth];
+};
+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 delta = sourceDelta;
@@ -16,8 +45,8 @@ var target = event.target;
     do {
-        var scrollTop = target.scrollTop, scrollHeight = target.scrollHeight, clientHeight = target.clientHeight;
-        var elementScroll = scrollHeight - clientHeight - scrollTop;
-        if (scrollTop || elementScroll) {
-            if (elementCouldBeScrolled(target)) {
+        var _a = getScrollVariables(axis, target), position = _a[0], scroll_1 = _a[1], capacity = _a[2];
+        var elementScroll = (scroll_1 - capacity) - position;
+        if (position || elementScroll) {
+            if (elementCouldBeScrolled(axis, target)) {
                 availableScroll += elementScroll;
-                availableScrollTop += scrollTop;
+                availableScrollTop += position;
             }
@@ -24,0 +53,0 @@ }

dist/es2015/index.d.ts

@@ -1,2 +0,2 @@
-import { RemoveScroll } from './component';
+import RemoveScroll from './Combination';
 export { RemoveScroll, };

dist/es2015/index.js

@@ -1,2 +0,2 @@
-import { RemoveScroll } from './component';
+import RemoveScroll from './Combination';
 export { RemoveScroll, };

dist/es5/aggresiveCapture.d.ts

@@ -1,3 +0,3 @@
-export declare const aggressive: boolean | {
+export declare const nonPassive: boolean | {
     passive: boolean;
 };

dist/es5/aggresiveCapture.js

@@ -19,2 +19,2 @@ "use strict";
 }
-exports.aggressive = passiveSupported ? { passive: false } : false;
+exports.nonPassive = passiveSupported ? { passive: false } : false;

dist/es5/handleScroll.d.ts

@@ -1,1 +0,3 @@
-export declare const handleScroll: (endTarget: HTMLElement, event: any, sourceDelta: number) => boolean;
+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;

dist/es5/handleScroll.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-var elementCouldBeScrolled = function (node) {
+var elementCouldBeVScrolled = function (node) {
     var styles = window.getComputedStyle(node);
@@ -8,3 +8,32 @@ return (styles.overflowY !== 'hidden' &&
 };
-exports.handleScroll = function (endTarget, event, sourceDelta) {
+var elementCouldBeHScrolled = function (node) {
+    var styles = window.getComputedStyle(node);
+    return (styles.overflowX !== 'hidden' &&
+        !(styles.overflowY === styles.overflowX && styles.overflowX === 'visible'));
+};
+exports.locationCouldBeScrolled = function (axis, node) {
+    var current = node;
+    do {
+        var isScrollable = elementCouldBeScrolled(axis, current);
+        if (isScrollable) {
+            var _a = getScrollVariables(axis, current), s = _a[1], d = _a[2];
+            if (s > d) {
+                return true;
+            }
+        }
+        current = current.parentNode;
+    } while (current && current !== document.body);
+    return false;
+};
+var getVScrollVariables = function (_a) {
+    var scrollTop = _a.scrollTop, scrollHeight = _a.scrollHeight, clientHeight = _a.clientHeight;
+    return [scrollTop, scrollHeight, clientHeight];
+};
+var getHScrollVariables = function (_a) {
+    var scrollLeft = _a.scrollLeft, scrollWidth = _a.scrollWidth, clientWidth = _a.clientWidth;
+    return [scrollLeft, scrollWidth, clientWidth];
+};
+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 delta = sourceDelta;
@@ -18,8 +47,8 @@ var target = event.target;
     do {
-        var scrollTop = target.scrollTop, scrollHeight = target.scrollHeight, clientHeight = target.clientHeight;
-        var elementScroll = scrollHeight - clientHeight - scrollTop;
-        if (scrollTop || elementScroll) {
-            if (elementCouldBeScrolled(target)) {
+        var _a = getScrollVariables(axis, target), position = _a[0], scroll_1 = _a[1], capacity = _a[2];
+        var elementScroll = (scroll_1 - capacity) - position;
+        if (position || elementScroll) {
+            if (elementCouldBeScrolled(axis, target)) {
                 availableScroll += elementScroll;
-                availableScrollTop += scrollTop;
+                availableScrollTop += position;
             }
@@ -26,0 +55,0 @@ }

dist/es5/index.d.ts

@@ -1,2 +0,2 @@
-import { RemoveScroll } from './component';
+import RemoveScroll from './Combination';
 export { RemoveScroll, };

dist/es5/index.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-var component_1 = require("./component");
-exports.RemoveScroll = component_1.RemoveScroll;
+var Combination_1 = require("./Combination");
+exports.RemoveScroll = Combination_1.default;

package.json

 {
   "name": "react-remove-scroll",
-  "version": "1.0.8",
+  "version": "2.0.0",
   "description": "Disables scroll outside of `children` node.",
@@ -11,3 +11,3 @@ "main": "dist/es5/index.js",
     "test:ci": "ts-react-toolbox test --runInBand --coverage",
-    "build": "ts-react-toolbox build",
+    "build": "rm -Rf ./dist && ts-react-toolbox build",
     "prepublish": "yarn build",
@@ -18,3 +18,5 @@ "release": "ts-react-toolbox release",
     "format": "ts-react-toolbox format",
-    "analyze": "ts-react-toolbox analyze"
+    "analyze": "ts-react-toolbox analyze",
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook"
   },
@@ -27,3 +29,16 @@ "keywords": [
   "devDependencies": {
-    "size-limit": "^0.21.1",
+    "@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",
+    "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.2"
@@ -41,10 +56,18 @@ },
   "files": [
-    "dist"
+    "dist",
+    "UI",
+    "sidecar"
   ],
   "repository": "https://github.com/theKashey/react-remove-scroll",
   "dependencies": {
-    "react-remove-scroll-bar": "^1.1.5",
-    "tslib": "^1.0.0"
+    "react-remove-scroll": "^1.0.8",
+    "react-remove-scroll-bar": "^1.2.0",
+    "react-style-singleton": "^2.0.0",
+    "tslib": "^1.0.0",
+    "use-sidecar": "^1.0.1"
   },
-  "sideEffects": false
+  "sideEffects": false,
+  "resolutions": {
+    "typescript": "^3.0.0"
+  }
 }

README.md

@@ -0,1 +1,25 @@
+<div align="center">
+  <h1>React-remove-📜</h1>
+  <br/>
+   dont even scroll
+  <br/>
+  
+  <a href="https://www.npmjs.com/package/react-remove-scroll">
+    <img src="https://img.shields.io/npm/v/react-remove-scroll.svg?style=flat-square" />
+  </a>
+    
+  <a href="https://travis-ci.org/theKashey/react-remove-scroll">
+   <img src="https://img.shields.io/travis/theKashey/react-remove-scroll.svg?style=flat-square" alt="Build status">
+  </a> 
+
+  <a href="https://www.npmjs.com/package/react-remove-scroll">
+   <img src="https://img.shields.io/npm/dm/react-remove-scroll.svg" alt="npm downloads">
+  </a> 
+
+  <a href="https://bundlephobia.com/result?p=react-remove-scroll">
+   <img src="https://img.shields.io/bundlephobia/minzip/react-remove-scroll.svg" alt="bundle size">
+  </a>   
+  <br/>
+</div>
+
 react-remove-scroll
@@ -8,5 +32,7 @@ ====
 - 🖱 mouse and touch devices friendly
+- 📈 vertical and horizontal
 - 📜 removes document scroll bar maintaining it space
 - ✅ support nested scrollable elements
 - 🕳 supports react-portals (uses React Event system)
+- ☠️ it could block literally any scroll anywhere
 
@@ -26,7 +52,28 @@ # Usage
 - `[enabled]` - activate or deactivate component behaviour without removing it.
-- `[noIsolation]` - disables outer event capturing
+- `[noIsolation=false]` - disables outer event capturing. Event capturing is React friendly and unlikely be a problem.
+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). 
+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).  
 - `[forwardProps]` - will forward all props to the `children`
 - `[className]` - className for an internal div
-- `[removeScrollBar]` - to control scroll bar removal. Set to false, if you prefer to keep it (wheel and touch scroll still disabled).
+- `[removeScrollBar]` - to control scroll bar removal. Set to false, if you prefer to keep it (wheel and touch scroll is still disabled).
 
+# Size
+- (🧩 full) 1.7kb after compression (excluding tslib).
+---
+- (👁 UI) __400b__, visual elements only
+- (🚗 sidecar) 1.5kb, side effects
+```js
+import {sidecar} from "react-remove-scroll";
+import {RemoveScroll} from 'react-remove-scroll/UI';
+
+const sidecar = sidecar(() => import('react-remove-scroll/sidecar'));
+
+<RemoveScroll sideCar={sidecar}>
+  Will load logic from a sidecar when needed
+</RemoveScroll>  
+```
+
+> Consider setting `-webkit-overflow-scrolling: touch;` on a document level for a proper mobile experience.
+
 ## Internal div
@@ -68,2 +115,14 @@ But default RemoveScroll will create a div to handle and capture events.
 
+## Over isolation
+That could happen - 
+you disable scroll on the body, 
+you are suppressing all scroll and wheel events,
+and you are ghosting the rest of the page by the `inert` prop.
+
+Only something inside Lock does exists for the browser, and that might be less than you expected.
+
+Dont forget about `shard`, dont forget - `inert` is not portals friendly, dont forget - you dont need over isolation in most of the cases.
+
+> just be careful! 
+
 # Performance
@@ -77,4 +136,5 @@ To do the job this library setup _non_ passive event listener. Chrome dev tools would complain about it, as a
 
-# Size
-1.5kb after compression (excluding tslib).
+# Supported React versions
+- v1 supports React 15/16
+- v2 requires 16.8.0+ (hooks)
 
@@ -81,0 +141,0 @@ # Scroll-Locky

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

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

39371

increased by67.5%

Number of package files

42

increased by133.33%

Lines of code

713

increased by58.44%

Number of lines in readme file

151

increased by65.93%

Worsened metrics

Dependency count

6

increased by100%

Dev dependency count

15

increased by650%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Addedreact-remove-scroll@^1.0.8

• + Addedreact-style-singleton@^2.0.0

• + Addeduse-sidecar@^1.0.1

• + Addeddetect-node-es@1.1.0(transitive)

• + Addedget-nonce@1.0.1(transitive)

• + Addedreact-remove-scroll@1.0.8(transitive)

• + Addedreact-style-singleton@2.2.1(transitive)

• + Addedtslib@2.8.1(transitive)

• + Addeduse-sidecar@1.1.2(transitive)

• Updatedreact-remove-scroll-bar@^1.2.0