- Added support for React 18

- Made sure no extra space is created when flyout is closed

CHANGELOG.md

@@ -6,6 +6,15 @@ and this project adheres to [Semantic Versioning](https://semver.org/).
 
 ## [Unreleased]
 
+## v6.3.1 - 2022-01-24
+
+### Added
+- Added support for React 18
+
+### Fixed
+- Made sure no extra space is created when flyout is closed
+
+
 ## v6.3.1 - 2022-01-24
 
 ### Fixed

package.json

@@ -71,7 +71,7 @@
     "classnames": "~2.2.6",
     "moment": "^2.29.1",
     "react-input-mask": "^2.0.4",
-    "react-modal": "~3.5.1",
+    "react-modal": "~3.15.0",
     "rxjs": "^6.6.2"
   }
 }

packages/flyout/Readme.md

@@ -4,6 +4,6 @@ import Button from '../button/src/Button';
 <Flyout trigger={
   <Button type="primary">Click me!</Button>
   } hasPadding>
-  this is the flyout
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eu mauris arcu. In ut nulla metus. Cras ut commodo nunc. Nullam augue massa, semper eget pharetra quis, lacinia sit amet metus. Proin magna felis, dictum sed arcu non, maximus tempor massa. Sed id sem sed nisl fringilla volutpat sed eu elit. Donec nec mauris eu sem euismod porttitor eget et dui.
 </Flyout>
 ```

packages/flyout/rollup.config.js

@@ -1,8 +1,7 @@
-
-
 import resolve from '@rollup/plugin-node-resolve';
 import babel from '@rollup/plugin-babel';
 import pkg from './package.json';
+import sass from 'rollup-plugin-sass';
 
 export default {
 	input: 'src/index.js',
@@ -12,6 +11,7 @@ export default {
 	],
 	plugins: [
 		resolve(),
+    sass({ insert: true }),
 		babel({
       babelHelpers: 'bundled',
 			exclude: ['node_modules/**'],

packages/flyout/src/Flyout.js

@@ -4,6 +4,8 @@ import ReactDOM from 'react-dom';
 
 import FlyoutContent from '../../flyout-button/src/FlyoutContent/FlyoutContent';
 
+import './Flyout.scss';
+
 const flyoutSizes = {
   small: 'sm',
   medium: 'md',

packages/flyout/src/Flyout.scss

@@ -0,0 +1,10 @@
+@import '~@a-ui/core/src/styles/_quarks';
+
+.m-flyout .m-flyout__content {
+  max-height: 0;
+  transition: visibility 0s ease-in-out .2s, opacity .2s ease-in-out, transform .2s ease-in-out, max-height .2s ease-in-out;
+}
+
+.m-flyout.is-open .m-flyout__content {
+  max-height: 1000000px;
+}