@cloudscape-design/components-themeable 3.0.785 → 3.0.787

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

@@ -1 +1 @@
-{"version":3,"file":"compute-layout.js","sourceRoot":"","sources":["../../../../src/app-layout/visual-refresh-toolbar/compute-layout.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AAGtC,OAAO,EAAE,qBAAqB,EAAE,MAAM,gBAAgB,CAAC;AAcvD,MAAM,UAAU,uBAAuB,CAAC,EACtC,cAAc,EACd,eAAe,EACf,SAAS,EACT,eAAe,EACf,gBAAgB,EAChB,cAAc,EACd,kBAAkB,EAClB,cAAc,EACd,QAAQ,GACc;IACtB,MAAM,cAAc,GAAG,CAAC,GAAG,EAAE,CAAC,CAAC,WAAW;IAC1C,MAAM,qBAAqB,GAAG,cAAc,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,CAAC;IAEnE,MAAM,uBAAuB,GAAG,IAAI,CAAC,GAAG,CACtC,CAAC,EACD,SAAS,CAAC,UAAU,GAAG,eAAe,GAAG,cAAc,GAAG,qBAAqB,CAChF,CAAC;IAEF,MAAM,wBAAwB,GAAG,uBAAuB,GAAG,gBAAgB,GAAG,qBAAqB,IAAI,QAAQ,CAAC;IAChH,MAAM,0BAA0B,GAAG,wBAAwB,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,kBAAkB,aAAlB,kBAAkB,cAAlB,kBAAkB,GAAI,QAAQ,CAAC;IACxG,MAAM,kBAAkB,GAAG,0BAA0B,KAAK,MAAM,IAAI,cAAc,CAAC,CAAC,CAAC,cAAc,aAAd,cAAc,cAAd,cAAc,GAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAC7G,MAAM,iBAAiB,GAAG,uBAAuB,GAAG,gBAAgB,CAAC;IACrE,MAAM,aAAa,GAAG,uBAAuB,GAAG,kBAAkB,CAAC;IAEnE,OAAO;QACL,kBAAkB,EAAE,0BAA0B;QAC9C,wBAAwB;QACxB,kBAAkB;QAClB,iBAAiB;QACjB,aAAa;KACd,CAAC;AACJ,CAAC;AAiBD,MAAM,UAAU,qBAAqB,CAAC,EACpC,SAAS,EACT,iBAAiB,EACjB,aAAa,EACb,mBAAmB,EACnB,mBAAmB,GACC;IACpB,MAAM,OAAO,GAAG,SAAS,CAAC;IAC1B,IAAI,aAAa,GAAG,SAAS,CAAC;IAC9B,IAAI,OAAO,GAAG,SAAS,CAAC;IAExB,IAAI,iBAAiB,EAAE;QACrB,aAAa,IAAI,aAAa,CAAC;QAC/B,OAAO,IAAI,aAAa,CAAC;KAC1B;IACD,IAAI,MAAM,GAAG,aAAa,CAAC;IAC3B,IAAI,mBAAmB,EAAE;QACvB,MAAM,IAAI,mBAAmB,CAAC;KAC/B;IAED,OAAO,EAAE,OAAO,EAAE,aAAa,EAAE,MAAM,EAAE,OAAO,EAAE,CAAC;AACrD,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { AppLayoutPropsWithDefaults } from '../interfaces';\nimport { SPLIT_PANEL_MIN_WIDTH } from '../split-panel';\n\ninterface HorizontalLayoutInput {\n  navigationOpen: boolean;\n  navigationWidth: number;\n  placement: AppLayoutPropsWithDefaults['placement'];\n  minContentWidth: number;\n  activeDrawerSize: number;\n  splitPanelOpen: boolean;\n  splitPanelPosition: 'side' | 'bottom' | undefined;\n  splitPanelSize: number;\n  isMobile: boolean;\n}\n\nexport function computeHorizontalLayout({\n  navigationOpen,\n  navigationWidth,\n  placement,\n  minContentWidth,\n  activeDrawerSize,\n  splitPanelOpen,\n  splitPanelPosition,\n  splitPanelSize,\n  isMobile,\n}: HorizontalLayoutInput) {\n  const contentPadding = 2 * 24; // space-xl\n  const activeNavigationWidth = navigationOpen ? navigationWidth : 0;\n\n  const resizableSpaceAvailable = Math.max(\n    0,\n    placement.inlineSize - minContentWidth - contentPadding - activeNavigationWidth\n  );\n\n  const splitPanelForcedPosition = resizableSpaceAvailable - activeDrawerSize < SPLIT_PANEL_MIN_WIDTH || isMobile;\n  const resolvedSplitPanelPosition = splitPanelForcedPosition ? 'bottom' : splitPanelPosition ?? 'bottom';\n  const sideSplitPanelSize = resolvedSplitPanelPosition === 'side' && splitPanelOpen ? splitPanelSize ?? 0 : 0;\n  const maxSplitPanelSize = resizableSpaceAvailable - activeDrawerSize;\n  const maxDrawerSize = resizableSpaceAvailable - sideSplitPanelSize;\n\n  return {\n    splitPanelPosition: resolvedSplitPanelPosition,\n    splitPanelForcedPosition,\n    sideSplitPanelSize,\n    maxSplitPanelSize,\n    maxDrawerSize,\n  };\n}\n\ninterface VerticalLayoutInput {\n  topOffset: number;\n  hasVisibleToolbar: boolean;\n  toolbarHeight: number;\n  stickyNotifications: boolean;\n  notificationsHeight: number;\n}\n\nexport interface VerticalLayoutOutput {\n  toolbar: number;\n  notifications: number;\n  header: number;\n  drawers: number;\n}\n\nexport function computeVerticalLayout({\n  topOffset,\n  hasVisibleToolbar,\n  toolbarHeight,\n  stickyNotifications,\n  notificationsHeight,\n}: VerticalLayoutInput): VerticalLayoutOutput {\n  const toolbar = topOffset;\n  let notifications = topOffset;\n  let drawers = topOffset;\n\n  if (hasVisibleToolbar) {\n    notifications += toolbarHeight;\n    drawers += toolbarHeight;\n  }\n  let header = notifications;\n  if (stickyNotifications) {\n    header += notificationsHeight;\n  }\n\n  return { toolbar, notifications, header, drawers };\n}\n"]}
+{"version":3,"file":"compute-layout.js","sourceRoot":"","sources":["../../../../src/app-layout/visual-refresh-toolbar/compute-layout.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AAGtC,OAAO,EAAE,qBAAqB,EAAE,MAAM,gBAAgB,CAAC;AAevD,MAAM,UAAU,uBAAuB,CAAC,EACtC,cAAc,EACd,eAAe,EACf,SAAS,EACT,eAAe,EACf,gBAAgB,EAChB,cAAc,EACd,kBAAkB,EAClB,cAAc,EACd,QAAQ,EACR,wBAAwB,GACF;IACtB,MAAM,cAAc,GAAG,CAAC,GAAG,EAAE,CAAC,CAAC,WAAW;IAC1C,MAAM,qBAAqB,GAAG,cAAc,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,CAAC;IAEnE,IAAI,uBAAuB,GAAG,IAAI,CAAC,GAAG,CACpC,CAAC,EACD,SAAS,CAAC,UAAU,GAAG,eAAe,GAAG,cAAc,GAAG,qBAAqB,CAChF,CAAC;IACF,MAAM,4BAA4B,GAAG,MAAM,CAAC,MAAM,CAAC,wBAAwB,CAAC,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,IAAI,EAAE,EAAE,CAAC,GAAG,GAAG,IAAI,EAAE,CAAC,CAAC,CAAC;IAElH,MAAM,wBAAwB,GAAG,uBAAuB,GAAG,gBAAgB,GAAG,qBAAqB,IAAI,QAAQ,CAAC;IAChH,MAAM,0BAA0B,GAAG,wBAAwB,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,kBAAkB,aAAlB,kBAAkB,cAAlB,kBAAkB,GAAI,QAAQ,CAAC;IACxG,MAAM,kBAAkB,GAAG,0BAA0B,KAAK,MAAM,IAAI,cAAc,CAAC,CAAC,CAAC,cAAc,aAAd,cAAc,cAAd,cAAc,GAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAC7G,MAAM,iBAAiB,GAAG,IAAI,CAAC,GAAG,CAAC,uBAAuB,GAAG,4BAA4B,GAAG,gBAAgB,EAAE,CAAC,CAAC,CAAC;IACjH,uBAAuB,IAAI,kBAAkB,CAAC;IAC9C,MAAM,aAAa,GAAG,uBAAuB,GAAG,4BAA4B,CAAC;IAC7E,MAAM,qBAAqB,GAA2B,MAAM,CAAC,IAAI,CAAC,wBAAwB,CAAC,CAAC,MAAM,CAChG,CAAC,GAAG,EAAE,QAAQ,EAAE,EAAE;QAChB,uCACK,GAAG,KACN,CAAC,QAAQ,CAAC,EACR,uBAAuB;gBACvB,gBAAgB;gBAChB,4BAA4B;gBAC5B,wBAAwB,CAAC,QAAQ,CAAC,IACpC;IACJ,CAAC,EACD,EAAE,CACH,CAAC;IAEF,OAAO;QACL,kBAAkB,EAAE,0BAA0B;QAC9C,wBAAwB;QACxB,kBAAkB;QAClB,iBAAiB;QACjB,aAAa;QACb,qBAAqB;QACrB,4BAA4B;QAC5B,uBAAuB;KACxB,CAAC;AACJ,CAAC;AAiBD,MAAM,UAAU,qBAAqB,CAAC,EACpC,SAAS,EACT,iBAAiB,EACjB,aAAa,EACb,mBAAmB,EACnB,mBAAmB,GACC;IACpB,MAAM,OAAO,GAAG,SAAS,CAAC;IAC1B,IAAI,aAAa,GAAG,SAAS,CAAC;IAC9B,IAAI,OAAO,GAAG,SAAS,CAAC;IAExB,IAAI,iBAAiB,EAAE;QACrB,aAAa,IAAI,aAAa,CAAC;QAC/B,OAAO,IAAI,aAAa,CAAC;KAC1B;IACD,IAAI,MAAM,GAAG,aAAa,CAAC;IAC3B,IAAI,mBAAmB,EAAE;QACvB,MAAM,IAAI,mBAAmB,CAAC;KAC/B;IAED,OAAO,EAAE,OAAO,EAAE,aAAa,EAAE,MAAM,EAAE,OAAO,EAAE,CAAC;AACrD,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { AppLayoutPropsWithDefaults } from '../interfaces';\nimport { SPLIT_PANEL_MIN_WIDTH } from '../split-panel';\n\ninterface HorizontalLayoutInput {\n  navigationOpen: boolean;\n  navigationWidth: number;\n  placement: AppLayoutPropsWithDefaults['placement'];\n  minContentWidth: number;\n  activeDrawerSize: number;\n  splitPanelOpen: boolean;\n  splitPanelPosition: 'side' | 'bottom' | undefined;\n  splitPanelSize: number;\n  isMobile: boolean;\n  activeGlobalDrawersSizes: Record<string, number>;\n}\n\nexport function computeHorizontalLayout({\n  navigationOpen,\n  navigationWidth,\n  placement,\n  minContentWidth,\n  activeDrawerSize,\n  splitPanelOpen,\n  splitPanelPosition,\n  splitPanelSize,\n  isMobile,\n  activeGlobalDrawersSizes,\n}: HorizontalLayoutInput) {\n  const contentPadding = 2 * 24; // space-xl\n  const activeNavigationWidth = navigationOpen ? navigationWidth : 0;\n\n  let resizableSpaceAvailable = Math.max(\n    0,\n    placement.inlineSize - minContentWidth - contentPadding - activeNavigationWidth\n  );\n  const totalActiveGlobalDrawersSize = Object.values(activeGlobalDrawersSizes).reduce((acc, size) => acc + size, 0);\n\n  const splitPanelForcedPosition = resizableSpaceAvailable - activeDrawerSize < SPLIT_PANEL_MIN_WIDTH || isMobile;\n  const resolvedSplitPanelPosition = splitPanelForcedPosition ? 'bottom' : splitPanelPosition ?? 'bottom';\n  const sideSplitPanelSize = resolvedSplitPanelPosition === 'side' && splitPanelOpen ? splitPanelSize ?? 0 : 0;\n  const maxSplitPanelSize = Math.max(resizableSpaceAvailable - totalActiveGlobalDrawersSize - activeDrawerSize, 0);\n  resizableSpaceAvailable -= sideSplitPanelSize;\n  const maxDrawerSize = resizableSpaceAvailable - totalActiveGlobalDrawersSize;\n  const maxGlobalDrawersSizes: Record<string, number> = Object.keys(activeGlobalDrawersSizes).reduce(\n    (acc, drawerId) => {\n      return {\n        ...acc,\n        [drawerId]:\n          resizableSpaceAvailable -\n          activeDrawerSize -\n          totalActiveGlobalDrawersSize +\n          activeGlobalDrawersSizes[drawerId],\n      };\n    },\n    {}\n  );\n\n  return {\n    splitPanelPosition: resolvedSplitPanelPosition,\n    splitPanelForcedPosition,\n    sideSplitPanelSize,\n    maxSplitPanelSize,\n    maxDrawerSize,\n    maxGlobalDrawersSizes,\n    totalActiveGlobalDrawersSize,\n    resizableSpaceAvailable,\n  };\n}\n\ninterface VerticalLayoutInput {\n  topOffset: number;\n  hasVisibleToolbar: boolean;\n  toolbarHeight: number;\n  stickyNotifications: boolean;\n  notificationsHeight: number;\n}\n\nexport interface VerticalLayoutOutput {\n  toolbar: number;\n  notifications: number;\n  header: number;\n  drawers: number;\n}\n\nexport function computeVerticalLayout({\n  topOffset,\n  hasVisibleToolbar,\n  toolbarHeight,\n  stickyNotifications,\n  notificationsHeight,\n}: VerticalLayoutInput): VerticalLayoutOutput {\n  const toolbar = topOffset;\n  let notifications = topOffset;\n  let drawers = topOffset;\n\n  if (hasVisibleToolbar) {\n    notifications += toolbarHeight;\n    drawers += toolbarHeight;\n  }\n  let header = notifications;\n  if (stickyNotifications) {\n    header += notificationsHeight;\n  }\n\n  return { toolbar, notifications, header, drawers };\n}\n"]}

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

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import { NonCancelableEventHandler } from '../../../internal/events';
+import { AppLayoutProps } from '../../interfaces';
+import { AppLayoutInternals } from '../interfaces';
+interface AppLayoutGlobalDrawerImplementationProps {
+    appLayoutInternals: AppLayoutInternals;
+    show: boolean;
+    activeGlobalDrawer: (AppLayoutProps.Drawer & {
+        onShow?: NonCancelableEventHandler;
+        onHide?: NonCancelableEventHandler;
+    }) | undefined;
+}
+declare function AppLayoutGlobalDrawerImplementation({ appLayoutInternals, show, activeGlobalDrawer, }: AppLayoutGlobalDrawerImplementationProps): JSX.Element;
+export default AppLayoutGlobalDrawerImplementation;
+//# sourceMappingURL=global-drawer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"global-drawer.d.ts","sourceRoot":"","sources":["../../../../../src/app-layout/visual-refresh-toolbar/drawer/global-drawer.tsx"],"names":[],"mappings":";AAQA,OAAO,EAAE,yBAAyB,EAAE,MAAM,0BAA0B,CAAC;AAGrE,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAOnD,UAAU,wCAAwC;IAChD,kBAAkB,EAAE,kBAAkB,CAAC;IACvC,IAAI,EAAE,OAAO,CAAC;IACd,kBAAkB,EACd,CAAC,cAAc,CAAC,MAAM,GAAG;QAAE,MAAM,CAAC,EAAE,yBAAyB,CAAC;QAAC,MAAM,CAAC,EAAE,yBAAyB,CAAA;KAAE,CAAC,GACpG,SAAS,CAAC;CACf;AAED,iBAAS,mCAAmC,CAAC,EAC3C,kBAAkB,EAClB,IAAI,EACJ,kBAAkB,GACnB,EAAE,wCAAwC,eA8G1C;AAED,eAAe,mCAAmC,CAAC"}

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

