UIP-1802 CSS Transition Timeout/Warning

lib/src/component/abstract_transition.dart

@@ -123,6 +123,9 @@ abstract class AbstractTransitionComponent<T extends AbstractTransitionProps, S
   /// Whether the Element returned by [getTransitionDomNode] will have a transition event.
   bool get hasTransition => true;
 
+  /// The duration that can elapse before a transition timeout occurs.
+  Duration get transitionTimeout => const Duration(seconds: 1);
+
   // --------------------------------------------------------------------------
   // Private Utility Methods
   // --------------------------------------------------------------------------
@@ -184,7 +187,16 @@ abstract class AbstractTransitionComponent<T extends AbstractTransitionProps, S
       skipCount = 0;
     }
 
+    var timer = new Timer(transitionTimeout, () {
+      assert(ValidationUtil.warn(
+        'The number of transitions expected to complete have not completed. Something is most likely wrong.'
+      ));
+
+      complete();
+    });
+
     _endTransitionSubscription = getTransitionDomNode()?.onTransitionEnd?.skip(skipCount)?.take(1)?.listen((_) {
+      timer.cancel();
       complete();
     });
   }

test/over_react/component/abstract_transition_test.dart

@@ -413,6 +413,33 @@ main() {
         });
       }, testOn: '!js');
     });
+
+    test('times out after the duration specified in timeoutDuration has elapsed', () async {
+      startRecordingValidationWarnings();
+
+      var renderedInstance = render(Transitioner()
+        ..transitionCount = 1
+        ..transitionTimeout = const Duration(seconds: 0)
+      );
+
+      TransitionerComponent transitioner = getDartComponent(renderedInstance);
+
+      expect(transitioner.state.transitionPhase, TransitionPhase.SHOWN);
+
+      transitioner.hide();
+
+      expect(transitioner.state.transitionPhase, TransitionPhase.HIDING);
+
+      await new Future.delayed(Duration.ZERO);
+
+      expect(transitioner.state.transitionPhase, TransitionPhase.HIDDEN);
+
+      verifyValidationWarning(
+        'The number of transitions expected to complete have not completed. Something is most likely wrong.'
+      );
+
+      stopRecordingValidationWarnings();
+    });
   });
 }
 
@@ -432,6 +459,8 @@ class TransitionerProps extends AbstractTransitionProps {
 
   bool hasTransition;
   bool initiallyShown;
+
+  Duration transitionTimeout;
 }
 
 @State()
@@ -444,6 +473,7 @@ class TransitionerComponent extends AbstractTransitionComponent<TransitionerProp
     ..addProps(super.getDefaultProps())
     ..hasTransition = true
     ..initiallyShown = true
+    ..transitionTimeout = const Duration(seconds: 1)
   );
 
 
@@ -456,6 +486,9 @@ class TransitionerComponent extends AbstractTransitionComponent<TransitionerProp
   @override
   bool get hasTransition => props.hasTransition;
 
+  @override
+  Duration get transitionTimeout => props.transitionTimeout;
+
   @override
   render() {
     return Dom.div()();