@cloudscape-design/components 3.0.115 → 3.0.117

package/expandable-section/styles.scoped.css

@@ -94,10 +94,10 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
-.awsui_content-enter_gwq0h_1k4hj_97:not(#\9) {
-  animation: awsui_awsui-motion-fade-in_gwq0h_1k4hj_1 var(--motion-duration-show-paced-7wspqf, 180ms) var(--motion-easing-show-paced-wj4ybn, ease-out);
+.awsui_content-enter_gwq0h_mztld_97:not(#\9) {
+  animation: awsui_awsui-motion-fade-in_gwq0h_mztld_1 var(--motion-duration-show-paced-7wspqf, 180ms) var(--motion-easing-show-paced-wj4ybn, ease-out);
 }
-@keyframes awsui_awsui-motion-fade-in_gwq0h_1k4hj_1 {
+@keyframes awsui_awsui-motion-fade-in_gwq0h_mztld_1 {
   from {
     opacity: 0.2;
   }
@@ -106,40 +106,40 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   }
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_content-enter_gwq0h_1k4hj_97:not(#\9) {
+  .awsui_content-enter_gwq0h_mztld_97:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_content-enter_gwq0h_1k4hj_97:not(#\9), .awsui-mode-entering .awsui_content-enter_gwq0h_1k4hj_97:not(#\9) {
+.awsui-motion-disabled .awsui_content-enter_gwq0h_mztld_97:not(#\9), .awsui-mode-entering .awsui_content-enter_gwq0h_mztld_97:not(#\9) {
   animation: none;
   transition: none;
 }
 
-.awsui_trigger-expanded_gwq0h_1k4hj_119:not(#\9) {
+.awsui_trigger-expanded_gwq0h_mztld_119:not(#\9) {
   transition: border-bottom-color var(--motion-duration-show-paced-7wspqf, 180ms) var(--motion-easing-show-paced-wj4ybn, ease-out);
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_trigger-expanded_gwq0h_1k4hj_119:not(#\9) {
+  .awsui_trigger-expanded_gwq0h_mztld_119:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_trigger-expanded_gwq0h_1k4hj_119:not(#\9), .awsui-mode-entering .awsui_trigger-expanded_gwq0h_1k4hj_119:not(#\9) {
+.awsui-motion-disabled .awsui_trigger-expanded_gwq0h_mztld_119:not(#\9), .awsui-mode-entering .awsui_trigger-expanded_gwq0h_mztld_119:not(#\9) {
   animation: none;
   transition: none;
 }
 
-.awsui_icon_gwq0h_1k4hj_133:not(#\9) {
+.awsui_icon_gwq0h_mztld_133:not(#\9) {
   transition: transform var(--motion-duration-rotate-90-ux18sr, 135ms) var(--motion-easing-rotate-90-eoew89, cubic-bezier(0.165, 0.84, 0.44, 1));
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_icon_gwq0h_1k4hj_133:not(#\9) {
+  .awsui_icon_gwq0h_mztld_133:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_icon_gwq0h_1k4hj_133:not(#\9), .awsui-mode-entering .awsui_icon_gwq0h_1k4hj_133:not(#\9) {
+.awsui-motion-disabled .awsui_icon_gwq0h_mztld_133:not(#\9), .awsui-mode-entering .awsui_icon_gwq0h_mztld_133:not(#\9) {
   animation: none;
   transition: none;
 }
@@ -148,7 +148,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
-.awsui_root_gwq0h_1k4hj_151:not(#\9) {
+.awsui_root_gwq0h_mztld_151:not(#\9) {
   /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
   border-collapse: separate;
   border-spacing: 0;
@@ -189,20 +189,20 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   display: block;
 }
 
-.awsui_icon_gwq0h_1k4hj_133:not(#\9) {
+.awsui_icon_gwq0h_mztld_133:not(#\9) {
   transform: rotate(-90deg);
 }
-.awsui_icon_gwq0h_1k4hj_133.awsui_expanded_gwq0h_1k4hj_169:not(#\9) {
+.awsui_icon_gwq0h_mztld_133.awsui_expanded_gwq0h_mztld_169:not(#\9) {
   transform: rotate(0deg);
 }
 
-.awsui_icon-container_gwq0h_1k4hj_173:not(#\9) {
+.awsui_icon-container_gwq0h_mztld_173:not(#\9) {
   position: relative;
   margin-left: calc((var(--font-body-m-line-height-i7xxvv, 22px) - var(--size-icon-normal-j1z5fn, 16px)) / -2);
   margin-right: calc(var(--space-xxs-ynfts5, 4px) + var(--border-divider-list-width-hacikr, 1px));
 }
 
-.awsui_trigger_gwq0h_1k4hj_119:not(#\9) {
+.awsui_trigger_gwq0h_mztld_119:not(#\9) {
   cursor: pointer;
   box-sizing: border-box;
   display: flex;
@@ -211,48 +211,65 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   line-height: var(--font-body-m-line-height-i7xxvv, 22px);
   text-align: left;
 }
-.awsui_trigger-default_gwq0h_1k4hj_188:not(#\9) {
+.awsui_trigger-default_gwq0h_mztld_188:not(#\9) {
   padding: var(--space-scaled-xxs-95dhkm, 4px) var(--space-xxs-ynfts5, 4px);
 }
-.awsui_trigger-footer_gwq0h_1k4hj_191:not(#\9) {
+.awsui_trigger-footer_gwq0h_mztld_191:not(#\9) {
   padding: var(--space-scaled-xxs-95dhkm, 4px) 0;
 }
-.awsui_trigger-default_gwq0h_1k4hj_188:not(#\9), .awsui_trigger-footer_gwq0h_1k4hj_191:not(#\9) {
+.awsui_trigger-default_gwq0h_mztld_188:not(#\9), .awsui_trigger-footer_gwq0h_mztld_191:not(#\9) {
   border: var(--border-divider-section-width-4wm2it, 2px) solid transparent;
 }
-.awsui_trigger-navigation_gwq0h_1k4hj_197:not(#\9) {
+.awsui_trigger-navigation_gwq0h_mztld_197:not(#\9) {
   border-left: var(--border-divider-section-width-4wm2it, 2px) solid transparent;
 }
-.awsui_trigger-default_gwq0h_1k4hj_188:not(#\9), .awsui_trigger-navigation_gwq0h_1k4hj_197:not(#\9), .awsui_trigger-footer_gwq0h_1k4hj_191:not(#\9) {
+.awsui_trigger-default_gwq0h_mztld_188:not(#\9), .awsui_trigger-navigation_gwq0h_mztld_197:not(#\9), .awsui_trigger-footer_gwq0h_mztld_191:not(#\9) {
   color: var(--color-text-expandable-section-default-k03p1p, #000716);
   font-weight: var(--font-heading-s-weight-k8ys41, 800);
   font-size: var(--font-expandable-heading-size-m2wptt, 16px);
   letter-spacing: var(--font-heading-s-letter-spacing-4d69jc, -0.005em);
 }
-.awsui_trigger-default_gwq0h_1k4hj_188:not(#\9):hover, .awsui_trigger-navigation_gwq0h_1k4hj_197:not(#\9):hover, .awsui_trigger-footer_gwq0h_1k4hj_191:not(#\9):hover {
+.awsui_trigger-default_gwq0h_mztld_188:not(#\9):hover, .awsui_trigger-navigation_gwq0h_mztld_197:not(#\9):hover, .awsui_trigger-footer_gwq0h_mztld_191:not(#\9):hover {
   color: var(--color-text-expandable-section-hover-73g3du, #0972d3);
 }
-.awsui_trigger-container_gwq0h_1k4hj_209:not(#\9) {
+.awsui_trigger-container_gwq0h_mztld_209:not(#\9) {
   padding: var(--space-container-header-vertical-zsjhel, 12px) var(--space-container-horizontal-ddrezg, 24px);
 }
-.awsui_trigger-container_gwq0h_1k4hj_209[data-awsui-focus-visible=true]:not(#\9):focus {
+.awsui_trigger-container_gwq0h_mztld_209[data-awsui-focus-visible=true]:not(#\9):focus {
   padding: calc(var(--space-scaled-s-cu1hzn, 12px) - var(--border-divider-section-width-4wm2it, 2px)) calc(var(--space-l-4vl6xu, 20px) - var(--border-divider-section-width-4wm2it, 2px));
 }
-.awsui_trigger-default_gwq0h_1k4hj_188.awsui_trigger-expanded_gwq0h_1k4hj_119:not(#\9) {
+.awsui_trigger-default_gwq0h_mztld_188.awsui_trigger-expanded_gwq0h_mztld_119:not(#\9) {
   border-bottom-color: var(--color-border-divider-default-7s2wjw, #e9ebed);
 }
 
-.awsui_header_gwq0h_1k4hj_219:not(#\9) {
+.awsui_header_gwq0h_mztld_219:not(#\9) {
   display: flex;
 }
-.awsui_header-container_gwq0h_1k4hj_222:not(#\9) {
+.awsui_header-container_gwq0h_mztld_222:not(#\9) {
   width: 100%;
 }
-.awsui_header-container_gwq0h_1k4hj_222 > .awsui_icon-container_gwq0h_1k4hj_173:not(#\9) {
+.awsui_header-container_gwq0h_mztld_222 > .awsui_icon-container_gwq0h_mztld_173:not(#\9) {
   margin-top: var(--space-expandable-section-icon-offset-top-svbirl, 4px);
   margin-right: var(--space-xs-rsr2qu, 8px);
 }
-.awsui_header-navigation_gwq0h_1k4hj_229 > .awsui_icon-container_gwq0h_1k4hj_173:not(#\9) {
+.awsui_header-container_gwq0h_mztld_222[data-awsui-focus-visible=true]:not(#\9):focus-within {
+  outline: none;
+  text-decoration: none;
+  padding: calc(var(--space-scaled-s-cu1hzn, 12px) - var(--border-divider-section-width-4wm2it, 2px)) calc(var(--space-l-4vl6xu, 20px) - var(--border-divider-section-width-4wm2it, 2px));
+  outline: 2px dotted transparent;
+  border: var(--border-field-width-idlekx, 2px) solid var(--color-border-item-focused-ap3b6s, #0972d3);
+  border-radius: var(--border-radius-control-default-focus-ring-7661kz, 4px);
+  box-shadow: 0 0 0 var(--border-control-focus-ring-shadow-spread-srzyiu, 0px) var(--color-border-item-focused-ap3b6s, #0972d3);
+}
+.awsui_header-container-button_gwq0h_mztld_238:not(#\9):focus {
+  outline: none;
+  text-decoration: none;
+}
+.awsui_header-container-button_gwq0h_mztld_238 > .awsui_icon-container_gwq0h_mztld_173:not(#\9) {
+  margin-top: var(--space-expandable-section-icon-offset-top-svbirl, 4px);
+  margin-right: var(--space-xs-rsr2qu, 8px);
+}
+.awsui_header-navigation_gwq0h_mztld_246 > .awsui_icon-container_gwq0h_mztld_173:not(#\9) {
   display: inline-flex;
   cursor: pointer;
   color: var(--color-text-expandable-section-navigation-icon-default-lb9rm0, #414d5c);
@@ -263,17 +280,17 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   text-decoration: none;
   flex-direction: column;
 }
-.awsui_header-navigation_gwq0h_1k4hj_229 > .awsui_icon-container_gwq0h_1k4hj_173:not(#\9):hover {
+.awsui_header-navigation_gwq0h_mztld_246 > .awsui_icon-container_gwq0h_mztld_173:not(#\9):hover {
   color: var(--color-text-expandable-section-hover-73g3du, #0972d3);
 }
-.awsui_header-navigation_gwq0h_1k4hj_229 > .awsui_icon-container_gwq0h_1k4hj_173[data-awsui-focus-visible=true]:not(#\9):focus {
+.awsui_header-navigation_gwq0h_mztld_246 > .awsui_icon-container_gwq0h_mztld_173[data-awsui-focus-visible=true]:not(#\9):focus {
   position: relative;
 }
-.awsui_header-navigation_gwq0h_1k4hj_229 > .awsui_icon-container_gwq0h_1k4hj_173[data-awsui-focus-visible=true]:not(#\9):focus {
+.awsui_header-navigation_gwq0h_mztld_246 > .awsui_icon-container_gwq0h_mztld_173[data-awsui-focus-visible=true]:not(#\9):focus {
   outline: 2px dotted transparent;
   outline-offset: calc(2px - 1px);
 }
-.awsui_header-navigation_gwq0h_1k4hj_229 > .awsui_icon-container_gwq0h_1k4hj_173[data-awsui-focus-visible=true]:not(#\9):focus::before {
+.awsui_header-navigation_gwq0h_mztld_246 > .awsui_icon-container_gwq0h_mztld_173[data-awsui-focus-visible=true]:not(#\9):focus::before {
   content: " ";
   display: block;
   position: absolute;
@@ -285,24 +302,24 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   box-shadow: 0 0 0 2px var(--color-border-item-focused-ap3b6s, #0972d3);
 }
 
-.awsui_content_gwq0h_1k4hj_97:not(#\9) {
+.awsui_content_gwq0h_mztld_97:not(#\9) {
   display: none;
 }
-.awsui_content-default_gwq0h_1k4hj_265:not(#\9) {
+.awsui_content-default_gwq0h_mztld_282:not(#\9) {
   padding: var(--space-scaled-xs-6859qs, 8px) 0;
 }
-.awsui_content-footer_gwq0h_1k4hj_268:not(#\9) {
+.awsui_content-footer_gwq0h_mztld_285:not(#\9) {
   padding: var(--space-xs-rsr2qu, 8px) 0;
 }
-.awsui_content-expanded_gwq0h_1k4hj_271:not(#\9) {
+.awsui_content-expanded_gwq0h_mztld_288:not(#\9) {
   display: block;
 }
 
-.awsui_focusable_gwq0h_1k4hj_275:not(#\9):focus {
+.awsui_focusable_gwq0h_mztld_292:not(#\9):focus {
   outline: none;
   text-decoration: none;
 }
-.awsui_focusable_gwq0h_1k4hj_275[data-awsui-focus-visible=true]:not(#\9):focus {
+.awsui_focusable_gwq0h_mztld_292[data-awsui-focus-visible=true]:not(#\9):focus {
   outline: 2px dotted transparent;
   border: var(--border-field-width-idlekx, 2px) solid var(--color-border-item-focused-ap3b6s, #0972d3);
   border-radius: var(--border-radius-control-default-focus-ring-7661kz, 4px);

package/expandable-section/styles.selectors.js

@@ -2,25 +2,26 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "content-enter": "awsui_content-enter_gwq0h_1k4hj_97",
-  "awsui-motion-fade-in": "awsui_awsui-motion-fade-in_gwq0h_1k4hj_1",
-  "trigger-expanded": "awsui_trigger-expanded_gwq0h_1k4hj_119",
-  "icon": "awsui_icon_gwq0h_1k4hj_133",
-  "root": "awsui_root_gwq0h_1k4hj_151",
-  "expanded": "awsui_expanded_gwq0h_1k4hj_169",
-  "icon-container": "awsui_icon-container_gwq0h_1k4hj_173",
-  "trigger": "awsui_trigger_gwq0h_1k4hj_119",
-  "trigger-default": "awsui_trigger-default_gwq0h_1k4hj_188",
-  "trigger-footer": "awsui_trigger-footer_gwq0h_1k4hj_191",
-  "trigger-navigation": "awsui_trigger-navigation_gwq0h_1k4hj_197",
-  "trigger-container": "awsui_trigger-container_gwq0h_1k4hj_209",
-  "header": "awsui_header_gwq0h_1k4hj_219",
-  "header-container": "awsui_header-container_gwq0h_1k4hj_222",
-  "header-navigation": "awsui_header-navigation_gwq0h_1k4hj_229",
-  "content": "awsui_content_gwq0h_1k4hj_97",
-  "content-default": "awsui_content-default_gwq0h_1k4hj_265",
-  "content-footer": "awsui_content-footer_gwq0h_1k4hj_268",
-  "content-expanded": "awsui_content-expanded_gwq0h_1k4hj_271",
-  "focusable": "awsui_focusable_gwq0h_1k4hj_275"
+  "content-enter": "awsui_content-enter_gwq0h_mztld_97",
+  "awsui-motion-fade-in": "awsui_awsui-motion-fade-in_gwq0h_mztld_1",
+  "trigger-expanded": "awsui_trigger-expanded_gwq0h_mztld_119",
+  "icon": "awsui_icon_gwq0h_mztld_133",
+  "root": "awsui_root_gwq0h_mztld_151",
+  "expanded": "awsui_expanded_gwq0h_mztld_169",
+  "icon-container": "awsui_icon-container_gwq0h_mztld_173",
+  "trigger": "awsui_trigger_gwq0h_mztld_119",
+  "trigger-default": "awsui_trigger-default_gwq0h_mztld_188",
+  "trigger-footer": "awsui_trigger-footer_gwq0h_mztld_191",
+  "trigger-navigation": "awsui_trigger-navigation_gwq0h_mztld_197",
+  "trigger-container": "awsui_trigger-container_gwq0h_mztld_209",
+  "header": "awsui_header_gwq0h_mztld_219",
+  "header-container": "awsui_header-container_gwq0h_mztld_222",
+  "header-container-button": "awsui_header-container-button_gwq0h_mztld_238",
+  "header-navigation": "awsui_header-navigation_gwq0h_mztld_246",
+  "content": "awsui_content_gwq0h_mztld_97",
+  "content-default": "awsui_content-default_gwq0h_mztld_282",
+  "content-footer": "awsui_content-footer_gwq0h_mztld_285",
+  "content-expanded": "awsui_content-expanded_gwq0h_mztld_288",
+  "focusable": "awsui_focusable_gwq0h_mztld_292"
 };
   

package/flashbar/flash.d.ts

@@ -1,9 +1,9 @@
 import { FlashbarProps } from './interfaces';
 import React from 'react';
-interface Flash extends FlashbarProps.MessageDefinition {
+export declare const focusFlashById: import("../internal/utils/throttle").ThrottledFunction<(element: HTMLElement | null, itemId: string) => void>;
+export interface FlashProps extends FlashbarProps.MessageDefinition {
     className: string;
     transitionState?: string;
 }
-export declare const Flash: React.ForwardRefExoticComponent<Flash & React.RefAttributes<HTMLDivElement>>;
-export {};
+export declare const Flash: React.ForwardRefExoticComponent<FlashProps & React.RefAttributes<HTMLDivElement>>;
 //# sourceMappingURL=flash.d.ts.map

package/flashbar/flash.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"flash.d.ts","sourceRoot":"","sources":["../../../src/flashbar/flash.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAC7C,OAAO,KAAK,MAAM,OAAO,CAAC;AA6C1B,UAAU,KAAM,SAAQ,aAAa,CAAC,iBAAiB;IACrD,SAAS,EAAE,MAAM,CAAC;IAClB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED,eAAO,MAAM,KAAK,8EA4EjB,CAAC"}
+{"version":3,"file":"flash.d.ts","sourceRoot":"","sources":["../../../src/flashbar/flash.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAC7C,OAAO,KAAK,MAAM,OAAO,CAAC;AAkD1B,eAAO,MAAM,cAAc,mEACf,WAAW,GAAG,IAAI,UAAU,MAAM,UAM7C,CAAC;AAEF,MAAM,WAAW,UAAW,SAAQ,aAAa,CAAC,iBAAiB;IACjE,SAAS,EAAE,MAAM,CAAC;IAClB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED,eAAO,MAAM,KAAK,mFAgGjB,CAAC"}

package/flashbar/flash.js

@@ -1,3 +1,4 @@
+import { __assign } from "tslib";
 import React from 'react';
 import InternalSpinner from '../spinner/internal';
 import InternalIcon from '../icon/internal';
@@ -6,6 +7,10 @@ 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',
@@ -19,9 +24,15 @@ 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 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;
+    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();
     if (isDevelopment) {
         if (buttonText && !onButtonClick) {
             warnOnce('Flashbar', "You provided a `buttonText` prop without an `onButtonClick` handler. This will render a non-interactive action button.");
@@ -34,21 +45,26 @@ 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;
-    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),
+    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)) },
         React.createElement("div", { className: styles['flash-body'] },
-            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", __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))),
             button && React.createElement("div", { className: styles['action-button-wrapper'] }, button)),
-        dismissible && dismissButton(dismissLabel, onDismiss)));
+        dismissible && dismissButton(dismissLabel, onDismiss),
+        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';\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"]}
+{"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"]}

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,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"}
+{"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"}

package/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, { useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { applyDisplayName } from '../internal/utils/apply-display-name';
 import customCssProps from '../internal/generated/custom-css-properties';
-import { Flash } from './flash';
+import { Flash, focusFlashById } from './flash';
 import { getBaseProps } from '../internal/base-component';
 import InternalIcon from '../icon/internal';
 import { TIMEOUT_FOR_ENTERING_ANIMATION } from './constant';
@@ -21,25 +21,55 @@ 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 mergedRef = useMergeRefs(ref, __internalRootRef);
+    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);
+            }
+        }
+    }
+    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(ref) || !isVisualRefresh || (items && !items.every(function (item) { return 'id' in item; }));
+    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 = restProps.stackItems;
-    var ariaLabels = restProps.ariaLabels;
+    var stackItems = isStackedFlashbar(restProps);
+    var ariaLabels = stackItems ? restProps.ariaLabels : {};
     var isFlashbarStacked = stackItems && (items === null || items === void 0 ? void 0 : items.length) > 3;
-    var _c = useState(false), isFlashbarStackExpanded = _c[0], setIsFlashbarStackExpanded = _c[1];
+    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
@@ -73,12 +103,17 @@ 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 && renderItem(item, (_b = item.id) !== null && _b !== void 0 ? _b : 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("div", { className: styles.expanded }, items.map(function (item, index) { var _a; return renderItem(item, (_a = item.id) !== null && _a !== void 0 ? _a : index); }))),
+            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(InternalIcon, { className: clsx(styles.icon, isFlashbarStackExpanded && styles.expanded), size: "small", name: "angle-down" }))));
+                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
@@ -88,10 +123,16 @@ export default function Flashbar(_a) {
         if (isFlashbarStacked || motionDisabled || !items) {
             return;
         }
-        return (React.createElement(TransitionGroup, { component: null }, items &&
+        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 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 (React.createElement("li", { className: styles['flash-list-item'] }, renderItem(item, (_a = item.id) !== null && _a !== void 0 ? _a : index, transitionRootElement, state)));
+                }));
             })));
     }
     /**
@@ -102,7 +143,10 @@ export default function Flashbar(_a) {
         if (isFlashbarStacked || !motionDisabled || !items) {
             return;
         }
-        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); }));
+        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
@@ -120,5 +164,8 @@ export default function Flashbar(_a) {
         renderFlatItemsWithTransitions(),
         renderFlatItemsWithoutTransitions()));
 }
+function isStackedFlashbar(props) {
+    return 'stackItems' in props && !!props.stackItems;
+}
 applyDisplayName(Flashbar, 'Flashbar');
 //# sourceMappingURL=index.js.map