@@ -0,0 +1,71 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React, { useRef } from 'react';
+import { Transition } from 'react-transition-group';
+import clsx from 'clsx';
+import { InternalButton } from '../../../button/internal';
+import PanelResizeHandle from '../../../internal/components/panel-resize-handle';
+import customCssProps from '../../../internal/generated/custom-css-properties';
+import { getLimitedValue } from '../../../split-panel/utils/size-utils';
+import { useResize } from './use-resize';
+import sharedStyles from '../../resize/styles.css.js';
+import testutilStyles from '../../test-classes/styles.css.js';
+import styles from './styles.css.js';
+function AppLayoutGlobalDrawerImplementation({ appLayoutInternals, show, activeGlobalDrawer, }) {
+    var _a, _b, _c, _d, _e, _f, _g;
+    const { ariaLabels, globalDrawersFocusControl, isMobile, placement, onActiveGlobalDrawersChange, onActiveDrawerResize, minGlobalDrawersSizes, maxGlobalDrawersSizes, activeGlobalDrawersSizes, verticalOffsets, drawersOpenQueue, } = appLayoutInternals;
+    const drawerRef = useRef(null);
+    const activeDrawerId = (_a = activeGlobalDrawer === null || activeGlobalDrawer === void 0 ? void 0 : activeGlobalDrawer.id) !== null && _a !== void 0 ? _a : '';
+    const computedAriaLabels = {
+        closeButton: activeGlobalDrawer ? (_b = activeGlobalDrawer.ariaLabels) === null || _b === void 0 ? void 0 : _b.closeButton : ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.toolsClose,
+        content: activeGlobalDrawer ? (_c = activeGlobalDrawer.ariaLabels) === null || _c === void 0 ? void 0 : _c.drawerName : ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.tools,
+    };
+    const drawersTopOffset = (_d = verticalOffsets.drawers) !== null && _d !== void 0 ? _d : placement.insetBlockStart;
+    const activeDrawerSize = (_e = (activeDrawerId ? activeGlobalDrawersSizes[activeDrawerId] : 0)) !== null && _e !== void 0 ? _e : 0;
+    const minDrawerSize = (_f = (activeDrawerId ? minGlobalDrawersSizes[activeDrawerId] : 0)) !== null && _f !== void 0 ? _f : 0;
+    const maxDrawerSize = (_g = (activeDrawerId ? maxGlobalDrawersSizes[activeDrawerId] : 0)) !== null && _g !== void 0 ? _g : 0;
+    const refs = globalDrawersFocusControl.refs[activeDrawerId];
+    const resizeProps = useResize({
+        currentWidth: activeDrawerSize,
+        minWidth: minDrawerSize,
+        maxWidth: maxDrawerSize,
+        panelRef: drawerRef,
+        handleRef: refs === null || refs === void 0 ? void 0 : refs.slider,
+        onResize: size => onActiveDrawerResize({ id: activeDrawerId, size }),
+    });
+    const size = getLimitedValue(minDrawerSize, activeDrawerSize, maxDrawerSize);
+    const lastOpenedDrawerId = drawersOpenQueue.length ? drawersOpenQueue[0] : null;
+    const hasTriggerButton = !!(activeGlobalDrawer === null || activeGlobalDrawer === void 0 ? void 0 : activeGlobalDrawer.trigger);
+    return (React.createElement(Transition, { nodeRef: drawerRef, in: show, appear: show, timeout: 0 }, state => {
+        var _a;
+        return (React.createElement("aside", { id: activeDrawerId, "aria-hidden": !show, "aria-label": computedAriaLabels.content, className: clsx(styles.drawer, styles['drawer-global'], styles[state], sharedStyles['with-motion'], {
+                [styles['drawer-hidden']]: !show,
+                [styles['last-opened']]: lastOpenedDrawerId === activeDrawerId,
+                [testutilStyles['active-drawer']]: show,
+            }), ref: drawerRef, onBlur: e => {
+                // Drawers with trigger buttons follow this restore focus logic:
+                // If a previously focused element exists, restore focus on it; otherwise, focus on the associated trigger button.
+                // This function resets the previously focused element.
+                // If the drawer has no trigger button and loses focus on the previously focused element, it defaults to document.body,
+                // which ideally should never happen.
+                if (!hasTriggerButton) {
+                    return;
+                }
+                if (!e.relatedTarget || !e.currentTarget.contains(e.relatedTarget)) {
+                    globalDrawersFocusControl.loseFocus();
+                }
+            }, style: Object.assign({ blockSize: `calc(100vh - ${drawersTopOffset}px - ${placement.insetBlockEnd}px)`, insetBlockStart: drawersTopOffset }, (!isMobile && {
+                [customCssProps.drawerSize]: `${['entering', 'entered'].includes(state) ? size : 0}px`,
+            })), "data-testid": `awsui-app-layout-drawer-${activeDrawerId}` },
+            !isMobile && (activeGlobalDrawer === null || activeGlobalDrawer === void 0 ? void 0 : activeGlobalDrawer.resizable) && (React.createElement("div", { className: styles['drawer-slider'] },
+                React.createElement(PanelResizeHandle, { ref: refs === null || refs === void 0 ? void 0 : refs.slider, position: "side", className: testutilStyles['drawers-slider'], ariaLabel: (_a = activeGlobalDrawer === null || activeGlobalDrawer === void 0 ? void 0 : activeGlobalDrawer.ariaLabels) === null || _a === void 0 ? void 0 : _a.resizeHandle, ariaValuenow: resizeProps.relativeSize, onKeyDown: resizeProps.onKeyDown, onPointerDown: resizeProps.onPointerDown }))),
+            React.createElement("div", { className: clsx(styles['drawer-content-container'], sharedStyles['with-motion']) },
+                React.createElement("div", { className: clsx(styles['drawer-close-button']) },
+                    React.createElement(InternalButton, { ariaLabel: computedAriaLabels.closeButton, className: clsx({
+                            [testutilStyles['active-drawer-close-button']]: activeDrawerId,
+                        }), formAction: "none", iconName: isMobile ? 'close' : 'angle-right', onClick: () => onActiveGlobalDrawersChange(activeDrawerId), ref: refs === null || refs === void 0 ? void 0 : refs.close, variant: "icon" })),
+                React.createElement("div", { className: styles['drawer-content'] }, activeGlobalDrawer === null || activeGlobalDrawer === void 0 ? void 0 : activeGlobalDrawer.content))));
+    }));
+}
+export default AppLayoutGlobalDrawerImplementation;
+//# sourceMappingURL=global-drawer.js.map

