fix: Fix last item of collapsible flashbar not being dismissible (#1688)

cloudscape-design · Oct 26, 2023 · 733845a · 733845a
1 parent 5c781f0
commit 733845a
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 8 deletions.
diff --git 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
@@ -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
@@ -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.