@cloudscape-design/components-themeable 3.0.117 → 3.0.118

package/lib/internal/template/flashbar/flash.js

@@ -1,4 +1,3 @@
-import { __assign } from "tslib";
 import React from 'react';
 import InternalSpinner from '../spinner/internal';
 import InternalIcon from '../icon/internal';
@@ -7,10 +6,6 @@ import styles from './styles.css.js';
 import { InternalButton } from '../button/internal';
 import { warnOnce } from '../internal/logging';
 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;
 var ICON_TYPES = {
     success: 'status-positive',
     warning: 'status-warning',
@@ -24,15 +19,9 @@ function dismissButton(dismissLabel, onDismiss) {
     return (React.createElement("div", { className: styles['dismiss-button-wrapper'] },
         React.createElement(InternalButton, { onClick: onDismiss, className: styles['dismiss-button'], variant: "flashbar-icon", iconName: "close", formAction: "none", ariaLabel: dismissLabel })));
 }
-export var focusFlashById = throttle(function (element, itemId) {
-    var _a;
-    var selector = "[data-itemid=\"".concat(CSS.escape(itemId), "\"] .").concat(styles['flash-focus-container']);
-    (_a = element === null || element === void 0 ? void 0 : element.querySelector(selector)) === null || _a === void 0 ? void 0 : _a.focus();
-}, FOCUS_THROTTLE_DELAY, { trailing: false });
 export var Flash = React.forwardRef(function (_a, ref) {
     var _b;
-    var id = _a.id, header = _a.header, content = _a.content, dismissible = _a.dismissible, dismissLabel = _a.dismissLabel, statusIconAriaLabel = _a.statusIconAriaLabel, loading = _a.loading, action = _a.action, buttonText = _a.buttonText, onButtonClick = _a.onButtonClick, onDismiss = _a.onDismiss, className = _a.className, transitionState = _a.transitionState, ariaRole = _a.ariaRole, _c = _a.type, type = _c === void 0 ? 'info' : _c;
-    var focusVisible = useFocusVisible();
+    var header = _a.header, content = _a.content, dismissible = _a.dismissible, dismissLabel = _a.dismissLabel, statusIconAriaLabel = _a.statusIconAriaLabel, loading = _a.loading, action = _a.action, buttonText = _a.buttonText, onButtonClick = _a.onButtonClick, onDismiss = _a.onDismiss, className = _a.className, transitionState = _a.transitionState, _c = _a.type, type = _c === void 0 ? 'info' : _c;
     if (isDevelopment) {
         if (buttonText && !onButtonClick) {
             warnOnce('Flashbar', "You provided a `buttonText` prop without an `onButtonClick` handler. This will render a non-interactive action button.");
@@ -45,26 +34,21 @@ export var Flash = React.forwardRef(function (_a, ref) {
     var iconType = ICON_TYPES[type];
     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(' ');
-    return (
-    // We're not using "polite" or "assertive" here, just turning default behavior off.
-    // eslint-disable-next-line @cloudscape-design/prefer-live-region
-    React.createElement("div", { ref: ref, role: ariaRole, "aria-live": ariaRole ? 'off' : undefined, "data-itemid": id, className: clsx(styles.flash, styles["flash-type-".concat(effectiveType)], className, transitionState && (_b = {},
-            _b[styles.enter] = transitionState === 'enter',
-            _b[styles.entering] = transitionState === 'entering',
-            _b[styles.entered] = transitionState === 'entered',
-            _b[styles.exit] = transitionState === 'exit',
-            _b[styles.exiting] = transitionState === 'exiting',
-            _b[styles.exited] = transitionState === 'exited',
-            _b)) },
+    return (React.createElement("div", { ref: ref, className: clsx(styles.flash, styles["flash-type-".concat(effectiveType)], className, transitionState
+            ? (_b = {},
+                _b[styles.enter] = transitionState === 'enter',
+                _b[styles.entering] = transitionState === 'entering',
+                _b[styles.entered] = transitionState === 'entered',
+                _b[styles.exit] = transitionState === 'exit',
+                _b[styles.exiting] = transitionState === 'exiting',
+                _b[styles.exited] = transitionState === 'exited',
+                _b) : '') },
+        React.createElement("div", { className: clsx(styles['flash-icon'], styles['flash-text']), role: "img", "aria-label": statusIconAriaLabel }, icon),
         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", { 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))),
+            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),
-        ariaRole === 'status' && React.createElement(LiveRegion, null, announcement)));
+        dismissible && dismissButton(dismissLabel, onDismiss)));
 });
 //# sourceMappingURL=flash.js.map

package/lib/internal/template/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';\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\ninterface Flash extends FlashbarProps.MessageDefinition {\n  className: string;\n  transitionState?: string;\n}\n\nexport const Flash = React.forwardRef(\n  (\n    {\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      type = 'info',\n    }: Flash,\n    ref: React.Ref<HTMLDivElement>\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    return (\n      <div\n        ref={ref}\n        className={clsx(\n          styles.flash,\n          styles[`flash-type-${effectiveType}`],\n          className,\n          transitionState\n            ? {\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      >\n        <div className={clsx(styles['flash-icon'], styles['flash-text'])} role=\"img\" aria-label={statusIconAriaLabel}>\n          {icon}\n        </div>\n        <div className={styles['flash-body']}>\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          {button && <div className={styles['action-button-wrapper']}>{button}</div>}\n        </div>\n        {dismissible && dismissButton(dismissLabel, onDismiss)}\n      </div>\n    );\n  }\n);\n"]}

package/lib/internal/template/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":"AAOA,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAc7C,OAAO,EAAE,aAAa,EAAE,CAAC;AAEzB,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,EAAE,KAAK,EAAE,GAAG,SAAS,EAAE,EAAE,aAAa,eAgKtE"}

package/lib/internal/template/flashbar/index.js

@@ -2,10 +2,10 @@ 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, { useEffect, useRef, useState } from 'react';
+import React, { useState } from 'react';
 import { applyDisplayName } from '../internal/utils/apply-display-name';
 import customCssProps from '../internal/generated/custom-css-properties';
-import { Flash, focusFlashById } from './flash';
+import { Flash } from './flash';
 import { getBaseProps } from '../internal/base-component';
 import InternalIcon from '../icon/internal';
 import { TIMEOUT_FOR_ENTERING_ANIMATION } from './constant';
@@ -21,55 +21,25 @@ 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 _b = useContainerBreakpoints(['xs']), breakpoint = _b[0], ref = _b[1];
     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 mergedRef = useMergeRefs(ref, __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);
-            }
-        }
-    }
-    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; }));
+    var motionDisabled = useReducedMotion(ref) || !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 stackItems = restProps.stackItems;
+    var ariaLabels = 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];
+    var _c = useState(false), isFlashbarStackExpanded = _c[0], setIsFlashbarStackExpanded = _c[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
@@ -103,17 +73,12 @@ export default function Flashbar(_a) {
                 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 && 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)));