package/lib/internal/template/app-layout/visual-refresh-toolbar/drawer/global-drawer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"global-drawer.js","sourceRoot":"","sources":["../../../../../src/app-layout/visual-refresh-toolbar/drawer/global-drawer.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 { Transition } from 'react-transition-group';\nimport clsx from 'clsx';\n\nimport { InternalButton } from '../../../button/internal';\nimport PanelResizeHandle from '../../../internal/components/panel-resize-handle';\nimport { NonCancelableEventHandler } from '../../../internal/events';\nimport customCssProps from '../../../internal/generated/custom-css-properties';\nimport { getLimitedValue } from '../../../split-panel/utils/size-utils';\nimport { AppLayoutProps } from '../../interfaces';\nimport { AppLayoutInternals } from '../interfaces';\nimport { useResize } from './use-resize';\n\nimport sharedStyles from '../../resize/styles.css.js';\nimport testutilStyles from '../../test-classes/styles.css.js';\nimport styles from './styles.css.js';\n\ninterface AppLayoutGlobalDrawerImplementationProps {\n  appLayoutInternals: AppLayoutInternals;\n  show: boolean;\n  activeGlobalDrawer:\n    | (AppLayoutProps.Drawer & { onShow?: NonCancelableEventHandler; onHide?: NonCancelableEventHandler })\n    | undefined;\n}\n\nfunction AppLayoutGlobalDrawerImplementation({\n  appLayoutInternals,\n  show,\n  activeGlobalDrawer,\n}: AppLayoutGlobalDrawerImplementationProps) {\n  const {\n    ariaLabels,\n    globalDrawersFocusControl,\n    isMobile,\n    placement,\n    onActiveGlobalDrawersChange,\n    onActiveDrawerResize,\n    minGlobalDrawersSizes,\n    maxGlobalDrawersSizes,\n    activeGlobalDrawersSizes,\n    verticalOffsets,\n    drawersOpenQueue,\n  } = appLayoutInternals;\n  const drawerRef = useRef<HTMLDivElement>(null);\n  const activeDrawerId = activeGlobalDrawer?.id ?? '';\n\n  const computedAriaLabels = {\n    closeButton: activeGlobalDrawer ? activeGlobalDrawer.ariaLabels?.closeButton : ariaLabels?.toolsClose,\n    content: activeGlobalDrawer ? activeGlobalDrawer.ariaLabels?.drawerName : ariaLabels?.tools,\n  };\n\n  const drawersTopOffset = verticalOffsets.drawers ?? placement.insetBlockStart;\n  const activeDrawerSize = (activeDrawerId ? activeGlobalDrawersSizes[activeDrawerId] : 0) ?? 0;\n  const minDrawerSize = (activeDrawerId ? minGlobalDrawersSizes[activeDrawerId] : 0) ?? 0;\n  const maxDrawerSize = (activeDrawerId ? maxGlobalDrawersSizes[activeDrawerId] : 0) ?? 0;\n  const refs = globalDrawersFocusControl.refs[activeDrawerId];\n  const resizeProps = useResize({\n    currentWidth: activeDrawerSize,\n    minWidth: minDrawerSize,\n    maxWidth: maxDrawerSize,\n    panelRef: drawerRef,\n    handleRef: refs?.slider,\n    onResize: size => onActiveDrawerResize({ id: activeDrawerId!, size }),\n  });\n  const size = getLimitedValue(minDrawerSize, activeDrawerSize, maxDrawerSize);\n  const lastOpenedDrawerId = drawersOpenQueue.length ? drawersOpenQueue[0] : null;\n  const hasTriggerButton = !!activeGlobalDrawer?.trigger;\n\n  return (\n    <Transition nodeRef={drawerRef} in={show} appear={show} timeout={0}>\n      {state => {\n        return (\n          <aside\n            id={activeDrawerId}\n            aria-hidden={!show}\n            aria-label={computedAriaLabels.content}\n            className={clsx(styles.drawer, styles['drawer-global'], styles[state], sharedStyles['with-motion'], {\n              [styles['drawer-hidden']]: !show,\n              [styles['last-opened']]: lastOpenedDrawerId === activeDrawerId,\n              [testutilStyles['active-drawer']]: show,\n            })}\n            ref={drawerRef}\n            onBlur={e => {\n              // Drawers with trigger buttons follow this restore focus logic:\n              // If a previously focused element exists, restore focus on it; otherwise, focus on the associated trigger button.\n              // This function resets the previously focused element.\n              // If the drawer has no trigger button and loses focus on the previously focused element, it defaults to document.body,\n              // which ideally should never happen.\n              if (!hasTriggerButton) {\n                return;\n              }\n\n              if (!e.relatedTarget || !e.currentTarget.contains(e.relatedTarget)) {\n                globalDrawersFocusControl.loseFocus();\n              }\n            }}\n            style={{\n              blockSize: `calc(100vh - ${drawersTopOffset}px - ${placement.insetBlockEnd}px)`,\n              insetBlockStart: drawersTopOffset,\n              ...(!isMobile && {\n                [customCssProps.drawerSize]: `${['entering', 'entered'].includes(state) ? size : 0}px`,\n              }),\n            }}\n            data-testid={`awsui-app-layout-drawer-${activeDrawerId}`}\n          >\n            {!isMobile && activeGlobalDrawer?.resizable && (\n              <div className={styles['drawer-slider']}>\n                <PanelResizeHandle\n                  ref={refs?.slider}\n                  position=\"side\"\n                  className={testutilStyles['drawers-slider']}\n                  ariaLabel={activeGlobalDrawer?.ariaLabels?.resizeHandle}\n                  ariaValuenow={resizeProps.relativeSize}\n                  onKeyDown={resizeProps.onKeyDown}\n                  onPointerDown={resizeProps.onPointerDown}\n                />\n              </div>\n            )}\n            <div className={clsx(styles['drawer-content-container'], sharedStyles['with-motion'])}>\n              <div className={clsx(styles['drawer-close-button'])}>\n                <InternalButton\n                  ariaLabel={computedAriaLabels.closeButton}\n                  className={clsx({\n                    [testutilStyles['active-drawer-close-button']]: activeDrawerId,\n                  })}\n                  formAction=\"none\"\n                  iconName={isMobile ? 'close' : 'angle-right'}\n                  onClick={() => onActiveGlobalDrawersChange(activeDrawerId)}\n                  ref={refs?.close}\n                  variant=\"icon\"\n                />\n              </div>\n              <div className={styles['drawer-content']}>{activeGlobalDrawer?.content}</div>\n            </div>\n          </aside>\n        );\n      }}\n    </Transition>\n  );\n}\n\nexport default AppLayoutGlobalDrawerImplementation;\n"]}

