@cloudscape-design/components 3.0.183 → 3.0.185

package/flashbar/flash.js

@@ -10,7 +10,8 @@ import { isDevelopment } from '../internal/is-development';
 import { throttle } from '../internal/utils/throttle';
 import useFocusVisible from '../internal/hooks/focus-visible';
 import LiveRegion from '../internal/components/live-region';
-var FOCUS_THROTTLE_DELAY = 2000;
+import { sendDismissMetric } from './internal/analytics';
+import { FOCUS_THROTTLE_DELAY } from './utils';
 var ICON_TYPES = {
     success: 'status-positive',
     warning: 'status-warning',
@@ -46,6 +47,10 @@ export var Flash = React.forwardRef(function (_a, ref) {
     var icon = loading ? React.createElement(InternalSpinner, null) : React.createElement(InternalIcon, { name: iconType });
     var effectiveType = loading ? 'info' : type;
     var announcement = [statusIconAriaLabel, header, content].filter(Boolean).join(' ');
+    var handleDismiss = function (event) {
+        sendDismissMetric(effectiveType);
+        onDismiss && onDismiss(event);
+    };
     return (
     // We're not using "polite" or "assertive" here, just turning default behavior off.
     // eslint-disable-next-line @cloudscape-design/prefer-live-region
@@ -58,13 +63,13 @@ export var Flash = React.forwardRef(function (_a, ref) {
             _b[styles.exited] = transitionState === 'exited',
             _b)) },
         React.createElement("div", { className: styles['flash-body'] },
-            React.createElement("div", __assign({}, focusVisible, { className: styles['flash-focus-container'], tabIndex: ariaRole === 'alert' ? -1 : undefined }),
+            React.createElement("div", __assign({}, focusVisible, { className: styles['flash-focus-container'], tabIndex: -1 }),
                 React.createElement("div", { className: clsx(styles['flash-icon'], styles['flash-text']), role: "img", "aria-label": statusIconAriaLabel }, icon),
                 React.createElement("div", { className: clsx(styles['flash-message'], styles['flash-text']) },
                     React.createElement("div", { className: styles['flash-header'] }, header),
                     React.createElement("div", { className: styles['flash-content'] }, content))),
             button && React.createElement("div", { className: styles['action-button-wrapper'] }, button)),
-        dismissible && dismissButton(dismissLabel, onDismiss),
+        dismissible && dismissButton(dismissLabel, handleDismiss),
         ariaRole === 'status' && React.createElement(LiveRegion, null, announcement)));
 });
 //# sourceMappingURL=flash.js.map

package/flashbar/flash.js.map