-            }))),
+            isFlashbarStackExpanded && (React.createElement("div", { className: styles.expanded }, items.map(function (item, index) { var _a; return renderItem(item, (_a = item.id) !== null && _a !== void 0 ? _a : 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" })))));
+                React.createElement(InternalIcon, { className: clsx(styles.icon, isFlashbarStackExpanded && styles.expanded), size: "small", name: "angle-down" }))));
     }
     /**
      * If the flashbar is flat and motion is `enabled` then the adding and removing of items
@@ -123,16 +88,10 @@ export default function Flashbar(_a) {
         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 &&
+        return (React.createElement(TransitionGroup, { component: null }, 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)));
-                }));
+                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 renderItem(item, (_a = item.id) !== null && _a !== void 0 ? _a : index, transitionRootElement, state); }));
             })));
     }
     /**
@@ -143,10 +102,7 @@ export default function Flashbar(_a) {
         if (isFlashbarStacked || !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)));
-        })));
+        return React.createElement(React.Fragment, null, items.map(function (item, index) { var _a; return renderItem(item, (_a = item.id) !== null && _a !== void 0 ? _a : index); }));
     }
     /**
      * This is a shared render function for a single flashbar item to be used
@@ -164,8 +120,5 @@ export default function Flashbar(_a) {
         renderFlatItemsWithTransitions(),
         renderFlatItemsWithoutTransitions()));
 }
-function isStackedFlashbar(props) {
-    return 'stackItems' in props && !!props.stackItems;
-}
 applyDisplayName(Flashbar, 'Flashbar');
 //# sourceMappingURL=index.js.map

package/lib/internal/template/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":"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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, { useState } from 'react';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport customCssProps from '../internal/generated/custom-css-properties';\nimport { Flash } from './flash';\nimport { FlashbarProps } 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';\nimport styles from './styles.css.js';\n\nexport { FlashbarProps };\n\nexport default function Flashbar({ items, ...restProps }: FlashbarProps) {\n  const { __internalRootRef } = useBaseComponent('Flashbar');\n  const [breakpoint, ref] = useContainerBreakpoints(['xs']);\n  const baseProps = getBaseProps(restProps);\n  const mergedRef = useMergeRefs(ref, __internalRootRef);\n  const isFocusVisible = useFocusVisible();\n  const isVisualRefresh = useVisualRefresh();\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(ref 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 = (restProps as any).stackItems;\n  const ariaLabels = (restProps as any).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 && renderItem(item, item.id ?? index)}\n                {index > 0 && <div className={clsx(styles.flash, styles[`flash-type-${item.type ?? 'info'}`])} />}\n              </div>\n            ))}\n          </div>\n        )}\n\n        {isFlashbarStackExpanded && (\n          <div className={styles.expanded}>{items.map((item, index) => renderItem(item, item.id ?? index))}</div>\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          <InternalIcon\n            className={clsx(styles.icon, isFlashbarStackExpanded && styles.expanded)}\n            size=\"small\"\n            name=\"angle-down\"\n          />\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      <TransitionGroup component={null}>\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                renderItem(item, item.id ?? index, transitionRootElement, state)\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 <>{items.map((item, index) => renderItem(item, item.id ?? index))}</>;\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\napplyDisplayName(Flashbar, 'Flashbar');\n"]}

package/lib/internal/template/flashbar/interfaces.d.ts

@@ -10,7 +10,6 @@ export declare namespace FlashbarProps {
         statusIconAriaLabel?: string;
         loading?: boolean;
         type?: FlashbarProps.Type;
-        ariaRole?: FlashbarProps.AriaRole;
         action?: React.ReactNode;
         id?: string;
         buttonText?: ButtonProps['children'];
@@ -18,7 +17,6 @@ export declare namespace FlashbarProps {
         onDismiss?: ButtonProps['onClick'];
     }
     type Type = 'success' | 'warning' | 'info' | 'error';
-    type AriaRole = 'alert' | 'status';
 }
 export interface FlashbarProps extends BaseComponentProps {
     /**
@@ -34,9 +32,6 @@ export interface FlashbarProps extends BaseComponentProps {
      * When a user clicks on this button the `onDismiss` handler is called.
      * * `dismissLabel` (string) - Specifies an `aria-label` for to the dismiss icon button for improved accessibility.
      * * `statusIconAriaLabel` (string) - Specifies an `aria-label` for to the status icon for improved accessibility.
-     * * `ariaRole` (boolean) - For flash messages added after page load, specifies how this message is communicated to assistive
-     * technology. Use "status" for status updates or informational content. Use "alert" for important messages that need the
-     * user's attention.
      * * `action` (ReactNode) - Specifies an action for the flash message. Although it is technically possible to insert any content,
      * our UX guidelines only allow you to add a button.
      * * `buttonText` (string) - Specifies that an action button should be displayed, with the specified text.
@@ -51,15 +46,4 @@ export interface FlashbarProps extends BaseComponentProps {
      */
     items: ReadonlyArray<FlashbarProps.MessageDefinition>;
 }
