chore[DST-106]: remove transitions (#3226)

remove this

packages/components/package.json

@@ -30,9 +30,9 @@
     "@react-aria/accordion": "3.0.0-alpha.19",
     "@react-aria/autocomplete": "3.0.0-alpha.18",
     "@react-aria/button": "3.8.0",
+    "@react-aria/calendar": "3.4.0",
     "@react-aria/checkbox": "3.9.2",
     "@react-aria/combobox": "3.6.2",
-    "@react-aria/calendar": "3.4.0",
     "@react-aria/datepicker": "3.5.0",
     "@react-aria/dialog": "3.5.3",
     "@react-aria/focus": "3.13.0",
@@ -57,8 +57,8 @@
     "@react-aria/tooltip": "3.6.0",
     "@react-aria/utils": "3.18.0",
     "@react-aria/visually-hidden": "3.8.2",
-    "@react-stately/checkbox": "3.4.3",
     "@react-stately/calendar": "3.3.0",
+    "@react-stately/checkbox": "3.4.3",
     "@react-stately/collections": "3.9.0",
     "@react-stately/combobox": "3.5.2",
     "@react-stately/data": "^3.6.0",
@@ -84,8 +84,7 @@
     "@react-types/radio": "3.4.2",
     "@react-types/shared": "3.18.1",
     "@react-types/tooltip": "3.4.2",
-    "react-is": "18.2.0",
-    "react-transition-group": "4.4.5"
+    "react-is": "18.2.0"
   },
   "peerDependencies": {
     "react": "17.x || 18.x",
@@ -94,7 +93,6 @@
   "devDependencies": {
     "@marigold/tsconfig": "workspace:*",
     "@types/react": "18.2.14",
-    "@types/react-transition-group": "4.4.6",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "tsup": "6.7.0"

packages/components/src/Overlay/Overlay.tsx

@@ -1,5 +1,4 @@
 import React, { useRef } from 'react';
-import { Transition } from 'react-transition-group';
 
 import {
   Overlay as ReactAriaOverlay,
@@ -13,21 +12,6 @@ export interface OverlayProps {
   container?: ReactAriaOverlayProps['portalContainer'];
 }
 
-const duration = 300;
-
-const defaultStyle = {
-  transition: `opacity ${duration}ms ease-in-out`,
-  opacity: 0,
-};
-
-const transitionStyles = {
-  entering: { opacity: 1 },
-  entered: { opacity: 1 },
-  exiting: { opacity: 0 },
-  exited: { opacity: 0 },
-  unmounted: { opacity: 0 },
-};
-
 export const Overlay = ({ children, container, open }: OverlayProps) => {
   const nodeRef = useRef(null);
   const theme = useTheme();
@@ -41,21 +25,14 @@ export const Overlay = ({ children, container, open }: OverlayProps) => {
 
   return (
     <ReactAriaOverlay portalContainer={container}>
-      <Transition nodeRef={nodeRef} timeout={duration} in={open} appear>
-        {state => (
-          <div
-            ref={nodeRef}
-            data-testid="overlay"
-            data-theme={theme.name}
-            style={{
-              ...defaultStyle,
-              ...transitionStyles[state],
-            }}
-          >
-            {children}
-          </div>
-        )}
-      </Transition>
+      <div
+        ref={nodeRef}
+        data-testid="overlay"
+        data-theme={theme.name}
+        className="opacity-100"
+      >
+        {children}
+      </div>
     </ReactAriaOverlay>
   );
 };