styled-react-modal - npm Package Compare versions

Comparing version 2.1.0 to 3.0.0-alpha

build/index.js

@@ -1,1 +0,1 @@
-module.exports=function(e){var t={};function r(n){if(t[n])return t[n].exports;var o=t[n]={i:n,l:!1,exports:{}};return e[n].call(o.exports,o,o.exports,r),o.l=!0,o.exports}return r.m=e,r.c=t,r.d=function(e,t,n){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)r.d(n,o,function(t){return e[t]}.bind(null,o));return n},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="",r(r.s=6)}([function(e,t){e.exports=require("react")},function(e,t,r){e.exports=r(4)()},function(e,t){e.exports=require("styled-components")},function(e,t){e.exports=require("react-dom")},function(e,t,r){"use strict";var n=r(5);function o(){}function a(){}a.resetWarningCache=o,e.exports=function(){function e(e,t,r,o,a,u){if(u!==n){var c=new Error("Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types");throw c.name="Invariant Violation",c}}function t(){return e}e.isRequired=e;var r={array:e,bool:e,func:e,number:e,object:e,string:e,symbol:e,any:e,arrayOf:t,element:e,elementType:e,instanceOf:t,node:e,objectOf:t,oneOf:t,oneOfType:t,shape:t,exact:t,checkPropTypes:a,resetWarningCache:o};return r.PropTypes=r,r}},function(e,t,r){"use strict";e.exports="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"},function(e,t,r){"use strict";r.r(t),r.d(t,"ModalProvider",(function(){return m})),r.d(t,"BaseModalBackground",(function(){return a}));var n=r(2),o=r.n(n),a=o.a.div.withConfig({displayName:"baseStyles__BaseModalBackground"})(["display:flex;position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:30;background-color:rgba(0,0,0,0.5);align-items:center;justify-content:center;"]),u=r(0),c=r.n(u),i=r(1),l=r.n(i),f=c.a.createContext({}),s=f.Provider,p=f.Consumer;function d(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){if("undefined"==typeof Symbol||!(Symbol.iterator in Object(e)))return;var r=[],n=!0,o=!1,a=void 0;try{for(var u,c=e[Symbol.iterator]();!(n=(u=c.next()).done)&&(r.push(u.value),!t||r.length!==t);n=!0);}catch(e){o=!0,a=e}finally{try{n||null==c.return||c.return()}finally{if(o)throw a}}return r}(e,t)||function(e,t){if(!e)return;if("string"==typeof e)return y(e,t);var r=Object.prototype.toString.call(e).slice(8,-1);"Object"===r&&e.constructor&&(r=e.constructor.name);if("Map"===r||"Set"===r)return Array.from(r);if("Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r))return y(e,t)}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function y(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=new Array(t);r<t;r++)n[r]=e[r];return n}function b(e){var t=e.backgroundComponent,r=e.children,n=Object(u.useRef)(null),o=d(Object(u.useState)(null),2),i=o[0],l=o[1],f=d(Object(u.useState)(a),2),p=f[0],y=f[1];return Object(u.useEffect)((function(){t&&y(t)}),[y,t]),Object(u.useEffect)((function(){l(n.current)}),[l,n]),c.a.createElement(s,{value:{modalNode:i,BackgroundComponent:p}},r,c.a.createElement("div",{ref:n}))}b.propTypes={backgroundComponent:l.a.oneOfType([l.a.element,l.a.object])};var m=b,v=r(3),O=r.n(v);function g(){return(g=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e}).apply(this,arguments)}function h(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){if("undefined"==typeof Symbol||!(Symbol.iterator in Object(e)))return;var r=[],n=!0,o=!1,a=void 0;try{for(var u,c=e[Symbol.iterator]();!(n=(u=c.next()).done)&&(r.push(u.value),!t||r.length!==t);n=!0);}catch(e){o=!0,a=e}finally{try{n||null==c.return||c.return()}finally{if(o)throw a}}return r}(e,t)||function(e,t){if(!e)return;if("string"==typeof e)return j(e,t);var r=Object.prototype.toString.call(e).slice(8,-1);"Object"===r&&e.constructor&&(r=e.constructor.name);if("Map"===r||"Set"===r)return Array.from(r);if("Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r))return j(e,t)}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function j(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=new Array(t);r<t;r++)n[r]=e[r];return n}function w(e,t){if(null==e)return{};var r,n,o=function(e,t){if(null==e)return{};var r,n,o={},a=Object.keys(e);for(n=0;n<a.length;n++)r=a[n],t.indexOf(r)>=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n<a.length;n++)r=a[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}function S(e){var t,r=e.WrapperComponent,n=e.children,o=e.onBackgroundClick,a=e.onEscapeKeydown,i=e.allowScroll,l=e.beforeOpen,f=e.afterOpen,s=e.beforeClose,d=e.afterClose,y=e.backgroundProps,b=e.isOpen,m=w(e,["WrapperComponent","children","onBackgroundClick","onEscapeKeydown","allowScroll","beforeOpen","afterOpen","beforeClose","afterClose","backgroundProps","isOpen"]),v=Object(u.useRef)(null),j=Object(u.useRef)(null),S=Object(u.useRef)(!1),C=h(Object(u.useState)(!1),2),E=C[0],k=C[1];function P(e){v.current===e.target&&o&&o(e)}return Object(u.useEffect)((function(){function e(e){if(e)try{e().then((function(){return k(b)}))}catch(e){k(b)}else k(b)}E!==b&&e(b?l:s)}),[S,E,k,b,l,s]),Object(u.useEffect)((function(){E?f&&f():S.current&&d&&d()}),[S,E,f,d]),Object(u.useEffect)((function(){function e(e){"Escape"===e.key&&a&&a(e)}return E&&document.addEventListener("keydown",e),function(){document.removeEventListener("keydown",e)}}),[E,a]),Object(u.useEffect)((function(){return E&&!i&&(j.current=document.body.style.overflow,document.body.style.overflow="hidden"),function(){i||(document.body.style.overflow=j.current||"")}}),[E,i]),Object(u.useEffect)((function(){S.current=!0}),[S]),t=r?c.a.createElement(r,m,n):n,c.a.createElement(p,null,(function(e){var r=e.modalNode,n=e.BackgroundComponent;return r&&n&&E?O.a.createPortal(c.a.createElement(n,g({},y,{onClick:P,ref:v}),t),r):null}))}S.styled=function(){for(var e=arguments.length,t=new Array(e),r=0;r<e;r++)t[r]=arguments[r];var n=t?o.a.div.withConfig({displayName:"Modal__wrap"}).apply(void 0,t):o.a.div.withConfig({displayName:"Modal__wrap"})();return function(e){return c.a.createElement(S,g({WrapperComponent:n},e))}},S.defaultProps={backgroundProps:{}},S.propTypes={WrapperComponent:l.a.oneOfType([l.a.element,l.a.object]),onBackgroundClick:l.a.func,onEscapeKeydown:l.a.func,allowScroll:l.a.bool,beforeOpen:l.a.func,afterOpen:l.a.func,beforeClose:l.a.func,afterClose:l.a.func,backgroundProps:l.a.object,isOpen:l.a.bool};var C=S;t.default=C}]);
+!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports,require("styled-components"),require("react"),require("react-dom")):"function"==typeof define&&define.amd?define(["exports","styled-components","react","react-dom"],n):n((e="undefined"!=typeof globalThis?globalThis:e||self)["styled-react-modal"]={},e.styled,e.React,e.ReactDOM)}(this,(function(e,n,t,r){"use strict";function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var a=o(n),u=o(t),c=o(r),l=a.default.div.withConfig({displayName:"baseStyles__BaseModalBackground"})(["display:flex;position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:30;background-color:rgba(0,0,0,0.5);align-items:center;justify-content:center;"]);var f=function(e){if(Array.isArray(e))return e};var i=function(e,n){if("undefined"!=typeof Symbol&&Symbol.iterator in Object(e)){var t=[],r=!0,o=!1,a=void 0;try{for(var u,c=e[Symbol.iterator]();!(r=(u=c.next()).done)&&(t.push(u.value),!n||t.length!==n);r=!0);}catch(e){o=!0,a=e}finally{try{r||null==c.return||c.return()}finally{if(o)throw a}}return t}};var p=function(e,n){(null==n||n>e.length)&&(n=e.length);for(var t=0,r=new Array(n);t<n;t++)r[t]=e[t];return r};var s=function(e,n){if(e){if("string"==typeof e)return p(e,n);var t=Object.prototype.toString.call(e).slice(8,-1);return"Object"===t&&e.constructor&&(t=e.constructor.name),"Map"===t||"Set"===t?Array.from(t):"Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t)?p(e,n):void 0}};var d=function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")};var y=function(e,n){return f(e)||i(e,n)||s(e,n)||d()};function m(e,n){return e(n={exports:{}},n.exports),n.exports}function v(){}function b(){}b.resetWarningCache=v;var g=m((function(e){e.exports=function(){function e(e,n,t,r,o,a){if("SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"!==a){var u=new Error("Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types");throw u.name="Invariant Violation",u}}function n(){return e}e.isRequired=e;var t={array:e,bool:e,func:e,number:e,object:e,string:e,symbol:e,any:e,arrayOf:n,element:e,elementType:e,instanceOf:n,node:e,objectOf:n,oneOf:n,oneOfType:n,shape:n,exact:n,checkPropTypes:b,resetWarningCache:v};return t.PropTypes=t,t}()})),h=u.default.createContext({}),O=h.Provider,w=h.Consumer;function C(e){var n=e.backgroundComponent,r=e.children,o=t.useRef(null),a=t.useState(null),c=y(a,2),f=c[0],i=c[1],p=t.useState(l),s=y(p,2),d=s[0],m=s[1];return t.useEffect((function(){n&&m(n)}),[m,n]),t.useEffect((function(){i(o.current)}),[i,o]),u.default.createElement(O,{value:{modalNode:f,BackgroundComponent:d}},r,u.default.createElement("div",{ref:o}))}C.propTypes={backgroundComponent:g.oneOfType([g.element,g.object])};var k=m((function(e){function n(){return e.exports=n=Object.assign||function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r])}return e},n.apply(this,arguments)}e.exports=n}));var E=function(e,n){if(null==e)return{};var t,r,o={},a=Object.keys(e);for(r=0;r<a.length;r++)t=a[r],n.indexOf(t)>=0||(o[t]=e[t]);return o};var j=function(e,n){if(null==e)return{};var t,r,o=E(e,n);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r<a.length;r++)t=a[r],n.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(o[t]=e[t])}return o};function S(e){for(var n=arguments.length,t=new Array(n>1?n-1:0),r=1;r<n;r++)t[r-1]=arguments[r];e&&e.apply(void 0,t)}function P(e){var n,r=e.WrapperComponent,o=e.children,a=e.onBackgroundClick,l=e.onEscapeKeydown,f=e.allowScroll,i=e.beforeOpen,p=e.afterOpen,s=e.beforeClose,d=e.afterClose,m=e.backgroundProps,v=e.isOpen,b=j(e,["WrapperComponent","children","onBackgroundClick","onEscapeKeydown","allowScroll","beforeOpen","afterOpen","beforeClose","afterClose","backgroundProps","isOpen"]),g=t.useRef(null),h=t.useRef(null),O=t.useRef(!1),C=t.useState(!1),E=y(C,2),P=E[0],x=E[1];function T(e){g.current===e.target&&a&&a(e)}return t.useEffect((function(){function e(e){x(e),S(e?p:d)}function n(n){if(n){var t=n();"function"==typeof(null==t?void 0:t.then)?(O.current=!0,t.then((function(){e(v),O.current=!1}))):e(v)}else e(v)}P===v||O.current||n(v?i:s)}),[O,P,v,i,s,d,p]),t.useEffect((function(){function e(e){"Escape"===e.key&&l&&l(e)}return P&&document.addEventListener("keydown",e),function(){document.removeEventListener("keydown",e)}}),[P,l]),t.useEffect((function(){return P&&!f&&(h.current=document.body.style.overflow,document.body.style.overflow="hidden"),function(){f||(document.body.style.overflow=h.current||"")}}),[P,f]),n=r?u.default.createElement(r,b,o):o,u.default.createElement(w,null,(function(e){var t=e.modalNode,r=e.BackgroundComponent;return t&&r&&P?c.default.createPortal(u.default.createElement(r,k({},m,{onClick:T,ref:g}),n),t):null}))}P.styled=function(){for(var e=arguments.length,n=new Array(e),t=0;t<e;t++)n[t]=arguments[t];var r=n?a.default.div.withConfig({displayName:"Modal__wrap"}).apply(void 0,n):a.default.div.withConfig({displayName:"Modal__wrap"})();return function(e){return u.default.createElement(P,k({WrapperComponent:r},e))}},P.defaultProps={backgroundProps:{}},P.propTypes={WrapperComponent:g.oneOfType([g.element,g.object]),onBackgroundClick:g.func,onEscapeKeydown:g.func,allowScroll:g.bool,beforeOpen:g.func,afterOpen:g.func,beforeClose:g.func,afterClose:g.func,backgroundProps:g.object,isOpen:g.bool},e.BaseModalBackground=l,e.ModalProvider=C,e.default=P,Object.defineProperty(e,"__esModule",{value:!0})}));