-export interface StackedFlashbarProps {
-    stackItems: true;
-    ariaLabels?: StackedFlashbarProps.AriaLabels;
-    items: ReadonlyArray<FlashbarProps.MessageDefinition>;
-}
-export declare namespace StackedFlashbarProps {
-    interface AriaLabels {
-        stackCollapseLabel?: string;
-        stackExpandLabel?: string;
-    }
-}
 //# sourceMappingURL=interfaces.d.ts.map

package/lib/internal/template/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;;;;;;;;;;;;;;;;;;;;;;;;;;;OA2BG;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,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;CAC7D;AAED,MAAM,WAAW,aAAc,SAAQ,kBAAkB;IACvD;;;;;;;;;;;;;;;;;;;;;;;;OAwBG;IACH,KAAK,EAAE,aAAa,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAAC;CACvD"}

package/lib/internal/template/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` (boolean) - 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. If the `action` property is set, this property is ignored.\n   * **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   * @visualrefresh `id` property\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    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}\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   * * `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. If the `action` property is set, this property is ignored.\n   * **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   * @visualrefresh `id` property\n   */\n  items: ReadonlyArray<FlashbarProps.MessageDefinition>;\n}\n"]}

package/lib/internal/template/flashbar/styles.css.js

@@ -1,38 +1,34 @@
 
     import './styles.scoped.css';
     export default {
-  "flash-refresh": "awsui_flash-refresh_1q84n_eh3kk_93",
-  "enter": "awsui_enter_1q84n_eh3kk_93",
-  "flash-body": "awsui_flash-body_1q84n_eh3kk_108",
-  "flash-message": "awsui_flash-message_1q84n_eh3kk_108",
-  "flash-header": "awsui_flash-header_1q84n_eh3kk_108",
-  "flash-content": "awsui_flash-content_1q84n_eh3kk_109",
-  "action-button-wrapper": "awsui_action-button-wrapper_1q84n_eh3kk_110",
-  "dismiss-button-wrapper": "awsui_dismiss-button-wrapper_1q84n_eh3kk_111",
-  "flash-icon": "awsui_flash-icon_1q84n_eh3kk_134",
-  "entering": "awsui_entering_1q84n_eh3kk_147",
-  "entered": "awsui_entered_1q84n_eh3kk_168",
-  "exiting": "awsui_exiting_1q84n_eh3kk_273",
-  "flashbar": "awsui_flashbar_1q84n_eh3kk_295",
-  "flash": "awsui_flash_1q84n_eh3kk_93",
-  "flash-list": "awsui_flash-list_1q84n_eh3kk_350",
-  "flash-focus-container": "awsui_flash-focus-container_1q84n_eh3kk_386",
-  "flash-text": "awsui_flash-text_1q84n_eh3kk_392",
-  "dismiss-button": "awsui_dismiss-button_1q84n_eh3kk_111",
-  "breakpoint-default": "awsui_breakpoint-default_1q84n_eh3kk_433",
-  "flash-list-item": "awsui_flash-list-item_1q84n_eh3kk_433",
-  "action-button": "awsui_action-button_1q84n_eh3kk_110",
-  "flash-type-success": "awsui_flash-type-success_1q84n_eh3kk_446",
-  "flash-type-error": "awsui_flash-type-error_1q84n_eh3kk_450",
-  "flash-type-warning": "awsui_flash-type-warning_1q84n_eh3kk_454",
-  "flash-type-info": "awsui_flash-type-info_1q84n_eh3kk_458",
-  "stack": "awsui_stack_1q84n_eh3kk_462",
-  "expanded": "awsui_expanded_1q84n_eh3kk_467",
-  "collapsed": "awsui_collapsed_1q84n_eh3kk_481",
-  "item": "awsui_item_1q84n_eh3kk_487",
-  "visual-refresh": "awsui_visual-refresh_1q84n_eh3kk_497",
-  "flash-items": "awsui_flash-items_1q84n_eh3kk_503",
-  "toggle": "awsui_toggle_1q84n_eh3kk_510",
-  "icon": "awsui_icon_1q84n_eh3kk_573"
+  "flash-refresh": "awsui_flash-refresh_1q84n_tz676_93",
+  "enter": "awsui_enter_1q84n_tz676_93",
+  "flash-body": "awsui_flash-body_1q84n_tz676_108",
+  "flash-message": "awsui_flash-message_1q84n_tz676_108",
+  "flash-header": "awsui_flash-header_1q84n_tz676_108",
+  "flash-content": "awsui_flash-content_1q84n_tz676_109",
+  "action-button-wrapper": "awsui_action-button-wrapper_1q84n_tz676_110",
+  "dismiss-button-wrapper": "awsui_dismiss-button-wrapper_1q84n_tz676_111",
+  "flash-icon": "awsui_flash-icon_1q84n_tz676_134",
+  "entering": "awsui_entering_1q84n_tz676_147",
+  "entered": "awsui_entered_1q84n_tz676_168",
+  "exiting": "awsui_exiting_1q84n_tz676_273",
+  "flashbar": "awsui_flashbar_1q84n_tz676_295",
+  "flash": "awsui_flash_1q84n_tz676_93",
+  "flash-text": "awsui_flash-text_1q84n_tz676_359",
+  "dismiss-button": "awsui_dismiss-button_1q84n_tz676_111",
+  "breakpoint-default": "awsui_breakpoint-default_1q84n_tz676_401",
+  "action-button": "awsui_action-button_1q84n_tz676_110",
+  "flash-type-success": "awsui_flash-type-success_1q84n_tz676_414",
+  "flash-type-error": "awsui_flash-type-error_1q84n_tz676_418",
+  "flash-type-warning": "awsui_flash-type-warning_1q84n_tz676_422",
+  "flash-type-info": "awsui_flash-type-info_1q84n_tz676_426",
+  "stack": "awsui_stack_1q84n_tz676_430",
+  "expanded": "awsui_expanded_1q84n_tz676_435",
+  "collapsed": "awsui_collapsed_1q84n_tz676_449",
+  "item": "awsui_item_1q84n_tz676_455",
+  "visual-refresh": "awsui_visual-refresh_1q84n_tz676_465",
+  "toggle": "awsui_toggle_1q84n_tz676_472",
+  "icon": "awsui_icon_1q84n_tz676_535"
 };