next-nprogress-bar - npm Package Compare versions

Comparing version 2.3.11 to 2.3.12

dist/AppProgressBar.d.ts

 import React from 'react';
 import { ProgressBarProps, RouterNProgressOptions } from '.';
 import { NavigateOptions } from 'next/dist/shared/lib/app-router-context.shared-runtime';
-export declare const AppProgressBar: React.MemoExoticComponent<({ color, height, options, shallowRouting, disableSameURL, startPosition, delay, stopDelay, style, nonce, targetPreprocessor, }: ProgressBarProps) => React.JSX.Element>;
+export declare const AppProgressBar: React.MemoExoticComponent<({ color, height, options, shallowRouting, disableSameURL, startPosition, delay, stopDelay, style, nonce, targetPreprocessor, disableAnchorClick, }: ProgressBarProps) => React.JSX.Element>;
 export declare function useRouter(): {
@@ -6,0 +6,0 @@ push: (href: string, options?: NavigateOptions, NProgressOptions?: RouterNProgressOptions) => void;

dist/index.d.ts

@@ -28,2 +28,3 @@ /// <reference types="react" />
  * @param targetPreprocessor If you want to./AppProgressBaress the target URL - @default undefined
+ * @param disableAnchorClick Disable triggering progress bar on anchor clicks - @default false
  */
@@ -44,2 +45,3 @@ export interface ProgressBarProps {
     targetPreprocessor?: (url: URL) => URL;
+    disableAnchorClick?: boolean;
 }
@@ -46,0 +48,0 @@ export interface RouterNProgressOptions {

dist/index.js

@@ -91,3 +91,3 @@ 'use strict';
 var AppProgressBar$1 = React.memo(function (_a) {
-    var _b = _a.color, color = _b === void 0 ? '#0A2FFF' : _b, _c = _a.height, height = _c === void 0 ? '2px' : _c, options = _a.options, _d = _a.shallowRouting, shallowRouting = _d === void 0 ? false : _d, _e = _a.disableSameURL, disableSameURL = _e === void 0 ? true : _e, _f = _a.startPosition, startPosition = _f === void 0 ? 0 : _f, _g = _a.delay, delay = _g === void 0 ? 0 : _g, _h = _a.stopDelay, stopDelay = _h === void 0 ? 0 : _h, style = _a.style, nonce = _a.nonce, targetPreprocessor = _a.targetPreprocessor;
+    var _b = _a.color, color = _b === void 0 ? '#0A2FFF' : _b, _c = _a.height, height = _c === void 0 ? '2px' : _c, options = _a.options, _d = _a.shallowRouting, shallowRouting = _d === void 0 ? false : _d, _e = _a.disableSameURL, disableSameURL = _e === void 0 ? true : _e, _f = _a.startPosition, startPosition = _f === void 0 ? 0 : _f, _g = _a.delay, delay = _g === void 0 ? 0 : _g, _h = _a.stopDelay, stopDelay = _h === void 0 ? 0 : _h, style = _a.style, nonce = _a.nonce, targetPreprocessor = _a.targetPreprocessor, _j = _a.disableAnchorClick, disableAnchorClick = _j === void 0 ? false : _j;
     var styles = (React.createElement("style", { nonce: nonce }, style ||
@@ -106,3 +106,7 @@ "\n          #nprogress {\n            pointer-events: none;\n          }\n\n          #nprogress .bar {\n            background: ".concat(color, ";\n\n            position: fixed;\n            z-index: 1031;\n            top: 0;\n            left: 0;\n\n            width: 100%;\n            height: ").concat(height, ";\n          }\n\n          /* Fancy blur effect */\n          #nprogress .peg {\n            display: block;\n            position: absolute;\n            right: 0px;\n            width: 100px;\n            height: 100%;\n            box-shadow: 0 0 10px ").concat(color, ", 0 0 5px ").concat(color, ";\n            opacity: 1.0;\n\n            -webkit-transform: rotate(3deg) translate(0px, -4px);\n                -ms-transform: rotate(3deg) translate(0px, -4px);\n                    transform: rotate(3deg) translate(0px, -4px);\n          }\n\n          /* Remove these to get rid of the spinner */\n          #nprogress .spinner {\n            display: block;\n            position: fixed;\n            z-index: 1031;\n            top: 15px;\n            right: 15px;\n          }\n\n          #nprogress .spinner-icon {\n            width: 18px;\n            height: 18px;\n            box-sizing: border-box;\n\n            border: solid 2px transparent;\n            border-top-color: ").concat(color, ";\n            border-left-color: ").concat(color, ";\n            border-radius: 50%;\n\n            -webkit-animation: nprogress-spinner 400ms linear infinite;\n                    animation: nprogress-spinner 400ms linear infinite;\n          }\n\n          .nprogress-custom-parent {\n            overflow: hidden;\n            position: relative;\n          }\n\n          .nprogress-custom-parent #nprogress .spinner,\n          .nprogress-custom-parent #nprogress .bar {\n            position: absolute;\n          }\n\n          @-webkit-keyframes nprogress-spinner {\n            0%   { -webkit-transform: rotate(0deg); }\n            100% { -webkit-transform: rotate(360deg); }\n          }\n          @keyframes nprogress-spinner {\n            0%   { transform: rotate(0deg); }\n            100% { transform: rotate(360deg); }\n          }\n        ")));
     }, [pathname, searchParams]);
+    var elementsWithAttachedHandlers = React.useRef([]);
     React.useEffect(function () {
+        if (disableAnchorClick) {
+            return;
+        }
         var timer;
@@ -170,5 +174,7 @@ var startProgress = function () {
             });
+            elementsWithAttachedHandlers.current = validAnchorElements;
         };
         var mutationObserver = new MutationObserver(handleMutation);
         mutationObserver.observe(document, { childList: true, subtree: true });
+        var originalWindowHistoryPushState = window.history.pushState;
         window.history.pushState = new Proxy(window.history.pushState, {
@@ -180,2 +186,10 @@ apply: function (target, thisArg, argArray) {
         });
+        return function () {
+            mutationObserver.disconnect();
+            elementsWithAttachedHandlers.current.forEach(function (anchor) {
+                anchor.removeEventListener('click', handleAnchorClick);
+            });
+            elementsWithAttachedHandlers.current = [];
+            window.history.pushState = originalWindowHistoryPushState;
+        };
     }, []);
@@ -200,3 +214,4 @@ return styles;
             JSON.stringify(nextProps === null || nextProps === void 0 ? void 0 : nextProps.options) &&
-        (prevProps === null || prevProps === void 0 ? void 0 : prevProps.style) === (nextProps === null || nextProps === void 0 ? void 0 : nextProps.style));
+        (prevProps === null || prevProps === void 0 ? void 0 : prevProps.style) === (nextProps === null || nextProps === void 0 ? void 0 : nextProps.style) &&
+        prevProps.disableAnchorClick === nextProps.disableAnchorClick);
 });
