@cloudscape-design/components 3.0.194 → 3.0.195

package/app-layout/visual-refresh/styles.selectors.js

@@ -2,65 +2,65 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "appbar": "awsui_appbar_hyvsj_oe1jw_93",
-  "appbar-nav": "awsui_appbar-nav_hyvsj_oe1jw_117",
-  "breadcrumbs": "awsui_breadcrumbs_hyvsj_oe1jw_121",
-  "appbar-tools": "awsui_appbar-tools_hyvsj_oe1jw_125",
-  "has-breadcrumbs": "awsui_has-breadcrumbs_hyvsj_oe1jw_166",
-  "has-notifications-content": "awsui_has-notifications-content_hyvsj_oe1jw_173",
-  "has-header": "awsui_has-header_hyvsj_oe1jw_179",
-  "has-dynamic-overlap-height": "awsui_has-dynamic-overlap-height_hyvsj_oe1jw_179",
-  "content-type-wizard": "awsui_content-type-wizard_hyvsj_oe1jw_180",
-  "content-type-cards": "awsui_content-type-cards_hyvsj_oe1jw_183",
-  "content-type-table": "awsui_content-type-table_hyvsj_oe1jw_184",
-  "has-sticky-background": "awsui_has-sticky-background_hyvsj_oe1jw_187",
-  "background": "awsui_background_hyvsj_oe1jw_221",
-  "notifications-appbar-header": "awsui_notifications-appbar-header_hyvsj_oe1jw_224",
-  "sticky-notifications": "awsui_sticky-notifications_hyvsj_oe1jw_236",
-  "overlap": "awsui_overlap_hyvsj_oe1jw_242",
-  "content": "awsui_content_hyvsj_oe1jw_180",
-  "layout": "awsui_layout_hyvsj_oe1jw_333",
-  "has-max-content-width": "awsui_has-max-content-width_hyvsj_oe1jw_415",
-  "is-overlap-disabled": "awsui_is-overlap-disabled_hyvsj_oe1jw_442",
-  "disable-body-scroll": "awsui_disable-body-scroll_hyvsj_oe1jw_445",
-  "has-sticky-notifications": "awsui_has-sticky-notifications_hyvsj_oe1jw_449",
-  "has-split-panel": "awsui_has-split-panel_hyvsj_oe1jw_463",
-  "split-panel-position-bottom": "awsui_split-panel-position-bottom_hyvsj_oe1jw_463",
-  "has-content-gap-left": "awsui_has-content-gap-left_hyvsj_oe1jw_475",
-  "has-content-gap-right": "awsui_has-content-gap-right_hyvsj_oe1jw_478",
-  "block-body-scroll": "awsui_block-body-scroll_hyvsj_oe1jw_493",
-  "container": "awsui_container_hyvsj_oe1jw_501",
-  "disable-content-paddings": "awsui_disable-content-paddings_hyvsj_oe1jw_527",
-  "is-navigation-open": "awsui_is-navigation-open_hyvsj_oe1jw_532",
-  "is-tools-open": "awsui_is-tools-open_hyvsj_oe1jw_535",
-  "is-split-panel-open": "awsui_is-split-panel-open_hyvsj_oe1jw_535",
-  "split-panel-position-side": "awsui_split-panel-position-side_hyvsj_oe1jw_535",
-  "content-type-default": "awsui_content-type-default_hyvsj_oe1jw_555",
-  "content-type-form": "awsui_content-type-form_hyvsj_oe1jw_555",
-  "unfocusable": "awsui_unfocusable_hyvsj_oe1jw_596",
-  "navigation-container": "awsui_navigation-container_hyvsj_oe1jw_606",
-  "show-navigation": "awsui_show-navigation_hyvsj_oe1jw_641",
-  "animating": "awsui_animating_hyvsj_oe1jw_663",
-  "showButtons": "awsui_showButtons_hyvsj_oe1jw_1",
-  "navigation": "awsui_navigation_hyvsj_oe1jw_606",
-  "openNavigation": "awsui_openNavigation_hyvsj_oe1jw_1",
-  "animated-content": "awsui_animated-content_hyvsj_oe1jw_724",
-  "hide-navigation": "awsui_hide-navigation_hyvsj_oe1jw_733",
-  "notifications": "awsui_notifications_hyvsj_oe1jw_224",
-  "split-panel-bottom": "awsui_split-panel-bottom_hyvsj_oe1jw_798",
-  "position-bottom": "awsui_position-bottom_hyvsj_oe1jw_844",
-  "openSplitPanelBottom": "awsui_openSplitPanelBottom_hyvsj_oe1jw_1",
-  "split-panel-side": "awsui_split-panel-side_hyvsj_oe1jw_873",
-  "position-side": "awsui_position-side_hyvsj_oe1jw_901",
-  "openSplitPanelSide": "awsui_openSplitPanelSide_hyvsj_oe1jw_1",
-  "tools-container": "awsui_tools-container_hyvsj_oe1jw_938",
-  "tools": "awsui_tools_hyvsj_oe1jw_938",
-  "openTools": "awsui_openTools_hyvsj_oe1jw_1",
-  "has-tools-form-persistence": "awsui_has-tools-form-persistence_hyvsj_oe1jw_1023",
-  "hide-tools": "awsui_hide-tools_hyvsj_oe1jw_1033",
-  "show-tools": "awsui_show-tools_hyvsj_oe1jw_1045",
-  "has-tools-form": "awsui_has-tools-form_hyvsj_oe1jw_1023",
-  "trigger": "awsui_trigger_hyvsj_oe1jw_1102",
-  "selected": "awsui_selected_hyvsj_oe1jw_1141"
+  "appbar": "awsui_appbar_hyvsj_1naed_93",
+  "appbar-nav": "awsui_appbar-nav_hyvsj_1naed_117",
+  "breadcrumbs": "awsui_breadcrumbs_hyvsj_1naed_121",
+  "appbar-tools": "awsui_appbar-tools_hyvsj_1naed_125",
+  "has-breadcrumbs": "awsui_has-breadcrumbs_hyvsj_1naed_166",
+  "has-notifications-content": "awsui_has-notifications-content_hyvsj_1naed_173",
+  "has-header": "awsui_has-header_hyvsj_1naed_179",
+  "has-dynamic-overlap-height": "awsui_has-dynamic-overlap-height_hyvsj_1naed_179",
+  "content-type-wizard": "awsui_content-type-wizard_hyvsj_1naed_180",
+  "content-type-cards": "awsui_content-type-cards_hyvsj_1naed_183",
+  "content-type-table": "awsui_content-type-table_hyvsj_1naed_184",
+  "has-sticky-background": "awsui_has-sticky-background_hyvsj_1naed_187",
+  "background": "awsui_background_hyvsj_1naed_221",
+  "notifications-appbar-header": "awsui_notifications-appbar-header_hyvsj_1naed_224",
+  "sticky-notifications": "awsui_sticky-notifications_hyvsj_1naed_236",
+  "overlap": "awsui_overlap_hyvsj_1naed_242",
+  "content": "awsui_content_hyvsj_1naed_180",
+  "layout": "awsui_layout_hyvsj_1naed_333",
+  "has-max-content-width": "awsui_has-max-content-width_hyvsj_1naed_415",
+  "is-overlap-disabled": "awsui_is-overlap-disabled_hyvsj_1naed_442",
+  "disable-body-scroll": "awsui_disable-body-scroll_hyvsj_1naed_445",
+  "has-sticky-notifications": "awsui_has-sticky-notifications_hyvsj_1naed_449",
+  "has-split-panel": "awsui_has-split-panel_hyvsj_1naed_463",
+  "split-panel-position-bottom": "awsui_split-panel-position-bottom_hyvsj_1naed_463",
+  "has-content-gap-left": "awsui_has-content-gap-left_hyvsj_1naed_475",
+  "has-content-gap-right": "awsui_has-content-gap-right_hyvsj_1naed_478",
+  "block-body-scroll": "awsui_block-body-scroll_hyvsj_1naed_493",
+  "container": "awsui_container_hyvsj_1naed_501",
+  "disable-content-paddings": "awsui_disable-content-paddings_hyvsj_1naed_527",
+  "is-navigation-open": "awsui_is-navigation-open_hyvsj_1naed_532",
+  "is-tools-open": "awsui_is-tools-open_hyvsj_1naed_535",
+  "is-split-panel-open": "awsui_is-split-panel-open_hyvsj_1naed_535",
+  "split-panel-position-side": "awsui_split-panel-position-side_hyvsj_1naed_535",
+  "content-type-default": "awsui_content-type-default_hyvsj_1naed_555",
+  "content-type-form": "awsui_content-type-form_hyvsj_1naed_555",
+  "unfocusable": "awsui_unfocusable_hyvsj_1naed_596",
+  "navigation-container": "awsui_navigation-container_hyvsj_1naed_606",
+  "show-navigation": "awsui_show-navigation_hyvsj_1naed_641",
+  "animating": "awsui_animating_hyvsj_1naed_663",
+  "showButtons": "awsui_showButtons_hyvsj_1naed_1",
+  "navigation": "awsui_navigation_hyvsj_1naed_606",
+  "openNavigation": "awsui_openNavigation_hyvsj_1naed_1",
+  "animated-content": "awsui_animated-content_hyvsj_1naed_724",
+  "hide-navigation": "awsui_hide-navigation_hyvsj_1naed_733",
+  "notifications": "awsui_notifications_hyvsj_1naed_224",
+  "split-panel-bottom": "awsui_split-panel-bottom_hyvsj_1naed_799",
+  "position-bottom": "awsui_position-bottom_hyvsj_1naed_845",
+  "openSplitPanelBottom": "awsui_openSplitPanelBottom_hyvsj_1naed_1",
+  "split-panel-side": "awsui_split-panel-side_hyvsj_1naed_874",
+  "position-side": "awsui_position-side_hyvsj_1naed_902",
+  "openSplitPanelSide": "awsui_openSplitPanelSide_hyvsj_1naed_1",
+  "tools-container": "awsui_tools-container_hyvsj_1naed_939",
+  "tools": "awsui_tools_hyvsj_1naed_939",
+  "openTools": "awsui_openTools_hyvsj_1naed_1",
+  "has-tools-form-persistence": "awsui_has-tools-form-persistence_hyvsj_1naed_1024",
+  "hide-tools": "awsui_hide-tools_hyvsj_1naed_1034",
+  "show-tools": "awsui_show-tools_hyvsj_1naed_1046",
+  "has-tools-form": "awsui_has-tools-form_hyvsj_1naed_1024",
+  "trigger": "awsui_trigger_hyvsj_1naed_1103",
+  "selected": "awsui_selected_hyvsj_1naed_1142"
 };
   

package/attribute-editor/interfaces.d.ts

