fix framer-motion

scality · Sep 12, 2023 · 8433c43 · 8433c43
1 parent 1b6225c
commit 8433c43
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 40 deletions.
diff --git a/package.json b/package.json
@@ -102,7 +102,6 @@
     "@fortawesome/free-solid-svg-icons": "^5.15.3",
     "@fortawesome/react-fontawesome": "^0.1.14",
     "@js-temporal/polyfill": "^0.4.3",
-    "framer-motion": "^5.6.0",
     "polished": "3.4.1",
     "pretty-bytes": "^5.6.0",
     "react": "^17.0.2",

diff --git a/src/framer-motion.d.ts b/src/framer-motion.d.ts
@@ -0,0 +1,3 @@
+declare module 'framer-motion/dist/framer-motion' {
+  export * from 'framer-motion';
+}
diff --git a/src/lib/components/toast/Toast.component.tsx b/src/lib/components/toast/Toast.component.tsx
@@ -1,4 +1,4 @@
-import { AnimatePresence, motion } from 'framer-motion/dist/framer-motion';
+import { motion } from 'framer-motion/dist/framer-motion';
 import React, { useRef } from 'react';
 import { useTheme } from 'styled-components';
 import { Box } from '../box/Box';
@@ -144,45 +144,43 @@ function Toast({
         width,
       }}
     >
-      <AnimatePresence>
-        <motion.div
-          key="toast"
-          initial={{ opacity: 0, y: -20 }}
-          animate={{ opacity: 1, y: 0 }}
-          exit={{ opacity: 0, y: 20 }}
-          transition={{ duration: 0.3 }}
-          style={{
-            alignItems: 'flex-end',
-            backgroundColor: theme.backgroundLevel1,
-            borderColor: theme.border,
-            border: '1px solid',
-            display: 'flex',
-            borderRadius: '4px',
-            position: 'relative',
-          }}
-        >
-          <IconContainer bgColor={rgbBgColor}>{icon}</IconContainer>
-          <ContentContainer>
-            <BasicText>
-              {message}
-              <br />
-              {action}
-            </BasicText>
-          </ContentContainer>
-          <Box display="flex" alignItems="center" alignSelf="stretch">
-            <Button
-              icon={<Icon name="Close" size="lg" color="textSecondary" />}
-              onClick={params?.onClose}
-            />
-          </Box>
-        </motion.div>
-        {withProgressBar && (
-          <ToastProgressBar
-            duration={autoDismiss ? duration : null}
-            color={bgColor}
+      <motion.div
+        key="toast"
+        initial={{ opacity: 0, y: -20 }}
+        animate={{ opacity: 1, y: 0 }}
+        exit={{ opacity: 0, y: 20 }}
+        transition={{ duration: 0.3 }}
+        style={{
+          alignItems: 'flex-end',
+          backgroundColor: theme.backgroundLevel1,
+          borderColor: theme.border,
+          border: '1px solid',
+          display: 'flex',
+          borderRadius: '4px',
+          position: 'relative',
+        }}
+      >
+        <IconContainer bgColor={rgbBgColor}>{icon}</IconContainer>
+        <ContentContainer>
+          <BasicText>
+            {message}
+            <br />
+            {action}
+          </BasicText>
+        </ContentContainer>
+        <Box display="flex" alignItems="center" alignSelf="stretch">
+          <Button
+            icon={<Icon name="Close" size="lg" color="textSecondary" />}
+            onClick={params?.onClose}
           />
-        )}
-      </AnimatePresence>
+        </Box>
+      </motion.div>
+      {withProgressBar && (
+        <ToastProgressBar
+          duration={autoDismiss ? duration : null}
+          color={bgColor}
+        />
+      )}
     </div>
   );
 }