package/lib/internal/template/app-layout/visual-refresh-toolbar/drawer/global-drawers.d.ts

@@ -1,4 +1,9 @@
 /// <reference types="react" />
-export declare function AppLayoutGlobalDrawersImplementation(): JSX.Element;
+import { AppLayoutInternals } from '../interfaces';
+interface AppLayoutGlobalDrawersImplementationProps {
+    appLayoutInternals: AppLayoutInternals;
+}
+export declare function AppLayoutGlobalDrawersImplementation({ appLayoutInternals, }: AppLayoutGlobalDrawersImplementationProps): JSX.Element;
 export declare const createWidgetizedAppLayoutGlobalDrawers: (Loader?: typeof AppLayoutGlobalDrawersImplementation | undefined) => typeof AppLayoutGlobalDrawersImplementation;
+export {};
 //# sourceMappingURL=global-drawers.d.ts.map

package/lib/internal/template/app-layout/visual-refresh-toolbar/drawer/global-drawers.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"global-drawers.d.ts","sourceRoot":"","sources":["../../../../../src/app-layout/visual-refresh-toolbar/drawer/global-drawers.tsx"],"names":[],"mappings":";AAOA,wBAAgB,oCAAoC,gBAEnD;AAED,eAAO,MAAM,sCAAsC,mHAAkE,CAAC"}
+{"version":3,"file":"global-drawers.d.ts","sourceRoot":"","sources":["../../../../../src/app-layout/visual-refresh-toolbar/drawer/global-drawers.tsx"],"names":[],"mappings":";AAKA,OAAO,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAGnD,UAAU,yCAAyC;IACjD,kBAAkB,EAAE,kBAAkB,CAAC;CACxC;AAED,wBAAgB,oCAAoC,CAAC,EACnD,kBAAkB,GACnB,EAAE,yCAAyC,eA6B3C;AAED,eAAO,MAAM,sCAAsC,mHAAkE,CAAC"}

package/lib/internal/template/app-layout/visual-refresh-toolbar/drawer/global-drawers.js

@@ -1,10 +1,21 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import React from 'react';
+import React, { useRef } from 'react';
 import { createWidgetizedComponent } from '../../../internal/widgets';