@@ -1 +1 @@
-{"version":3,"file":"flash.js","sourceRoot":"","sources":["../../../src/flashbar/flash.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { FlashbarProps } from './interfaces';\nimport React from 'react';\nimport InternalSpinner from '../spinner/internal';\nimport InternalIcon from '../icon/internal';\nimport clsx from 'clsx';\nimport styles from './styles.css.js';\nimport { InternalButton } from '../button/internal';\nimport { warnOnce } from '../internal/logging';\nimport { isDevelopment } from '../internal/is-development';\nimport { throttle } from '../internal/utils/throttle';\nimport useFocusVisible from '../internal/hooks/focus-visible';\nimport LiveRegion from '../internal/components/live-region';\n\nconst FOCUS_THROTTLE_DELAY = 2000;\n\nconst ICON_TYPES = {\n  success: 'status-positive',\n  warning: 'status-warning',\n  info: 'status-info',\n  error: 'status-negative',\n} as const;\n\nfunction actionButton(\n  buttonText: FlashbarProps.MessageDefinition['buttonText'],\n  onButtonClick: FlashbarProps.MessageDefinition['onButtonClick']\n) {\n  return (\n    <InternalButton onClick={onButtonClick} className={styles['action-button']} formAction=\"none\">\n      {buttonText}\n    </InternalButton>\n  );\n}\n\nfunction dismissButton(\n  dismissLabel: FlashbarProps.MessageDefinition['dismissLabel'],\n  onDismiss: FlashbarProps.MessageDefinition['onDismiss']\n) {\n  return (\n    <div className={styles['dismiss-button-wrapper']}>\n      <InternalButton\n        onClick={onDismiss}\n        className={styles['dismiss-button']}\n        variant=\"flashbar-icon\"\n        iconName=\"close\"\n        formAction=\"none\"\n        ariaLabel={dismissLabel}\n      />\n    </div>\n  );\n}\n\nexport const focusFlashById = throttle(\n  (element: HTMLElement | null, itemId: string) => {\n    const selector = `[data-itemid=\"${CSS.escape(itemId)}\"] .${styles['flash-focus-container']}`;\n    element?.querySelector<HTMLElement>(selector)?.focus();\n  },\n  FOCUS_THROTTLE_DELAY,\n  { trailing: false }\n);\n\nexport interface FlashProps extends FlashbarProps.MessageDefinition {\n  className: string;\n  transitionState?: string;\n}\n\nexport const Flash = React.forwardRef(\n  (\n    {\n      id,\n      header,\n      content,\n      dismissible,\n      dismissLabel,\n      statusIconAriaLabel,\n      loading,\n      action,\n      buttonText,\n      onButtonClick,\n      onDismiss,\n      className,\n      transitionState,\n      ariaRole,\n      type = 'info',\n    }: FlashProps,\n    ref: React.Ref<HTMLDivElement>\n  ) => {\n    const focusVisible = useFocusVisible();\n\n    if (isDevelopment) {\n      if (buttonText && !onButtonClick) {\n        warnOnce(\n          'Flashbar',\n          `You provided a \\`buttonText\\` prop without an \\`onButtonClick\\` handler. This will render a non-interactive action button.`\n        );\n      }\n\n      if (dismissible && !onDismiss) {\n        warnOnce(\n          'Flashbar',\n          `You have set the \\`dismissible\\` prop without an \\`onDismiss\\` handler. This will render a non-interactive dismiss button.`\n        );\n      }\n    }\n\n    const button = action || (buttonText && actionButton(buttonText, onButtonClick));\n\n    const iconType = ICON_TYPES[type];\n\n    const icon = loading ? <InternalSpinner /> : <InternalIcon name={iconType} />;\n\n    const effectiveType = loading ? 'info' : type;\n\n    const announcement = [statusIconAriaLabel, header, content].filter(Boolean).join(' ');\n\n    return (\n      // We're not using \"polite\" or \"assertive\" here, just turning default behavior off.\n      // eslint-disable-next-line @cloudscape-design/prefer-live-region\n      <div\n        ref={ref}\n        role={ariaRole}\n        aria-live={ariaRole ? 'off' : undefined}\n        data-itemid={id}\n        className={clsx(\n          styles.flash,\n          styles[`flash-type-${effectiveType}`],\n          className,\n          transitionState && {\n            [styles.enter]: transitionState === 'enter',\n            [styles.entering]: transitionState === 'entering',\n            [styles.entered]: transitionState === 'entered',\n            [styles.exit]: transitionState === 'exit',\n            [styles.exiting]: transitionState === 'exiting',\n            [styles.exited]: transitionState === 'exited',\n          }\n        )}\n      >\n        <div className={styles['flash-body']}>\n          <div\n            {...focusVisible}\n            className={styles['flash-focus-container']}\n            tabIndex={ariaRole === 'alert' ? -1 : undefined}\n          >\n            <div\n              className={clsx(styles['flash-icon'], styles['flash-text'])}\n              role=\"img\"\n              aria-label={statusIconAriaLabel}\n            >\n              {icon}\n            </div>\n            <div className={clsx(styles['flash-message'], styles['flash-text'])}>\n              <div className={styles['flash-header']}>{header}</div>\n              <div className={styles['flash-content']}>{content}</div>\n            </div>\n          </div>\n          {button && <div className={styles['action-button-wrapper']}>{button}</div>}\n        </div>\n        {dismissible && dismissButton(dismissLabel, onDismiss)}\n        {ariaRole === 'status' && <LiveRegion>{announcement}</LiveRegion>}\n      </div>\n    );\n  }\n);\n"]}
+{"version":3,"file":"flash.js","sourceRoot":"","sources":["../../../src/flashbar/flash.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { FlashbarProps } from './interfaces';\nimport React from 'react';\nimport InternalSpinner from '../spinner/internal';\nimport InternalIcon from '../icon/internal';\nimport clsx from 'clsx';\nimport styles from './styles.css.js';\nimport { InternalButton } from '../button/internal';\nimport { warnOnce } from '../internal/logging';\nimport { isDevelopment } from '../internal/is-development';\nimport { throttle } from '../internal/utils/throttle';\nimport useFocusVisible from '../internal/hooks/focus-visible';\nimport LiveRegion from '../internal/components/live-region';\nimport { ButtonProps } from '../button/interfaces';\n\nimport { sendDismissMetric } from './internal/analytics';\n\nimport { FOCUS_THROTTLE_DELAY } from './utils';\n\nconst ICON_TYPES = {\n  success: 'status-positive',\n  warning: 'status-warning',\n  info: 'status-info',\n  error: 'status-negative',\n} as const;\n\nfunction actionButton(\n  buttonText: FlashbarProps.MessageDefinition['buttonText'],\n  onButtonClick: FlashbarProps.MessageDefinition['onButtonClick']\n) {\n  return (\n    <InternalButton onClick={onButtonClick} className={styles['action-button']} formAction=\"none\">\n      {buttonText}\n    </InternalButton>\n  );\n}\n\nfunction dismissButton(\n  dismissLabel: FlashbarProps.MessageDefinition['dismissLabel'],\n  onDismiss: FlashbarProps.MessageDefinition['onDismiss']\n) {\n  return (\n    <div className={styles['dismiss-button-wrapper']}>\n      <InternalButton\n        onClick={onDismiss}\n        className={styles['dismiss-button']}\n        variant=\"flashbar-icon\"\n        iconName=\"close\"\n        formAction=\"none\"\n        ariaLabel={dismissLabel}\n      />\n    </div>\n  );\n}\n\nexport const focusFlashById = throttle(\n  (element: HTMLElement | null, itemId: string) => {\n    const selector = `[data-itemid=\"${CSS.escape(itemId)}\"] .${styles['flash-focus-container']}`;\n    element?.querySelector<HTMLElement>(selector)?.focus();\n  },\n  FOCUS_THROTTLE_DELAY,\n  { trailing: false }\n);\n\nexport interface FlashProps extends FlashbarProps.MessageDefinition {\n  className: string;\n  transitionState?: string;\n}\n\nexport const Flash = React.forwardRef(\n  (\n    {\n      id,\n      header,\n      content,\n      dismissible,\n      dismissLabel,\n      statusIconAriaLabel,\n      loading,\n      action,\n      buttonText,\n      onButtonClick,\n      onDismiss,\n      className,\n      transitionState,\n      ariaRole,\n      type = 'info',\n    }: FlashProps,\n    ref: React.Ref<HTMLDivElement>\n  ) => {\n    const focusVisible = useFocusVisible();\n\n    if (isDevelopment) {\n      if (buttonText && !onButtonClick) {\n        warnOnce(\n          'Flashbar',\n          `You provided a \\`buttonText\\` prop without an \\`onButtonClick\\` handler. This will render a non-interactive action button.`\n        );\n      }\n\n      if (dismissible && !onDismiss) {\n        warnOnce(\n          'Flashbar',\n          `You have set the \\`dismissible\\` prop without an \\`onDismiss\\` handler. This will render a non-interactive dismiss button.`\n        );\n      }\n    }\n\n    const button = action || (buttonText && actionButton(buttonText, onButtonClick));\n\n    const iconType = ICON_TYPES[type];\n\n    const icon = loading ? <InternalSpinner /> : <InternalIcon name={iconType} />;\n\n    const effectiveType = loading ? 'info' : type;\n\n    const announcement = [statusIconAriaLabel, header, content].filter(Boolean).join(' ');\n\n    const handleDismiss: ButtonProps['onClick'] = event => {\n      sendDismissMetric(effectiveType);\n      onDismiss && onDismiss(event);\n    };\n\n    return (\n      // We're not using \"polite\" or \"assertive\" here, just turning default behavior off.\n      // eslint-disable-next-line @cloudscape-design/prefer-live-region\n      <div\n        ref={ref}\n        role={ariaRole}\n        aria-live={ariaRole ? 'off' : undefined}\n        data-itemid={id}\n        className={clsx(\n          styles.flash,\n          styles[`flash-type-${effectiveType}`],\n          className,\n          transitionState && {\n            [styles.enter]: transitionState === 'enter',\n            [styles.entering]: transitionState === 'entering',\n            [styles.entered]: transitionState === 'entered',\n            [styles.exit]: transitionState === 'exit',\n            [styles.exiting]: transitionState === 'exiting',\n            [styles.exited]: transitionState === 'exited',\n          }\n        )}\n      >\n        <div className={styles['flash-body']}>\n          <div {...focusVisible} className={styles['flash-focus-container']} tabIndex={-1}>\n            <div\n              className={clsx(styles['flash-icon'], styles['flash-text'])}\n              role=\"img\"\n              aria-label={statusIconAriaLabel}\n            >\n              {icon}\n            </div>\n            <div className={clsx(styles['flash-message'], styles['flash-text'])}>\n              <div className={styles['flash-header']}>{header}</div>\n              <div className={styles['flash-content']}>{content}</div>\n            </div>\n          </div>\n          {button && <div className={styles['action-button-wrapper']}>{button}</div>}\n        </div>\n        {dismissible && dismissButton(dismissLabel, handleDismiss)}\n        {ariaRole === 'status' && <LiveRegion>{announcement}</LiveRegion>}\n      </div>\n    );\n  }\n);\n"]}

package/flashbar/index.d.ts

@@ -1,4 +1,4 @@
-import { FlashbarProps } from './interfaces';
+import { FlashbarProps, CollapsibleFlashbarProps } from './interfaces';
 export { FlashbarProps };
-export default function Flashbar({ items, ...restProps }: FlashbarProps): JSX.Element;
+export default function Flashbar(props: FlashbarProps | CollapsibleFlashbarProps): JSX.Element;
 //# sourceMappingURL=index.d.ts.map

package/flashbar/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/flashbar/index.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,aAAa,EAAwB,MAAM,cAAc,CAAC;AAenE,OAAO,EAAE,aAAa,EAAE,CAAC;AAEzB,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,EAAE,KAAK,EAAE,GAAG,SAAS,EAAE,EAAE,aAAa,eA8MtE"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/flashbar/index.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,aAAa,EAAE,wBAAwB,EAAE,MAAM,cAAc,CAAC;AAMvE,OAAO,EAAE,aAAa,EAAE,CAAC;AAEzB,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,KAAK,EAAE,aAAa,GAAG,wBAAwB,eAY/E"}

package/flashbar/index.js

@@ -1,171 +1,26 @@
-import { __assign, __rest } from "tslib";
+import { __assign } from "tslib";
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import clsx from 'clsx';
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect } from 'react';
 import { applyDisplayName } from '../internal/utils/apply-display-name';
