@cloudscape-design/components 3.0.245 → 3.0.247

package/app-layout/drawer/styles.css.js

@@ -1,10 +1,15 @@
 
     import './styles.scoped.css';
     export default {
-  "toggle": "awsui_toggle_1uo6m_1edrs_97",
-  "drawer": "awsui_drawer_1uo6m_1edrs_102",
-  "drawer-mobile": "awsui_drawer-mobile_1uo6m_1edrs_108",
-  "drawer-closed": "awsui_drawer-closed_1uo6m_1edrs_111",
-  "drawer-content": "awsui_drawer-content_1uo6m_1edrs_119"
+  "toggle": "awsui_toggle_1uo6m_y69q2_97",
+  "drawer-triggers": "awsui_drawer-triggers_1uo6m_y69q2_102",
+  "drawer": "awsui_drawer_1uo6m_y69q2_102",
+  "drawer-mobile": "awsui_drawer-mobile_1uo6m_y69q2_112",
+  "drawer-closed": "awsui_drawer-closed_1uo6m_y69q2_115",
+  "drawer-content": "awsui_drawer-content_1uo6m_y69q2_123",
+  "non-interactive": "awsui_non-interactive_1uo6m_y69q2_141",
+  "trigger": "awsui_trigger_1uo6m_y69q2_149",
+  "trigger-drawer": "awsui_trigger-drawer_1uo6m_y69q2_158",
+  "selected": "awsui_selected_1uo6m_y69q2_158"
 };
   

package/app-layout/drawer/styles.scoped.css

