diff --git a/pages/app-layout/runtime-drawers-persist-open-state.page.tsx b/pages/app-layout/runtime-drawers-persist-open-state.page.tsx
index d23fdcb162..57e67369ed 100644
--- a/pages/app-layout/runtime-drawers-persist-open-state.page.tsx
+++ b/pages/app-layout/runtime-drawers-persist-open-state.page.tsx
@@ -21,6 +21,7 @@ awsuiPlugins.appLayout.registerDrawer({
`,
},
+ // preserveInactiveContent: true,
ariaLabels: {
closeButton: 'Close button',
@@ -32,6 +33,7 @@ awsuiPlugins.appLayout.registerDrawer({
mountContent: (container, { onVisibilityChange }) => {
awsuiPlugins.appLayout.updateDrawer({ id: 'runtime-drawer-persist-open-state', defaultActive: true });
onVisibilityChange(isVisible => {
+ console.log('onVisibilityChange: ', isVisible);
awsuiPlugins.appLayout.updateDrawer({ id: 'runtime-drawer-persist-open-state', defaultActive: isVisible });
});
render(, container);
diff --git a/src/app-layout/runtime-drawer/index.tsx b/src/app-layout/runtime-drawer/index.tsx
index e816e9266e..1eaadc4317 100644
--- a/src/app-layout/runtime-drawer/index.tsx
+++ b/src/app-layout/runtime-drawer/index.tsx
@@ -16,8 +16,6 @@ export interface DrawersLayout {
localAfter: Array;
}
-type VisibilityCallback = (isVisible: boolean) => void;
-
interface RuntimeContentWrapperProps {
id?: string;
mountContent: RuntimeDrawerConfig['mountContent'];
@@ -26,28 +24,23 @@ interface RuntimeContentWrapperProps {
function RuntimeDrawerWrapper({ mountContent, unmountContent, id }: RuntimeContentWrapperProps) {
const ref = useRef(null);
- const visibilityChangeCallback = useRef(null);
- const activeDrawersIds = useContext(ActiveDrawersContext);
- const isVisible = !!id && activeDrawersIds.includes(id);
+ const drawersVisibilityCallbackMap = useContext(ActiveDrawersContext);
useEffect(() => {
const container = ref.current!;
mountContent(container, {
onVisibilityChange: cb => {
- visibilityChangeCallback.current = cb;
+ if (drawersVisibilityCallbackMap?.current && id) {
+ drawersVisibilityCallbackMap.current[id!] = cb;
+ }
},
});
return () => {
unmountContent(container);
- visibilityChangeCallback.current = null;
};
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
- useEffect(() => {
- visibilityChangeCallback.current?.(isVisible);
- }, [isVisible]);
-
return ;
}
diff --git a/src/app-layout/utils/use-drawers.ts b/src/app-layout/utils/use-drawers.ts
index b65f96ae9b..40aedb21ff 100644
--- a/src/app-layout/utils/use-drawers.ts
+++ b/src/app-layout/utils/use-drawers.ts
@@ -174,10 +174,13 @@ function applyToolsDrawer(toolsProps: ToolsProps, runtimeDrawers: DrawersLayout)
export const MIN_DRAWER_SIZE = 290;
+type VisibilityCallback = (isVisible: boolean) => void;
+
type UseDrawersProps = Pick & {
__disableRuntimeDrawers?: boolean;
onGlobalDrawerFocus?: (drawerId: string, open: boolean) => void;
onAddNewActiveDrawer?: (drawerId: string) => void;
+ visibilityCallbackMap?: Record;
};
export function useDrawers(
@@ -188,6 +191,7 @@ export function useDrawers(
onGlobalDrawerFocus,
onAddNewActiveDrawer,
__disableRuntimeDrawers: disableRuntimeDrawers,
+ visibilityCallbackMap,
}: UseDrawersProps,
ariaLabels: AppLayoutProps['ariaLabels'],
toolsProps: ToolsProps
@@ -234,11 +238,17 @@ export function useDrawers(
setActiveGlobalDrawersIds(currentState => currentState.filter(id => id !== drawerId));
onGlobalDrawerFocus?.(drawerId, false);
drawersOpenQueue.current = drawersOpenQueue.current.filter(id => id !== drawerId);
+ if (visibilityCallbackMap) {
+ visibilityCallbackMap[drawerId]?.(false);
+ }
} else if (drawerId) {
onAddNewActiveDrawer?.(drawerId);
setActiveGlobalDrawersIds(currentState => [drawerId, ...currentState].slice(0, DRAWERS_LIMIT!));
onGlobalDrawerFocus?.(drawerId, true);
drawersOpenQueue.current = [drawerId, ...drawersOpenQueue.current];
+ if (visibilityCallbackMap) {
+ visibilityCallbackMap[drawerId]?.(true);
+ }
}
}
diff --git a/src/app-layout/utils/visibility-context.tsx b/src/app-layout/utils/visibility-context.tsx
index eb48258ded..81ff80a92c 100644
--- a/src/app-layout/utils/visibility-context.tsx
+++ b/src/app-layout/utils/visibility-context.tsx
@@ -1,5 +1,9 @@
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
// SPDX-License-Identifier: Apache-2.0
-import { createContext } from 'react';
+import React, { createContext } from 'react';
-export const ActiveDrawersContext = createContext>([]);
+type VisibilityCallback = (isVisible: boolean) => void;
+
+export const ActiveDrawersContext = createContext
+> | null>({ current: {} });
diff --git a/src/app-layout/visual-refresh-toolbar/index.tsx b/src/app-layout/visual-refresh-toolbar/index.tsx
index e5b871440e..9ea63f6153 100644
--- a/src/app-layout/visual-refresh-toolbar/index.tsx
+++ b/src/app-layout/visual-refresh-toolbar/index.tsx
@@ -1,6 +1,6 @@
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
// SPDX-License-Identifier: Apache-2.0
-import React, { useEffect, useImperativeHandle, useState } from 'react';
+import React, { useEffect, useImperativeHandle, useRef, useState } from 'react';
import { useStableCallback } from '@cloudscape-design/component-toolkit/internal';
@@ -34,6 +34,8 @@ import {
import { useMultiAppLayout } from './multi-layout';
import { SkeletonLayout } from './skeleton';
+type VisibilityCallback = (isVisible: boolean) => void;
+
const AppLayoutVisualRefreshToolbar = React.forwardRef(
(
{
@@ -78,6 +80,7 @@ const AppLayoutVisualRefreshToolbar = React.forwardRef>({});
const [toolsOpen = false, setToolsOpen] = useControllable(controlledToolsOpen, onToolsChange, false, {
componentName: 'AppLayout',
@@ -141,14 +144,23 @@ const AppLayoutVisualRefreshToolbar = React.forwardRef {
onActiveDrawerChange(drawerId);
@@ -459,7 +471,7 @@ const AppLayoutVisualRefreshToolbar = React.forwardRef 0 && }
globalTools={
-
+
}