define Transition props

Author: LFDanLu

packages/@react-spectrum/overlays/package.json

@@ -48,6 +48,7 @@
     "@react-types/overlays": "^3.9.0",
     "@react-types/shared": "^3.31.0",
     "@swc/helpers": "^0.5.0",
+    "@types/react-transition-group": "^4.4.12",
     "react-transition-group": "^4.4.5"
   },
   "devDependencies": {

packages/@react-spectrum/overlays/src/OpenTransition.tsx

@@ -10,14 +10,19 @@
  * governing permissions and limitations under the License.
  */
 
-import React, {JSX, JSXElementConstructor, ReactElement} from 'react';
-import {Transition, TransitionProps} from 'react-transition-group';
+import React, {ComponentProps, JSX, JSXElementConstructor, ReactElement} from 'react';
+import {Transition} from 'react-transition-group';
 
 const OPEN_STATES = {
   entering: false,
   entered: true
 };
 
+type TransitionProps = ComponentProps<typeof Transition<HTMLElement>>
+interface OpenTransitionProps extends Omit<TransitionProps, 'children'> {
+  children: any
+}
+
 /**
  * Timeout issues adding css animations to enter may be related to
  * https://github.com/reactjs/react-transition-group/issues/189 or
@@ -32,16 +37,16 @@ const OPEN_STATES = {
  */
 
 export function OpenTransition(
-  props: TransitionProps
-): JSX.Element | ReactElement<any, string | JSXElementConstructor<any>>[] {
+  props: OpenTransitionProps
+): JSX.Element | ReactElement<any, string | JSXElementConstructor<any>>[]  {
   // Do not apply any transition if in chromatic.
   if (process.env.CHROMATIC) {
-    return React.Children.map(props.children, child => child && React.cloneElement(child, {isOpen: props.in}));
+    return React.Children.map(props.children, child => child && React.isValidElement(child) && React.cloneElement(child as any, {isOpen: props.in}));
   }
 
   return (
     <Transition timeout={{enter: 0, exit: 350}} {...props}>
-      {(state) => React.Children.map(props.children, child => child && React.cloneElement(child, {isOpen: !!OPEN_STATES[state]}))}
+      {(state) => React.Children.map(props.children, child => child && React.isValidElement(child) && React.cloneElement(child as any, {isOpen: !!OPEN_STATES[state]}))}
     </Transition>
   );
 }

yarn.lock

@@ -7260,6 +7260,7 @@ __metadata:
     "@react-types/overlays": "npm:^3.9.0"
     "@react-types/shared": "npm:^3.31.0"
     "@swc/helpers": "npm:^0.5.0"
+    "@types/react-transition-group": "npm:^4.4.12"
     react-transition-group: "npm:^4.4.5"
   peerDependencies:
     "@react-spectrum/provider": ^3.0.0
@@ -10597,6 +10598,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/react-transition-group@npm:^4.4.12":
+  version: 4.4.12
+  resolution: "@types/react-transition-group@npm:4.4.12"
+  peerDependencies:
+    "@types/react": "*"
+  checksum: 10c0/0441b8b47c69312c89ec0760ba477ba1a0808a10ceef8dc1c64b1013ed78517332c30f18681b0ec0b53542731f1ed015169fed1d127cc91222638ed955478ec7
+  languageName: node
+  linkType: hard
+
 "@types/react@npm:19.1.8":
   version: 19.1.8
   resolution: "@types/react@npm:19.1.8"