react-aria-modal - npm Package Compare versions

Comparing version 4.0.2 to 5.0.0

CHANGELOG.md

@@ -5,2 +5,8 @@ # Changelog
 
+## 5.0.0
+
+- Remove `react-displace` package from dependencies
+- Update `focus-trap-react` package to `v10.1.4`
+- Add support for React 18
+
 ## 4.0.2
@@ -7,0 +13,0 @@

dist/react-aria-modal.js

@@ -29,6 +29,6 @@ "use strict";
 
+var ReactDOM = require('react-dom');
+
 var FocusTrap = require('focus-trap-react');
 
-var displace = require('react-displace');
-
 var noScroll = require('no-scroll');
@@ -300,2 +300,69 @@
 
+function displace(WrappedComponent, options) {
+  if (!global.document) {
+    return function EmptyDisplace() {
+      return null;
+    };
+  }
+
+  options = options || {};
+
+  var Displaced = /*#__PURE__*/function (_React$Component2) {
+    _inherits(Displaced, _React$Component2);
+
+    var _super2 = _createSuper(Displaced);
+
+    function Displaced(props) {
+      var _this4;
+
+      _classCallCheck(this, Displaced);
+
+      _this4 = _super2.call(this, props);
+      _this4.state = {
+        container: null
+      };
+      return _this4;
+    }
+
+    _createClass(Displaced, [{
+      key: "componentDidMount",
+      value: function componentDidMount() {
+        var container;
+
+        if (options.renderTo) {
+          container = typeof options.renderTo === 'string' ? document.querySelector(options.renderTo) : options.renderTo;
+        } else {
+          container = document.createElement('div');
+          document.body.appendChild(container);
+        }
+
+        this.setState({
+          container: container
+        });
+      }
+    }, {
+      key: "componentWillUnmount",
+      value: function componentWillUnmount() {
+        if (!options.renderTo) {
+          this.state.container.parentNode.removeChild(this.state.container);
+        }
+      }
+    }, {
+      key: "render",
+      value: function render() {
+        if (this.state.container === null || !this.props.mounted) return null;
+        return ReactDOM.createPortal(React.createElement(WrappedComponent, this.props, this.props.children), this.state.container);
+      }
+    }]);
+
+    return Displaced;
+  }(React.Component);
+
+  _defineProperty(Displaced, "defaultProps", {
+    mounted: true
+  });
+
+  return Displaced;
+}
+
 var DisplacedModal = displace(Modal);
@@ -302,0 +369,0 @@

package.json

 {
   "name": "react-aria-modal",
-  "version": "4.0.2",
+  "version": "5.0.0",
   "description": "A fully accessible and flexible React modal built according WAI-ARIA Authoring Practices",
@@ -34,8 +34,8 @@ "main": "dist/react-aria-modal.js",
   "dependencies": {
-    "focus-trap-react": "^8.1.0",
-    "no-scroll": "^2.1.1",
-    "react-displace": "^2.3.0"
+    "focus-trap-react": "^10.1.4",
+    "no-scroll": "^2.1.1"
   },
   "peerDependencies": {
-    "react": ">= 15.0.0 < 18.0.0"
+    "react": ">=16.3.0",
+    "react-dom": ">=16.3.0"
   },
@@ -54,4 +54,4 @@ "devDependencies": {
     "prettier": "1.16.4",
-    "react": "^16.8.2",
-    "react-dom": "^16.8.2"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
@@ -58,0 +58,0 @@ "babel": {

src/react-aria-modal.js

 const React = require('react');
+const ReactDOM = require('react-dom');
 const FocusTrap = require('focus-trap-react');
-const displace = require('react-displace');
 const noScroll = require('no-scroll');
@@ -257,2 +257,56 @@
 
+function displace(WrappedComponent, options) {
+  if (!global.document) {
+    return function EmptyDisplace() {
+      return null;
+    };
+  }
+
+  options = options || {};
+
+  class Displaced extends React.Component {
+    static defaultProps = {
+      mounted: true
+    };
+
+    constructor(props) {
+      super(props);
+
+      this.state = {
+        container: null,
+      };
+    }
+
+    componentDidMount() {
+      let container;
+
+      if (options.renderTo) {
+        container = typeof options.renderTo === 'string' ? document.querySelector(options.renderTo) : options.renderTo;
+      } else {
+        container = document.createElement('div');
+        document.body.appendChild(container);
+      }
+
+      this.setState({ container });
+    }
+
+    componentWillUnmount() {
+      if (!options.renderTo) {
+        this.state.container.parentNode.removeChild(this.state.container);
+      }
+    }
+
+    render() {
+      if (this.state.container === null || !this.props.mounted) return null;
+
+      return ReactDOM.createPortal(
+        React.createElement(WrappedComponent, this.props, this.props.children),
+        this.state.container,
+      );
+    }
+  }
+
+  return Displaced;
+}
+
 const DisplacedModal = displace(Modal);
@@ -259,0 +313,0 @@

No alert changes

Improved metrics

Total package byte prevSize

47722

increased by6.63%

Lines of code

570

increased by20.25%

Dependency changes

• + Addedfocus-trap@7.5.4(transitive)

• + Addedfocus-trap-react@10.2.3(transitive)

• + Addedtabbable@6.2.0(transitive)

• - Removedreact-displace@^2.3.0

• - Removedfocus-trap@6.9.4(transitive)

• - Removedfocus-trap-react@8.11.3(transitive)

• - Removedreact@16.14.017.0.2(transitive)

• - Removedreact-displace@2.3.0(transitive)

• - Removedreact-dom@16.14.0(transitive)

• - Removedscheduler@0.19.1(transitive)

• - Removedtabbable@5.3.3(transitive)

• Updatedfocus-trap-react@^10.1.4