From 733845a776e6257ec6d838ecdbc6a0925ef0cf30 Mon Sep 17 00:00:00 2001
From: Joan Perals <jotresse@amazon.com>
Date: Thu, 26 Oct 2023 11:53:55 +0200
Subject: [PATCH] fix: Fix last item of collapsible flashbar not being
 dismissible (#1688)

---
 src/flashbar/collapsible-flashbar.tsx     |  4 +++-
 src/flashbar/common.tsx                   |  2 --
 src/flashbar/non-collapsible-flashbar.tsx | 10 +++++-----
 3 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/flashbar/collapsible-flashbar.tsx b/src/flashbar/collapsible-flashbar.tsx
index 695428e8fe..54066b6929 100644
--- a/src/flashbar/collapsible-flashbar.tsx
+++ b/src/flashbar/collapsible-flashbar.tsx
@@ -45,7 +45,7 @@ export default function CollapsibleFlashbar({ items, ...restProps }: FlashbarPro
     setInitialAnimationState(rects);
   }, [getElementsToAnimate]);
 
-  const { animateFlash, baseProps, breakpoint, isReducedMotion, isVisualRefresh, mergedRef, ref } = useFlashbar({
+  const { baseProps, breakpoint, isReducedMotion, isVisualRefresh, mergedRef, ref } = useFlashbar({
     items,
     ...restProps,
     onItemsAdded: newItems => {
@@ -77,6 +77,8 @@ export default function CollapsibleFlashbar({ items, ...restProps }: FlashbarPro
     setIsFlashbarStackExpanded(false);
   }
 
+  const animateFlash = !isReducedMotion;
+
   function toggleCollapseExpand() {
     sendToggleMetric(items.length, !isFlashbarStackExpanded);
     if (!isReducedMotion) {
diff --git a/src/flashbar/common.tsx b/src/flashbar/common.tsx
index 5d2cd72d0d..b4f42e75e2 100644
--- a/src/flashbar/common.tsx
+++ b/src/flashbar/common.tsx
@@ -35,7 +35,6 @@ export function useFlashbar({
   const isVisualRefresh = useVisualRefresh();
   const [previousItems, setPreviousItems] = useState<ReadonlyArray<FlashbarProps.MessageDefinition>>(items);
   const [nextFocusId, setNextFocusId] = useState<string | null>(null);
-  const animateFlash = !isReducedMotion && isVisualRefresh;
 
   if (isDevelopment) {
     if (items?.some(item => item.ariaRole === 'alert' && !item.id)) {
@@ -72,7 +71,6 @@ export function useFlashbar({
 
   return {
     allItemsHaveId,
-    animateFlash,
     baseProps,
     breakpoint,
     isReducedMotion,
diff --git a/src/flashbar/non-collapsible-flashbar.tsx b/src/flashbar/non-collapsible-flashbar.tsx
index 9e2c49e3d7..ababa10d6b 100644
--- a/src/flashbar/non-collapsible-flashbar.tsx
+++ b/src/flashbar/non-collapsible-flashbar.tsx
@@ -15,11 +15,10 @@ import { useInternalI18n } from '../i18n/context';
 export { FlashbarProps };
 
 export default function NonCollapsibleFlashbar({ items, i18nStrings, ...restProps }: FlashbarProps) {
-  const { allItemsHaveId, animateFlash, baseProps, breakpoint, isReducedMotion, isVisualRefresh, mergedRef } =
-    useFlashbar({
-      items,
-      ...restProps,
-    });
+  const { allItemsHaveId, baseProps, breakpoint, isReducedMotion, isVisualRefresh, mergedRef } = useFlashbar({
+    items,
+    ...restProps,
+  });
 
   const i18n = useInternalI18n('flashbar');
   const ariaLabel = i18n('i18nStrings.ariaLabel', i18nStrings?.ariaLabel);
@@ -38,6 +37,7 @@ export default function NonCollapsibleFlashbar({ items, i18nStrings, ...restProp
    */
   const motionDisabled = isReducedMotion || !isVisualRefresh || !allItemsHaveId;
 
+  const animateFlash = !isReducedMotion && isVisualRefresh;
   /**
    * If the flashbar is flat and motion is `enabled` then the adding and removing of items
    * from the flashbar will render with visual transitions.