chore: Fix code reuse between app layout and alert/flashbar runtime API

src/app-layout/runtime-api.tsx → src/app-layout/runtime-drawer/index.tsx

@@ -1,19 +1,54 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import React from 'react';
+import React, { useContext, useEffect, useRef } from 'react';
 
-import { fireNonCancelableEvent } from '../internal/events';
-import { DrawerConfig as RuntimeDrawerConfig } from '../internal/plugins/controllers/drawers';
-import { RuntimeContentWrapper } from '../internal/plugins/helpers';
-import { sortByPriority } from '../internal/plugins/helpers/utils';
-import { AppLayoutProps } from './interfaces';
+import { fireNonCancelableEvent } from '../../internal/events';
+import { DrawerConfig as RuntimeDrawerConfig } from '../../internal/plugins/controllers/drawers';
+import { sortByPriority } from '../../internal/plugins/helpers/utils';
+import { AppLayoutProps } from '../interfaces';
+import { ActiveDrawersContext } from '../utils/visibility-context';
 
 export interface DrawersLayout {
   global: Array<AppLayoutProps.Drawer>;
   localBefore: Array<AppLayoutProps.Drawer>;
   localAfter: Array<AppLayoutProps.Drawer>;
 }
 
+type VisibilityCallback = (isVisible: boolean) => void;
+
+interface RuntimeContentWrapperProps {
+  id?: string;
+  mountContent: RuntimeDrawerConfig['mountContent'];
+  unmountContent: RuntimeDrawerConfig['unmountContent'];
+}
+
+function RuntimeDrawerWrapper({ mountContent, unmountContent, id }: RuntimeContentWrapperProps) {
+  const ref = useRef<HTMLDivElement>(null);
+  const visibilityChangeCallback = useRef<VisibilityCallback | null>(null);
+  const activeDrawersIds = useContext(ActiveDrawersContext);
+  const isVisible = !!id && activeDrawersIds.includes(id);
+
+  useEffect(() => {
+    const container = ref.current!;
+    mountContent(container, {
+      onVisibilityChange: cb => {
+        visibilityChangeCallback.current = cb;
+      },
+    });
+    return () => {
+      unmountContent(container);
+      visibilityChangeCallback.current = null;
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  useEffect(() => {
+    visibilityChangeCallback.current?.(isVisible);
+  }, [isVisible]);
+
+  return <div ref={ref}></div>;
+}
+
 const mapRuntimeConfigToDrawer = (
   runtimeConfig: RuntimeDrawerConfig
 ): AppLayoutProps.Drawer & {
@@ -33,7 +68,7 @@ const mapRuntimeConfigToDrawer = (
         }
       : undefined,
     content: (
-      <RuntimeContentWrapper
+      <RuntimeDrawerWrapper
         key={runtimeDrawer.id}
         mountContent={mountContent}
         unmountContent={unmountContent}

src/app-layout/utils/use-drawers.ts

@@ -9,7 +9,7 @@ import { useControllable } from '../../internal/hooks/use-controllable';
 import { awsuiPluginsInternal } from '../../internal/plugins/api';
 import { sortByPriority } from '../../internal/plugins/helpers/utils';
 import { AppLayoutProps } from '../interfaces';
-import { convertRuntimeDrawers, DrawersLayout } from '../runtime-api';
+import { convertRuntimeDrawers, DrawersLayout } from '../runtime-drawer';
 import { togglesConfig } from '../toggles';
 
 export const TOOLS_DRAWER_ID = 'awsui-internal-tools';

src/internal/plugins/helpers/index.ts

@@ -1,5 +1,4 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-export { RuntimeContentWrapper } from './runtime-content-wrapper';
 export { createUseDiscoveredAction } from './use-discovered-action';
 export { createUseDiscoveredContent } from './use-discovered-content';

src/internal/plugins/helpers/use-discovered-action.tsx

@@ -3,17 +3,38 @@
 import React, { useEffect, useRef, useState } from 'react';
 
 import { ActionButtonsController, ActionConfig, ActionContext } from '../controllers/action-buttons';
-import { RuntimeContentWrapper } from './runtime-content-wrapper';
+
+interface RuntimeActionWrapperProps {
+  context: ActionContext;
+  mountContent: ActionConfig['mountContent'];
+  unmountContent: ActionConfig['unmountContent'];
+}
+
+function RuntimeActionWrapper({ mountContent, unmountContent, context }: RuntimeActionWrapperProps) {
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const container = ref.current!;
+    mountContent(container, context);
+    return () => {
+      unmountContent(container);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return <div ref={ref}></div>;
+}
 
 function convertRuntimeAction(action: ActionConfig | null, context: ActionContext) {
   if (!action) {
     return null;
   }
   return (
-    <RuntimeContentWrapper
+    <RuntimeActionWrapper
       key={action.id + '-' + context.type}
-      mountContent={container => action.mountContent(container, context)}
-      unmountContent={container => action.unmountContent(container)}
+      context={context}
+      mountContent={action.mountContent}
+      unmountContent={action.unmountContent}
     />
   );
 }