Tweaks to API

pages/alert/runtime-content.page.tsx

@@ -63,7 +63,15 @@ awsuiPlugins.alertContent.registerContentReplacer({
     };
   },
   initialCheck(context) {
-    return context.type === 'error' && !!context.contentText?.match('Access denied');
+    return (
+      context.type === 'error' &&
+      !!(
+        context.content &&
+        typeof context.content === 'object' &&
+        'props' in context.content &&
+        context.content.props.children?.match('Access denied')
+      )
+    );
   },
 });
 

pages/flashbar/runtime-content.page.tsx

@@ -1,8 +1,9 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 
-import React, { useContext, useState } from 'react';
+import React, { ReactNode, useContext, useState } from 'react';
 import { render, unmountComponentAtNode } from 'react-dom';
+import flattenChildren from 'react-keyed-flatten-children';
 
 import {
   Box,
@@ -24,6 +25,12 @@ type PageContext = React.Context<
   AppContextType<{ loading: boolean; hidden: boolean; stackItems: boolean; type: FlashbarProps.Type }>
 >;
 
+const nodeAsString = (node: ReactNode) =>
+  flattenChildren(node)
+    .map(node => (typeof node === 'object' ? node.props.children : node))
+    .filter(node => typeof node === 'string')
+    .join('');
+
 awsuiPlugins.flashContent.registerContentReplacer({
   id: 'awsui/flashbar-test-action',
   runReplacer(context, replacer) {
@@ -62,10 +69,32 @@ awsuiPlugins.flashContent.registerContentReplacer({
       },
     };
   },
+  initialCheck(context) {
+    return context.type === 'error' && !!nodeAsString(context.content).match('Access denied');
+  },
 });
 
 const messageTypeOptions = ['error', 'warning', 'info', 'success'].map(type => ({ value: type }));
 
+const content = (
+  <>
+    <p>There was an error: Access denied because of XYZ</p>
+    <p>There was an error: Access denied because of XYZ</p>
+    <p>There was an error: Access denied because of XYZ</p>
+    <p>There was an error: Access denied because of XYZ</p>
+    <p>There was an error: Access denied because of XYZ</p>
+    <p>There was an error: Access denied because of XYZ</p>
+    <p>There was an error: Access denied because of XYZ</p>
+    <p>There was an error: Access denied because of XYZ</p>
+    <p>There was an error: Access denied because of XYZ</p>
+    <p>There was an error: Access denied because of XYZ</p>
+    <p>There was an error: Access denied because of XYZ</p>
+    <p>There was an error: Access denied because of XYZ</p>
+    <p>There was an error: Access denied because of XYZ</p>
+    <p>There was an error: Access denied because of XYZ</p>
+  </>
+);
+
 export default function () {
   const {
     urlParams: { loading = false, hidden = false, stackItems = false, type = 'error' },
@@ -117,7 +146,7 @@ export default function () {
                   type,
                   statusIconAriaLabel: type,
                   header: 'Header',
-                  content: loading ? 'Loading...' : 'There was an error: Access denied because of XYZ',
+                  content: loading ? 'Loading...' : content,
                   action: <Button>Action</Button>,
                 },
               ]}

src/alert/styles.scss

@@ -56,11 +56,8 @@
 }
 // visibly hidden, but focusable
 .initial-hidden {
-  // TODO: decide if it should take up space:
-  opacity: 0;
-  // or be entirely hidden:
-  // overflow: hidden;
-  // height: 0;
+  overflow: hidden;
+  block-size: 0;
 }
 
 .header,

src/flashbar/flash.tsx

@@ -124,6 +124,7 @@ export const Flash = React.forwardRef(
     const contentRefObject = useRef<HTMLDivElement>(null);
     const { discoveredActions, headerRef: headerRefAction, contentRef: contentRefAction } = useDiscoveredAction(type);
     const {
+      initialHidden,
       headerReplacementType,
       contentReplacementType,
       headerRef: headerRefContent,
@@ -174,7 +175,8 @@ export const Flash = React.forwardRef(
             [styles.exiting]: transitionState === 'exiting',
             [styles.exited]: transitionState === 'exited',
           },
-          getVisualContextClassname(type === 'warning' && !loading ? 'flashbar-warning' : 'flashbar')
+          getVisualContextClassname(type === 'warning' && !loading ? 'flashbar-warning' : 'flashbar'),
+          initialHidden && styles['initial-hidden']
         )}
         {...analyticsAttributes}
       >

src/flashbar/styles.scss

@@ -52,6 +52,11 @@
   }
 }
 
+.initial-hidden {
+  overflow: hidden;
+  block-size: 0;
+}
+
 .flash-list {
   list-style: none;
   padding-block: 0;

src/internal/plugins/controllers/alert-flash-content.ts

@@ -2,7 +2,6 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { ReactNode } from 'react';
-import flattenChildren from 'react-keyed-flatten-children';
 
 import debounce from '../../debounce';
 
@@ -17,18 +16,12 @@ export interface AlertFlashContentContext {
   contentRef: RefShim<HTMLElement>;
 }
 
-interface AlertFlashContentInitialContextRaw {
+interface AlertFlashContentInitialContext {
   type: string;
   header?: ReactNode;
   content?: ReactNode;
 }
 
-export interface AlertFlashContentInitialContext {
-  type: string;
-  headerText?: string;
-  contentText?: string;
-}
-
 export type ReplacementType = 'original' | 'remove' | 'replaced';
 
 export interface ReplacementApi {
@@ -60,15 +53,9 @@ export interface AlertFlashContentApiPublic {
 export interface AlertFlashContentApiInternal {
   clearRegisteredReplacer(): void;
   onContentRegistered(listener: AlertFlashContentRegistrationListener): () => void;
-  initialCheck(context: AlertFlashContentInitialContextRaw): boolean;
+  initialCheck(context: AlertFlashContentInitialContext): boolean;
 }
 
-const nodeAsString = (node: ReactNode) =>
-  flattenChildren(node)
-    .map(node => (typeof node === 'object' ? node.props.children : node))
-    .filter(node => typeof node === 'string')
-    .join('');
-
 export class AlertFlashContentController {
   #listeners: Array<AlertFlashContentRegistrationListener> = [];
   #cleanups = new Map<AlertFlashContentRegistrationListener, () => void>();
@@ -102,14 +89,9 @@ export class AlertFlashContentController {
     this.#provider = undefined;
   };
 
-  initialCheck = (context: AlertFlashContentInitialContextRaw): boolean => {
+  initialCheck = (context: AlertFlashContentInitialContext): boolean => {
     if (this.#provider?.initialCheck) {
-      const processedContext: AlertFlashContentInitialContext = {
-        type: context.type,
-        headerText: nodeAsString(context.header),
-        contentText: nodeAsString(context.content),
-      };
-      return this.#provider.initialCheck(processedContext);
+      return this.#provider.initialCheck(context);
     }
     return false;
   };