@@ -203,0 +218,0 @@ function useRouter() {

dist/PagesProgressBar.d.ts

 import React from 'react';
 import { ProgressBarProps } from '.';
-export declare const PagesProgressBar: React.MemoExoticComponent<({ color, height, options, shallowRouting, disableSameURL, startPosition, delay, stopDelay, style, nonce, }: Omit<ProgressBarProps, 'targetPreprocessor'>) => React.JSX.Element>;
+export declare const PagesProgressBar: React.MemoExoticComponent<({ color, height, options, shallowRouting, disableSameURL, startPosition, delay, stopDelay, style, nonce, }: Omit<ProgressBarProps, 'targetPreprocessor' | 'disableAnchorClick'>) => React.JSX.Element>;

package.json

 {
   "name": "next-nprogress-bar",
-  "version": "2.3.11",
+  "version": "2.3.12",
   "description": "NextJS progress bar compatible with new app directory",
@@ -5,0 +5,0 @@ "repository": {

README.md

@@ -13,6 +13,6 @@ <div align="center">
   - [Use](#use)
-- [Exemple with /pages/\_app](#exemple-with-pagesapp)
+- [Example with /pages/\_app](#example-with-pagesapp)
   - [JavaScript](#javascript)
   - [TypeScript](#typescript)
-- [Exemple with /app/layout](#exemple-with-applayout)
+- [Example with /app/layout](#example-with-applayout)
   - [JavaScript](#javascript)
@@ -80,3 +80,3 @@ - [First approach in a use client layout](#first-approach-in-a-use-client-layout)
 
-## Exemple with /pages/\_app
+## Example with /pages/\_app
 
@@ -124,3 +124,3 @@ ### JavaScript
 
-## Exemple with /app/layout
+## Example with /app/layout
 
@@ -127,0 +127,0 @@ ### JavaScript

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

75474

increased by3.43%

Lines of code

405

increased by4.38%

No dependency changes