@cloudscape-design/components-themeable 3.0.785 → 3.0.787

package/lib/internal/template/app-layout/utils/use-drawers.js

@@ -29,33 +29,91 @@ function getToolsDrawerItem(props) {
         },
     };
 }
-function useRuntimeDrawers(disableRuntimeDrawers, activeDrawerId, onActiveDrawerChange) {
-    const [runtimeDrawers, setRuntimeDrawers] = useState({ before: [], after: [] });
-    const onActiveDrawerChangeStable = useStableCallback(onActiveDrawerChange);
-    const drawerWasOpenRef = useRef(false);
-    drawerWasOpenRef.current = drawerWasOpenRef.current || !!activeDrawerId;
+const DRAWERS_LIMIT = 2;
+function useRuntimeDrawers(disableRuntimeDrawers, activeDrawerId, onActiveDrawerChange, activeGlobalDrawersIds, onActiveGlobalDrawersChange, drawers) {
+    const [runtimeDrawers, setRuntimeDrawers] = useState({
+        localBefore: [],
+        localAfter: [],
+        global: [],
+    });
+    const onLocalDrawerChangeStable = useStableCallback(onActiveDrawerChange);
+    const onGlobalDrawersChangeStable = useStableCallback(onActiveGlobalDrawersChange);
+    const drawersWereOpenRef = useRef(false);
+    drawersWereOpenRef.current = drawersWereOpenRef.current || !!activeDrawerId || !!activeGlobalDrawersIds.length;
     useEffect(() => {
         if (disableRuntimeDrawers) {
             return;
         }
         const unsubscribe = awsuiPluginsInternal.appLayout.onDrawersRegistered(drawers => {
-            setRuntimeDrawers(convertRuntimeDrawers(drawers));
-            if (!drawerWasOpenRef.current) {
-                const defaultActiveDrawer = sortByPriority(drawers).find(drawer => drawer.defaultActive);
-                if (defaultActiveDrawer) {
-                    onActiveDrawerChangeStable(defaultActiveDrawer.id);
+            const localDrawers = drawers.filter(drawer => drawer.type !== 'global');
+            const globalDrawers = drawers.filter(drawer => drawer.type === 'global');
+            setRuntimeDrawers(convertRuntimeDrawers(localDrawers, globalDrawers));
+            if (!drawersWereOpenRef.current) {
+                const defaultActiveLocalDrawer = sortByPriority(localDrawers).find(drawer => drawer.defaultActive);
+                if (defaultActiveLocalDrawer) {
+                    onLocalDrawerChangeStable(defaultActiveLocalDrawer.id);
                 }
+                const defaultActiveGlobalDrawers = sortByPriority(globalDrawers).filter(drawer => drawer.defaultActive);
+                defaultActiveGlobalDrawers.forEach(drawer => {
+                    onGlobalDrawersChangeStable(drawer.id);
+                });
+            }
+        });
+        return () => {
+            unsubscribe();
+            setRuntimeDrawers({ localBefore: [], localAfter: [], global: [] });
+        };
+    }, [disableRuntimeDrawers, onGlobalDrawersChangeStable, onLocalDrawerChangeStable]);
+    useEffect(() => {
+        const unsubscribe = awsuiPluginsInternal.appLayout.onDrawerOpened(drawerId => {
+            var _a, _b;
+            const localDrawer = (_a = [...runtimeDrawers.localBefore, ...drawers, ...runtimeDrawers.localAfter]) === null || _a === void 0 ? void 0 : _a.find(drawer => drawer.id === drawerId);
+            const globalDrawer = (_b = runtimeDrawers.global) === null || _b === void 0 ? void 0 : _b.find(drawer => drawer.id === drawerId);
+            if (localDrawer && activeDrawerId !== drawerId) {
+                onActiveDrawerChange(drawerId);
+            }
+            if (globalDrawer && !activeGlobalDrawersIds.includes(drawerId)) {
+                onActiveGlobalDrawersChange(drawerId);
             }
         });
         return () => {
             unsubscribe();
-            setRuntimeDrawers({ before: [], after: [] });
         };
-    }, [disableRuntimeDrawers, onActiveDrawerChangeStable]);
+    }, [
+        activeDrawerId,
+        activeGlobalDrawersIds,
+        drawers,
+        onActiveDrawerChange,
+        runtimeDrawers,
+        onActiveGlobalDrawersChange,
+    ]);
+    useEffect(() => {
+        const unsubscribe = awsuiPluginsInternal.appLayout.onDrawerClosed(drawerId => {
+            var _a, _b;
+            const localDrawer = (_a = [...runtimeDrawers.localBefore, ...drawers, ...runtimeDrawers.localAfter]) === null || _a === void 0 ? void 0 : _a.find(drawer => drawer.id === drawerId);
+            const globalDrawer = (_b = runtimeDrawers.global) === null || _b === void 0 ? void 0 : _b.find(drawer => drawer.id === drawerId);
+            if (localDrawer && activeDrawerId === drawerId) {
+                onActiveDrawerChange(null);
+            }
+            if (globalDrawer && activeGlobalDrawersIds.includes(drawerId)) {
+                onActiveGlobalDrawersChange(drawerId);
+            }
+        });
+        return () => {
+            unsubscribe();
+        };
+    }, [
+        activeDrawerId,
+        activeGlobalDrawersIds,
+        drawers,
+        onActiveDrawerChange,
+        runtimeDrawers,
+        onActiveGlobalDrawersChange,
+    ]);
     return runtimeDrawers;
 }
 function applyToolsDrawer(toolsProps, runtimeDrawers) {
-    const drawers = [...runtimeDrawers.before, ...runtimeDrawers.after];
+    const drawers = [...runtimeDrawers.localBefore, ...runtimeDrawers.localAfter];
     if (drawers.length === 0 && toolsProps.disableDrawersMerge) {
         return null;
     }
@@ -65,50 +123,97 @@ function applyToolsDrawer(toolsProps, runtimeDrawers) {
     }
     return drawers;
 }
-export function useDrawers({ drawers, activeDrawerId: controlledActiveDrawerId, onDrawerChange, __disableRuntimeDrawers: disableRuntimeDrawers, }, ariaLabels, toolsProps) {
+export const MIN_DRAWER_SIZE = 290;
+export function useDrawers({ drawers, activeDrawerId: controlledActiveDrawerId, onDrawerChange, onGlobalDrawerFocus, onAddNewActiveDrawer, __disableRuntimeDrawers: disableRuntimeDrawers, }, ariaLabels, toolsProps) {
     var _a, _b, _c, _d;
     const [activeDrawerId = null, setActiveDrawerId] = useControllable(controlledActiveDrawerId, onDrawerChange, null, {
         componentName: 'AppLayout',
         controlledProp: 'activeDrawerId',
         changeHandler: 'onChange',
     });
+    const [activeGlobalDrawersIds, setActiveGlobalDrawersIds] = useState([]);
     const [drawerSizes, setDrawerSizes] = useState({});
+    // FIFO queue that keeps track of open drawers, where the first element is the most recently opened drawer
+    const drawersOpenQueue = useRef([]);
     function onActiveDrawerResize({ id, size }) {
         setDrawerSizes(oldSizes => (Object.assign(Object.assign({}, oldSizes), { [id]: size })));
         fireNonCancelableEvent(activeDrawer === null || activeDrawer === void 0 ? void 0 : activeDrawer.onResize, { id, size });
+        const activeGlobalDrawer = runtimeGlobalDrawers.find(drawer => drawer.id === id);
+        fireNonCancelableEvent(activeGlobalDrawer === null || activeGlobalDrawer === void 0 ? void 0 : activeGlobalDrawer.onResize, { id, size });
     }
     function onActiveDrawerChange(newDrawerId) {
         setActiveDrawerId(newDrawerId);
+        if (newDrawerId) {
+            onAddNewActiveDrawer === null || onAddNewActiveDrawer === void 0 ? void 0 : onAddNewActiveDrawer(newDrawerId);
+        }
         if (hasOwnDrawers) {
             fireNonCancelableEvent(onDrawerChange, { activeDrawerId: newDrawerId });
         }
         else if (!toolsProps.toolsHide) {
             toolsProps.onToolsToggle(newDrawerId === TOOLS_DRAWER_ID);
         }
+        if (newDrawerId) {
+            drawersOpenQueue.current = [newDrawerId, ...drawersOpenQueue.current];
+        }
+        if (activeDrawerId) {
+            drawersOpenQueue.current = drawersOpenQueue.current.filter(id => id !== activeDrawerId);
+        }
+    }
+    function onActiveGlobalDrawersChange(drawerId) {
+        if (activeGlobalDrawersIds.includes(drawerId)) {
+            setActiveGlobalDrawersIds(currentState => currentState.filter(id => id !== drawerId));
+            onGlobalDrawerFocus === null || onGlobalDrawerFocus === void 0 ? void 0 : onGlobalDrawerFocus(drawerId, false);
+            drawersOpenQueue.current = drawersOpenQueue.current.filter(id => id !== drawerId);
+        }
+        else if (drawerId) {
+            onAddNewActiveDrawer === null || onAddNewActiveDrawer === void 0 ? void 0 : onAddNewActiveDrawer(drawerId);
+            setActiveGlobalDrawersIds(currentState => [drawerId, ...currentState].slice(0, DRAWERS_LIMIT));
+            onGlobalDrawerFocus === null || onGlobalDrawerFocus === void 0 ? void 0 : onGlobalDrawerFocus(drawerId, true);
+            drawersOpenQueue.current = [drawerId, ...drawersOpenQueue.current];
+        }
     }
     const hasOwnDrawers = !!drawers;
-    const runtimeDrawers = useRuntimeDrawers(disableRuntimeDrawers, activeDrawerId, onActiveDrawerChange);
-    const combinedDrawers = drawers
-        ? [...runtimeDrawers.before, ...drawers, ...runtimeDrawers.after]
+    const runtimeDrawers = useRuntimeDrawers(disableRuntimeDrawers, activeDrawerId, onActiveDrawerChange, activeGlobalDrawersIds, onActiveGlobalDrawersChange, drawers !== null && drawers !== void 0 ? drawers : []);
+    const { localBefore, localAfter, global: runtimeGlobalDrawers } = runtimeDrawers;
+    const combinedLocalDrawers = drawers
+        ? [...localBefore, ...drawers, ...localAfter]
         : applyToolsDrawer(toolsProps, runtimeDrawers);
     // support toolsOpen in runtime-drawers-only mode
     let activeDrawerIdResolved = (toolsProps === null || toolsProps === void 0 ? void 0 : toolsProps.toolsOpen) && !hasOwnDrawers ? TOOLS_DRAWER_ID : activeDrawerId;
-    const activeDrawer = combinedDrawers === null || combinedDrawers === void 0 ? void 0 : combinedDrawers.find(drawer => drawer.id === activeDrawerIdResolved);
+    const activeDrawer = combinedLocalDrawers === null || combinedLocalDrawers === void 0 ? void 0 : combinedLocalDrawers.find(drawer => drawer.id === activeDrawerIdResolved);
     // ensure that id is only defined when the drawer exists
     activeDrawerIdResolved = (_a = activeDrawer === null || activeDrawer === void 0 ? void 0 : activeDrawer.id) !== null && _a !== void 0 ? _a : null;
+    const activeGlobalDrawers = runtimeGlobalDrawers.filter(drawer => activeGlobalDrawersIds.includes(drawer.id));
     const activeDrawerSize = activeDrawerIdResolved
         ? (_c = (_b = drawerSizes[activeDrawerIdResolved]) !== null && _b !== void 0 ? _b : activeDrawer === null || activeDrawer === void 0 ? void 0 : activeDrawer.defaultSize) !== null && _c !== void 0 ? _c : toolsProps.toolsWidth
         : toolsProps.toolsWidth;
-    const minDrawerSize = Math.min((_d = activeDrawer === null || activeDrawer === void 0 ? void 0 : activeDrawer.defaultSize) !== null && _d !== void 0 ? _d : 290, 290);
+    const activeGlobalDrawersSizes = activeGlobalDrawersIds.reduce((acc, currentGlobalDrawerId) => {
+        var _a, _b;
+        const currentGlobalDrawer = runtimeGlobalDrawers.find(drawer => drawer.id === currentGlobalDrawerId);
+        return Object.assign(Object.assign({}, acc), { [currentGlobalDrawerId]: (_b = (_a = drawerSizes[currentGlobalDrawerId]) !== null && _a !== void 0 ? _a : currentGlobalDrawer === null || currentGlobalDrawer === void 0 ? void 0 : currentGlobalDrawer.defaultSize) !== null && _b !== void 0 ? _b : MIN_DRAWER_SIZE });
+    }, {});
+    const minGlobalDrawersSizes = runtimeGlobalDrawers.reduce((acc, globalDrawer) => {
+        var _a;
+        return Object.assign(Object.assign({}, acc), { [globalDrawer.id]: Math.min((_a = globalDrawer.defaultSize) !== null && _a !== void 0 ? _a : MIN_DRAWER_SIZE, MIN_DRAWER_SIZE) });
+    }, {});
+    const minDrawerSize = Math.min((toolsProps === null || toolsProps === void 0 ? void 0 : toolsProps.toolsOpen) ? toolsProps.toolsWidth : (_d = activeDrawer === null || activeDrawer === void 0 ? void 0 : activeDrawer.defaultSize) !== null && _d !== void 0 ? _d : MIN_DRAWER_SIZE, MIN_DRAWER_SIZE);
     return {
         ariaLabelsWithDrawers: ariaLabels,
-        drawers: combinedDrawers || undefined,
+        drawers: combinedLocalDrawers || undefined,
         activeDrawer,
         activeDrawerId: activeDrawerIdResolved,
+        globalDrawers: runtimeGlobalDrawers,
+        activeGlobalDrawers: activeGlobalDrawers,
+        activeGlobalDrawersIds,
+        activeGlobalDrawersSizes,
         activeDrawerSize,
         minDrawerSize,
+        minGlobalDrawersSizes,
+        drawerSizes,
+        drawersOpenQueue: drawersOpenQueue.current,
         onActiveDrawerChange,
         onActiveDrawerResize,
+        onActiveGlobalDrawersChange,
     };
 }
 //# sourceMappingURL=use-drawers.js.map

package/lib/internal/template/app-layout/utils/use-drawers.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-drawers.js","sourceRoot":"","sources":["../../../../src/app-layout/utils/use-drawers.ts"],"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, { useEffect, useRef, useState } from 'react';\n\nimport { useStableCallback } from '@cloudscape-design/component-toolkit/internal';\n\nimport { fireNonCancelableEvent } from '../../internal/events';\nimport { useControllable } from '../../internal/hooks/use-controllable';\nimport { awsuiPluginsInternal } from '../../internal/plugins/api';\nimport { sortByPriority } from '../../internal/plugins/helpers/utils';\nimport { AppLayoutProps } from '../interfaces';\nimport { convertRuntimeDrawers, DrawersLayout } from '../runtime-api';\nimport { togglesConfig } from '../toggles';\n\nexport const TOOLS_DRAWER_ID = 'awsui-internal-tools';\n\ninterface ToolsProps {\n  toolsHide: boolean | undefined;\n  toolsOpen: boolean | undefined;\n  toolsWidth: number;\n  tools: React.ReactNode | undefined;\n  onToolsToggle: (newOpen: boolean) => void;\n  ariaLabels: AppLayoutProps.Labels | undefined;\n  disableDrawersMerge?: boolean;\n}\n\nfunction getToolsDrawerItem(props: ToolsProps): AppLayoutProps.Drawer | null {\n  if (props.toolsHide) {\n    return null;\n  }\n  const { iconName, getLabels } = togglesConfig.tools;\n  const { mainLabel, closeLabel, openLabel } = getLabels(props.ariaLabels);\n  return {\n    id: TOOLS_DRAWER_ID,\n    content: props.tools,\n    resizable: false,\n    ariaLabels: {\n      triggerButton: openLabel,\n      closeButton: closeLabel,\n      drawerName: mainLabel ?? '',\n    },\n    trigger: {\n      iconName: iconName,\n    },\n  };\n}\n\nfunction useRuntimeDrawers(\n  disableRuntimeDrawers: boolean | undefined,\n  activeDrawerId: string | null,\n  onActiveDrawerChange: (newDrawerId: string | null) => void\n) {\n  const [runtimeDrawers, setRuntimeDrawers] = useState<DrawersLayout>({ before: [], after: [] });\n  const onActiveDrawerChangeStable = useStableCallback(onActiveDrawerChange);\n\n  const drawerWasOpenRef = useRef(false);\n  drawerWasOpenRef.current = drawerWasOpenRef.current || !!activeDrawerId;\n\n  useEffect(() => {\n    if (disableRuntimeDrawers) {\n      return;\n    }\n    const unsubscribe = awsuiPluginsInternal.appLayout.onDrawersRegistered(drawers => {\n      setRuntimeDrawers(convertRuntimeDrawers(drawers));\n      if (!drawerWasOpenRef.current) {\n        const defaultActiveDrawer = sortByPriority(drawers).find(drawer => drawer.defaultActive);\n        if (defaultActiveDrawer) {\n          onActiveDrawerChangeStable(defaultActiveDrawer.id);\n        }\n      }\n    });\n    return () => {\n      unsubscribe();\n      setRuntimeDrawers({ before: [], after: [] });\n    };\n  }, [disableRuntimeDrawers, onActiveDrawerChangeStable]);\n\n  return runtimeDrawers;\n}\n\nfunction applyToolsDrawer(toolsProps: ToolsProps, runtimeDrawers: DrawersLayout) {\n  const drawers = [...runtimeDrawers.before, ...runtimeDrawers.after];\n  if (drawers.length === 0 && toolsProps.disableDrawersMerge) {\n    return null;\n  }\n  const toolsItem = getToolsDrawerItem(toolsProps);\n  if (toolsItem) {\n    drawers.unshift(toolsItem);\n  }\n\n  return drawers;\n}\n\ntype UseDrawersProps = Pick<AppLayoutProps, 'drawers' | 'activeDrawerId' | 'onDrawerChange'> & {\n  __disableRuntimeDrawers?: boolean;\n};\n\nexport function useDrawers(\n  {\n    drawers,\n    activeDrawerId: controlledActiveDrawerId,\n    onDrawerChange,\n    __disableRuntimeDrawers: disableRuntimeDrawers,\n  }: UseDrawersProps,\n  ariaLabels: AppLayoutProps['ariaLabels'],\n  toolsProps: ToolsProps\n) {\n  const [activeDrawerId = null, setActiveDrawerId] = useControllable(controlledActiveDrawerId, onDrawerChange, null, {\n    componentName: 'AppLayout',\n    controlledProp: 'activeDrawerId',\n    changeHandler: 'onChange',\n  });\n  const [drawerSizes, setDrawerSizes] = useState<Record<string, number>>({});\n\n  function onActiveDrawerResize({ id, size }: { id: string; size: number }) {\n    setDrawerSizes(oldSizes => ({ ...oldSizes, [id]: size }));\n    fireNonCancelableEvent(activeDrawer?.onResize, { id, size });\n  }\n\n  function onActiveDrawerChange(newDrawerId: string | null) {\n    setActiveDrawerId(newDrawerId);\n    if (hasOwnDrawers) {\n      fireNonCancelableEvent(onDrawerChange, { activeDrawerId: newDrawerId });\n    } else if (!toolsProps.toolsHide) {\n      toolsProps.onToolsToggle(newDrawerId === TOOLS_DRAWER_ID);\n    }\n  }\n\n  const hasOwnDrawers = !!drawers;\n  const runtimeDrawers = useRuntimeDrawers(disableRuntimeDrawers, activeDrawerId, onActiveDrawerChange);\n  const combinedDrawers = drawers\n    ? [...runtimeDrawers.before, ...drawers, ...runtimeDrawers.after]\n    : applyToolsDrawer(toolsProps, runtimeDrawers);\n  // support toolsOpen in runtime-drawers-only mode\n  let activeDrawerIdResolved = toolsProps?.toolsOpen && !hasOwnDrawers ? TOOLS_DRAWER_ID : activeDrawerId;\n  const activeDrawer = combinedDrawers?.find(drawer => drawer.id === activeDrawerIdResolved);\n  // ensure that id is only defined when the drawer exists\n  activeDrawerIdResolved = activeDrawer?.id ?? null;\n\n  const activeDrawerSize = activeDrawerIdResolved\n    ? drawerSizes[activeDrawerIdResolved] ?? activeDrawer?.defaultSize ?? toolsProps.toolsWidth\n    : toolsProps.toolsWidth;\n  const minDrawerSize = Math.min(activeDrawer?.defaultSize ?? 290, 290);\n\n  return {\n    ariaLabelsWithDrawers: ariaLabels,\n    drawers: combinedDrawers || undefined,\n    activeDrawer,\n    activeDrawerId: activeDrawerIdResolved,\n    activeDrawerSize,\n    minDrawerSize,\n    onActiveDrawerChange,\n    onActiveDrawerResize,\n  };\n}\n"]}
+{"version":3,"file":"use-drawers.js","sourceRoot":"","sources":["../../../../src/app-layout/utils/use-drawers.ts"],"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, { useEffect, useRef, useState } from 'react';\n\nimport { useStableCallback } from '@cloudscape-design/component-toolkit/internal';\n\nimport { fireNonCancelableEvent } from '../../internal/events';\nimport { useControllable } from '../../internal/hooks/use-controllable';\nimport { awsuiPluginsInternal } from '../../internal/plugins/api';\nimport { sortByPriority } from '../../internal/plugins/helpers/utils';\nimport { AppLayoutProps } from '../interfaces';\nimport { convertRuntimeDrawers, DrawersLayout } from '../runtime-api';\nimport { togglesConfig } from '../toggles';\n\nexport const TOOLS_DRAWER_ID = 'awsui-internal-tools';\n\ninterface ToolsProps {\n  toolsHide: boolean | undefined;\n  toolsOpen: boolean | undefined;\n  toolsWidth: number;\n  tools: React.ReactNode | undefined;\n  onToolsToggle: (newOpen: boolean) => void;\n  ariaLabels: AppLayoutProps.Labels | undefined;\n  disableDrawersMerge?: boolean;\n}\n\nfunction getToolsDrawerItem(props: ToolsProps): AppLayoutProps.Drawer | null {\n  if (props.toolsHide) {\n    return null;\n  }\n  const { iconName, getLabels } = togglesConfig.tools;\n  const { mainLabel, closeLabel, openLabel } = getLabels(props.ariaLabels);\n  return {\n    id: TOOLS_DRAWER_ID,\n    content: props.tools,\n    resizable: false,\n    ariaLabels: {\n      triggerButton: openLabel,\n      closeButton: closeLabel,\n      drawerName: mainLabel ?? '',\n    },\n    trigger: {\n      iconName: iconName,\n    },\n  };\n}\n\nconst DRAWERS_LIMIT = 2;\n\nfunction useRuntimeDrawers(\n  disableRuntimeDrawers: boolean | undefined,\n  activeDrawerId: string | null,\n  onActiveDrawerChange: (newDrawerId: string | null) => void,\n  activeGlobalDrawersIds: Array<string>,\n  onActiveGlobalDrawersChange: (newDrawerId: string) => void,\n  drawers: AppLayoutProps.Drawer[]\n) {\n  const [runtimeDrawers, setRuntimeDrawers] = useState<DrawersLayout>({\n    localBefore: [],\n    localAfter: [],\n    global: [],\n  });\n  const onLocalDrawerChangeStable = useStableCallback(onActiveDrawerChange);\n  const onGlobalDrawersChangeStable = useStableCallback(onActiveGlobalDrawersChange);\n\n  const drawersWereOpenRef = useRef(false);\n  drawersWereOpenRef.current = drawersWereOpenRef.current || !!activeDrawerId || !!activeGlobalDrawersIds.length;\n\n  useEffect(() => {\n    if (disableRuntimeDrawers) {\n      return;\n    }\n    const unsubscribe = awsuiPluginsInternal.appLayout.onDrawersRegistered(drawers => {\n      const localDrawers = drawers.filter(drawer => drawer.type !== 'global');\n      const globalDrawers = drawers.filter(drawer => drawer.type === 'global');\n      setRuntimeDrawers(convertRuntimeDrawers(localDrawers, globalDrawers));\n      if (!drawersWereOpenRef.current) {\n        const defaultActiveLocalDrawer = sortByPriority(localDrawers).find(drawer => drawer.defaultActive);\n        if (defaultActiveLocalDrawer) {\n          onLocalDrawerChangeStable(defaultActiveLocalDrawer.id);\n        }\n\n        const defaultActiveGlobalDrawers = sortByPriority(globalDrawers).filter(drawer => drawer.defaultActive);\n        defaultActiveGlobalDrawers.forEach(drawer => {\n          onGlobalDrawersChangeStable(drawer.id);\n        });\n      }\n    });\n    return () => {\n      unsubscribe();\n      setRuntimeDrawers({ localBefore: [], localAfter: [], global: [] });\n    };\n  }, [disableRuntimeDrawers, onGlobalDrawersChangeStable, onLocalDrawerChangeStable]);\n\n  useEffect(() => {\n    const unsubscribe = awsuiPluginsInternal.appLayout.onDrawerOpened(drawerId => {\n      const localDrawer = [...runtimeDrawers.localBefore, ...drawers, ...runtimeDrawers.localAfter]?.find(\n        drawer => drawer.id === drawerId\n      );\n      const globalDrawer = runtimeDrawers.global?.find(drawer => drawer.id === drawerId);\n      if (localDrawer && activeDrawerId !== drawerId) {\n        onActiveDrawerChange(drawerId);\n      }\n      if (globalDrawer && !activeGlobalDrawersIds.includes(drawerId)) {\n        onActiveGlobalDrawersChange(drawerId);\n      }\n    });\n\n    return () => {\n      unsubscribe();\n    };\n  }, [\n    activeDrawerId,\n    activeGlobalDrawersIds,\n    drawers,\n    onActiveDrawerChange,\n    runtimeDrawers,\n    onActiveGlobalDrawersChange,\n  ]);\n\n  useEffect(() => {\n    const unsubscribe = awsuiPluginsInternal.appLayout.onDrawerClosed(drawerId => {\n      const localDrawer = [...runtimeDrawers.localBefore, ...drawers, ...runtimeDrawers.localAfter]?.find(\n        drawer => drawer.id === drawerId\n      );\n      const globalDrawer = runtimeDrawers.global?.find(drawer => drawer.id === drawerId);\n      if (localDrawer && activeDrawerId === drawerId) {\n        onActiveDrawerChange(null);\n      }\n      if (globalDrawer && activeGlobalDrawersIds.includes(drawerId)) {\n        onActiveGlobalDrawersChange(drawerId);\n      }\n    });\n\n    return () => {\n      unsubscribe();\n    };\n  }, [\n    activeDrawerId,\n    activeGlobalDrawersIds,\n    drawers,\n    onActiveDrawerChange,\n    runtimeDrawers,\n    onActiveGlobalDrawersChange,\n  ]);\n\n  return runtimeDrawers;\n}\n\nfunction applyToolsDrawer(toolsProps: ToolsProps, runtimeDrawers: DrawersLayout) {\n  const drawers = [...runtimeDrawers.localBefore, ...runtimeDrawers.localAfter];\n  if (drawers.length === 0 && toolsProps.disableDrawersMerge) {\n    return null;\n  }\n  const toolsItem = getToolsDrawerItem(toolsProps);\n  if (toolsItem) {\n    drawers.unshift(toolsItem);\n  }\n\n  return drawers;\n}\n\nexport const MIN_DRAWER_SIZE = 290;\n\ntype UseDrawersProps = Pick<AppLayoutProps, 'drawers' | 'activeDrawerId' | 'onDrawerChange'> & {\n  __disableRuntimeDrawers?: boolean;\n  onGlobalDrawerFocus?: (drawerId: string, open: boolean) => void;\n  onAddNewActiveDrawer?: (drawerId: string) => void;\n};\n\nexport function useDrawers(\n  {\n    drawers,\n    activeDrawerId: controlledActiveDrawerId,\n    onDrawerChange,\n    onGlobalDrawerFocus,\n    onAddNewActiveDrawer,\n    __disableRuntimeDrawers: disableRuntimeDrawers,\n  }: UseDrawersProps,\n  ariaLabels: AppLayoutProps['ariaLabels'],\n  toolsProps: ToolsProps\n) {\n  const [activeDrawerId = null, setActiveDrawerId] = useControllable(controlledActiveDrawerId, onDrawerChange, null, {\n    componentName: 'AppLayout',\n    controlledProp: 'activeDrawerId',\n    changeHandler: 'onChange',\n  });\n  const [activeGlobalDrawersIds, setActiveGlobalDrawersIds] = useState<Array<string>>([]);\n  const [drawerSizes, setDrawerSizes] = useState<Record<string, number>>({});\n  // FIFO queue that keeps track of open drawers, where the first element is the most recently opened drawer\n  const drawersOpenQueue = useRef<Array<string>>([]);\n\n  function onActiveDrawerResize({ id, size }: { id: string; size: number }) {\n    setDrawerSizes(oldSizes => ({ ...oldSizes, [id]: size }));\n    fireNonCancelableEvent(activeDrawer?.onResize, { id, size });\n    const activeGlobalDrawer = runtimeGlobalDrawers.find(drawer => drawer.id === id);\n    fireNonCancelableEvent(activeGlobalDrawer?.onResize, { id, size });\n  }\n\n  function onActiveDrawerChange(newDrawerId: string | null) {\n    setActiveDrawerId(newDrawerId);\n    if (newDrawerId) {\n      onAddNewActiveDrawer?.(newDrawerId);\n    }\n    if (hasOwnDrawers) {\n      fireNonCancelableEvent(onDrawerChange, { activeDrawerId: newDrawerId });\n    } else if (!toolsProps.toolsHide) {\n      toolsProps.onToolsToggle(newDrawerId === TOOLS_DRAWER_ID);\n    }\n\n    if (newDrawerId) {\n      drawersOpenQueue.current = [newDrawerId, ...drawersOpenQueue.current];\n    }\n\n    if (activeDrawerId) {\n      drawersOpenQueue.current = drawersOpenQueue.current.filter(id => id !== activeDrawerId);\n    }\n  }\n\n  function onActiveGlobalDrawersChange(drawerId: string) {\n    if (activeGlobalDrawersIds.includes(drawerId)) {\n      setActiveGlobalDrawersIds(currentState => currentState.filter(id => id !== drawerId));\n      onGlobalDrawerFocus?.(drawerId, false);\n      drawersOpenQueue.current = drawersOpenQueue.current.filter(id => id !== drawerId);\n    } else if (drawerId) {\n      onAddNewActiveDrawer?.(drawerId);\n      setActiveGlobalDrawersIds(currentState => [drawerId, ...currentState].slice(0, DRAWERS_LIMIT!));\n      onGlobalDrawerFocus?.(drawerId, true);\n      drawersOpenQueue.current = [drawerId, ...drawersOpenQueue.current];\n    }\n  }\n\n  const hasOwnDrawers = !!drawers;\n  const runtimeDrawers = useRuntimeDrawers(\n    disableRuntimeDrawers,\n    activeDrawerId,\n    onActiveDrawerChange,\n    activeGlobalDrawersIds,\n    onActiveGlobalDrawersChange,\n    drawers ?? []\n  );\n  const { localBefore, localAfter, global: runtimeGlobalDrawers } = runtimeDrawers;\n  const combinedLocalDrawers = drawers\n    ? [...localBefore, ...drawers, ...localAfter]\n    : applyToolsDrawer(toolsProps, runtimeDrawers);\n  // support toolsOpen in runtime-drawers-only mode\n  let activeDrawerIdResolved = toolsProps?.toolsOpen && !hasOwnDrawers ? TOOLS_DRAWER_ID : activeDrawerId;\n  const activeDrawer = combinedLocalDrawers?.find(drawer => drawer.id === activeDrawerIdResolved);\n  // ensure that id is only defined when the drawer exists\n  activeDrawerIdResolved = activeDrawer?.id ?? null;\n  const activeGlobalDrawers = runtimeGlobalDrawers.filter(drawer => activeGlobalDrawersIds.includes(drawer.id));\n\n  const activeDrawerSize = activeDrawerIdResolved\n    ? drawerSizes[activeDrawerIdResolved] ?? activeDrawer?.defaultSize ?? toolsProps.toolsWidth\n    : toolsProps.toolsWidth;\n  const activeGlobalDrawersSizes: Record<string, number> = activeGlobalDrawersIds.reduce(\n    (acc, currentGlobalDrawerId) => {\n      const currentGlobalDrawer = runtimeGlobalDrawers.find(drawer => drawer.id === currentGlobalDrawerId);\n      return {\n        ...acc,\n        [currentGlobalDrawerId]:\n          drawerSizes[currentGlobalDrawerId] ?? currentGlobalDrawer?.defaultSize ?? MIN_DRAWER_SIZE,\n      };\n    },\n    {}\n  );\n  const minGlobalDrawersSizes: Record<string, number> = runtimeGlobalDrawers.reduce((acc, globalDrawer) => {\n    return {\n      ...acc,\n      [globalDrawer.id]: Math.min(globalDrawer.defaultSize ?? MIN_DRAWER_SIZE, MIN_DRAWER_SIZE),\n    };\n  }, {});\n  const minDrawerSize = Math.min(\n    toolsProps?.toolsOpen ? toolsProps.toolsWidth : activeDrawer?.defaultSize ?? MIN_DRAWER_SIZE,\n    MIN_DRAWER_SIZE\n  );\n\n  return {\n    ariaLabelsWithDrawers: ariaLabels,\n    drawers: combinedLocalDrawers || undefined,\n    activeDrawer,\n    activeDrawerId: activeDrawerIdResolved,\n    globalDrawers: runtimeGlobalDrawers,\n    activeGlobalDrawers: activeGlobalDrawers,\n    activeGlobalDrawersIds,\n    activeGlobalDrawersSizes,\n    activeDrawerSize,\n    minDrawerSize,\n    minGlobalDrawersSizes,\n    drawerSizes,\n    drawersOpenQueue: drawersOpenQueue.current,\n    onActiveDrawerChange,\n    onActiveDrawerResize,\n    onActiveGlobalDrawersChange,\n  };\n}\n"]}

package/lib/internal/template/app-layout/utils/use-focus-control.d.ts

@@ -12,5 +12,15 @@ export interface FocusControlState {
     setFocus: (force?: boolean) => void;
     loseFocus: () => void;
 }
+export interface FocusControlMultipleStates {
+    refs: Record<string, FocusControlRefs>;
+    setFocus: (params?: {
+        force?: boolean;
+        drawerId?: string;
+        open?: boolean;
+    }) => void;
+    loseFocus: () => void;
+}
+export declare function useMultipleFocusControl(restoreFocus: boolean, activeDrawersIds: Array<string>): FocusControlMultipleStates;
 export declare function useFocusControl(isOpen: boolean, restoreFocus?: boolean, activeDrawerId?: string | null): FocusControlState;
 //# sourceMappingURL=use-focus-control.d.ts.map

package/lib/internal/template/app-layout/utils/use-focus-control.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-focus-control.d.ts","sourceRoot":"","sources":["../../../../src/app-layout/utils/use-focus-control.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAkC,MAAM,OAAO,CAAC;AAElE,MAAM,WAAW,SAAS;IACxB,KAAK,IAAI,IAAI,CAAC;CACf;AAED,MAAM,WAAW,gBAAgB;IAC/B,MAAM,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,KAAK,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC5B,MAAM,EAAE,SAAS,CAAC,cAAc,CAAC,CAAC;CACnC;AAED,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,gBAAgB,CAAC;IACvB,QAAQ,EAAE,CAAC,KAAK,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IACpC,SAAS,EAAE,MAAM,IAAI,CAAC;CACvB;AAED,wBAAgB,eAAe,CAC7B,MAAM,EAAE,OAAO,EACf,YAAY,UAAQ,EACpB,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,GAC7B,iBAAiB,CAmDnB"}
+{"version":3,"file":"use-focus-control.d.ts","sourceRoot":"","sources":["../../../../src/app-layout/utils/use-focus-control.ts"],"names":[],"mappings":"AAEA,OAAO,EAAa,SAAS,EAAkC,MAAM,OAAO,CAAC;AAE7E,MAAM,WAAW,SAAS;IACxB,KAAK,IAAI,IAAI,CAAC;CACf;AAED,MAAM,WAAW,gBAAgB;IAC/B,MAAM,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,KAAK,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC5B,MAAM,EAAE,SAAS,CAAC,cAAc,CAAC,CAAC;CACnC;AAED,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,gBAAgB,CAAC;IACvB,QAAQ,EAAE,CAAC,KAAK,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IACpC,SAAS,EAAE,MAAM,IAAI,CAAC;CACvB;AAED,MAAM,WAAW,0BAA0B;IACzC,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,gBAAgB,CAAC,CAAC;IACvC,QAAQ,EAAE,CAAC,MAAM,CAAC,EAAE;QAAE,KAAK,CAAC,EAAE,OAAO,CAAC;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,OAAO,CAAA;KAAE,KAAK,IAAI,CAAC;IACpF,SAAS,EAAE,MAAM,IAAI,CAAC;CACvB;AAED,wBAAgB,uBAAuB,CACrC,YAAY,EAAE,OAAO,EACrB,gBAAgB,EAAE,KAAK,CAAC,MAAM,CAAC,GAC9B,0BAA0B,CAgE5B;AAED,wBAAgB,eAAe,CAC7B,MAAM,EAAE,OAAO,EACf,YAAY,UAAQ,EACpB,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,GAC7B,iBAAiB,CAmDnB"}

package/lib/internal/template/app-layout/utils/use-focus-control.js

@@ -1,6 +1,65 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import { useCallback, useEffect, useRef } from 'react';
+import { createRef, useCallback, useEffect, useRef } from 'react';
+export function useMultipleFocusControl(restoreFocus, activeDrawersIds) {
+    const refs = useRef({});
+    activeDrawersIds.forEach(drawerId => {
+        if (!refs.current[drawerId]) {
+            refs.current[drawerId] = {
+                toggle: createRef(),
+                close: createRef(),
+                slider: createRef(),
+            };
+        }
+    });
+    const doFocus = useCallback((drawerId, open = true) => {
+        var _a, _b, _c, _d, _e, _f;
+        if (!shouldFocus.current) {
+            return;
+        }
+        const ref = refs.current[drawerId];
+        if (open) {
+            previousFocusedElement.current =
+                document.activeElement !== document.body ? document.activeElement : undefined;
+            if ((_a = ref === null || ref === void 0 ? void 0 : ref.slider) === null || _a === void 0 ? void 0 : _a.current) {
+                (_b = ref.slider.current) === null || _b === void 0 ? void 0 : _b.focus();
+            }
+            else {
+                (_d = (_c = ref === null || ref === void 0 ? void 0 : ref.close) === null || _c === void 0 ? void 0 : _c.current) === null || _d === void 0 ? void 0 : _d.focus();
+            }
+        }
+        else {
+            if (restoreFocus && previousFocusedElement.current && document.contains(previousFocusedElement.current)) {
+                previousFocusedElement.current.focus();
+                previousFocusedElement.current = undefined;
+            }
+            else {
+                (_f = (_e = ref === null || ref === void 0 ? void 0 : ref.toggle) === null || _e === void 0 ? void 0 : _e.current) === null || _f === void 0 ? void 0 : _f.focus();
+            }
+        }
+        shouldFocus.current = false;
+    }, [refs, restoreFocus]);
+    const setFocus = (params) => {
+        const { force = false, drawerId = null, open = true } = params || {};
+        shouldFocus.current = true;
+        if (force && (!drawerId || activeDrawersIds.includes(drawerId))) {
+            doFocus(drawerId, open);
+        }
+    };
+    const loseFocus = useCallback(() => {
+        previousFocusedElement.current = undefined;
+    }, []);
+    const previousFocusedElement = useRef();
+    const shouldFocus = useRef(false);
+    useEffect(() => {
+        doFocus(activeDrawersIds[0]);
+    }, [activeDrawersIds, doFocus]);
+    return {
+        refs: refs.current,
+        setFocus,
+        loseFocus,
+    };
+}
 export function useFocusControl(isOpen, restoreFocus = false, activeDrawerId) {
     const refs = {
         toggle: useRef(null),

package/lib/internal/template/app-layout/utils/use-focus-control.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-focus-control.js","sourceRoot":"","sources":["../../../../src/app-layout/utils/use-focus-control.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,EAAa,WAAW,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAkBlE,MAAM,UAAU,eAAe,CAC7B,MAAe,EACf,YAAY,GAAG,KAAK,EACpB,cAA8B;IAE9B,MAAM,IAAI,GAAG;QACX,MAAM,EAAE,MAAM,CAAY,IAAI,CAAC;QAC/B,KAAK,EAAE,MAAM,CAAY,IAAI,CAAC;QAC9B,MAAM,EAAE,MAAM,CAAiB,IAAI,CAAC;KACrC,CAAC;IACF,MAAM,sBAAsB,GAAG,MAAM,EAAe,CAAC;IACrD,MAAM,WAAW,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IAElC,MAAM,OAAO,GAAG,GAAG,EAAE;;QACnB,IAAI,CAAC,WAAW,CAAC,OAAO,EAAE;YACxB,OAAO;SACR;QACD,IAAI,MAAM,EAAE;YACV,sBAAsB,CAAC,OAAO;gBAC5B,QAAQ,CAAC,aAAa,KAAK,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAE,QAAQ,CAAC,aAA6B,CAAC,CAAC,CAAC,SAAS,CAAC;YACjG,IAAI,IAAI,CAAC,MAAM,CAAC,OAAO,EAAE;gBACvB,MAAA,IAAI,CAAC,MAAM,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAC;aAC9B;iBAAM;gBACL,MAAA,IAAI,CAAC,KAAK,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAC;aAC7B;SACF;aAAM;YACL,IAAI,YAAY,IAAI,sBAAsB,CAAC,OAAO,IAAI,QAAQ,CAAC,QAAQ,CAAC,sBAAsB,CAAC,OAAO,CAAC,EAAE;gBACvG,sBAAsB,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;gBACvC,sBAAsB,CAAC,OAAO,GAAG,SAAS,CAAC;aAC5C;iBAAM;gBACL,MAAA,IAAI,CAAC,MAAM,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAC;aAC9B;SACF;QACD,WAAW,CAAC,OAAO,GAAG,KAAK,CAAC;IAC9B,CAAC,CAAC;IAEF,MAAM,QAAQ,GAAG,CAAC,KAAe,EAAE,EAAE;QACnC,WAAW,CAAC,OAAO,GAAG,IAAI,CAAC;QAC3B,IAAI,KAAK,IAAI,MAAM,EAAE;YACnB,OAAO,EAAE,CAAC;SACX;IACH,CAAC,CAAC;IAEF,uDAAuD;IACvD,SAAS,CAAC,OAAO,EAAE,CAAC,MAAM,EAAE,cAAc,CAAC,CAAC,CAAC;IAE7C,MAAM,SAAS,GAAG,WAAW,CAAC,GAAG,EAAE;QACjC,sBAAsB,CAAC,OAAO,GAAG,SAAS,CAAC;IAC7C,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO;QACL,IAAI;QACJ,QAAQ;QACR,SAAS;KACV,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { RefObject, useCallback, useEffect, useRef } from 'react';\n\nexport interface Focusable {\n  focus(): void;\n}\n\nexport interface FocusControlRefs {\n  toggle: RefObject<Focusable>;\n  close: RefObject<Focusable>;\n  slider: RefObject<HTMLDivElement>;\n}\n\nexport interface FocusControlState {\n  refs: FocusControlRefs;\n  setFocus: (force?: boolean) => void;\n  loseFocus: () => void;\n}\n\nexport function useFocusControl(\n  isOpen: boolean,\n  restoreFocus = false,\n  activeDrawerId?: string | null\n): FocusControlState {\n  const refs = {\n    toggle: useRef<Focusable>(null),\n    close: useRef<Focusable>(null),\n    slider: useRef<HTMLDivElement>(null),\n  };\n  const previousFocusedElement = useRef<HTMLElement>();\n  const shouldFocus = useRef(false);\n\n  const doFocus = () => {\n    if (!shouldFocus.current) {\n      return;\n    }\n    if (isOpen) {\n      previousFocusedElement.current =\n        document.activeElement !== document.body ? (document.activeElement as HTMLElement) : undefined;\n      if (refs.slider.current) {\n        refs.slider.current?.focus();\n      } else {\n        refs.close.current?.focus();\n      }\n    } else {\n      if (restoreFocus && previousFocusedElement.current && document.contains(previousFocusedElement.current)) {\n        previousFocusedElement.current.focus();\n        previousFocusedElement.current = undefined;\n      } else {\n        refs.toggle.current?.focus();\n      }\n    }\n    shouldFocus.current = false;\n  };\n\n  const setFocus = (force?: boolean) => {\n    shouldFocus.current = true;\n    if (force && isOpen) {\n      doFocus();\n    }\n  };\n\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  useEffect(doFocus, [isOpen, activeDrawerId]);\n\n  const loseFocus = useCallback(() => {\n    previousFocusedElement.current = undefined;\n  }, []);\n\n  return {\n    refs,\n    setFocus,\n    loseFocus,\n  };\n}\n"]}
+{"version":3,"file":"use-focus-control.js","sourceRoot":"","sources":["../../../../src/app-layout/utils/use-focus-control.ts"],"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 { createRef, RefObject, useCallback, useEffect, useRef } from 'react';\n\nexport interface Focusable {\n  focus(): void;\n}\n\nexport interface FocusControlRefs {\n  toggle: RefObject<Focusable>;\n  close: RefObject<Focusable>;\n  slider: RefObject<HTMLDivElement>;\n}\n\nexport interface FocusControlState {\n  refs: FocusControlRefs;\n  setFocus: (force?: boolean) => void;\n  loseFocus: () => void;\n}\n\nexport interface FocusControlMultipleStates {\n  refs: Record<string, FocusControlRefs>;\n  setFocus: (params?: { force?: boolean; drawerId?: string; open?: boolean }) => void;\n  loseFocus: () => void;\n}\n\nexport function useMultipleFocusControl(\n  restoreFocus: boolean,\n  activeDrawersIds: Array<string>\n): FocusControlMultipleStates {\n  const refs = useRef<Record<string, FocusControlRefs>>({});\n\n  activeDrawersIds.forEach(drawerId => {\n    if (!refs.current[drawerId]) {\n      refs.current[drawerId] = {\n        toggle: createRef<Focusable>(),\n        close: createRef<Focusable>(),\n        slider: createRef<HTMLDivElement>(),\n      };\n    }\n  });\n\n  const doFocus = useCallback(\n    (drawerId: string, open = true) => {\n      if (!shouldFocus.current) {\n        return;\n      }\n      const ref = refs.current[drawerId];\n      if (open) {\n        previousFocusedElement.current =\n          document.activeElement !== document.body ? (document.activeElement as HTMLElement) : undefined;\n        if (ref?.slider?.current) {\n          ref.slider.current?.focus();\n        } else {\n          ref?.close?.current?.focus();\n        }\n      } else {\n        if (restoreFocus && previousFocusedElement.current && document.contains(previousFocusedElement.current)) {\n          previousFocusedElement.current.focus();\n          previousFocusedElement.current = undefined;\n        } else {\n          ref?.toggle?.current?.focus();\n        }\n      }\n      shouldFocus.current = false;\n    },\n    [refs, restoreFocus]\n  );\n\n  const setFocus = (params?: { force?: boolean; drawerId?: string; open?: boolean }) => {\n    const { force = false, drawerId = null, open = true } = params || {};\n    shouldFocus.current = true;\n    if (force && (!drawerId || activeDrawersIds.includes(drawerId))) {\n      doFocus(drawerId!, open);\n    }\n  };\n\n  const loseFocus = useCallback(() => {\n    previousFocusedElement.current = undefined;\n  }, []);\n\n  const previousFocusedElement = useRef<HTMLElement>();\n  const shouldFocus = useRef(false);\n\n  useEffect(() => {\n    doFocus(activeDrawersIds[0]);\n  }, [activeDrawersIds, doFocus]);\n\n  return {\n    refs: refs.current,\n    setFocus,\n    loseFocus,\n  };\n}\n\nexport function useFocusControl(\n  isOpen: boolean,\n  restoreFocus = false,\n  activeDrawerId?: string | null\n): FocusControlState {\n  const refs = {\n    toggle: useRef<Focusable>(null),\n    close: useRef<Focusable>(null),\n    slider: useRef<HTMLDivElement>(null),\n  };\n  const previousFocusedElement = useRef<HTMLElement>();\n  const shouldFocus = useRef(false);\n\n  const doFocus = () => {\n    if (!shouldFocus.current) {\n      return;\n    }\n    if (isOpen) {\n      previousFocusedElement.current =\n        document.activeElement !== document.body ? (document.activeElement as HTMLElement) : undefined;\n      if (refs.slider.current) {\n        refs.slider.current?.focus();\n      } else {\n        refs.close.current?.focus();\n      }\n    } else {\n      if (restoreFocus && previousFocusedElement.current && document.contains(previousFocusedElement.current)) {\n        previousFocusedElement.current.focus();\n        previousFocusedElement.current = undefined;\n      } else {\n        refs.toggle.current?.focus();\n      }\n    }\n    shouldFocus.current = false;\n  };\n\n  const setFocus = (force?: boolean) => {\n    shouldFocus.current = true;\n    if (force && isOpen) {\n      doFocus();\n    }\n  };\n\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  useEffect(doFocus, [isOpen, activeDrawerId]);\n\n  const loseFocus = useCallback(() => {\n    previousFocusedElement.current = undefined;\n  }, []);\n\n  return {\n    refs,\n    setFocus,\n    loseFocus,\n  };\n}\n"]}

package/lib/internal/template/app-layout/utils/visibility-context.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare const ActiveDrawersContext: import("react").Context<readonly string[]>;
+//# sourceMappingURL=visibility-context.d.ts.map

package/lib/internal/template/app-layout/utils/visibility-context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"visibility-context.d.ts","sourceRoot":"","sources":["../../../../src/app-layout/utils/visibility-context.tsx"],"names":[],"mappings":";AAIA,eAAO,MAAM,oBAAoB,4CAA2C,CAAC"}

package/lib/internal/template/app-layout/utils/visibility-context.js

@@ -0,0 +1,5 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { createContext } from 'react';
+export const ActiveDrawersContext = createContext([]);
+//# sourceMappingURL=visibility-context.js.map

package/lib/internal/template/app-layout/utils/visibility-context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"visibility-context.js","sourceRoot":"","sources":["../../../../src/app-layout/utils/visibility-context.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAEtC,MAAM,CAAC,MAAM,oBAAoB,GAAG,aAAa,CAAwB,EAAE,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { createContext } from 'react';\n\nexport const ActiveDrawersContext = createContext<ReadonlyArray<string>>([]);\n"]}

package/lib/internal/template/app-layout/visual-refresh/drawers.js.map

@@ -1 +1 @@
-{"version":3,"file":"drawers.js","sourceRoot":"","sources":["../../../../src/app-layout/visual-refresh/drawers.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACtC,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,iBAAiB,EAAE,MAAM,sCAAsC,CAAC;AAEzE,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AACvD,OAAO,cAAc,MAAM,gDAAgD,CAAC;AAC5E,OAAO,EAAE,eAAe,EAAE,MAAM,oCAAoC,CAAC;AACrE,OAAO,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AACvD,OAAO,YAAY,MAAM,yBAAyB,CAAC;AACnD,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AACvD,OAAO,EAAE,qBAAqB,EAAE,MAAM,WAAW,CAAC;AAClD,OAAO,UAAU,MAAM,eAAe,CAAC;AACvC,OAAO,aAAa,MAAM,kBAAkB,CAAC;AAE7C,OAAO,wBAAwB,MAAM,8CAA8C,CAAC;AACpF,OAAO,cAAc,MAAM,+BAA+B,CAAC;AAC3D,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,qCAAqC,GAAG,CAAC,CAAC;AAEvD;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,OAAO;IAC7B,MAAM,EACJ,iBAAiB,EACjB,OAAO,EACP,mBAAmB,EACnB,wBAAwB,EACxB,aAAa,EACb,cAAc,EACd,cAAc,EACd,QAAQ,GACT,GAAG,qBAAqB,EAAE,CAAC;IAE5B,MAAM,aAAa,GAAG,wBAAwB,IAAI,cAAc,IAAI,CAAC,cAAc,CAAC;IAEpF,IAAI,CAAC,OAAO,IAAI,mBAAmB,KAAK,CAAC,EAAE;QACzC,OAAO,IAAI,CAAC;KACb;IAED,OAAO,CACL,6BACE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,mBAAmB,CAAC,EAAE;YAC3C,CAAC,MAAM,CAAC,qBAAqB,CAAC,CAAC,EAAE,iBAAiB;YAClD,CAAC,MAAM,CAAC,iBAAiB,CAAC,CAAC,EAAE,aAAa;YAC1C,CAAC,MAAM,CAAC,WAAW,CAAC,EAAE,aAAa;SACpC,CAAC;QAEF,oBAAC,UAAU,CAAC,IAAI,OAAG;QACnB,oBAAC,YAAY,OAAG;QACf,CAAC,QAAQ,IAAI,oBAAC,eAAe,OAAG,CAC7B,CACP,CAAC;AACJ,CAAC;AAED,SAAS,YAAY;;IACnB,MAAM,EACJ,cAAc,EACd,UAAU,EACV,OAAO,EACP,WAAW,EACX,kBAAkB,EAClB,gBAAgB,EAChB,wBAAwB,EACxB,QAAQ,EACR,cAAc,EACd,cAAc,EACd,gBAAgB,EAChB,YAAY,EACZ,UAAU,EACV,eAAe,EACf,eAAe,EACf,SAAS,GACV,GAAG,qBAAqB,EAAE,CAAC;IAE5B,MAAM,YAAY,GAAG,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,KAAK,cAAc,CAAC,mCAAI,IAAI,CAAC;IAE/E,MAAM,kBAAkB,GAAG;QACzB,WAAW,EAAE,cAAc,CAAC,CAAC,CAAC,MAAA,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,UAAU,0CAAE,WAAW,CAAC,CAAC,CAAC,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,UAAU;QAC5F,OAAO,EAAE,cAAc,CAAC,CAAC,CAAC,MAAA,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,UAAU,0CAAE,UAAU,CAAC,CAAC,CAAC,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,KAAK;KACnF,CAAC;IAEF,MAAM,QAAQ,GAAG,CAAC,cAAc,CAAC;IACjC,MAAM,aAAa,GAAG,QAAQ,IAAI,CAAC,wBAAwB,IAAI,cAAc,IAAI,CAAC,cAAc,CAAC,CAAC;IAClG,MAAM,aAAa,GAAG,cAAc,KAAK,eAAe,CAAC;IACzD,MAAM,YAAY,GAAG,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,EAAE,KAAK,eAAe,CAAC,0CAAE,OAAO,CAAC;IAErF,MAAM,IAAI,GAAG,eAAe,CAAC,eAAe,EAAE,UAAU,EAAE,eAAe,CAAC,CAAC;IAE3E,OAAO,CACL,+BACE,EAAE,EAAE,cAAc,aAAd,cAAc,cAAd,cAAc,GAAI,SAAS,iBAClB,QAAQ,gBACT,kBAAkB,CAAC,OAAO,EACtC,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,MAAM,EAAE;YAC7B,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAAC,EAAE,cAAc;YAC1C,CAAC,MAAM,CAAC,WAAW,CAAC,EAAE,aAAa;YACnC,CAAC,cAAc,CAAC,eAAe,CAAC,CAAC,EAAE,cAAc;YACjD,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,aAAa;SACtC,CAAC,EACF,KAAK,oBACA,CAAC,CAAC,QAAQ,IAAI,UAAU,IAAI,EAAE,CAAC,cAAc,CAAC,UAAU,CAAC,EAAE,GAAG,IAAI,IAAI,EAAE,CAAC,GAE9E,GAAG,EAAE,SAAS,EACd,MAAM,EAAE,CAAC,CAAC,EAAE;YACV,IAAI,CAAC,CAAC,CAAC,aAAa,IAAI,CAAC,CAAC,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,EAAE;gBAClE,gBAAgB,EAAE,CAAC;aACpB;QACH,CAAC;QAEA,CAAC,QAAQ,KAAI,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,SAAS,CAAA,IAAI,6BAAK,SAAS,EAAE,MAAM,CAAC,eAAe,CAAC,IAAG,YAAY,CAAO;QACtG,6BAAK,SAAS,EAAE,MAAM,CAAC,0BAA0B,CAAC;YAChD,6BAAK,SAAS,EAAE,MAAM,CAAC,qBAAqB,CAAC;gBAC3C,oBAAC,cAAc,IACb,SAAS,EAAE,kBAAkB,CAAC,WAAW,EACzC,SAAS,EAAE,IAAI,CAAC;wBACd,CAAC,cAAc,CAAC,4BAA4B,CAAC,CAAC,EAAE,cAAc;wBAC9D,CAAC,cAAc,CAAC,aAAa,CAAC,CAAC,EAAE,aAAa;qBAC/C,CAAC,EACF,UAAU,EAAC,MAAM,EACjB,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,aAAa,EAC5C,OAAO,EAAE,GAAG,EAAE;wBACZ,kBAAkB,CAAC,cAAc,CAAC,CAAC;wBACnC,gBAAgB,CAAC,KAAK,CAAC,CAAC;oBAC1B,CAAC,EACD,GAAG,EAAE,WAAW,CAAC,KAAK,EACtB,OAAO,EAAC,MAAM,GACd,CACE;YACL,YAAY,IAAI,CACf,6BACE,SAAS,EAAE,IAAI,CACb,MAAM,CAAC,gBAAgB,CAAC,EACxB,cAAc,KAAK,eAAe,IAAI,MAAM,CAAC,uBAAuB,CAAC,CACtE,IAEA,YAAY,CACT,CACP;YACA,cAAc,KAAK,eAAe,IAAI,CACrC,6BAAK,SAAS,EAAE,MAAM,CAAC,gBAAgB,CAAC,IAAG,cAAc,KAAI,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,OAAO,CAAA,CAAO,CAC1F,CACG,CACA,CACT,CAAC;AACJ,CAAC;AAED;;;;;GAKG;AACH,SAAS,eAAe;IACtB,MAAM,EACJ,cAAc,EACd,OAAO,EACP,gBAAgB,EAChB,wBAAwB,EACxB,iCAAiC,EACjC,WAAW,EACX,mBAAmB,EACnB,kBAAkB,EAClB,qBAAqB,EACrB,aAAa,EACb,gBAAgB,EAChB,UAAU,EACV,mBAAmB,EACnB,mBAAmB,EACnB,kBAAkB,EAClB,cAAc,EACd,gBAAgB,EAChB,8BAA8B,EAC9B,sBAAsB,EACtB,aAAa,GACd,GAAG,qBAAqB,EAAE,CAAC;IAE5B,MAAM,mBAAmB,GAAG,mBAAmB,GAAG,CAAC,CAAC;IACpD,MAAM,aAAa,GAAG,UAAU,IAAI,mBAAmB,IAAI,kBAAkB,KAAK,MAAM,CAAC;IAEzF,MAAM,sBAAsB,GAAG,MAAM,CAAC,cAAc,CAAC,CAAC;IACtD,MAAM,CAAC,eAAe,EAAE,oBAAoB,CAAC,GAAG,iBAAiB,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC;IAEjG,IAAI,cAAc,EAAE;QAClB,sBAAsB,CAAC,OAAO,GAAG,cAAc,CAAC;KACjD;IAED,MAAM,gBAAgB,GACpB,gBAAgB,IAAI,kBAAkB,KAAK,QAAQ,CAAC,CAAC,CAAC,sBAAsB,CAAC,CAAC,CAAC,8BAA8B,CAAC;IAEhH,MAAM,sBAAsB,GAAG,GAAG,EAAE;QAClC,IAAI,eAAe,EAAE;YACnB,MAAM,WAAW,GAAG,EAAE,CAAC;YACvB,MAAM,YAAY,GAChB,cAAc,IAAI,gBAAgB;gBAChC,CAAC,CAAC,CAAC,eAAe,GAAG,8BAA8B,CAAC,GAAG,GAAG;gBAC1D,CAAC,CAAC,CAAC,eAAe,GAAG,gBAAgB,CAAC,GAAG,GAAG,CAAC;YAEjD,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,YAAY,GAAG,WAAW,CAAC,CAAC;YAErD,IAAI,cAAc,GAAG,CAAC,CAAC;YACvB,IAAI,aAAa,IAAI,gBAAgB,CAAC,SAAS,EAAE;gBAC/C,cAAc,GAAG,CAAC,CAAC;aACpB;YACD,OAAO,KAAK,GAAG,cAAc,CAAC;SAC/B;QAED,OAAO,CAAC,CAAC;IACX,CAAC,CAAC;IAEF,MAAM,EAAE,YAAY,EAAE,aAAa,EAAE,GAAG,UAAU,CAAC,OAAO,aAAP,OAAO,cAAP,OAAO,GAAI,SAAS,EAAE,sBAAsB,EAAE,EAAE,cAAc,CAAC,CAAC;IACnH,MAAM,oBAAoB,GAAG,CAAC,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAEtE,OAAO,CACL,+BACE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,oCAAoC,CAAC,EAAE;YAC5D,CAAC,MAAM,CAAC,uBAAuB,CAAC,CAAC,EAAE,mBAAmB;YACtD,CAAC,MAAM,CAAC,iBAAiB,CAAC,CAAC,EAAE,aAAa;SAC3C,CAAC,gBACU,gBAAgB,EAC5B,GAAG,EAAE,oBAAoB,EACzB,IAAI,EAAC,QAAQ;QAEb,6BACE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,yBAAyB,CAAC,EAAE;gBACjD,CAAC,MAAM,CAAC,uBAAuB,CAAC,CAAC,EAAE,mBAAmB;gBACtD,CAAC,MAAM,CAAC,iBAAiB,CAAC,CAAC,EAAE,aAAa;aAC3C,CAAC,EACF,IAAI,EAAC,SAAS,sBACG,UAAU;YAE1B,YAAY,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;;gBACvB,MAAM,yBAAyB,GAAG,CAAA,sBAAsB,aAAtB,sBAAsB,uBAAtB,sBAAsB,CAAE,OAAO,MAAK,IAAI,CAAC,EAAE,CAAC;gBAC9E,OAAO,CACL,oBAAC,aAAa,IACZ,SAAS,EAAE,MAAA,IAAI,CAAC,UAAU,0CAAE,aAAa,EACzC,YAAY,EAAE,IAAI,CAAC,EAAE,KAAK,cAAc,EACxC,YAAY,EAAE,cAAc,KAAK,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,EAC9D,SAAS,EAAE,IAAI,CACb,MAAM,CAAC,iBAAiB,CAAC,EACzB,cAAc,CAAC,iBAAiB,CAAC,EACjC,IAAI,CAAC,EAAE,KAAK,eAAe,IAAI,cAAc,CAAC,cAAc,CAAC,CAC9D,EACD,QAAQ,EAAE,IAAI,CAAC,OAAO,CAAC,QAAQ,EAC/B,OAAO,EAAE,IAAI,CAAC,OAAO,CAAC,OAAO,EAC7B,GAAG,EAAE,IAAI,CAAC,EAAE,EACZ,OAAO,EAAE,GAAG,EAAE,CAAC,kBAAkB,CAAC,IAAI,CAAC,EAAE,CAAC,EAC1C,GAAG,EAAE,yBAAyB,CAAC,CAAC,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EAC/D,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,MAAM,EAAE,4BAA4B,IAAI,CAAC,EAAE,EAAE,EAC7C,kBAAkB,EAAE,aAAa,KAAK,eAAe,EACrD,QAAQ,EAAE,IAAI,CAAC,EAAE,KAAK,cAAc,GACpC,CACH,CAAC;YACJ,CAAC,CAAC;YAED,aAAa,CAAC,MAAM,GAAG,CAAC,IAAI,CAC3B,oBAAC,YAAY,IACX,KAAK,EAAE,aAAa,EACpB,SAAS,EAAE,oBAAoB,CAAC,CAAC,CAAC,iCAAiC,CAAC,CAAC,CAAC,wBAAwB,EAC9F,oBAAoB,EAAE,CAAC,EAAE,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,YAAY,EAAE,cAAc,EAAE,EAAE,EAAE,CAAC,CAC1F,oBAAC,aAAa,IACZ,GAAG,EAAE,UAAU,EACf,SAAS,EAAE,SAAS,EACpB,YAAY,EAAE,YAAY,EAC1B,KAAK,EAAE,oBAAoB,EAC3B,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,iBAAiB,CAAC,EAAE,cAAc,CAAC,iBAAiB,CAAC,EAAE,cAAc,CAAC,EAC7F,QAAQ,EAAC,UAAU,EACnB,OAAO,EAAE,OAAO,EAChB,kBAAkB,EAAE,aAAa,KAAK,eAAe,GACrD,CACH,EACD,WAAW,EAAE,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE;oBAC1B,kBAAkB,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC;gBAChC,CAAC,GACD,CACH;YACA,aAAa,IAAI,gBAAgB,CAAC,SAAS,IAAI,CAC9C,oBAAC,aAAa,IACZ,SAAS,EAAE,gBAAgB,CAAC,SAAS,EACrC,YAAY,EAAE,mBAAmB,EACjC,YAAY,EAAE,CAAC,CAAC,gBAAgB,EAChC,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,iBAAiB,CAAC,EAAE,wBAAwB,CAAC,aAAa,CAAC,CAAC,EACnF,QAAQ,EAAC,eAAe,EACxB,OAAO,EAAE,GAAG,EAAE,CAAC,qBAAqB,EAAE,EACtC,QAAQ,EAAE,aAAa,IAAI,gBAAgB,EAC3C,GAAG,EAAE,cAAc,CAAC,MAAM,EAC1B,kBAAkB,EAAE,aAAa,KAAK,eAAe,GACrD,CACH,CACG,CACA,CACT,CAAC;AACJ,CAAC;AAED;;;;;GAKG;AACH,MAAM,UAAU,cAAc;IAC5B,MAAM,EACJ,cAAc,EACd,OAAO,EACP,gBAAgB,EAChB,wBAAwB,EACxB,iCAAiC,EACjC,WAAW,EACX,kBAAkB,EAClB,wBAAwB,EACxB,aAAa,GACd,GAAG,qBAAqB,EAAE,CAAC;IAE5B,MAAM,sBAAsB,GAAG,MAAM,CAAC,cAAc,CAAC,CAAC;IAEtD,IAAI,CAAC,OAAO,EAAE;QACZ,OAAO,IAAI,CAAC;KACb;IAED,IAAI,cAAc,EAAE;QAClB,sBAAsB,CAAC,OAAO,GAAG,cAAc,CAAC;KACjD;IAED,MAAM,EAAE,YAAY,EAAE,aAAa,EAAE,GAAG,UAAU,CAAC,OAAO,EAAE,qCAAqC,EAAE,cAAc,CAAC,CAAC;IACnH,MAAM,oBAAoB,GAAG,CAAC,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAEtE,OAAO,CACL,8CACe,wBAAwB,EACrC,SAAS,EAAE,IAAI,CAAC;YACd,CAAC,MAAM,CAAC,WAAW,CAAC,EAAE,wBAAwB;SAC/C,CAAC,gBACU,gBAAgB,EAC5B,IAAI,EAAC,QAAQ;QAEb,6BAAK,SAAS,EAAE,MAAM,CAAC,mCAAmC,CAAC,EAAE,IAAI,EAAC,SAAS,sBAAkB,YAAY;YACtG,YAAY,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;;gBACvB,MAAM,yBAAyB,GAAG,CAAA,sBAAsB,aAAtB,sBAAsB,uBAAtB,sBAAsB,CAAE,OAAO,MAAK,IAAI,CAAC,EAAE,CAAC;gBAC9E,OAAO,CACL,oBAAC,aAAa,IACZ,YAAY,EAAE,IAAI,CAAC,EAAE,KAAK,cAAc,EACxC,SAAS,EAAE,MAAA,IAAI,CAAC,UAAU,0CAAE,aAAa,EACzC,YAAY,EAAE,cAAc,KAAK,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,EAC9D,SAAS,EAAE,IAAI,CACb,4BAA4B,IAAI,CAAC,EAAE,EAAE,EACrC,MAAM,CAAC,iBAAiB,CAAC,EACzB,cAAc,CAAC,iBAAiB,CAAC,EACjC,IAAI,CAAC,EAAE,KAAK,eAAe,IAAI,cAAc,CAAC,cAAc,CAAC,CAC9D,EACD,QAAQ,EAAE,wBAAwB,EAClC,GAAG,EAAE,yBAAyB,CAAC,CAAC,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EAC/D,QAAQ,EAAE,IAAI,CAAC,OAAO,CAAC,QAAQ,EAC/B,OAAO,EAAE,IAAI,CAAC,OAAO,CAAC,OAAO,EAC7B,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,GAAG,EAAE,IAAI,CAAC,EAAE,EACZ,OAAO,EAAE,GAAG,EAAE,CAAC,kBAAkB,CAAC,IAAI,CAAC,EAAE,CAAC,EAC1C,MAAM,EAAE,4BAA4B,IAAI,CAAC,EAAE,EAAE,EAC7C,kBAAkB,EAAE,aAAa,KAAK,eAAe,EACrD,QAAQ,EAAE,IAAI,CAAC,EAAE,KAAK,cAAc,GACpC,CACH,CAAC;YACJ,CAAC,CAAC;YACD,aAAa,CAAC,MAAM,GAAG,CAAC,IAAI,CAC3B,oBAAC,YAAY,IACX,KAAK,EAAE,aAAa,EACpB,SAAS,EAAE,oBAAoB,CAAC,CAAC,CAAC,iCAAiC,CAAC,CAAC,CAAC,wBAAwB,EAC9F,WAAW,EAAE,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,kBAAkB,CAAC,MAAM,CAAC,EAAE,CAAC,GAC1D,CACH,CACG,CACA,CACT,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { useContainerQuery } from '@cloudscape-design/component-toolkit';\n\nimport { InternalButton } from '../../button/internal';\nimport customCssProps from '../../internal/generated/custom-css-properties';\nimport { getLimitedValue } from '../../split-panel/utils/size-utils';\nimport { splitItems } from '../drawer/drawers-helpers';\nimport OverflowMenu from '../drawer/overflow-menu';\nimport { TOOLS_DRAWER_ID } from '../utils/use-drawers';\nimport { useAppLayoutInternals } from './context';\nimport SplitPanel from './split-panel';\nimport TriggerButton from './trigger-button';\n\nimport splitPanelTestUtilStyles from '../../split-panel/test-classes/styles.css.js';\nimport testutilStyles from '../test-classes/styles.css.js';\nimport styles from './styles.css.js';\n\n/**\n * The VISIBLE_MOBILE_TOOLBAR_TRIGGERS_LIMIT is used to reduce the number\n * of triggers that are initially visible on the mobile toolbar, the rest\n * are then placed into an overflow menu\n *\n * Note if one of the triggers is for a split-panel, it would not count that\n */\nexport const VISIBLE_MOBILE_TOOLBAR_TRIGGERS_LIMIT = 2;\n\n/**\n * The Drawers root component is mounted in the AppLayout index file. It will only\n * render if the drawers are defined, and it will take over the mounting of and\n * rendering of the Tools and SplitPanel (side position) if they exist. If drawers\n * do not exist then the Tools and SplitPanel will be handled by the Tools component.\n */\nexport default function Drawers() {\n  const {\n    disableBodyScroll,\n    drawers,\n    drawersTriggerCount,\n    hasDrawerViewportOverlay,\n    hasOpenDrawer,\n    navigationOpen,\n    navigationHide,\n    isMobile,\n  } = useAppLayoutInternals();\n\n  const isUnfocusable = hasDrawerViewportOverlay && navigationOpen && !navigationHide;\n\n  if (!drawers || drawersTriggerCount === 0) {\n    return null;\n  }\n\n  return (\n    <div\n      className={clsx(styles['drawers-container'], {\n        [styles['disable-body-scroll']]: disableBodyScroll,\n        [styles['has-open-drawer']]: hasOpenDrawer,\n        [styles.unfocusable]: isUnfocusable,\n      })}\n    >\n      <SplitPanel.Side />\n      <ActiveDrawer />\n      {!isMobile && <DesktopTriggers />}\n    </div>\n  );\n}\n\nfunction ActiveDrawer() {\n  const {\n    activeDrawerId,\n    ariaLabels,\n    drawers,\n    drawersRefs,\n    handleDrawersClick,\n    handleToolsClick,\n    hasDrawerViewportOverlay,\n    isMobile,\n    navigationOpen,\n    navigationHide,\n    loseDrawersFocus,\n    resizeHandle,\n    drawerSize,\n    drawersMinWidth,\n    drawersMaxWidth,\n    drawerRef,\n  } = useAppLayoutInternals();\n\n  const activeDrawer = drawers?.find(item => item.id === activeDrawerId) ?? null;\n\n  const computedAriaLabels = {\n    closeButton: activeDrawerId ? activeDrawer?.ariaLabels?.closeButton : ariaLabels?.toolsClose,\n    content: activeDrawerId ? activeDrawer?.ariaLabels?.drawerName : ariaLabels?.tools,\n  };\n\n  const isHidden = !activeDrawerId;\n  const isUnfocusable = isHidden || (hasDrawerViewportOverlay && navigationOpen && !navigationHide);\n  const isToolsDrawer = activeDrawerId === TOOLS_DRAWER_ID;\n  const toolsContent = drawers?.find(drawer => drawer.id === TOOLS_DRAWER_ID)?.content;\n\n  const size = getLimitedValue(drawersMinWidth, drawerSize, drawersMaxWidth);\n\n  return (\n    <aside\n      id={activeDrawerId ?? undefined}\n      aria-hidden={isHidden}\n      aria-label={computedAriaLabels.content}\n      className={clsx(styles.drawer, {\n        [styles['is-drawer-open']]: activeDrawerId,\n        [styles.unfocusable]: isUnfocusable,\n        [testutilStyles['active-drawer']]: activeDrawerId,\n        [testutilStyles.tools]: isToolsDrawer,\n      })}\n      style={{\n        ...(!isMobile && drawerSize && { [customCssProps.drawerSize]: `${size}px` }),\n      }}\n      ref={drawerRef}\n      onBlur={e => {\n        if (!e.relatedTarget || !e.currentTarget.contains(e.relatedTarget)) {\n          loseDrawersFocus();\n        }\n      }}\n    >\n      {!isMobile && activeDrawer?.resizable && <div className={styles['drawer-slider']}>{resizeHandle}</div>}\n      <div className={styles['drawer-content-container']}>\n        <div className={styles['drawer-close-button']}>\n          <InternalButton\n            ariaLabel={computedAriaLabels.closeButton}\n            className={clsx({\n              [testutilStyles['active-drawer-close-button']]: activeDrawerId,\n              [testutilStyles['tools-close']]: isToolsDrawer,\n            })}\n            formAction=\"none\"\n            iconName={isMobile ? 'close' : 'angle-right'}\n            onClick={() => {\n              handleDrawersClick(activeDrawerId);\n              handleToolsClick(false);\n            }}\n            ref={drawersRefs.close}\n            variant=\"icon\"\n          />\n        </div>\n        {toolsContent && (\n          <div\n            className={clsx(\n              styles['drawer-content'],\n              activeDrawerId !== TOOLS_DRAWER_ID && styles['drawer-content-hidden']\n            )}\n          >\n            {toolsContent}\n          </div>\n        )}\n        {activeDrawerId !== TOOLS_DRAWER_ID && (\n          <div className={styles['drawer-content']}>{activeDrawerId && activeDrawer?.content}</div>\n        )}\n      </div>\n    </aside>\n  );\n}\n\n/**\n * The DesktopTriggers will render the trigger buttons for Tools, Drawers, and the\n * SplitPanel in non mobile viewports. Changes to the activeDrawerId need to be\n * tracked by the previousActiveDrawerId property in order to appropriately apply\n * the ref required to manage focus control.\n */\nfunction DesktopTriggers() {\n  const {\n    activeDrawerId,\n    drawers,\n    drawersAriaLabel,\n    drawersOverflowAriaLabel,\n    drawersOverflowWithBadgeAriaLabel,\n    drawersRefs,\n    drawersTriggerCount,\n    handleDrawersClick,\n    handleSplitPanelClick,\n    hasOpenDrawer,\n    isSplitPanelOpen,\n    splitPanel,\n    splitPanelControlId,\n    splitPanelDisplayed,\n    splitPanelPosition,\n    splitPanelRefs,\n    splitPanelToggle,\n    splitPanelReportedHeaderHeight,\n    splitPanelReportedSize,\n    headerVariant,\n  } = useAppLayoutInternals();\n\n  const hasMultipleTriggers = drawersTriggerCount > 1;\n  const hasSplitPanel = splitPanel && splitPanelDisplayed && splitPanelPosition === 'side';\n\n  const previousActiveDrawerId = useRef(activeDrawerId);\n  const [containerHeight, triggersContainerRef] = useContainerQuery(rect => rect.contentBoxHeight);\n\n  if (activeDrawerId) {\n    previousActiveDrawerId.current = activeDrawerId;\n  }\n\n  const splitPanelHeight =\n    isSplitPanelOpen && splitPanelPosition === 'bottom' ? splitPanelReportedSize : splitPanelReportedHeaderHeight;\n\n  const getIndexOfOverflowItem = () => {\n    if (containerHeight) {\n      const ITEM_HEIGHT = 48;\n      const overflowSpot =\n        activeDrawerId && isSplitPanelOpen\n          ? (containerHeight - splitPanelReportedHeaderHeight) / 1.5\n          : (containerHeight - splitPanelHeight) / 1.5;\n\n      const index = Math.floor(overflowSpot / ITEM_HEIGHT);\n\n      let splitPanelItem = 0;\n      if (hasSplitPanel && splitPanelToggle.displayed) {\n        splitPanelItem = 1;\n      }\n      return index - splitPanelItem;\n    }\n\n    return 0;\n  };\n\n  const { visibleItems, overflowItems } = splitItems(drawers ?? undefined, getIndexOfOverflowItem(), activeDrawerId);\n  const overflowMenuHasBadge = !!overflowItems.find(item => item.badge);\n\n  return (\n    <aside\n      className={clsx(styles['drawers-desktop-triggers-container'], {\n        [styles['has-multiple-triggers']]: hasMultipleTriggers,\n        [styles['has-open-drawer']]: hasOpenDrawer,\n      })}\n      aria-label={drawersAriaLabel}\n      ref={triggersContainerRef}\n      role=\"region\"\n    >\n      <div\n        className={clsx(styles['drawers-trigger-content'], {\n          [styles['has-multiple-triggers']]: hasMultipleTriggers,\n          [styles['has-open-drawer']]: hasOpenDrawer,\n        })}\n        role=\"toolbar\"\n        aria-orientation=\"vertical\"\n      >\n        {visibleItems.map(item => {\n          const isForPreviousActiveDrawer = previousActiveDrawerId?.current === item.id;\n          return (\n            <TriggerButton\n              ariaLabel={item.ariaLabels?.triggerButton}\n              ariaExpanded={item.id === activeDrawerId}\n              ariaControls={activeDrawerId === item.id ? item.id : undefined}\n              className={clsx(\n                styles['drawers-trigger'],\n                testutilStyles['drawers-trigger'],\n                item.id === TOOLS_DRAWER_ID && testutilStyles['tools-toggle']\n              )}\n              iconName={item.trigger.iconName}\n              iconSvg={item.trigger.iconSvg}\n              key={item.id}\n              onClick={() => handleDrawersClick(item.id)}\n              ref={isForPreviousActiveDrawer ? drawersRefs.toggle : undefined}\n              badge={item.badge}\n              testId={`awsui-app-layout-trigger-${item.id}`}\n              highContrastHeader={headerVariant === 'high-contrast'}\n              selected={item.id === activeDrawerId}\n            />\n          );\n        })}\n\n        {overflowItems.length > 0 && (\n          <OverflowMenu\n            items={overflowItems}\n            ariaLabel={overflowMenuHasBadge ? drawersOverflowWithBadgeAriaLabel : drawersOverflowAriaLabel}\n            customTriggerBuilder={({ onClick, triggerRef, ariaLabel, ariaExpanded, testUtilsClass }) => (\n              <TriggerButton\n                ref={triggerRef}\n                ariaLabel={ariaLabel}\n                ariaExpanded={ariaExpanded}\n                badge={overflowMenuHasBadge}\n                className={clsx(styles['drawers-trigger'], testutilStyles['drawers-trigger'], testUtilsClass)}\n                iconName=\"ellipsis\"\n                onClick={onClick}\n                highContrastHeader={headerVariant === 'high-contrast'}\n              />\n            )}\n            onItemClick={({ detail }) => {\n              handleDrawersClick(detail.id);\n            }}\n          />\n        )}\n        {hasSplitPanel && splitPanelToggle.displayed && (\n          <TriggerButton\n            ariaLabel={splitPanelToggle.ariaLabel}\n            ariaControls={splitPanelControlId}\n            ariaExpanded={!!isSplitPanelOpen}\n            className={clsx(styles['drawers-trigger'], splitPanelTestUtilStyles['open-button'])}\n            iconName=\"view-vertical\"\n            onClick={() => handleSplitPanelClick()}\n            selected={hasSplitPanel && isSplitPanelOpen}\n            ref={splitPanelRefs.toggle}\n            highContrastHeader={headerVariant === 'high-contrast'}\n          />\n        )}\n      </div>\n    </aside>\n  );\n}\n\n/**\n * The MobileTriggers will be mounted inside of the AppBar component and\n * only rendered when Drawers are defined in mobile viewports. The same logic\n * will in the AppBar component will suppress the rendering of the legacy\n * trigger button for the Tools drawer.\n */\nexport function MobileTriggers() {\n  const {\n    activeDrawerId,\n    drawers,\n    drawersAriaLabel,\n    drawersOverflowAriaLabel,\n    drawersOverflowWithBadgeAriaLabel,\n    drawersRefs,\n    handleDrawersClick,\n    hasDrawerViewportOverlay,\n    headerVariant,\n  } = useAppLayoutInternals();\n\n  const previousActiveDrawerId = useRef(activeDrawerId);\n\n  if (!drawers) {\n    return null;\n  }\n\n  if (activeDrawerId) {\n    previousActiveDrawerId.current = activeDrawerId;\n  }\n\n  const { visibleItems, overflowItems } = splitItems(drawers, VISIBLE_MOBILE_TOOLBAR_TRIGGERS_LIMIT, activeDrawerId);\n  const overflowMenuHasBadge = !!overflowItems.find(item => item.badge);\n\n  return (\n    <aside\n      aria-hidden={hasDrawerViewportOverlay}\n      className={clsx({\n        [styles.unfocusable]: hasDrawerViewportOverlay,\n      })}\n      aria-label={drawersAriaLabel}\n      role=\"region\"\n    >\n      <div className={styles['drawers-mobile-triggers-container']} role=\"toolbar\" aria-orientation=\"horizontal\">\n        {visibleItems.map(item => {\n          const isForPreviousActiveDrawer = previousActiveDrawerId?.current === item.id;\n          return (\n            <TriggerButton\n              ariaExpanded={item.id === activeDrawerId}\n              ariaLabel={item.ariaLabels?.triggerButton}\n              ariaControls={activeDrawerId === item.id ? item.id : undefined}\n              className={clsx(\n                `awsui-app-layout-trigger-${item.id}`,\n                styles['drawers-trigger'],\n                testutilStyles['drawers-trigger'],\n                item.id === TOOLS_DRAWER_ID && testutilStyles['tools-toggle']\n              )}\n              disabled={hasDrawerViewportOverlay}\n              ref={isForPreviousActiveDrawer ? drawersRefs.toggle : undefined}\n              iconName={item.trigger.iconName}\n              iconSvg={item.trigger.iconSvg}\n              badge={item.badge}\n              key={item.id}\n              onClick={() => handleDrawersClick(item.id)}\n              testId={`awsui-app-layout-trigger-${item.id}`}\n              highContrastHeader={headerVariant === 'high-contrast'}\n              selected={item.id === activeDrawerId}\n            />\n          );\n        })}\n        {overflowItems.length > 0 && (\n          <OverflowMenu\n            items={overflowItems}\n            ariaLabel={overflowMenuHasBadge ? drawersOverflowWithBadgeAriaLabel : drawersOverflowAriaLabel}\n            onItemClick={({ detail }) => handleDrawersClick(detail.id)}\n          />\n        )}\n      </div>\n    </aside>\n  );\n}\n"]}
+{"version":3,"file":"drawers.js","sourceRoot":"","sources":["../../../../src/app-layout/visual-refresh/drawers.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, { useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { useContainerQuery } from '@cloudscape-design/component-toolkit';\n\nimport { InternalButton } from '../../button/internal';\nimport customCssProps from '../../internal/generated/custom-css-properties';\nimport { getLimitedValue } from '../../split-panel/utils/size-utils';\nimport { splitItems } from '../drawer/drawers-helpers';\nimport OverflowMenu from '../drawer/overflow-menu';\nimport { TOOLS_DRAWER_ID } from '../utils/use-drawers';\nimport { useAppLayoutInternals } from './context';\nimport SplitPanel from './split-panel';\nimport TriggerButton from './trigger-button';\n\nimport splitPanelTestUtilStyles from '../../split-panel/test-classes/styles.css.js';\nimport testutilStyles from '../test-classes/styles.css.js';\nimport styles from './styles.css.js';\n\n/**\n * The VISIBLE_MOBILE_TOOLBAR_TRIGGERS_LIMIT is used to reduce the number\n * of triggers that are initially visible on the mobile toolbar, the rest\n * are then placed into an overflow menu\n *\n * Note if one of the triggers is for a split-panel, it would not count that\n */\nexport const VISIBLE_MOBILE_TOOLBAR_TRIGGERS_LIMIT = 2;\n\n/**\n * The Drawers root component is mounted in the AppLayout index file. It will only\n * render if the drawers are defined, and it will take over the mounting of and\n * rendering of the Tools and SplitPanel (side position) if they exist. If drawers\n * do not exist then the Tools and SplitPanel will be handled by the Tools component.\n */\nexport default function Drawers() {\n  const {\n    disableBodyScroll,\n    drawers,\n    drawersTriggerCount,\n    hasDrawerViewportOverlay,\n    hasOpenDrawer,\n    navigationOpen,\n    navigationHide,\n    isMobile,\n  } = useAppLayoutInternals();\n\n  const isUnfocusable = hasDrawerViewportOverlay && navigationOpen && !navigationHide;\n\n  if (!drawers || drawersTriggerCount === 0) {\n    return null;\n  }\n\n  return (\n    <div\n      className={clsx(styles['drawers-container'], {\n        [styles['disable-body-scroll']]: disableBodyScroll,\n        [styles['has-open-drawer']]: hasOpenDrawer,\n        [styles.unfocusable]: isUnfocusable,\n      })}\n    >\n      <SplitPanel.Side />\n      <ActiveDrawer />\n      {!isMobile && <DesktopTriggers />}\n    </div>\n  );\n}\n\nfunction ActiveDrawer() {\n  const {\n    activeDrawerId,\n    ariaLabels,\n    drawers,\n    drawersRefs,\n    handleDrawersClick,\n    handleToolsClick,\n    hasDrawerViewportOverlay,\n    isMobile,\n    navigationOpen,\n    navigationHide,\n    loseDrawersFocus,\n    resizeHandle,\n    drawerSize,\n    drawersMinWidth,\n    drawersMaxWidth,\n    drawerRef,\n  } = useAppLayoutInternals();\n\n  const activeDrawer = drawers?.find(item => item.id === activeDrawerId) ?? null;\n\n  const computedAriaLabels = {\n    closeButton: activeDrawerId ? activeDrawer?.ariaLabels?.closeButton : ariaLabels?.toolsClose,\n    content: activeDrawerId ? activeDrawer?.ariaLabels?.drawerName : ariaLabels?.tools,\n  };\n\n  const isHidden = !activeDrawerId;\n  const isUnfocusable = isHidden || (hasDrawerViewportOverlay && navigationOpen && !navigationHide);\n  const isToolsDrawer = activeDrawerId === TOOLS_DRAWER_ID;\n  const toolsContent = drawers?.find(drawer => drawer.id === TOOLS_DRAWER_ID)?.content;\n\n  const size = getLimitedValue(drawersMinWidth, drawerSize, drawersMaxWidth);\n\n  return (\n    <aside\n      id={activeDrawerId ?? undefined}\n      aria-hidden={isHidden}\n      aria-label={computedAriaLabels.content}\n      className={clsx(styles.drawer, {\n        [styles['is-drawer-open']]: activeDrawerId,\n        [styles.unfocusable]: isUnfocusable,\n        [testutilStyles['active-drawer']]: activeDrawerId,\n        [testutilStyles.tools]: isToolsDrawer,\n      })}\n      style={{\n        ...(!isMobile && drawerSize && { [customCssProps.drawerSize]: `${size}px` }),\n      }}\n      ref={drawerRef}\n      onBlur={e => {\n        if (!e.relatedTarget || !e.currentTarget.contains(e.relatedTarget)) {\n          loseDrawersFocus();\n        }\n      }}\n    >\n      {!isMobile && activeDrawer?.resizable && <div className={styles['drawer-slider']}>{resizeHandle}</div>}\n      <div className={styles['drawer-content-container']}>\n        <div className={styles['drawer-close-button']}>\n          <InternalButton\n            ariaLabel={computedAriaLabels.closeButton}\n            className={clsx({\n              [testutilStyles['active-drawer-close-button']]: activeDrawerId,\n              [testutilStyles['tools-close']]: isToolsDrawer,\n            })}\n            formAction=\"none\"\n            iconName={isMobile ? 'close' : 'angle-right'}\n            onClick={() => {\n              handleDrawersClick(activeDrawerId);\n              handleToolsClick(false);\n            }}\n            ref={drawersRefs.close}\n            variant=\"icon\"\n          />\n        </div>\n        {toolsContent && (\n          <div\n            className={clsx(\n              styles['drawer-content'],\n              activeDrawerId !== TOOLS_DRAWER_ID && styles['drawer-content-hidden']\n            )}\n          >\n            {toolsContent}\n          </div>\n        )}\n        {activeDrawerId !== TOOLS_DRAWER_ID && (\n          <div className={styles['drawer-content']}>{activeDrawerId && activeDrawer?.content}</div>\n        )}\n      </div>\n    </aside>\n  );\n}\n\n/**\n * The DesktopTriggers will render the trigger buttons for Tools, Drawers, and the\n * SplitPanel in non mobile viewports. Changes to the activeDrawerId need to be\n * tracked by the previousActiveDrawerId property in order to appropriately apply\n * the ref required to manage focus control.\n */\nfunction DesktopTriggers() {\n  const {\n    activeDrawerId,\n    drawers,\n    drawersAriaLabel,\n    drawersOverflowAriaLabel,\n    drawersOverflowWithBadgeAriaLabel,\n    drawersRefs,\n    drawersTriggerCount,\n    handleDrawersClick,\n    handleSplitPanelClick,\n    hasOpenDrawer,\n    isSplitPanelOpen,\n    splitPanel,\n    splitPanelControlId,\n    splitPanelDisplayed,\n    splitPanelPosition,\n    splitPanelRefs,\n    splitPanelToggle,\n    splitPanelReportedHeaderHeight,\n    splitPanelReportedSize,\n    headerVariant,\n  } = useAppLayoutInternals();\n\n  const hasMultipleTriggers = drawersTriggerCount > 1;\n  const hasSplitPanel = splitPanel && splitPanelDisplayed && splitPanelPosition === 'side';\n\n  const previousActiveDrawerId = useRef(activeDrawerId);\n  const [containerHeight, triggersContainerRef] = useContainerQuery(rect => rect.contentBoxHeight);\n\n  if (activeDrawerId) {\n    previousActiveDrawerId.current = activeDrawerId;\n  }\n\n  const splitPanelHeight =\n    isSplitPanelOpen && splitPanelPosition === 'bottom' ? splitPanelReportedSize : splitPanelReportedHeaderHeight;\n\n  const getIndexOfOverflowItem = () => {\n    if (containerHeight) {\n      const ITEM_HEIGHT = 48;\n      const overflowSpot =\n        activeDrawerId && isSplitPanelOpen\n          ? (containerHeight - splitPanelReportedHeaderHeight) / 1.5\n          : (containerHeight - splitPanelHeight) / 1.5;\n\n      const index = Math.floor(overflowSpot / ITEM_HEIGHT);\n\n      let splitPanelItem = 0;\n      if (hasSplitPanel && splitPanelToggle.displayed) {\n        splitPanelItem = 1;\n      }\n      return index - splitPanelItem;\n    }\n\n    return 0;\n  };\n\n  const { visibleItems, overflowItems } = splitItems(drawers ?? undefined, getIndexOfOverflowItem(), activeDrawerId);\n  const overflowMenuHasBadge = !!overflowItems.find(item => item.badge);\n\n  return (\n    <aside\n      className={clsx(styles['drawers-desktop-triggers-container'], {\n        [styles['has-multiple-triggers']]: hasMultipleTriggers,\n        [styles['has-open-drawer']]: hasOpenDrawer,\n      })}\n      aria-label={drawersAriaLabel}\n      ref={triggersContainerRef}\n      role=\"region\"\n    >\n      <div\n        className={clsx(styles['drawers-trigger-content'], {\n          [styles['has-multiple-triggers']]: hasMultipleTriggers,\n          [styles['has-open-drawer']]: hasOpenDrawer,\n        })}\n        role=\"toolbar\"\n        aria-orientation=\"vertical\"\n      >\n        {visibleItems.map(item => {\n          const isForPreviousActiveDrawer = previousActiveDrawerId?.current === item.id;\n          return (\n            <TriggerButton\n              ariaLabel={item.ariaLabels?.triggerButton}\n              ariaExpanded={item.id === activeDrawerId}\n              ariaControls={activeDrawerId === item.id ? item.id : undefined}\n              className={clsx(\n                styles['drawers-trigger'],\n                testutilStyles['drawers-trigger'],\n                item.id === TOOLS_DRAWER_ID && testutilStyles['tools-toggle']\n              )}\n              iconName={item.trigger!.iconName}\n              iconSvg={item.trigger!.iconSvg}\n              key={item.id}\n              onClick={() => handleDrawersClick(item.id)}\n              ref={isForPreviousActiveDrawer ? drawersRefs.toggle : undefined}\n              badge={item.badge}\n              testId={`awsui-app-layout-trigger-${item.id}`}\n              highContrastHeader={headerVariant === 'high-contrast'}\n              selected={item.id === activeDrawerId}\n            />\n          );\n        })}\n\n        {overflowItems.length > 0 && (\n          <OverflowMenu\n            items={overflowItems}\n            ariaLabel={overflowMenuHasBadge ? drawersOverflowWithBadgeAriaLabel : drawersOverflowAriaLabel}\n            customTriggerBuilder={({ onClick, triggerRef, ariaLabel, ariaExpanded, testUtilsClass }) => (\n              <TriggerButton\n                ref={triggerRef}\n                ariaLabel={ariaLabel}\n                ariaExpanded={ariaExpanded}\n                badge={overflowMenuHasBadge}\n                className={clsx(styles['drawers-trigger'], testutilStyles['drawers-trigger'], testUtilsClass)}\n                iconName=\"ellipsis\"\n                onClick={onClick}\n                highContrastHeader={headerVariant === 'high-contrast'}\n              />\n            )}\n            onItemClick={({ detail }) => {\n              handleDrawersClick(detail.id);\n            }}\n          />\n        )}\n        {hasSplitPanel && splitPanelToggle.displayed && (\n          <TriggerButton\n            ariaLabel={splitPanelToggle.ariaLabel}\n            ariaControls={splitPanelControlId}\n            ariaExpanded={!!isSplitPanelOpen}\n            className={clsx(styles['drawers-trigger'], splitPanelTestUtilStyles['open-button'])}\n            iconName=\"view-vertical\"\n            onClick={() => handleSplitPanelClick()}\n            selected={hasSplitPanel && isSplitPanelOpen}\n            ref={splitPanelRefs.toggle}\n            highContrastHeader={headerVariant === 'high-contrast'}\n          />\n        )}\n      </div>\n    </aside>\n  );\n}\n\n/**\n * The MobileTriggers will be mounted inside of the AppBar component and\n * only rendered when Drawers are defined in mobile viewports. The same logic\n * will in the AppBar component will suppress the rendering of the legacy\n * trigger button for the Tools drawer.\n */\nexport function MobileTriggers() {\n  const {\n    activeDrawerId,\n    drawers,\n    drawersAriaLabel,\n    drawersOverflowAriaLabel,\n    drawersOverflowWithBadgeAriaLabel,\n    drawersRefs,\n    handleDrawersClick,\n    hasDrawerViewportOverlay,\n    headerVariant,\n  } = useAppLayoutInternals();\n\n  const previousActiveDrawerId = useRef(activeDrawerId);\n\n  if (!drawers) {\n    return null;\n  }\n\n  if (activeDrawerId) {\n    previousActiveDrawerId.current = activeDrawerId;\n  }\n\n  const { visibleItems, overflowItems } = splitItems(drawers, VISIBLE_MOBILE_TOOLBAR_TRIGGERS_LIMIT, activeDrawerId);\n  const overflowMenuHasBadge = !!overflowItems.find(item => item.badge);\n\n  return (\n    <aside\n      aria-hidden={hasDrawerViewportOverlay}\n      className={clsx({\n        [styles.unfocusable]: hasDrawerViewportOverlay,\n      })}\n      aria-label={drawersAriaLabel}\n      role=\"region\"\n    >\n      <div className={styles['drawers-mobile-triggers-container']} role=\"toolbar\" aria-orientation=\"horizontal\">\n        {visibleItems.map(item => {\n          const isForPreviousActiveDrawer = previousActiveDrawerId?.current === item.id;\n          return (\n            <TriggerButton\n              ariaExpanded={item.id === activeDrawerId}\n              ariaLabel={item.ariaLabels?.triggerButton}\n              ariaControls={activeDrawerId === item.id ? item.id : undefined}\n              className={clsx(\n                `awsui-app-layout-trigger-${item.id}`,\n                styles['drawers-trigger'],\n                testutilStyles['drawers-trigger'],\n                item.id === TOOLS_DRAWER_ID && testutilStyles['tools-toggle']\n              )}\n              disabled={hasDrawerViewportOverlay}\n              ref={isForPreviousActiveDrawer ? drawersRefs.toggle : undefined}\n              iconName={item.trigger!.iconName}\n              iconSvg={item.trigger!.iconSvg}\n              badge={item.badge}\n              key={item.id}\n              onClick={() => handleDrawersClick(item.id)}\n              testId={`awsui-app-layout-trigger-${item.id}`}\n              highContrastHeader={headerVariant === 'high-contrast'}\n              selected={item.id === activeDrawerId}\n            />\n          );\n        })}\n        {overflowItems.length > 0 && (\n          <OverflowMenu\n            items={overflowItems}\n            ariaLabel={overflowMenuHasBadge ? drawersOverflowWithBadgeAriaLabel : drawersOverflowAriaLabel}\n            onItemClick={({ detail }) => handleDrawersClick(detail.id)}\n          />\n        )}\n      </div>\n    </aside>\n  );\n}\n"]}

package/lib/internal/template/app-layout/visual-refresh-toolbar/compute-layout.d.ts

@@ -9,13 +9,17 @@ interface HorizontalLayoutInput {
     splitPanelPosition: 'side' | 'bottom' | undefined;
     splitPanelSize: number;
     isMobile: boolean;
+    activeGlobalDrawersSizes: Record<string, number>;
 }
-export declare function computeHorizontalLayout({ navigationOpen, navigationWidth, placement, minContentWidth, activeDrawerSize, splitPanelOpen, splitPanelPosition, splitPanelSize, isMobile, }: HorizontalLayoutInput): {
+export declare function computeHorizontalLayout({ navigationOpen, navigationWidth, placement, minContentWidth, activeDrawerSize, splitPanelOpen, splitPanelPosition, splitPanelSize, isMobile, activeGlobalDrawersSizes, }: HorizontalLayoutInput): {
     splitPanelPosition: "bottom" | "side";
     splitPanelForcedPosition: boolean;
     sideSplitPanelSize: number;
     maxSplitPanelSize: number;
     maxDrawerSize: number;
+    maxGlobalDrawersSizes: Record<string, number>;
+    totalActiveGlobalDrawersSize: number;
+    resizableSpaceAvailable: number;
 };
 interface VerticalLayoutInput {
     topOffset: number;

package/lib/internal/template/app-layout/visual-refresh-toolbar/compute-layout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"compute-layout.d.ts","sourceRoot":"","sources":["../../../../src/app-layout/visual-refresh-toolbar/compute-layout.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,0BAA0B,EAAE,MAAM,eAAe,CAAC;AAG3D,UAAU,qBAAqB;IAC7B,cAAc,EAAE,OAAO,CAAC;IACxB,eAAe,EAAE,MAAM,CAAC;IACxB,SAAS,EAAE,0BAA0B,CAAC,WAAW,CAAC,CAAC;IACnD,eAAe,EAAE,MAAM,CAAC;IACxB,gBAAgB,EAAE,MAAM,CAAC;IACzB,cAAc,EAAE,OAAO,CAAC;IACxB,kBAAkB,EAAE,MAAM,GAAG,QAAQ,GAAG,SAAS,CAAC;IAClD,cAAc,EAAE,MAAM,CAAC;IACvB,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED,wBAAgB,uBAAuB,CAAC,EACtC,cAAc,EACd,eAAe,EACf,SAAS,EACT,eAAe,EACf,gBAAgB,EAChB,cAAc,EACd,kBAAkB,EAClB,cAAc,EACd,QAAQ,GACT,EAAE,qBAAqB;;;;;;EAsBvB;AAED,UAAU,mBAAmB;IAC3B,SAAS,EAAE,MAAM,CAAC;IAClB,iBAAiB,EAAE,OAAO,CAAC;IAC3B,aAAa,EAAE,MAAM,CAAC;IACtB,mBAAmB,EAAE,OAAO,CAAC;IAC7B,mBAAmB,EAAE,MAAM,CAAC;CAC7B;AAED,MAAM,WAAW,oBAAoB;IACnC,OAAO,EAAE,MAAM,CAAC;IAChB,aAAa,EAAE,MAAM,CAAC;IACtB,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,wBAAgB,qBAAqB,CAAC,EACpC,SAAS,EACT,iBAAiB,EACjB,aAAa,EACb,mBAAmB,EACnB,mBAAmB,GACpB,EAAE,mBAAmB,GAAG,oBAAoB,CAe5C"}
+{"version":3,"file":"compute-layout.d.ts","sourceRoot":"","sources":["../../../../src/app-layout/visual-refresh-toolbar/compute-layout.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,0BAA0B,EAAE,MAAM,eAAe,CAAC;AAG3D,UAAU,qBAAqB;IAC7B,cAAc,EAAE,OAAO,CAAC;IACxB,eAAe,EAAE,MAAM,CAAC;IACxB,SAAS,EAAE,0BAA0B,CAAC,WAAW,CAAC,CAAC;IACnD,eAAe,EAAE,MAAM,CAAC;IACxB,gBAAgB,EAAE,MAAM,CAAC;IACzB,cAAc,EAAE,OAAO,CAAC;IACxB,kBAAkB,EAAE,MAAM,GAAG,QAAQ,GAAG,SAAS,CAAC;IAClD,cAAc,EAAE,MAAM,CAAC;IACvB,QAAQ,EAAE,OAAO,CAAC;IAClB,wBAAwB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CAClD;AAED,wBAAgB,uBAAuB,CAAC,EACtC,cAAc,EACd,eAAe,EACf,SAAS,EACT,eAAe,EACf,gBAAgB,EAChB,cAAc,EACd,kBAAkB,EAClB,cAAc,EACd,QAAQ,EACR,wBAAwB,GACzB,EAAE,qBAAqB;;;;;;;;;EAwCvB;AAED,UAAU,mBAAmB;IAC3B,SAAS,EAAE,MAAM,CAAC;IAClB,iBAAiB,EAAE,OAAO,CAAC;IAC3B,aAAa,EAAE,MAAM,CAAC;IACtB,mBAAmB,EAAE,OAAO,CAAC;IAC7B,mBAAmB,EAAE,MAAM,CAAC;CAC7B;AAED,MAAM,WAAW,oBAAoB;IACnC,OAAO,EAAE,MAAM,CAAC;IAChB,aAAa,EAAE,MAAM,CAAC;IACtB,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,wBAAgB,qBAAqB,CAAC,EACpC,SAAS,EACT,iBAAiB,EACjB,aAAa,EACb,mBAAmB,EACnB,mBAAmB,GACpB,EAAE,mBAAmB,GAAG,oBAAoB,CAe5C"}

package/lib/internal/template/app-layout/visual-refresh-toolbar/compute-layout.js

@@ -1,21 +1,32 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 import { SPLIT_PANEL_MIN_WIDTH } from '../split-panel';
-export function computeHorizontalLayout({ navigationOpen, navigationWidth, placement, minContentWidth, activeDrawerSize, splitPanelOpen, splitPanelPosition, splitPanelSize, isMobile, }) {
+export function computeHorizontalLayout({ navigationOpen, navigationWidth, placement, minContentWidth, activeDrawerSize, splitPanelOpen, splitPanelPosition, splitPanelSize, isMobile, activeGlobalDrawersSizes, }) {
     const contentPadding = 2 * 24; // space-xl
     const activeNavigationWidth = navigationOpen ? navigationWidth : 0;
-    const resizableSpaceAvailable = Math.max(0, placement.inlineSize - minContentWidth - contentPadding - activeNavigationWidth);
+    let resizableSpaceAvailable = Math.max(0, placement.inlineSize - minContentWidth - contentPadding - activeNavigationWidth);
+    const totalActiveGlobalDrawersSize = Object.values(activeGlobalDrawersSizes).reduce((acc, size) => acc + size, 0);
     const splitPanelForcedPosition = resizableSpaceAvailable - activeDrawerSize < SPLIT_PANEL_MIN_WIDTH || isMobile;
     const resolvedSplitPanelPosition = splitPanelForcedPosition ? 'bottom' : splitPanelPosition !== null && splitPanelPosition !== void 0 ? splitPanelPosition : 'bottom';
     const sideSplitPanelSize = resolvedSplitPanelPosition === 'side' && splitPanelOpen ? splitPanelSize !== null && splitPanelSize !== void 0 ? splitPanelSize : 0 : 0;
-    const maxSplitPanelSize = resizableSpaceAvailable - activeDrawerSize;
-    const maxDrawerSize = resizableSpaceAvailable - sideSplitPanelSize;
+    const maxSplitPanelSize = Math.max(resizableSpaceAvailable - totalActiveGlobalDrawersSize - activeDrawerSize, 0);
+    resizableSpaceAvailable -= sideSplitPanelSize;
+    const maxDrawerSize = resizableSpaceAvailable - totalActiveGlobalDrawersSize;
+    const maxGlobalDrawersSizes = Object.keys(activeGlobalDrawersSizes).reduce((acc, drawerId) => {
+        return Object.assign(Object.assign({}, acc), { [drawerId]: resizableSpaceAvailable -
+                activeDrawerSize -
+                totalActiveGlobalDrawersSize +
+                activeGlobalDrawersSizes[drawerId] });
+    }, {});
     return {
         splitPanelPosition: resolvedSplitPanelPosition,
         splitPanelForcedPosition,
         sideSplitPanelSize,
         maxSplitPanelSize,
         maxDrawerSize,
+        maxGlobalDrawersSizes,
+        totalActiveGlobalDrawersSize,
+        resizableSpaceAvailable,
     };
 }
 export function computeVerticalLayout({ topOffset, hasVisibleToolbar, toolbarHeight, stickyNotifications, notificationsHeight, }) {