npm - @cloudscape-design/components-themeable - Versions diffs - 3.0.1077 → 3.0.1079 - Mend

@cloudscape-design/components-themeable 3.0.1077 → 3.0.1079

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (55) hide show

package/lib/internal/manifest.json CHANGED Viewed

@@ -1,3 +1,3 @@
 {
-  "commit": "354493e5bb112acb3a72bf53b404aafacb21bd2d"
+  "commit": "ab3ab4767df68aeda50ba69ec6990ad2524ba93e"
 }

package/lib/internal/scss/internal/generated/custom-css-properties/index.scss CHANGED Viewed

@@ -1,6 +1,6 @@
     // Build environment
-    $awsui-commit-hash: "354493e5";
+    $awsui-commit-hash: "ab3ab476";
     // Manually managed CSS-variables
     $maxContentWidth: --awsui-max-content-width-mdigke;
 $minContentWidth: --awsui-min-content-width-mdigke;

package/lib/internal/scss/split-panel/styles.scss CHANGED Viewed

@@ -21,11 +21,8 @@ $app-layout-drawer-width: calc(#{awsui.$space-layout-toggle-diameter} + 2 * #{aw
   background-color: awsui.$color-background-layout-panel-content;
   // should be above tools and navigation panels to avoid their shadows
   z-index: 840;
-  &-closed {
-    cursor: pointer;
-    &:not(.refresh) {
-      min-inline-size: constants.$sidebar-size-closed;
-    }
+  &-closed:not(.refresh) {
+    min-inline-size: constants.$sidebar-size-closed;
   }
 }
@@ -73,7 +70,8 @@ $app-layout-drawer-width: calc(#{awsui.$space-layout-toggle-diameter} + 2 * #{aw
   &.drawer-closed {
     overflow: hidden;
   }
-  &.drawer-closed:hover {
+  &.drawer-closed.drawer-clickable:hover {
+    cursor: pointer;
     background: awsui.$color-background-layout-panel-hover;
   }
   & > .drawer-content-bottom > [aria-hidden='true'] {
@@ -229,11 +227,8 @@ $app-layout-drawer-width: calc(#{awsui.$space-layout-toggle-diameter} + 2 * #{aw
 }
 .header {
-  display: flex;
-  flex: auto;
-  flex-direction: row;
-  align-items: flex-start;
-  justify-content: space-between;
+  $vertical-margin: calc(#{awsui.$space-scaled-xxs} + 1px);
   inline-size: 100%;
   margin-block: awsui.$size-vertical-panel-icon-offset;
   margin-inline: 0;
@@ -241,17 +236,87 @@ $app-layout-drawer-width: calc(#{awsui.$space-layout-toggle-diameter} + 2 * #{aw
     margin-block: constants.$toolbar-vertical-panel-icon-offset;
   }
+  &-main-row,
+  &-main-content {
+    display: flex;
+  }
+  // Area containing the before-header slot, the header text, the info link, the actions slot
+  // and the built-in panel buttons.
+  &-main-row {
+    // Make sure that the panel buttons are always anchored to the block start,
+    // even if the main content (before-header slot, header text, actions) wraps into multiple lines.
+    align-items: flex-start;
+  }
+  // Area containing the before-header slot, the header text, the info link and the actions slot
+  // --not the description nor the built-in panel buttons.
+  &-main-content {
+    flex: auto;
+    flex-direction: row;
+    column-gap: awsui.$space-scaled-xs;
+    row-gap: awsui.$space-scaled-xxs;
+    justify-content: space-between;
+    // Keep the actions slot always at the block start,
+    // even if the heading and the info slot wrap into multiple lines.
+    align-items: flex-start;
+  }
+  // Header tag and info link
+  &-tag-and-info {
+    flex-grow: 1;
+    margin-block-start: $vertical-margin;
+    // The line height of the header text might not be respected in non-high pixel density screens
+    // unless it is set to a smaller value in its parent container.
+    line-height: awsui.$line-height-body-s;
+    &.with-description {
+      margin-block-end: awsui.$space-scaled-xxxs;
+    }
+  }
+  &-tag.with-info,
+  &-text {
+    display: inline;
+  }
+  // The h2 tag, which contains the elements in the `headerBefore` slot, if defined, and the header text
+  &-tag {
+    margin-block: 0;
+  }
+  &-before-slot,
   &-text {
     @include styles.font-panel-header;
-    padding-block: 0;
-    padding-inline: 0;
+  }
+  &-before-slot {
+    margin-block-start: calc(-1 * #{$vertical-margin});
+    .header-tag.with-info > &,
+    &.with-header-text {
+      display: inline-block;
+    }
+  }
+  &-before-slot.with-header-text,
+  &-tag.with-info {
+    margin-inline-end: awsui.$space-scaled-xs;
+  }
+  &-actions-slot {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    min-block-size: calc(#{awsui.$font-panel-header-line-height} + 2 * #{$vertical-margin});
+  }
+  &-description {
+    color: awsui.$color-text-heading-secondary;
+    @include styles.font-body-m;
     margin-block: 0;
-    margin-inline: 0;
-    margin-block-start: calc(#{awsui.$space-scaled-xxs} + 1px);
   }
 }
-.header-actions {
+.header-buttons {
   display: flex;
   flex-direction: row;
   justify-content: space-between;

package/lib/internal/scss/split-panel/test-classes/styles.scss CHANGED Viewed

@@ -4,6 +4,10 @@
 */
 .root,
+.header-actions,
+.header-before,
+.header-description,
+.header-info,
 .header-text,
 .open-button,
 .close-button,

package/lib/internal/template/app-layout/visual-refresh-toolbar/skeleton/multi-layout.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"multi-layout.d.ts","sourceRoot":"","sources":["../../../../../src/app-layout/visual-refresh-toolbar/skeleton/multi-layout.ts"],"names":[],"mappings":"~~AAOA~~,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAC9D,OAAO,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAE1C,MAAM,MAAM,iBAAiB,GAAG,SAAS,GAAG,WAAW,GAAG,WAAW,GAAG,KAAK,CAAC;AAE9E,wBAAgB,iBAAiB,CAC/B,sBAAsB,EAAE,iBAAiB,EACzC,SAAS,EAAE,OAAO,EAClB,KAAK,EAAE,WAAW,EAClB,UAAU,EAAE,UAAU,GACrB;IAAE,UAAU,EAAE,OAAO,CAAC;IAAC,YAAY,EAAE,YAAY,GAAG,IAAI,CAAA;CAAE,~~CAwC5D~~"}
1	+ {"version":3,"file":"multi-layout.d.ts","sourceRoot":"","sources":["../../../../../src/app-layout/visual-refresh-toolbar/skeleton/multi-layout.ts"],"names":[],"mappings":"AAQA,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAC9D,OAAO,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAE1C,MAAM,MAAM,iBAAiB,GAAG,SAAS,GAAG,WAAW,GAAG,WAAW,GAAG,KAAK,CAAC;AAE9E,wBAAgB,iBAAiB,CAC/B,sBAAsB,EAAE,iBAAiB,EACzC,SAAS,EAAE,OAAO,EAClB,KAAK,EAAE,WAAW,EAClB,UAAU,EAAE,UAAU,GACrB;IAAE,UAAU,EAAE,OAAO,CAAC;IAAC,YAAY,EAAE,YAAY,GAAG,IAAI,CAAA;CAAE,CA8C5D"}

package/lib/internal/template/app-layout/visual-refresh-toolbar/skeleton/multi-layout.js CHANGED Viewed

@@ -1,6 +1,7 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import { useLayoutEffect, useState } from 'react';
+import { useEffect, useLayoutEffect, useState } from 'react';
+import { metrics } from '../../../internal/metrics';
 import { awsuiPluginsInternal } from '../../../internal/plugins/api';
 import { useAppLayoutFlagEnabled } from '../../utils/feature-flags';
 export function useMultiAppLayout(forceDeduplicationType, isEnabled, props, mergeProps) {
@@ -25,6 +26,11 @@ export function useMultiAppLayout(forceDeduplicationType, isEnabled, props, merg
             registration.update(props);
         }
     });
+    useEffect(() => {
+        if (registration) {
+            reportMultiLayoutMetric(registration);
+        }
+    }, [registration]);
     if (!isToolbar) {
         return {
             registered: true,
@@ -38,4 +44,16 @@ export function useMultiAppLayout(forceDeduplicationType, isEnabled, props, merg
         toolbarProps: (registration === null || registration === void 0 ? void 0 : registration.type) === 'primary' ? mergeProps(props, registration.discoveredProps) : null,
     };
 }
+function reportMultiLayoutMetric(registration) {
+    if (registration.type === 'primary' && registration.discoveredProps.length > 0) {
+        metrics.sendOpsMetricObject('awsui-multi-layout-usage-primary', {
+            // temporary workaround for missing typings
+            // https://github.com/cloudscape-design/component-toolkit/pull/153
+            instancesCount: registration.discoveredProps.length,
+        });
+    }
+    else if (registration.type === 'suspended') {
+        metrics.sendOpsMetricObject('awsui-multi-layout-usage-suspended', {});
+    }
+}
 //# sourceMappingURL=multi-layout.js.map

package/lib/internal/template/app-layout/visual-refresh-toolbar/skeleton/multi-layout.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"multi-layout.js","sourceRoot":"","sources":["../../../../../src/app-layout/visual-refresh-toolbar/skeleton/multi-layout.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,EAAE,eAAe,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;~~AAElD~~,OAAO,EAAE,oBAAoB,EAAE,MAAM,+BAA+B,CAAC;AAErE,OAAO,EAAE,uBAAuB,EAAE,MAAM,2BAA2B,CAAC;AAMpE,MAAM,UAAU,iBAAiB,CAC/B,sBAAyC,EACzC,SAAkB,EAClB,KAAkB,EAClB,UAAsB;IAEtB,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAwC,IAAI,CAAC,CAAC;IAC9F,MAAM,SAAS,GAAG,uBAAuB,EAAE,CAAC;IAE5C,eAAe,CAAC,GAAG,EAAE;QACnB,IAAI,CAAC,SAAS,IAAI,sBAAsB,KAAK,WAAW,IAAI,CAAC,SAAS,EAAE;YACtE,OAAO;SACR;QACD,IAAI,sBAAsB,KAAK,KAAK,EAAE;YACpC,eAAe,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,eAAe,EAAE,EAAE,EAAE,CAAC,CAAC;YAC1D,OAAO;SACR;QACD,MAAM,UAAU,GAAG,oBAAoB,CAAC,eAAe,CAAC,QAAQ,CAAC,sBAAsB,EAAE,KAAK,CAAC,EAAE,CAC/F,eAAe,CAAC,KAAuC,CAAC,CACzD,CAAC;QACF,OAAO,GAAG,EAAE;YACV,UAAU,EAAE,CAAC;YACb,eAAe,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,CAAC,CAAC;QACzC,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,sBAAsB,EAAE,SAAS,EAAE,SAAS,CAAC,CAAC,CAAC;IAEnD,eAAe,CAAC,GAAG,EAAE;QACnB,IAAI,CAAA,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,IAAI,MAAK,WAAW,EAAE;YACtC,YAAY,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;SAC5B;IACH,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,SAAS,EAAE;QACd,OAAO;YACL,UAAU,EAAE,IAAI;YAChB,2FAA2F;YAC3F,+DAA+D;YAC/D,YAAY,EAAE,UAAU,CAAC,KAAK,EAAE,EAAE,CAAC;SACpC,CAAC;KACH;IAED,OAAO;QACL,UAAU,EAAE,CAAC,CAAC,CAAA,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,IAAI,CAAA;QAChC,YAAY,EAAE,CAAA,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,IAAI,MAAK,SAAS,CAAC,CAAC,CAAC,UAAU,CAAC,KAAK,EAAE,YAAY,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,IAAI;KACxG,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { useLayoutEffect, useState } from 'react';\n\nimport { awsuiPluginsInternal } from '../../../internal/plugins/api';\nimport { RegistrationState } from '../../../internal/plugins/controllers/app-layout-widget';\nimport { useAppLayoutFlagEnabled } from '../../utils/feature-flags';\nimport { MergeProps, SharedProps } from '../state/interfaces';\nimport { ToolbarProps } from '../toolbar';\n\nexport type DeduplicationType = 'primary' \| 'secondary' \| 'suspended' \| 'off';\n\nexport function useMultiAppLayout(\n forceDeduplicationType: DeduplicationType,\n isEnabled: boolean,\n props: SharedProps,\n mergeProps: MergeProps\n): { registered: boolean; toolbarProps: ToolbarProps \| null } {\n const [registration, setRegistration] = useState<RegistrationState<SharedProps> \| null>(null);\n const isToolbar = useAppLayoutFlagEnabled();\n\n useLayoutEffect(() => {\n if (!isEnabled \|\| forceDeduplicationType === 'suspended' \|\| !isToolbar) {\n return;\n }\n if (forceDeduplicationType === 'off') {\n setRegistration({ type: 'primary', discoveredProps: [] });\n return;\n }\n const unregister = awsuiPluginsInternal.appLayoutWidget.register(forceDeduplicationType, props =>\n setRegistration(props as RegistrationState<SharedProps>)\n );\n return () => {\n unregister();\n setRegistration({ type: 'suspended' });\n };\n }, [forceDeduplicationType, isEnabled, isToolbar]);\n\n useLayoutEffect(() => {\n if (registration?.type === 'secondary') {\n registration.update(props);\n }\n });\n\n if (!isToolbar) {\n return {\n registered: true,\n // mergeProps is needed here because the toolbar's behavior depends on reconciliation logic\n // in this function. For example, navigation trigger visibility\n toolbarProps: mergeProps(props, []),\n };\n }\n\n return {\n registered: !!registration?.type,\n toolbarProps: registration?.type === 'primary' ? mergeProps(props, registration.discoveredProps) : null,\n };\n}\n"]}
1	+ {"version":3,"file":"multi-layout.js","sourceRoot":"","sources":["../../../../../src/app-layout/visual-refresh-toolbar/skeleton/multi-layout.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,EAAE,SAAS,EAAE,eAAe,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE7D,OAAO,EAAE,OAAO,EAAE,MAAM,2BAA2B,CAAC;AACpD,OAAO,EAAE,oBAAoB,EAAE,MAAM,+BAA+B,CAAC;AAErE,OAAO,EAAE,uBAAuB,EAAE,MAAM,2BAA2B,CAAC;AAMpE,MAAM,UAAU,iBAAiB,CAC/B,sBAAyC,EACzC,SAAkB,EAClB,KAAkB,EAClB,UAAsB;IAEtB,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAwC,IAAI,CAAC,CAAC;IAC9F,MAAM,SAAS,GAAG,uBAAuB,EAAE,CAAC;IAE5C,eAAe,CAAC,GAAG,EAAE;QACnB,IAAI,CAAC,SAAS,IAAI,sBAAsB,KAAK,WAAW,IAAI,CAAC,SAAS,EAAE;YACtE,OAAO;SACR;QACD,IAAI,sBAAsB,KAAK,KAAK,EAAE;YACpC,eAAe,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,eAAe,EAAE,EAAE,EAAE,CAAC,CAAC;YAC1D,OAAO;SACR;QACD,MAAM,UAAU,GAAG,oBAAoB,CAAC,eAAe,CAAC,QAAQ,CAAC,sBAAsB,EAAE,KAAK,CAAC,EAAE,CAC/F,eAAe,CAAC,KAAuC,CAAC,CACzD,CAAC;QACF,OAAO,GAAG,EAAE;YACV,UAAU,EAAE,CAAC;YACb,eAAe,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,CAAC,CAAC;QACzC,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,sBAAsB,EAAE,SAAS,EAAE,SAAS,CAAC,CAAC,CAAC;IAEnD,eAAe,CAAC,GAAG,EAAE;QACnB,IAAI,CAAA,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,IAAI,MAAK,WAAW,EAAE;YACtC,YAAY,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;SAC5B;IACH,CAAC,CAAC,CAAC;IAEH,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,YAAY,EAAE;YAChB,uBAAuB,CAAC,YAAY,CAAC,CAAC;SACvC;IACH,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC;IAEnB,IAAI,CAAC,SAAS,EAAE;QACd,OAAO;YACL,UAAU,EAAE,IAAI;YAChB,2FAA2F;YAC3F,+DAA+D;YAC/D,YAAY,EAAE,UAAU,CAAC,KAAK,EAAE,EAAE,CAAC;SACpC,CAAC;KACH;IAED,OAAO;QACL,UAAU,EAAE,CAAC,CAAC,CAAA,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,IAAI,CAAA;QAChC,YAAY,EAAE,CAAA,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,IAAI,MAAK,SAAS,CAAC,CAAC,CAAC,UAAU,CAAC,KAAK,EAAE,YAAY,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,IAAI;KACxG,CAAC;AACJ,CAAC;AAED,SAAS,uBAAuB,CAAC,YAA4C;IAC3E,IAAI,YAAY,CAAC,IAAI,KAAK,SAAS,IAAI,YAAY,CAAC,eAAe,CAAC,MAAM,GAAG,CAAC,EAAE;QAC9E,OAAO,CAAC,mBAAmB,CAAC,kCAAkC,EAAE;YAC9D,2CAA2C;YAC3C,kEAAkE;YAClE,cAAc,EAAE,YAAY,CAAC,eAAe,CAAC,MAAa;SAC3D,CAAC,CAAC;KACJ;SAAM,IAAI,YAAY,CAAC,IAAI,KAAK,WAAW,EAAE;QAC5C,OAAO,CAAC,mBAAmB,CAAC,oCAAoC,EAAE,EAAE,CAAC,CAAC;KACvE;AACH,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { useEffect, useLayoutEffect, useState } from 'react';\n\nimport { metrics } from '../../../internal/metrics';\nimport { awsuiPluginsInternal } from '../../../internal/plugins/api';\nimport { RegistrationState } from '../../../internal/plugins/controllers/app-layout-widget';\nimport { useAppLayoutFlagEnabled } from '../../utils/feature-flags';\nimport { MergeProps, SharedProps } from '../state/interfaces';\nimport { ToolbarProps } from '../toolbar';\n\nexport type DeduplicationType = 'primary' \| 'secondary' \| 'suspended' \| 'off';\n\nexport function useMultiAppLayout(\n forceDeduplicationType: DeduplicationType,\n isEnabled: boolean,\n props: SharedProps,\n mergeProps: MergeProps\n): { registered: boolean; toolbarProps: ToolbarProps \| null } {\n const [registration, setRegistration] = useState<RegistrationState<SharedProps> \| null>(null);\n const isToolbar = useAppLayoutFlagEnabled();\n\n useLayoutEffect(() => {\n if (!isEnabled \|\| forceDeduplicationType === 'suspended' \|\| !isToolbar) {\n return;\n }\n if (forceDeduplicationType === 'off') {\n setRegistration({ type: 'primary', discoveredProps: [] });\n return;\n }\n const unregister = awsuiPluginsInternal.appLayoutWidget.register(forceDeduplicationType, props =>\n setRegistration(props as RegistrationState<SharedProps>)\n );\n return () => {\n unregister();\n setRegistration({ type: 'suspended' });\n };\n }, [forceDeduplicationType, isEnabled, isToolbar]);\n\n useLayoutEffect(() => {\n if (registration?.type === 'secondary') {\n registration.update(props);\n }\n });\n\n useEffect(() => {\n if (registration) {\n reportMultiLayoutMetric(registration);\n }\n }, [registration]);\n\n if (!isToolbar) {\n return {\n registered: true,\n // mergeProps is needed here because the toolbar's behavior depends on reconciliation logic\n // in this function. For example, navigation trigger visibility\n toolbarProps: mergeProps(props, []),\n };\n }\n\n return {\n registered: !!registration?.type,\n toolbarProps: registration?.type === 'primary' ? mergeProps(props, registration.discoveredProps) : null,\n };\n}\n\nfunction reportMultiLayoutMetric(registration: RegistrationState<SharedProps>) {\n if (registration.type === 'primary' && registration.discoveredProps.length > 0) {\n metrics.sendOpsMetricObject('awsui-multi-layout-usage-primary', {\n // temporary workaround for missing typings\n // https://github.com/cloudscape-design/component-toolkit/pull/153\n instancesCount: registration.discoveredProps.length as any,\n });\n } else if (registration.type === 'suspended') {\n metrics.sendOpsMetricObject('awsui-multi-layout-usage-suspended', {});\n }\n}\n"]}

package/lib/internal/template/flashbar/collapsible-flashbar.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"collapsible-flashbar.d.ts","sourceRoot":"","sources":["../../../src/flashbar/collapsible-flashbar.tsx"],"names":[],"mappings":";~~AA2BA~~,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;~~AAY7C~~,MAAM,CAAC,OAAO,UAAU,mBAAmB,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,SAAS,EAAE,EAAE,aAAa,~~eAoVxF~~"}
1	+ {"version":3,"file":"collapsible-flashbar.d.ts","sourceRoot":"","sources":["../../../src/flashbar/collapsible-flashbar.tsx"],"names":[],"mappings":";AA4BA,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAmB7C,MAAM,CAAC,OAAO,UAAU,mBAAmB,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,SAAS,EAAE,EAAE,aAAa,eAqVxF"}

package/lib/internal/template/flashbar/collapsible-flashbar.js CHANGED Viewed

@@ -13,6 +13,7 @@ import { animate, getDOMRects } from '../internal/animate';
 import { Transition } from '../internal/components/transition';
 import { getVisualContextClassname } from '../internal/components/visual-context';
 import customCssProps from '../internal/generated/custom-css-properties';
+import { useDebounceCallback } from '../internal/hooks/use-debounce-callback';
 import { useEffectOnUpdate } from '../internal/hooks/use-effect-on-update';
 import { scrollElementIntoView } from '../internal/utils/scrollable-containers';
 import { throttle } from '../internal/utils/throttle';
@@ -20,7 +21,7 @@ import { getComponentsAnalyticsMetadata, getItemAnalyticsMetadata } from './anal
 import { useFlashbar } from './common';
 import { Flash, focusFlashById } from './flash';
 import { getCollapsibleFlashStyles, getNotificationBarStyles } from './style';
-import { counterTypes, getFlashTypeCount, getItemColor, getVisibleCollapsedItems } from './utils';
+import { counterTypes, FOCUS_DEBOUNCE_DELAY, getFlashTypeCount, getItemColor, getVisibleCollapsedItems, } from './utils';
 import styles from './styles.css.js';
 // 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.
@@ -69,16 +70,17 @@ export default function CollapsibleFlashbar(_a) {
         }
         setIsFlashbarStackExpanded(prev => !prev);
     }
+    const debouncedFocus = useDebounceCallback(focusFlashById, FOCUS_DEBOUNCE_DELAY);
     useLayoutEffect(() => {
         if (isFlashbarStackExpanded && (items === null || items === void 0 ? void 0 : items.length)) {
             const mostRecentItem = items[0];
             if (mostRecentItem.id !== undefined) {
-                focusFlashById(ref.current, mostRecentItem.id);
+                debouncedFocus(ref.current, mostRecentItem.id);
             }
         }
         // Run this after expanding, but not every time the items change.
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [isFlashbarStackExpanded]);
+    }, [debouncedFocus, isFlashbarStackExpanded]);
     // When collapsing, scroll up if necessary to avoid losing track of the focused button
     useEffectOnUpdate(() => {
         if (!isFlashbarStackExpanded && notificationBarRef.current) {

package/lib/internal/template/flashbar/collapsible-flashbar.js.map CHANGED Viewed

	@@ -1 +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 React, { ReactNode, useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react';\nimport { TransitionGroup } from 'react-transition-group';\nimport clsx from 'clsx';\n\nimport { findUpUntil } from '@cloudscape-design/component-toolkit/dom';\nimport { useUniqueId } from '@cloudscape-design/component-toolkit/internal';\nimport { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';\n\nimport { useInternalI18n } from '../i18n/context';\nimport { IconProps } from '../icon/interfaces';\nimport InternalIcon from '../icon/internal';\nimport { animate, getDOMRects } from '../internal/animate';\nimport { Transition } from '../internal/components/transition';\nimport { getVisualContextClassname } from '../internal/components/visual-context';\nimport customCssProps from '../internal/generated/custom-css-properties';\nimport { useEffectOnUpdate } from '../internal/hooks/use-effect-on-update';\nimport { scrollElementIntoView } from '../internal/utils/scrollable-containers';\nimport { throttle } from '../internal/utils/throttle';\nimport {\n GeneratedAnalyticsMetadataFlashbarCollapse,\n GeneratedAnalyticsMetadataFlashbarExpand,\n} from './analytics-metadata/interfaces';\nimport { getComponentsAnalyticsMetadata, getItemAnalyticsMetadata } from './analytics-metadata/utils';\nimport { useFlashbar } from './common';\nimport { Flash, focusFlashById } from './flash';\nimport { FlashbarProps } from './interfaces';\nimport { getCollapsibleFlashStyles, getNotificationBarStyles } from './style';\nimport { counterTypes, getFlashTypeCount, getItemColor, getVisibleCollapsedItems, StackableItem } from './utils';\n\nimport styles from './styles.css.js';\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, style, ...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 collapsedItemRefs = useRef<Record<string, HTMLElement \| null>>({});\n const expandedItemRefs = useRef<Record<string, HTMLElement \| null>>({});\n const [initialAnimationState, setInitialAnimationState] = useState<Record<string, 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 const { baseProps, isReducedMotion, isVisualRefresh, mergedRef, ref, flashRefs, handleFlashDismissed } = 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 if (items.length <= maxNonCollapsibleItems && isFlashbarStackExpanded) {\n setIsFlashbarStackExpanded(false);\n }\n\n const animateFlash = !isReducedMotion;\n\n function toggleCollapseExpand() {\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 // When collapsing, scroll up if necessary to avoid losing track of the focused button\n useEffectOnUpdate(() => {\n if (!isFlashbarStackExpanded && notificationBarRef.current) {\n scrollElementIntoView(notificationBarRef.current);\n }\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 = findUpUntil(flashbar, element => element.getAttribute('role') === 'region') \|\| 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 const i18n = useInternalI18n('flashbar');\n const ariaLabel = i18n('i18nStrings.ariaLabel', i18nStrings?.ariaLabel);\n const notificationBarText = i18n('i18nStrings.notificationBarText', i18nStrings?.notificationBarText);\n const notificationBarAriaLabel = i18n('i18nStrings.notificationBarAriaLabel', i18nStrings?.notificationBarAriaLabel);\n const iconAriaLabels = {\n errorIconAriaLabel: i18n('i18nStrings.errorIconAriaLabel', i18nStrings?.errorIconAriaLabel),\n inProgressIconAriaLabel: i18n('i18nStrings.inProgressIconAriaLabel', i18nStrings?.inProgressIconAriaLabel),\n infoIconAriaLabel: i18n('i18nStrings.infoIconAriaLabel', i18nStrings?.infoIconAriaLabel),\n successIconAriaLabel: i18n('i18nStrings.successIconAriaLabel', i18nStrings?.successIconAriaLabel),\n warningIconAriaLabel: i18n('i18nStrings.warningIconAriaLabel', i18nStrings?.warningIconAriaLabel),\n };\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 animate({\n elements: getElementsToAnimate(),\n oldState: initialAnimationState,\n newElementInitialState: ({ top }) => ({ scale: 0.9, y: -0.2 * top }),\n onTransitionsEnd: () => setTransitioning(false),\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 numberOfColorsInStack = new Set(items.map(getItemColor)).size;\n const maxSlots = Math.max(numberOfColorsInStack, 3);\n const stackDepth = Math.min(maxSlots, 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 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 <ListWrapper withMotion={!isReducedMotion}>\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 ...(index > 0 && !isFlashbarStackExpanded && getCollapsibleFlashStyles(style, item.type)),\n ...((!isFlashbarStackExpanded \|\| transitioning) && {\n [customCssProps.flashbarStackIndex]:\n (item as StackableItem).collapsedIndex ?? (item as StackableItem).expandedIndex ?? index,\n }),\n }}\n key={getItemId(item)}\n {...getAnalyticsMetadataAttribute(getItemAnalyticsMetadata(index + 1, item.type \|\| 'info', item.id))}\n >\n {showInnerContent(item) && (\n <Flash\n className={clsx(\n animateFlash && styles['flash-with-motion'],\n isVisualRefresh && styles['flash-refresh']\n )}\n key={getItemId(item)}\n ref={(el: HTMLDivElement \| null) => {\n // Store the Flash element reference for focus management\n flashRefs.current[getItemId(item)] = el;\n\n if (shouldUseStandardAnimation(item, index) && transitionRootElement) {\n if (typeof transitionRootElement === 'function') {\n transitionRootElement(el);\n } else if (\n transitionRootElement &&\n typeof transitionRootElement === 'object' &&\n 'current' in transitionRootElement\n ) {\n (transitionRootElement as React.MutableRefObject<HTMLDivElement \| null>).current = el;\n }\n }\n }}\n transitionState={shouldUseStandardAnimation(item, index) ? state : undefined}\n i18nStrings={iconAriaLabels}\n style={style}\n onDismissed={handleFlashDismissed}\n {...item}\n />\n )}\n </li>\n )}\n </Transition>\n ))}\n </ListWrapper>\n </ul>\n );\n\n return (\n <div\n {...baseProps}\n className={clsx(\n baseProps.className,\n styles.flashbar,\n styles.stack,\n isCollapsible && styles.collapsible,\n items.length === 2 && styles['short-list'],\n isFlashbarStackExpanded && styles.expanded,\n isVisualRefresh && styles['visual-refresh']\n )}\n ref={mergedRef}\n {...getAnalyticsMetadataAttribute(getComponentsAnalyticsMetadata(items.length, true, isFlashbarStackExpanded))}\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 items.length === 2 && styles['short-list'],\n getVisualContextClassname('flashbar') // Visual context is needed for focus ring to be white\n )}\n onClick={toggleCollapseExpand}\n ref={notificationBarRef}\n style={getNotificationBarStyles(style)}\n {...getAnalyticsMetadataAttribute({\n action: !isFlashbarStackExpanded ? 'expand' : 'collapse',\n detail: {\n label: 'h2',\n },\n } as GeneratedAnalyticsMetadataFlashbarExpand \| GeneratedAnalyticsMetadataFlashbarCollapse)}\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={iconAriaLabels[labelName]}\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={notificationBarAriaLabel}\n className={clsx(styles.button, isFlashbarStackExpanded && styles.expanded)}\n >\n <InternalIcon className={styles.icon} size=\"normal\" name=\"angle-down\" />\n </button>\n </div>\n )}\n {!isFlashbarStackExpanded && renderList()}\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 title={label}>\n <InternalIcon name={iconName} ariaLabel={label} />\n </span>\n <span className={styles['count-number']}>{count}</span>\n </span>\n );\n};\n\nconst ListWrapper = ({ children, withMotion }: { children: ReactNode; withMotion: boolean }) =>\n withMotion ? <TransitionGroup component={null}>{children}</TransitionGroup> : <>{children}</>;\n"]}
1	+ {"version":3,"file":"collapsible-flashbar.js","sourceRoot":"","sources":["../../../src/flashbar/collapsible-flashbar.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAa,WAAW,EAAE,eAAe,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAClG,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AACzD,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,WAAW,EAAE,MAAM,0CAA0C,CAAC;AACvE,OAAO,EAAE,WAAW,EAAE,MAAM,+CAA+C,CAAC;AAC5E,OAAO,EAAE,6BAA6B,EAAE,MAAM,kEAAkE,CAAC;AAEjH,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAElD,OAAO,YAAY,MAAM,kBAAkB,CAAC;AAC5C,OAAO,EAAE,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAC3D,OAAO,EAAE,UAAU,EAAE,MAAM,mCAAmC,CAAC;AAC/D,OAAO,EAAE,yBAAyB,EAAE,MAAM,uCAAuC,CAAC;AAClF,OAAO,cAAc,MAAM,6CAA6C,CAAC;AACzE,OAAO,EAAE,mBAAmB,EAAE,MAAM,yCAAyC,CAAC;AAC9E,OAAO,EAAE,iBAAiB,EAAE,MAAM,wCAAwC,CAAC;AAC3E,OAAO,EAAE,qBAAqB,EAAE,MAAM,yCAAyC,CAAC;AAChF,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AAKtD,OAAO,EAAE,8BAA8B,EAAE,wBAAwB,EAAE,MAAM,4BAA4B,CAAC;AACtG,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AACvC,OAAO,EAAE,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAEhD,OAAO,EAAE,yBAAyB,EAAE,wBAAwB,EAAE,MAAM,SAAS,CAAC;AAC9E,OAAO,EACL,YAAY,EACZ,oBAAoB,EACpB,iBAAiB,EACjB,YAAY,EACZ,wBAAwB,GAEzB,MAAM,SAAS,CAAC;AAEjB,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC,2DAA2D;AAC3D,2GAA2G;AAC3G,MAAM,sBAAsB,GAAG,CAAC,CAAC;AAEjC,MAAM,2BAA2B,GAAG,GAAG,CAAC;AAExC,MAAM,CAAC,OAAO,UAAU,mBAAmB,CAAC,EAA6C;QAA7C,EAAE,KAAK,EAAE,KAAK,OAA+B,EAA1B,SAAS,cAA5B,kBAA8B,CAAF;IACtE,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAiD,EAAE,CAAC,CAAC;IACvG,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAiD,EAAE,CAAC,CAAC;IACrG,MAAM,CAAC,uBAAuB,EAAE,0BAA0B,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE9E,MAAM,oBAAoB,GAAG,WAAW,CAAC,GAAG,EAAE;QAC5C,MAAM,aAAa,GAAG,uBAAuB,CAAC,CAAC,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC,CAAC,iBAAiB,CAAC,OAAO,CAAC;QACrG,uCAAY,aAAa,KAAE,eAAe,EAAE,kBAAkB,CAAC,OAAO,IAAG;IAC3E,CAAC,EAAE,CAAC,uBAAuB,CAAC,CAAC,CAAC;IAE9B,MAAM,iBAAiB,GAAG,WAAW,CAAC,GAAG,EAAE;QACzC,MAAM,KAAK,GAAG,WAAW,CAAC,oBAAoB,EAAE,CAAC,CAAC;QAClD,wBAAwB,CAAC,KAAK,CAAC,CAAC;IAClC,CAAC,EAAE,CAAC,oBAAoB,CAAC,CAAC,CAAC;IAE3B,MAAM,iBAAiB,GAAG,MAAM,CAAqC,EAAE,CAAC,CAAC;IACzE,MAAM,gBAAgB,GAAG,MAAM,CAAqC,EAAE,CAAC,CAAC;IACxE,MAAM,CAAC,qBAAqB,EAAE,wBAAwB,CAAC,GAAG,QAAQ,CAAiC,IAAI,CAAC,CAAC;IACzG,MAAM,cAAc,GAAG,MAAM,CAA0B,IAAI,CAAC,CAAC;IAC7D,MAAM,kBAAkB,GAAG,MAAM,CAAwB,IAAI,CAAC,CAAC;IAC/D,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC1D,MAAM,iBAAiB,GAAG,WAAW,CAAC,UAAU,CAAC,CAAC;IAClD,MAAM,kBAAkB,GAAG,WAAW,CAAC,YAAY,CAAC,CAAC;IAErD,MAAM,EAAE,SAAS,EAAE,eAAe,EAAE,eAAe,EAAE,SAAS,EAAE,GAAG,EAAE,SAAS,EAAE,oBAAoB,EAAE,GAAG,WAAW,+BAClH,KAAK,IACF,SAAS,KACZ,YAAY,EAAE,QAAQ,CAAC,EAAE;YACvB,gBAAgB,CAAC,CAAC,GAAG,aAAa,EAAE,GAAG,QAAQ,CAAC,CAAC,CAAC;QACpD,CAAC,EACD,cAAc,EAAE,OAAO,CAAC,EAAE;YACxB,6EAA6E;YAC7E,kEAAkE;YAClE,oFAAoF;YACpF,IAAI,CAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,cAAc,KAAI,CAAC,CAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,eAAe,CAAA,EAAE;gBACxD,iBAAiB,EAAE,CAAC;aACrB;QACH,CAAC,EACD,cAAc,EAAE,YAAY,CAAC,EAAE;YAC7B,eAAe,CAAC,CAAC,GAAG,YAAY,EAAE,GAAG,YAAY,CAAC,CAAC,CAAC;QACtD,CAAC,IACD,CAAC;IAEH,IAAI,KAAK,CAAC,MAAM,IAAI,sBAAsB,IAAI,uBAAuB,EAAE;QACrE,0BAA0B,CAAC,KAAK,CAAC,CAAC;KACnC;IAED,MAAM,YAAY,GAAG,CAAC,eAAe,CAAC;IAEtC,SAAS,oBAAoB;QAC3B,IAAI,CAAC,eAAe,EAAE;YACpB,iBAAiB,EAAE,CAAC;SACrB;QACD,0BAA0B,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC;IAC5C,CAAC;IAED,MAAM,cAAc,GAAG,mBAAmB,CAAC,cAAc,EAAE,oBAAoB,CAAC,CAAC;IACjF,eAAe,CAAC,GAAG,EAAE;QACnB,IAAI,uBAAuB,KAAI,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,MAAM,CAAA,EAAE;YAC5C,MAAM,cAAc,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC;YAChC,IAAI,cAAc,CAAC,EAAE,KAAK,SAAS,EAAE;gBACnC,cAAc,CAAC,GAAG,CAAC,OAAO,EAAE,cAAc,CAAC,EAAE,CAAC,CAAC;aAChD;SACF;QACD,iEAAiE;QACjE,uDAAuD;IACzD,CAAC,EAAE,CAAC,cAAc,EAAE,uBAAuB,CAAC,CAAC,CAAC;IAE9C,sFAAsF;IACtF,iBAAiB,CAAC,GAAG,EAAE;QACrB,IAAI,CAAC,uBAAuB,IAAI,kBAAkB,CAAC,OAAO,EAAE;YAC1D,qBAAqB,CAAC,kBAAkB,CAAC,OAAO,CAAC,CAAC;SACnD;IACH,CAAC,EAAE,CAAC,uBAAuB,CAAC,CAAC,CAAC;IAE9B,MAAM,mBAAmB,GAAG,OAAO,CACjC,GAAG,EAAE,CACH,QAAQ,CAAC,GAAG,EAAE;QACZ,gHAAgH;QAChH,+DAA+D;QAC/D,MAAM,WAAW,GAAG,cAAc,aAAd,cAAc,uBAAd,cAAc,CAAE,OAAO,CAAC;QAC5C,MAAM,QAAQ,GAAG,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,aAAa,CAAC;QAC5C,IAAI,WAAW,IAAI,QAAQ,EAAE;YAC3B,yEAAyE;YACzE,4CAA4C;YAC5C,QAAQ,CAAC,SAAS,CAAC,MAAM,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;YAC3C,MAAM,YAAY,GAAG,MAAM,CAAC,WAAW,CAAC;YACxC,yGAAyG;YACzG,gEAAgE;YAChE,MAAM,YAAY,GAAG,WAAW,CAAC,QAAQ,EAAE,OAAO,CAAC,EAAE,CAAC,OAAO,CAAC,YAAY,CAAC,MAAM,CAAC,KAAK,QAAQ,CAAC,IAAI,QAAQ,CAAC;YAC7G,MAAM,YAAY,GAChB,uBAAuB,IAAI,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,qBAAqB,EAAE,CAAC,MAAM,CAAC,IAAI,YAAY,CAAC;YACpG,IAAI,CAAC,YAAY,EAAE;gBACjB,QAAQ,CAAC,SAAS,CAAC,GAAG,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;aACzC;SACF;IACH,CAAC,EAAE,2BAA2B,CAAC,EACjC,CAAC,uBAAuB,CAAC,CAC1B,CAAC;IAEF,eAAe,CAAC,GAAG,EAAE;QACnB,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,mBAAmB,CAAC,CAAC;QACvD,OAAO,GAAG,EAAE;YACV,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,mBAAmB,CAAC,CAAC;YAC1D,mBAAmB,CAAC,MAAM,EAAE,CAAC;QAC/B,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,mBAAmB,CAAC,CAAC,CAAC;IAE1B,MAAM,EAAE,WAAW,EAAE,GAAG,SAAS,CAAC;IAElC,MAAM,IAAI,GAAG,eAAe,CAAC,UAAU,CAAC,CAAC;IACzC,MAAM,SAAS,GAAG,IAAI,CAAC,uBAAuB,EAAE,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,SAAS,CAAC,CAAC;IACxE,MAAM,mBAAmB,GAAG,IAAI,CAAC,iCAAiC,EAAE,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,mBAAmB,CAAC,CAAC;IACtG,MAAM,wBAAwB,GAAG,IAAI,CAAC,sCAAsC,EAAE,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,wBAAwB,CAAC,CAAC;IACrH,MAAM,cAAc,GAAG;QACrB,kBAAkB,EAAE,IAAI,CAAC,gCAAgC,EAAE,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,kBAAkB,CAAC;QAC3F,uBAAuB,EAAE,IAAI,CAAC,qCAAqC,EAAE,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,uBAAuB,CAAC;QAC1G,iBAAiB,EAAE,IAAI,CAAC,+BAA+B,EAAE,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,iBAAiB,CAAC;QACxF,oBAAoB,EAAE,IAAI,CAAC,kCAAkC,EAAE,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,oBAAoB,CAAC;QACjG,oBAAoB,EAAE,IAAI,CAAC,kCAAkC,EAAE,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,oBAAoB,CAAC;KAClG,CAAC;IAEF,eAAe,CAAC,GAAG,EAAE;QACnB,qFAAqF;QACrF,0GAA0G;QAC1G,mDAAmD;QACnD,oEAAoE;QAEpE,IAAI,qBAAqB,EAAE;YACzB,mBAAmB,EAAE,CAAC;YAEtB,OAAO,CAAC;gBACN,QAAQ,EAAE,oBAAoB,EAAE;gBAChC,QAAQ,EAAE,qBAAqB;gBAC/B,sBAAsB,EAAE,CAAC,EAAE,GAAG,EAAE,EAAE,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,GAAG,EAAE,CAAC,EAAE,CAAC,GAAG,GAAG,GAAG,EAAE,CAAC;gBACpE,gBAAgB,EAAE,GAAG,EAAE,CAAC,gBAAgB,CAAC,KAAK,CAAC;aAChD,CAAC,CAAC;YAEH,gBAAgB,CAAC,IAAI,CAAC,CAAC;YACvB,wBAAwB,CAAC,IAAI,CAAC,CAAC;SAChC;IACH,CAAC,EAAE,CAAC,mBAAmB,EAAE,oBAAoB,EAAE,qBAAqB,EAAE,uBAAuB,CAAC,CAAC,CAAC;IAEhG,MAAM,aAAa,GAAG,KAAK,CAAC,MAAM,GAAG,sBAAsB,CAAC;IAE5D,MAAM,WAAW,GAAG,iBAAiB,CAAC,KAAK,CAAC,CAAC;IAE7C,MAAM,qBAAqB,GAAG,IAAI,GAAG,CAAC,KAAK,CAAC,GAAG,CAAC,YAAY,CAAC,CAAC,CAAC,IAAI,CAAC;IACpE,MAAM,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,qBAAqB,EAAE,CAAC,CAAC,CAAC;IACpD,MAAM,UAAU,GAAG,IAAI,CAAC,GAAG,CAAC,QAAQ,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IAEpD,MAAM,WAAW,GAAG,uBAAuB;QACzC,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,iCAAM,IAAI,KAAE,aAAa,EAAE,KAAK,IAAG,CAAC;QACjE,CAAC,CAAC,wBAAwB,CAAC,KAAK,EAAE,UAAU,CAAC,CAAC,GAAG,CAAC,CAAC,IAAmB,EAAE,KAAa,EAAE,EAAE,CAAC,iCACnF,IAAI,KACP,cAAc,EAAE,KAAK,IACrB,CAAC,CAAC;IAER,MAAM,SAAS,GAAG,CAAC,IAAqD,EAAE,EAAE,eAC1E,OAAA,MAAA,MAAA,IAAI,CAAC,EAAE,mCAAK,IAAsB,CAAC,aAAa,mCAAI,CAAC,CAAA,EAAA,CAAC;IAExD,kHAAkH;IAClH,uFAAuF;IACvF,gDAAgD;IAChD,wEAAwE;IACxE,MAAM,UAAU,GAAG,CAAC,IAAqD,EAAE,EAAE,CAC3E,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,IAAI,KAAK,CAAC,EAAE,KAAK,IAAI,CAAC,EAAE,CAAC,CAAC;IAChE,MAAM,OAAO,GAAG,CAAC,IAAqD,EAAE,EAAE,CAAC,CAAC,CAAC,eAAe,IAAI,IAAI,CAAC,CAAC;IACtG,MAAM,gBAAgB,GAAG,CAAC,IAAqD,EAAE,EAAE,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,OAAO,CAAC,IAAI,CAAC,CAAC;IAEtH,MAAM,gBAAgB,GAAG,CAAC,IAAqD,EAAE,EAAE,CACjF,uBAAuB,IAAI,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,eAAe,IAAI,IAAI,IAAI,IAAI,CAAC,aAAa,KAAK,CAAC,CAAC,CAAC;IAEpG,MAAM,0BAA0B,GAAG,CAAC,IAAmB,EAAE,KAAa,EAAE,EAAE,CAAC,KAAK,KAAK,CAAC,IAAI,gBAAgB,CAAC,IAAI,CAAC,CAAC;IAEjH,MAAM,qBAAqB,GAAG,CAAC,IAAmB,EAAE,EAAE,CAAC,SAAS,SAAS,CAAC,IAAI,CAAC,EAAE,CAAC;IAElF,MAAM,UAAU,GAAG,GAAG,EAAE,CAAC,CACvB,4BACE,GAAG,EAAE,cAAc,EACnB,SAAS,EAAE,IAAI,CACb,MAAM,CAAC,YAAY,CAAC,EACpB,uBAAuB,CAAC,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,SAAS,EAC5D,aAAa,IAAI,MAAM,CAAC,mBAAmB,CAAC,EAC5C,qBAAqB,IAAI,MAAM,CAAC,iBAAiB,CAAC,EAClD,eAAe,IAAI,MAAM,CAAC,gBAAgB,CAAC,CAC5C,EACD,EAAE,EAAE,iBAAiB,gBACT,SAAS,sBACH,aAAa,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,SAAS,EAChE,KAAK,EACH,CAAC,uBAAuB,IAAI,aAAa;YACvC,CAAC,CAAC;gBACE,CAAC,cAAc,CAAC,kBAAkB,CAAC,EAAE,UAAU;aAChD;YACH,CAAC,CAAC,SAAS;QAGf,oBAAC,WAAW,IAAC,UAAU,EAAE,CAAC,eAAe,IACtC,WAAW,CAAC,GAAG,CAAC,CAAC,IAAmB,EAAE,KAAa,EAAE,EAAE,CAAC,CACvD,oBAAC,UAAU,IACT,GAAG,EAAE,SAAS,CAAC,IAAI,CAAC,EACpB,EAAE,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,EAClB,cAAc,EAAE,MAAM,CAAC,EAAE;gBACvB,IAAI,MAAM,KAAK,SAAS,EAAE;oBACxB,gBAAgB,CAAC,EAAE,CAAC,CAAC;iBACtB;qBAAM,IAAI,MAAM,KAAK,QAAQ,EAAE;oBAC9B,eAAe,CAAC,EAAE,CAAC,CAAC;iBACrB;YACH,CAAC,IAEA,CAAC,KAAa,EAAE,qBAA4D,EAAE,EAAE;;YAAC,OAAA,CAChF,yDACe,CAAC,gBAAgB,CAAC,IAAI,CAAC,EACpC,SAAS,EACP,gBAAgB,CAAC,IAAI,CAAC;oBACpB,CAAC,CAAC,IAAI,CACF,MAAM,CAAC,iBAAiB,CAAC,EACzB,CAAC,uBAAuB,IAAI,MAAM,CAAC,IAAI,EACvC,CAAC,iBAAiB,CAAC,OAAO,CAAC,qBAAqB,CAAC,IAAI,CAAC,CAAC,IAAI,MAAM,CAAC,eAAe,CAAC,CACnF;oBACH,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,MAAM,CAAC,cAAc,MAAA,IAAI,CAAC,IAAI,mCAAI,MAAM,EAAE,CAAC,EAAE,MAAM,CAAC,IAAI,CAAC,EAElF,GAAG,EAAE,OAAO,CAAC,EAAE;oBACb,IAAI,uBAAuB,EAAE;wBAC3B,gBAAgB,CAAC,OAAO,CAAC,qBAAqB,CAAC,IAAI,CAAC,CAAC,GAAG,OAAO,CAAC;qBACjE;yBAAM;wBACL,iBAAiB,CAAC,OAAO,CAAC,qBAAqB,CAAC,IAAI,CAAC,CAAC,GAAG,OAAO,CAAC;qBAClE;gBACH,CAAC,EACD,KAAK,kCACA,CAAC,KAAK,GAAG,CAAC,IAAI,CAAC,uBAAuB,IAAI,yBAAyB,CAAC,KAAK,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC,GACtF,CAAC,CAAC,CAAC,uBAAuB,IAAI,aAAa,CAAC,IAAI;oBACjD,CAAC,cAAc,CAAC,kBAAkB,CAAC,EACjC,MAAA,MAAC,IAAsB,CAAC,cAAc,mCAAK,IAAsB,CAAC,aAAa,mCAAI,KAAK;iBAC3F,CAAC,GAEJ,GAAG,EAAE,SAAS,CAAC,IAAI,CAAC,IAChB,6BAA6B,CAAC,wBAAwB,CAAC,KAAK,GAAG,CAAC,EAAE,IAAI,CAAC,IAAI,IAAI,MAAM,EAAE,IAAI,CAAC,EAAE,CAAC,CAAC,GAEnG,gBAAgB,CAAC,IAAI,CAAC,IAAI,CACzB,oBAAC,KAAK,kBACJ,SAAS,EAAE,IAAI,CACb,YAAY,IAAI,MAAM,CAAC,mBAAmB,CAAC,EAC3C,eAAe,IAAI,MAAM,CAAC,eAAe,CAAC,CAC3C,EACD,GAAG,EAAE,SAAS,CAAC,IAAI,CAAC,EACpB,GAAG,EAAE,CAAC,EAAyB,EAAE,EAAE;oBACjC,yDAAyD;oBACzD,SAAS,CAAC,OAAO,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,GAAG,EAAE,CAAC;oBAExC,IAAI,0BAA0B,CAAC,IAAI,EAAE,KAAK,CAAC,IAAI,qBAAqB,EAAE;wBACpE,IAAI,OAAO,qBAAqB,KAAK,UAAU,EAAE;4BAC/C,qBAAqB,CAAC,EAAE,CAAC,CAAC;yBAC3B;6BAAM,IACL,qBAAqB;4BACrB,OAAO,qBAAqB,KAAK,QAAQ;4BACzC,SAAS,IAAI,qBAAqB,EAClC;4BACC,qBAAuE,CAAC,OAAO,GAAG,EAAE,CAAC;yBACvF;qBACF;gBACH,CAAC,EACD,eAAe,EAAE,0BAA0B,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,EAC5E,WAAW,EAAE,cAAc,EAC3B,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,oBAAoB,IAC7B,IAAI,EACR,CACH,CACE,CACN,CAAA;SAAA,CACU,CACd,CAAC,CACU,CACX,CACN,CAAC;IAEF,OAAO,CACL,6CACM,SAAS,IACb,SAAS,EAAE,IAAI,CACb,SAAS,CAAC,SAAS,EACnB,MAAM,CAAC,QAAQ,EACf,MAAM,CAAC,KAAK,EACZ,aAAa,IAAI,MAAM,CAAC,WAAW,EACnC,KAAK,CAAC,MAAM,KAAK,CAAC,IAAI,MAAM,CAAC,YAAY,CAAC,EAC1C,uBAAuB,IAAI,MAAM,CAAC,QAAQ,EAC1C,eAAe,IAAI,MAAM,CAAC,gBAAgB,CAAC,CAC5C,EACD,GAAG,EAAE,SAAS,IACV,6BAA6B,CAAC,8BAA8B,CAAC,KAAK,CAAC,MAAM,EAAE,IAAI,EAAE,uBAAuB,CAAC,CAAC;QAE7G,uBAAuB,IAAI,UAAU,EAAE;QACvC,aAAa,IAAI,CAChB,2CACE,SAAS,EAAE,IAAI,CACb,MAAM,CAAC,kBAAkB,CAAC,EAC1B,eAAe,IAAI,MAAM,CAAC,gBAAgB,CAAC,EAC3C,uBAAuB,CAAC,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,SAAS,EAC5D,aAAa,IAAI,MAAM,CAAC,mBAAmB,CAAC,EAC5C,KAAK,CAAC,MAAM,KAAK,CAAC,IAAI,MAAM,CAAC,YAAY,CAAC,EAC1C,yBAAyB,CAAC,UAAU,CAAC,CAAC,sDAAsD;aAC7F,EACD,OAAO,EAAE,oBAAoB,EAC7B,GAAG,EAAE,kBAAkB,EACvB,KAAK,EAAE,wBAAwB,CAAC,KAAK,CAAC,IAClC,6BAA6B,CAAC;YAChC,MAAM,EAAE,CAAC,uBAAuB,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU;YACxD,MAAM,EAAE;gBACN,KAAK,EAAE,IAAI;aACZ;SACuF,CAAC;YAE3F,2CAAgB,QAAQ,EAAC,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,IAAI,EAAC,QAAQ,EAAC,EAAE,EAAE,kBAAkB;gBACpF,mBAAmB,IAAI,4BAAI,SAAS,EAAE,MAAM,CAAC,MAAM,IAAG,mBAAmB,CAAM;gBAChF,8BAAM,SAAS,EAAE,MAAM,CAAC,YAAY,CAAC,IAClC,YAAY,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CACnD,oBAAC,qBAAqB,IACpB,GAAG,EAAE,IAAI,EACT,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,cAAc,CAAC,SAAS,CAAC,EAChC,KAAK,EAAE,WAAW,CAAC,IAAI,CAAC,GACxB,CACH,CAAC,CACG,CACF;YACP,iDACiB,iBAAiB,sBACd,kBAAkB,mBACrB,uBAAuB,gBAC1B,wBAAwB,EACpC,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,MAAM,EAAE,uBAAuB,IAAI,MAAM,CAAC,QAAQ,CAAC;gBAE1E,oBAAC,YAAY,IAAC,SAAS,EAAE,MAAM,CAAC,IAAI,EAAE,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,YAAY,GAAG,CACjE,CACL,CACP;QACA,CAAC,uBAAuB,IAAI,UAAU,EAAE,CACrC,CACP,CAAC;AACJ,CAAC;AAED,MAAM,qBAAqB,GAAG,CAAC,EAC7B,QAAQ,EACR,KAAK,EACL,KAAK,GAKN,EAAE,EAAE;IACH,OAAO,CACL,8BAAM,SAAS,EAAE,MAAM,CAAC,YAAY,CAAC;QACnC,8BAAM,KAAK,EAAE,KAAK;YAChB,oBAAC,YAAY,IAAC,IAAI,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,GAAI,CAC7C;QACP,8BAAM,SAAS,EAAE,MAAM,CAAC,cAAc,CAAC,IAAG,KAAK,CAAQ,CAClD,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,WAAW,GAAG,CAAC,EAAE,QAAQ,EAAE,UAAU,EAAgD,EAAE,EAAE,CAC7F,UAAU,CAAC,CAAC,CAAC,oBAAC,eAAe,IAAC,SAAS,EAAE,IAAI,IAAG,QAAQ,CAAmB,CAAC,CAAC,CAAC,0CAAG,QAAQ,CAAI,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { ReactNode, useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react';\nimport { TransitionGroup } from 'react-transition-group';\nimport clsx from 'clsx';\n\nimport { findUpUntil } from '@cloudscape-design/component-toolkit/dom';\nimport { useUniqueId } from '@cloudscape-design/component-toolkit/internal';\nimport { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';\n\nimport { useInternalI18n } from '../i18n/context';\nimport { IconProps } from '../icon/interfaces';\nimport InternalIcon from '../icon/internal';\nimport { animate, getDOMRects } from '../internal/animate';\nimport { Transition } from '../internal/components/transition';\nimport { getVisualContextClassname } from '../internal/components/visual-context';\nimport customCssProps from '../internal/generated/custom-css-properties';\nimport { useDebounceCallback } from '../internal/hooks/use-debounce-callback';\nimport { useEffectOnUpdate } from '../internal/hooks/use-effect-on-update';\nimport { scrollElementIntoView } from '../internal/utils/scrollable-containers';\nimport { throttle } from '../internal/utils/throttle';\nimport {\n GeneratedAnalyticsMetadataFlashbarCollapse,\n GeneratedAnalyticsMetadataFlashbarExpand,\n} from './analytics-metadata/interfaces';\nimport { getComponentsAnalyticsMetadata, getItemAnalyticsMetadata } from './analytics-metadata/utils';\nimport { useFlashbar } from './common';\nimport { Flash, focusFlashById } from './flash';\nimport { FlashbarProps } from './interfaces';\nimport { getCollapsibleFlashStyles, getNotificationBarStyles } from './style';\nimport {\n counterTypes,\n FOCUS_DEBOUNCE_DELAY,\n getFlashTypeCount,\n getItemColor,\n getVisibleCollapsedItems,\n StackableItem,\n} from './utils';\n\nimport styles from './styles.css.js';\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, style, ...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 collapsedItemRefs = useRef<Record<string, HTMLElement \| null>>({});\n const expandedItemRefs = useRef<Record<string, HTMLElement \| null>>({});\n const [initialAnimationState, setInitialAnimationState] = useState<Record<string, 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 const { baseProps, isReducedMotion, isVisualRefresh, mergedRef, ref, flashRefs, handleFlashDismissed } = 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 if (items.length <= maxNonCollapsibleItems && isFlashbarStackExpanded) {\n setIsFlashbarStackExpanded(false);\n }\n\n const animateFlash = !isReducedMotion;\n\n function toggleCollapseExpand() {\n if (!isReducedMotion) {\n prepareAnimations();\n }\n setIsFlashbarStackExpanded(prev => !prev);\n }\n\n const debouncedFocus = useDebounceCallback(focusFlashById, FOCUS_DEBOUNCE_DELAY);\n useLayoutEffect(() => {\n if (isFlashbarStackExpanded && items?.length) {\n const mostRecentItem = items[0];\n if (mostRecentItem.id !== undefined) {\n debouncedFocus(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 }, [debouncedFocus, isFlashbarStackExpanded]);\n\n // When collapsing, scroll up if necessary to avoid losing track of the focused button\n useEffectOnUpdate(() => {\n if (!isFlashbarStackExpanded && notificationBarRef.current) {\n scrollElementIntoView(notificationBarRef.current);\n }\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 = findUpUntil(flashbar, element => element.getAttribute('role') === 'region') \|\| 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 const i18n = useInternalI18n('flashbar');\n const ariaLabel = i18n('i18nStrings.ariaLabel', i18nStrings?.ariaLabel);\n const notificationBarText = i18n('i18nStrings.notificationBarText', i18nStrings?.notificationBarText);\n const notificationBarAriaLabel = i18n('i18nStrings.notificationBarAriaLabel', i18nStrings?.notificationBarAriaLabel);\n const iconAriaLabels = {\n errorIconAriaLabel: i18n('i18nStrings.errorIconAriaLabel', i18nStrings?.errorIconAriaLabel),\n inProgressIconAriaLabel: i18n('i18nStrings.inProgressIconAriaLabel', i18nStrings?.inProgressIconAriaLabel),\n infoIconAriaLabel: i18n('i18nStrings.infoIconAriaLabel', i18nStrings?.infoIconAriaLabel),\n successIconAriaLabel: i18n('i18nStrings.successIconAriaLabel', i18nStrings?.successIconAriaLabel),\n warningIconAriaLabel: i18n('i18nStrings.warningIconAriaLabel', i18nStrings?.warningIconAriaLabel),\n };\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 animate({\n elements: getElementsToAnimate(),\n oldState: initialAnimationState,\n newElementInitialState: ({ top }) => ({ scale: 0.9, y: -0.2 * top }),\n onTransitionsEnd: () => setTransitioning(false),\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 numberOfColorsInStack = new Set(items.map(getItemColor)).size;\n const maxSlots = Math.max(numberOfColorsInStack, 3);\n const stackDepth = Math.min(maxSlots, 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 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 <ListWrapper withMotion={!isReducedMotion}>\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 ...(index > 0 && !isFlashbarStackExpanded && getCollapsibleFlashStyles(style, item.type)),\n ...((!isFlashbarStackExpanded \|\| transitioning) && {\n [customCssProps.flashbarStackIndex]:\n (item as StackableItem).collapsedIndex ?? (item as StackableItem).expandedIndex ?? index,\n }),\n }}\n key={getItemId(item)}\n {...getAnalyticsMetadataAttribute(getItemAnalyticsMetadata(index + 1, item.type \|\| 'info', item.id))}\n >\n {showInnerContent(item) && (\n <Flash\n className={clsx(\n animateFlash && styles['flash-with-motion'],\n isVisualRefresh && styles['flash-refresh']\n )}\n key={getItemId(item)}\n ref={(el: HTMLDivElement \| null) => {\n // Store the Flash element reference for focus management\n flashRefs.current[getItemId(item)] = el;\n\n if (shouldUseStandardAnimation(item, index) && transitionRootElement) {\n if (typeof transitionRootElement === 'function') {\n transitionRootElement(el);\n } else if (\n transitionRootElement &&\n typeof transitionRootElement === 'object' &&\n 'current' in transitionRootElement\n ) {\n (transitionRootElement as React.MutableRefObject<HTMLDivElement \| null>).current = el;\n }\n }\n }}\n transitionState={shouldUseStandardAnimation(item, index) ? state : undefined}\n i18nStrings={iconAriaLabels}\n style={style}\n onDismissed={handleFlashDismissed}\n {...item}\n />\n )}\n </li>\n )}\n </Transition>\n ))}\n </ListWrapper>\n </ul>\n );\n\n return (\n <div\n {...baseProps}\n className={clsx(\n baseProps.className,\n styles.flashbar,\n styles.stack,\n isCollapsible && styles.collapsible,\n items.length === 2 && styles['short-list'],\n isFlashbarStackExpanded && styles.expanded,\n isVisualRefresh && styles['visual-refresh']\n )}\n ref={mergedRef}\n {...getAnalyticsMetadataAttribute(getComponentsAnalyticsMetadata(items.length, true, isFlashbarStackExpanded))}\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 items.length === 2 && styles['short-list'],\n getVisualContextClassname('flashbar') // Visual context is needed for focus ring to be white\n )}\n onClick={toggleCollapseExpand}\n ref={notificationBarRef}\n style={getNotificationBarStyles(style)}\n {...getAnalyticsMetadataAttribute({\n action: !isFlashbarStackExpanded ? 'expand' : 'collapse',\n detail: {\n label: 'h2',\n },\n } as GeneratedAnalyticsMetadataFlashbarExpand \| GeneratedAnalyticsMetadataFlashbarCollapse)}\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={iconAriaLabels[labelName]}\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={notificationBarAriaLabel}\n className={clsx(styles.button, isFlashbarStackExpanded && styles.expanded)}\n >\n <InternalIcon className={styles.icon} size=\"normal\" name=\"angle-down\" />\n </button>\n </div>\n )}\n {!isFlashbarStackExpanded && renderList()}\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 title={label}>\n <InternalIcon name={iconName} ariaLabel={label} />\n </span>\n <span className={styles['count-number']}>{count}</span>\n </span>\n );\n};\n\nconst ListWrapper = ({ children, withMotion }: { children: ReactNode; withMotion: boolean }) =>\n withMotion ? <TransitionGroup component={null}>{children}</TransitionGroup> : <>{children}</>;\n"]}

package/lib/internal/template/flashbar/common.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"common.d.ts","sourceRoot":"","sources":["../../../src/flashbar/common.tsx"],"names":[],"mappings":";~~AAWA~~,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;~~AAK7C~~,eAAO,MAAM,4BAA4B,gBAC1B,MAAM,GAAG,SAAS,SACxB,cAAc,cAAc,iBAAiB,CAAC,GAAG,SAAS,cACrD,cAAc,GAAG,IAAI,oBACf,OAAO,MAAM,GAAG,MAAM,EAAE,cAAc,GAAG,IAAI,CAAC,SA8CjE,CAAC;AAGF,wBAAgB,WAAW,CAAC,EAC1B,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;;;;;;;;~~yCA+C6C~~,MAAM;EAcnD"}
1	+ {"version":3,"file":"common.d.ts","sourceRoot":"","sources":["../../../src/flashbar/common.tsx"],"names":[],"mappings":";AAYA,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAM7C,eAAO,MAAM,4BAA4B,gBAC1B,MAAM,GAAG,SAAS,SACxB,cAAc,cAAc,iBAAiB,CAAC,GAAG,SAAS,cACrD,cAAc,GAAG,IAAI,oBACf,OAAO,MAAM,GAAG,MAAM,EAAE,cAAc,GAAG,IAAI,CAAC,SA8CjE,CAAC;AAGF,wBAAgB,WAAW,CAAC,EAC1B,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;;;;;;;;yCAiD6C,MAAM;EAcnD"}

package/lib/internal/template/flashbar/common.js CHANGED Viewed

@@ -5,9 +5,11 @@ import { useEffect, useMemo, useRef, useState } from 'react';
 import { useMergeRefs, useReducedMotion, warnOnce } from '@cloudscape-design/component-toolkit/internal';
 import { getBaseProps } from '../internal/base-component';
 import useBaseComponent from '../internal/hooks/use-base-component';
+import { useDebounceCallback } from '../internal/hooks/use-debounce-callback';
 import { useVisualRefresh } from '../internal/hooks/use-visual-mode';
 import { isDevelopment } from '../internal/is-development';
 import { focusFlashById, focusFlashFocusableArea } from './flash';
+import { FOCUS_DEBOUNCE_DELAY } from './utils';
 import styles from './styles.css.js';
 // Exported for testing
 export const handleFlashDismissedInternal = (dismissedId, items, refCurrent, flashRefsCurrent) => {
@@ -87,11 +89,12 @@ export function useFlashbar(_a) {
             }
         }
     }
+    const debouncedFocus = useDebounceCallback(focusFlashById, FOCUS_DEBOUNCE_DELAY);
     useEffect(() => {
         if (nextFocusId) {
-            focusFlashById(ref.current, nextFocusId);
+            debouncedFocus(ref.current, nextFocusId);
         }
-    }, [nextFocusId, ref]);
+    }, [debouncedFocus, nextFocusId, ref]);
     const handleFlashDismissed = (dismissedId) => {
         handleFlashDismissedInternal(dismissedId, items, ref.current, flashRefs.current);
     };

package/lib/internal/template/flashbar/common.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"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 { useEffect, useMemo, useRef, useState } from 'react';\n\nimport { useMergeRefs, useReducedMotion, warnOnce } from '@cloudscape-design/component-toolkit/internal';\n\nimport { getBaseProps } from '../internal/base-component';\nimport useBaseComponent from '../internal/hooks/use-base-component';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport { isDevelopment } from '../internal/is-development';\nimport { focusFlashById, focusFlashFocusableArea } from './flash';\nimport { FlashbarProps } from './interfaces';\n\nimport styles from './styles.css.js';\n\n// Exported for testing\nexport const handleFlashDismissedInternal = (\n dismissedId: string \| undefined,\n items: ReadonlyArray<FlashbarProps.MessageDefinition> \| undefined,\n refCurrent: HTMLDivElement \| null,\n flashRefsCurrent: Record<string \| number, HTMLDivElement \| null>\n) => {\n if (!items \|\| !dismissedId \|\| !refCurrent) {\n return;\n }\n\n const dismissedIndex = items.findIndex(item => (item.id ?? '') === dismissedId);\n if (dismissedIndex === -1) {\n return;\n }\n\n let nextItemIndex = dismissedIndex + 1;\n if (nextItemIndex >= items.length) {\n nextItemIndex = dismissedIndex - 1;\n }\n\n // If there's no next item, focus the first instance of the main element (or element with role=main)\n if (nextItemIndex < 0 \|\| nextItemIndex >= items.length) {\n const mainElement = document.querySelector('main') ?? document.querySelector('[role=\"main\"]');\n mainElement?.focus();\n return;\n }\n\n const nextItemId = items[nextItemIndex].id ?? nextItemIndex;\n\n // Try to focus on the next item, but with a small delay to ensure the DOM is updated\n // This is especially important for collapsible flashbars where the next item might become visible\n const attemptFocus = () => {\n const nextFlashElement = flashRefsCurrent[nextItemId];\n if (!nextFlashElement) {\n // If the next flash element is not available, it might be because the flashbar is collapsed\n // In that case, try to focus on the notification bar button or the main element\n const notificationBarButton = refCurrent?.querySelector(`.${styles.button}`);\n if (notificationBarButton) {\n (notificationBarButton as HTMLElement).focus();\n return;\n }\n\n const mainElement = document.querySelector('main') ?? document.querySelector('[role=\"main\"]');\n mainElement?.focus();\n return;\n }\n focusFlashFocusableArea(nextFlashElement);\n };\n\n setTimeout(attemptFocus, 0);\n};\n\n// Common logic for collapsible and non-collapsible Flashbar\nexport function useFlashbar({\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('Flashbar', {\n props: { stackItems: restProps.stackItems },\n });\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 flashRefs = useRef<Record<string \| number, HTMLDivElement \| null>>({});\n const mergedRef = useMergeRefs(ref, __internalRootRef);\n const isReducedMotion = useReducedMotion(ref);\n const isVisualRefresh = useVisualRefresh();\n const [previousItems, setPreviousItems] = useState<ReadonlyArray<FlashbarProps.MessageDefinition>>(items);\n const [nextFocusId, setNextFocusId] = useState<string \| null>(null);\n\n if (isDevelopment) {\n if (items?.some(item => item.ariaRole === 'alert' && !item.id)) {\n warnOnce(\n 'Flashbar',\n `You provided \\`ariaRole=\"alert\"\\` for a flashbar item without providing an \\`id\\`. Focus will not be moved to the newly added flash message.`\n );\n }\n }\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 onItemsAdded?.(newItems);\n onItemsRemoved?.(removedItems);\n onItemsChanged?.({ allItemsHaveId, isReducedMotion });\n\n const newFocusItems = newItems.filter(({ ariaRole }) => ariaRole === 'alert');\n if (newFocusItems.length > 0) {\n setNextFocusId(newFocusItems[0].id!);\n }\n }\n }\n\n useEffect(() => {\n if (nextFocusId) {\n focusFlashById(ref.current, nextFocusId);\n }\n }, [nextFocusId, ref]);\n\n const handleFlashDismissed = (dismissedId?: string) => {\n handleFlashDismissedInternal(dismissedId, items, ref.current, flashRefs.current);\n };\n\n return {\n allItemsHaveId,\n baseProps,\n isReducedMotion,\n isVisualRefresh,\n mergedRef,\n ref,\n flashRefs,\n handleFlashDismissed,\n };\n}\n"]}
1	+ {"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 { useEffect, useMemo, useRef, useState } from 'react';\n\nimport { useMergeRefs, useReducedMotion, warnOnce } from '@cloudscape-design/component-toolkit/internal';\n\nimport { getBaseProps } from '../internal/base-component';\nimport useBaseComponent from '../internal/hooks/use-base-component';\nimport { useDebounceCallback } from '../internal/hooks/use-debounce-callback';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport { isDevelopment } from '../internal/is-development';\nimport { focusFlashById, focusFlashFocusableArea } from './flash';\nimport { FlashbarProps } from './interfaces';\nimport { FOCUS_DEBOUNCE_DELAY } from './utils';\n\nimport styles from './styles.css.js';\n\n// Exported for testing\nexport const handleFlashDismissedInternal = (\n dismissedId: string \| undefined,\n items: ReadonlyArray<FlashbarProps.MessageDefinition> \| undefined,\n refCurrent: HTMLDivElement \| null,\n flashRefsCurrent: Record<string \| number, HTMLDivElement \| null>\n) => {\n if (!items \|\| !dismissedId \|\| !refCurrent) {\n return;\n }\n\n const dismissedIndex = items.findIndex(item => (item.id ?? '') === dismissedId);\n if (dismissedIndex === -1) {\n return;\n }\n\n let nextItemIndex = dismissedIndex + 1;\n if (nextItemIndex >= items.length) {\n nextItemIndex = dismissedIndex - 1;\n }\n\n // If there's no next item, focus the first instance of the main element (or element with role=main)\n if (nextItemIndex < 0 \|\| nextItemIndex >= items.length) {\n const mainElement = document.querySelector('main') ?? document.querySelector('[role=\"main\"]');\n mainElement?.focus();\n return;\n }\n\n const nextItemId = items[nextItemIndex].id ?? nextItemIndex;\n\n // Try to focus on the next item, but with a small delay to ensure the DOM is updated\n // This is especially important for collapsible flashbars where the next item might become visible\n const attemptFocus = () => {\n const nextFlashElement = flashRefsCurrent[nextItemId];\n if (!nextFlashElement) {\n // If the next flash element is not available, it might be because the flashbar is collapsed\n // In that case, try to focus on the notification bar button or the main element\n const notificationBarButton = refCurrent?.querySelector(`.${styles.button}`);\n if (notificationBarButton) {\n (notificationBarButton as HTMLElement).focus();\n return;\n }\n\n const mainElement = document.querySelector('main') ?? document.querySelector('[role=\"main\"]');\n mainElement?.focus();\n return;\n }\n focusFlashFocusableArea(nextFlashElement);\n };\n\n setTimeout(attemptFocus, 0);\n};\n\n// Common logic for collapsible and non-collapsible Flashbar\nexport function useFlashbar({\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('Flashbar', {\n props: { stackItems: restProps.stackItems },\n });\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 flashRefs = useRef<Record<string \| number, HTMLDivElement \| null>>({});\n const mergedRef = useMergeRefs(ref, __internalRootRef);\n const isReducedMotion = useReducedMotion(ref);\n const isVisualRefresh = useVisualRefresh();\n const [previousItems, setPreviousItems] = useState<ReadonlyArray<FlashbarProps.MessageDefinition>>(items);\n const [nextFocusId, setNextFocusId] = useState<string \| null>(null);\n\n if (isDevelopment) {\n if (items?.some(item => item.ariaRole === 'alert' && !item.id)) {\n warnOnce(\n 'Flashbar',\n `You provided \\`ariaRole=\"alert\"\\` for a flashbar item without providing an \\`id\\`. Focus will not be moved to the newly added flash message.`\n );\n }\n }\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 onItemsAdded?.(newItems);\n onItemsRemoved?.(removedItems);\n onItemsChanged?.({ allItemsHaveId, isReducedMotion });\n\n const newFocusItems = newItems.filter(({ ariaRole }) => ariaRole === 'alert');\n if (newFocusItems.length > 0) {\n setNextFocusId(newFocusItems[0].id!);\n }\n }\n }\n\n const debouncedFocus = useDebounceCallback(focusFlashById, FOCUS_DEBOUNCE_DELAY);\n\n useEffect(() => {\n if (nextFocusId) {\n debouncedFocus(ref.current, nextFocusId);\n }\n }, [debouncedFocus, nextFocusId, ref]);\n\n const handleFlashDismissed = (dismissedId?: string) => {\n handleFlashDismissedInternal(dismissedId, items, ref.current, flashRefs.current);\n };\n\n return {\n allItemsHaveId,\n baseProps,\n isReducedMotion,\n isVisualRefresh,\n mergedRef,\n ref,\n flashRefs,\n handleFlashDismissed,\n };\n}\n"]}

package/lib/internal/template/flashbar/flash.d.ts CHANGED Viewed

@@ -1,7 +1,7 @@
 import React from 'react';
 import { FlashbarProps } from './interfaces';
 export declare const focusFlashFocusableArea: (flash: HTMLElement | null) => void;
-export declare const focusFlashById: import("../internal/utils/throttle").ThrottledFunction<(element: HTMLElement | null, itemId: string) => void>;
+export declare function focusFlashById(element: HTMLElement | null, itemId: string): void;
 interface FlashProps extends FlashbarProps.MessageDefinition {
     className: string;
     transitionState?: string;

package/lib/internal/template/flashbar/flash.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"flash.d.ts","sourceRoot":"","sources":["../../../src/flashbar/flash.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAiB,MAAM,OAAO,CAAC;~~AA8BtC~~,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;~~AAoD7C~~,eAAO,MAAM,uBAAuB,UAAW,WAAW,GAAG,IAAI,SAYhE,CAAC;AAEF,~~eAAO~~,~~MAAM,~~cAAc,~~mEACf~~,WAAW,GAAG,IAAI,~~UAAU~~,MAAM,~~UAgB7C~~,~~CAAC~~;~~AAEF~~,UAAU,UAAW,SAAQ,aAAa,CAAC,iBAAiB;IAC1D,SAAS,EAAE,MAAM,CAAC;IAClB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,WAAW,CAAC,EAAE,aAAa,CAAC,WAAW,CAAC;IACxC,KAAK,CAAC,EAAE,aAAa,CAAC,KAAK,CAAC;IAC5B,OAAO,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IACpC,WAAW,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;CACrC;AAED,eAAO,MAAM,KAAK,mFA6KjB,CAAC"}
1	+ {"version":3,"file":"flash.d.ts","sourceRoot":"","sources":["../../../src/flashbar/flash.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAiB,MAAM,OAAO,CAAC;AA6BtC,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAmD7C,eAAO,MAAM,uBAAuB,UAAW,WAAW,GAAG,IAAI,SAYhE,CAAC;AAEF,wBAAgB,cAAc,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI,EAAE,MAAM,EAAE,MAAM,QAYzE;AAED,UAAU,UAAW,SAAQ,aAAa,CAAC,iBAAiB;IAC1D,SAAS,EAAE,MAAM,CAAC;IAClB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,WAAW,CAAC,EAAE,aAAa,CAAC,WAAW,CAAC;IACxC,KAAK,CAAC,EAAE,aAAa,CAAC,KAAK,CAAC;IAC5B,OAAO,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IACpC,WAAW,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;CACrC;AAED,eAAO,MAAM,KAAK,mFA6KjB,CAAC"}

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

@@ -14,12 +14,10 @@ import { PACKAGE_VERSION } from '../internal/environment';
 import { isDevelopment } from '../internal/is-development';
 import { awsuiPluginsInternal } from '../internal/plugins/api';
 import { createUseDiscoveredAction, createUseDiscoveredContent } from '../internal/plugins/helpers';
-import { throttle } from '../internal/utils/throttle';
 import useContainerWidth from '../internal/utils/use-container-width';
 import InternalLiveRegion from '../live-region/internal';
 import InternalSpinner from '../spinner/internal';
 import { getDismissButtonStyles, getFlashStyles } from './style';
-import { FOCUS_THROTTLE_DELAY } from './utils';
 import analyticsSelectors from './analytics-metadata/styles.css.js';
 import styles from './styles.css.js';
 const ICON_TYPES = {
@@ -55,7 +53,7 @@ export const focusFlashFocusableArea = (flash) => {
         focusContainer.focus();
     }
 };
-export const focusFlashById = throttle((element, itemId) => {
+export function focusFlashById(element, itemId) {
     if (!element) {
         return;
     }
@@ -65,7 +63,7 @@ export const focusFlashById = throttle((element, itemId) => {
     }
     const focusContainer = flashElement.querySelector(`.${styles['flash-focus-container']}`);
     focusContainer === null || focusContainer === void 0 ? void 0 : focusContainer.focus();
-}, FOCUS_THROTTLE_DELAY, { trailing: false });
+}
 export const Flash = React.forwardRef((_a, ref) => {
     var { id, header, content, dismissible, dismissLabel, loading, action, buttonText, onButtonClick, onDismiss, className, transitionState, ariaRole, i18nStrings, type = 'info', analyticsMetadata, style, rootRef, onDismissed } = _a, props = __rest(_a, ["id", "header", "content", "dismissible", "dismissLabel", "loading", "action", "buttonText", "onButtonClick", "onDismiss", "className", "transitionState", "ariaRole", "i18nStrings", "type", "analyticsMetadata", "style", "rootRef", "onDismissed"]);
     if (isDevelopment) {