@cloudscape-design/components 3.0.116 → 3.0.118

package/expandable-section/interfaces.js.map

@@ -1 +1 @@
-{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/expandable-section/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport { BaseComponentProps } from '../internal/base-component';\nimport { NonCancelableEventHandler } from '../internal/events';\n\nexport namespace ExpandableSectionProps {\n  export type Variant = 'default' | 'footer' | 'container' | 'navigation';\n  export interface ChangeDetail {\n    expanded: boolean;\n  }\n}\n\nexport interface ExpandableSectionProps extends BaseComponentProps {\n  /**\n   * Determines whether the component initially displays in expanded state (that is, with content visible). The component operates in an uncontrolled\n   * manner even if you provide a value for this property.\n   */\n  defaultExpanded?: boolean;\n\n  /**\n   * Determines whether the component is in the expanded state (that is, with content visible). The component operates in a controlled\n   * manner if you provide a value for this property.\n   */\n  expanded?: boolean;\n\n  /**\n   * The possible variants of an expandable section are as follows:\n   *  * `default` - Use this variant in any context.\n   *  * `footer` - Use this variant in container footers.\n   *  * `container` - Use this variant in a detail page alongside other containers.\n   *  * `navigation` - Use this variant in the navigation panel with anchors and custom styled content.\n   *    It doesn't have any default styles.\n   * */\n  variant?: ExpandableSectionProps.Variant;\n\n  /**\n   * Determines whether the content section's default padding is removed. This default padding is only present for the `container` variant.\n   */\n  disableContentPaddings?: boolean;\n\n  /**\n   * Primary content displayed in the expandable section element.\n   */\n  children?: React.ReactNode;\n\n  /**\n   * Heading displayed above the content text.\n   *\n   * When using the container variant, use the Header component. Otherwise, use plain text.\n   */\n  header?: React.ReactNode;\n\n  /**\n   * Adds `aria-label` to the header element.\n   * Use to assign unique labels when there are multiple expandable sections with the same header text on one page.\n   */\n  headerAriaLabel?: string;\n\n  /**\n   * Called when the state changes (that is, when the user expands or collapses the component).\n   * The event `detail` contains the current value of the `expanded` property.\n   */\n  onChange?: NonCancelableEventHandler<ExpandableSectionProps.ChangeDetail>;\n}\n"]}
+{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/expandable-section/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport { BaseComponentProps } from '../internal/base-component';\nimport { NonCancelableEventHandler } from '../internal/events';\n\nexport namespace ExpandableSectionProps {\n  export type Variant = 'default' | 'footer' | 'container' | 'navigation';\n  export interface ChangeDetail {\n    expanded: boolean;\n  }\n  export type HeadingTag = 'h1' | 'h2' | 'h3' | 'h4' | 'h5';\n}\n\nexport interface ExpandableSectionProps extends BaseComponentProps {\n  /**\n   * Determines whether the component initially displays in expanded state (that is, with content visible). The component operates in an uncontrolled\n   * manner even if you provide a value for this property.\n   */\n  defaultExpanded?: boolean;\n\n  /**\n   * Determines whether the component is in the expanded state (that is, with content visible). The component operates in a controlled\n   * manner if you provide a value for this property.\n   */\n  expanded?: boolean;\n\n  /**\n   * The possible variants of an expandable section are as follows:\n   *  * `default` - Use this variant in any context.\n   *  * `footer` - Use this variant in container footers.\n   *  * `container` - Use this variant in a detail page alongside other containers.\n   *  * `navigation` - Use this variant in the navigation panel with anchors and custom styled content.\n   *    It doesn't have any default styles.\n   * */\n  variant?: ExpandableSectionProps.Variant;\n\n  /**\n   * Determines whether the content section's default padding is removed. This default padding is only present for the `container` variant.\n   */\n  disableContentPaddings?: boolean;\n\n  /**\n   * Primary content displayed in the expandable section element.\n   */\n  children?: React.ReactNode;\n\n  /**\n   * **Deprecated**, use headerText instead.\n   * @deprecated\n   */\n  header?: React.ReactNode;\n\n  /**\n   * Heading displayed above the content text. When using the container variant, use it with additional header props. Otherwise, use plain text.\n   */\n  headerText?: React.ReactNode;\n\n  /**\n   * Supplementary text below the heading. Use with container variant.\n   */\n  headerDescription?: string;\n\n  /**\n   * Specifies secondary text that's displayed to the right of the heading title. Use with container variant.\n   * Behaves similar to the Header component counter.\n   */\n  headerCounter?: string;\n\n  /**\n   * Overrides the default [HTML heading tag](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements)\n   * h2. Use with container variant.\n   */\n  headingTagOverride?: ExpandableSectionProps.HeadingTag;\n\n  /**\n   * Adds `aria-label` to the header element.\n   * Use to assign unique labels when there are multiple expandable sections with the same header text on one page.\n   */\n  headerAriaLabel?: string;\n\n  /**\n   * Called when the state changes (that is, when the user expands or collapses the component).\n   * The event `detail` contains the current value of the `expanded` property.\n   */\n  onChange?: NonCancelableEventHandler<ExpandableSectionProps.ChangeDetail>;\n}\n"]}

package/expandable-section/internal.d.ts

@@ -1,6 +1,6 @@
 import { ExpandableSectionProps } from './interfaces';
 import { InternalBaseComponentProps } from '../internal/hooks/use-base-component';
 declare type InternalExpandableSectionProps = ExpandableSectionProps & InternalBaseComponentProps;
-export default function InternalExpandableSection({ expanded: controlledExpanded, defaultExpanded, onChange, variant, children, header, disableContentPaddings, headerAriaLabel, __internalRootRef, ...props }: InternalExpandableSectionProps): JSX.Element;
+export default function InternalExpandableSection({ expanded: controlledExpanded, defaultExpanded, onChange, variant, children, header, headerText, headerCounter, headerDescription, headingTagOverride, disableContentPaddings, headerAriaLabel, __internalRootRef, ...props }: InternalExpandableSectionProps): JSX.Element;
 export {};
 //# sourceMappingURL=internal.d.ts.map

package/expandable-section/internal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/expandable-section/internal.tsx"],"names":[],"mappings":"AAYA,OAAO,EAAE,sBAAsB,EAAE,MAAM,cAAc,CAAC;AAKtD,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAElF,aAAK,8BAA8B,GAAG,sBAAsB,GAAG,0BAA0B,CAAC;AAE1F,MAAM,CAAC,OAAO,UAAU,yBAAyB,CAAC,EAChD,QAAQ,EAAE,kBAAkB,EAC5B,eAAe,EACf,QAAQ,EACR,OAAmB,EACnB,QAAQ,EACR,MAAM,EACN,sBAAsB,EACtB,eAAe,EACf,iBAAiB,EACjB,GAAG,KAAK,EACT,EAAE,8BAA8B,eAqFhC"}
+{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/expandable-section/internal.tsx"],"names":[],"mappings":"AAYA,OAAO,EAAE,sBAAsB,EAAE,MAAM,cAAc,CAAC;AAKtD,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAElF,aAAK,8BAA8B,GAAG,sBAAsB,GAAG,0BAA0B,CAAC;AAE1F,MAAM,CAAC,OAAO,UAAU,yBAAyB,CAAC,EAChD,QAAQ,EAAE,kBAAkB,EAC5B,eAAe,EACf,QAAQ,EACR,OAAmB,EACnB,QAAQ,EACR,MAAM,EACN,UAAU,EACV,aAAa,EACb,iBAAiB,EACjB,kBAAkB,EAClB,sBAAsB,EACtB,eAAe,EACf,iBAAiB,EACjB,GAAG,KAAK,EACT,EAAE,8BAA8B,eAwFhC"}

package/expandable-section/internal.js

@@ -13,7 +13,7 @@ import styles from './styles.css.js';
 import { ExpandableSectionContainer } from './expandable-section-container';
 import { ExpandableSectionHeader } from './expandable-section-header';
 export default function InternalExpandableSection(_a) {
-    var controlledExpanded = _a.expanded, defaultExpanded = _a.defaultExpanded, onChange = _a.onChange, _b = _a.variant, variant = _b === void 0 ? 'default' : _b, children = _a.children, header = _a.header, disableContentPaddings = _a.disableContentPaddings, headerAriaLabel = _a.headerAriaLabel, __internalRootRef = _a.__internalRootRef, props = __rest(_a, ["expanded", "defaultExpanded", "onChange", "variant", "children", "header", "disableContentPaddings", "headerAriaLabel", "__internalRootRef"]);
+    var controlledExpanded = _a.expanded, defaultExpanded = _a.defaultExpanded, onChange = _a.onChange, _b = _a.variant, variant = _b === void 0 ? 'default' : _b, children = _a.children, header = _a.header, headerText = _a.headerText, headerCounter = _a.headerCounter, headerDescription = _a.headerDescription, headingTagOverride = _a.headingTagOverride, disableContentPaddings = _a.disableContentPaddings, headerAriaLabel = _a.headerAriaLabel, __internalRootRef = _a.__internalRootRef, props = __rest(_a, ["expanded", "defaultExpanded", "onChange", "variant", "children", "header", "headerText", "headerCounter", "headerDescription", "headingTagOverride", "disableContentPaddings", "headerAriaLabel", "__internalRootRef"]);
     var ref = useRef(null);
     var controlId = useUniqueId();
     var triggerControlId = "".concat(controlId, "-trigger");
@@ -50,7 +50,7 @@ export default function InternalExpandableSection(_a) {
         onKeyDown: onKeyDown,
         onClick: onClick
     };
-    return (React.createElement(ExpandableSectionContainer, __assign({}, baseProps, { expanded: expanded, className: clsx(baseProps.className, styles.root), variant: variant, disableContentPaddings: disableContentPaddings, header: React.createElement(ExpandableSectionHeader, __assign({ id: triggerControlId, className: clsx(styles.header, styles["header-".concat(variant)]), variant: variant, expanded: !!expanded }, triggerProps), header), __internalRootRef: __internalRootRef }),
+    return (React.createElement(ExpandableSectionContainer, __assign({}, baseProps, { expanded: expanded, className: clsx(baseProps.className, styles.root), variant: variant, disableContentPaddings: disableContentPaddings, header: React.createElement(ExpandableSectionHeader, __assign({ id: triggerControlId, className: clsx(styles.header, styles["header-".concat(variant)]), variant: variant, expanded: !!expanded, header: header, headerText: headerText, headerDescription: headerDescription, headerCounter: headerCounter, headingTagOverride: headingTagOverride }, triggerProps)), __internalRootRef: __internalRootRef }),
         React.createElement(CSSTransition, { "in": expanded, timeout: 30, classNames: { enter: styles['content-enter'] }, nodeRef: ref },
             React.createElement("div", { id: controlId, ref: ref, className: clsx(styles.content, styles["content-".concat(variant)], expanded && styles['content-expanded']), role: "group", "aria-label": triggerProps.ariaLabel, "aria-labelledby": triggerProps.ariaLabelledBy }, children))));
 }

package/expandable-section/internal.js.map

@@ -1 +1 @@
-{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/expandable-section/internal.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 React, { KeyboardEvent, useCallback, useRef } from 'react';\nimport { CSSTransition } from 'react-transition-group';\nimport clsx from 'clsx';\n\nimport { getBaseProps } from '../internal/base-component';\nimport { useControllable } from '../internal/hooks/use-controllable';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\nimport { KeyCode } from '../internal/keycode';\nimport { fireNonCancelableEvent } from '../internal/events';\n\nimport { ExpandableSectionProps } from './interfaces';\n\nimport styles from './styles.css.js';\nimport { ExpandableSectionContainer } from './expandable-section-container';\nimport { ExpandableSectionHeader } from './expandable-section-header';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\n\ntype InternalExpandableSectionProps = ExpandableSectionProps & InternalBaseComponentProps;\n\nexport default function InternalExpandableSection({\n  expanded: controlledExpanded,\n  defaultExpanded,\n  onChange,\n  variant = 'default',\n  children,\n  header,\n  disableContentPaddings,\n  headerAriaLabel,\n  __internalRootRef,\n  ...props\n}: InternalExpandableSectionProps) {\n  const ref = useRef<HTMLDivElement>(null);\n  const controlId = useUniqueId();\n  const triggerControlId = `${controlId}-trigger`;\n\n  const baseProps = getBaseProps(props);\n  const [expanded, setExpanded] = useControllable(controlledExpanded, onChange, defaultExpanded, {\n    componentName: 'ExpandableSection',\n    controlledProp: 'expanded',\n    changeHandler: 'onChange',\n  });\n\n  const onExpandChange = useCallback(\n    (expanded: boolean) => {\n      setExpanded(expanded);\n      fireNonCancelableEvent(onChange, { expanded });\n    },\n    [onChange, setExpanded]\n  );\n\n  const onClick = useCallback(() => {\n    onExpandChange(!expanded);\n  }, [onExpandChange, expanded]);\n\n  const onKeyUp = useCallback(\n    (event: KeyboardEvent<Element>) => {\n      const interactionKeys = [KeyCode.enter, KeyCode.space];\n\n      if (interactionKeys.indexOf(event.keyCode) !== -1) {\n        onExpandChange(!expanded);\n      }\n    },\n    [onExpandChange, expanded]\n  );\n\n  const onKeyDown = useCallback((event: KeyboardEvent<Element>) => {\n    if (event.keyCode === KeyCode.space) {\n      // Prevent the page from scrolling when toggling the component with the space bar.\n      event.preventDefault();\n    }\n  }, []);\n\n  const triggerProps = {\n    ariaControls: controlId,\n    ariaLabel: headerAriaLabel,\n    ariaLabelledBy: headerAriaLabel ? undefined : triggerControlId,\n    onKeyUp,\n    onKeyDown,\n    onClick,\n  };\n\n  return (\n    <ExpandableSectionContainer\n      {...baseProps}\n      expanded={expanded}\n      className={clsx(baseProps.className, styles.root)}\n      variant={variant}\n      disableContentPaddings={disableContentPaddings}\n      header={\n        <ExpandableSectionHeader\n          id={triggerControlId}\n          className={clsx(styles.header, styles[`header-${variant}`])}\n          variant={variant}\n          expanded={!!expanded}\n          {...triggerProps}\n        >\n          {header}\n        </ExpandableSectionHeader>\n      }\n      __internalRootRef={__internalRootRef}\n    >\n      <CSSTransition in={expanded} timeout={30} classNames={{ enter: styles['content-enter'] }} nodeRef={ref}>\n        <div\n          id={controlId}\n          ref={ref}\n          className={clsx(styles.content, styles[`content-${variant}`], expanded && styles['content-expanded'])}\n          role=\"group\"\n          aria-label={triggerProps.ariaLabel}\n          aria-labelledby={triggerProps.ariaLabelledBy}\n        >\n          {children}\n        </div>\n      </CSSTransition>\n    </ExpandableSectionContainer>\n  );\n}\n"]}
+{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/expandable-section/internal.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 React, { KeyboardEvent, useCallback, useRef } from 'react';\nimport { CSSTransition } from 'react-transition-group';\nimport clsx from 'clsx';\n\nimport { getBaseProps } from '../internal/base-component';\nimport { useControllable } from '../internal/hooks/use-controllable';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\nimport { KeyCode } from '../internal/keycode';\nimport { fireNonCancelableEvent } from '../internal/events';\n\nimport { ExpandableSectionProps } from './interfaces';\n\nimport styles from './styles.css.js';\nimport { ExpandableSectionContainer } from './expandable-section-container';\nimport { ExpandableSectionHeader } from './expandable-section-header';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\n\ntype InternalExpandableSectionProps = ExpandableSectionProps & InternalBaseComponentProps;\n\nexport default function InternalExpandableSection({\n  expanded: controlledExpanded,\n  defaultExpanded,\n  onChange,\n  variant = 'default',\n  children,\n  header,\n  headerText,\n  headerCounter,\n  headerDescription,\n  headingTagOverride,\n  disableContentPaddings,\n  headerAriaLabel,\n  __internalRootRef,\n  ...props\n}: InternalExpandableSectionProps) {\n  const ref = useRef<HTMLDivElement>(null);\n  const controlId = useUniqueId();\n  const triggerControlId = `${controlId}-trigger`;\n\n  const baseProps = getBaseProps(props);\n  const [expanded, setExpanded] = useControllable(controlledExpanded, onChange, defaultExpanded, {\n    componentName: 'ExpandableSection',\n    controlledProp: 'expanded',\n    changeHandler: 'onChange',\n  });\n\n  const onExpandChange = useCallback(\n    (expanded: boolean) => {\n      setExpanded(expanded);\n      fireNonCancelableEvent(onChange, { expanded });\n    },\n    [onChange, setExpanded]\n  );\n\n  const onClick = useCallback(() => {\n    onExpandChange(!expanded);\n  }, [onExpandChange, expanded]);\n\n  const onKeyUp = useCallback(\n    (event: KeyboardEvent<Element>) => {\n      const interactionKeys = [KeyCode.enter, KeyCode.space];\n\n      if (interactionKeys.indexOf(event.keyCode) !== -1) {\n        onExpandChange(!expanded);\n      }\n    },\n    [onExpandChange, expanded]\n  );\n\n  const onKeyDown = useCallback((event: KeyboardEvent<Element>) => {\n    if (event.keyCode === KeyCode.space) {\n      // Prevent the page from scrolling when toggling the component with the space bar.\n      event.preventDefault();\n    }\n  }, []);\n\n  const triggerProps = {\n    ariaControls: controlId,\n    ariaLabel: headerAriaLabel,\n    ariaLabelledBy: headerAriaLabel ? undefined : triggerControlId,\n    onKeyUp,\n    onKeyDown,\n    onClick,\n  };\n\n  return (\n    <ExpandableSectionContainer\n      {...baseProps}\n      expanded={expanded}\n      className={clsx(baseProps.className, styles.root)}\n      variant={variant}\n      disableContentPaddings={disableContentPaddings}\n      header={\n        <ExpandableSectionHeader\n          id={triggerControlId}\n          className={clsx(styles.header, styles[`header-${variant}`])}\n          variant={variant}\n          expanded={!!expanded}\n          header={header}\n          headerText={headerText}\n          headerDescription={headerDescription}\n          headerCounter={headerCounter}\n          headingTagOverride={headingTagOverride}\n          {...triggerProps}\n        />\n      }\n      __internalRootRef={__internalRootRef}\n    >\n      <CSSTransition in={expanded} timeout={30} classNames={{ enter: styles['content-enter'] }} nodeRef={ref}>\n        <div\n          id={controlId}\n          ref={ref}\n          className={clsx(styles.content, styles[`content-${variant}`], expanded && styles['content-expanded'])}\n          role=\"group\"\n          aria-label={triggerProps.ariaLabel}\n          aria-labelledby={triggerProps.ariaLabelledBy}\n        >\n          {children}\n        </div>\n      </CSSTransition>\n    </ExpandableSectionContainer>\n  );\n}\n"]}

package/expandable-section/styles.css.js

@@ -1,25 +1,26 @@
 
     import './styles.scoped.css';
     export 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/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"}