Simplify closeHandler in Dialog

src/components/feedback/Dialog.tsx

@@ -74,7 +74,7 @@ const DialogNext = function Dialog({
   // Forwarded to Panel
   buttons,
   icon,
-  onClose,
+  onClose = noop,
   paddingSize = 'md',
   scrollable = true,
   title,
@@ -87,12 +87,15 @@ const DialogNext = function Dialog({
   );
   const [transitionComponentVisible, setTransitionComponentVisible] =
     useState(false);
-  // If a TransitionComponent was provided, closing the Dialog should just set
-  // it to not visible. The TransitionComponent will take care of actually
-  // closing the dialog once the "out" transition has finished
-  const closeHandler = TransitionComponent
-    ? () => setTransitionComponentVisible(false)
-    : onClose ?? noop;
+
+  const closeHandler = useCallback(() => {
+    if (TransitionComponent) {
+      setTransitionComponentVisible(false);
+    } else {
+      onClose();
+    }
+  }, [onClose, TransitionComponent]);
+
   const setInitialFocus = useCallback(() => {
     if (initialFocus === 'manual') {
       return;
@@ -117,12 +120,13 @@ const DialogNext = function Dialog({
       modalRef.current?.focus();
     }
   }, [initialFocus, modalRef]);
+
   const onTransitionEnd = (direction: 'in' | 'out') => {
     if (direction === 'in') {
       // We can't check the initial focus until transition "in" has finished
       setInitialFocus();
     } else {
-      onClose?.();
+      onClose();
     }
   };