-/* istanbul ignore next: noop stub */
-export function AppLayoutGlobalDrawersImplementation() {
-    return React.createElement(React.Fragment, null);
+import AppLayoutGlobalDrawer from './global-drawer';
+export function AppLayoutGlobalDrawersImplementation({ appLayoutInternals, }) {
+    const { globalDrawers, activeGlobalDrawersIds } = appLayoutInternals;
+    const openDrawersHistory = useRef(new Set());
+    if (!globalDrawers.length) {
+        return React.createElement(React.Fragment, null);
+    }
+    return (React.createElement(React.Fragment, null, globalDrawers
+        .filter(drawer => activeGlobalDrawersIds.includes(drawer.id) ||
+        (drawer.preserveInactiveContent && openDrawersHistory.current.has(drawer.id)))
+        .map(drawer => {
+        openDrawersHistory.current.add(drawer.id);
+        return (React.createElement(AppLayoutGlobalDrawer, { key: drawer.id, show: activeGlobalDrawersIds.includes(drawer.id), activeGlobalDrawer: drawer, appLayoutInternals: appLayoutInternals }));
+    })));
 }
 export const createWidgetizedAppLayoutGlobalDrawers = createWidgetizedComponent(AppLayoutGlobalDrawersImplementation);
 //# sourceMappingURL=global-drawers.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"global-drawers.js","sourceRoot":"","sources":["../../../../../src/app-layout/visual-refresh-toolbar/drawer/global-drawers.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,yBAAyB,EAAE,MAAM,2BAA2B,CAAC;AAEtE,qCAAqC;AACrC,MAAM,UAAU,oCAAoC;IAClD,OAAO,yCAAK,CAAC;AACf,CAAC;AAED,MAAM,CAAC,MAAM,sCAAsC,GAAG,yBAAyB,CAAC,oCAAoC,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\n\nimport { createWidgetizedComponent } from '../../../internal/widgets';\n\n/* istanbul ignore next: noop stub */\nexport function AppLayoutGlobalDrawersImplementation() {\n  return <></>;\n}\n\nexport const createWidgetizedAppLayoutGlobalDrawers = createWidgetizedComponent(AppLayoutGlobalDrawersImplementation);\n"]}
+{"version":3,"file":"global-drawers.js","sourceRoot":"","sources":["../../../../../src/app-layout/visual-refresh-toolbar/drawer/global-drawers.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAEtC,OAAO,EAAE,yBAAyB,EAAE,MAAM,2BAA2B,CAAC;AAEtE,OAAO,qBAAqB,MAAM,iBAAiB,CAAC;AAMpD,MAAM,UAAU,oCAAoC,CAAC,EACnD,kBAAkB,GACwB;IAC1C,MAAM,EAAE,aAAa,EAAE,sBAAsB,EAAE,GAAG,kBAAkB,CAAC;IACrE,MAAM,kBAAkB,GAAG,MAAM,CAAc,IAAI,GAAG,EAAE,CAAC,CAAC;IAE1D,IAAI,CAAC,aAAa,CAAC,MAAM,EAAE;QACzB,OAAO,yCAAK,CAAC;KACd;IAED,OAAO,CACL,0CACG,aAAa;SACX,MAAM,CACL,MAAM,CAAC,EAAE,CACP,sBAAsB,CAAC,QAAQ,CAAC,MAAM,CAAC,EAAE,CAAC;QAC1C,CAAC,MAAM,CAAC,uBAAuB,IAAI,kBAAkB,CAAC,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC,CAChF;SACA,GAAG,CAAC,MAAM,CAAC,EAAE;QACZ,kBAAkB,CAAC,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC;QAC1C,OAAO,CACL,oBAAC,qBAAqB,IACpB,GAAG,EAAE,MAAM,CAAC,EAAE,EACd,IAAI,EAAE,sBAAsB,CAAC,QAAQ,CAAC,MAAM,CAAC,EAAE,CAAC,EAChD,kBAAkB,EAAE,MAAM,EAC1B,kBAAkB,EAAE,kBAAkB,GACtC,CACH,CAAC;IACJ,CAAC,CAAC,CACH,CACJ,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,sCAAsC,GAAG,yBAAyB,CAAC,oCAAoC,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useRef } from 'react';\n\nimport { createWidgetizedComponent } from '../../../internal/widgets';\nimport { AppLayoutInternals } from '../interfaces';\nimport AppLayoutGlobalDrawer from './global-drawer';\n\ninterface AppLayoutGlobalDrawersImplementationProps {\n  appLayoutInternals: AppLayoutInternals;\n}\n\nexport function AppLayoutGlobalDrawersImplementation({\n  appLayoutInternals,\n}: AppLayoutGlobalDrawersImplementationProps) {\n  const { globalDrawers, activeGlobalDrawersIds } = appLayoutInternals;\n  const openDrawersHistory = useRef<Set<string>>(new Set());\n\n  if (!globalDrawers.length) {\n    return <></>;\n  }\n\n  return (\n    <>\n      {globalDrawers\n        .filter(\n          drawer =>\n            activeGlobalDrawersIds.includes(drawer.id) ||\n            (drawer.preserveInactiveContent && openDrawersHistory.current.has(drawer.id))\n        )\n        .map(drawer => {\n          openDrawersHistory.current.add(drawer.id);\n          return (\n            <AppLayoutGlobalDrawer\n              key={drawer.id}\n              show={activeGlobalDrawersIds.includes(drawer.id)}\n              activeGlobalDrawer={drawer}\n              appLayoutInternals={appLayoutInternals}\n            />\n          );\n        })}\n    </>\n  );\n}\n\nexport const createWidgetizedAppLayoutGlobalDrawers = createWidgetizedComponent(AppLayoutGlobalDrawersImplementation);\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"local-drawer.d.ts","sourceRoot":"","sources":["../../../../../src/app-layout/visual-refresh-toolbar/drawer/local-drawer.tsx"],"names":[],"mappings":";AASA,OAAO,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAOnD,UAAU,kCAAkC;IAC1C,kBAAkB,EAAE,kBAAkB,CAAC;CACxC;AAED,wBAAgB,6BAA6B,CAAC,EAAE,kBAAkB,EAAE,EAAE,kCAAkC,eAmGvG;AAED,eAAO,MAAM,+BAA+B,qGAA2D,CAAC"}
+{"version":3,"file":"local-drawer.d.ts","sourceRoot":"","sources":["../../../../../src/app-layout/visual-refresh-toolbar/drawer/local-drawer.tsx"],"names":[],"mappings":";AAYA,OAAO,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAOnD,UAAU,kCAAkC;IAC1C,kBAAkB,EAAE,kBAAkB,CAAC;CACxC;AAED,wBAAgB,6BAA6B,CAAC,EAAE,kBAAkB,EAAE,EAAE,kCAAkC,eAkHvG;AAED,eAAO,MAAM,+BAA+B,qGAA2D,CAAC"}

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

@@ -1,18 +1,21 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 import React, { useRef } from 'react';
+import { Transition } from 'react-transition-group';
 import clsx from 'clsx';
 import { InternalButton } from '../../../button/internal';
 import PanelResizeHandle from '../../../internal/components/panel-resize-handle';
+import customCssProps from '../../../internal/generated/custom-css-properties';
 import { createWidgetizedComponent } from '../../../internal/widgets';
+import { getLimitedValue } from '../../../split-panel/utils/size-utils';
 import { TOOLS_DRAWER_ID } from '../../utils/use-drawers';
 import { useResize } from './use-resize';
 import sharedStyles from '../../resize/styles.css.js';
 import testutilStyles from '../../test-classes/styles.css.js';
 import styles from './styles.css.js';
 export function AppLayoutDrawerImplementation({ appLayoutInternals }) {
-    var _a, _b, _c, _d, _e;
-    const { activeDrawer, minDrawerSize, activeDrawerSize, maxDrawerSize, ariaLabels, drawers, drawersFocusControl, isMobile, placement, verticalOffsets, onActiveDrawerChange, onActiveDrawerResize, } = appLayoutInternals;
+    var _a, _b, _c, _d;
+    const { activeDrawer, minDrawerSize, activeDrawerSize, maxDrawerSize, ariaLabels, drawers, drawersFocusControl, isMobile, placement, verticalOffsets, drawersOpenQueue, onActiveDrawerChange, onActiveDrawerResize, } = appLayoutInternals;
     const drawerRef = useRef(null);
     const activeDrawerId = activeDrawer === null || activeDrawer === void 0 ? void 0 : activeDrawer.id;
     const computedAriaLabels = {
@@ -31,27 +34,36 @@ export function AppLayoutDrawerImplementation({ appLayoutInternals }) {
         handleRef: drawersFocusControl.refs.slider,
         onResize: size => onActiveDrawerResize({ id: activeDrawerId, size }),
     });
-    return (React.createElement("aside", { id: activeDrawerId, "aria-hidden": !activeDrawer, "aria-label": computedAriaLabels.content, className: clsx(styles.drawer, sharedStyles['with-motion'], {
-            [testutilStyles['active-drawer']]: !toolsOnlyMode && activeDrawerId,
-            [testutilStyles.tools]: isToolsDrawer,
-        }), ref: drawerRef, onBlur: e => {
-            if (!e.relatedTarget || !e.currentTarget.contains(e.relatedTarget)) {
-                drawersFocusControl.loseFocus();
-            }
-        }, style: {
-            blockSize: `calc(100vh - ${drawersTopOffset}px - ${placement.insetBlockEnd}px)`,
-            insetBlockStart: drawersTopOffset,
-        } },
-        !isMobile && (activeDrawer === null || activeDrawer === void 0 ? void 0 : activeDrawer.resizable) && (React.createElement("div", { className: styles['drawer-slider'] },
-            React.createElement(PanelResizeHandle, { ref: drawersFocusControl.refs.slider, position: "side", className: testutilStyles['drawers-slider'], ariaLabel: (_e = activeDrawer === null || activeDrawer === void 0 ? void 0 : activeDrawer.ariaLabels) === null || _e === void 0 ? void 0 : _e.resizeHandle, ariaValuenow: resizeProps.relativeSize, onKeyDown: resizeProps.onKeyDown, onPointerDown: resizeProps.onPointerDown }))),
-        React.createElement("div", { className: clsx(styles['drawer-content-container'], sharedStyles['with-motion']), style: { width: isMobile ? '100%' : `${activeDrawerSize}px` } },
-            React.createElement("div", { className: clsx(styles['drawer-close-button']) },
-                React.createElement(InternalButton, { ariaLabel: computedAriaLabels.closeButton, className: clsx({
-                        [testutilStyles['active-drawer-close-button']]: !isToolsDrawer && activeDrawerId,
-                        [testutilStyles['tools-close']]: isToolsDrawer,
-                    }), formAction: "none", iconName: isMobile ? 'close' : 'angle-right', onClick: () => onActiveDrawerChange(null), ref: drawersFocusControl.refs.close, variant: "icon" })),
-            React.createElement("div", { className: clsx(styles['drawer-content'], activeDrawerId !== TOOLS_DRAWER_ID && styles['drawer-content-hidden']) }, toolsContent),
-            activeDrawerId !== TOOLS_DRAWER_ID && React.createElement("div", { className: styles['drawer-content'] }, activeDrawer === null || activeDrawer === void 0 ? void 0 : activeDrawer.content))));
+    // temporary handle a situation when app-layout is old, but this component come as a widget
+    const isLegacyDrawer = drawersOpenQueue === undefined;
+    const size = getLimitedValue(minDrawerSize, activeDrawerSize, maxDrawerSize);
+    const lastOpenedDrawerId = (drawersOpenQueue === null || drawersOpenQueue === void 0 ? void 0 : drawersOpenQueue.length) ? drawersOpenQueue[0] : activeDrawerId;
+    return (React.createElement(Transition, { nodeRef: drawerRef, in: true, appear: true, timeout: 0 }, state => {
+        var _a;
+        return (React.createElement("aside", { id: activeDrawerId, "aria-hidden": !activeDrawer, "aria-label": computedAriaLabels.content, className: clsx(styles.drawer, sharedStyles['with-motion'], {
+                [styles['last-opened']]: lastOpenedDrawerId === activeDrawerId,
+                [styles.legacy]: isLegacyDrawer,
+                [testutilStyles['active-drawer']]: !toolsOnlyMode && activeDrawerId,
+                [testutilStyles.tools]: isToolsDrawer,
+            }), ref: drawerRef, onBlur: e => {
+                if (!e.relatedTarget || !e.currentTarget.contains(e.relatedTarget)) {
+                    drawersFocusControl.loseFocus();
+                }
+            }, style: Object.assign({ blockSize: `calc(100vh - ${drawersTopOffset}px - ${placement.insetBlockEnd}px)`, insetBlockStart: drawersTopOffset }, (!isMobile &&
+                !isLegacyDrawer && {
+                [customCssProps.drawerSize]: `${['entering', 'entered'].includes(state) ? size : 0}px`,
+            })), "data-testid": `awsui-app-layout-drawer-${activeDrawerId}` },
+            !isMobile && (activeDrawer === null || activeDrawer === void 0 ? void 0 : activeDrawer.resizable) && (React.createElement("div", { className: styles['drawer-slider'] },
+                React.createElement(PanelResizeHandle, { ref: drawersFocusControl.refs.slider, position: "side", className: testutilStyles['drawers-slider'], ariaLabel: (_a = activeDrawer === null || activeDrawer === void 0 ? void 0 : activeDrawer.ariaLabels) === null || _a === void 0 ? void 0 : _a.resizeHandle, ariaValuenow: resizeProps.relativeSize, onKeyDown: resizeProps.onKeyDown, onPointerDown: resizeProps.onPointerDown }))),
+            React.createElement("div", { className: clsx(styles['drawer-content-container'], sharedStyles['with-motion']) },
+                React.createElement("div", { className: clsx(styles['drawer-close-button']) },
+                    React.createElement(InternalButton, { ariaLabel: computedAriaLabels.closeButton, className: clsx({
+                            [testutilStyles['active-drawer-close-button']]: !isToolsDrawer && activeDrawerId,
+                            [testutilStyles['tools-close']]: isToolsDrawer,
+                        }), formAction: "none", iconName: isMobile ? 'close' : 'angle-right', onClick: () => onActiveDrawerChange(null), ref: drawersFocusControl.refs.close, variant: "icon" })),
+                React.createElement("div", { className: clsx(styles['drawer-content'], activeDrawerId !== TOOLS_DRAWER_ID && styles['drawer-content-hidden']) }, toolsContent),
+                activeDrawerId !== TOOLS_DRAWER_ID && (React.createElement("div", { className: styles['drawer-content'] }, activeDrawer === null || activeDrawer === void 0 ? void 0 : activeDrawer.content)))));
+    }));
 }
 export const createWidgetizedAppLayoutDrawer = createWidgetizedComponent(AppLayoutDrawerImplementation);
 //# sourceMappingURL=local-drawer.js.map

package/lib/internal/template/app-layout/visual-refresh-toolbar/drawer/local-drawer.js.map

@@ -1 +1 @@
-{"version":3,"file":"local-drawer.js","sourceRoot":"","sources":["../../../../../src/app-layout/visual-refresh-toolbar/drawer/local-drawer.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 { InternalButton } from '../../../button/internal';\nimport PanelResizeHandle from '../../../internal/components/panel-resize-handle';\nimport { createWidgetizedComponent } from '../../../internal/widgets';\nimport { TOOLS_DRAWER_ID } from '../../utils/use-drawers';\nimport { AppLayoutInternals } from '../interfaces';\nimport { useResize } from './use-resize';\n\nimport sharedStyles from '../../resize/styles.css.js';\nimport testutilStyles from '../../test-classes/styles.css.js';\nimport styles from './styles.css.js';\n\ninterface AppLayoutDrawerImplementationProps {\n  appLayoutInternals: AppLayoutInternals;\n}\n\nexport function AppLayoutDrawerImplementation({ appLayoutInternals }: AppLayoutDrawerImplementationProps) {\n  const {\n    activeDrawer,\n    minDrawerSize,\n    activeDrawerSize,\n    maxDrawerSize,\n    ariaLabels,\n    drawers,\n    drawersFocusControl,\n    isMobile,\n    placement,\n    verticalOffsets,\n    onActiveDrawerChange,\n    onActiveDrawerResize,\n  } = appLayoutInternals;\n  const drawerRef = useRef<HTMLDivElement>(null);\n  const activeDrawerId = activeDrawer?.id;\n\n  const computedAriaLabels = {\n    closeButton: activeDrawer ? activeDrawer.ariaLabels?.closeButton : ariaLabels?.toolsClose,\n    content: activeDrawer ? activeDrawer.ariaLabels?.drawerName : ariaLabels?.tools,\n  };\n\n  const drawersTopOffset = verticalOffsets.drawers ?? placement.insetBlockStart;\n  const isToolsDrawer = activeDrawer?.id === TOOLS_DRAWER_ID;\n  const toolsOnlyMode = drawers.length === 1 && drawers[0].id === TOOLS_DRAWER_ID;\n  const toolsContent = drawers?.find(drawer => drawer.id === TOOLS_DRAWER_ID)?.content;\n  const resizeProps = useResize({\n    currentWidth: activeDrawerSize,\n    minWidth: minDrawerSize,\n    maxWidth: maxDrawerSize,\n    panelRef: drawerRef,\n    handleRef: drawersFocusControl.refs.slider,\n    onResize: size => onActiveDrawerResize({ id: activeDrawerId!, size }),\n  });\n\n  return (\n    <aside\n      id={activeDrawerId}\n      aria-hidden={!activeDrawer}\n      aria-label={computedAriaLabels.content}\n      className={clsx(styles.drawer, sharedStyles['with-motion'], {\n        [testutilStyles['active-drawer']]: !toolsOnlyMode && activeDrawerId,\n        [testutilStyles.tools]: isToolsDrawer,\n      })}\n      ref={drawerRef}\n      onBlur={e => {\n        if (!e.relatedTarget || !e.currentTarget.contains(e.relatedTarget)) {\n          drawersFocusControl.loseFocus();\n        }\n      }}\n      style={{\n        blockSize: `calc(100vh - ${drawersTopOffset}px - ${placement.insetBlockEnd}px)`,\n        insetBlockStart: drawersTopOffset,\n      }}\n    >\n      {!isMobile && activeDrawer?.resizable && (\n        <div className={styles['drawer-slider']}>\n          <PanelResizeHandle\n            ref={drawersFocusControl.refs.slider}\n            position=\"side\"\n            className={testutilStyles['drawers-slider']}\n            ariaLabel={activeDrawer?.ariaLabels?.resizeHandle}\n            ariaValuenow={resizeProps.relativeSize}\n            onKeyDown={resizeProps.onKeyDown}\n            onPointerDown={resizeProps.onPointerDown}\n          />\n        </div>\n      )}\n      <div\n        className={clsx(styles['drawer-content-container'], sharedStyles['with-motion'])}\n        style={{ width: isMobile ? '100%' : `${activeDrawerSize}px` }}\n      >\n        <div className={clsx(styles['drawer-close-button'])}>\n          <InternalButton\n            ariaLabel={computedAriaLabels.closeButton}\n            className={clsx({\n              [testutilStyles['active-drawer-close-button']]: !isToolsDrawer && activeDrawerId,\n              [testutilStyles['tools-close']]: isToolsDrawer,\n            })}\n            formAction=\"none\"\n            iconName={isMobile ? 'close' : 'angle-right'}\n            onClick={() => onActiveDrawerChange(null)}\n            ref={drawersFocusControl.refs.close}\n            variant=\"icon\"\n          />\n        </div>\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        {activeDrawerId !== TOOLS_DRAWER_ID && <div className={styles['drawer-content']}>{activeDrawer?.content}</div>}\n      </div>\n    </aside>\n  );\n}\n\nexport const createWidgetizedAppLayoutDrawer = createWidgetizedComponent(AppLayoutDrawerImplementation);\n"]}
+{"version":3,"file":"local-drawer.js","sourceRoot":"","sources":["../../../../../src/app-layout/visual-refresh-toolbar/drawer/local-drawer.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 { Transition } from 'react-transition-group';\nimport clsx from 'clsx';\n\nimport { InternalButton } from '../../../button/internal';\nimport PanelResizeHandle from '../../../internal/components/panel-resize-handle';\nimport customCssProps from '../../../internal/generated/custom-css-properties';\nimport { createWidgetizedComponent } from '../../../internal/widgets';\nimport { getLimitedValue } from '../../../split-panel/utils/size-utils';\nimport { TOOLS_DRAWER_ID } from '../../utils/use-drawers';\nimport { AppLayoutInternals } from '../interfaces';\nimport { useResize } from './use-resize';\n\nimport sharedStyles from '../../resize/styles.css.js';\nimport testutilStyles from '../../test-classes/styles.css.js';\nimport styles from './styles.css.js';\n\ninterface AppLayoutDrawerImplementationProps {\n  appLayoutInternals: AppLayoutInternals;\n}\n\nexport function AppLayoutDrawerImplementation({ appLayoutInternals }: AppLayoutDrawerImplementationProps) {\n  const {\n    activeDrawer,\n    minDrawerSize,\n    activeDrawerSize,\n    maxDrawerSize,\n    ariaLabels,\n    drawers,\n    drawersFocusControl,\n    isMobile,\n    placement,\n    verticalOffsets,\n    drawersOpenQueue,\n    onActiveDrawerChange,\n    onActiveDrawerResize,\n  } = appLayoutInternals;\n  const drawerRef = useRef<HTMLDivElement>(null);\n  const activeDrawerId = activeDrawer?.id;\n\n  const computedAriaLabels = {\n    closeButton: activeDrawer ? activeDrawer.ariaLabels?.closeButton : ariaLabels?.toolsClose,\n    content: activeDrawer ? activeDrawer.ariaLabels?.drawerName : ariaLabels?.tools,\n  };\n\n  const drawersTopOffset = verticalOffsets.drawers ?? placement.insetBlockStart;\n  const isToolsDrawer = activeDrawer?.id === TOOLS_DRAWER_ID;\n  const toolsOnlyMode = drawers.length === 1 && drawers[0].id === TOOLS_DRAWER_ID;\n  const toolsContent = drawers?.find(drawer => drawer.id === TOOLS_DRAWER_ID)?.content;\n  const resizeProps = useResize({\n    currentWidth: activeDrawerSize,\n    minWidth: minDrawerSize,\n    maxWidth: maxDrawerSize,\n    panelRef: drawerRef,\n    handleRef: drawersFocusControl.refs.slider,\n    onResize: size => onActiveDrawerResize({ id: activeDrawerId!, size }),\n  });\n  // temporary handle a situation when app-layout is old, but this component come as a widget\n  const isLegacyDrawer = drawersOpenQueue === undefined;\n  const size = getLimitedValue(minDrawerSize, activeDrawerSize, maxDrawerSize);\n  const lastOpenedDrawerId = drawersOpenQueue?.length ? drawersOpenQueue[0] : activeDrawerId;\n\n  return (\n    <Transition nodeRef={drawerRef} in={true} appear={true} timeout={0}>\n      {state => (\n        <aside\n          id={activeDrawerId}\n          aria-hidden={!activeDrawer}\n          aria-label={computedAriaLabels.content}\n          className={clsx(styles.drawer, sharedStyles['with-motion'], {\n            [styles['last-opened']]: lastOpenedDrawerId === activeDrawerId,\n            [styles.legacy]: isLegacyDrawer,\n            [testutilStyles['active-drawer']]: !toolsOnlyMode && activeDrawerId,\n            [testutilStyles.tools]: isToolsDrawer,\n          })}\n          ref={drawerRef}\n          onBlur={e => {\n            if (!e.relatedTarget || !e.currentTarget.contains(e.relatedTarget)) {\n              drawersFocusControl.loseFocus();\n            }\n          }}\n          style={{\n            blockSize: `calc(100vh - ${drawersTopOffset}px - ${placement.insetBlockEnd}px)`,\n            insetBlockStart: drawersTopOffset,\n            ...(!isMobile &&\n              !isLegacyDrawer && {\n                [customCssProps.drawerSize]: `${['entering', 'entered'].includes(state) ? size : 0}px`,\n              }),\n          }}\n          data-testid={`awsui-app-layout-drawer-${activeDrawerId}`}\n        >\n          {!isMobile && activeDrawer?.resizable && (\n            <div className={styles['drawer-slider']}>\n              <PanelResizeHandle\n                ref={drawersFocusControl.refs.slider}\n                position=\"side\"\n                className={testutilStyles['drawers-slider']}\n                ariaLabel={activeDrawer?.ariaLabels?.resizeHandle}\n                ariaValuenow={resizeProps.relativeSize}\n                onKeyDown={resizeProps.onKeyDown}\n                onPointerDown={resizeProps.onPointerDown}\n              />\n            </div>\n          )}\n          <div className={clsx(styles['drawer-content-container'], sharedStyles['with-motion'])}>\n            <div className={clsx(styles['drawer-close-button'])}>\n              <InternalButton\n                ariaLabel={computedAriaLabels.closeButton}\n                className={clsx({\n                  [testutilStyles['active-drawer-close-button']]: !isToolsDrawer && activeDrawerId,\n                  [testutilStyles['tools-close']]: isToolsDrawer,\n                })}\n                formAction=\"none\"\n                iconName={isMobile ? 'close' : 'angle-right'}\n                onClick={() => onActiveDrawerChange(null)}\n                ref={drawersFocusControl.refs.close}\n                variant=\"icon\"\n              />\n            </div>\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            {activeDrawerId !== TOOLS_DRAWER_ID && (\n              <div className={styles['drawer-content']}>{activeDrawer?.content}</div>\n            )}\n          </div>\n        </aside>\n      )}\n    </Transition>\n  );\n}\n\nexport const createWidgetizedAppLayoutDrawer = createWidgetizedComponent(AppLayoutDrawerImplementation);\n"]}

package/lib/internal/template/app-layout/visual-refresh-toolbar/drawer/styles.css.js

@@ -1,11 +1,15 @@
 
     import './styles.scoped.css';
     export default {
-  "drawer": "awsui_drawer_12i0j_nqc97_185",
-  "drawer-content-container": "awsui_drawer-content-container_12i0j_nqc97_198",
-  "drawer-close-button": "awsui_drawer-close-button_12i0j_nqc97_206",
-  "drawer-content": "awsui_drawer-content_12i0j_nqc97_198",
-  "drawer-content-hidden": "awsui_drawer-content-hidden_12i0j_nqc97_215",
-  "drawer-slider": "awsui_drawer-slider_12i0j_nqc97_218"
+  "drawer": "awsui_drawer_12i0j_12jqq_185",
+  "legacy": "awsui_legacy_12i0j_12jqq_200",
+  "last-opened": "awsui_last-opened_12i0j_12jqq_205",
+  "drawer-global": "awsui_drawer-global_12i0j_12jqq_210",
+  "drawer-hidden": "awsui_drawer-hidden_12i0j_12jqq_217",
+  "drawer-content-container": "awsui_drawer-content-container_12i0j_12jqq_220",
+  "drawer-close-button": "awsui_drawer-close-button_12i0j_12jqq_228",
+  "drawer-content": "awsui_drawer-content_12i0j_12jqq_220",
+  "drawer-content-hidden": "awsui_drawer-content-hidden_12i0j_12jqq_237",
+  "drawer-slider": "awsui_drawer-slider_12i0j_12jqq_240"
 };
   

package/lib/internal/template/app-layout/visual-refresh-toolbar/drawer/styles.scoped.css

@@ -182,12 +182,13 @@ 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_drawer_12i0j_nqc97_185:not(#\9) {
+.awsui_drawer_12i0j_12jqq_185:not(#\9) {
   position: sticky;
   z-index: 830;
   background-color: var(--color-background-container-content-myy7cn, #ffffff);
   display: grid;
   grid-template-columns: var(--space-m-u91ipm, 16px) 1fr;
+  inline-size: var(--awsui-drawer-size-g964ok);
   block-size: 100%;
   overflow: hidden;
   /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
@@ -195,7 +196,28 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   pointer-events: auto;
   word-wrap: break-word;
 }
-.awsui_drawer_12i0j_nqc97_185 > .awsui_drawer-content-container_12i0j_nqc97_198:not(#\9) {
+@media (min-width: 689px) {
+  .awsui_drawer_12i0j_12jqq_185:not(#\9):not(.awsui_legacy_12i0j_12jqq_200) {
+    border-inline-start: var(--border-divider-section-width-iueskx, 1px) solid var(--color-border-layout-5gml03, #d5dbdb);
+  }
+}
+@media (max-width: 688px) {
+  .awsui_drawer_12i0j_12jqq_185.awsui_last-opened_12i0j_12jqq_205:not(#\9) {
+    z-index: 1001;
+  }
+}
+@media (max-width: 688px) {
+  .awsui_drawer_12i0j_12jqq_185.awsui_drawer-global_12i0j_12jqq_210:not(#\9) {
+    display: none;
+  }
+  .awsui_drawer_12i0j_12jqq_185.awsui_drawer-global_12i0j_12jqq_210.awsui_last-opened_12i0j_12jqq_205:not(#\9) {
+    display: block;
+  }
+}
+.awsui_drawer_12i0j_12jqq_185.awsui_drawer-hidden_12i0j_12jqq_217:not(#\9) {
+  display: none;
+}
+.awsui_drawer_12i0j_12jqq_185 > .awsui_drawer-content-container_12i0j_12jqq_220:not(#\9) {
   grid-column: 1/span 2;
   grid-row: 1;
   display: grid;
@@ -203,19 +225,19 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   grid-template-rows: 10px auto 1fr;
   overflow-y: auto;
 }
-.awsui_drawer_12i0j_nqc97_185 > .awsui_drawer-content-container_12i0j_nqc97_198 > .awsui_drawer-close-button_12i0j_nqc97_206:not(#\9) {
+.awsui_drawer_12i0j_12jqq_185 > .awsui_drawer-content-container_12i0j_12jqq_220 > .awsui_drawer-close-button_12i0j_12jqq_228:not(#\9) {
   grid-column: 3;
   grid-row: 2;
   z-index: 1;
 }
-.awsui_drawer_12i0j_nqc97_185 > .awsui_drawer-content-container_12i0j_nqc97_198 > .awsui_drawer-content_12i0j_nqc97_198:not(#\9) {
+.awsui_drawer_12i0j_12jqq_185 > .awsui_drawer-content-container_12i0j_12jqq_220 > .awsui_drawer-content_12i0j_12jqq_220:not(#\9) {
   grid-column: 1/span 4;
   grid-row: 1/span 2;
 }
-.awsui_drawer_12i0j_nqc97_185 > .awsui_drawer-content-container_12i0j_nqc97_198 > .awsui_drawer-content_12i0j_nqc97_198.awsui_drawer-content-hidden_12i0j_nqc97_215:not(#\9) {
+.awsui_drawer_12i0j_12jqq_185 > .awsui_drawer-content-container_12i0j_12jqq_220 > .awsui_drawer-content_12i0j_12jqq_220.awsui_drawer-content-hidden_12i0j_12jqq_237:not(#\9) {
   display: none;
 }
-.awsui_drawer_12i0j_nqc97_185 > .awsui_drawer-slider_12i0j_nqc97_218:not(#\9) {
+.awsui_drawer_12i0j_12jqq_185 > .awsui_drawer-slider_12i0j_12jqq_240:not(#\9) {
   grid-column: 1;
   grid-row: 1;
   block-size: 100%;

package/lib/internal/template/app-layout/visual-refresh-toolbar/drawer/styles.selectors.js

@@ -2,11 +2,15 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "drawer": "awsui_drawer_12i0j_nqc97_185",
-  "drawer-content-container": "awsui_drawer-content-container_12i0j_nqc97_198",
-  "drawer-close-button": "awsui_drawer-close-button_12i0j_nqc97_206",
-  "drawer-content": "awsui_drawer-content_12i0j_nqc97_198",
-  "drawer-content-hidden": "awsui_drawer-content-hidden_12i0j_nqc97_215",
-  "drawer-slider": "awsui_drawer-slider_12i0j_nqc97_218"
+  "drawer": "awsui_drawer_12i0j_12jqq_185",
+  "legacy": "awsui_legacy_12i0j_12jqq_200",
+  "last-opened": "awsui_last-opened_12i0j_12jqq_205",
+  "drawer-global": "awsui_drawer-global_12i0j_12jqq_210",
+  "drawer-hidden": "awsui_drawer-hidden_12i0j_12jqq_217",
+  "drawer-content-container": "awsui_drawer-content-container_12i0j_12jqq_220",
+  "drawer-close-button": "awsui_drawer-close-button_12i0j_12jqq_228",
+  "drawer-content": "awsui_drawer-content_12i0j_12jqq_220",
+  "drawer-content-hidden": "awsui_drawer-content-hidden_12i0j_12jqq_237",
+  "drawer-slider": "awsui_drawer-slider_12i0j_12jqq_240"
 };
   

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/app-layout/visual-refresh-toolbar/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAWxE,OAAO,EAAE,cAAc,EAA8B,MAAM,eAAe,CAAC;AAkB3E,QAAA,MAAM,6BAA6B;;;;;;;;;;;;;;;4CA6TlC,CAAC;AAEF,eAAe,6BAA6B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/app-layout/visual-refresh-toolbar/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAWxE,OAAO,EAAE,cAAc,EAA8B,MAAM,eAAe,CAAC;AAoB3E,QAAA,MAAM,6BAA6B;;;;;;;;;;;;;;;4CA8YlC,CAAC;AAEF,eAAe,6BAA6B,CAAC"}

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

@@ -10,11 +10,12 @@ import { useUniqueId } from '../../internal/hooks/use-unique-id';
 import { useGetGlobalBreadcrumbs } from '../../internal/plugins/helpers/use-global-breadcrumbs';
 import globalVars from '../../internal/styles/global-vars';
 import { getSplitPanelDefaultSize } from '../../split-panel/utils/size-utils';
-import { useDrawers } from '../utils/use-drawers';
-import { useFocusControl } from '../utils/use-focus-control';
+import { MIN_DRAWER_SIZE, useDrawers } from '../utils/use-drawers';
+import { useFocusControl, useMultipleFocusControl } from '../utils/use-focus-control';
 import { useSplitPanelFocusControl } from '../utils/use-split-panel-focus-control';
+import { ActiveDrawersContext } from '../utils/visibility-context';
 import { computeHorizontalLayout, computeVerticalLayout } from './compute-layout';
-import { AppLayoutDrawer, AppLayoutNavigation, AppLayoutNotifications, AppLayoutSplitPanelBottom, AppLayoutSplitPanelSide, AppLayoutToolbar, } from './internal';
+import { AppLayoutDrawer, AppLayoutGlobalDrawers, AppLayoutNavigation, AppLayoutNotifications, AppLayoutSplitPanelBottom, AppLayoutSplitPanelSide, AppLayoutToolbar, } from './internal';
 import { useMultiAppLayout } from './multi-layout';
 import { SkeletonLayout } from './skeleton';
 const AppLayoutVisualRefreshToolbar = React.forwardRef((_a, forwardRef) => {
@@ -40,7 +41,48 @@ const AppLayoutVisualRefreshToolbar = React.forwardRef((_a, forwardRef) => {
         drawersFocusControl.setFocus();
         fireNonCancelableEvent(onToolsChange, { open });
     };
-    const { drawers, activeDrawer, minDrawerSize, activeDrawerSize, ariaLabelsWithDrawers, onActiveDrawerChange, onActiveDrawerResize, } = useDrawers(rest, ariaLabels, {
+    const onGlobalDrawerFocus = (drawerId, open) => {
+        globalDrawersFocusControl.setFocus({ force: true, drawerId, open });
+    };
+    const onAddNewActiveDrawer = (drawerId) => {
+        var _a, _b, _c;
+        // If a local drawer is already open, and we attempt to open a new one,
+        // it will replace the existing one instead of opening an additional drawer,
+        // since only one local drawer is supported. Therefore, layout calculations are not necessary.
+        if (activeDrawer && (drawers === null || drawers === void 0 ? void 0 : drawers.find(drawer => drawer.id === drawerId))) {
+            return;
+        }
+        // get the size of drawerId. it could be either local or global drawer
+        const combinedDrawers = [...(drawers || []), ...globalDrawers];
+        const newDrawer = combinedDrawers.find(drawer => drawer.id === drawerId);
+        if (!newDrawer) {
+            return;
+        }
+        const newDrawerSize = Math.min((_b = (_a = newDrawer.defaultSize) !== null && _a !== void 0 ? _a : drawerSizes[drawerId]) !== null && _b !== void 0 ? _b : MIN_DRAWER_SIZE, MIN_DRAWER_SIZE);
+        //   check if the active drawers could be resized to fit the new drawers
+        //   to do this, we need to take all active drawers, sum up their min sizes, truncate it from resizableSpaceAvailable
+        //   and compare a given number with the new drawer id min size
+        // the total size of all global drawers resized to their min size
+        let totalActiveDrawersMinSize = activeGlobalDrawersIds
+            .map(activeDrawerId => { var _a, _b; return (_b = (_a = combinedDrawers.find(drawer => drawer.id === activeDrawerId)) === null || _a === void 0 ? void 0 : _a.defaultSize) !== null && _b !== void 0 ? _b : MIN_DRAWER_SIZE; })
+            .reduce((acc, curr) => acc + curr, 0);
+        if (activeDrawer) {
+            totalActiveDrawersMinSize += Math.min((_c = activeDrawer === null || activeDrawer === void 0 ? void 0 : activeDrawer.defaultSize) !== null && _c !== void 0 ? _c : MIN_DRAWER_SIZE, MIN_DRAWER_SIZE);
+        }
+        const availableSpaceForNewDrawer = resizableSpaceAvailable - totalActiveDrawersMinSize;
+        if (availableSpaceForNewDrawer >= newDrawerSize) {
+            return;
+        }
+        // now we made sure we cannot accommodate the new drawer with existing ones
+        const drawerToClose = drawersOpenQueue[drawersOpenQueue.length - 1];
+        if (activeDrawer && (activeDrawer === null || activeDrawer === void 0 ? void 0 : activeDrawer.id) === drawerToClose) {
+            onActiveDrawerChange(null);
+        }
+        else if (activeGlobalDrawersIds.includes(drawerToClose)) {
+            onActiveGlobalDrawersChange(drawerToClose);
+        }
+    };
+    const { drawers, activeDrawer, minDrawerSize, minGlobalDrawersSizes, activeDrawerSize, ariaLabelsWithDrawers, globalDrawers, activeGlobalDrawers, activeGlobalDrawersIds, activeGlobalDrawersSizes, drawerSizes, drawersOpenQueue, onActiveDrawerChange, onActiveDrawerResize, onActiveGlobalDrawersChange, } = useDrawers(Object.assign(Object.assign({}, rest), { onGlobalDrawerFocus, onAddNewActiveDrawer }), ariaLabels, {
         ariaLabels,
         toolsHide,
         toolsOpen,
@@ -81,6 +123,7 @@ const AppLayoutVisualRefreshToolbar = React.forwardRef((_a, forwardRef) => {
         ariaLabel: undefined,
         displayed: false,
     });
+    const globalDrawersFocusControl = useMultipleFocusControl(true, activeGlobalDrawersIds);
     const drawersFocusControl = useFocusControl(!!(activeDrawer === null || activeDrawer === void 0 ? void 0 : activeDrawer.id), true, activeDrawer === null || activeDrawer === void 0 ? void 0 : activeDrawer.id);
     const navigationFocusControl = useFocusControl(navigationOpen);
     const splitPanelFocusControl = useSplitPanelFocusControl([splitPanelPreferences, splitPanelOpen]);
@@ -92,7 +135,7 @@ const AppLayoutVisualRefreshToolbar = React.forwardRef((_a, forwardRef) => {
         focusSplitPanel: () => { var _a; return (_a = splitPanelFocusControl.refs.slider.current) === null || _a === void 0 ? void 0 : _a.focus(); },
     }));
     const resolvedNavigation = navigationHide ? null : navigation !== null && navigation !== void 0 ? navigation : React.createElement(React.Fragment, null);
-    const { maxDrawerSize, maxSplitPanelSize, splitPanelForcedPosition, splitPanelPosition } = computeHorizontalLayout({
+    const { maxDrawerSize, maxSplitPanelSize, splitPanelForcedPosition, splitPanelPosition, maxGlobalDrawersSizes, resizableSpaceAvailable, } = computeHorizontalLayout({
         activeDrawerSize: activeDrawer ? activeDrawerSize : 0,
         splitPanelSize,
         minContentWidth,
@@ -102,6 +145,7 @@ const AppLayoutVisualRefreshToolbar = React.forwardRef((_a, forwardRef) => {
         splitPanelOpen,
         splitPanelPosition: splitPanelPreferences === null || splitPanelPreferences === void 0 ? void 0 : splitPanelPreferences.position,
         isMobile,
+        activeGlobalDrawersSizes,
     });
     const { registered, toolbarProps } = useMultiAppLayout({
         forceDeduplicationType,
@@ -144,8 +188,16 @@ const AppLayoutVisualRefreshToolbar = React.forwardRef((_a, forwardRef) => {
         activeDrawerSize,
         minDrawerSize,
         maxDrawerSize,
+        minGlobalDrawersSizes,
+        maxGlobalDrawersSizes,
         drawers: drawers,
+        globalDrawers,
+        activeGlobalDrawers,
+        activeGlobalDrawersIds,
+        activeGlobalDrawersSizes,
+        onActiveGlobalDrawersChange,
         drawersFocusControl,
+        globalDrawersFocusControl,
         splitPanelPosition,
         splitPanelToggleConfig,
         splitPanelOpen,
@@ -155,6 +207,7 @@ const AppLayoutVisualRefreshToolbar = React.forwardRef((_a, forwardRef) => {
         toolbarState,
         setToolbarState,
         verticalOffsets,
+        drawersOpenQueue,
         setToolbarHeight,
         setNotificationsHeight,
         onSplitPanelToggle: onSplitPanelToggleHandler,
@@ -202,7 +255,8 @@ const AppLayoutVisualRefreshToolbar = React.forwardRef((_a, forwardRef) => {
                 paddingBlockEnd: splitPanelOpen && splitPanelPosition === 'bottom' ? splitPanelReportedSize : '',
             }, toolbar: hasToolbar && React.createElement(AppLayoutToolbar, { appLayoutInternals: appLayoutInternals, toolbarProps: toolbarProps }), notifications: notifications && (React.createElement(AppLayoutNotifications, { appLayoutInternals: appLayoutInternals }, notifications)), contentHeader: contentHeader, 
             // delay rendering the content until registration of this instance is complete
-            content: registered ? content : null, navigation: resolvedNavigation && React.createElement(AppLayoutNavigation, { appLayoutInternals: appLayoutInternals }), navigationOpen: navigationOpen, navigationWidth: navigationWidth, tools: activeDrawer && React.createElement(AppLayoutDrawer, { appLayoutInternals: appLayoutInternals }), toolsOpen: !!activeDrawer, toolsWidth: activeDrawerSize, sideSplitPanel: splitPanelPosition === 'side' && (React.createElement(AppLayoutSplitPanelSide, { appLayoutInternals: appLayoutInternals, splitPanelInternals: splitPanelInternals }, splitPanel)), bottomSplitPanel: splitPanelPosition === 'bottom' && (React.createElement(AppLayoutSplitPanelBottom, { appLayoutInternals: appLayoutInternals, splitPanelInternals: splitPanelInternals }, splitPanel)), splitPanelOpen: splitPanelOpen, placement: placement, contentType: contentType, maxContentWidth: maxContentWidth, disableContentPaddings: disableContentPaddings })));
+            content: registered ? content : null, navigation: resolvedNavigation && React.createElement(AppLayoutNavigation, { appLayoutInternals: appLayoutInternals }), navigationOpen: navigationOpen, navigationWidth: navigationWidth, tools: activeDrawer && React.createElement(AppLayoutDrawer, { appLayoutInternals: appLayoutInternals }), globalTools: React.createElement(ActiveDrawersContext.Provider, { value: activeGlobalDrawersIds },
+                React.createElement(AppLayoutGlobalDrawers, { appLayoutInternals: appLayoutInternals })), globalToolsOpen: !!activeGlobalDrawersIds.length, toolsOpen: !!activeDrawer, toolsWidth: activeDrawerSize, sideSplitPanel: splitPanelPosition === 'side' && (React.createElement(AppLayoutSplitPanelSide, { appLayoutInternals: appLayoutInternals, splitPanelInternals: splitPanelInternals }, splitPanel)), bottomSplitPanel: splitPanelPosition === 'bottom' && (React.createElement(AppLayoutSplitPanelBottom, { appLayoutInternals: appLayoutInternals, splitPanelInternals: splitPanelInternals }, splitPanel)), splitPanelOpen: splitPanelOpen, placement: placement, contentType: contentType, maxContentWidth: maxContentWidth, disableContentPaddings: disableContentPaddings })));
 });
 export default AppLayoutVisualRefreshToolbar;
 //# sourceMappingURL=index.js.map