package.json

 {
   "name": "styled-react-modal",
-  "version": "2.1.0",
+  "version": "3.0.0-alpha",
   "description": "A React modal built with styled-components.",
   "main": "build/index.js",
+  "module": "build/index.mjs",
   "scripts": {
     "test": "jest --coverage --verbose",
-    "lint": "prettier src/ tests/ examples/",
-    "start": "webpack --watch",
-    "build": "webpack"
+    "lint": "prettier src/ tests/",
+    "build": "rollup -c rollup.config.js"
   },
@@ -40,4 +40,8 @@ "repository": {
     "@babel/core": "^7.9.0",
+    "@babel/plugin-transform-runtime": "^7.16.5",
     "@babel/preset-env": "^7.9.0",
     "@babel/preset-react": "^7.9.4",
+    "@rollup/plugin-babel": "^5.3.0",
+    "@rollup/plugin-node-resolve": "^13.1.1",
+    "@rollup/plugin-replace": "^3.0.1",
     "@testing-library/dom": "^7.2.0",
@@ -48,3 +52,2 @@ "@testing-library/jest-dom": "^5.3.0",
     "babel-jest": "^25.2.6",
-    "babel-loader": "^8.1.0",
     "babel-plugin-styled-components": "^1.10.7",
@@ -62,5 +65,6 @@ "babel-plugin-transform-object-rest-spread": "^6.26.0",
     "react-test-renderer": "^16.13.1",
-    "styled-components": "^5.0.1",
-    "webpack": "^4.42.1",
-    "webpack-cli": "^3.3.11"
+    "rollup": "^2.61.1",
+    "rollup-plugin-commonjs": "^10.1.0",
+    "rollup-plugin-terser": "^7.0.2",
+    "styled-components": "^5.0.1"
   },
@@ -67,0 +71,0 @@ "resolutions": {

src/index.jsx

@@ -1,6 +0,5 @@
-import { BaseModalBackground } from './baseStyles'
-import ModalProvider from './ModalProvider'
-import Modal from './Modal'
+import { BaseModalBackground } from "./baseStyles";
+import ModalProvider from "./ModalProvider";
+import Modal from "./Modal";
 
-export { ModalProvider, BaseModalBackground }
-export default Modal
+export { Modal as default, ModalProvider, BaseModalBackground };

src/Modal.jsx

@@ -7,2 +7,6 @@ import React, { useState, useRef, useEffect } from "react";
 
+function callIfDefined(fun, ...args) {
+  fun && fun(...args);
+}
+
 function Modal({
@@ -24,21 +28,33 @@ WrapperComponent,
   const prevBodyOverflowStyle = useRef(null);
-  const isMounted = useRef(false);
+  const isTransitioning = useRef(false);
 
   const [isOpen, setIsOpen] = useState(false);
 
-  // Handle changing isOpen state and *before* isOpen change callbacks
+  // Handle opening and closing
   useEffect(() => {
+    function handleIsOpenChange(value) {
+      setIsOpen(value);
+      value ? callIfDefined(afterOpen) : callIfDefined(afterClose);
+    }
+
     function handleChange(callback) {
       if (callback) {
-        try {
-          callback().then(() => setIsOpen(isOpenProp));
-        } catch (e) {
-          setIsOpen(isOpenProp);
+        const maybePromise = callback();
+        if (typeof maybePromise?.then === "function") {
+          isTransitioning.current = true;
+
+          maybePromise.then(() => {
+            handleIsOpenChange(isOpenProp);
+
+            isTransitioning.current = false;
+          });
+        } else {
+          handleIsOpenChange(isOpenProp);
         }
       } else {
-        setIsOpen(isOpenProp);
+        handleIsOpenChange(isOpenProp);
       }
     }
 
-    if (isOpen !== isOpenProp) {
+    if (isOpen !== isOpenProp && !isTransitioning.current) {
       if (isOpenProp) {
@@ -50,15 +66,12 @@ handleChange(beforeOpen);
     }
-  }, [isMounted, isOpen, setIsOpen, isOpenProp, beforeOpen, beforeClose]);
+  }, [
+    isTransitioning,
+    isOpen,
+    isOpenProp,
+    beforeOpen,
+    beforeClose,
+    afterClose,
+    afterOpen
+  ]);
 
-  // Handle *after* isOpen change callbacks
-  useEffect(() => {
-    if (isOpen) {
-      afterOpen && afterOpen();
-    } else {
-      // The isMounted bit prevents the afterClose from getting called
-      // on the initial mount
-      isMounted.current && afterClose && afterClose();
-    }
-  }, [isMounted, isOpen, afterOpen, afterClose]);
-
   // Handle Escape keydown
@@ -95,7 +108,2 @@ useEffect(() => {
 
-  // Keep track of whether the modal is mounted to prevent misfiring callbacks
-  useEffect(() => {
-    isMounted.current = true;
-  }, [isMounted]);
-
   function handleBackgroundClick(e) {
@@ -102,0 +110,0 @@ if (node.current === e.target) {

tests/Modal.test.jsx

 import "@testing-library/jest-dom/extend-expect";
 
 import React, { useState } from "react";
+import { act } from "react-dom/test-utils";
 import styled from "styled-components";
-import { render, fireEvent } from "@testing-library/react";
+import { render, fireEvent, waitFor } from "@testing-library/react";
 import Modal, { ModalProvider } from "../src";
@@ -82,2 +83,19 @@
 
+  it("calls beforeOpen() before it opens and waits to call afterOpen() if it returns a promise", async () => {
+    const spy = jest.fn(
+      () => new Promise((resolve) => setTimeout(act(resolve), 100))
+    );
+    const afterOpenSpy = jest.fn();
+    const sleeper = jest.fn();
+    const { getByTestId } = renderWithProvider({
+      beforeOpen: spy,
+      afterOpen: afterOpenSpy,
+      beforeClose: sleeper
+    });
+    fireEvent.click(getByTestId("button"));
+    expect(spy.mock.calls.length).toBe(1);
+    await waitFor(() => expect(afterOpenSpy.mock.calls.length).toBe(1));
+    expect(sleeper).not.toHaveBeenCalled();
+  });
+
   it("calls afterOpen() after it opens", () => {
@@ -108,2 +126,20 @@ const spy = jest.fn();
 
+  it("calls beforeClose() before it closes and waits to call afterClose() if it returns a promise", async () => {
+    const spy = jest.fn(
+      () => new Promise((resolve) => setTimeout(act(resolve), 100))
+    );
+    const afterCloseSpy = jest.fn();
+    const sleeper = jest.fn();
+    const { getByTestId } = renderWithProvider({
+      isOpen: true,
+      beforeClose: spy,
+      afterClose: afterCloseSpy,
+      beforeOpen: sleeper
+    });
+    fireEvent.click(getByTestId("button"));
+    expect(spy.mock.calls.length).toBe(1);
+    await waitFor(() => expect(afterCloseSpy.mock.calls.length).toBe(1));
+    expect(sleeper.mock.calls.length).toBe(1);
+  });
+
   it("calls afterClose() after it closes", () => {
@@ -124,3 +160,3 @@ const spy = jest.fn();
     const Background = styled.div`
-      background: ${props => props.color || "green"};
+      background: ${(props) => props.color || "green"};
     `;
@@ -127,0 +163,0 @@

New alerts

Explicitly Unlicensed Item

License

(Experimental) Something was found which is explicitly marked as unlicensed.

Found 1 instance 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

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Fixed alerts

Explicitly Unlicensed Item

License

(Experimental) Something was found which is explicitly marked as unlicensed.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

35149

13.75%

Lines of code

464

10.74%

Worsened metrics

Dev dependency count

28

16.67%

Number of low quality alerts

3

200%

No dependency changes