react-tiny-popover - npm Package Compare versions

Comparing version 3.4.2 to 3.4.4

dist/index.d.ts

@@ -36,2 +36,3 @@ import * as React from 'react';
     content: ContentRenderer | JSX.Element;
+    contentDestination?: HTMLElement;
     contentLocation?: ContentLocationGetter | ContentLocation;
@@ -38,0 +39,0 @@ padding?: number;

dist/index.js

@@ -10,3 +10,3 @@ (function webpackUniversalModuleDefinition(root, factory) {
 	}
-})(typeof self !== 'undefined' ? self : this, function() {
+})(window, function() {
 return /******/ (function(modules) { // webpackBootstrap
@@ -50,10 +50,30 @@ /******/ 	// The module cache
 /******/ 		if(!__webpack_require__.o(exports, name)) {
-/******/ 			Object.defineProperty(exports, name, {
-/******/ 				configurable: false,
-/******/ 				enumerable: true,
-/******/ 				get: getter
-/******/ 			});
+/******/ 			Object.defineProperty(exports, name, { enumerable: true, get: getter });
 /******/ 		}
 /******/ 	};
 /******/
+/******/ 	// define __esModule on exports
+/******/ 	__webpack_require__.r = function(exports) {
+/******/ 		if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
+/******/ 			Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+/******/ 		}
+/******/ 		Object.defineProperty(exports, '__esModule', { value: true });
+/******/ 	};
+/******/
+/******/ 	// create a fake namespace object
+/******/ 	// mode & 1: value is a module id, require it
+/******/ 	// mode & 2: merge all properties of value into the ns
+/******/ 	// mode & 4: return value when already ns object
+/******/ 	// mode & 8|1: behave like require
+/******/ 	__webpack_require__.t = function(value, mode) {
+/******/ 		if(mode & 1) value = __webpack_require__(value);
+/******/ 		if(mode & 8) return value;
+/******/ 		if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
+/******/ 		var ns = Object.create(null);
+/******/ 		__webpack_require__.r(ns);
+/******/ 		Object.defineProperty(ns, 'default', { enumerable: true, value: value });
+/******/ 		if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
+/******/ 		return ns;
+/******/ 	};
+/******/
 /******/ 	// getDefaultExport function for compatibility with non-harmony modules
@@ -74,14 +94,14 @@ /******/ 	__webpack_require__.n = function(module) {
 /******/
+/******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 2);
+/******/ 	return __webpack_require__(__webpack_require__.s = 0);
 /******/ })
 /************************************************************************/
-/******/ ([
-/* 0 */
-/***/ (function(module, exports) {
+/******/ ({
 
-module.exports = require("react");
-
-/***/ }),
-/* 1 */
+/***/ "./src/ArrowContainer.tsx":
+/*!********************************!*\
+  !*** ./src/ArrowContainer.tsx ***!
+  \********************************/
+/*! no static exports found */
 /***/ (function(module, exports, __webpack_require__) {
@@ -91,31 +111,80 @@
 
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Constants = {
-    POPOVER_CONTAINER_CLASS_NAME: 'react-tiny-popover-container',
-    DEFAULT_PADDING: 6,
-    DEFAULT_WINDOW_PADDING: 6,
-    FADE_TRANSITION: 0.35,
-    DEFAULT_ARROW_COLOR: 'black',
-    DEFAULT_POSITIONS: ['top', 'left', 'right', 'bottom'],
-    EMPTY_CLIENT_RECT: {
-        top: 0,
-        left: 0,
-        bottom: 0,
-        height: 0,
-        right: 0,
-        width: 0,
-    },
+var React = __webpack_require__(/*! react */ "react");
+var util_1 = __webpack_require__(/*! ./util */ "./src/util.ts");
+var FLEX_CENTER_CHILD = {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
 };
-exports.arrayUnique = function (array) { return array.filter(function (value, index, self) { return self.indexOf(value) === index; }); };
+var ArrowContainer = function (_a) {
+    var position = _a.position, children = _a.children, style = _a.style, _b = _a.arrowColor, arrowColor = _b === void 0 ? util_1.Constants.DEFAULT_ARROW_COLOR : _b, _c = _a.arrowSize, arrowSize = _c === void 0 ? 10 : _c, arrowStyle = _a.arrowStyle, popoverRect = _a.popoverRect, targetRect = _a.targetRect;
+    return (React.createElement("div", { style: __assign({ paddingLeft: position === 'right' ? arrowSize : 0, paddingTop: position === 'bottom' ? arrowSize : 0, paddingBottom: position === 'top' ? arrowSize : 0, paddingRight: position === 'left' ? arrowSize : 0 }, style) },
+        React.createElement("div", { style: __assign({ position: 'absolute' }, (function () {
+                var arrowWidth = arrowSize * 2;
+                var top = (targetRect.top - popoverRect.top) + (targetRect.height / 2) - (arrowWidth / 2);
+                var left = (targetRect.left - popoverRect.left) + (targetRect.width / 2) - (arrowWidth / 2);
+                left = left < 0 ? 0 : left;
+                left = left + arrowWidth > popoverRect.width ? popoverRect.width - arrowWidth : left;
+                top = top < 0 ? 0 : top;
+                top = top + arrowWidth > popoverRect.height ? popoverRect.height - arrowWidth : top;
+                switch (position) {
+                    case 'right':
+                        return {
+                            borderTop: arrowSize + "px solid transparent",
+                            borderBottom: arrowSize + "px solid transparent",
+                            borderRight: arrowSize + "px solid " + arrowColor,
+                            left: 0,
+                            top: top,
+                        };
+                    case 'left':
+                        return {
+                            borderTop: arrowSize + "px solid transparent",
+                            borderBottom: arrowSize + "px solid transparent",
+                            borderLeft: arrowSize + "px solid " + arrowColor,
+                            right: 0,
+                            top: top,
+                        };
+                    case 'bottom':
+                        return {
+                            borderLeft: arrowSize + "px solid transparent",
+                            borderRight: arrowSize + "px solid transparent",
+                            borderBottom: arrowSize + "px solid " + arrowColor,
+                            top: 0,
+                            left: left,
+                        };
+                    case 'top':
+                    default:
+                        return {
+                            borderLeft: arrowSize + "px solid transparent",
+                            borderRight: arrowSize + "px solid transparent",
+                            borderTop: arrowSize + "px solid " + arrowColor,
+                            bottom: 0,
+                            left: left,
+                        };
+                }
+            })(), arrowStyle) }),
+        children));
+};
+exports.ArrowContainer = ArrowContainer;
 
 
 /***/ }),
-/* 2 */
-/***/ (function(module, exports, __webpack_require__) {
 
-module.exports = __webpack_require__(3);
-
-
-/***/ }),
-/* 3 */
+/***/ "./src/Popover.tsx":
+/*!*************************!*\
+  !*** ./src/Popover.tsx ***!
+  \*************************/
+/*! no static exports found */
 /***/ (function(module, exports, __webpack_require__) {
@@ -126,5 +195,8 @@
 var __extends = (this && this.__extends) || (function () {
-    var extendStatics = Object.setPrototypeOf ||
-        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
     return function (d, b) {
@@ -137,6 +209,6 @@ extendStatics(d, b);
 Object.defineProperty(exports, "__esModule", { value: true });
-var React = __webpack_require__(0);
-var react_dom_1 = __webpack_require__(4);
-var util_1 = __webpack_require__(1);
-var ArrowContainer_1 = __webpack_require__(5);
+var React = __webpack_require__(/*! react */ "react");
+var react_dom_1 = __webpack_require__(/*! react-dom */ "react-dom");
+var util_1 = __webpack_require__(/*! ./util */ "./src/util.ts");
+var ArrowContainer_1 = __webpack_require__(/*! ./ArrowContainer */ "./src/ArrowContainer.tsx");
 exports.ArrowContainer = ArrowContainer_1.ArrowContainer;
@@ -174,6 +246,17 @@ var Popover = /** @class */ (function (_super) {
     Popover.prototype.componentDidUpdate = function (prevProps) {
+        if (this.target == null) {
+            this.target = react_dom_1.findDOMNode(this);
+        }
         var prevIsOpen = prevProps.isOpen, prevPosition = prevProps.position, prevBody = prevProps.content;
         var _a = this.props, isOpen = _a.isOpen, content = _a.content, position = _a.position;
         this.positionOrder = this.getPositionPriorityOrder(this.props.position);
-        if (prevIsOpen !== isOpen || prevBody !== content || prevPosition !== position) {
+        var hasNewDestination = prevProps.contentDestination !== this.props.contentDestination;
+        if (prevIsOpen !== isOpen ||
+            prevBody !== content ||
+            prevPosition !== position ||
+            hasNewDestination) {
+            if (hasNewDestination) {
+                this.removePopover();
+                this.popoverDiv.remove();
+            }
             this.updatePopover(isOpen);
@@ -194,3 +277,3 @@ }
     Popover.prototype.updatePopover = function (isOpen) {
-        if (isOpen) {
+        if (isOpen && this.target != null) {
             if (!this.popoverDiv || !this.popoverDiv.parentNode) {
@@ -201,3 +284,3 @@ var transitionDuration = this.props.transitionDuration;
                 this.popoverDiv.style.transition = "opacity " + (transitionDuration || util_1.Constants.FADE_TRANSITION) + "s";
-                window.document.body.appendChild(this.popoverDiv);
+                (this.props.contentDestination || window.document.body).appendChild(this.popoverDiv);
                 window.addEventListener('resize', this.onResize);
@@ -220,3 +303,4 @@ window.addEventListener('click', this.onClick);
         this.renderWithPosition({ position: this.positionOrder[positionIndex], targetRect: this.target.getBoundingClientRect() }, function (violation, rect) {
-            var _a = _this.props, disableReposition = _a.disableReposition, contentLocation = _a.contentLocation;
+            var _a;
+            var _b = _this.props, disableReposition = _b.disableReposition, contentLocation = _b.contentLocation;
             if (violation && !disableReposition && !(typeof contentLocation === 'object')) {
@@ -226,11 +310,11 @@ _this.renderPopover(positionIndex + 1);
             else {
-                var _b = _this.props, contentLocation_1 = _b.contentLocation, align = _b.align;
-                var _c = _this.getNudgedPopoverPosition(rect), nudgedTop = _c.top, nudgedLeft = _c.left;
+                var _c = _this.props, contentLocation_1 = _c.contentLocation, align = _c.align;
+                var _d = _this.getNudgedPopoverPosition(rect), nudgedTop = _d.top, nudgedLeft = _d.left;
                 var rectTop = rect.top, rectLeft = rect.left;
                 var position = _this.positionOrder[positionIndex];
-                var _d = disableReposition ? { top: rectTop, left: rectLeft } : { top: nudgedTop, left: nudgedLeft }, top_1 = _d.top, left = _d.left;
+                var _e = disableReposition ? { top: rectTop, left: rectLeft } : { top: nudgedTop, left: nudgedLeft }, top_1 = _e.top, left = _e.left;
                 if (contentLocation_1) {
                     var targetRect = _this.target.getBoundingClientRect();
-                    var popoverRect = _this.popoverDiv.firstChild.getBoundingClientRect();
-                    (_e = typeof contentLocation_1 === 'function' ? contentLocation_1({ targetRect: targetRect, popoverRect: popoverRect, position: position, align: align, nudgedLeft: nudgedLeft, nudgedTop: nudgedTop }) : contentLocation_1, top_1 = _e.top, left = _e.left);
+                    var popoverRect = _this.popoverDiv.getBoundingClientRect();
+                    (_a = typeof contentLocation_1 === 'function' ? contentLocation_1({ targetRect: targetRect, popoverRect: popoverRect, position: position, align: align, nudgedLeft: nudgedLeft, nudgedTop: nudgedTop }) : contentLocation_1, top_1 = _a.top, left = _a.left);
                     _this.popoverDiv.style.left = left.toFixed() + "px";
@@ -240,5 +324,14 @@ _this.popoverDiv.style.top = top_1.toFixed() + "px";
                 else {
+                    var destinationTopOffset = 0;
+                    var destinationLeftOffset = 0;
+                    if (_this.props.contentDestination) {
+                        var destRect = _this.props.contentDestination.getBoundingClientRect();
+                        destinationTopOffset = -destRect.top;
+                        destinationLeftOffset = -destRect.left;
+                    }
                     var _f = [top_1 + window.pageYOffset, left + window.pageXOffset], absoluteTop = _f[0], absoluteLeft = _f[1];
-                    _this.popoverDiv.style.left = absoluteLeft.toFixed() + "px";
-                    _this.popoverDiv.style.top = absoluteTop.toFixed() + "px";
+                    var finalLeft = absoluteLeft + destinationTopOffset;
+                    var finalTop = absoluteTop + destinationLeftOffset;
+                    _this.popoverDiv.style.left = finalLeft.toFixed() + "px";
+                    _this.popoverDiv.style.top = finalTop.toFixed() + "px";
                 }
@@ -252,3 +345,3 @@ _this.popoverDiv.style.width = null;
                     targetRect: _this.target.getBoundingClientRect(),
-                    popoverRect: _this.popoverDiv.firstChild.getBoundingClientRect(),
+                    popoverRect: _this.popoverDiv.getBoundingClientRect(),
                 }, function () {
@@ -261,3 +354,2 @@ _this.startTargetPositionListener(10);
             }
-            var _e;
         });
@@ -287,4 +379,7 @@ };
         react_dom_1.unstable_renderSubtreeIntoContainer(this, getContent({ position: position, nudgedLeft: nudgedLeft, nudgedTop: nudgedTop, targetRect: targetRect, popoverRect: popoverRect, align: align }), this.popoverDiv, function () {
+            if (_this.willUnmount) {
+                return;
+            }
             var targetRect = _this.target.getBoundingClientRect();
-            var popoverRect = _this.popoverDiv.firstChild.getBoundingClientRect();
+            var popoverRect = _this.popoverDiv.getBoundingClientRect();
             var _a = _this.getLocationForPosition(position, targetRect, popoverRect), top = _a.top, left = _a.left;
@@ -428,9 +523,8 @@ callback(position === 'top' && top < padding ||
 /***/ }),
-/* 4 */
-/***/ (function(module, exports) {
 
-module.exports = require("react-dom");
-
-/***/ }),
-/* 5 */
+/***/ "./src/util.ts":
+/*!*********************!*\
+  !*** ./src/util.ts ***!
+  \*********************/
+/*! no static exports found */
 /***/ (function(module, exports, __webpack_require__) {
@@ -440,73 +534,60 @@
 
-var __assign = (this && this.__assign) || Object.assign || function(t) {
-    for (var s, i = 1, n = arguments.length; i < n; i++) {
-        s = arguments[i];
-        for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-            t[p] = s[p];
-    }
-    return t;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-var React = __webpack_require__(0);
-var util_1 = __webpack_require__(1);
-var FLEX_CENTER_CHILD = {
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
+exports.Constants = {
+    POPOVER_CONTAINER_CLASS_NAME: 'react-tiny-popover-container',
+    DEFAULT_PADDING: 6,
+    DEFAULT_WINDOW_PADDING: 6,
+    FADE_TRANSITION: 0.35,
+    DEFAULT_ARROW_COLOR: 'black',
+    DEFAULT_POSITIONS: ['top', 'left', 'right', 'bottom'],
+    EMPTY_CLIENT_RECT: {
+        top: 0,
+        left: 0,
+        bottom: 0,
+        height: 0,
+        right: 0,
+        width: 0,
+    },
 };
-var ArrowContainer = function (_a) {
-    var position = _a.position, children = _a.children, style = _a.style, _b = _a.arrowColor, arrowColor = _b === void 0 ? util_1.Constants.DEFAULT_ARROW_COLOR : _b, _c = _a.arrowSize, arrowSize = _c === void 0 ? 10 : _c, arrowStyle = _a.arrowStyle, popoverRect = _a.popoverRect, targetRect = _a.targetRect;
-    return (React.createElement("div", { style: __assign({ paddingLeft: position === 'right' ? arrowSize : 0, paddingTop: position === 'bottom' ? arrowSize : 0, paddingBottom: position === 'top' ? arrowSize : 0, paddingRight: position === 'left' ? arrowSize : 0 }, style) },
-        React.createElement("div", { style: __assign({ position: 'absolute' }, (function () {
-                var arrowWidth = arrowSize * 2;
-                var top = (targetRect.top - popoverRect.top) + (targetRect.height / 2) - (arrowWidth / 2);
-                var left = (targetRect.left - popoverRect.left) + (targetRect.width / 2) - (arrowWidth / 2);
-                left = left < 0 ? 0 : left;
-                left = left + arrowWidth > popoverRect.width ? popoverRect.width - arrowWidth : left;
-                top = top < 0 ? 0 : top;
-                top = top + arrowWidth > popoverRect.height ? popoverRect.height - arrowWidth : top;
-                switch (position) {
-                    case 'right':
-                        return {
-                            borderTop: arrowSize + "px solid transparent",
-                            borderBottom: arrowSize + "px solid transparent",
-                            borderRight: arrowSize + "px solid " + arrowColor,
-                            left: 0,
-                            top: top,
-                        };
-                    case 'left':
-                        return {
-                            borderTop: arrowSize + "px solid transparent",
-                            borderBottom: arrowSize + "px solid transparent",
-                            borderLeft: arrowSize + "px solid " + arrowColor,
-                            right: 0,
-                            top: top,
-                        };
-                    case 'bottom':
-                        return {
-                            borderLeft: arrowSize + "px solid transparent",
-                            borderRight: arrowSize + "px solid transparent",
-                            borderBottom: arrowSize + "px solid " + arrowColor,
-                            top: 0,
-                            left: left,
-                        };
-                    case 'top':
-                    default:
-                        return {
-                            borderLeft: arrowSize + "px solid transparent",
-                            borderRight: arrowSize + "px solid transparent",
-                            borderTop: arrowSize + "px solid " + arrowColor,
-                            bottom: 0,
-                            left: left,
-                        };
-                }
-            })(), arrowStyle) }),
-        children));
-};
-exports.ArrowContainer = ArrowContainer;
+exports.arrayUnique = function (array) { return array.filter(function (value, index, self) { return self.indexOf(value) === index; }); };
 
 
+/***/ }),
+
+/***/ 0:
+/*!*******************************!*\
+  !*** multi ./src/Popover.tsx ***!
+  \*******************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+module.exports = __webpack_require__(/*! ./src/Popover.tsx */"./src/Popover.tsx");
+
+
+/***/ }),
+
+/***/ "react":
+/*!************************!*\
+  !*** external "react" ***!
+  \************************/
+/*! no static exports found */
+/***/ (function(module, exports) {
+
+module.exports = require("react");
+
+/***/ }),
+
+/***/ "react-dom":
+/*!****************************!*\
+  !*** external "react-dom" ***!
+  \****************************/
+/*! no static exports found */
+/***/ (function(module, exports) {
+
+module.exports = require("react-dom");
+
 /***/ })
-/******/ ]);
+
+/******/ });
 });
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "react-tiny-popover",
-  "version": "3.4.2",
+  "version": "3.4.4",
   "repository": {
@@ -8,3 +8,3 @@ "type": "git",
   },
-  "main": "dist/index.js",
+  "main": "dist/Popover.js",
   "types": "dist/index.d.ts",
@@ -23,17 +23,19 @@ "keywords": [
   "scripts": {
-    "watch": "webpack --watch",
+    "build": "tsc -p .",
+    "watch": "webpack --watch --mode=development",
     "start-demo": "cd docs && yarn start"
   },
   "devDependencies": {
-    "@types/react": "^16.0.2",
-    "@types/react-dom": "^16.0.1",
-    "awesome-typescript-loader": "^3.2.3",
-    "copy-webpack-plugin": "^4.0.1",
+    "@types/react": "^16.8.23",
+    "@types/react-dom": "^16.8.4",
+    "awesome-typescript-loader": "^5.2.1",
+    "copy-webpack-plugin": "^5.0.3",
     "react": "^16.2.0",
     "react-dom": "^16.2.0",
     "source-map-loader": "^0.2.2",
-    "tslint": "^5.7.0",
-    "tslint-react": "^3.2.0",
-    "typescript": "^2.5.3",
-    "webpack": "^3.6.0"
+    "tslint": "^5.18.0",
+    "tslint-react": "^4.0.0",
+    "typescript": "^3.5.3",
+    "webpack": "^4",
+    "webpack-cli": "^3.3.6"
   },
@@ -44,2 +46,2 @@ "peerDependencies": {
   }
-}
+}

README.md

@@ -16,3 +16,3 @@ # react-tiny-popover
 yarn add react-tiny-popover
-``` 
+```
 
@@ -85,3 +85,3 @@ or
         >
-            <div 
+            <div
                 style={{ backgroundColor: 'blue', opacity: 0.7 }}
@@ -102,3 +102,3 @@ onClick={() => this.setState({ isPopoverOpen: !isPopoverOpen })}
 ### Popover
-|<b>Property<b>|Type|Required|Description|                              
+|<b>Property<b>|Type|Required|Description|
 |--------------|----|--------|-----------|
@@ -111,2 +111,3 @@ |children|```JSX.Element```|✔️|This is the JSX.Element target that you'd like the popover content to track. Sweet. |
 |position|```string``` or ```string[]``` ||You may provide a preferred position for your popover content in relation to its target. Valid values are ```'top', 'bottom', 'left', 'right'```. The default is ```'top'```. If you'd like, you can supply an array of preferred positions ranked in priority order. If the popover reaches the edge of the window, it will attempt to render in the order you specify. The default order is ```['top', 'right', 'left', 'bottom']```. If you'd like, you can provide a shorter array like ```['top', 'left']```. The remaining positions will be automatically filled in. If you provide any duplicate or other values in the array, they will be ignored.|
+|contentDestination|```HTMLElement```|Allows for the popover contents to be rendered somewhere other than `document.body`.|
 |contentLocation|```object``` or ```Function```||If you'd like to hook directly into the positioning process, you may do so here! You can provide an object of type ```{ top: number, left: number }``` to completely override the popover content's (```popoverRect```) location. You can also provide a function that looks like this: ```({ targetRect, popoverRect, position, align, nudgedLeft,  nudgedTop }) => { top: number, left: number }``` (The arguments to this function are the same as the content renderer function above). Note that if repositioning is enabled, it happens before this step, so within here you'll be responsible for keeping ```popoverRect``` within the window's bounds if that matters to you!|
@@ -121,3 +122,3 @@ |align|```string```||Possible values are ```start```, ```center```, and ```end```. If ```start``` is specified, the popover content's top or left location is aligned with its target's. With ```end``` specified, the content's bottom or right location is aligned with its target's. If ```center``` is specified, the popover content and target's centers are aligned. Defaults to ```center```.|
 ### ArrowContainer
-|<b>Property<b>|Type|Required|Description|                                  
+|<b>Property<b>|Type|Required|Description|
 |-----------|----|--------|-----------|
@@ -124,0 +125,0 @@ |position|```string```|✔️|The ```ArrowContainer``` needs to know its own position in relation to the target, so it can point in the correct direction!|

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

Native code

Supply chain risk

Contains native code (e.g., compiled binaries or shared libraries). Including native code can obscure malicious behavior.

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

Number of lines in readme file

128

increased by0.79%

Worsened metrics

Total package byte prevSize

82813

decreased by-64.44%

Dev dependency count

12

increased by9.09%

Number of package files

6

decreased by-57.14%

Lines of code

604

decreased by-48.38%

Number of medium supply chain risk alerts

2

increased byInfinity%

No dependency changes