feat(modal): add a .close() function to smoothly animate modal away i…

…nstead of unmounting

Use a ref passed to the Modal to get access to the function, and use like: modalRef.current.close()

package.json

@@ -28,7 +28,7 @@
     "@babel/preset-react": "^7.9.4",
     "@babel/preset-typescript": "^7.9.0",
     "@juggle/resize-observer": "^3.1.3",
-    "@react-spring/web": "^9.2.4",
+    "@react-spring/web": "^9.4.5",
     "@semantic-release/changelog": "^5.0.1",
     "@semantic-release/git": "^9.0.0",
     "@storybook/addon-a11y": "^6.5.9",
@@ -55,7 +55,7 @@
     "@typescript-eslint/eslint-plugin": "^3.0.0",
     "@typescript-eslint/parser": "^3.0.0",
     "babel-loader": "^8.1.0",
-    "commitizen": "^4.1.2",
+    "commitizen": "^4.2.4",
     "css-loader": "^3.5.3",
     "cz-conventional-changelog": "3.2.0",
     "eslint": "^7.0.0",
@@ -97,6 +97,7 @@
     "@mdi/js": "^5.9.55",
     "@mdi/react": "^1.4.0",
     "@react-stately/toggle": "^3.2.3",
+    "detect-gpu": "^4.0.27",
     "fuse.js": "^6.4.6",
     "lodash.debounce": "^4.0.8",
     "polished": "^4.1.1",

src/components/Modal/Modal.stories.tsx

@@ -1,9 +1,9 @@
-import React, { useState } from 'react';
+import React, { useCallback, useRef, useState } from 'react';
 import styled from 'styled-components';
 import { Story, Meta } from '@storybook/react';
 
 import colors from '../../enums/colors';
-import Modal, { ModalProps } from './Modal';
+import Modal, { ModalProps, ModalApi } from './Modal';
 import Button from '../Button/Button';
 import Card from '../Card';
 import { withFoundryContext } from '../../../.storybook/decorators';
@@ -38,6 +38,14 @@ export const Default: Story<DefaultProps> = ({
     onClose();
   };
 
+  const modalRef = useRef<ModalApi>();
+
+  const customCloseButtonClick = useCallback(() => {
+    if (modalRef.current) {
+      modalRef.current.close();
+    }
+  }, [modalRef]);
+
   return (
     <Background>
       <Card elevation={1} header="Use this button to open the modal again">
@@ -55,11 +63,12 @@ export const Default: Story<DefaultProps> = ({
           backgroundBlur={`${backgroundBlur}rem`}
           onClickOutside={onClickOutside ? handleClose : undefined}
           onClose={handleClose}
+          ref={modalRef}
         >
           <Card
             header="Hello world!"
             footer={
-              <Button color={colors.primaryDark} onClick={handleClose}>
+              <Button color={colors.primaryDark} onClick={customCloseButtonClick}>
                 Okay...
               </Button>
             }