react-popper - npm Package Compare versions

Comparing version 0.8.3 to 0.9.0

CHANGELOG.md

 ## CHANGELOG
 
+Here are listed the changelogs until 0.8.2, if you are looking for more recent releases changelog please refer to the dedicated GitHub [releases](https://github.com/souporserious/react-popper/releases) page, where you will find all the releases plus the changelog for each of them.
+
+
+----------
+
 ### 0.8.2
@@ -4,0 +9,0 @@

lib/Popper.js

@@ -48,2 +48,7 @@ 'use strict';
     }, _this._getTargetNode = function () {
+      if (_this.props.target) {
+        return _this.props.target;
+      } else if (!_this.context.popperManager || !_this.context.popperManager.getTargetNode()) {
+        throw new Error('Target missing. Popper must be given a target from the Popper Manager, or as a prop.');
+      }
       return _this.context.popperManager.getTargetNode();
@@ -126,3 +131,3 @@ }, _this._getOffsets = function (data) {
     value: function componentDidUpdate(lastProps) {
-      if (lastProps.placement !== this.props.placement || lastProps.eventsEnabled !== this.props.eventsEnabled) {
+      if (lastProps.placement !== this.props.placement || lastProps.eventsEnabled !== this.props.eventsEnabled || lastProps.target !== this.props.target) {
         this._destroyPopper();
@@ -226,3 +231,3 @@ this._createPopper();
 Popper.contextTypes = {
-  popperManager: _propTypes2.default.object.isRequired
+  popperManager: _propTypes2.default.object
 };
@@ -238,3 +243,8 @@ Popper.childContextTypes = {
   modifiers: _propTypes2.default.object,
-  children: _propTypes2.default.oneOfType([_propTypes2.default.node, _propTypes2.default.func])
+  children: _propTypes2.default.oneOfType([_propTypes2.default.node, _propTypes2.default.func]),
+  target: _propTypes2.default.oneOfType([_propTypes2.default.instanceOf(Element), _propTypes2.default.shape({
+    getBoundingClientRect: _propTypes2.default.func.isRequired,
+    clientWidth: _propTypes2.default.number.isRequired,
+    clientHeight: _propTypes2.default.number.isRequired
+  })])
 };
@@ -241,0 +251,0 @@ Popper.defaultProps = {

lib/react-popper.js

@@ -6,25 +6,39 @@ 'use strict';
 });
-exports.Arrow = exports.Popper = exports.Target = exports.Manager = undefined;
 
-var _Manager2 = require('./Manager');
+var _Manager = require('./Manager');
 
-var _Manager3 = _interopRequireDefault(_Manager2);
+Object.defineProperty(exports, 'Manager', {
+  enumerable: true,
+  get: function get() {
+    return _interopRequireDefault(_Manager).default;
+  }
+});
 
-var _Target2 = require('./Target');
+var _Target = require('./Target');
 
-var _Target3 = _interopRequireDefault(_Target2);
+Object.defineProperty(exports, 'Target', {
+  enumerable: true,
+  get: function get() {
+    return _interopRequireDefault(_Target).default;
+  }
+});
 
-var _Popper2 = require('./Popper');
+var _Popper = require('./Popper');
 
-var _Popper3 = _interopRequireDefault(_Popper2);
+Object.defineProperty(exports, 'Popper', {
+  enumerable: true,
+  get: function get() {
+    return _interopRequireDefault(_Popper).default;
+  }
+});
 
-var _Arrow2 = require('./Arrow');
+var _Arrow = require('./Arrow');
 
-var _Arrow3 = _interopRequireDefault(_Arrow2);
+Object.defineProperty(exports, 'Arrow', {
+  enumerable: true,
+  get: function get() {
+    return _interopRequireDefault(_Arrow).default;
+  }
+});
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-exports.Manager = _Manager3.default;
-exports.Target = _Target3.default;
-exports.Popper = _Popper3.default;
-exports.Arrow = _Arrow3.default;
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package.json

 {
   "name": "react-popper",
-  "version": "0.8.3",
+  "version": "0.9.0",
   "description": "React wrapper around PopperJS.",
+  "license": "MIT",
+  "author": "Travis Arnold <[e-mail]> (http://souporserious.com)",
+  "homepage": "https://github.com/souporserious/react-popper",
   "main": "dist/react-popper.js",
+  "umd:main": "dist/react-popper.umd.js",
   "module": "lib/react-popper.js",
@@ -10,8 +14,16 @@ "types": "react-popper.d.ts",
     "dist",
-    "lib",
-    "react-popper.d.ts"
+    "lib"
   ],
-  "license": "MIT",
-  "author": "Travis Arnold <[e-mail]> (http://souporserious.com)",
-  "homepage": "https://github.com/souporserious/react-popper",
+  "scripts": {
+    "build": "npm run build:clean && npm run build:es && npm run build:umd && npm run build:cjs",
+    "build:clean": "rm -rf dist/ && rm -rf lib/",
+    "build:es": "babel src --out-dir lib && mv lib/index.js lib/react-popper.js",
+    "build:umd": "rollup -c --output.format umd --output.name 'react-popper' --output.file dist/react-popper.umd.js",
+    "build:cjs": "rollup -c --output.format cjs --output.name 'react-popper' --output.file dist/react-popper.js",
+    "demo": "parcel --out-dir demo/dist demo/index.html",
+    "prepare": "npm run build",
+    "precommit": "lint-staged",
+    "format": "npm run lint -- --fix --quiet",
+    "lint": "eslint --ext .js,.jsx src/ example/"
+  },
   "repository": {
@@ -39,13 +51,2 @@ "type": "git",
   },
-  "scripts": {
-    "precommit": "lint-staged",
-    "format": "npm run lint -- --fix --quiet",
-    "lint": "eslint --ext .js,.jsx src/ example/",
-    "build:lib": "babel src --out-dir lib",
-    "build": "npm run build:lib && cross-env NODE_ENV=production webpack --config webpack.prod.config.js",
-    "dev": "webpack-dev-server --hot --progress --host 0.0.0.0",
-    "postbuild": "cross-env NODE_ENV=production && cross-env TARGET=minify webpack --config webpack.prod.config.js",
-    "prebuild": "rimraf dist && mkdir dist",
-    "prepare": "npm run build"
-  },
   "peerDependencies": {
@@ -56,4 +57,4 @@ "react": "0.14.x || ^15.0.0 || ^16.0.0",
   "dependencies": {
-    "popper.js": "^1.12.9",
-    "prop-types": "^15.6.0"
+    "popper.js": "^1.14.1",
+    "prop-types": "^15.6.1"
   },
@@ -63,34 +64,30 @@ "devDependencies": {
     "babel-core": "^6.26.0",
-    "babel-eslint": "^8.2.2",
-    "babel-loader": "^7.1.2",
+    "babel-plugin-external-helpers": "^6.22.0",
     "babel-plugin-transform-class-properties": "^6.24.1",
-    "babel-plugin-transform-export-extensions": "^6.22.0",
-    "babel-plugin-transform-object-rest-spread": "^6.26.0",
+    "babel-plugin-transform-react-remove-prop-types": "^0.4.13",
     "babel-preset-env": "^1.6.1",
-    "babel-preset-react": "^6.16.0",
-    "cross-env": "^5.0.5",
-    "css-loader": "^0.28.9",
-    "eslint": "^4.18.1",
-    "eslint-config-prettier": "^2.9.0",
-    "eslint-config-standard": "^11.0.0",
-    "eslint-config-standard-react": "^6.0.0",
-    "eslint-plugin-import": "^2.9.0",
-    "eslint-plugin-node": "^6.0.0",
-    "eslint-plugin-prettier": "^2.6.0",
-    "eslint-plugin-promise": "^3.6.0",
-    "eslint-plugin-react": "^7.7.0",
-    "eslint-plugin-standard": "^3.0.1",
-    "husky": "^0.14.3",
-    "lint-staged": "^7.0.0",
+    "babel-preset-react": "^6.24.1",
+    "babel-preset-stage-2": "^6.24.1",
+    "chokidar": "^1.6.1",
+    "create-styled-element": "^0.4.0",
+    "glamor": "^2.20.24",
+    "glamorous": "^3.11.1",
+    "node-libs-browser": "^1.0.0",
     "outy": "^0.1.2",
-    "prettier": "^1.10.2",
-    "react": "^16.2.0",
-    "react-dom": "^16.2.0",
-    "react-portal": "^4.1.2",
+    "parcel-bundler": "^1.6.2",
+    "react": "15.3.2",
+    "react-dom": "15.3.2",
+    "react-measure": "^1.4.6",
+    "react-motion-ui-pack": "^0.10.2",
+    "react-portal": "^4.1.4",
     "react-transition-group": "^2.2.1",
-    "rimraf": "^2.6.2",
-    "style-loader": "^0.20.2",
-    "webpack": "^3.11.0",
-    "webpack-dev-server": "^2.11.1"
+    "react-travel": "^1.3.0",
+    "rollup": "^0.57.1",
+    "rollup-plugin-babel": "^3.0.3",
+    "rollup-plugin-commonjs": "^9.1.0",
+    "rollup-plugin-node-globals": "^1.2.0",
+    "rollup-plugin-node-resolve": "^3.3.0",
+    "rollup-plugin-replace": "^2.0.0",
+    "velocity-react": "^1.2.2"
   }
 }

README.md

@@ -42,3 +42,3 @@ ## React Popper
 
-## Usage w/ child function
+## Usage with child function
 
@@ -81,2 +81,45 @@ This is a useful way to interact with custom components. Just make sure you pass down the refs properly.
 
+## Usage without Manager
+
+It's generally easiest to let the `Manager` and `Target` components handle passing the target DOM element to the `Popper` component. However, you can pass a target [Element](https://developer.mozilla.org/en-US/docs/Web/API/Element) or a [referenceObject](https://popper.js.org/popper-documentation.html#referenceObject) directly into `Popper` if you need to.
+
+Handling DOM Elements from React can be complicated. The `Manager` and `Target` components handle these complexities for you, so their use is strongly recommended when using DOM Elements.
+
+```js
+import { PureComonent } from 'react'
+import { Popper, Arrow } from 'react-popper'
+
+class StandaloneExample extends PureComponent {
+  state = {
+    isOpen: false,
+  }
+
+  handleClick() = () => {
+    this.setState(prevState => ({
+      isOpen: !prevState.isOpen
+    }))
+  }
+
+  render() {
+    return (
+      <div>
+        <div
+          ref={(div) => this.target = div}
+          style={{ width: 120, height: 120, background: '#b4da55' }}
+          onClick={this.handleClick}
+        >
+          Click {this.state.isOpen ? 'to hide' : 'to show'} popper
+        </div>
+        {this.state.isOpen && (
+          <Popper className="popper" target={this.target}>
+            Popper Content
+            <Arrow className="popper__arrow"/>
+          </Popper>
+        )}
+      </div>
+    )
+  }
+}
+```
+
 ## `Shared Props`
@@ -129,3 +172,3 @@
 
-Each `Popper` must be wrapped in a `Manager`, and each `Manager` can wrap multiple `Popper` components.
+Each `Popper` must either be wrapped in a `Manager`, or passed a `target` prop directly. Each `Manager` can wrap multiple `Popper` components.
 
@@ -135,2 +178,3 @@ #### `placement`: PropTypes.oneOf(Popper.placements)
 #### `modifiers`: PropTypes.object
+#### `target`: PropTypes.oneOfType([PropTypes.instanceOf(Element), Popper.referenceObject])
 
@@ -137,0 +181,0 @@ Passes respective options to a new [Popper instance](https://github.com/FezVrasta/popper.js/blob/master/docs/_includes/popper-documentation.md#new-popperreference-popper-options). As for `onCreate` and `onUpdate`, these callbacks were intentionally left out in favor of using the [component lifecycle methods](https://facebook.github.io/react/docs/react-component.html#the-component-lifecycle). If you have a good use case for these please feel free to file and issue and I will consider adding them in.

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

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

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

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Uses eval

Supply chain risk

Package uses eval() which is a dangerous function. This prevents the code from running in certain environments and increases the risk that the code may contain exploits or malicious behavior.

Found 2 instances in 1 package

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Improved metrics

Dev dependency count

29

decreased by-12.12%

Number of low quality alerts

1

decreased by-50%

Number of lines in readme file

239

increased by22.56%

Number of medium supply chain risk alerts

1

decreased by-80%

Worsened metrics

Total package byte prevSize

63557

decreased by-63.94%

Number of package files

11

decreased by-21.43%

Lines of code

1205

decreased by-63.63%

Number of low supply chain risk alerts

4

increased byInfinity%

Dependency changes

• Updatedpopper.js@^1.14.1

• Updatedprop-types@^15.6.1