-import customCssProps from '../internal/generated/custom-css-properties';
-import { Flash, focusFlashById } from './flash';
-import { getBaseProps } from '../internal/base-component';
-import InternalIcon from '../icon/internal';
-import { TIMEOUT_FOR_ENTERING_ANIMATION } from './constant';
-import { TransitionGroup } from 'react-transition-group';
-import { Transition } from '../internal/components/transition';
-import useBaseComponent from '../internal/hooks/use-base-component';
-import { useContainerBreakpoints } from '../internal/hooks/container-queries';
-import useFocusVisible from '../internal/hooks/focus-visible';
-import { useMergeRefs } from '../internal/hooks/use-merge-refs';
-import { useReducedMotion, useVisualRefresh } from '../internal/hooks/use-visual-mode';
-import { getVisualContextClassname } from '../internal/components/visual-context';
-import styles from './styles.css.js';
-export default function Flashbar(_a) {
-    var items = _a.items, restProps = __rest(_a, ["items"]);
-    var __internalRootRef = useBaseComponent('Flashbar').__internalRootRef;
-    var baseProps = getBaseProps(restProps);
-    var ref = useRef(null);
-    var _b = useContainerBreakpoints(['xs']), breakpoint = _b[0], breakpointRef = _b[1];
-    var mergedRef = useMergeRefs(ref, breakpointRef, __internalRootRef);
-    var isFocusVisible = useFocusVisible();
-    var isVisualRefresh = useVisualRefresh();
-    var _c = useState(items), previousItems = _c[0], setPreviousItems = _c[1];
-    var _d = useState(null), nextFocusId = _d[0], setNextFocusId = _d[1];
-    // Track new or removed item IDs in state to only trigger focus changes for newly added items.
-    // https://reactjs.org/docs/hooks-faq.html#how-do-i-implement-getderivedstatefromprops
-    if (items) {
-        var newItems = items.filter(function (_a) {
-            var id = _a.id;
-            return id && !previousItems.some(function (item) { return item.id === id; });
-        });
-        var removedItems = previousItems.filter(function (_a) {
-            var id = _a.id;
-            return id && !items.some(function (item) { return item.id === id; });
-        });
-        if (newItems.length > 0 || removedItems.length > 0) {
-            setPreviousItems(items);
-            var newFocusItems = newItems.filter(function (_a) {
-                var ariaRole = _a.ariaRole;
-                return ariaRole === 'alert';
-            });
-            if (newFocusItems.length > 0) {
-                setNextFocusId(newFocusItems[0].id);
-            }
-        }
-    }
+import CollapsibleFlashbar from './collapsible-flashbar';
+import NonCollapsibleFlashbar from './non-collapsible-flashbar';
+import { sendRenderMetric } from './internal/analytics';
+export default function Flashbar(props) {
     useEffect(function () {
-        if (nextFocusId) {
-            focusFlashById(ref.current, nextFocusId);
-        }
-    }, [nextFocusId]);
-    /**
-     * All the flash items should have ids so we can identify which DOM element is being
-     * removed from the DOM to animate it. Motion will be disabled if any of the provided
-     * flash messages does not contain an `id`.
-     */
-    var motionDisabled = useReducedMotion(breakpointRef) || !isVisualRefresh || (items && !items.every(function (item) { return 'id' in item; }));
-    /**
-     * The `stackItems` property is a hidden boolean that allows for teams
-     * to beta test the flashbar stacking feature.
-     */
-    var stackItems = isStackedFlashbar(restProps);
-    var ariaLabels = stackItems ? restProps.ariaLabels : {};
-    var isFlashbarStacked = stackItems && (items === null || items === void 0 ? void 0 : items.length) > 3;
-    var _e = useState(false), isFlashbarStackExpanded = _e[0], setIsFlashbarStackExpanded = _e[1];
-    /**
-     * Compute the appropriate aria label for the stacked notifications toggle button
-     * based on the expanded/collapsed state of the stack and the presence of
-     * corresponding aria label properties.
-     */
-    function getStackButtonAriaLabel() {
-        var _a, _b;
-        var stackButtonAriaLabel;
-        if (isFlashbarStackExpanded) {
-            stackButtonAriaLabel = (_a = ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.stackCollapseLabel) !== null && _a !== void 0 ? _a : 'Collapse stacked notifications';
-        }
-        else {
-            stackButtonAriaLabel = (_b = ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.stackExpandLabel) !== null && _b !== void 0 ? _b : 'Expand stacked notifications';
-        }
-        return stackButtonAriaLabel;
-    }
-    /**
-     * If the `isFlashbarStacked` is true (which is only possible if `stackItems` is true)
-     * then the first item should be rendered followed by two dummy items that visually indicate
-     * two, three, or more items exist in the stack.
-     */
-    function renderStackedItems() {
-        var _a;
-        if (!isFlashbarStacked) {
-            return;
-        }
-        var stackDepth = Math.min(3, items.length);
-        var stackedItems = items.slice(0, stackDepth);
-        return (React.createElement("div", { className: styles.stack, style: (_a = {}, _a[customCssProps.flashbarStackDepth] = stackDepth, _a) },
-            !isFlashbarStackExpanded && (React.createElement("div", { className: clsx(styles.collapsed, isVisualRefresh && styles['visual-refresh']) }, stackedItems.map(function (item, index) {
-                var _a;
-                var _b, _c;
-                return (React.createElement("div", { className: styles.item, style: (_a = {}, _a[customCssProps.flashbarStackIndex] = index, _a), key: index },
-                    index === 0 && (React.createElement("ul", { className: styles['flash-list'] },
-                        React.createElement("li", { className: styles['flash-list-item'] }, renderItem(item, (_b = item.id) !== null && _b !== void 0 ? _b : index)))),
-                    index > 0 && React.createElement("div", { className: clsx(styles.flash, styles["flash-type-".concat((_c = item.type) !== null && _c !== void 0 ? _c : 'info')]) })));
-            }))),
-            isFlashbarStackExpanded && (React.createElement("ul", { className: clsx(styles['flash-list'], styles.expanded) }, items.map(function (item, index) {
-                var _a, _b;
-                return (React.createElement("li", { key: (_a = item.id) !== null && _a !== void 0 ? _a : index, className: styles['flash-list-item'] }, renderItem(item, (_b = item.id) !== null && _b !== void 0 ? _b : index)));
-            }))),
-            React.createElement("button", __assign({ "aria-label": getStackButtonAriaLabel(), className: clsx(styles.toggle, isVisualRefresh && styles['visual-refresh']), onClick: function () { return setIsFlashbarStackExpanded(!isFlashbarStackExpanded); } }, isFocusVisible),
-                React.createElement("span", { className: clsx(styles.icon, isFlashbarStackExpanded && styles.expanded) },
-                    React.createElement(InternalIcon, { size: "small", name: "angle-down" })))));
-    }
-    /**
-     * If the flashbar is flat and motion is `enabled` then the adding and removing of items
-     * from the flashbar will render with visual transitions.
-     */
-    function renderFlatItemsWithTransitions() {
-        if (isFlashbarStacked || motionDisabled || !items) {
-            return;
-        }
-        return (
-        // This is a proxy for <ul>, so we're not applying a class to another actual component.
-        // eslint-disable-next-line react/forbid-component-props
-        React.createElement(TransitionGroup, { component: "ul", className: styles['flash-list'] }, items &&
-            items.map(function (item, index) {
-                var _a;
-                return (React.createElement(Transition, { transitionChangeDelay: { entering: TIMEOUT_FOR_ENTERING_ANIMATION }, key: (_a = item.id) !== null && _a !== void 0 ? _a : index, "in": true }, function (state, transitionRootElement) {
-                    var _a;
-                    return (React.createElement("li", { className: styles['flash-list-item'] }, renderItem(item, (_a = item.id) !== null && _a !== void 0 ? _a : index, transitionRootElement, state)));
-                }));
-            })));
-    }
-    /**
-     * If the flashbar is flat and motion is `disabled` then the adding and removing of items
-     * from the flashbar will render without visual transitions.
-     */
-    function renderFlatItemsWithoutTransitions() {
-        if (isFlashbarStacked || !motionDisabled || !items) {
-            return;
+        if (props.items.length > 0) {
+            sendRenderMetric(props.items);
         }
-        return (React.createElement("ul", { className: styles['flash-list'] }, items.map(function (item, index) {
-            var _a, _b;
-            return (React.createElement("li", { key: (_a = item.id) !== null && _a !== void 0 ? _a : index, className: styles['flash-list-item'] }, renderItem(item, (_b = item.id) !== null && _b !== void 0 ? _b : index)));
-        })));
+    }, [props.items]);
+    if (isStackedFlashbar(props)) {
+        return React.createElement(CollapsibleFlashbar, __assign({}, props));
     }
-    /**
-     * This is a shared render function for a single flashbar item to be used
-     * by the stacking, motion, and non-motion item group render functions.
-     */
-    function renderItem(item, key, transitionRootElement, transitionState) {
-        return (React.createElement(Flash
-        // eslint-disable-next-line react/forbid-component-props
-        , __assign({ 
-            // eslint-disable-next-line react/forbid-component-props
-            className: clsx(getVisualContextClassname('flashbar'), isVisualRefresh ? styles['flash-refresh'] : ''), key: key, ref: transitionRootElement, transitionState: transitionState }, item)));
+    else {
+        return React.createElement(NonCollapsibleFlashbar, __assign({}, props));
     }
-    return (React.createElement("div", __assign({}, baseProps, { className: clsx(baseProps.className, styles.flashbar, styles["breakpoint-".concat(breakpoint)]), ref: mergedRef }),
-        renderStackedItems(),
-        renderFlatItemsWithTransitions(),
-        renderFlatItemsWithoutTransitions()));
 }
 function isStackedFlashbar(props) {
-    return 'stackItems' in props && !!props.stackItems;
+    return 'stackItems' in props && props.stackItems;
 }
 applyDisplayName(Flashbar, 'Flashbar');
 //# sourceMappingURL=index.js.map

package/flashbar/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/flashbar/index.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport clsx from 'clsx';\nimport React, { useEffect, useRef, useState } from 'react';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport customCssProps from '../internal/generated/custom-css-properties';\nimport { Flash, focusFlashById } from './flash';\nimport { FlashbarProps, StackedFlashbarProps } from './interfaces';\nimport { getBaseProps } from '../internal/base-component';\nimport InternalIcon from '../icon/internal';\nimport { TIMEOUT_FOR_ENTERING_ANIMATION } from './constant';\nimport { TransitionGroup } from 'react-transition-group';\nimport { Transition } from '../internal/components/transition';\nimport useBaseComponent from '../internal/hooks/use-base-component';\nimport { useContainerBreakpoints } from '../internal/hooks/container-queries';\nimport useFocusVisible from '../internal/hooks/focus-visible';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\nimport { useReducedMotion, useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport { getVisualContextClassname } from '../internal/components/visual-context';\n\nimport styles from './styles.css.js';\n\nexport { FlashbarProps };\n\nexport default function Flashbar({ items, ...restProps }: FlashbarProps) {\n  const { __internalRootRef } = useBaseComponent('Flashbar');\n  const baseProps = getBaseProps(restProps);\n\n  const ref = useRef<HTMLDivElement | null>(null);\n  const [breakpoint, breakpointRef] = useContainerBreakpoints(['xs']);\n  const mergedRef = useMergeRefs(ref, breakpointRef, __internalRootRef);\n\n  const isFocusVisible = useFocusVisible();\n  const isVisualRefresh = useVisualRefresh();\n\n  const [previousItems, setPreviousItems] = useState<ReadonlyArray<FlashbarProps.MessageDefinition>>(items);\n  const [nextFocusId, setNextFocusId] = useState<string | null>(null);\n\n  // Track new or removed item IDs in state to only trigger focus changes for newly added items.\n  // https://reactjs.org/docs/hooks-faq.html#how-do-i-implement-getderivedstatefromprops\n  if (items) {\n    const newItems = items.filter(({ id }) => id && !previousItems.some(item => item.id === id));\n    const removedItems = previousItems.filter(({ id }) => id && !items.some(item => item.id === id));\n    if (newItems.length > 0 || removedItems.length > 0) {\n      setPreviousItems(items);\n      const newFocusItems = newItems.filter(({ ariaRole }) => ariaRole === 'alert');\n      if (newFocusItems.length > 0) {\n        setNextFocusId(newFocusItems[0].id!);\n      }\n    }\n  }\n\n  useEffect(() => {\n    if (nextFocusId) {\n      focusFlashById(ref.current, nextFocusId);\n    }\n  }, [nextFocusId]);\n\n  /**\n   * All the flash items should have ids so we can identify which DOM element is being\n   * removed from the DOM to animate it. Motion will be disabled if any of the provided\n   * flash messages does not contain an `id`.\n   */\n  const motionDisabled =\n    useReducedMotion(breakpointRef as any) || !isVisualRefresh || (items && !items.every(item => 'id' in item));\n\n  /**\n   * The `stackItems` property is a hidden boolean that allows for teams\n   * to beta test the flashbar stacking feature.\n   */\n  const stackItems = isStackedFlashbar(restProps);\n  const ariaLabels = stackItems ? restProps.ariaLabels : {};\n  const isFlashbarStacked = stackItems && items?.length > 3;\n  const [isFlashbarStackExpanded, setIsFlashbarStackExpanded] = useState(false);\n\n  /**\n   * Compute the appropriate aria label for the stacked notifications toggle button\n   * based on the expanded/collapsed state of the stack and the presence of\n   * corresponding aria label properties.\n   */\n  function getStackButtonAriaLabel() {\n    let stackButtonAriaLabel;\n\n    if (isFlashbarStackExpanded) {\n      stackButtonAriaLabel = ariaLabels?.stackCollapseLabel ?? 'Collapse stacked notifications';\n    } else {\n      stackButtonAriaLabel = ariaLabels?.stackExpandLabel ?? 'Expand stacked notifications';\n    }\n\n    return stackButtonAriaLabel;\n  }\n\n  /**\n   * If the `isFlashbarStacked` is true (which is only possible if `stackItems` is true)\n   * then the first item should be rendered followed by two dummy items that visually indicate\n   * two, three, or more items exist in the stack.\n   */\n  function renderStackedItems() {\n    if (!isFlashbarStacked) {\n      return;\n    }\n\n    const stackDepth = Math.min(3, items.length);\n    const stackedItems = items.slice(0, stackDepth);\n\n    return (\n      <div className={styles.stack} style={{ [customCssProps.flashbarStackDepth]: stackDepth }}>\n        {!isFlashbarStackExpanded && (\n          <div className={clsx(styles.collapsed, isVisualRefresh && styles['visual-refresh'])}>\n            {stackedItems.map((item, index) => (\n              <div className={styles.item} style={{ [customCssProps.flashbarStackIndex]: index }} key={index}>\n                {index === 0 && (\n                  <ul className={styles['flash-list']}>\n                    <li className={styles['flash-list-item']}>{renderItem(item, item.id ?? index)}</li>\n                  </ul>\n                )}\n                {index > 0 && <div className={clsx(styles.flash, styles[`flash-type-${item.type ?? 'info'}`])} />}\n              </div>\n            ))}\n          </div>\n        )}\n\n        {isFlashbarStackExpanded && (\n          <ul className={clsx(styles['flash-list'], styles.expanded)}>\n            {items.map((item, index) => (\n              <li key={item.id ?? index} className={styles['flash-list-item']}>\n                {renderItem(item, item.id ?? index)}\n              </li>\n            ))}\n          </ul>\n        )}\n\n        <button\n          aria-label={getStackButtonAriaLabel()}\n          className={clsx(styles.toggle, isVisualRefresh && styles['visual-refresh'])}\n          onClick={() => setIsFlashbarStackExpanded(!isFlashbarStackExpanded)}\n          {...isFocusVisible}\n        >\n          <span className={clsx(styles.icon, isFlashbarStackExpanded && styles.expanded)}>\n            <InternalIcon size=\"small\" name=\"angle-down\" />\n          </span>\n        </button>\n      </div>\n    );\n  }\n\n  /**\n   * If the flashbar is flat and motion is `enabled` then the adding and removing of items\n   * from the flashbar will render with visual transitions.\n   */\n  function renderFlatItemsWithTransitions() {\n    if (isFlashbarStacked || motionDisabled || !items) {\n      return;\n    }\n\n    return (\n      // This is a proxy for <ul>, so we're not applying a class to another actual component.\n      // eslint-disable-next-line react/forbid-component-props\n      <TransitionGroup component=\"ul\" className={styles['flash-list']}>\n        {items &&\n          items.map((item, index) => (\n            <Transition\n              transitionChangeDelay={{ entering: TIMEOUT_FOR_ENTERING_ANIMATION }}\n              key={item.id ?? index}\n              in={true}\n            >\n              {(state: string, transitionRootElement: React.Ref<HTMLDivElement> | undefined) => (\n                <li className={styles['flash-list-item']}>\n                  {renderItem(item, item.id ?? index, transitionRootElement, state)}\n                </li>\n              )}\n            </Transition>\n          ))}\n      </TransitionGroup>\n    );\n  }\n\n  /**\n   * If the flashbar is flat and motion is `disabled` then the adding and removing of items\n   * from the flashbar will render without visual transitions.\n   */\n  function renderFlatItemsWithoutTransitions() {\n    if (isFlashbarStacked || !motionDisabled || !items) {\n      return;\n    }\n\n    return (\n      <ul className={styles['flash-list']}>\n        {items.map((item, index) => (\n          <li key={item.id ?? index} className={styles['flash-list-item']}>\n            {renderItem(item, item.id ?? index)}\n          </li>\n        ))}\n      </ul>\n    );\n  }\n\n  /**\n   * This is a shared render function for a single flashbar item to be used\n   * by the stacking, motion, and non-motion item group render functions.\n   */\n  function renderItem(\n    item: FlashbarProps.MessageDefinition,\n    key: string | number,\n    transitionRootElement?: React.Ref<HTMLDivElement> | undefined,\n    transitionState?: string | undefined\n  ) {\n    return (\n      <Flash\n        // eslint-disable-next-line react/forbid-component-props\n        className={clsx(getVisualContextClassname('flashbar'), isVisualRefresh ? styles['flash-refresh'] : '')}\n        key={key}\n        ref={transitionRootElement}\n        transitionState={transitionState}\n        {...item}\n      />\n    );\n  }\n\n  return (\n    <div\n      {...baseProps}\n      className={clsx(baseProps.className, styles.flashbar, styles[`breakpoint-${breakpoint}`])}\n      ref={mergedRef}\n    >\n      {renderStackedItems()}\n      {renderFlatItemsWithTransitions()}\n      {renderFlatItemsWithoutTransitions()}\n    </div>\n  );\n}\n\nfunction isStackedFlashbar(props: any): props is StackedFlashbarProps {\n  return 'stackItems' in props && !!props.stackItems;\n}\n\napplyDisplayName(Flashbar, 'Flashbar');\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/flashbar/index.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACzC,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AAExE,OAAO,mBAAmB,MAAM,wBAAwB,CAAC;AACzD,OAAO,sBAAsB,MAAM,4BAA4B,CAAC;AAEhE,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAIxD,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,KAA+C;IAC9E,SAAS,CAAC;QACR,IAAI,KAAK,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE;YAC1B,gBAAgB,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;SAC/B;IACH,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;IAElB,IAAI,iBAAiB,CAAC,KAAK,CAAC,EAAE;QAC5B,OAAO,oBAAC,mBAAmB,eAAK,KAAK,EAAI,CAAC;KAC3C;SAAM;QACL,OAAO,oBAAC,sBAAsB,eAAK,KAAK,EAAI,CAAC;KAC9C;AACH,CAAC;AAED,SAAS,iBAAiB,CAAC,KAAU;IACnC,OAAO,YAAY,IAAI,KAAK,IAAI,KAAK,CAAC,UAAU,CAAC;AACnD,CAAC;AAED,gBAAgB,CAAC,QAAQ,EAAE,UAAU,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useEffect } from 'react';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport { FlashbarProps, CollapsibleFlashbarProps } from './interfaces';\nimport CollapsibleFlashbar from './collapsible-flashbar';\nimport NonCollapsibleFlashbar from './non-collapsible-flashbar';\n\nimport { sendRenderMetric } from './internal/analytics';\n\nexport { FlashbarProps };\n\nexport default function Flashbar(props: FlashbarProps | CollapsibleFlashbarProps) {\n  useEffect(() => {\n    if (props.items.length > 0) {\n      sendRenderMetric(props.items);\n    }\n  }, [props.items]);\n\n  if (isStackedFlashbar(props)) {\n    return <CollapsibleFlashbar {...props} />;\n  } else {\n    return <NonCollapsibleFlashbar {...props} />;\n  }\n}\n\nfunction isStackedFlashbar(props: any): props is CollapsibleFlashbarProps {\n  return 'stackItems' in props && props.stackItems;\n}\n\napplyDisplayName(Flashbar, 'Flashbar');\n"]}

package/flashbar/interfaces.d.ts

@@ -50,15 +50,22 @@ export interface FlashbarProps extends BaseComponentProps {
      */
     items: ReadonlyArray<FlashbarProps.MessageDefinition>;
 }
-export interface StackedFlashbarProps {
-    stackItems: true;
-    ariaLabels?: StackedFlashbarProps.AriaLabels;
+export type FlashType = FlashbarProps.Type | 'progress';
+export interface CollapsibleFlashbarProps {
     items: ReadonlyArray<FlashbarProps.MessageDefinition>;
+    stackItems: boolean;
+    i18nStrings?: CollapsibleFlashbarProps.I18nStrings;
 }
-export declare namespace StackedFlashbarProps {
-    interface AriaLabels {
-        stackCollapseLabel?: string;
-        stackExpandLabel?: string;
+export declare namespace CollapsibleFlashbarProps {
+    interface I18nStrings {
+        ariaLabel: string;
+        toggleButtonAriaLabel: string;
+        toggleButtonText: string;
+        errorCountAriaLabel?: string;
+        warningCountAriaLabel?: string;
+        successCountAriaLabel?: string;
+        infoCountAriaLabel?: string;
+        inProgressCountAriaLabel?: string;
     }
 }
 //# sourceMappingURL=interfaces.d.ts.map

package/flashbar/interfaces.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/flashbar/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAEnD,yBAAiB,aAAa,CAAC;IAC7B,UAAiB,iBAAiB;QAChC,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;QACzB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;QAC1B,WAAW,CAAC,EAAE,OAAO,CAAC;QACtB,YAAY,CAAC,EAAE,MAAM,CAAC;QACtB,mBAAmB,CAAC,EAAE,MAAM,CAAC;QAC7B,OAAO,CAAC,EAAE,OAAO,CAAC;QAClB,IAAI,CAAC,EAAE,aAAa,CAAC,IAAI,CAAC;QAC1B,QAAQ,CAAC,EAAE,aAAa,CAAC,QAAQ,CAAC;QAClC,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;QACzB,EAAE,CAAC,EAAE,MAAM,CAAC;QACZ,UAAU,CAAC,EAAE,WAAW,CAAC,UAAU,CAAC,CAAC;QACrC,aAAa,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;QACvC,SAAS,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;KACpC;IAED,KAAY,IAAI,GAAG,SAAS,GAAG,SAAS,GAAG,MAAM,GAAG,OAAO,CAAC;IAC5D,KAAY,QAAQ,GAAG,OAAO,GAAG,QAAQ,CAAC;CAC3C;AAED,MAAM,WAAW,aAAc,SAAQ,kBAAkB;IACvD;;;;;;;;;;;;;;;;;;;;;;;;;;OA0BG;IACH,KAAK,EAAE,aAAa,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAAC;CACvD;AAED,MAAM,WAAW,oBAAoB;IACnC,UAAU,EAAE,IAAI,CAAC;IACjB,UAAU,CAAC,EAAE,oBAAoB,CAAC,UAAU,CAAC;IAC7C,KAAK,EAAE,aAAa,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAAC;CACvD;AAED,yBAAiB,oBAAoB,CAAC;IACpC,UAAiB,UAAU;QACzB,kBAAkB,CAAC,EAAE,MAAM,CAAC;QAC5B,gBAAgB,CAAC,EAAE,MAAM,CAAC;KAC3B;CACF"}
+{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/flashbar/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAEnD,yBAAiB,aAAa,CAAC;IAC7B,UAAiB,iBAAiB;QAChC,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;QACzB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;QAC1B,WAAW,CAAC,EAAE,OAAO,CAAC;QACtB,YAAY,CAAC,EAAE,MAAM,CAAC;QACtB,mBAAmB,CAAC,EAAE,MAAM,CAAC;QAC7B,OAAO,CAAC,EAAE,OAAO,CAAC;QAClB,IAAI,CAAC,EAAE,aAAa,CAAC,IAAI,CAAC;QAC1B,QAAQ,CAAC,EAAE,aAAa,CAAC,QAAQ,CAAC;QAClC,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;QACzB,EAAE,CAAC,EAAE,MAAM,CAAC;QACZ,UAAU,CAAC,EAAE,WAAW,CAAC,UAAU,CAAC,CAAC;QACrC,aAAa,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;QACvC,SAAS,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;KACpC;IAED,KAAY,IAAI,GAAG,SAAS,GAAG,SAAS,GAAG,MAAM,GAAG,OAAO,CAAC;IAC5D,KAAY,QAAQ,GAAG,OAAO,GAAG,QAAQ,CAAC;CAC3C;AAED,MAAM,WAAW,aAAc,SAAQ,kBAAkB;IACvD;;;;;;;;;;;;;;;;;;;;;;;;;;OA0BG;IACH,KAAK,EAAE,aAAa,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAAC;CACvD;AAED,MAAM,MAAM,SAAS,GAAG,aAAa,CAAC,IAAI,GAAG,UAAU,CAAC;AAExD,MAAM,WAAW,wBAAwB;IACvC,KAAK,EAAE,aAAa,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAAC;IACtD,UAAU,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,wBAAwB,CAAC,WAAW,CAAC;CACpD;AAED,yBAAiB,wBAAwB,CAAC;IACxC,UAAiB,WAAW;QAC1B,SAAS,EAAE,MAAM,CAAC;QAClB,qBAAqB,EAAE,MAAM,CAAC;QAC9B,gBAAgB,EAAE,MAAM,CAAC;QACzB,mBAAmB,CAAC,EAAE,MAAM,CAAC;QAC7B,qBAAqB,CAAC,EAAE,MAAM,CAAC;QAC/B,qBAAqB,CAAC,EAAE,MAAM,CAAC;QAC/B,kBAAkB,CAAC,EAAE,MAAM,CAAC;QAC5B,wBAAwB,CAAC,EAAE,MAAM,CAAC;KACnC;CACF"}

package/flashbar/interfaces.js.map

@@ -1 +1 @@
-{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/flashbar/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { BaseComponentProps } from '../internal/base-component';\nimport React from 'react';\nimport { ButtonProps } from '../button/interfaces';\n\nexport namespace FlashbarProps {\n  export interface MessageDefinition {\n    header?: React.ReactNode;\n    content?: React.ReactNode;\n    dismissible?: boolean;\n    dismissLabel?: string;\n    statusIconAriaLabel?: string;\n    loading?: boolean;\n    type?: FlashbarProps.Type;\n    ariaRole?: FlashbarProps.AriaRole;\n    action?: React.ReactNode;\n    id?: string;\n    buttonText?: ButtonProps['children'];\n    onButtonClick?: ButtonProps['onClick'];\n    onDismiss?: ButtonProps['onClick'];\n  }\n\n  export type Type = 'success' | 'warning' | 'info' | 'error';\n  export type AriaRole = 'alert' | 'status';\n}\n\nexport interface FlashbarProps extends BaseComponentProps {\n  /**\n   * Specifies flash messages that appear in the same order that they are listed.\n   * The value is an array of flash message definition objects.\n   *\n   * A flash message object contains the following properties:\n   * * `header` (ReactNode) - Specifies the heading text.\n   * * `content` (ReactNode) - Specifies the primary text displayed in the flash element.\n   * * `type` (string) - Indicates the type of the message to be displayed. Allowed values are as follows: `success, error, warning, info`. The default is `info`.\n   * * `loading` (boolean) - Replaces the status icon with a spinner and forces the type to `info`.\n   * * `dismissible` (boolean) - Determines whether the component includes a close button icon. By default, the close button is not included.\n   * When a user clicks on this button the `onDismiss` handler is called.\n   * * `dismissLabel` (string) - Specifies an `aria-label` for to the dismiss icon button for improved accessibility.\n   * * `statusIconAriaLabel` (string) - Specifies an `aria-label` for to the status icon for improved accessibility.\n   * * `ariaRole` (string) - For flash messages added after page load, specifies how this message is communicated to assistive\n   * technology. Use \"status\" for status updates or informational content. Use \"alert\" for important messages that need the\n   * user's attention.\n   * * `action` (ReactNode) - Specifies an action for the flash message. Although it is technically possible to insert any content,\n   * our UX guidelines only allow you to add a button.\n   * * `buttonText` (string) - Specifies that an action button should be displayed, with the specified text.\n   * When a user clicks on this button the `onButtonClick` handler is called.\n   * If the `action` property is set, this property is ignored. **Deprecated**, replaced by `action`.\n   * * `onButtonClick` (event => void) - Called when a user clicks on the action button. This is not called if you create a custom button\n   *   using the `action` property. **Deprecated**, replaced by `action`.\n   * * `id` (string) - Specifies a unique flash message identifier. This property is used in two ways:\n   *   1. As a [keys](https://reactjs.org/docs/lists-and-keys.html#keys) source for React rendering.\n   *   2. To identify which flash message will be removed from the DOM when it is dismissed, to animate it out.\n   */\n  items: ReadonlyArray<FlashbarProps.MessageDefinition>;\n}\n\nexport interface StackedFlashbarProps {\n  stackItems: true;\n  ariaLabels?: StackedFlashbarProps.AriaLabels;\n  items: ReadonlyArray<FlashbarProps.MessageDefinition>;\n}\n\nexport namespace StackedFlashbarProps {\n  export interface AriaLabels {\n    stackCollapseLabel?: string;\n    stackExpandLabel?: string;\n  }\n}\n"]}
+{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/flashbar/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { BaseComponentProps } from '../internal/base-component';\nimport React from 'react';\nimport { ButtonProps } from '../button/interfaces';\n\nexport namespace FlashbarProps {\n  export interface MessageDefinition {\n    header?: React.ReactNode;\n    content?: React.ReactNode;\n    dismissible?: boolean;\n    dismissLabel?: string;\n    statusIconAriaLabel?: string;\n    loading?: boolean;\n    type?: FlashbarProps.Type;\n    ariaRole?: FlashbarProps.AriaRole;\n    action?: React.ReactNode;\n    id?: string;\n    buttonText?: ButtonProps['children'];\n    onButtonClick?: ButtonProps['onClick'];\n    onDismiss?: ButtonProps['onClick'];\n  }\n\n  export type Type = 'success' | 'warning' | 'info' | 'error';\n  export type AriaRole = 'alert' | 'status';\n}\n\nexport interface FlashbarProps extends BaseComponentProps {\n  /**\n   * Specifies flash messages that appear in the same order that they are listed.\n   * The value is an array of flash message definition objects.\n   *\n   * A flash message object contains the following properties:\n   * * `header` (ReactNode) - Specifies the heading text.\n   * * `content` (ReactNode) - Specifies the primary text displayed in the flash element.\n   * * `type` (string) - Indicates the type of the message to be displayed. Allowed values are as follows: `success, error, warning, info`. The default is `info`.\n   * * `loading` (boolean) - Replaces the status icon with a spinner and forces the type to `info`.\n   * * `dismissible` (boolean) - Determines whether the component includes a close button icon. By default, the close button is not included.\n   * When a user clicks on this button the `onDismiss` handler is called.\n   * * `dismissLabel` (string) - Specifies an `aria-label` for to the dismiss icon button for improved accessibility.\n   * * `statusIconAriaLabel` (string) - Specifies an `aria-label` for to the status icon for improved accessibility.\n   * * `ariaRole` (string) - For flash messages added after page load, specifies how this message is communicated to assistive\n   * technology. Use \"status\" for status updates or informational content. Use \"alert\" for important messages that need the\n   * user's attention.\n   * * `action` (ReactNode) - Specifies an action for the flash message. Although it is technically possible to insert any content,\n   * our UX guidelines only allow you to add a button.\n   * * `buttonText` (string) - Specifies that an action button should be displayed, with the specified text.\n   * When a user clicks on this button the `onButtonClick` handler is called.\n   * If the `action` property is set, this property is ignored. **Deprecated**, replaced by `action`.\n   * * `onButtonClick` (event => void) - Called when a user clicks on the action button. This is not called if you create a custom button\n   *   using the `action` property. **Deprecated**, replaced by `action`.\n   * * `id` (string) - Specifies a unique flash message identifier. This property is used in two ways:\n   *   1. As a [keys](https://reactjs.org/docs/lists-and-keys.html#keys) source for React rendering.\n   *   2. To identify which flash message will be removed from the DOM when it is dismissed, to animate it out.\n   */\n  items: ReadonlyArray<FlashbarProps.MessageDefinition>;\n}\n\nexport type FlashType = FlashbarProps.Type | 'progress';\n\nexport interface CollapsibleFlashbarProps {\n  items: ReadonlyArray<FlashbarProps.MessageDefinition>;\n  stackItems: boolean;\n  i18nStrings?: CollapsibleFlashbarProps.I18nStrings;\n}\n\nexport namespace CollapsibleFlashbarProps {\n  export interface I18nStrings {\n    ariaLabel: string;\n    toggleButtonAriaLabel: string;\n    toggleButtonText: string;\n    errorCountAriaLabel?: string;\n    warningCountAriaLabel?: string;\n    successCountAriaLabel?: string;\n    infoCountAriaLabel?: string;\n    inProgressCountAriaLabel?: string;\n  }\n}\n"]}

package/flashbar/internal/analytics.d.ts

@@ -0,0 +1,5 @@
+import { FlashbarProps } from '../interfaces';
+export declare const sendRenderMetric: (items: FlashbarProps['items']) => void;
+export declare const sendToggleMetric: (itemsCount: number, expanded: boolean) => void;
+export declare const sendDismissMetric: (itemType: string) => void;
+//# sourceMappingURL=analytics.d.ts.map

package/flashbar/internal/analytics.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"analytics.d.ts","sourceRoot":"","sources":["../../../../src/flashbar/internal/analytics.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAK9C,eAAO,MAAM,gBAAgB,UAAW,aAAa,CAAC,OAAO,CAAC,SAS7D,CAAC;AAEF,eAAO,MAAM,gBAAgB,eAAgB,MAAM,YAAY,OAAO,SAMrE,CAAC;AAEF,eAAO,MAAM,iBAAiB,aAAc,MAAM,SAMjD,CAAC"}

package/flashbar/internal/analytics.js

@@ -0,0 +1,29 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { Metrics } from '../../internal/metrics';
+import { getFlashTypeCount } from '../utils';
+var eventContext = 'csa_flashbar';
+export var sendRenderMetric = function (items) {
+    var countByType = getFlashTypeCount(items);
+    Metrics.sendPanoramaMetric({
+        eventContext: eventContext,
+        eventType: 'render',
+        eventValue: items.length.toString(),
+        eventDetail: countByType
+    });
+};
+export var sendToggleMetric = function (itemsCount, expanded) {
+    Metrics.sendPanoramaMetric({
+        eventContext: eventContext,
+        eventType: expanded ? 'expand' : 'collapse',
+        eventValue: itemsCount.toString()
+    });
+};
+export var sendDismissMetric = function (itemType) {
+    Metrics.sendPanoramaMetric({
+        eventContext: eventContext,
+        eventType: 'dismiss',
+        eventValue: itemType
+    });
+};
+//# sourceMappingURL=analytics.js.map

package/flashbar/internal/analytics.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"analytics.js","sourceRoot":"","sources":["../../../../src/flashbar/internal/analytics.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AAEtC,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AAEjD,OAAO,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAE7C,IAAM,YAAY,GAAG,cAAc,CAAC;AAEpC,MAAM,CAAC,IAAM,gBAAgB,GAAG,UAAC,KAA6B;IAC5D,IAAM,WAAW,GAAG,iBAAiB,CAAC,KAAK,CAAC,CAAC;IAE7C,OAAO,CAAC,kBAAkB,CAAC;QACzB,YAAY,cAAA;QACZ,SAAS,EAAE,QAAQ;QACnB,UAAU,EAAE,KAAK,CAAC,MAAM,CAAC,QAAQ,EAAE;QACnC,WAAW,EAAE,WAAW;KACzB,CAAC,CAAC;AACL,CAAC,CAAC;AAEF,MAAM,CAAC,IAAM,gBAAgB,GAAG,UAAC,UAAkB,EAAE,QAAiB;IACpE,OAAO,CAAC,kBAAkB,CAAC;QACzB,YAAY,cAAA;QACZ,SAAS,EAAE,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU;QAC3C,UAAU,EAAE,UAAU,CAAC,QAAQ,EAAE;KAClC,CAAC,CAAC;AACL,CAAC,CAAC;AAEF,MAAM,CAAC,IAAM,iBAAiB,GAAG,UAAC,QAAgB;IAChD,OAAO,CAAC,kBAAkB,CAAC;QACzB,YAAY,cAAA;QACZ,SAAS,EAAE,SAAS;QACpB,UAAU,EAAE,QAAQ;KACrB,CAAC,CAAC;AACL,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { Metrics } from '../../internal/metrics';\nimport { FlashbarProps } from '../interfaces';\nimport { getFlashTypeCount } from '../utils';\n\nconst eventContext = 'csa_flashbar';\n\nexport const sendRenderMetric = (items: FlashbarProps['items']) => {\n  const countByType = getFlashTypeCount(items);\n\n  Metrics.sendPanoramaMetric({\n    eventContext,\n    eventType: 'render',\n    eventValue: items.length.toString(),\n    eventDetail: countByType,\n  });\n};\n\nexport const sendToggleMetric = (itemsCount: number, expanded: boolean) => {\n  Metrics.sendPanoramaMetric({\n    eventContext,\n    eventType: expanded ? 'expand' : 'collapse',\n    eventValue: itemsCount.toString(),\n  });\n};\n\nexport const sendDismissMetric = (itemType: string) => {\n  Metrics.sendPanoramaMetric({\n    eventContext,\n    eventType: 'dismiss',\n    eventValue: itemType,\n  });\n};\n"]}

package/flashbar/non-collapsible-flashbar.d.ts

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

package/flashbar/non-collapsible-flashbar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"non-collapsible-flashbar.d.ts","sourceRoot":"","sources":["../../../src/flashbar/non-collapsible-flashbar.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAS7C,OAAO,EAAE,aAAa,EAAE,CAAC;AAEzB,MAAM,CAAC,OAAO,UAAU,sBAAsB,CAAC,EAAE,KAAK,EAAE,GAAG,SAAS,EAAE,EAAE,aAAa,eAqGpF"}

package/flashbar/non-collapsible-flashbar.js

@@ -0,0 +1,70 @@
+import { __assign, __rest } from "tslib";
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import clsx from 'clsx';
+import React from 'react';
+import { Flash } from './flash';
+import { TIMEOUT_FOR_ENTERING_ANIMATION } from './constant';
+import { TransitionGroup } from 'react-transition-group';
+import { Transition } from '../internal/components/transition';
+import { getVisualContextClassname } from '../internal/components/visual-context';
+import styles from './styles.css.js';
+import { useFlashbar } from './common';
+export default function NonCollapsibleFlashbar(_a) {
+    var items = _a.items, restProps = __rest(_a, ["items"]);
+    var _b = useFlashbar(__assign({ items: items }, restProps)), allItemsHaveId = _b.allItemsHaveId, baseProps = _b.baseProps, breakpoint = _b.breakpoint, isReducedMotion = _b.isReducedMotion, isVisualRefresh = _b.isVisualRefresh, mergedRef = _b.mergedRef;
+    /**
+     * All the flash items should have ids so we can identify which DOM element is being
+     * removed from the DOM to animate it. Motion will be disabled if any of the provided
+     * flash messages does not contain an `id`.
+     */
+    var motionDisabled = isReducedMotion || !isVisualRefresh || !allItemsHaveId;
+    var 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.
+     */
+    function renderFlatItemsWithTransitions() {
+        if (motionDisabled || !items) {
+            return;
+        }
+        return (
+        // This is a proxy for <ul>, so we're not applying a class to another actual component.
+        // eslint-disable-next-line react/forbid-component-props
+        React.createElement(TransitionGroup, { component: "ul", className: styles['flash-list'] }, items.map(function (item, index) {
+            var _a;
+            return (React.createElement(Transition, { transitionChangeDelay: { entering: TIMEOUT_FOR_ENTERING_ANIMATION }, key: (_a = item.id) !== null && _a !== void 0 ? _a : index, "in": true }, function (state, transitionRootElement) {
+                var _a;
+                return (React.createElement("li", { className: styles['flash-list-item'] }, renderItem(item, (_a = item.id) !== null && _a !== void 0 ? _a : index, transitionRootElement, state)));
+            }));
+        })));
+    }
+    /**
+     * If the flashbar is flat and motion is `disabled` then the adding and removing of items
+     * from the flashbar will render without visual transitions.
+     */
+    function renderFlatItemsWithoutTransitions() {
+        if (!motionDisabled || !items) {
+            return;
+        }
+        return (React.createElement("ul", { className: styles['flash-list'] }, items.map(function (item, index) {
+            var _a, _b;
+            return (React.createElement("li", { key: (_a = item.id) !== null && _a !== void 0 ? _a : index, className: styles['flash-list-item'] }, renderItem(item, (_b = item.id) !== null && _b !== void 0 ? _b : index)));
+        })));
+    }
+    /**
+     * This is a shared render function for a single flashbar item to be used
+     * by the stacking, motion, and non-motion item group render functions.
+     */
+    function renderItem(item, key, transitionRootElement, transitionState) {
+        return (React.createElement(Flash
+        // eslint-disable-next-line react/forbid-component-props
+        , __assign({ 
+            // eslint-disable-next-line react/forbid-component-props
+            className: clsx(getVisualContextClassname('flashbar'), animateFlash && styles['flash-with-motion'], isVisualRefresh && styles['flash-refresh']), key: key, ref: transitionRootElement, transitionState: transitionState }, item)));
+    }
+    return (React.createElement("div", __assign({}, baseProps, { className: clsx(baseProps.className, styles.flashbar, styles["breakpoint-".concat(breakpoint)]), ref: mergedRef }),
+        renderFlatItemsWithTransitions(),
+        renderFlatItemsWithoutTransitions()));
+}
+//# sourceMappingURL=non-collapsible-flashbar.js.map

package/flashbar/non-collapsible-flashbar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"non-collapsible-flashbar.js","sourceRoot":"","sources":["../../../src/flashbar/non-collapsible-flashbar.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport clsx from 'clsx';\nimport React from 'react';\nimport { Flash } from './flash';\nimport { FlashbarProps } from './interfaces';\nimport { TIMEOUT_FOR_ENTERING_ANIMATION } from './constant';\nimport { TransitionGroup } from 'react-transition-group';\nimport { Transition } from '../internal/components/transition';\nimport { getVisualContextClassname } from '../internal/components/visual-context';\n\nimport styles from './styles.css.js';\nimport { useFlashbar } from './common';\n\nexport { FlashbarProps };\n\nexport default function NonCollapsibleFlashbar({ items, ...restProps }: FlashbarProps) {\n  const { allItemsHaveId, baseProps, breakpoint, isReducedMotion, isVisualRefresh, mergedRef } = useFlashbar({\n    items,\n    ...restProps,\n  });\n\n  /**\n   * All the flash items should have ids so we can identify which DOM element is being\n   * removed from the DOM to animate it. Motion will be disabled if any of the provided\n   * flash messages does not contain an `id`.\n   */\n  const motionDisabled = isReducedMotion || !isVisualRefresh || !allItemsHaveId;\n\n  const animateFlash = !isReducedMotion && isVisualRefresh;\n\n  /**\n   * If the flashbar is flat and motion is `enabled` then the adding and removing of items\n   * from the flashbar will render with visual transitions.\n   */\n  function renderFlatItemsWithTransitions() {\n    if (motionDisabled || !items) {\n      return;\n    }\n\n    return (\n      // This is a proxy for <ul>, so we're not applying a class to another actual component.\n      // eslint-disable-next-line react/forbid-component-props\n      <TransitionGroup component=\"ul\" className={styles['flash-list']}>\n        {items.map((item, index) => (\n          <Transition\n            transitionChangeDelay={{ entering: TIMEOUT_FOR_ENTERING_ANIMATION }}\n            key={item.id ?? index}\n            in={true}\n          >\n            {(state: string, transitionRootElement: React.Ref<HTMLDivElement> | undefined) => (\n              <li className={styles['flash-list-item']}>\n                {renderItem(item, item.id ?? index, transitionRootElement, state)}\n              </li>\n            )}\n          </Transition>\n        ))}\n      </TransitionGroup>\n    );\n  }\n\n  /**\n   * If the flashbar is flat and motion is `disabled` then the adding and removing of items\n   * from the flashbar will render without visual transitions.\n   */\n  function renderFlatItemsWithoutTransitions() {\n    if (!motionDisabled || !items) {\n      return;\n    }\n\n    return (\n      <ul className={styles['flash-list']}>\n        {items.map((item, index) => (\n          <li key={item.id ?? index} className={styles['flash-list-item']}>\n            {renderItem(item, item.id ?? index)}\n          </li>\n        ))}\n      </ul>\n    );\n  }\n\n  /**\n   * This is a shared render function for a single flashbar item to be used\n   * by the stacking, motion, and non-motion item group render functions.\n   */\n  function renderItem(\n    item: FlashbarProps.MessageDefinition,\n    key: string | number,\n    transitionRootElement?: React.Ref<HTMLDivElement> | undefined,\n    transitionState?: string | undefined\n  ) {\n    return (\n      <Flash\n        // eslint-disable-next-line react/forbid-component-props\n        className={clsx(\n          getVisualContextClassname('flashbar'),\n          animateFlash && styles['flash-with-motion'],\n          isVisualRefresh && styles['flash-refresh']\n        )}\n        key={key}\n        ref={transitionRootElement}\n        transitionState={transitionState}\n        {...item}\n      />\n    );\n  }\n\n  return (\n    <div\n      {...baseProps}\n      className={clsx(baseProps.className, styles.flashbar, styles[`breakpoint-${breakpoint}`])}\n      ref={mergedRef}\n    >\n      {renderFlatItemsWithTransitions()}\n      {renderFlatItemsWithoutTransitions()}\n    </div>\n  );\n}\n"]}