@@ -26,6 +26,7 @@ export declare namespace AttributeEditorProps {
     }
     interface I18nStrings {
         errorIconAriaLabel?: string;
+        itemRemovedAriaLive?: string;
     }
 }
 export interface AttributeEditorProps<T> extends BaseComponentProps {

package/attribute-editor/interfaces.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/attribute-editor/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAY/D,MAAM,WAAW,6BAA6B;IAC5C,CAAC,CAAC,EAAE,KAAK,EAAE,oBAAoB,CAAC,CAAC,CAAC,GAAG;QAAE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,oBAAoB,CAAC,GAAG,CAAC,CAAA;KAAE,GAAG,GAAG,CAAC,OAAO,CAAC;CAClG;AAED,yBAAiB,oBAAoB,CAAC;IACpC,UAAiB,uBAAuB,CAAC,CAAC;QACxC,CAAC,IAAI,EAAE,CAAC,GAAG,OAAO,CAAC;KACpB;IAED,KAAY,eAAe,CAAC,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,SAAS,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC;IACjF,UAAiB,eAAe,CAAC,CAAC;QAChC,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;QACxB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;QACvB,OAAO,CAAC,EAAE,eAAe,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,SAAS,CAAC;QAC/C,SAAS,CAAC,EAAE,eAAe,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,SAAS,CAAC;QACjD,cAAc,CAAC,EAAE,eAAe,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,SAAS,CAAC;KACvD;IAED,UAAiB,uBAAuB;QACtC,SAAS,EAAE,MAAM,CAAC;KACnB;IAED,UAAiB,GAAG;QAClB,iBAAiB,CAAC,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;KAC5C;IAED,UAAiB,WAAW;QAC1B,kBAAkB,CAAC,EAAE,MAAM,CAAC;KAC7B;CACF;AAED,MAAM,WAAW,oBAAoB,CAAC,CAAC,CAAE,SAAQ,kBAAkB;IACjE;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAExB;;OAEG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEjC;;OAEG;IACH,aAAa,EAAE,MAAM,CAAC;IAEtB;;OAEG;IACH,gBAAgB,EAAE,MAAM,CAAC;IAEzB;;;OAGG;IACH,KAAK,CAAC,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC;IAEzB;;;;OAIG;IACH,eAAe,CAAC,EAAE,oBAAoB,CAAC,uBAAuB,CAAC,CAAC,CAAC,CAAC;IAElE;;OAEG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAE3B;;;;;;;;;;OAUG;IACH,UAAU,EAAE,aAAa,CAAC,oBAAoB,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,CAAC;IAEnE;;OAEG;IACH,gBAAgB,CAAC,EAAE,yBAAyB,CAAC;IAE7C;;;OAGG;IACH,mBAAmB,CAAC,EAAE,yBAAyB,CAAC,oBAAoB,CAAC,uBAAuB,CAAC,CAAC;IAE9F;;OAEG;IACH,WAAW,CAAC,EAAE,oBAAoB,CAAC,WAAW,CAAC;CAChD"}
+{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/attribute-editor/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAY/D,MAAM,WAAW,6BAA6B;IAC5C,CAAC,CAAC,EAAE,KAAK,EAAE,oBAAoB,CAAC,CAAC,CAAC,GAAG;QAAE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,oBAAoB,CAAC,GAAG,CAAC,CAAA;KAAE,GAAG,GAAG,CAAC,OAAO,CAAC;CAClG;AAED,yBAAiB,oBAAoB,CAAC;IACpC,UAAiB,uBAAuB,CAAC,CAAC;QACxC,CAAC,IAAI,EAAE,CAAC,GAAG,OAAO,CAAC;KACpB;IAED,KAAY,eAAe,CAAC,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,SAAS,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC;IACjF,UAAiB,eAAe,CAAC,CAAC;QAChC,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;QACxB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;QACvB,OAAO,CAAC,EAAE,eAAe,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,SAAS,CAAC;QAC/C,SAAS,CAAC,EAAE,eAAe,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,SAAS,CAAC;QACjD,cAAc,CAAC,EAAE,eAAe,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,SAAS,CAAC;KACvD;IAED,UAAiB,uBAAuB;QACtC,SAAS,EAAE,MAAM,CAAC;KACnB;IAED,UAAiB,GAAG;QAClB,iBAAiB,CAAC,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;KAC5C;IAED,UAAiB,WAAW;QAC1B,kBAAkB,CAAC,EAAE,MAAM,CAAC;QAE5B,mBAAmB,CAAC,EAAE,MAAM,CAAC;KAC9B;CACF;AAED,MAAM,WAAW,oBAAoB,CAAC,CAAC,CAAE,SAAQ,kBAAkB;IACjE;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAExB;;OAEG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEjC;;OAEG;IACH,aAAa,EAAE,MAAM,CAAC;IAEtB;;OAEG;IACH,gBAAgB,EAAE,MAAM,CAAC;IAEzB;;;OAGG;IACH,KAAK,CAAC,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC;IAEzB;;;;OAIG;IACH,eAAe,CAAC,EAAE,oBAAoB,CAAC,uBAAuB,CAAC,CAAC,CAAC,CAAC;IAElE;;OAEG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAE3B;;;;;;;;;;OAUG;IACH,UAAU,EAAE,aAAa,CAAC,oBAAoB,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,CAAC;IAEnE;;OAEG;IACH,gBAAgB,CAAC,EAAE,yBAAyB,CAAC;IAE7C;;;OAGG;IACH,mBAAmB,CAAC,EAAE,yBAAyB,CAAC,oBAAoB,CAAC,uBAAuB,CAAC,CAAC;IAE9F;;OAEG;IACH,WAAW,CAAC,EAAE,oBAAoB,CAAC,WAAW,CAAC;CAChD"}

package/attribute-editor/interfaces.js.map

@@ -1 +1 @@
-{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/attribute-editor/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\n/*\n * HACK: Cast the component to a named parametrized interface.\n *\n * This lets us use React.forwardRef and still let the component have type\n * parameters, and the naming convention lets the documenter know that this is\n * a forwardRef-wrapped component.\n *\n * We don't need to expose this type to customers because it's just a simple\n * function type.\n */\nexport interface AttributeEditorForwardRefType {\n  <T>(props: AttributeEditorProps<T> & { ref?: React.Ref<AttributeEditorProps.Ref> }): JSX.Element;\n}\n\nexport namespace AttributeEditorProps {\n  export interface IsItemRemovableFunction<T> {\n    (item: T): boolean;\n  }\n\n  export type FieldRenderable<T> = (item: T, itemIndex: number) => React.ReactNode;\n  export interface FieldDefinition<T> {\n    label?: React.ReactNode;\n    info?: React.ReactNode;\n    control?: FieldRenderable<T> | React.ReactNode;\n    errorText?: FieldRenderable<T> | React.ReactNode;\n    constraintText?: FieldRenderable<T> | React.ReactNode;\n  }\n\n  export interface RemoveButtonClickDetail {\n    itemIndex: number;\n  }\n\n  export interface Ref {\n    focusRemoveButton(itemIndex: number): void;\n  }\n\n  export interface I18nStrings {\n    errorIconAriaLabel?: string;\n  }\n}\n\nexport interface AttributeEditorProps<T> extends BaseComponentProps {\n  /**\n   * Displayed when there are no items to display.\n   */\n  empty?: React.ReactNode;\n\n  /**\n   * Displayed below the add button. Use it for additional information related to the attribute editor.\n   */\n  additionalInfo?: React.ReactNode;\n\n  /**\n   * Specifies the text that's displayed in the add button.\n   */\n  addButtonText: string;\n\n  /**\n   * Specifies the text that's displayed in the remove button.\n   */\n  removeButtonText: string;\n\n  /**\n   * Specifies the items that serve as the data source for all rows.\n   * The display of a row is handled by the `definition` property.\n   */\n  items?: ReadonlyArray<T>;\n\n  /**\n   * Function that determines whether an item is removable. When this function returns `false`, the remove\n   * button is not rendered and the user can't remove the item.\n   * By default, all items are removable.\n   */\n  isItemRemovable?: AttributeEditorProps.IsItemRemovableFunction<T>;\n\n  /**\n   * Determines whether the add button is disabled.\n   */\n  disableAddButton?: boolean;\n\n  /**\n   * Defines the editor configuration. Each object in the array represents one form field in the row.\n   * * `label` (ReactNode) - Text label for the form field.\n   * * `info` (ReactNode) - Info link for the form field.\n   * * `errorText` ((item, itemIndex) => ReactNode) - Error message text to display as a control validation message.\n   *    It renders the form field as invalid if the returned value is not `null` or `undefined`.\n   * * `constraintText` ((item, itemIndex) => ReactNode) - Text to display as a constraint message below the field.\n   * * `control` ((item, itemIndex) => ReactNode) - A control to use as the input for the field.\n   *\n   * A maximum of four fields are supported.\n   */\n  definition: ReadonlyArray<AttributeEditorProps.FieldDefinition<T>>;\n\n  /**\n   * Called when add button is clicked.\n   */\n  onAddButtonClick?: NonCancelableEventHandler;\n\n  /**\n   * Called when remove button is clicked.\n   * The event `detail` contains the index of the corresponding item.\n   */\n  onRemoveButtonClick?: NonCancelableEventHandler<AttributeEditorProps.RemoveButtonClickDetail>;\n\n  /**\n   * An object containing all the necessary localized strings required by the component.\n   */\n  i18nStrings?: AttributeEditorProps.I18nStrings;\n}\n"]}
+{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/attribute-editor/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\n/*\n * HACK: Cast the component to a named parametrized interface.\n *\n * This lets us use React.forwardRef and still let the component have type\n * parameters, and the naming convention lets the documenter know that this is\n * a forwardRef-wrapped component.\n *\n * We don't need to expose this type to customers because it's just a simple\n * function type.\n */\nexport interface AttributeEditorForwardRefType {\n  <T>(props: AttributeEditorProps<T> & { ref?: React.Ref<AttributeEditorProps.Ref> }): JSX.Element;\n}\n\nexport namespace AttributeEditorProps {\n  export interface IsItemRemovableFunction<T> {\n    (item: T): boolean;\n  }\n\n  export type FieldRenderable<T> = (item: T, itemIndex: number) => React.ReactNode;\n  export interface FieldDefinition<T> {\n    label?: React.ReactNode;\n    info?: React.ReactNode;\n    control?: FieldRenderable<T> | React.ReactNode;\n    errorText?: FieldRenderable<T> | React.ReactNode;\n    constraintText?: FieldRenderable<T> | React.ReactNode;\n  }\n\n  export interface RemoveButtonClickDetail {\n    itemIndex: number;\n  }\n\n  export interface Ref {\n    focusRemoveButton(itemIndex: number): void;\n  }\n\n  export interface I18nStrings {\n    errorIconAriaLabel?: string;\n\n    itemRemovedAriaLive?: string;\n  }\n}\n\nexport interface AttributeEditorProps<T> extends BaseComponentProps {\n  /**\n   * Displayed when there are no items to display.\n   */\n  empty?: React.ReactNode;\n\n  /**\n   * Displayed below the add button. Use it for additional information related to the attribute editor.\n   */\n  additionalInfo?: React.ReactNode;\n\n  /**\n   * Specifies the text that's displayed in the add button.\n   */\n  addButtonText: string;\n\n  /**\n   * Specifies the text that's displayed in the remove button.\n   */\n  removeButtonText: string;\n\n  /**\n   * Specifies the items that serve as the data source for all rows.\n   * The display of a row is handled by the `definition` property.\n   */\n  items?: ReadonlyArray<T>;\n\n  /**\n   * Function that determines whether an item is removable. When this function returns `false`, the remove\n   * button is not rendered and the user can't remove the item.\n   * By default, all items are removable.\n   */\n  isItemRemovable?: AttributeEditorProps.IsItemRemovableFunction<T>;\n\n  /**\n   * Determines whether the add button is disabled.\n   */\n  disableAddButton?: boolean;\n\n  /**\n   * Defines the editor configuration. Each object in the array represents one form field in the row.\n   * * `label` (ReactNode) - Text label for the form field.\n   * * `info` (ReactNode) - Info link for the form field.\n   * * `errorText` ((item, itemIndex) => ReactNode) - Error message text to display as a control validation message.\n   *    It renders the form field as invalid if the returned value is not `null` or `undefined`.\n   * * `constraintText` ((item, itemIndex) => ReactNode) - Text to display as a constraint message below the field.\n   * * `control` ((item, itemIndex) => ReactNode) - A control to use as the input for the field.\n   *\n   * A maximum of four fields are supported.\n   */\n  definition: ReadonlyArray<AttributeEditorProps.FieldDefinition<T>>;\n\n  /**\n   * Called when add button is clicked.\n   */\n  onAddButtonClick?: NonCancelableEventHandler;\n\n  /**\n   * Called when remove button is clicked.\n   * The event `detail` contains the index of the corresponding item.\n   */\n  onRemoveButtonClick?: NonCancelableEventHandler<AttributeEditorProps.RemoveButtonClickDetail>;\n\n  /**\n   * An object containing all the necessary localized strings required by the component.\n   */\n  i18nStrings?: AttributeEditorProps.I18nStrings;\n}\n"]}

package/attribute-editor/internal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/attribute-editor/internal.tsx"],"names":[],"mappings":"AAUA,OAAO,EAAE,6BAA6B,EAAwB,MAAM,cAAc,CAAC;AAcnF,QAAA,MAAM,uBAAuB,+BAuEK,CAAC;AAEnC,eAAe,uBAAuB,CAAC"}
+{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/attribute-editor/internal.tsx"],"names":[],"mappings":"AAUA,OAAO,EAAE,6BAA6B,EAAwB,MAAM,cAAc,CAAC;AAgBnF,QAAA,MAAM,uBAAuB,+BAwFK,CAAC;AAEnC,eAAe,uBAAuB,CAAC"}

package/attribute-editor/internal.js

@@ -1,7 +1,7 @@
 import { __assign, __rest } from "tslib";
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import React, { useImperativeHandle, useRef } from 'react';
+import React, { useImperativeHandle, useRef, useState } from 'react';
 import clsx from 'clsx';
 import { getBaseProps } from '../internal/base-component';
 import { InternalButton } from '../button/internal';
@@ -12,11 +12,14 @@ import { useContainerBreakpoints } from '../internal/hooks/container-queries';
 import InternalBox from '../box/internal';
 import { useMergeRefs } from '../internal/hooks/use-merge-refs';
 import { useUniqueId } from '../internal/hooks/use-unique-id';
+import { usePrevious } from '../internal/hooks/use-previous';
+import LiveRegion from '../internal/components/live-region';
 var InternalAttributeEditor = React.forwardRef(function (_a, ref) {
     var additionalInfo = _a.additionalInfo, disableAddButton = _a.disableAddButton, definition = _a.definition, items = _a.items, _b = _a.isItemRemovable, isItemRemovable = _b === void 0 ? function () { return true; } : _b, empty = _a.empty, addButtonText = _a.addButtonText, removeButtonText = _a.removeButtonText, i18nStrings = _a.i18nStrings, onAddButtonClick = _a.onAddButtonClick, onRemoveButtonClick = _a.onRemoveButtonClick, _c = _a.__internalRootRef, __internalRootRef = _c === void 0 ? null : _c, props = __rest(_a, ["additionalInfo", "disableAddButton", "definition", "items", "isItemRemovable", "empty", "addButtonText", "removeButtonText", "i18nStrings", "onAddButtonClick", "onRemoveButtonClick", "__internalRootRef"]);
     var _d = useContainerBreakpoints(['default', 'xxs', 'xs']), breakpoint = _d[0], breakpointRef = _d[1];
     var removeButtonRefs = useRef([]);
     var wasNonEmpty = useRef(false);
+    var _e = useState(''), removalAnnouncement = _e[0], setRemovalAnnouncement = _e[1];
     var baseProps = getBaseProps(props);
     var isEmpty = items && items.length === 0;
     wasNonEmpty.current = wasNonEmpty.current || !isEmpty;
@@ -29,12 +32,24 @@ var InternalAttributeEditor = React.forwardRef(function (_a, ref) {
     var mergedRef = useMergeRefs(breakpointRef, __internalRootRef);
     var additionalInfoId = useUniqueId('attribute-editor-info');
     var infoAriaDescribedBy = additionalInfo ? additionalInfoId : undefined;
+    var prevItemsLength = usePrevious(items.length);
+    React.useEffect(function () {
+        if (prevItemsLength && prevItemsLength > items.length && (i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.itemRemovedAriaLive)) {
+            setRemovalAnnouncement(i18nStrings.itemRemovedAriaLive);
+        }
+        else {
+            setRemovalAnnouncement('');
+        }
+        // we only want to announce when the number of items decreases (i.e. when an item is removed)
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [items, i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.itemRemovedAriaLive]);
     return (React.createElement("div", __assign({}, baseProps, { ref: mergedRef, className: clsx(baseProps.className, styles.root) }),
         React.createElement(InternalBox, { margin: { bottom: 'l' } },
             isEmpty && React.createElement("div", { className: clsx(styles.empty, wasNonEmpty.current && styles['empty-appear']) }, empty),
             items.map(function (item, index) { return (React.createElement(Row, { key: index, index: index, breakpoint: breakpoint, item: item, definition: definition, i18nStrings: i18nStrings, removable: isItemRemovable(item), removeButtonText: removeButtonText, removeButtonRefs: removeButtonRefs.current, onRemoveButtonClick: onRemoveButtonClick })); })),
         React.createElement(InternalButton, { className: styles['add-button'], disabled: disableAddButton, onClick: onAddButtonClick, formAction: "none", __nativeAttributes: { 'aria-describedby': infoAriaDescribedBy } }, addButtonText),
-        additionalInfo && React.createElement(AdditionalInfo, { id: infoAriaDescribedBy }, additionalInfo)));
+        React.createElement(LiveRegion, { "data-testid": "removal-announcement", delay: 5, key: items.length }, removalAnnouncement),
+        !!additionalInfo && React.createElement(AdditionalInfo, { id: infoAriaDescribedBy }, additionalInfo)));
 });
 export default InternalAttributeEditor;
 //# sourceMappingURL=internal.js.map

package/attribute-editor/internal.js.map

@@ -1 +1 @@
-{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/attribute-editor/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, { useImperativeHandle, useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { getBaseProps } from '../internal/base-component';\n\nimport { ButtonProps } from '../button/interfaces';\nimport { InternalButton } from '../button/internal';\n\nimport { AttributeEditorForwardRefType, AttributeEditorProps } from './interfaces';\nimport { AdditionalInfo } from './additional-info';\nimport { Row } from './row';\n\nimport styles from './styles.css.js';\nimport { useContainerBreakpoints } from '../internal/hooks/container-queries';\nimport InternalBox from '../box/internal';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\nimport { SomeRequired } from '../internal/types';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\n\ntype InternalAttributeEditorProps<T> = SomeRequired<AttributeEditorProps<T>, 'items'> & InternalBaseComponentProps;\n\nconst InternalAttributeEditor = React.forwardRef(\n  <T,>(\n    {\n      additionalInfo,\n      disableAddButton,\n      definition,\n      items,\n      isItemRemovable = () => true,\n      empty,\n      addButtonText,\n      removeButtonText,\n      i18nStrings,\n      onAddButtonClick,\n      onRemoveButtonClick,\n      __internalRootRef = null,\n      ...props\n    }: InternalAttributeEditorProps<T>,\n    ref: React.Ref<AttributeEditorProps.Ref>\n  ) => {\n    const [breakpoint, breakpointRef] = useContainerBreakpoints(['default', 'xxs', 'xs']);\n    const removeButtonRefs = useRef<Array<ButtonProps.Ref | undefined>>([]);\n    const wasNonEmpty = useRef<boolean>(false);\n\n    const baseProps = getBaseProps(props);\n    const isEmpty = items && items.length === 0;\n\n    wasNonEmpty.current = wasNonEmpty.current || !isEmpty;\n\n    useImperativeHandle(ref, () => ({\n      focusRemoveButton(rowIndex: number) {\n        removeButtonRefs.current[rowIndex]?.focus();\n      },\n    }));\n\n    const mergedRef = useMergeRefs(breakpointRef, __internalRootRef);\n\n    const additionalInfoId = useUniqueId('attribute-editor-info');\n    const infoAriaDescribedBy = additionalInfo ? additionalInfoId : undefined;\n\n    return (\n      <div {...baseProps} ref={mergedRef} className={clsx(baseProps.className, styles.root)}>\n        <InternalBox margin={{ bottom: 'l' }}>\n          {isEmpty && <div className={clsx(styles.empty, wasNonEmpty.current && styles['empty-appear'])}>{empty}</div>}\n          {items.map((item, index) => (\n            <Row\n              key={index}\n              index={index}\n              breakpoint={breakpoint}\n              item={item}\n              definition={definition}\n              i18nStrings={i18nStrings}\n              removable={isItemRemovable(item)}\n              removeButtonText={removeButtonText}\n              removeButtonRefs={removeButtonRefs.current}\n              onRemoveButtonClick={onRemoveButtonClick}\n            />\n          ))}\n        </InternalBox>\n        <InternalButton\n          className={styles['add-button']}\n          disabled={disableAddButton}\n          onClick={onAddButtonClick}\n          formAction=\"none\"\n          __nativeAttributes={{ 'aria-describedby': infoAriaDescribedBy }}\n        >\n          {addButtonText}\n        </InternalButton>\n        {additionalInfo && <AdditionalInfo id={infoAriaDescribedBy}>{additionalInfo}</AdditionalInfo>}\n      </div>\n    );\n  }\n) as AttributeEditorForwardRefType;\n\nexport default InternalAttributeEditor;\n"]}
+{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/attribute-editor/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, { useImperativeHandle, useRef, useState } from 'react';\nimport clsx from 'clsx';\n\nimport { getBaseProps } from '../internal/base-component';\n\nimport { ButtonProps } from '../button/interfaces';\nimport { InternalButton } from '../button/internal';\n\nimport { AttributeEditorForwardRefType, AttributeEditorProps } from './interfaces';\nimport { AdditionalInfo } from './additional-info';\nimport { Row } from './row';\n\nimport styles from './styles.css.js';\nimport { useContainerBreakpoints } from '../internal/hooks/container-queries';\nimport InternalBox from '../box/internal';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\nimport { SomeRequired } from '../internal/types';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\nimport { usePrevious } from '../internal/hooks/use-previous';\nimport LiveRegion from '../internal/components/live-region';\n\ntype InternalAttributeEditorProps<T> = SomeRequired<AttributeEditorProps<T>, 'items'> & InternalBaseComponentProps;\n\nconst InternalAttributeEditor = React.forwardRef(\n  <T,>(\n    {\n      additionalInfo,\n      disableAddButton,\n      definition,\n      items,\n      isItemRemovable = () => true,\n      empty,\n      addButtonText,\n      removeButtonText,\n      i18nStrings,\n      onAddButtonClick,\n      onRemoveButtonClick,\n      __internalRootRef = null,\n      ...props\n    }: InternalAttributeEditorProps<T>,\n    ref: React.Ref<AttributeEditorProps.Ref>\n  ) => {\n    const [breakpoint, breakpointRef] = useContainerBreakpoints(['default', 'xxs', 'xs']);\n    const removeButtonRefs = useRef<Array<ButtonProps.Ref | undefined>>([]);\n    const wasNonEmpty = useRef<boolean>(false);\n    const [removalAnnouncement, setRemovalAnnouncement] = useState<string>('');\n\n    const baseProps = getBaseProps(props);\n    const isEmpty = items && items.length === 0;\n\n    wasNonEmpty.current = wasNonEmpty.current || !isEmpty;\n\n    useImperativeHandle(ref, () => ({\n      focusRemoveButton(rowIndex: number) {\n        removeButtonRefs.current[rowIndex]?.focus();\n      },\n    }));\n\n    const mergedRef = useMergeRefs(breakpointRef, __internalRootRef);\n\n    const additionalInfoId = useUniqueId('attribute-editor-info');\n    const infoAriaDescribedBy = additionalInfo ? additionalInfoId : undefined;\n\n    const prevItemsLength = usePrevious(items.length);\n\n    React.useEffect(() => {\n      if (prevItemsLength && prevItemsLength > items.length && i18nStrings?.itemRemovedAriaLive) {\n        setRemovalAnnouncement(i18nStrings.itemRemovedAriaLive);\n      } else {\n        setRemovalAnnouncement('');\n      }\n      // we only want to announce when the number of items decreases (i.e. when an item is removed)\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [items, i18nStrings?.itemRemovedAriaLive]);\n\n    return (\n      <div {...baseProps} ref={mergedRef} className={clsx(baseProps.className, styles.root)}>\n        <InternalBox margin={{ bottom: 'l' }}>\n          {isEmpty && <div className={clsx(styles.empty, wasNonEmpty.current && styles['empty-appear'])}>{empty}</div>}\n          {items.map((item, index) => (\n            <Row\n              key={index}\n              index={index}\n              breakpoint={breakpoint}\n              item={item}\n              definition={definition}\n              i18nStrings={i18nStrings}\n              removable={isItemRemovable(item)}\n              removeButtonText={removeButtonText}\n              removeButtonRefs={removeButtonRefs.current}\n              onRemoveButtonClick={onRemoveButtonClick}\n            />\n          ))}\n        </InternalBox>\n\n        <InternalButton\n          className={styles['add-button']}\n          disabled={disableAddButton}\n          onClick={onAddButtonClick}\n          formAction=\"none\"\n          __nativeAttributes={{ 'aria-describedby': infoAriaDescribedBy }}\n        >\n          {addButtonText}\n        </InternalButton>\n        <LiveRegion data-testid=\"removal-announcement\" delay={5} key={items.length}>\n          {removalAnnouncement}\n        </LiveRegion>\n        {!!additionalInfo && <AdditionalInfo id={infoAriaDescribedBy}>{additionalInfo}</AdditionalInfo>}\n      </div>\n    );\n  }\n) as AttributeEditorForwardRefType;\n\nexport default InternalAttributeEditor;\n"]}

package/flashbar/collapsible-flashbar.d.ts

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

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

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

package/flashbar/collapsible-flashbar.js

@@ -11,12 +11,13 @@ import { Transition } from '../internal/components/transition';
 import useFocusVisible from '../internal/hooks/focus-visible';
 import { getVisualContextClassname } from '../internal/components/visual-context';
 import styles from './styles.css.js';
-import { counterTypes, getFlashTypeCount, getVisibleCollapsedItems } from './utils';
+import { counterTypes, getFlashTypeCount, getVisibleCollapsedItems, isElementTopBeyondViewport, } from './utils';
 import { animate, getDOMRects } from '../internal/animate';
 import { useUniqueId } from '../internal/hooks/use-unique-id';
 import { sendToggleMetric } from './internal/analytics';
 import { useFlashbar } from './common';
 import { throttle } from '../internal/utils/throttle';
+import { scrollElementIntoView } from '../internal/utils/scrollable-containers';
 // If the number of items is equal or less than this value,
 // the toggle element will not be displayed and the Flashbar will look like a regular single-item Flashbar.
 var maxNonCollapsibleItems = 1;
@@ -78,20 +79,22 @@ export default function CollapsibleFlashbar(_a) {
     }, [isFlashbarStackExpanded]);
     var updateBottomSpacing = useMemo(function () {
         return throttle(function () {
+            var _a;
             // Allow vertical space between Flashbar and page bottom only when the Flashbar is reaching the end of the page,
             // otherwise avoid spacing with eventual sticky elements below.
             var listElement = listElementRef === null || listElementRef === void 0 ? void 0 : listElementRef.current;
             var flashbar = listElement === null || listElement === void 0 ? void 0 : listElement.parentElement;
             if (listElement && flashbar) {
-                var bottom = listElement.getBoundingClientRect().bottom;
-                var windowHeight = window.innerHeight;
-                // Apply the class first (before rendering)
-                // so that we can make calculations based on the applied padding-bottom;
+                // Make sure the bottom padding is present when we make the calculations,
                 // then we might decide to remove it or not.
-                flashbar.classList.add(styles['spaced-bottom']);
-                var applySpacing = isFlashbarStackExpanded && bottom + parseInt(getComputedStyle(flashbar).paddingBottom) >= windowHeight;
+                flashbar.classList.remove(styles.floating);
+                var windowHeight = window.innerHeight;
+                // Take the parent region into account if using the App Layout, because it might have additional margins.
+                // Otherwise we use the Flashbar component for this calculation.
+                var outerElement = ((_a = flashbar.parentElement) === null || _a === void 0 ? void 0 : _a.parentElement) || flashbar;
+                var applySpacing = isFlashbarStackExpanded && Math.ceil(outerElement.getBoundingClientRect().bottom) >= windowHeight;
                 if (!applySpacing) {
-                    flashbar.classList.remove(styles['spaced-bottom']);
+                    flashbar.classList.add(styles.floating);
                 }
             }
         }, resizeListenerThrottleDelay);
@@ -111,6 +114,10 @@ export default function CollapsibleFlashbar(_a) {
         // and the new state can be retrieved from the current DOM elements.
         if (initialAnimationState) {
             updateBottomSpacing();
+            // When collapsing, scroll up if necessary to avoid losing track of the focused button
+            var shouldScrollUp = notificationBarRef.current &&
+                !isFlashbarStackExpanded &&
+                isElementTopBeyondViewport(notificationBarRef.current);
             animate({
                 elements: getElementsToAnimate(),
                 oldState: initialAnimationState,
@@ -120,6 +127,9 @@ export default function CollapsibleFlashbar(_a) {
                 },
                 onTransitionsEnd: function () { return setTransitioning(false); }
             });
+            if (notificationBarRef.current && shouldScrollUp) {
+                scrollElementIntoView(notificationBarRef.current);
+            }
             setTransitioning(true);
             setInitialAnimationState(null);
         }
@@ -184,7 +194,7 @@ export default function CollapsibleFlashbar(_a) {
     return (React.createElement("div", __assign({}, baseProps, { className: clsx(baseProps.className, styles.flashbar, styles["breakpoint-".concat(breakpoint)], styles.stack, isFlashbarStackExpanded && styles.expanded, getVisualContextClassname('flashbar')), ref: mergedRef }),
         React.createElement(React.Fragment, null,
             isFlashbarStackExpanded && renderList(),
-            isCollapsible && (React.createElement("div", { className: clsx(styles.toggle, isVisualRefresh && styles['visual-refresh'], isFlashbarStackExpanded ? styles.expanded : styles.collapsed, transitioning && styles['animation-running']), onClick: toggleCollapseExpand, ref: notificationBarRef },
+            isCollapsible && (React.createElement("div", { className: clsx(styles['notification-bar'], isVisualRefresh && styles['visual-refresh'], isFlashbarStackExpanded ? styles.expanded : styles.collapsed, transitioning && styles['animation-running']), onClick: toggleCollapseExpand, ref: notificationBarRef },
                 React.createElement("span", { "aria-live": "polite", className: styles.status, role: "status", id: itemCountElementId },
                     notificationBarText && React.createElement("h2", { className: styles.header }, notificationBarText),
                     React.createElement("span", { className: styles['item-count'] }, counterTypes.map(function (_a) {

package/flashbar/collapsible-flashbar.js.map

@@ -1 +1 @@
-{"version":3,"file":"collapsible-flashbar.js","sourceRoot":"","sources":["../../../src/flashbar/collapsible-flashbar.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport clsx from 'clsx';\nimport React, { useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react';\nimport customCssProps from '../internal/generated/custom-css-properties';\nimport { Flash, focusFlashById } from './flash';\nimport { FlashbarProps, CollapsibleFlashbarProps } from './interfaces';\nimport InternalIcon from '../icon/internal';\nimport { TransitionGroup } from 'react-transition-group';\nimport { Transition } from '../internal/components/transition';\nimport useFocusVisible from '../internal/hooks/focus-visible';\nimport { getVisualContextClassname } from '../internal/components/visual-context';\n\nimport styles from './styles.css.js';\nimport { counterTypes, getFlashTypeCount, getVisibleCollapsedItems, StackableItem } from './utils';\nimport { animate, getDOMRects } from '../internal/animate';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\nimport { IconProps } from '../icon/interfaces';\nimport { sendToggleMetric } from './internal/analytics';\nimport { useFlashbar } from './common';\nimport { throttle } from '../internal/utils/throttle';\n\nexport { FlashbarProps };\n\n// If the number of items is equal or less than this value,\n// the toggle element will not be displayed and the Flashbar will look like a regular single-item Flashbar.\nconst maxNonCollapsibleItems = 1;\n\nconst resizeListenerThrottleDelay = 100;\n\nexport default function CollapsibleFlashbar({ items, ...restProps }: FlashbarProps & CollapsibleFlashbarProps) {\n  const [enteringItems, setEnteringItems] = useState<ReadonlyArray<FlashbarProps.MessageDefinition>>([]);\n  const [exitingItems, setExitingItems] = useState<ReadonlyArray<FlashbarProps.MessageDefinition>>([]);\n  const [isFlashbarStackExpanded, setIsFlashbarStackExpanded] = useState(false);\n\n  const getElementsToAnimate = useCallback(() => {\n    const flashElements = isFlashbarStackExpanded ? expandedItemRefs.current : collapsedItemRefs.current;\n    return { ...flashElements, notificationBar: notificationBarRef.current };\n  }, [isFlashbarStackExpanded]);\n\n  const prepareAnimations = useCallback(() => {\n    const rects = getDOMRects(getElementsToAnimate());\n    setInitialAnimationState(rects);\n  }, [getElementsToAnimate]);\n\n  const { ariaLabel, baseProps, breakpoint, isReducedMotion, isVisualRefresh, mergedRef, ref } = useFlashbar({\n    items,\n    ...restProps,\n    onItemsAdded: newItems => {\n      setEnteringItems([...enteringItems, ...newItems]);\n    },\n    onItemsChanged: options => {\n      // If not all items have ID, we can still animate collapse/expand transitions\n      // because we can rely on each item's index in the original array,\n      // but we can't do that when elements are added or removed, since the index changes.\n      if (options?.allItemsHaveId && !options?.isReducedMotion) {\n        prepareAnimations();\n      }\n    },\n    onItemsRemoved: removedItems => {\n      setExitingItems([...exitingItems, ...removedItems]);\n    },\n  });\n\n  const isFocusVisible = useFocusVisible();\n  const collapsedItemRefs = useRef<Record<string | number, HTMLElement | null>>({});\n  const expandedItemRefs = useRef<Record<string | number, HTMLElement | null>>({});\n  const [initialAnimationState, setInitialAnimationState] = useState<Record<string | number, DOMRect> | null>(null);\n  const listElementRef = useRef<HTMLUListElement | null>(null);\n  const notificationBarRef = useRef<HTMLDivElement | null>(null);\n  const [transitioning, setTransitioning] = useState(false);\n  const flashbarElementId = useUniqueId('flashbar');\n  const itemCountElementId = useUniqueId('item-count');\n\n  if (items.length <= maxNonCollapsibleItems && isFlashbarStackExpanded) {\n    setIsFlashbarStackExpanded(false);\n  }\n\n  const animateFlash = !isReducedMotion;\n\n  function toggleCollapseExpand() {\n    sendToggleMetric(items.length, !isFlashbarStackExpanded);\n    if (!isReducedMotion) {\n      prepareAnimations();\n    }\n    setIsFlashbarStackExpanded(prev => !prev);\n  }\n\n  useLayoutEffect(() => {\n    if (isFlashbarStackExpanded && items?.length) {\n      const mostRecentItem = items[0];\n      if (mostRecentItem.id !== undefined) {\n        focusFlashById(ref.current, mostRecentItem.id);\n      }\n    }\n    // Run this after expanding, but not every time the items change.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [isFlashbarStackExpanded]);\n\n  const updateBottomSpacing = useMemo(\n    () =>\n      throttle(() => {\n        // Allow vertical space between Flashbar and page bottom only when the Flashbar is reaching the end of the page,\n        // otherwise avoid spacing with eventual sticky elements below.\n        const listElement = listElementRef?.current;\n        const flashbar = listElement?.parentElement;\n        if (listElement && flashbar) {\n          const bottom = listElement.getBoundingClientRect().bottom;\n          const windowHeight = window.innerHeight;\n          // Apply the class first (before rendering)\n          // so that we can make calculations based on the applied padding-bottom;\n          // then we might decide to remove it or not.\n          flashbar.classList.add(styles['spaced-bottom']);\n          const applySpacing =\n            isFlashbarStackExpanded && bottom + parseInt(getComputedStyle(flashbar).paddingBottom) >= windowHeight;\n          if (!applySpacing) {\n            flashbar.classList.remove(styles['spaced-bottom']);\n          }\n        }\n      }, resizeListenerThrottleDelay),\n    [isFlashbarStackExpanded]\n  );\n\n  useLayoutEffect(() => {\n    window.addEventListener('resize', updateBottomSpacing);\n    return () => {\n      window.removeEventListener('resize', updateBottomSpacing);\n      updateBottomSpacing.cancel();\n    };\n  }, [updateBottomSpacing]);\n\n  const { i18nStrings } = restProps;\n\n  useLayoutEffect(() => {\n    // When `useLayoutEffect` is called, the DOM is updated but has not been painted yet,\n    // so it's a good moment to trigger animations that will make calculations based on old and new DOM state.\n    // The old state is kept in `initialAnimationState`\n    // and the new state can be retrieved from the current DOM elements.\n\n    if (initialAnimationState) {\n      updateBottomSpacing();\n      animate({\n        elements: getElementsToAnimate(),\n        oldState: initialAnimationState,\n        newElementInitialState: ({ top }) => ({ scale: 0.9, y: -0.2 * top }),\n        onTransitionsEnd: () => setTransitioning(false),\n      });\n      setTransitioning(true);\n      setInitialAnimationState(null);\n    }\n  }, [updateBottomSpacing, getElementsToAnimate, initialAnimationState, isFlashbarStackExpanded]);\n\n  const isCollapsible = items.length > maxNonCollapsibleItems;\n\n  const countByType = getFlashTypeCount(items);\n\n  const stackDepth = Math.min(3, items.length);\n\n  const itemsToShow = isFlashbarStackExpanded\n    ? items.map((item, index) => ({ ...item, expandedIndex: index }))\n    : getVisibleCollapsedItems(items, stackDepth).map((item: StackableItem, index: number) => ({\n        ...item,\n        collapsedIndex: index,\n      }));\n\n  const notificationBarText = i18nStrings?.notificationBarText;\n\n  const getItemId = (item: StackableItem | FlashbarProps.MessageDefinition) =>\n    item.id ?? (item as StackableItem).expandedIndex ?? 0;\n\n  // This check allows us to use the standard \"enter\" Transition only when the notification was not existing before.\n  // If instead it was moved to the top of the stack but was already present in the array\n  // (e.g, after dismissing another notification),\n  // we need to use different, more custom and more controlled animations.\n  const hasEntered = (item: StackableItem | FlashbarProps.MessageDefinition) =>\n    enteringItems.some(_item => _item.id && _item.id === item.id);\n  const hasLeft = (item: StackableItem | FlashbarProps.MessageDefinition) => !('expandedIndex' in item);\n  const hasEnteredOrLeft = (item: StackableItem | FlashbarProps.MessageDefinition) => hasEntered(item) || hasLeft(item);\n\n  const showInnerContent = (item: StackableItem | FlashbarProps.MessageDefinition) =>\n    isFlashbarStackExpanded || hasLeft(item) || ('expandedIndex' in item && item.expandedIndex === 0);\n\n  const shouldUseStandardAnimation = (item: StackableItem, index: number) => index === 0 && hasEnteredOrLeft(item);\n\n  const getAnimationElementId = (item: StackableItem) => `flash-${getItemId(item)}`;\n\n  const renderList = () => (\n    <ul\n      ref={listElementRef}\n      className={clsx(\n        styles['flash-list'],\n        isFlashbarStackExpanded ? styles.expanded : styles.collapsed,\n        transitioning && styles['animation-running'],\n        initialAnimationState && styles['animation-ready'],\n        isVisualRefresh && styles['visual-refresh']\n      )}\n      id={flashbarElementId}\n      aria-label={ariaLabel}\n      aria-describedby={isCollapsible ? itemCountElementId : undefined}\n      style={\n        !isFlashbarStackExpanded || transitioning\n          ? {\n              [customCssProps.flashbarStackDepth]: stackDepth,\n            }\n          : undefined\n      }\n    >\n      <TransitionGroup component={null}>\n        {itemsToShow.map((item: StackableItem, index: number) => (\n          <Transition\n            key={getItemId(item)}\n            in={!hasLeft(item)}\n            onStatusChange={status => {\n              if (status === 'entered') {\n                setEnteringItems([]);\n              } else if (status === 'exited') {\n                setExitingItems([]);\n              }\n            }}\n          >\n            {(state: string, transitionRootElement: React.Ref<HTMLDivElement> | undefined) => (\n              <li\n                aria-hidden={!showInnerContent(item)}\n                className={\n                  showInnerContent(item)\n                    ? clsx(\n                        styles['flash-list-item'],\n                        !isFlashbarStackExpanded && styles.item,\n                        !collapsedItemRefs.current[getAnimationElementId(item)] && styles['expanded-only']\n                      )\n                    : clsx(styles.flash, styles[`flash-type-${item.type ?? 'info'}`], styles.item)\n                }\n                ref={element => {\n                  if (isFlashbarStackExpanded) {\n                    expandedItemRefs.current[getAnimationElementId(item)] = element;\n                  } else {\n                    collapsedItemRefs.current[getAnimationElementId(item)] = element;\n                  }\n                }}\n                style={\n                  !isFlashbarStackExpanded || transitioning\n                    ? {\n                        [customCssProps.flashbarStackIndex]:\n                          (item as StackableItem).collapsedIndex ?? (item as StackableItem).expandedIndex ?? index,\n                      }\n                    : undefined\n                }\n                key={getItemId(item)}\n              >\n                {showInnerContent(item) && (\n                  <Flash\n                    // eslint-disable-next-line react/forbid-component-props\n                    className={clsx(\n                      animateFlash && styles['flash-with-motion'],\n                      isVisualRefresh && styles['flash-refresh']\n                    )}\n                    key={getItemId(item)}\n                    ref={shouldUseStandardAnimation(item, index) ? transitionRootElement : undefined}\n                    transitionState={shouldUseStandardAnimation(item, index) ? state : undefined}\n                    {...item}\n                  />\n                )}\n              </li>\n            )}\n          </Transition>\n        ))}\n      </TransitionGroup>\n    </ul>\n  );\n\n  return (\n    <div\n      {...baseProps}\n      className={clsx(\n        baseProps.className,\n        styles.flashbar,\n        styles[`breakpoint-${breakpoint}`],\n        styles.stack,\n        isFlashbarStackExpanded && styles.expanded,\n        getVisualContextClassname('flashbar')\n      )}\n      ref={mergedRef}\n    >\n      <>\n        {isFlashbarStackExpanded && renderList()}\n        {isCollapsible && (\n          <div\n            className={clsx(\n              styles.toggle,\n              isVisualRefresh && styles['visual-refresh'],\n              isFlashbarStackExpanded ? styles.expanded : styles.collapsed,\n              transitioning && styles['animation-running']\n            )}\n            onClick={toggleCollapseExpand}\n            ref={notificationBarRef}\n          >\n            <span aria-live=\"polite\" className={styles.status} role=\"status\" id={itemCountElementId}>\n              {notificationBarText && <h2 className={styles.header}>{notificationBarText}</h2>}\n              <span className={styles['item-count']}>\n                {counterTypes.map(({ type, labelName, iconName }) => (\n                  <NotificationTypeCount\n                    key={type}\n                    iconName={iconName}\n                    label={i18nStrings ? i18nStrings[labelName] : undefined}\n                    count={countByType[type]}\n                  />\n                ))}\n              </span>\n            </span>\n            <button\n              aria-controls={flashbarElementId}\n              aria-describedby={itemCountElementId}\n              aria-expanded={isFlashbarStackExpanded}\n              aria-label={i18nStrings?.notificationBarAriaLabel}\n              className={clsx(styles.button, isFlashbarStackExpanded && styles.expanded)}\n              {...isFocusVisible}\n            >\n              <InternalIcon className={styles.icon} size=\"normal\" name=\"angle-down\" />\n            </button>\n          </div>\n        )}\n        {!isFlashbarStackExpanded && renderList()}\n      </>\n    </div>\n  );\n}\n\nconst NotificationTypeCount = ({\n  iconName,\n  label,\n  count,\n}: {\n  iconName: IconProps.Name;\n  label?: string;\n  count: number;\n}) => {\n  return (\n    <span className={styles['type-count']}>\n      <span aria-label={label} role=\"img\">\n        <span title={label} aria-hidden=\"true\">\n          <InternalIcon name={iconName} />\n        </span>\n      </span>\n      <span className={styles['count-number']}>{count}</span>\n    </span>\n  );\n};\n"]}
+{"version":3,"file":"collapsible-flashbar.js","sourceRoot":"","sources":["../../../src/flashbar/collapsible-flashbar.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport clsx from 'clsx';\nimport React, { useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react';\nimport customCssProps from '../internal/generated/custom-css-properties';\nimport { Flash, focusFlashById } from './flash';\nimport { FlashbarProps } from './interfaces';\nimport InternalIcon from '../icon/internal';\nimport { TransitionGroup } from 'react-transition-group';\nimport { Transition } from '../internal/components/transition';\nimport useFocusVisible from '../internal/hooks/focus-visible';\nimport { getVisualContextClassname } from '../internal/components/visual-context';\n\nimport styles from './styles.css.js';\nimport {\n  counterTypes,\n  getFlashTypeCount,\n  getVisibleCollapsedItems,\n  isElementTopBeyondViewport,\n  StackableItem,\n} from './utils';\nimport { animate, getDOMRects } from '../internal/animate';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\nimport { IconProps } from '../icon/interfaces';\nimport { sendToggleMetric } from './internal/analytics';\nimport { useFlashbar } from './common';\nimport { throttle } from '../internal/utils/throttle';\nimport { scrollElementIntoView } from '../internal/utils/scrollable-containers';\n\nexport { FlashbarProps };\n\n// If the number of items is equal or less than this value,\n// the toggle element will not be displayed and the Flashbar will look like a regular single-item Flashbar.\nconst maxNonCollapsibleItems = 1;\n\nconst resizeListenerThrottleDelay = 100;\n\nexport default function CollapsibleFlashbar({ items, ...restProps }: FlashbarProps) {\n  const [enteringItems, setEnteringItems] = useState<ReadonlyArray<FlashbarProps.MessageDefinition>>([]);\n  const [exitingItems, setExitingItems] = useState<ReadonlyArray<FlashbarProps.MessageDefinition>>([]);\n  const [isFlashbarStackExpanded, setIsFlashbarStackExpanded] = useState(false);\n\n  const getElementsToAnimate = useCallback(() => {\n    const flashElements = isFlashbarStackExpanded ? expandedItemRefs.current : collapsedItemRefs.current;\n    return { ...flashElements, notificationBar: notificationBarRef.current };\n  }, [isFlashbarStackExpanded]);\n\n  const prepareAnimations = useCallback(() => {\n    const rects = getDOMRects(getElementsToAnimate());\n    setInitialAnimationState(rects);\n  }, [getElementsToAnimate]);\n\n  const { ariaLabel, baseProps, breakpoint, isReducedMotion, isVisualRefresh, mergedRef, ref } = useFlashbar({\n    items,\n    ...restProps,\n    onItemsAdded: newItems => {\n      setEnteringItems([...enteringItems, ...newItems]);\n    },\n    onItemsChanged: options => {\n      // If not all items have ID, we can still animate collapse/expand transitions\n      // because we can rely on each item's index in the original array,\n      // but we can't do that when elements are added or removed, since the index changes.\n      if (options?.allItemsHaveId && !options?.isReducedMotion) {\n        prepareAnimations();\n      }\n    },\n    onItemsRemoved: removedItems => {\n      setExitingItems([...exitingItems, ...removedItems]);\n    },\n  });\n\n  const isFocusVisible = useFocusVisible();\n  const collapsedItemRefs = useRef<Record<string | number, HTMLElement | null>>({});\n  const expandedItemRefs = useRef<Record<string | number, HTMLElement | null>>({});\n  const [initialAnimationState, setInitialAnimationState] = useState<Record<string | number, DOMRect> | null>(null);\n  const listElementRef = useRef<HTMLUListElement | null>(null);\n  const notificationBarRef = useRef<HTMLDivElement | null>(null);\n  const [transitioning, setTransitioning] = useState(false);\n  const flashbarElementId = useUniqueId('flashbar');\n  const itemCountElementId = useUniqueId('item-count');\n\n  if (items.length <= maxNonCollapsibleItems && isFlashbarStackExpanded) {\n    setIsFlashbarStackExpanded(false);\n  }\n\n  const animateFlash = !isReducedMotion;\n\n  function toggleCollapseExpand() {\n    sendToggleMetric(items.length, !isFlashbarStackExpanded);\n    if (!isReducedMotion) {\n      prepareAnimations();\n    }\n    setIsFlashbarStackExpanded(prev => !prev);\n  }\n\n  useLayoutEffect(() => {\n    if (isFlashbarStackExpanded && items?.length) {\n      const mostRecentItem = items[0];\n      if (mostRecentItem.id !== undefined) {\n        focusFlashById(ref.current, mostRecentItem.id);\n      }\n    }\n    // Run this after expanding, but not every time the items change.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [isFlashbarStackExpanded]);\n\n  const updateBottomSpacing = useMemo(\n    () =>\n      throttle(() => {\n        // Allow vertical space between Flashbar and page bottom only when the Flashbar is reaching the end of the page,\n        // otherwise avoid spacing with eventual sticky elements below.\n        const listElement = listElementRef?.current;\n        const flashbar = listElement?.parentElement;\n        if (listElement && flashbar) {\n          // Make sure the bottom padding is present when we make the calculations,\n          // then we might decide to remove it or not.\n          flashbar.classList.remove(styles.floating);\n          const windowHeight = window.innerHeight;\n          // Take the parent region into account if using the App Layout, because it might have additional margins.\n          // Otherwise we use the Flashbar component for this calculation.\n          const outerElement = flashbar.parentElement?.parentElement || flashbar;\n          const applySpacing =\n            isFlashbarStackExpanded && Math.ceil(outerElement.getBoundingClientRect().bottom) >= windowHeight;\n          if (!applySpacing) {\n            flashbar.classList.add(styles.floating);\n          }\n        }\n      }, resizeListenerThrottleDelay),\n    [isFlashbarStackExpanded]\n  );\n\n  useLayoutEffect(() => {\n    window.addEventListener('resize', updateBottomSpacing);\n    return () => {\n      window.removeEventListener('resize', updateBottomSpacing);\n      updateBottomSpacing.cancel();\n    };\n  }, [updateBottomSpacing]);\n\n  const { i18nStrings } = restProps;\n\n  useLayoutEffect(() => {\n    // When `useLayoutEffect` is called, the DOM is updated but has not been painted yet,\n    // so it's a good moment to trigger animations that will make calculations based on old and new DOM state.\n    // The old state is kept in `initialAnimationState`\n    // and the new state can be retrieved from the current DOM elements.\n\n    if (initialAnimationState) {\n      updateBottomSpacing();\n\n      // When collapsing, scroll up if necessary to avoid losing track of the focused button\n      const shouldScrollUp =\n        notificationBarRef.current &&\n        !isFlashbarStackExpanded &&\n        isElementTopBeyondViewport(notificationBarRef.current);\n\n      animate({\n        elements: getElementsToAnimate(),\n        oldState: initialAnimationState,\n        newElementInitialState: ({ top }) => ({ scale: 0.9, y: -0.2 * top }),\n        onTransitionsEnd: () => setTransitioning(false),\n      });\n\n      if (notificationBarRef.current && shouldScrollUp) {\n        scrollElementIntoView(notificationBarRef.current);\n      }\n\n      setTransitioning(true);\n      setInitialAnimationState(null);\n    }\n  }, [updateBottomSpacing, getElementsToAnimate, initialAnimationState, isFlashbarStackExpanded]);\n\n  const isCollapsible = items.length > maxNonCollapsibleItems;\n\n  const countByType = getFlashTypeCount(items);\n\n  const stackDepth = Math.min(3, items.length);\n\n  const itemsToShow = isFlashbarStackExpanded\n    ? items.map((item, index) => ({ ...item, expandedIndex: index }))\n    : getVisibleCollapsedItems(items, stackDepth).map((item: StackableItem, index: number) => ({\n        ...item,\n        collapsedIndex: index,\n      }));\n\n  const notificationBarText = i18nStrings?.notificationBarText;\n\n  const getItemId = (item: StackableItem | FlashbarProps.MessageDefinition) =>\n    item.id ?? (item as StackableItem).expandedIndex ?? 0;\n\n  // This check allows us to use the standard \"enter\" Transition only when the notification was not existing before.\n  // If instead it was moved to the top of the stack but was already present in the array\n  // (e.g, after dismissing another notification),\n  // we need to use different, more custom and more controlled animations.\n  const hasEntered = (item: StackableItem | FlashbarProps.MessageDefinition) =>\n    enteringItems.some(_item => _item.id && _item.id === item.id);\n  const hasLeft = (item: StackableItem | FlashbarProps.MessageDefinition) => !('expandedIndex' in item);\n  const hasEnteredOrLeft = (item: StackableItem | FlashbarProps.MessageDefinition) => hasEntered(item) || hasLeft(item);\n\n  const showInnerContent = (item: StackableItem | FlashbarProps.MessageDefinition) =>\n    isFlashbarStackExpanded || hasLeft(item) || ('expandedIndex' in item && item.expandedIndex === 0);\n\n  const shouldUseStandardAnimation = (item: StackableItem, index: number) => index === 0 && hasEnteredOrLeft(item);\n\n  const getAnimationElementId = (item: StackableItem) => `flash-${getItemId(item)}`;\n\n  const renderList = () => (\n    <ul\n      ref={listElementRef}\n      className={clsx(\n        styles['flash-list'],\n        isFlashbarStackExpanded ? styles.expanded : styles.collapsed,\n        transitioning && styles['animation-running'],\n        initialAnimationState && styles['animation-ready'],\n        isVisualRefresh && styles['visual-refresh']\n      )}\n      id={flashbarElementId}\n      aria-label={ariaLabel}\n      aria-describedby={isCollapsible ? itemCountElementId : undefined}\n      style={\n        !isFlashbarStackExpanded || transitioning\n          ? {\n              [customCssProps.flashbarStackDepth]: stackDepth,\n            }\n          : undefined\n      }\n    >\n      <TransitionGroup component={null}>\n        {itemsToShow.map((item: StackableItem, index: number) => (\n          <Transition\n            key={getItemId(item)}\n            in={!hasLeft(item)}\n            onStatusChange={status => {\n              if (status === 'entered') {\n                setEnteringItems([]);\n              } else if (status === 'exited') {\n                setExitingItems([]);\n              }\n            }}\n          >\n            {(state: string, transitionRootElement: React.Ref<HTMLDivElement> | undefined) => (\n              <li\n                aria-hidden={!showInnerContent(item)}\n                className={\n                  showInnerContent(item)\n                    ? clsx(\n                        styles['flash-list-item'],\n                        !isFlashbarStackExpanded && styles.item,\n                        !collapsedItemRefs.current[getAnimationElementId(item)] && styles['expanded-only']\n                      )\n                    : clsx(styles.flash, styles[`flash-type-${item.type ?? 'info'}`], styles.item)\n                }\n                ref={element => {\n                  if (isFlashbarStackExpanded) {\n                    expandedItemRefs.current[getAnimationElementId(item)] = element;\n                  } else {\n                    collapsedItemRefs.current[getAnimationElementId(item)] = element;\n                  }\n                }}\n                style={\n                  !isFlashbarStackExpanded || transitioning\n                    ? {\n                        [customCssProps.flashbarStackIndex]:\n                          (item as StackableItem).collapsedIndex ?? (item as StackableItem).expandedIndex ?? index,\n                      }\n                    : undefined\n                }\n                key={getItemId(item)}\n              >\n                {showInnerContent(item) && (\n                  <Flash\n                    // eslint-disable-next-line react/forbid-component-props\n                    className={clsx(\n                      animateFlash && styles['flash-with-motion'],\n                      isVisualRefresh && styles['flash-refresh']\n                    )}\n                    key={getItemId(item)}\n                    ref={shouldUseStandardAnimation(item, index) ? transitionRootElement : undefined}\n                    transitionState={shouldUseStandardAnimation(item, index) ? state : undefined}\n                    {...item}\n                  />\n                )}\n              </li>\n            )}\n          </Transition>\n        ))}\n      </TransitionGroup>\n    </ul>\n  );\n\n  return (\n    <div\n      {...baseProps}\n      className={clsx(\n        baseProps.className,\n        styles.flashbar,\n        styles[`breakpoint-${breakpoint}`],\n        styles.stack,\n        isFlashbarStackExpanded && styles.expanded,\n        getVisualContextClassname('flashbar')\n      )}\n      ref={mergedRef}\n    >\n      <>\n        {isFlashbarStackExpanded && renderList()}\n        {isCollapsible && (\n          <div\n            className={clsx(\n              styles['notification-bar'],\n              isVisualRefresh && styles['visual-refresh'],\n              isFlashbarStackExpanded ? styles.expanded : styles.collapsed,\n              transitioning && styles['animation-running']\n            )}\n            onClick={toggleCollapseExpand}\n            ref={notificationBarRef}\n          >\n            <span aria-live=\"polite\" className={styles.status} role=\"status\" id={itemCountElementId}>\n              {notificationBarText && <h2 className={styles.header}>{notificationBarText}</h2>}\n              <span className={styles['item-count']}>\n                {counterTypes.map(({ type, labelName, iconName }) => (\n                  <NotificationTypeCount\n                    key={type}\n                    iconName={iconName}\n                    label={i18nStrings ? i18nStrings[labelName] : undefined}\n                    count={countByType[type]}\n                  />\n                ))}\n              </span>\n            </span>\n            <button\n              aria-controls={flashbarElementId}\n              aria-describedby={itemCountElementId}\n              aria-expanded={isFlashbarStackExpanded}\n              aria-label={i18nStrings?.notificationBarAriaLabel}\n              className={clsx(styles.button, isFlashbarStackExpanded && styles.expanded)}\n              {...isFocusVisible}\n            >\n              <InternalIcon className={styles.icon} size=\"normal\" name=\"angle-down\" />\n            </button>\n          </div>\n        )}\n        {!isFlashbarStackExpanded && renderList()}\n      </>\n    </div>\n  );\n}\n\nconst NotificationTypeCount = ({\n  iconName,\n  label,\n  count,\n}: {\n  iconName: IconProps.Name;\n  label?: string;\n  count: number;\n}) => {\n  return (\n    <span className={styles['type-count']}>\n      <span aria-label={label} role=\"img\">\n        <span title={label} aria-hidden=\"true\">\n          <InternalIcon name={iconName} />\n        </span>\n      </span>\n      <span className={styles['count-number']}>{count}</span>\n    </span>\n  );\n};\n"]}

package/flashbar/common.d.ts

@@ -1,6 +1,6 @@
-import { CollapsibleFlashbarProps, FlashbarProps } from './interfaces';
+import { FlashbarProps } from './interfaces';
 export declare const componentName = "Flashbar";
-export declare function useFlashbar({ i18nStrings, items, onItemsAdded, onItemsChanged, onItemsRemoved, ...restProps }: CollapsibleFlashbarProps & {
+export declare function useFlashbar({ i18nStrings, items, onItemsAdded, onItemsChanged, onItemsRemoved, ...restProps }: FlashbarProps & {
     onItemsAdded?: (items: FlashbarProps.MessageDefinition[]) => void;
     onItemsRemoved?: (items: FlashbarProps.MessageDefinition[]) => void;
     onItemsChanged?: (options?: {

package/flashbar/common.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"common.d.ts","sourceRoot":"","sources":["../../../src/flashbar/common.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,wBAAwB,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAGvE,eAAO,MAAM,aAAa,aAAa,CAAC;AAGxC,wBAAgB,WAAW,CAAC,EAC1B,WAAW,EACX,KAAK,EACL,YAAY,EACZ,cAAc,EACd,cAAc,EACd,GAAG,SAAS,EACb,EAAE,wBAAwB,GAAG;IAC5B,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,CAAC,iBAAiB,EAAE,KAAK,IAAI,CAAC;IAClE,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,CAAC,iBAAiB,EAAE,KAAK,IAAI,CAAC;IACpE,cAAc,CAAC,EAAE,CAAC,OAAO,CAAC,EAAE;QAAE,cAAc,CAAC,EAAE,OAAO,CAAC;QAAC,eAAe,CAAC,EAAE,OAAO,CAAA;KAAE,KAAK,IAAI,CAAC;CAC9F;;;;;;;;;EAmDA"}
+{"version":3,"file":"common.d.ts","sourceRoot":"","sources":["../../../src/flashbar/common.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAG7C,eAAO,MAAM,aAAa,aAAa,CAAC;AAGxC,wBAAgB,WAAW,CAAC,EAC1B,WAAW,EACX,KAAK,EACL,YAAY,EACZ,cAAc,EACd,cAAc,EACd,GAAG,SAAS,EACb,EAAE,aAAa,GAAG;IACjB,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,CAAC,iBAAiB,EAAE,KAAK,IAAI,CAAC;IAClE,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,CAAC,iBAAiB,EAAE,KAAK,IAAI,CAAC;IACpE,cAAc,CAAC,EAAE,CAAC,OAAO,CAAC,EAAE;QAAE,cAAc,CAAC,EAAE,OAAO,CAAC;QAAC,eAAe,CAAC,EAAE,OAAO,CAAA;KAAE,KAAK,IAAI,CAAC;CAC9F;;;;;;;;;EAmDA"}

package/flashbar/common.js.map

@@ -1 +1 @@
-{"version":3,"file":"common.js","sourceRoot":"","sources":["../../../src/flashbar/common.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,gBAAgB,MAAM,sCAAsC,CAAC;AACpE,OAAO,EAAE,YAAY,EAAE,MAAM,kCAAkC,CAAC;AAChE,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC7D,OAAO,EAAE,uBAAuB,EAAE,MAAM,qCAAqC,CAAC;AAC9E,OAAO,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,mCAAmC,CAAC;AACvF,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAE1D,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAEzC,MAAM,CAAC,IAAM,aAAa,GAAG,UAAU,CAAC;AAExC,4DAA4D;AAC5D,MAAM,UAAU,WAAW,CAAC,EAW3B;IAVC,IAAA,WAAW,iBAAA,EACX,KAAK,WAAA,EACL,YAAY,kBAAA,EACZ,cAAc,oBAAA,EACd,cAAc,oBAAA,EACX,SAAS,cANc,4EAO3B,CADa;IAMJ,IAAA,iBAAiB,GAAK,gBAAgB,CAAC,aAAa,CAAC,kBAApC,CAAqC;IAC9D,IAAM,cAAc,GAAG,OAAO,CAAC,cAAM,OAAA,KAAK,CAAC,KAAK,CAAC,UAAA,IAAI,IAAI,OAAA,IAAI,IAAI,IAAI,EAAZ,CAAY,CAAC,EAAjC,CAAiC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IACjF,IAAM,SAAS,GAAG,YAAY,CAAC,SAAS,CAAC,CAAC;IAC1C,IAAM,GAAG,GAAG,MAAM,CAAwB,IAAI,CAAC,CAAC;IAC1C,IAAA,KAA8B,uBAAuB,CAAC,CAAC,IAAI,CAAC,CAAC,EAA5D,UAAU,QAAA,EAAE,aAAa,QAAmC,CAAC;IACpE,IAAM,SAAS,GAAG,YAAY,CAAC,GAAG,EAAE,aAAa,EAAE,iBAAiB,CAAC,CAAC;IACtE,IAAM,eAAe,GAAG,gBAAgB,CAAC,aAAoB,CAAC,CAAC;IAC/D,IAAM,eAAe,GAAG,gBAAgB,EAAE,CAAC;IACrC,IAAA,KAAoC,QAAQ,CAAiD,KAAK,CAAC,EAAlG,aAAa,QAAA,EAAE,gBAAgB,QAAmE,CAAC;IACpG,IAAA,KAAgC,QAAQ,CAAgB,IAAI,CAAC,EAA5D,WAAW,QAAA,EAAE,cAAc,QAAiC,CAAC;IAEpE,8FAA8F;IAC9F,sFAAsF;IACtF,IAAI,KAAK,EAAE;QACT,IAAM,QAAQ,GAAG,KAAK,CAAC,MAAM,CAAC,UAAC,EAAM;gBAAJ,EAAE,QAAA;YAAO,OAAA,EAAE,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,UAAA,IAAI,IAAI,OAAA,IAAI,CAAC,EAAE,KAAK,EAAE,EAAd,CAAc,CAAC;QAAjD,CAAiD,CAAC,CAAC;QAC7F,IAAM,YAAY,GAAG,aAAa,CAAC,MAAM,CAAC,UAAC,EAAM;gBAAJ,EAAE,QAAA;YAAO,OAAA,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,UAAA,IAAI,IAAI,OAAA,IAAI,CAAC,EAAE,KAAK,EAAE,EAAd,CAAc,CAAC;QAAzC,CAAyC,CAAC,CAAC;QACjG,IAAI,QAAQ,CAAC,MAAM,GAAG,CAAC,IAAI,YAAY,CAAC,MAAM,GAAG,CAAC,EAAE;YAClD,gBAAgB,CAAC,KAAK,CAAC,CAAC;YACxB,IAAI,YAAY,EAAE;gBAChB,YAAY,CAAC,QAAQ,CAAC,CAAC;aACxB;YACD,IAAI,cAAc,EAAE;gBAClB,cAAc,CAAC,YAAY,CAAC,CAAC;aAC9B;YACD,IAAM,aAAa,GAAG,QAAQ,CAAC,MAAM,CAAC,UAAC,EAAY;oBAAV,QAAQ,cAAA;gBAAO,OAAA,QAAQ,KAAK,OAAO;YAApB,CAAoB,CAAC,CAAC;YAC9E,IAAI,aAAa,CAAC,MAAM,GAAG,CAAC,EAAE;gBAC5B,cAAc,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,EAAG,CAAC,CAAC;aACtC;YACD,IAAI,cAAc,EAAE;gBAClB,cAAc,CAAC,EAAE,cAAc,gBAAA,EAAE,eAAe,iBAAA,EAAE,CAAC,CAAC;aACrD;SACF;KACF;IAED,SAAS,CAAC;QACR,IAAI,WAAW,EAAE;YACf,cAAc,CAAC,GAAG,CAAC,OAAO,EAAE,WAAW,CAAC,CAAC;SAC1C;IACH,CAAC,EAAE,CAAC,WAAW,EAAE,GAAG,CAAC,CAAC,CAAC;IAEvB,OAAO;QACL,cAAc,gBAAA;QACd,SAAS,EAAE,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,SAAS;QACjC,SAAS,WAAA;QACT,UAAU,YAAA;QACV,eAAe,iBAAA;QACf,eAAe,iBAAA;QACf,SAAS,WAAA;QACT,GAAG,KAAA;KACJ,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport useBaseComponent from '../internal/hooks/use-base-component';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\nimport { useEffect, useMemo, useRef, useState } from 'react';\nimport { useContainerBreakpoints } from '../internal/hooks/container-queries';\nimport { useReducedMotion, useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport { getBaseProps } from '../internal/base-component';\nimport { CollapsibleFlashbarProps, FlashbarProps } from './interfaces';\nimport { focusFlashById } from './flash';\n\nexport const componentName = 'Flashbar';\n\n// Common logic for collapsible and non-collapsible Flashbar\nexport function useFlashbar({\n  i18nStrings,\n  items,\n  onItemsAdded,\n  onItemsChanged,\n  onItemsRemoved,\n  ...restProps\n}: CollapsibleFlashbarProps & {\n  onItemsAdded?: (items: FlashbarProps.MessageDefinition[]) => void;\n  onItemsRemoved?: (items: FlashbarProps.MessageDefinition[]) => void;\n  onItemsChanged?: (options?: { allItemsHaveId?: boolean; isReducedMotion?: boolean }) => void;\n}) {\n  const { __internalRootRef } = useBaseComponent(componentName);\n  const allItemsHaveId = useMemo(() => items.every(item => 'id' in item), [items]);\n  const baseProps = getBaseProps(restProps);\n  const ref = useRef<HTMLDivElement | null>(null);\n  const [breakpoint, breakpointRef] = useContainerBreakpoints(['xs']);\n  const mergedRef = useMergeRefs(ref, breakpointRef, __internalRootRef);\n  const isReducedMotion = useReducedMotion(breakpointRef as any);\n  const isVisualRefresh = useVisualRefresh();\n  const [previousItems, setPreviousItems] = useState<ReadonlyArray<FlashbarProps.MessageDefinition>>(items);\n  const [nextFocusId, setNextFocusId] = useState<string | null>(null);\n\n  // Track new or removed item IDs in state to only trigger focus changes for newly added items.\n  // https://reactjs.org/docs/hooks-faq.html#how-do-i-implement-getderivedstatefromprops\n  if (items) {\n    const newItems = items.filter(({ id }) => id && !previousItems.some(item => item.id === id));\n    const removedItems = previousItems.filter(({ id }) => id && !items.some(item => item.id === id));\n    if (newItems.length > 0 || removedItems.length > 0) {\n      setPreviousItems(items);\n      if (onItemsAdded) {\n        onItemsAdded(newItems);\n      }\n      if (onItemsRemoved) {\n        onItemsRemoved(removedItems);\n      }\n      const newFocusItems = newItems.filter(({ ariaRole }) => ariaRole === 'alert');\n      if (newFocusItems.length > 0) {\n        setNextFocusId(newFocusItems[0].id!);\n      }\n      if (onItemsChanged) {\n        onItemsChanged({ allItemsHaveId, isReducedMotion });\n      }\n    }\n  }\n\n  useEffect(() => {\n    if (nextFocusId) {\n      focusFlashById(ref.current, nextFocusId);\n    }\n  }, [nextFocusId, ref]);\n\n  return {\n    allItemsHaveId,\n    ariaLabel: i18nStrings?.ariaLabel,\n    baseProps,\n    breakpoint,\n    isReducedMotion,\n    isVisualRefresh,\n    mergedRef,\n    ref,\n  };\n}\n"]}
+{"version":3,"file":"common.js","sourceRoot":"","sources":["../../../src/flashbar/common.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 useBaseComponent from '../internal/hooks/use-base-component';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\nimport { useEffect, useMemo, useRef, useState } from 'react';\nimport { useContainerBreakpoints } from '../internal/hooks/container-queries';\nimport { useReducedMotion, useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport { getBaseProps } from '../internal/base-component';\nimport { FlashbarProps } from './interfaces';\nimport { focusFlashById } from './flash';\n\nexport const componentName = 'Flashbar';\n\n// Common logic for collapsible and non-collapsible Flashbar\nexport function useFlashbar({\n  i18nStrings,\n  items,\n  onItemsAdded,\n  onItemsChanged,\n  onItemsRemoved,\n  ...restProps\n}: FlashbarProps & {\n  onItemsAdded?: (items: FlashbarProps.MessageDefinition[]) => void;\n  onItemsRemoved?: (items: FlashbarProps.MessageDefinition[]) => void;\n  onItemsChanged?: (options?: { allItemsHaveId?: boolean; isReducedMotion?: boolean }) => void;\n}) {\n  const { __internalRootRef } = useBaseComponent(componentName);\n  const allItemsHaveId = useMemo(() => items.every(item => 'id' in item), [items]);\n  const baseProps = getBaseProps(restProps);\n  const ref = useRef<HTMLDivElement | null>(null);\n  const [breakpoint, breakpointRef] = useContainerBreakpoints(['xs']);\n  const mergedRef = useMergeRefs(ref, breakpointRef, __internalRootRef);\n  const isReducedMotion = useReducedMotion(breakpointRef as any);\n  const isVisualRefresh = useVisualRefresh();\n  const [previousItems, setPreviousItems] = useState<ReadonlyArray<FlashbarProps.MessageDefinition>>(items);\n  const [nextFocusId, setNextFocusId] = useState<string | null>(null);\n\n  // Track new or removed item IDs in state to only trigger focus changes for newly added items.\n  // https://reactjs.org/docs/hooks-faq.html#how-do-i-implement-getderivedstatefromprops\n  if (items) {\n    const newItems = items.filter(({ id }) => id && !previousItems.some(item => item.id === id));\n    const removedItems = previousItems.filter(({ id }) => id && !items.some(item => item.id === id));\n    if (newItems.length > 0 || removedItems.length > 0) {\n      setPreviousItems(items);\n      if (onItemsAdded) {\n        onItemsAdded(newItems);\n      }\n      if (onItemsRemoved) {\n        onItemsRemoved(removedItems);\n      }\n      const newFocusItems = newItems.filter(({ ariaRole }) => ariaRole === 'alert');\n      if (newFocusItems.length > 0) {\n        setNextFocusId(newFocusItems[0].id!);\n      }\n      if (onItemsChanged) {\n        onItemsChanged({ allItemsHaveId, isReducedMotion });\n      }\n    }\n  }\n\n  useEffect(() => {\n    if (nextFocusId) {\n      focusFlashById(ref.current, nextFocusId);\n    }\n  }, [nextFocusId, ref]);\n\n  return {\n    allItemsHaveId,\n    ariaLabel: i18nStrings?.ariaLabel,\n    baseProps,\n    breakpoint,\n    isReducedMotion,\n    isVisualRefresh,\n    mergedRef,\n    ref,\n  };\n}\n"]}

package/flashbar/index.d.ts

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

package/flashbar/index.d.ts.map

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

package/flashbar/index.js

@@ -12,15 +12,12 @@ export default function Flashbar(props) {
             sendRenderMetric(props.items);
         }
     }, [props.items]);
-    if (isStackedFlashbar(props)) {
+    if (props.stackItems) {
         return React.createElement(CollapsibleFlashbar, __assign({}, props));
     }
     else {
         return React.createElement(NonCollapsibleFlashbar, __assign({}, props));
     }
 }
-function isStackedFlashbar(props) {
-    return 'stackItems' in props && props.stackItems;
-}
 applyDisplayName(Flashbar, 'Flashbar');
 //# sourceMappingURL=index.js.map

package/flashbar/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/flashbar/index.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACzC,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AAExE,OAAO,mBAAmB,MAAM,wBAAwB,CAAC;AACzD,OAAO,sBAAsB,MAAM,4BAA4B,CAAC;AAEhE,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAIxD,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,KAA+C;IAC9E,SAAS,CAAC;QACR,IAAI,KAAK,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE;YAC1B,gBAAgB,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;SAC/B;IACH,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;IAElB,IAAI,iBAAiB,CAAC,KAAK,CAAC,EAAE;QAC5B,OAAO,oBAAC,mBAAmB,eAAK,KAAK,EAAI,CAAC;KAC3C;SAAM;QACL,OAAO,oBAAC,sBAAsB,eAAK,KAAK,EAAI,CAAC;KAC9C;AACH,CAAC;AAED,SAAS,iBAAiB,CAAC,KAAU;IACnC,OAAO,YAAY,IAAI,KAAK,IAAI,KAAK,CAAC,UAAU,CAAC;AACnD,CAAC;AAED,gBAAgB,CAAC,QAAQ,EAAE,UAAU,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useEffect } from 'react';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport { FlashbarProps, CollapsibleFlashbarProps } from './interfaces';\nimport CollapsibleFlashbar from './collapsible-flashbar';\nimport NonCollapsibleFlashbar from './non-collapsible-flashbar';\n\nimport { sendRenderMetric } from './internal/analytics';\n\nexport { FlashbarProps };\n\nexport default function Flashbar(props: FlashbarProps | CollapsibleFlashbarProps) {\n  useEffect(() => {\n    if (props.items.length > 0) {\n      sendRenderMetric(props.items);\n    }\n  }, [props.items]);\n\n  if (isStackedFlashbar(props)) {\n    return <CollapsibleFlashbar {...props} />;\n  } else {\n    return <NonCollapsibleFlashbar {...props} />;\n  }\n}\n\nfunction isStackedFlashbar(props: any): props is CollapsibleFlashbarProps {\n  return 'stackItems' in props && props.stackItems;\n}\n\napplyDisplayName(Flashbar, 'Flashbar');\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/flashbar/index.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACzC,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AAExE,OAAO,mBAAmB,MAAM,wBAAwB,CAAC;AACzD,OAAO,sBAAsB,MAAM,4BAA4B,CAAC;AAEhE,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAIxD,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,KAAoB;IACnD,SAAS,CAAC;QACR,IAAI,KAAK,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE;YAC1B,gBAAgB,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;SAC/B;IACH,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;IAElB,IAAI,KAAK,CAAC,UAAU,EAAE;QACpB,OAAO,oBAAC,mBAAmB,eAAK,KAAK,EAAI,CAAC;KAC3C;SAAM;QACL,OAAO,oBAAC,sBAAsB,eAAK,KAAK,EAAI,CAAC;KAC9C;AACH,CAAC;AAED,gBAAgB,CAAC,QAAQ,EAAE,UAAU,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useEffect } from 'react';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport { FlashbarProps } from './interfaces';\nimport CollapsibleFlashbar from './collapsible-flashbar';\nimport NonCollapsibleFlashbar from './non-collapsible-flashbar';\n\nimport { sendRenderMetric } from './internal/analytics';\n\nexport { FlashbarProps };\n\nexport default function Flashbar(props: FlashbarProps) {\n  useEffect(() => {\n    if (props.items.length > 0) {\n      sendRenderMetric(props.items);\n    }\n  }, [props.items]);\n\n  if (props.stackItems) {\n    return <CollapsibleFlashbar {...props} />;\n  } else {\n    return <NonCollapsibleFlashbar {...props} />;\n  }\n}\n\napplyDisplayName(Flashbar, 'Flashbar');\n"]}