@cloudscape-design/components-themeable 3.0.188 → 3.0.190

package/lib/internal/manifest.json

@@ -1,3 +1,3 @@
 {
-  "commit": "ed68979606c1e81f9bd6d30c27f27aaa4b6501b0"
+  "commit": "02caf0ace1069d2adcb1c672418912420a0fdc27"
 }

package/lib/internal/scss/flashbar/collapsible.motion.scss

@@ -0,0 +1,23 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+@use '../internal/styles' as styles;
+@use '../internal/styles/tokens' as tokens;
+
+.stack {
+  > .animation-running > .item,
+  > .animation-running > .flash-list-item,
+  > .animation-running.toggle {
+    @include styles.with-motion {
+      transition-timing-function: tokens.$motion-easing-refresh-only-a;
+      transition-duration: tokens.$motion-duration-refresh-only-fast;
+    }
+  }
+  > .collapsed.animation-ready > .expanded-only,
+  > .collapsed.animation-running > .expanded-only {
+    // When collapsing, hide the exiting items right away, otherwise our animation calculations will be off
+    // because of React Transition keeping the elements in the DOM for a bit longer.
+    display: none;
+  }
+}

package/lib/internal/scss/flashbar/collapsible.scss

@@ -0,0 +1,224 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+@use '../internal/generated/custom-css-properties/index.scss' as custom-props;
+@use '../internal/hooks/focus-visible' as focus-visible;
+@use '../internal/styles/tokens' as awsui;
+@use '../internal/styles' as styles;
+@use '../internal/styles/typography' as typography;
+@use './collapsible.motion';
+
+.stack {
+  display: grid;
+  grid-template-columns: 1fr minmax(70px, auto) 1fr;
+}
+
+.stack > .expanded {
+  grid-column: 1 / 4;
+}
+
+@mixin stacked-flash-z-index {
+  // The first item should have the highest z index than the second item, and so forth...
+  z-index: calc(var(#{custom-props.$flashbarStackDepth}) - var(#{custom-props.$flashbarStackIndex}));
+}
+
+/*
+The collapsed stack is a dynamic grid that creates the necessary number of
+rows and columns based on the number of items passed to CSS via the
+`flashbarStackDepth` custom property. Assuming there are three flashbar items,
+the grid layout will be:
+
+[item 1 start] [10px] [10px] [fractional unit] [10px] [10px] [item 1 end]
+[10px] [item 2 start] [10px] [fractional unit] [10px] [item 2 end] [10px]
+[10px] [10px] [item 3 start] [fractional unit] [item 3 end] [10px] [10px]
+*/
+.stack > .collapsed {
+  display: grid;
+  grid-column: 1 / 4;
+  grid-template-columns:
+    repeat(var(#{custom-props.$flashbarStackDepth}), 10px)
+    1fr
+    repeat(var(#{custom-props.$flashbarStackDepth}), 10px);
+  row-gap: 8px;
+  z-index: 0;
+
+  > .item {
+    // Each item will have a unique custom property `flashbarStackIndex`
+    // Add +1 is because the array is indexed at zero but grid positions are indexed at 1.
+    grid-column-start: calc(var(#{custom-props.$flashbarStackIndex}) + 1);
+
+    // Add +1 to include the fractional unit in the column count
+    // Add +1 because the array indexed at zero but grid positions at indexed at 1.
+    grid-column-end: calc(
+      var(#{custom-props.$flashbarStackDepth}) * 2 + 1 - var(#{custom-props.$flashbarStackIndex}) + 1
+    );
+    grid-row-start: 1;
+    grid-row-end: calc(var(#{custom-props.$flashbarStackIndex}) + 2);
+
+    @include stacked-flash-z-index;
+  }
+
+  > .item:not(:first-of-type) {
+    align-self: end;
+    /* Give placeholder elements in the stacked state the height of a notification
+       with one single line of text.
+       This makes them look better during the collapse animation, in which they are already empty.
+     */
+    min-height: calc(
+      #{awsui.$font-body-m-line-height} + (
+          #{awsui.$space-scaled-xs} + #{awsui.$border-field-width} + #{awsui.$space-scaled-xxs}
+        ) * 2
+    );
+  }
+
+  > .item:not(:last-child) > .flash,
+  > .item.flash {
+    box-shadow: awsui.$shadow-flash-collapsed;
+  }
+}
+
+.stack > .expanded.animation-running > .flash-list-item {
+  position: relative;
+  @include stacked-flash-z-index;
+}
+
+@mixin toggle-button-layout($top-overlap-collapsed, $border-width) {
+  $margin-top-when-collapsed: -$top-overlap-collapsed;
+  $line-height: awsui.$font-body-m-line-height;
+  $padding-vertical: styles.$control-padding-vertical;
+  $margin-top-when-expanded: -12px;
+
+  padding-top: $padding-vertical;
+  padding-bottom: $padding-vertical;
+
+  &:not(.expanded) {
+    margin-top: #{$margin-top-when-collapsed};
+    margin-bottom: calc(
+      #{-$margin-top-when-collapsed} - (#{$line-height} + 2 * (#{$padding-vertical} + #{$border-width}))
+    );
+  }
+
+  &.expanded {
+    margin-top: #{$margin-top-when-expanded};
+    margin-bottom: calc(
+      #{-$margin-top-when-expanded} - (#{$line-height} + 2 * (#{$padding-vertical} + #{$border-width}))
+    );
+  }
+}
+
+.stack > .toggle {
+  @include styles.text-wrapping;
+
+  background: awsui.$color-background-layout-toggle-default;
+  border-color: awsui.$color-background-layout-toggle-default;
+  border-radius: awsui.$border-radius-button;
+  border-style: solid;
+  box-shadow: awsui.$shadow-panel-toggle;
+  color: awsui.$color-text-layout-toggle;
+  cursor: pointer;
+  display: flex;
+  grid-column: 2;
+  grid-row: 2;
+  gap: awsui.$space-xs;
+  letter-spacing: awsui.$font-button-letter-spacing;
+  margin-left: auto;
+  margin-right: auto;
+  text-decoration: none;
+  z-index: 1;
+
+  > .status > .header,
+  > .status > .item-count,
+  > .button {
+    @include typography.default-text-style;
+    color: awsui.$color-text-layout-toggle;
+    cursor: pointer;
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+
+  > .status {
+    > .header {
+      font-weight: awsui.$font-button-weight;
+      display: inline;
+      margin-right: awsui.$space-s;
+    }
+
+    > .item-count {
+      margin-left: awsui.$space-xxs;
+
+      > .type-count {
+        margin-right: awsui.$space-s;
+
+        > .count-number {
+          margin-left: awsui.$space-xxs;
+        }
+      }
+    }
+  }
+
+  &:hover {
+    background: awsui.$color-background-layout-toggle-hover;
+    border-color: awsui.$color-background-layout-toggle-hover;
+  }
+
+  &:active {
+    background: awsui.$color-background-layout-toggle-active;
+  }
+
+  &.visual-refresh {
+    $border-width: 2px;
+    // Amount of pixels that the element is pushed up to overlap the Flashbar (when collapsed)
+    $top-overlap-collapsed: 27px;
+    @include toggle-button-layout($top-overlap-collapsed, $border-width);
+    border-width: $border-width;
+    padding-left: awsui.$space-l;
+    padding-right: awsui.$space-l;
+  }
+
+  &:not(.visual-refresh) {
+    $border-width: 1px;
+    // Amount of pixels that the element is pushed up to overlap the Flashbar (when collapsed)
+    $top-overlap-collapsed: 24px;
+    @include toggle-button-layout($top-overlap-collapsed, $border-width);
+    border-width: $border-width;
+    padding-left: awsui.$space-s;
+    padding-right: awsui.$space-s;
+
+    &:focus {
+      text-decoration: none;
+    }
+
+    &:hover {
+      text-decoration: none;
+    }
+  }
+
+  > .button {
+    display: inline-block;
+    background: none;
+    border: 0 none;
+
+    > .icon {
+      @include styles.with-motion {
+        transition: transform awsui.$motion-duration-rotate-90 awsui.$motion-easing-rotate-90;
+      }
+    }
+    &.expanded > .icon {
+      transform: rotate(180deg);
+    }
+
+    &:focus {
+      outline: none;
+    }
+
+    @include focus-visible.when-visible {
+      @include styles.focus-highlight(0px);
+    }
+  }
+}
+
+// Leave some space below the Flashbar, but only when it reaches the end of the page.
+.stack.spaced-bottom {
+  padding-bottom: awsui.$space-xxl;
+}

package/lib/internal/scss/flashbar/motion.scss

@@ -5,7 +5,7 @@
 
 @use '../internal/styles' as styles;
 @use '../internal/styles/tokens' as tokens;
-.flash-refresh {
+.flash-with-motion {
   $flashbar-translate-y-content: -8px;
   $flashbar-translate-y: -20px;
 
@@ -15,7 +15,6 @@
   $flash-button-wrapper-transition-delay: calc(tokens.$motion-duration-refresh-only-slow * 2 - 100ms);
 
   &.enter {
-    position: absolute;
     @include styles.with-motion {
       opacity: 0;
       transform: translateY($flashbar-translate-y);

package/lib/internal/scss/flashbar/styles.scss

@@ -6,7 +6,9 @@
 @use '../internal/hooks/focus-visible' as focus-visible;
 @use '../internal/styles/tokens' as awsui;
 @use '../internal/styles' as styles;
+@use '../internal/styles/typography' as typography;
 @use './motion';
+@use './collapsible';
 
 .flashbar {
   position: relative;
@@ -53,8 +55,10 @@
   padding: 0;
   margin: 0;
 
-  > li:not(:last-child) {
-    margin-bottom: awsui.$space-xxxs;
+  &:not(.collapsed) {
+    > li:not(:last-child) {
+      margin-bottom: awsui.$space-xxxs;
+    }
   }
 }
 
@@ -62,22 +66,21 @@
   display: flex;
   flex-grow: 1;
   min-width: 0;
+}
+
+.flash-focus-container {
+  display: flex;
+  flex: 1;
+  min-width: 0;
 
   &:focus {
     outline: none;
   }
-
   @include focus-visible.when-visible {
     @include styles.focus-highlight(awsui.$space-button-focus-outline-gutter);
   }
 }
 
-.flash-focus-container {
-  display: flex;
-  flex: 1;
-  min-width: 0;
-}
-
 .flash-text {
   margin: awsui.$border-field-width 0;
   padding: awsui.$space-scaled-xxs awsui.$space-xxs;
@@ -145,141 +148,3 @@
 .flash-type-info {
   background-color: awsui.$color-background-notification-blue;
 }
-
-// `stackItems` feature beta test
-
-.stack {
-  display: grid;
-  grid-template-columns: 1fr minmax(70px, auto) 1fr;
-}
-
-.stack > .expanded {
-  grid-column: 1 / 4;
-}
-
-/*
-The collapsed stack is a dynamic grid that creates the necessary number of 
-rows and columns based on the number of items passed to CSS via the 
-`flashbarStackDepth` custom property. Assuming there are three flashbar items, 
-the grid layout will be: 
-
-[item 1 start] [12px] [12px] [fractional unit] [12px] [12px] [item 1 end]
-[12px] [item 2 start] [12px] [fractional unit] [12px] [item 2 end] [12px]
-[12px] [12px] [item 3 start] [fractional unit] [item 3 end] [12px] [12px]
-*/
-.stack > .collapsed {
-  display: grid;
-  grid-column: 1 / 4;
-  grid-template-columns:
-    repeat(var(#{custom-props.$flashbarStackDepth}), 12px)
-    1fr
-    repeat(var(#{custom-props.$flashbarStackDepth}), 12px);
-  row-gap: 8px;
-
-  > .item {
-    // Each item will have a unique custom property `flashbarStackIndex`
-    // Add +1 is because the array is indexed at zero but grid positions are indexed at 1.
-    grid-column-start: calc(var(#{custom-props.$flashbarStackIndex}) + 1);
-
-    // Add +1 to include the fractional unit in the column count
-    // Add +1 because the array indexed at zero but grid positions at indexed at 1.
-    grid-column-end: calc(
-      var(#{custom-props.$flashbarStackDepth}) * 2 + 1 - var(#{custom-props.$flashbarStackIndex}) + 1
-    );
-    grid-row-start: 1;
-    grid-row-end: calc(var(#{custom-props.$flashbarStackIndex}) + 2);
-
-    // The first item should have the highest z index than the second item, and so forth...
-    z-index: calc(var(#{custom-props.$flashbarStackDepth}) - var(#{custom-props.$flashbarStackIndex}));
-  }
-
-  > .item:not(:first-of-type) {
-    align-self: end;
-  }
-
-  &.visual-refresh > .item:not(:last-of-type) > .flash {
-    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
-  }
-
-  &:not(.visual-refresh) > .item:not(:last-of-type) > .flash {
-    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.15);
-  }
-
-  &.visual-refresh > .item:not(:last-of-type) > .flash-items > li:first-child > .flash {
-    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
-  }
-
-  &:not(.visual-refresh) > .item:not(:last-of-type) > .flash-items > li:first-child > .flash {
-    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.15);
-  }
-}
-
-.stack > .toggle {
-  grid-column: 2;
-  grid-row: 2;
-
-  @include focus-visible.when-visible {
-    @include styles.focus-highlight(awsui.$space-button-focus-outline-gutter);
-  }
-
-  &.visual-refresh {
-    background: awsui.$color-background-layout-toggle-default;
-    border: none;
-    border-radius: 0 0 10px 10px;
-    box-shadow: awsui.$shadow-panel-toggle;
-    color: awsui.$color-text-layout-toggle;
-    cursor: pointer;
-    padding: awsui.$space-scaled-xxs;
-    z-index: var(#{custom-props.$flashbarStackDepth});
-
-    &:focus {
-      outline: none;
-    }
-
-    &:hover {
-      background: awsui.$color-background-layout-toggle-hover;
-    }
-
-    &:active {
-      background: awsui.$color-background-layout-toggle-active;
-    }
-  }
-
-  &:not(.visual-refresh) {
-    background: awsui.$color-background-button-normal-default;
-    border: styles.$control-border-width solid awsui.$color-border-button-normal-default;
-    border-radius: awsui.$border-radius-button;
-    border-top: none;
-    cursor: pointer;
-    padding: styles.$control-padding-vertical awsui.$space-l;
-    text-decoration: none;
-
-    &:focus {
-      outline: none;
-      text-decoration: none;
-    }
-
-    &:hover {
-      background: awsui.$color-background-button-normal-hover;
-      border-color: awsui.$color-border-button-normal-hover;
-      text-decoration: none;
-    }
-
-    &:active {
-      background: awsui.$color-background-button-normal-active;
-      border-color: awsui.$color-border-button-normal-active;
-    }
-  }
-
-  > .icon {
-    display: inline-block;
-
-    @include styles.with-motion {
-      transition: transform awsui.$motion-duration-rotate-90 awsui.$motion-easing-rotate-90;
-    }
-
-    &.expanded {
-      transform: rotate(180deg);
-    }
-  }
-}

package/lib/internal/template/flashbar/collapsible-flashbar.d.ts

@@ -0,0 +1,4 @@
+import { FlashbarProps, CollapsibleFlashbarProps } from './interfaces';
+export { FlashbarProps };
+export default function CollapsibleFlashbar({ items, ...restProps }: FlashbarProps & CollapsibleFlashbarProps): JSX.Element;
+//# sourceMappingURL=collapsible-flashbar.d.ts.map

package/lib/internal/template/flashbar/collapsible-flashbar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"collapsible-flashbar.d.ts","sourceRoot":"","sources":["../../../src/flashbar/collapsible-flashbar.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,aAAa,EAAE,wBAAwB,EAAE,MAAM,cAAc,CAAC;AAgBvE,OAAO,EAAE,aAAa,EAAE,CAAC;AAQzB,MAAM,CAAC,OAAO,UAAU,mBAAmB,CAAC,EAAE,KAAK,EAAE,GAAG,SAAS,EAAE,EAAE,aAAa,GAAG,wBAAwB,eA2S5G"}

package/lib/internal/template/flashbar/collapsible-flashbar.js

@@ -0,0 +1,209 @@
+import { __assign, __rest, __spreadArray } from "tslib";
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import clsx from 'clsx';
+import React, { useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import customCssProps from '../internal/generated/custom-css-properties';
+import { Flash, focusFlashById } from './flash';
+import InternalIcon from '../icon/internal';
+import { TransitionGroup } from 'react-transition-group';
+import { Transition } from '../internal/components/transition';
+import useFocusVisible from '../internal/hooks/focus-visible';
+import { getVisualContextClassname } from '../internal/components/visual-context';
+import styles from './styles.css.js';
+import { counterTypes, getFlashTypeCount, getVisibleCollapsedItems } from './utils';
+import { animate, getDOMRects } from '../internal/animate';
+import { useUniqueId } from '../internal/hooks/use-unique-id';
+import { sendToggleMetric } from './internal/analytics';
+import { useFlashbar } from './common';
+import { throttle } from '../internal/utils/throttle';
+// If the number of items is equal or less than this value,
+// the toggle element will not be displayed and the Flashbar will look like a regular single-item Flashbar.
+var maxNonCollapsibleItems = 1;
+var resizeListenerThrottleDelay = 100;
+export default function CollapsibleFlashbar(_a) {
+    var items = _a.items, restProps = __rest(_a, ["items"]);
+    var _b = useState([]), enteringItems = _b[0], setEnteringItems = _b[1];
+    var _c = useState([]), exitingItems = _c[0], setExitingItems = _c[1];
+    var _d = useState(false), isFlashbarStackExpanded = _d[0], setIsFlashbarStackExpanded = _d[1];
+    var getElementsToAnimate = useCallback(function () {
+        var flashElements = isFlashbarStackExpanded ? expandedItemRefs.current : collapsedItemRefs.current;
+        return __assign(__assign({}, flashElements), { toggleButton: toggleElementRef.current });
+    }, [isFlashbarStackExpanded]);
+    var prepareAnimations = useCallback(function () {
+        var rects = getDOMRects(getElementsToAnimate());
+        setInitialAnimationState(rects);
+    }, [getElementsToAnimate]);
+    var _e = useFlashbar(__assign(__assign({ items: items }, restProps), { onItemsAdded: function (newItems) {
+            setEnteringItems(__spreadArray(__spreadArray([], enteringItems, true), newItems, true));
+        }, onItemsChanged: function (options) {
+            // If not all items have ID, we can still animate collapse/expand transitions
+            // because we can rely on each item's index in the original array,
+            // but we can't do that when elements are added or removed, since the index changes.
+            if ((options === null || options === void 0 ? void 0 : options.allItemsHaveId) && !(options === null || options === void 0 ? void 0 : options.isReducedMotion)) {
+                prepareAnimations();
+            }
+        }, onItemsRemoved: function (removedItems) {
+            setExitingItems(__spreadArray(__spreadArray([], exitingItems, true), removedItems, true));
+        } })), baseProps = _e.baseProps, breakpoint = _e.breakpoint, isReducedMotion = _e.isReducedMotion, isVisualRefresh = _e.isVisualRefresh, mergedRef = _e.mergedRef, ref = _e.ref;
+    var isFocusVisible = useFocusVisible();
+    var collapsedItemRefs = useRef({});
+    var expandedItemRefs = useRef({});
+    var _f = useState(null), initialAnimationState = _f[0], setInitialAnimationState = _f[1];
+    var listElementRef = useRef(null);
+    var toggleElementRef = useRef(null);
+    var _g = useState(false), transitioning = _g[0], setTransitioning = _g[1];
+    var flashbarElementId = useUniqueId('flashbar');
+    var itemCountElementId = useUniqueId('item-count');
+    if (items.length <= maxNonCollapsibleItems && isFlashbarStackExpanded) {
+        setIsFlashbarStackExpanded(false);
+    }
+    var animateFlash = !isReducedMotion;
+    function toggleCollapseExpand() {
+        sendToggleMetric(items.length, !isFlashbarStackExpanded);
+        if (!isReducedMotion) {
+            prepareAnimations();
+        }
+        setIsFlashbarStackExpanded(function (prev) { return !prev; });
+    }
+    useLayoutEffect(function () {
+        if (isFlashbarStackExpanded && (items === null || items === void 0 ? void 0 : items.length)) {
+            var lastItem = items[items.length - 1];
+            if (lastItem.id !== undefined) {
+                focusFlashById(ref.current, lastItem.id);
+            }
+        }
+        // Run this after expanding, but not every time the items change.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [isFlashbarStackExpanded]);
+    var updateBottomSpacing = useMemo(function () {
+        return throttle(function () {
+            // Allow vertical space between Flashbar and page bottom only when the Flashbar is reaching the end of the page,
+            // otherwise avoid spacing with eventual sticky elements below.
+            var listElement = listElementRef === null || listElementRef === void 0 ? void 0 : listElementRef.current;
+            var flashbar = listElement === null || listElement === void 0 ? void 0 : listElement.parentElement;
+            if (listElement && flashbar) {
+                var bottom = listElement.getBoundingClientRect().bottom;
+                var windowHeight = window.innerHeight;
+                // Apply the class first (before rendering)
+                // so that we can make calculations based on the applied padding-bottom;
+                // then we might decide to remove it or not.
+                flashbar.classList.add(styles['spaced-bottom']);
+                var applySpacing = isFlashbarStackExpanded && bottom + parseInt(getComputedStyle(flashbar).paddingBottom) >= windowHeight;
+                if (!applySpacing) {
+                    flashbar.classList.remove(styles['spaced-bottom']);
+                }
+            }
+        }, resizeListenerThrottleDelay);
+    }, [isFlashbarStackExpanded]);
+    useLayoutEffect(function () {
+        window.addEventListener('resize', updateBottomSpacing);
+        return function () {
+            window.removeEventListener('resize', updateBottomSpacing);
+            updateBottomSpacing.cancel();
+        };
+    }, [updateBottomSpacing]);
+    var i18nStrings = restProps.i18nStrings;
+    useLayoutEffect(function () {
+        // When `useLayoutEffect` is called, the DOM is updated but has not been painted yet,
+        // so it's a good moment to trigger animations that will make calculations based on old and new DOM state.
+        // The old state is kept in `initialAnimationState`
+        // and the new state can be retrieved from the current DOM elements.
+        if (initialAnimationState) {
+            updateBottomSpacing();
+            animate({
+                elements: getElementsToAnimate(),
+                oldState: initialAnimationState,
+                newElementInitialState: function (_a) {
+                    var top = _a.top;
+                    return ({ scale: 0.9, y: -0.2 * top });
+                },
+                onTransitionsEnd: function () { return setTransitioning(false); }
+            });
+            setTransitioning(true);
+            setInitialAnimationState(null);
+        }
+    }, [updateBottomSpacing, getElementsToAnimate, initialAnimationState, isFlashbarStackExpanded]);
+    var isCollapsible = items.length > maxNonCollapsibleItems;
+    // When using the stacking feature, the items are shown in reverse order (last item on top)
+    var reversedItems = items.slice().reverse();
+    var countByType = getFlashTypeCount(items);
+    var stackDepth = Math.min(3, items.length);
+    var itemsToShow = isFlashbarStackExpanded
+        ? reversedItems.map(function (item, index) { return (__assign(__assign({}, item), { expandedIndex: index })); })
+        : getVisibleCollapsedItems(reversedItems, stackDepth).map(function (item, index) { return (__assign(__assign({}, item), { collapsedIndex: index })); });
+    var ariaLabel = i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.ariaLabel;
+    var toggleButtonText = i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.toggleButtonText;
+    var getItemId = function (item) { var _a, _b; return (_b = (_a = item.id) !== null && _a !== void 0 ? _a : item.expandedIndex) !== null && _b !== void 0 ? _b : 0; };
+    // This check allows us to use the standard "enter" Transition only when the notification was not existing before.
+    // If instead it was moved to the top of the stack but was already present in the array
+    // (e.g, after dismissing another notification),
+    // we need to use different, more custom and more controlled animations.
+    var hasEntered = function (item) {
+        return enteringItems.some(function (_item) { return _item.id && _item.id === item.id; });
+    };
+    var hasLeft = function (item) { return !('expandedIndex' in item); };
+    var hasEnteredOrLeft = function (item) { return hasEntered(item) || hasLeft(item); };
+    var showInnerContent = function (item) {
+        return isFlashbarStackExpanded || hasLeft(item) || ('expandedIndex' in item && item.expandedIndex === 0);
+    };
+    var shouldUseStandardAnimation = function (item, index) { return index === 0 && hasEnteredOrLeft(item); };
+    var getAnimationElementId = function (item) { return "flash-".concat(getItemId(item)); };
+    var renderList = function () {
+        var _a;
+        return (React.createElement("ul", { ref: listElementRef, className: clsx(styles['flash-list'], isFlashbarStackExpanded ? styles.expanded : styles.collapsed, transitioning && styles['animation-running'], initialAnimationState && styles['animation-ready'], isVisualRefresh && styles['visual-refresh']), id: flashbarElementId, "aria-label": ariaLabel, "aria-describedby": isCollapsible ? itemCountElementId : undefined, style: !isFlashbarStackExpanded || transitioning
+                ? (_a = {},
+                    _a[customCssProps.flashbarStackDepth] = stackDepth,
+                    _a) : undefined },
+            React.createElement(TransitionGroup, { component: null }, itemsToShow.map(function (item, index) { return (React.createElement(Transition, { key: getItemId(item), "in": !hasLeft(item), onStatusChange: function (status) {
+                    if (status === 'entered') {
+                        setEnteringItems([]);
+                    }
+                    else if (status === 'exited') {
+                        setExitingItems([]);
+                    }
+                } }, function (state, transitionRootElement) {
+                var _a;
+                var _b, _c, _d;
+                return (React.createElement("li", { "aria-hidden": !showInnerContent(item), className: showInnerContent(item)
+                        ? clsx(styles['flash-list-item'], !isFlashbarStackExpanded && styles.item, !collapsedItemRefs.current[getAnimationElementId(item)] && styles['expanded-only'])
+                        : clsx(styles.flash, styles["flash-type-".concat((_b = item.type) !== null && _b !== void 0 ? _b : 'info')], styles.item), ref: function (element) {
+                        if (isFlashbarStackExpanded) {
+                            expandedItemRefs.current[getAnimationElementId(item)] = element;
+                        }
+                        else {
+                            collapsedItemRefs.current[getAnimationElementId(item)] = element;
+                        }
+                    }, style: !isFlashbarStackExpanded || transitioning
+                        ? (_a = {},
+                            _a[customCssProps.flashbarStackIndex] = (_d = (_c = item.collapsedIndex) !== null && _c !== void 0 ? _c : item.expandedIndex) !== null && _d !== void 0 ? _d : index,
+                            _a) : undefined, key: getItemId(item) }, showInnerContent(item) && (React.createElement(Flash
+                // eslint-disable-next-line react/forbid-component-props
+                , __assign({ 
+                    // eslint-disable-next-line react/forbid-component-props
+                    className: clsx(animateFlash && styles['flash-with-motion'], isVisualRefresh && styles['flash-refresh']), key: getItemId(item), ref: shouldUseStandardAnimation(item, index) ? transitionRootElement : undefined, transitionState: shouldUseStandardAnimation(item, index) ? state : undefined }, item)))));
+            })); }))));
+    };
+    return (React.createElement("div", __assign({}, baseProps, { className: clsx(baseProps.className, styles.flashbar, styles["breakpoint-".concat(breakpoint)], styles.stack, isFlashbarStackExpanded && styles.expanded, getVisualContextClassname('flashbar')), ref: mergedRef }),
+        React.createElement(React.Fragment, null,
+            isFlashbarStackExpanded && renderList(),
+            isCollapsible && (React.createElement("div", { className: clsx(styles.toggle, isVisualRefresh && styles['visual-refresh'], isFlashbarStackExpanded ? styles.expanded : styles.collapsed, transitioning && styles['animation-running']), onClick: toggleCollapseExpand, ref: toggleElementRef },
+                React.createElement("span", { "aria-live": "polite", className: styles.status, role: "status", id: itemCountElementId },
+                    toggleButtonText && React.createElement("h2", { className: styles.header }, toggleButtonText),
+                    React.createElement("span", { className: styles['item-count'] }, counterTypes.map(function (_a) {
+                        var type = _a.type, labelName = _a.labelName, iconName = _a.iconName;
+                        return (React.createElement(NotificationTypeCount, { key: type, iconName: iconName, label: i18nStrings ? i18nStrings[labelName] : undefined, count: countByType[type] }));
+                    }))),
+                React.createElement("button", __assign({ "aria-controls": flashbarElementId, "aria-describedby": itemCountElementId, "aria-expanded": isFlashbarStackExpanded, "aria-label": i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.toggleButtonAriaLabel, className: clsx(styles.button, isFlashbarStackExpanded && styles.expanded) }, isFocusVisible),
+                    React.createElement(InternalIcon, { className: styles.icon, size: "normal", name: "angle-down" })))),
+            !isFlashbarStackExpanded && renderList())));
+}
+var NotificationTypeCount = function (_a) {
+    var iconName = _a.iconName, label = _a.label, count = _a.count;
+    return (React.createElement("span", { className: styles['type-count'] },
+        React.createElement("span", { "aria-label": label, role: "img" },
+            React.createElement("span", { title: label, "aria-hidden": "true" },
+                React.createElement(InternalIcon, { name: iconName }))),
+        React.createElement("span", { className: styles['count-number'] }, count)));
+};
+//# sourceMappingURL=collapsible-flashbar.js.map