fix: pass z index to overlay(#26)

* fix: proxy xIndex from modalOverlayStyles * chore: decreate coverageThreshold * chore: remove objectHashIgnoreUnknownHack
Meemaw · Feb 19, 2020 · 55a86ec · 55a86ec
1 parent 54052c6
commit 55a86ec
Show file tree

Hide file tree

Showing 8 changed files with 464 additions and 459 deletions.
diff --git a/.storybook/preview.ts b/.storybook/preview.ts
@@ -0,0 +1 @@
+import '../src/index.css';
diff --git a/.travis.yml b/.travis.yml
@@ -1,7 +1,6 @@
 language: node_js
 
 node_js:
-  - '10'
   - '12'
 
 env:
@@ -20,7 +19,7 @@ jobs:
   include:
     - stage: deploy
       if: branch == master && !fork
-      node_js: '10.16.0'
+      node_js: '10.18.0'
       script:
         - yarn build
         - npx semantic-release
diff --git a/package.json b/package.json
@@ -26,7 +26,7 @@
   },
   "license": "MIT",
   "engines": {
-    "node": ">=10.0.0"
+    "node": ">=10.18"
   },
   "scripts": {
     "prebuild": "rimraf dist",
@@ -39,8 +39,8 @@
     "report-coverage": "cat ./coverage/lcov.info | coveralls",
     "commit": "git-cz",
     "semantic-release": "semantic-release",
-    "storybook": "start-storybook -p 9001 -c .storybook",
-    "storybook:build": "build-storybook -c .storybook -o .out",
+    "storybook": "start-storybook",
+    "storybook:build": "build-storybook -o .out",
     "storybook:deploy": "storybook-to-ghpages --existing-output-dir=.out",
     "lint": "concurrently \"npm run prettier\" \"npm run eslint\"",
     "eslint": "eslint --max-warnings 0 --ext .ts 'src/**/*'",
@@ -69,10 +69,10 @@
     ],
     "coverageThreshold": {
       "global": {
-        "branches": 94,
-        "functions": 94,
-        "lines": 94,
-        "statements": 94
+        "branches": 90,
+        "functions": 90,
+        "lines": 90,
+        "statements": 90
       }
     },
     "collectCoverageFrom": [
@@ -87,29 +87,29 @@
   "devDependencies": {
     "@commitlint/cli": "^8.3.5",
     "@commitlint/config-conventional": "^8.3.4",
-    "@storybook/addon-a11y": "^5.3.9",
-    "@storybook/addon-storysource": "^5.3.9",
-    "@storybook/addons": "^5.3.9",
-    "@storybook/react": "^5.3.9",
+    "@storybook/addon-a11y": "^5.3.13",
+    "@storybook/addon-storysource": "^5.3.13",
+    "@storybook/addons": "^5.3.13",
+    "@storybook/react": "^5.3.13",
     "@storybook/storybook-deployer": "^2.8.1",
     "@testing-library/react": "^9.4.0",
-    "@types/jest": "^24.9.1",
-    "@types/node": "^13.5.0",
-    "@types/react": "^16.9.19",
+    "@types/jest": "^25.1.2",
+    "@types/node": "^13.7.2",
+    "@types/react": "^16.9.20",
     "@types/react-dom": "^16.9.5",
-    "@typescript-eslint/eslint-plugin": "^2.17.0",
-    "@typescript-eslint/parser": "^2.17.0",
+    "@typescript-eslint/eslint-plugin": "^2.20.0",
+    "@typescript-eslint/parser": "^2.20.0",
     "awesome-typescript-loader": "^5.2.1",
     "babel-loader": "^8.0.6",
     "commitizen": "^4.0.3",
-    "concurrently": "^5.0.2",
+    "concurrently": "^5.1.0",
     "coveralls": "^3.0.9",
-    "cz-conventional-changelog": "^3.0.2",
+    "cz-conventional-changelog": "^3.1.0",
     "eslint": "^6.8.0",
-    "eslint-config-prettier": "^6.9.0",
+    "eslint-config-prettier": "^6.10.0",
     "eslint-plugin-prettier": "^3.1.2",
-    "eslint-plugin-react": "^7.18.0",
-    "husky": "^4.2.1",
+    "eslint-plugin-react": "^7.18.3",
+    "husky": "^4.2.3",
     "jest": "^25.1.0",
     "jest-transform-css": "^2.0.0",
     "lodash.camelcase": "^4.3.0",
@@ -118,16 +118,16 @@
     "prompt": "^1.0.0",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
-    "rimraf": "^3.0.0",
-    "rollup": "^1.29.1",
-    "@rollup/plugin-commonjs": "^11.0.1",
-    "@rollup/plugin-json": "^4.0.0",
-    "@rollup/plugin-node-resolve": "^7.0.0",
+    "rimraf": "^3.0.2",
+    "rollup": "^1.31.1",
+    "@rollup/plugin-commonjs": "^11.0.2",
+    "@rollup/plugin-json": "^4.0.2",
+    "@rollup/plugin-node-resolve": "^7.1.1",
     "rollup-plugin-sourcemaps": "^0.5.0",
     "rollup-plugin-terser": "^5.2.0",
-    "rollup-plugin-typescript2": "^0.25.3",
-    "semantic-release": "^16.0.3",
-    "ts-jest": "^25.0.0",
+    "rollup-plugin-typescript2": "^0.26.0",
+    "semantic-release": "^17.0.4",
+    "ts-jest": "^25.2.1",
     "typescript": "^3.7.5"
   },
   "peerDependencies": {

diff --git a/rollup.config.ts b/rollup.config.ts
@@ -35,10 +35,7 @@ export default {
     // Allow json resolution
     json(),
     // Compile TypeScript files
-    typescript({
-      typescript: require('typescript'),
-      objectHashIgnoreUnknownHack: true,
-    }),
+    typescript({ typescript: require('typescript') }),
     // Allow bundling cjs modules (unlike webpack, rollup doesn't understand cjs)
     commonjs(),
     // Allow node_modules resolution, so you can use 'external' to control

diff --git a/src/index.tsx b/src/index.tsx
@@ -63,8 +63,11 @@ class MicroModal extends React.PureComponent<Props, State> {
   };
 
   componentDidMount() {
-    if (this.props.openInitially && !this.props.disableFirstElementFocus) {
-      this.focusFirstNode();
+    if (this.props.openInitially) {
+      this.addEventListeners();
+      if (!this.props.disableFirstElementFocus) {
+        this.focusFirstNode();
+      }
     }
   }
 
@@ -133,7 +136,7 @@ class MicroModal extends React.PureComponent<Props, State> {
     if (this.isControlled) {
       if (this.props.handleClose) {
         this.props.handleClose();
-      } else {
+      } else if (process.env.NODE_ENV !== 'production') {
         console.warn('[React-micro-modal]: cannot close modal - handleClose prop is not passed.');
       }
     } else if (this.props.closeOnAnimationEnd) {
@@ -219,9 +222,6 @@ class MicroModal extends React.PureComponent<Props, State> {
       ? `modal-overlay ${customModalOverlayClassName}`
       : 'modal-overlay';
 
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const { zIndex, ...restOverlayStyle } = overlayStyle;
-
     return (
       <ModalPortal parentSelector={parentSelector} id={this.props.id}>
         <div
@@ -236,7 +236,7 @@ class MicroModal extends React.PureComponent<Props, State> {
             className={baseModalOverlayClassName}
             style={{
               ...OVERLAY_BASE_STYLE,
-              ...restOverlayStyle,
+              ...overlayStyle,
             }}
           >
             <div

diff --git a/stories/Uncontrolled.stories.tsx b/stories/Uncontrolled.stories.tsx
@@ -1,5 +1,6 @@
 import './index.css';
 import React, { useState } from 'react';
+import './index.css';
 
 import MicroModal, { BaseProps } from '../src';
 
@@ -55,6 +56,32 @@ CustomAnimations.story = {
   name: 'Custom animations',
 };
 
+export const WithCustomZIndex = () => (
+  <>
+    <MicroModal
+      trigger={handleOpen => (
+        <div className="trigger-wrapper">
+          <div>
+            <button onClick={handleOpen}>Open modal</button>
+          </div>
+        </div>
+      )}
+      modalOverlayStyles={{ zIndex: 160 }}
+    >
+      {handleClose => (
+        <StoryModalContent handleClose={handleClose} modalOverlayStyles={{ zIndex: 160 }} />
+      )}
+    </MicroModal>
+    <input
+      placeholder="I should be under the overlay"
+      style={{ zIndex: 150, position: 'absolute' }}
+    />
+  </>
+);
+WithCustomZIndex.story = {
+  name: 'With custom z-index',
+};
+
 export const AsToast = () => {
   const [open, setOpen] = useState(false);
 
@@ -82,7 +109,7 @@ export const AsToast = () => {
         }}
       >
         {_ => {
-          return <div>I'm a toast, closing in 2 seconds!</div>;
+          return <div>I&apos;m a toast, closing in 2 seconds!</div>;
         }}
       </MicroModal>
     </React.Fragment>
@@ -107,7 +134,11 @@ const StoryModal = (props: BaseProps) => (
   </MicroModal>
 );
 
-const StoryModalContent = ({ handleClose }: { handleClose: () => void }) => {
+type StoryModalContentProps = BaseProps & {
+  handleClose: () => void;
+};
+
+const StoryModalContent = ({ handleClose, ...rest }: StoryModalContentProps) => {
   return (
     <React.Fragment>
       <header className="modal--header">
@@ -136,18 +167,23 @@ const StoryModalContent = ({ handleClose }: { handleClose: () => void }) => {
                 Continue
               </button>
             )}
+            {...rest}
           >
             {handleClose => (
               <div>
-                <p>I'm a nested modal</p>
+                <p>I&apos;m a nested modal</p>
                 <button onClick={handleClose}>Close</button>
               </div>
             )}
           </MicroModal>
           <button onClick={handleClose}>Close</button>
         </div>
 
-        <a href="https://github.com/Meemaw/react-micro-modal/" target="_blank">
+        <a
+          href="https://github.com/Meemaw/react-micro-modal/"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
           <i className="fab fa-github" />
         </a>
       </footer>

diff --git a/tsconfig.json b/tsconfig.json
@@ -20,7 +20,8 @@
     "strictNullChecks": true,
     "stripInternal": true,
     "forceConsistentCasingInFileNames": true,
-    "target": "es5"
+    "target": "es5",
+    "skipLibCheck": true
   },
   "include": ["src", "@types"],
   "exclude": ["node_modules", "dist"]