@@ -94,46 +94,82 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
-.awsui_toggle_1uo6m_1edrs_97:not(#\9) {
+.awsui_toggle_1uo6m_y69q2_97:not(#\9) {
   box-sizing: border-box;
   padding: var(--space-xxs-ynfts5, 4px) 7px;
 }
 
-.awsui_drawer_1uo6m_1edrs_102:not(#\9) {
+.awsui_drawer-triggers_1uo6m_y69q2_102:not(#\9) {
+  box-sizing: border-box;
+}
+
+.awsui_drawer_1uo6m_y69q2_102:not(#\9) {
   flex-shrink: 0;
   position: relative;
   word-wrap: break-word;
   box-shadow: var(--shadow-panel-gp3bf2, 0px 1px 1px 1px #e9ebed, 0px 6px 36px rgba(0, 7, 22, 0.1));
 }
-.awsui_drawer_1uo6m_1edrs_102:not(#\9):not(.awsui_drawer-mobile_1uo6m_1edrs_108) {
+.awsui_drawer_1uo6m_y69q2_102:not(#\9):not(.awsui_drawer-mobile_1uo6m_y69q2_112) {
   z-index: 830;
 }
-.awsui_drawer-closed_1uo6m_1edrs_111:not(#\9) {
+.awsui_drawer-closed_1uo6m_y69q2_115:not(#\9) {
   min-width: 40px;
   cursor: pointer;
 }
-.awsui_drawer-closed_1uo6m_1edrs_111.awsui_drawer-mobile_1uo6m_1edrs_108:not(#\9) {
+.awsui_drawer-closed_1uo6m_y69q2_115.awsui_drawer-mobile_1uo6m_y69q2_112:not(#\9) {
   display: none;
 }
 
-.awsui_drawer-content_1uo6m_1edrs_119:not(#\9) {
+.awsui_drawer-content_1uo6m_y69q2_123:not(#\9) {
   position: fixed;
   overflow: auto;
   background-color: var(--color-background-layout-panel-content-808qum, #ffffff);
 }
-.awsui_drawer-mobile_1uo6m_1edrs_108 > .awsui_drawer-content_1uo6m_1edrs_119:not(#\9) {
+.awsui_drawer-mobile_1uo6m_y69q2_112 > .awsui_drawer-content_1uo6m_y69q2_123:not(#\9) {
   z-index: 1001;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
 }
-.awsui_drawer-closed_1uo6m_1edrs_111 > .awsui_drawer-content_1uo6m_1edrs_119:not(#\9) {
+.awsui_drawer-closed_1uo6m_y69q2_115 > .awsui_drawer-content_1uo6m_y69q2_123:not(#\9) {
   width: 40px;
 }
-.awsui_drawer-closed_1uo6m_1edrs_111 > .awsui_drawer-content_1uo6m_1edrs_119:not(#\9):hover {
+.awsui_drawer-closed_1uo6m_y69q2_115 > .awsui_drawer-content_1uo6m_y69q2_123:not(#\9):hover {
   background: var(--color-background-layout-panel-hover-0bg3gq, #e9ebed);
 }
-.awsui_drawer-content_1uo6m_1edrs_119 > [aria-hidden=true]:not(#\9) {
+.awsui_drawer-closed_1uo6m_y69q2_115 > .awsui_drawer-content_1uo6m_y69q2_123.awsui_non-interactive_1uo6m_y69q2_141:not(#\9):hover {
+  background: var(--color-background-layout-panel-content-808qum, #ffffff);
+  cursor: default;
+}
+.awsui_drawer-content_1uo6m_y69q2_123 > [aria-hidden=true]:not(#\9) {
   display: none;
+}
+
+.awsui_drawer-triggers_1uo6m_y69q2_102 > .awsui_trigger_1uo6m_y69q2_149:not(#\9) {
+  padding: var(--space-scaled-xs-6859qs, 8px) 6px;
+  margin: 1px 6px;
+  border-radius: 0;
+  border: 0;
+}
+.awsui_drawer-triggers_1uo6m_y69q2_102 > .awsui_trigger_1uo6m_y69q2_149:not(#\9):not(:last-child) {
+  box-shadow: 0px 1px var(--color-shadow-layout-panel-trigger-t4yazw, #d1d5db);
+}
+.awsui_drawer-triggers_1uo6m_y69q2_102 > .awsui_trigger-drawer_1uo6m_y69q2_158:not(#\9):hover:not(.awsui_selected_1uo6m_y69q2_158) {
+  color: var(--color-text-layout-panel-trigger-hover-yw2kb4, #0972d3);
+}
+.awsui_drawer-triggers_1uo6m_y69q2_102 > .awsui_trigger-drawer_1uo6m_y69q2_158:not(#\9):hover:not(.awsui_selected_1uo6m_y69q2_158):not(:last-child) {
+  box-shadow: 0px 1px var(--color-shadow-layout-panel-trigger-t4yazw, #d1d5db);
+}
+.awsui_drawer-triggers_1uo6m_y69q2_102 > .awsui_trigger_1uo6m_y69q2_149.awsui_selected_1uo6m_y69q2_158:not(#\9) {
+  padding: var(--space-scaled-xs-6859qs, 8px) var(--space-s-hv8c1d, 12px);
+  margin: 0;
+  border-top: 1px solid var(--color-background-layout-panel-trigger-active-uf4o0r, #00142b);
+  border-bottom: 1px solid var(--color-background-layout-panel-trigger-active-uf4o0r, #00142b);
+  background-color: var(--color-background-layout-panel-trigger-active-uf4o0r, #00142b);
+  color: var(--color-text-layout-panel-trigger-active-mt4zu0, #ffffff);
+  box-shadow: none;
+}
+.awsui_drawer-triggers_1uo6m_y69q2_102 > .awsui_trigger_1uo6m_y69q2_149.awsui_selected_1uo6m_y69q2_158:not(#\9):hover {
+  cursor: default;
 }

package/app-layout/drawer/styles.selectors.js

@@ -2,10 +2,15 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "toggle": "awsui_toggle_1uo6m_1edrs_97",
-  "drawer": "awsui_drawer_1uo6m_1edrs_102",
-  "drawer-mobile": "awsui_drawer-mobile_1uo6m_1edrs_108",
-  "drawer-closed": "awsui_drawer-closed_1uo6m_1edrs_111",
-  "drawer-content": "awsui_drawer-content_1uo6m_1edrs_119"
+  "toggle": "awsui_toggle_1uo6m_y69q2_97",
+  "drawer-triggers": "awsui_drawer-triggers_1uo6m_y69q2_102",
+  "drawer": "awsui_drawer_1uo6m_y69q2_102",
+  "drawer-mobile": "awsui_drawer-mobile_1uo6m_y69q2_112",
+  "drawer-closed": "awsui_drawer-closed_1uo6m_y69q2_115",
+  "drawer-content": "awsui_drawer-content_1uo6m_y69q2_123",
+  "non-interactive": "awsui_non-interactive_1uo6m_y69q2_141",
+  "trigger": "awsui_trigger_1uo6m_y69q2_149",
+  "trigger-drawer": "awsui_trigger-drawer_1uo6m_y69q2_158",
+  "selected": "awsui_selected_1uo6m_y69q2_158"
 };
   

package/app-layout/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"lib/default/","sources":["app-layout/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAwE,MAAM,OAAO,CAAC;AAM7F,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAqC9C,OAAO,EAAE,cAAc,EAAE,CAAC;AAE1B,QAAA,MAAM,SAAS,2FA8Bd,CAAC;AAgeF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"lib/default/","sources":["app-layout/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAwE,MAAM,OAAO,CAAC;AAM7F,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAyC9C,OAAO,EAAE,cAAc,EAAE,CAAC;AAE1B,QAAA,MAAM,SAAS,2FA8Bd,CAAC;AAsqBF,eAAe,SAAS,CAAC"}

package/app-layout/index.js

@@ -25,7 +25,9 @@ import { CONSTRAINED_MAIN_PANEL_MIN_HEIGHT, CONSTRAINED_PAGE_HEIGHT, getSplitPan
 import useBaseComponent from '../internal/hooks/use-base-component';
 import { useVisualRefresh } from '../internal/hooks/use-visual-mode';
 import ContentWrapper from './content-wrapper';
-import { Drawer } from './drawer';
+import { Drawer, DrawerTriggersBar } from './drawer';
+import { ResizableDrawer } from './drawer/resizable-drawer';
+import { togglesConfig } from './toggles';
 import { SideSplitPanelDrawer } from './split-panel-drawer';
 import useAppLayoutOffsets from './utils/use-content-width';
 import { isDevelopment } from '../internal/is-development';
@@ -33,6 +35,7 @@ import { warnOnce } from '../internal/logging';
 import RefreshedAppLayout from './visual-refresh';
 import { useInternalI18n } from '../internal/i18n/context';
 import { useSplitPanelFocusControl } from './utils/use-split-panel-focus-control';
+import { useDrawerFocusControl } from './utils/use-drawer-focus-control';
 const AppLayout = React.forwardRef((_a, ref) => {
     var _b, _c, _d, _e, _f, _g, _h;
     var { contentType = 'default', headerSelector = '#b #h', footerSelector = '#b #f' } = _a, rest = __rest(_a, ["contentType", "headerSelector", "footerSelector"]);
@@ -53,20 +56,52 @@ const AppLayout = React.forwardRef((_a, ref) => {
     const baseProps = getBaseProps(rest);
     return (React.createElement("div", Object.assign({ ref: __internalRootRef }, baseProps), isRefresh ? React.createElement(RefreshedAppLayout, Object.assign({}, props, { ref: ref })) : React.createElement(OldAppLayout, Object.assign({}, props, { ref: ref }))));
 });
-const OldAppLayout = React.forwardRef(({ navigation, navigationWidth = 280, navigationHide, navigationOpen: controlledNavigationOpen, tools, toolsWidth = 290, toolsHide, toolsOpen: controlledToolsOpen, breadcrumbs, notifications, stickyNotifications, contentHeader, disableContentHeaderOverlap, content, contentType = 'default', disableContentPaddings, disableBodyScroll, maxContentWidth, minContentWidth, headerSelector = '#b #h', footerSelector = '#b #f', ariaLabels, splitPanel, splitPanelSize: controlledSplitPanelSize, splitPanelOpen: controlledSplitPanelOpen, splitPanelPreferences: controlledSplitPanelPreferences, onSplitPanelPreferencesChange, onSplitPanelResize, onSplitPanelToggle, onNavigationChange, onToolsChange, }, ref) => {
-    var _a;
+const OldAppLayout = React.forwardRef((_a, ref) => {
+    var _b;
+    var { navigation, navigationWidth = 280, navigationHide, navigationOpen: controlledNavigationOpen, tools, toolsWidth = 290, toolsHide, toolsOpen: controlledToolsOpen, breadcrumbs, notifications, stickyNotifications, contentHeader, disableContentHeaderOverlap, content, contentType = 'default', disableContentPaddings, disableBodyScroll, maxContentWidth, minContentWidth, headerSelector = '#b #h', footerSelector = '#b #f', ariaLabels, splitPanel, splitPanelSize: controlledSplitPanelSize, splitPanelOpen: controlledSplitPanelOpen, splitPanelPreferences: controlledSplitPanelPreferences, onSplitPanelPreferencesChange, onSplitPanelResize, onSplitPanelToggle, onNavigationChange, onToolsChange } = _a, props = __rest(_a, ["navigation", "navigationWidth", "navigationHide", "navigationOpen", "tools", "toolsWidth", "toolsHide", "toolsOpen", "breadcrumbs", "notifications", "stickyNotifications", "contentHeader", "disableContentHeaderOverlap", "content", "contentType", "disableContentPaddings", "disableBodyScroll", "maxContentWidth", "minContentWidth", "headerSelector", "footerSelector", "ariaLabels", "splitPanel", "splitPanelSize", "splitPanelOpen", "splitPanelPreferences", "onSplitPanelPreferencesChange", "onSplitPanelResize", "onSplitPanelToggle", "onNavigationChange", "onToolsChange"]);
     if (isDevelopment) {
         if (controlledToolsOpen && toolsHide) {
             warnOnce('AppLayout', `You have enabled both the \`toolsOpen\` prop and the \`toolsHide\` prop. This is not supported. Set \`toolsOpen\` to \`false\` when you set \`toolsHide\` to \`true\`.`);
         }
     }
+    const drawers = props.drawers;
     const rootRef = useRef(null);
     const isMobile = useMobile();
     const defaults = applyDefaults(contentType, { maxContentWidth, minContentWidth }, false);
     const [navigationOpen = false, setNavigationOpen] = useControllable(controlledNavigationOpen, onNavigationChange, isMobile ? false : defaults.navigationOpen, { componentName: 'AppLayout', controlledProp: 'navigationOpen', changeHandler: 'onNavigationChange' });
     const [toolsOpen = false, setToolsOpen] = useControllable(controlledToolsOpen, onToolsChange, isMobile ? false : defaults.toolsOpen, { componentName: 'AppLayout', controlledProp: 'toolsOpen', changeHandler: 'onToolsChange' });
+    const [activeDrawerId, setActiveDrawersId] = useControllable(drawers === null || drawers === void 0 ? void 0 : drawers.activeDrawerId, drawers === null || drawers === void 0 ? void 0 : drawers.onChange, isMobile ? false : tools ? defaults.toolsOpen : '', {
+        componentName: 'AppLayout',
+        controlledProp: 'activeDrawerId',
+        changeHandler: 'onChange',
+    });
+    const { iconName, getLabels } = togglesConfig.tools;
+    const { mainLabel, closeLabel, openLabel } = getLabels(ariaLabels);
+    const toolsItem = {
+        id: 'tools',
+        content: tools,
+        ariaLabels: {
+            triggerButton: openLabel,
+            closeButton: closeLabel,
+            content: mainLabel,
+        },
+        trigger: {
+            iconName: iconName,
+        },
+    };
+    const getAllDrawerItems = () => {
+        if (drawers) {
+            return tools ? [toolsItem, ...drawers.items] : drawers.items;
+        }
+    };
+    const selectedDrawer = tools && toolsOpen
+        ? toolsItem
+        : drawers &&
+            drawers.items &&
+            getAllDrawerItems().filter((drawerItem) => drawerItem.id === activeDrawerId)[0];
     const { refs: navigationRefs, setFocus: focusNavButtons } = useFocusControl(navigationOpen);
-    const { refs: toolsRefs, setFocus: focusToolsButtons, loseFocus: loseToolsFocus, } = useFocusControl(toolsOpen, true);
+    const { refs: toolsRefs, setFocus: focusToolsButtons, loseFocus: loseToolsFocus, } = useFocusControl(toolsOpen || activeDrawerId, true);
+    const { refs: drawerRefs, setFocus: focusDrawersButtons, loseFocus: loseDrawersFocus, setLastInteraction: setDrawerLastInteraction, } = useDrawerFocusControl([selectedDrawer === null || selectedDrawer === void 0 ? void 0 : selectedDrawer.resizable], toolsOpen || activeDrawerId, true);
     const onNavigationToggle = useCallback((open) => {
         setNavigationOpen(open);
         focusNavButtons();
@@ -87,6 +122,7 @@ const OldAppLayout = React.forwardRef(({ navigation, navigationWidth = 280, navi
     const toolsVisible = !toolsHide && toolsOpen;
     const { contentHeightStyle, headerHeight, footerHeight } = useContentHeight(headerSelector, footerSelector, disableBodyScroll);
     const [isSplitpanelForcedPosition, setIsSplitpanelForcedPosition] = useState(false);
+    const [isResizeInvalid, setIsResizeInvalid] = useState(false);
     const [notificationsHeight, notificationsRef] = useContainerQuery(rect => rect.height);
     const anyPanelOpen = navigationVisible || toolsVisible;
     const hasRenderedNotifications = notificationsHeight ? notificationsHeight > 0 : false;
@@ -101,6 +137,12 @@ const OldAppLayout = React.forwardRef(({ navigation, navigationWidth = 280, navi
         controlledProp: 'splitPanelOpen',
         changeHandler: 'onSplitPanelToggle',
     });
+    const defaultDrawerSize = (selectedDrawer === null || selectedDrawer === void 0 ? void 0 : selectedDrawer.size) || toolsWidth;
+    const [drawerSize = defaultDrawerSize, setDrawerSize] = useControllable(selectedDrawer === null || selectedDrawer === void 0 ? void 0 : selectedDrawer.size, drawers === null || drawers === void 0 ? void 0 : drawers.onResize, defaultDrawerSize, {
+        componentName: 'AppLayout',
+        controlledProp: 'drawerSize',
+        changeHandler: 'onDrawerSize',
+    });
     const splitPanelPosition = (splitPanelPreferences === null || splitPanelPreferences === void 0 ? void 0 : splitPanelPreferences.position) || 'bottom';
     const [splitPanelReportedToggle, setSplitPanelReportedToggle] = useState({
         displayed: false,
@@ -109,11 +151,19 @@ const OldAppLayout = React.forwardRef(({ navigation, navigationWidth = 280, navi
     const splitPanelDisplayed = !!(splitPanel && (splitPanelReportedToggle.displayed || splitPanelOpen));
     const closedDrawerWidth = 40;
     const effectiveNavigationWidth = navigationHide ? 0 : navigationOpen ? navigationWidth : closedDrawerWidth;
-    const effectiveToolsWidth = toolsHide && (!splitPanelDisplayed || (splitPanelPreferences === null || splitPanelPreferences === void 0 ? void 0 : splitPanelPreferences.position) !== 'side')
-        ? 0
-        : toolsOpen
-            ? toolsWidth
-            : closedDrawerWidth;
+    const getEffectiveToolsWidth = () => {
+        if (toolsHide && (!splitPanelDisplayed || (splitPanelPreferences === null || splitPanelPreferences === void 0 ? void 0 : splitPanelPreferences.position) !== 'side') && !drawers) {
+            return 0;
+        }
+        if (selectedDrawer === null || selectedDrawer === void 0 ? void 0 : selectedDrawer.resizable) {
+            return drawerSize;
+        }
+        if (toolsOpen || activeDrawerId) {
+            return toolsWidth;
+        }
+        return closedDrawerWidth;
+    };
+    const effectiveToolsWidth = getEffectiveToolsWidth();
     const defaultSplitPanelSize = getSplitPanelDefaultSize(splitPanelPosition);
     const [splitPanelSize = defaultSplitPanelSize, setSplitPanelSize] = useControllable(controlledSplitPanelSize, onSplitPanelResize, defaultSplitPanelSize, {
         componentName: 'AppLayout',
@@ -135,6 +185,10 @@ const OldAppLayout = React.forwardRef(({ navigation, navigationWidth = 280, navi
         setSplitPanelSize(detail.size);
         fireNonCancelableEvent(onSplitPanelResize, detail);
     }, [setSplitPanelSize, onSplitPanelResize]);
+    const onDrawerSizeSet = (detail) => {
+        setDrawerSize(detail.size);
+        fireNonCancelableEvent(drawers.onResize, detail);
+    };
     const onSplitPanelToggleHandler = useCallback(() => {
         setSplitPanelOpen(!splitPanelOpen);
         setSplitPanelLastInteraction({ type: splitPanelOpen ? 'close' : 'open' });
@@ -152,6 +206,18 @@ const OldAppLayout = React.forwardRef(({ navigation, navigationWidth = 280, navi
         const spaceTaken = finalSplitPanePosition === 'side' ? splitPanelSize : 0;
         return Math.max(0, spaceTaken + spaceAvailable);
     });
+    const getDrawerMaxWidth = useStableEventHandler(() => {
+        if (!mainContentRef.current || !defaults.minContentWidth) {
+            return NaN;
+        }
+        const width = parseInt(getComputedStyle(mainContentRef.current).width);
+        // when disableContentPaddings is true there is less available space,
+        // so we subtract space-scaled-2x-xxxl * 2 for left and right padding
+        const contentPadding = disableContentPaddings ? 80 : 0;
+        const spaceAvailable = width - defaults.minContentWidth - contentPadding;
+        const spaceTaken = drawerSize;
+        return Math.max(0, spaceTaken + spaceAvailable);
+    });
     const getSplitPanelMaxHeight = useStableEventHandler(() => {
         if (typeof document === 'undefined') {
             return 0; // render the split panel in its minimum possible size
@@ -182,20 +248,39 @@ const OldAppLayout = React.forwardRef(({ navigation, navigationWidth = 280, navi
     useEffect(() => {
         const contentWidth = contentWidthWithSplitPanel - splitPanelSize;
         setIsSplitpanelForcedPosition(isMobile || (defaults.minContentWidth || 0) > contentWidth);
+        setIsResizeInvalid(isMobile || (defaults.minContentWidth || 0) > contentWidthWithSplitPanel);
         // This is a workaround to avoid a forced position due to splitPanelSize, which is
         // user controlled variable.
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [contentWidthWithSplitPanel, defaults.minContentWidth, isMobile]);
+    }, [contentWidthWithSplitPanel, drawerSize, defaults.minContentWidth, isMobile]);
     const navigationClosedWidth = navigationHide || isMobile ? 0 : closedDrawerWidth;
-    const toolsClosedWidth = toolsHide || isMobile ? 0 : closedDrawerWidth;
+    const toolsClosedWidth = toolsHide || isMobile || (!drawers && toolsHide) ? 0 : closedDrawerWidth;
     const contentMaxWidthStyle = !isMobile ? { maxWidth: defaults.maxContentWidth } : undefined;
     const [splitPanelReportedSize, setSplitPanelReportedSize] = useState(0);
     const [splitPanelReportedHeaderHeight, setSplitPanelReportedHeaderHeight] = useState(0);
+    const getSplitPanelRightOffset = () => {
+        if (isMobile) {
+            return 0;
+        }
+        if (drawers) {
+            if (activeDrawerId) {
+                if (selectedDrawer.resizable && !isResizeInvalid) {
+                    return drawerSize + closedDrawerWidth;
+                }
+                return toolsWidth + closedDrawerWidth;
+            }
+            return closedDrawerWidth;
+        }
+        if (!toolsHide && toolsOpen) {
+            return toolsWidth;
+        }
+        return toolsClosedWidth;
+    };
     const splitPanelContext = {
         topOffset: headerHeight + (finalSplitPanePosition === 'bottom' ? stickyNotificationsHeight || 0 : 0),
         bottomOffset: footerHeight,
         leftOffset: leftOffset + (isMobile ? 0 : !navigationHide && navigationOpen ? navigationWidth : navigationClosedWidth),
-        rightOffset: rightOffset + (isMobile ? 0 : !toolsHide && toolsOpen ? toolsWidth : toolsClosedWidth),
+        rightOffset: rightOffset + getSplitPanelRightOffset(),
         position: finalSplitPanePosition,
         size: splitPanelSize,
         getMaxWidth: getSplitPanelMaxWidth,
@@ -223,7 +308,8 @@ const OldAppLayout = React.forwardRef(({ navigation, navigationWidth = 280, navi
         toolsPadding: 
         // tools padding is displayed in one of the three cases
         // 1. Nothing on the that screen edge (no tools panel and no split panel)
-        (toolsHide && (!splitPanelDisplayed || finalSplitPanePosition !== 'side')) ||
+        toolsHide ||
+            (drawers && !activeDrawerId && (!splitPanelDisplayed || finalSplitPanePosition !== 'side')) ||
             // 2. Tools panel is present and open
             toolsVisible ||
             // 3. Split panel is open in side position
@@ -239,14 +325,29 @@ const OldAppLayout = React.forwardRef(({ navigation, navigationWidth = 280, navi
         },
         focusToolsClose: () => focusToolsButtons(true),
     }), [isMobile, onNavigationToggle, onToolsToggle, focusToolsButtons]);
-    const splitPanelBottomOffset = (_a = (!splitPanelDisplayed || finalSplitPanePosition !== 'bottom'
+    const splitPanelBottomOffset = (_b = (!splitPanelDisplayed || finalSplitPanePosition !== 'bottom'
         ? undefined
         : splitPanelOpen
             ? splitPanelReportedSize
-            : splitPanelReportedHeaderHeight)) !== null && _a !== void 0 ? _a : undefined;
+            : splitPanelReportedHeaderHeight)) !== null && _b !== void 0 ? _b : undefined;
     return (React.createElement("div", { className: clsx(styles.root, testutilStyles.root, disableBodyScroll && styles['root-no-scroll']), ref: rootRef },
         React.createElement("div", { className: styles['layout-wrapper'], style: contentHeightStyle },
-            isMobile && (!toolsHide || !navigationHide || breadcrumbs) && (React.createElement(MobileToolbar, { anyPanelOpen: anyPanelOpen, toggleRefs: { navigation: navigationRefs.toggle, tools: toolsRefs.toggle }, topOffset: headerHeight, ariaLabels: ariaLabels, navigationHide: navigationHide, toolsHide: toolsHide, onNavigationOpen: () => onNavigationToggle(true), onToolsOpen: () => onToolsToggle(true), unfocusable: anyPanelOpen }, breadcrumbs)),
+            isMobile && (!toolsHide || !navigationHide || breadcrumbs) && (React.createElement(MobileToolbar, { anyPanelOpen: anyPanelOpen, toggleRefs: { navigation: navigationRefs.toggle, tools: toolsRefs.toggle }, topOffset: headerHeight, ariaLabels: ariaLabels, navigationHide: navigationHide, toolsHide: toolsHide, onNavigationOpen: () => onNavigationToggle(true), onToolsOpen: () => onToolsToggle(true), unfocusable: anyPanelOpen, drawers: drawers
+                    ? {
+                        items: tools && !toolsHide ? [toolsItem, ...drawers.items] : drawers.items,
+                        activeDrawerId: selectedDrawer === null || selectedDrawer === void 0 ? void 0 : selectedDrawer.id,
+                        onChange: changeDetail => {
+                            if ((selectedDrawer === null || selectedDrawer === void 0 ? void 0 : selectedDrawer.id) !== changeDetail.activeDrawerId) {
+                                onToolsToggle(changeDetail.activeDrawerId === 'tools');
+                                focusDrawersButtons();
+                                setActiveDrawersId(changeDetail.activeDrawerId);
+                                setDrawerLastInteraction({ type: 'open' });
+                                fireNonCancelableEvent(drawers.onChange, changeDetail.activeDrawerId);
+                            }
+                        },
+                        ariaLabel: drawers.ariaLabel,
+                    }
+                    : undefined }, breadcrumbs)),
             React.createElement("div", { className: clsx(styles.layout, disableBodyScroll && styles['layout-no-scroll']) },
                 !navigationHide && (React.createElement(Drawer, { contentClassName: testutilStyles.navigation, toggleClassName: testutilStyles['navigation-toggle'], closeClassName: testutilStyles['navigation-close'], ariaLabels: ariaLabels, bottomOffset: footerHeight, topOffset: headerHeight, isMobile: isMobile, isOpen: navigationOpen, onClick: isMobile ? onNavigationClick : undefined, onToggle: onNavigationToggle, toggleRefs: navigationRefs, type: "navigation", width: navigationWidth }, navigation)),
                 React.createElement("main", { ref: legacyScrollRootRef, className: clsx(styles['layout-main'], {
@@ -281,7 +382,31 @@ const OldAppLayout = React.forwardRef(({ navigation, navigationWidth = 280, navi
                                 } }, content))),
                     finalSplitPanePosition === 'bottom' && splitPanelWrapped),
                 finalSplitPanePosition === 'side' && (React.createElement(SideSplitPanelDrawer, { topOffset: headerHeight, bottomOffset: footerHeight, displayed: splitPanelDisplayed, width: splitPanelOpen ? splitPanelSize : undefined }, splitPanelWrapped)),
-                !toolsHide && (React.createElement(Drawer, { contentClassName: testutilStyles.tools, toggleClassName: testutilStyles['tools-toggle'], closeClassName: testutilStyles['tools-close'], ariaLabels: ariaLabels, width: toolsWidth, bottomOffset: footerHeight, topOffset: headerHeight, isMobile: isMobile, onToggle: onToolsToggle, isOpen: toolsOpen, toggleRefs: toolsRefs, type: "tools", onLoseFocus: loseToolsFocus }, tools))))));
+                ((drawers && (selectedDrawer === null || selectedDrawer === void 0 ? void 0 : selectedDrawer.id)) || (!drawers && !toolsHide)) &&
+                    (drawers ? (React.createElement(ResizableDrawer, { contentClassName: (selectedDrawer === null || selectedDrawer === void 0 ? void 0 : selectedDrawer.id) === 'tools' ? testutilStyles.tools : '', toggleClassName: (selectedDrawer === null || selectedDrawer === void 0 ? void 0 : selectedDrawer.id) === 'tools' ? testutilStyles['tools-toggle'] : '', closeClassName: (selectedDrawer === null || selectedDrawer === void 0 ? void 0 : selectedDrawer.id) === 'tools' ? testutilStyles['tools-close'] : '', ariaLabels: ariaLabels, drawersAriaLabels: selectedDrawer === null || selectedDrawer === void 0 ? void 0 : selectedDrawer.ariaLabels, width: (selectedDrawer === null || selectedDrawer === void 0 ? void 0 : selectedDrawer.resizable) && !isResizeInvalid ? drawerSize : toolsWidth, bottomOffset: footerHeight, topOffset: headerHeight, isMobile: isMobile, onToggle: onToolsToggle, isOpen: toolsOpen || activeDrawerId !== undefined, toggleRefs: toolsRefs, type: "tools", onLoseFocus: drawers ? loseDrawersFocus : loseToolsFocus, activeDrawer: selectedDrawer, drawers: {
+                            items: tools && !toolsHide ? [toolsItem, ...drawers.items] : drawers.items,
+                            activeDrawerId: selectedDrawer.id,
+                            onChange: changeDetail => {
+                                onToolsToggle(false);
+                                setDrawerLastInteraction({ type: 'close' });
+                                setActiveDrawersId(changeDetail.activeDrawerId);
+                                fireNonCancelableEvent(drawers.onChange, changeDetail.activeDrawerId);
+                            },
+                        }, size: (selectedDrawer === null || selectedDrawer === void 0 ? void 0 : selectedDrawer.resizable) && !isResizeInvalid ? drawerSize : toolsWidth, onResize: onDrawerSizeSet, refs: drawerRefs, getMaxWidth: getDrawerMaxWidth }, selectedDrawer.content)) : (React.createElement(Drawer, { contentClassName: testutilStyles.tools, toggleClassName: testutilStyles['tools-toggle'], closeClassName: testutilStyles['tools-close'], ariaLabels: ariaLabels, width: effectiveToolsWidth, bottomOffset: footerHeight, topOffset: headerHeight, isMobile: isMobile, onToggle: onToolsToggle, isOpen: toolsOpen, toggleRefs: toolsRefs, type: "tools", onLoseFocus: loseToolsFocus }, tools))),
+                drawers && (React.createElement(DrawerTriggersBar, { contentClassName: testutilStyles.tools, bottomOffset: footerHeight, topOffset: headerHeight, isMobile: isMobile, drawers: {
+                        items: tools && !toolsHide ? [toolsItem, ...drawers.items] : drawers.items,
+                        activeDrawerId: selectedDrawer === null || selectedDrawer === void 0 ? void 0 : selectedDrawer.id,
+                        onChange: changeDetail => {
+                            if ((selectedDrawer === null || selectedDrawer === void 0 ? void 0 : selectedDrawer.id) !== changeDetail.activeDrawerId) {
+                                onToolsToggle(changeDetail.activeDrawerId === 'tools');
+                                focusDrawersButtons();
+                                setActiveDrawersId(changeDetail.activeDrawerId);
+                                setDrawerLastInteraction({ type: 'open' });
+                                fireNonCancelableEvent(drawers.onChange, changeDetail.activeDrawerId);
+                            }
+                        },
+                        ariaLabel: drawers.ariaLabel,
+                    } }))))));
 });
 applyDisplayName(AppLayout, 'AppLayout');
 export default AppLayout;