@cloudscape-design/components 3.0.317 → 3.0.319

package/app-layout/utils/use-drawer-focus-control.js

@@ -11,13 +11,18 @@ export function useDrawerFocusControl(dependencies, isOpen, restoreFocus = false
     const shouldFocus = useRef(false);
     const lastInteraction = useRef(null);
     useEffect(() => {
-        var _a, _b, _c;
+        var _a, _b, _c, _d;
         switch ((_a = lastInteraction.current) === null || _a === void 0 ? void 0 : _a.type) {
             case 'open':
-                (_b = refs.slider.current) === null || _b === void 0 ? void 0 : _b.focus();
+                if (refs.slider.current) {
+                    (_b = refs.slider.current) === null || _b === void 0 ? void 0 : _b.focus();
+                }
+                else {
+                    (_c = refs.close.current) === null || _c === void 0 ? void 0 : _c.focus();
+                }
                 break;
             case 'close':
-                (_c = refs.toggle.current) === null || _c === void 0 ? void 0 : _c.focus();
+                (_d = refs.toggle.current) === null || _d === void 0 ? void 0 : _d.focus();
                 break;
         }
         lastInteraction.current = null;

package/app-layout/utils/use-drawer-focus-control.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-drawer-focus-control.js","sourceRoot":"lib/default/","sources":["app-layout/utils/use-drawer-focus-control.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,EAA6B,SAAS,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAkBlF,MAAM,UAAU,qBAAqB,CACnC,YAA4B,EAC5B,MAAe,EACf,YAAY,GAAG,KAAK;IAEpB,MAAM,IAAI,GAAG;QACX,MAAM,EAAE,MAAM,CAAkB,IAAI,CAAC;QACrC,KAAK,EAAE,MAAM,CAAkB,IAAI,CAAC;QACpC,MAAM,EAAE,MAAM,CAAiB,IAAI,CAAC;KACrC,CAAC;IACF,MAAM,sBAAsB,GAAG,MAAM,EAAe,CAAC;IACrD,MAAM,WAAW,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IAClC,MAAM,eAAe,GAAG,MAAM,CAA+B,IAAI,CAAC,CAAC;IAEnE,SAAS,CAAC,GAAG,EAAE;;QACb,QAAQ,MAAA,eAAe,CAAC,OAAO,0CAAE,IAAI,EAAE;YACrC,KAAK,MAAM;gBACT,MAAA,IAAI,CAAC,MAAM,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAC;gBAC7B,MAAM;YACR,KAAK,OAAO;gBACV,MAAA,IAAI,CAAC,MAAM,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAC;gBAC7B,MAAM;SACT;QACD,eAAe,CAAC,OAAO,GAAG,IAAI,CAAC;QAC/B,uDAAuD;IACzD,CAAC,EAAE,YAAY,CAAC,CAAC;IAEjB,MAAM,OAAO,GAAG,GAAG,EAAE;;QACnB,IAAI,CAAC,WAAW,CAAC,OAAO,EAAE;YACxB,OAAO;SACR;QACD,IAAI,MAAM,EAAE;YACV,sBAAsB,CAAC,OAAO;gBAC5B,QAAQ,CAAC,aAAa,KAAK,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAE,QAAQ,CAAC,aAA6B,CAAC,CAAC,CAAC,SAAS,CAAC;YACjG,MAAA,IAAI,CAAC,KAAK,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAC;SAC7B;aAAM;YACL,IAAI,YAAY,IAAI,sBAAsB,CAAC,OAAO,IAAI,QAAQ,CAAC,QAAQ,CAAC,sBAAsB,CAAC,OAAO,CAAC,EAAE;gBACvG,sBAAsB,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;gBACvC,sBAAsB,CAAC,OAAO,GAAG,SAAS,CAAC;aAC5C;iBAAM;gBACL,MAAA,IAAI,CAAC,MAAM,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAC;aAC9B;SACF;QACD,WAAW,CAAC,OAAO,GAAG,KAAK,CAAC;IAC9B,CAAC,CAAC;IAEF,kEAAkE;IAClE,uDAAuD;IACvD,SAAS,CAAC,OAAO,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IAE7B,MAAM,SAAS,GAAG,WAAW,CAAC,GAAG,EAAE;QACjC,sBAAsB,CAAC,OAAO,GAAG,SAAS,CAAC;IAC7C,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO;QACL,IAAI;QACJ,QAAQ,EAAE,KAAK,CAAC,EAAE;YAChB,WAAW,CAAC,OAAO,GAAG,IAAI,CAAC;YAC3B,IAAI,KAAK,IAAI,MAAM,EAAE;gBACnB,OAAO,EAAE,CAAC;aACX;QACH,CAAC;QACD,SAAS;QACT,kBAAkB,EAAE,CAAC,WAAkC,EAAE,EAAE,CAAC,CAAC,eAAe,CAAC,OAAO,GAAG,WAAW,CAAC;KACpG,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { DependencyList, RefObject, useEffect, useRef, useCallback } from 'react';\nimport { ButtonProps } from '../../button/interfaces';\n\nexport type DrawerLastInteraction = { type: 'open' } | { type: 'close' };\n\nexport interface DrawerFocusControlRefs {\n  toggle: RefObject<ButtonProps.Ref>;\n  close: RefObject<ButtonProps.Ref>;\n  slider: RefObject<HTMLDivElement>;\n}\n\ninterface FocusControlState {\n  refs: DrawerFocusControlRefs;\n  setFocus: (force?: boolean) => void;\n  loseFocus: () => void;\n  setLastInteraction: (interaction: DrawerLastInteraction) => void;\n}\n\nexport function useDrawerFocusControl(\n  dependencies: DependencyList,\n  isOpen: boolean,\n  restoreFocus = false\n): FocusControlState {\n  const refs = {\n    toggle: useRef<ButtonProps.Ref>(null),\n    close: useRef<ButtonProps.Ref>(null),\n    slider: useRef<HTMLDivElement>(null),\n  };\n  const previousFocusedElement = useRef<HTMLElement>();\n  const shouldFocus = useRef(false);\n  const lastInteraction = useRef<DrawerLastInteraction | null>(null);\n\n  useEffect(() => {\n    switch (lastInteraction.current?.type) {\n      case 'open':\n        refs.slider.current?.focus();\n        break;\n      case 'close':\n        refs.toggle.current?.focus();\n        break;\n    }\n    lastInteraction.current = null;\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, dependencies);\n\n  const doFocus = () => {\n    if (!shouldFocus.current) {\n      return;\n    }\n    if (isOpen) {\n      previousFocusedElement.current =\n        document.activeElement !== document.body ? (document.activeElement as HTMLElement) : undefined;\n      refs.close.current?.focus();\n    } else {\n      if (restoreFocus && previousFocusedElement.current && document.contains(previousFocusedElement.current)) {\n        previousFocusedElement.current.focus();\n        previousFocusedElement.current = undefined;\n      } else {\n        refs.toggle.current?.focus();\n      }\n    }\n    shouldFocus.current = false;\n  };\n\n  // We explictly want this effect to run when only `isOpen` changes\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  useEffect(doFocus, [isOpen]);\n\n  const loseFocus = useCallback(() => {\n    previousFocusedElement.current = undefined;\n  }, []);\n\n  return {\n    refs,\n    setFocus: force => {\n      shouldFocus.current = true;\n      if (force && isOpen) {\n        doFocus();\n      }\n    },\n    loseFocus,\n    setLastInteraction: (interaction: DrawerLastInteraction) => (lastInteraction.current = interaction),\n  };\n}\n"]}
+{"version":3,"file":"use-drawer-focus-control.js","sourceRoot":"lib/default/","sources":["app-layout/utils/use-drawer-focus-control.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,EAA6B,SAAS,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAkBlF,MAAM,UAAU,qBAAqB,CACnC,YAA4B,EAC5B,MAAe,EACf,YAAY,GAAG,KAAK;IAEpB,MAAM,IAAI,GAAG;QACX,MAAM,EAAE,MAAM,CAAkB,IAAI,CAAC;QACrC,KAAK,EAAE,MAAM,CAAkB,IAAI,CAAC;QACpC,MAAM,EAAE,MAAM,CAAiB,IAAI,CAAC;KACrC,CAAC;IACF,MAAM,sBAAsB,GAAG,MAAM,EAAe,CAAC;IACrD,MAAM,WAAW,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IAClC,MAAM,eAAe,GAAG,MAAM,CAA+B,IAAI,CAAC,CAAC;IAEnE,SAAS,CAAC,GAAG,EAAE;;QACb,QAAQ,MAAA,eAAe,CAAC,OAAO,0CAAE,IAAI,EAAE;YACrC,KAAK,MAAM;gBACT,IAAI,IAAI,CAAC,MAAM,CAAC,OAAO,EAAE;oBACvB,MAAA,IAAI,CAAC,MAAM,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAC;iBAC9B;qBAAM;oBACL,MAAA,IAAI,CAAC,KAAK,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAC;iBAC7B;gBACD,MAAM;YACR,KAAK,OAAO;gBACV,MAAA,IAAI,CAAC,MAAM,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAC;gBAC7B,MAAM;SACT;QACD,eAAe,CAAC,OAAO,GAAG,IAAI,CAAC;QAC/B,uDAAuD;IACzD,CAAC,EAAE,YAAY,CAAC,CAAC;IAEjB,MAAM,OAAO,GAAG,GAAG,EAAE;;QACnB,IAAI,CAAC,WAAW,CAAC,OAAO,EAAE;YACxB,OAAO;SACR;QACD,IAAI,MAAM,EAAE;YACV,sBAAsB,CAAC,OAAO;gBAC5B,QAAQ,CAAC,aAAa,KAAK,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAE,QAAQ,CAAC,aAA6B,CAAC,CAAC,CAAC,SAAS,CAAC;YACjG,MAAA,IAAI,CAAC,KAAK,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAC;SAC7B;aAAM;YACL,IAAI,YAAY,IAAI,sBAAsB,CAAC,OAAO,IAAI,QAAQ,CAAC,QAAQ,CAAC,sBAAsB,CAAC,OAAO,CAAC,EAAE;gBACvG,sBAAsB,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;gBACvC,sBAAsB,CAAC,OAAO,GAAG,SAAS,CAAC;aAC5C;iBAAM;gBACL,MAAA,IAAI,CAAC,MAAM,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAC;aAC9B;SACF;QACD,WAAW,CAAC,OAAO,GAAG,KAAK,CAAC;IAC9B,CAAC,CAAC;IAEF,kEAAkE;IAClE,uDAAuD;IACvD,SAAS,CAAC,OAAO,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IAE7B,MAAM,SAAS,GAAG,WAAW,CAAC,GAAG,EAAE;QACjC,sBAAsB,CAAC,OAAO,GAAG,SAAS,CAAC;IAC7C,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO;QACL,IAAI;QACJ,QAAQ,EAAE,KAAK,CAAC,EAAE;YAChB,WAAW,CAAC,OAAO,GAAG,IAAI,CAAC;YAC3B,IAAI,KAAK,IAAI,MAAM,EAAE;gBACnB,OAAO,EAAE,CAAC;aACX;QACH,CAAC;QACD,SAAS;QACT,kBAAkB,EAAE,CAAC,WAAkC,EAAE,EAAE,CAAC,CAAC,eAAe,CAAC,OAAO,GAAG,WAAW,CAAC;KACpG,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { DependencyList, RefObject, useEffect, useRef, useCallback } from 'react';\nimport { ButtonProps } from '../../button/interfaces';\n\nexport type DrawerLastInteraction = { type: 'open' } | { type: 'close' };\n\nexport interface DrawerFocusControlRefs {\n  toggle: RefObject<ButtonProps.Ref>;\n  close: RefObject<ButtonProps.Ref>;\n  slider: RefObject<HTMLDivElement>;\n}\n\ninterface FocusControlState {\n  refs: DrawerFocusControlRefs;\n  setFocus: (force?: boolean) => void;\n  loseFocus: () => void;\n  setLastInteraction: (interaction: DrawerLastInteraction) => void;\n}\n\nexport function useDrawerFocusControl(\n  dependencies: DependencyList,\n  isOpen: boolean,\n  restoreFocus = false\n): FocusControlState {\n  const refs = {\n    toggle: useRef<ButtonProps.Ref>(null),\n    close: useRef<ButtonProps.Ref>(null),\n    slider: useRef<HTMLDivElement>(null),\n  };\n  const previousFocusedElement = useRef<HTMLElement>();\n  const shouldFocus = useRef(false);\n  const lastInteraction = useRef<DrawerLastInteraction | null>(null);\n\n  useEffect(() => {\n    switch (lastInteraction.current?.type) {\n      case 'open':\n        if (refs.slider.current) {\n          refs.slider.current?.focus();\n        } else {\n          refs.close.current?.focus();\n        }\n        break;\n      case 'close':\n        refs.toggle.current?.focus();\n        break;\n    }\n    lastInteraction.current = null;\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, dependencies);\n\n  const doFocus = () => {\n    if (!shouldFocus.current) {\n      return;\n    }\n    if (isOpen) {\n      previousFocusedElement.current =\n        document.activeElement !== document.body ? (document.activeElement as HTMLElement) : undefined;\n      refs.close.current?.focus();\n    } else {\n      if (restoreFocus && previousFocusedElement.current && document.contains(previousFocusedElement.current)) {\n        previousFocusedElement.current.focus();\n        previousFocusedElement.current = undefined;\n      } else {\n        refs.toggle.current?.focus();\n      }\n    }\n    shouldFocus.current = false;\n  };\n\n  // We explictly want this effect to run when only `isOpen` changes\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  useEffect(doFocus, [isOpen]);\n\n  const loseFocus = useCallback(() => {\n    previousFocusedElement.current = undefined;\n  }, []);\n\n  return {\n    refs,\n    setFocus: force => {\n      shouldFocus.current = true;\n      if (force && isOpen) {\n        doFocus();\n      }\n    },\n    loseFocus,\n    setLastInteraction: (interaction: DrawerLastInteraction) => (lastInteraction.current = interaction),\n  };\n}\n"]}

package/app-layout/utils/use-keyboard-events.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { SizeControlProps } from './interfaces';
+export declare const useKeyboardEvents: ({ position, setSidePanelWidth, setBottomPanelHeight, panelRef, }: SizeControlProps) => (event: React.KeyboardEvent) => void;
+//# sourceMappingURL=use-keyboard-events.d.ts.map

package/app-layout/utils/use-keyboard-events.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-keyboard-events.d.ts","sourceRoot":"lib/default/","sources":["app-layout/utils/use-keyboard-events.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAmBhD,eAAO,MAAM,iBAAiB,qEAK3B,gBAAgB,aACF,mBAAmB,SAwDnC,CAAC"}

package/{split-panel → app-layout}/utils/use-keyboard-events.js

@@ -1,34 +1,33 @@
 import { KeyCode } from '../../internal/keycode';
 const KEYBOARD_SINGLE_STEP_SIZE = 10;
 const KEYBOARD_MULTIPLE_STEPS_SIZE = 60;
-const getCurrentSize = (splitPanelRef) => {
-    if (!splitPanelRef || !splitPanelRef.current) {
+const getCurrentSize = (panelRef) => {
+    if (!panelRef || !panelRef.current) {
         return {
-            splitPanelHeight: 0,
-            splitPanelWidth: 0,
+            panelHeight: 0,
+            panelWidth: 0,
         };
     }
-    const safeParseFloat = (size = '') => parseFloat(size) || 0;
     return {
-        splitPanelHeight: safeParseFloat(splitPanelRef.current.style.height),
-        splitPanelWidth: safeParseFloat(splitPanelRef.current.style.width),
+        panelHeight: panelRef.current.clientHeight,
+        panelWidth: panelRef.current.clientWidth,
     };
 };
-export const useKeyboardEvents = ({ position, setSidePanelWidth, setBottomPanelHeight, splitPanelRef, }) => {
+export const useKeyboardEvents = ({ position, setSidePanelWidth, setBottomPanelHeight, panelRef, }) => {
     return (event) => {
         let setSizeFunction;
         let currentSize;
         let maxSize;
-        const { splitPanelHeight, splitPanelWidth } = getCurrentSize(splitPanelRef);
+        const { panelHeight, panelWidth } = getCurrentSize(panelRef);
         if (position === 'side') {
             setSizeFunction = setSidePanelWidth;
-            currentSize = splitPanelWidth;
+            currentSize = panelWidth;
             // don't need the exact max size as it's constrained in the set size function
             maxSize = window.innerWidth;
         }
         else {
             setSizeFunction = setBottomPanelHeight;
-            currentSize = splitPanelHeight;
+            currentSize = panelHeight;
             // don't need the exact max size as it's constrained in the set size function
             maxSize = window.innerHeight;
         }

package/app-layout/utils/use-keyboard-events.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-keyboard-events.js","sourceRoot":"lib/default/","sources":["app-layout/utils/use-keyboard-events.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport { KeyCode } from '../../internal/keycode';\nimport { SizeControlProps } from './interfaces';\n\nconst KEYBOARD_SINGLE_STEP_SIZE = 10;\nconst KEYBOARD_MULTIPLE_STEPS_SIZE = 60;\n\nconst getCurrentSize = (panelRef?: React.RefObject<HTMLDivElement>) => {\n  if (!panelRef || !panelRef.current) {\n    return {\n      panelHeight: 0,\n      panelWidth: 0,\n    };\n  }\n\n  return {\n    panelHeight: panelRef.current.clientHeight,\n    panelWidth: panelRef.current.clientWidth,\n  };\n};\n\nexport const useKeyboardEvents = ({\n  position,\n  setSidePanelWidth,\n  setBottomPanelHeight,\n  panelRef,\n}: SizeControlProps) => {\n  return (event: React.KeyboardEvent) => {\n    let setSizeFunction;\n    let currentSize;\n    let maxSize;\n\n    const { panelHeight, panelWidth } = getCurrentSize(panelRef);\n\n    if (position === 'side') {\n      setSizeFunction = setSidePanelWidth;\n      currentSize = panelWidth;\n      // don't need the exact max size as it's constrained in the set size function\n      maxSize = window.innerWidth;\n    } else {\n      setSizeFunction = setBottomPanelHeight;\n      currentSize = panelHeight;\n      // don't need the exact max size as it's constrained in the set size function\n      maxSize = window.innerHeight;\n    }\n\n    const primaryGrowKey = position === 'bottom' ? KeyCode.up : KeyCode.left;\n    const primaryShrinkKey = position === 'bottom' ? KeyCode.down : KeyCode.right;\n    const altGrowKey = position === 'bottom' ? KeyCode.right : KeyCode.down;\n    const altShrinkKey = position === 'bottom' ? KeyCode.left : KeyCode.up;\n\n    let isEventHandled = true;\n    switch (event.keyCode) {\n      case primaryGrowKey:\n      case altGrowKey:\n        setSizeFunction(currentSize + KEYBOARD_SINGLE_STEP_SIZE);\n\n        break;\n      case primaryShrinkKey:\n      case altShrinkKey:\n        setSizeFunction(currentSize - KEYBOARD_SINGLE_STEP_SIZE);\n        break;\n      case KeyCode.pageUp:\n        setSizeFunction(currentSize + KEYBOARD_MULTIPLE_STEPS_SIZE);\n        break;\n      case KeyCode.pageDown:\n        setSizeFunction(currentSize - KEYBOARD_MULTIPLE_STEPS_SIZE);\n        break;\n      case KeyCode.home:\n        setSizeFunction(maxSize);\n        break;\n      case KeyCode.end:\n        setSizeFunction(0);\n        break;\n      default:\n        isEventHandled = false;\n    }\n\n    if (isEventHandled) {\n      event.preventDefault();\n      event.stopPropagation();\n    }\n  };\n};\n"]}

package/app-layout/utils/use-pointer-events.d.ts

@@ -0,0 +1,3 @@
+import { SizeControlProps } from './interfaces';
+export declare const usePointerEvents: ({ position, panelRef, handleRef, setSidePanelWidth, setBottomPanelHeight, hasTransitions, }: SizeControlProps) => () => void;
+//# sourceMappingURL=use-pointer-events.d.ts.map

package/app-layout/utils/use-pointer-events.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-pointer-events.d.ts","sourceRoot":"lib/default/","sources":["app-layout/utils/use-pointer-events.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAEhD,eAAO,MAAM,gBAAgB,gGAO1B,gBAAgB,eAoDlB,CAAC"}

package/{split-panel → app-layout}/utils/use-pointer-events.js

@@ -2,32 +2,39 @@
 // SPDX-License-Identifier: Apache-2.0
 import { useCallback } from 'react';
 import styles from '../styles.css.js';
-export const usePointerEvents = ({ position, splitPanelRef, handleRef, setSidePanelWidth, setBottomPanelHeight, }) => {
+export const usePointerEvents = ({ position, panelRef, handleRef, setSidePanelWidth, setBottomPanelHeight, hasTransitions = false, }) => {
     const onDocumentPointerMove = useCallback((event) => {
-        if (!splitPanelRef || !splitPanelRef.current || !handleRef || !handleRef.current) {
+        if (!panelRef || !panelRef.current || !handleRef || !handleRef.current) {
             return;
         }
+        panelRef.current.classList.remove(styles['with-motion']);
         if (position === 'side') {
-            const mouseClientX = event.clientX;
+            const mouseClientX = event.clientX || 0;
             // The handle offset aligns the cursor with the middle of the resize handle.
             const handleOffset = handleRef.current.getBoundingClientRect().width / 2;
-            const width = splitPanelRef.current.getBoundingClientRect().right - mouseClientX + handleOffset;
+            const width = panelRef.current.getBoundingClientRect().right - mouseClientX + handleOffset;
             setSidePanelWidth(width);
         }
         else {
-            const mouseClientY = event.clientY;
+            const mouseClientY = event.clientY || 0;
             // The handle offset aligns the cursor with the middle of the resize handle.
             const handleOffset = handleRef.current.getBoundingClientRect().height / 2;
-            const height = splitPanelRef.current.getBoundingClientRect().bottom - mouseClientY + handleOffset;
+            const height = panelRef.current.getBoundingClientRect().bottom - mouseClientY + handleOffset;
             setBottomPanelHeight(height);
         }
-    }, [position, splitPanelRef, handleRef, setSidePanelWidth, setBottomPanelHeight]);
+    }, [position, panelRef, handleRef, setSidePanelWidth, setBottomPanelHeight]);
     const onDocumentPointerUp = useCallback(() => {
+        if (!panelRef || !panelRef.current) {
+            return;
+        }
+        if (hasTransitions) {
+            panelRef.current.classList.add(styles['with-motion']);
+        }
         document.body.classList.remove(styles['resize-active']);
         document.body.classList.remove(styles[`resize-${position}`]);
         document.removeEventListener('pointerup', onDocumentPointerUp);
         document.removeEventListener('pointermove', onDocumentPointerMove);
-    }, [onDocumentPointerMove, position]);
+    }, [panelRef, onDocumentPointerMove, position, hasTransitions]);
     const onSliderPointerDown = useCallback(() => {
         document.body.classList.add(styles['resize-active']);
         document.body.classList.add(styles[`resize-${position}`]);

package/app-layout/utils/use-pointer-events.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-pointer-events.js","sourceRoot":"lib/default/","sources":["app-layout/utils/use-pointer-events.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { useCallback } from 'react';\nimport styles from '../styles.css.js';\nimport { SizeControlProps } from './interfaces';\n\nexport const usePointerEvents = ({\n  position,\n  panelRef,\n  handleRef,\n  setSidePanelWidth,\n  setBottomPanelHeight,\n  hasTransitions = false,\n}: SizeControlProps) => {\n  const onDocumentPointerMove = useCallback(\n    (event: PointerEvent) => {\n      if (!panelRef || !panelRef.current || !handleRef || !handleRef.current) {\n        return;\n      }\n\n      panelRef.current.classList.remove(styles['with-motion']);\n\n      if (position === 'side') {\n        const mouseClientX = event.clientX || 0;\n\n        // The handle offset aligns the cursor with the middle of the resize handle.\n        const handleOffset = handleRef.current.getBoundingClientRect().width / 2;\n        const width = panelRef.current.getBoundingClientRect().right - mouseClientX + handleOffset;\n\n        setSidePanelWidth(width);\n      } else {\n        const mouseClientY = event.clientY || 0;\n\n        // The handle offset aligns the cursor with the middle of the resize handle.\n        const handleOffset = handleRef.current.getBoundingClientRect().height / 2;\n        const height = panelRef.current.getBoundingClientRect().bottom - mouseClientY + handleOffset;\n\n        setBottomPanelHeight(height);\n      }\n    },\n    [position, panelRef, handleRef, setSidePanelWidth, setBottomPanelHeight]\n  );\n\n  const onDocumentPointerUp = useCallback(() => {\n    if (!panelRef || !panelRef.current) {\n      return;\n    }\n\n    if (hasTransitions) {\n      panelRef.current.classList.add(styles['with-motion']);\n    }\n    document.body.classList.remove(styles['resize-active']);\n    document.body.classList.remove(styles[`resize-${position}`]);\n    document.removeEventListener('pointerup', onDocumentPointerUp);\n    document.removeEventListener('pointermove', onDocumentPointerMove);\n  }, [panelRef, onDocumentPointerMove, position, hasTransitions]);\n\n  const onSliderPointerDown = useCallback(() => {\n    document.body.classList.add(styles['resize-active']);\n    document.body.classList.add(styles[`resize-${position}`]);\n    document.addEventListener('pointerup', onDocumentPointerUp);\n    document.addEventListener('pointermove', onDocumentPointerMove);\n  }, [onDocumentPointerMove, onDocumentPointerUp, position]);\n\n  return onSliderPointerDown;\n};\n"]}

package/app-layout/utils/use-resize.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import { InternalDrawerProps } from '../drawer/interfaces';
+import { DrawerFocusControlRefs } from './use-drawer-focus-control';
+export interface DrawerResizeProps {
+    activeDrawerId?: string | null;
+    drawers: InternalDrawerProps['drawers'];
+    drawersRefs: DrawerFocusControlRefs;
+    isToolsOpen: boolean;
+    drawersMaxWidth: number;
+}
+declare function useResize(drawerRefObject: React.RefObject<HTMLDivElement>, drawerResizeProps: DrawerResizeProps): {
+    resizeHandle: JSX.Element;
+    drawerSize: number;
+};
+export default useResize;
+//# sourceMappingURL=use-resize.d.ts.map

package/app-layout/utils/use-resize.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-resize.d.ts","sourceRoot":"lib/default/","sources":["app-layout/utils/use-resize.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAoD,MAAM,OAAO,CAAC;AASzE,OAAO,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAC;AAK3D,OAAO,EAAE,sBAAsB,EAAE,MAAM,4BAA4B,CAAC;AAGpE,MAAM,WAAW,iBAAiB;IAChC,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,OAAO,EAAE,mBAAmB,CAAC,SAAS,CAAC,CAAC;IACxC,WAAW,EAAE,sBAAsB,CAAC;IACpC,WAAW,EAAE,OAAO,CAAC;IACrB,eAAe,EAAE,MAAM,CAAC;CACzB;AAED,iBAAS,SAAS,CAAC,eAAe,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,EAAE,iBAAiB,EAAE,iBAAiB;;;EAgGxG;AAED,eAAe,SAAS,CAAC"}

package/app-layout/utils/use-resize.js

@@ -0,0 +1,84 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React, { useState, useEffect, useMemo, useCallback } from 'react';
+import { fireNonCancelableEvent } from '../../internal/events';
+import clsx from 'clsx';
+import ResizeHandler from '../../split-panel/icons/resize-handler';
+import { getLimitedValue } from '../../split-panel/utils/size-utils';
+import { usePointerEvents } from './use-pointer-events';
+import { useKeyboardEvents } from './use-keyboard-events';
+import splitPanelStyles from '../../split-panel/styles.css.js';
+import testutilStyles from '../test-classes/styles.css.js';
+import styles from '../visual-refresh/styles.css.js';
+function useResize(drawerRefObject, drawerResizeProps) {
+    var _a, _b;
+    const { activeDrawerId, drawers, drawersRefs, isToolsOpen, drawersMaxWidth } = drawerResizeProps;
+    const activeDrawer = (_a = drawers === null || drawers === void 0 ? void 0 : drawers.items.find(item => item.id === activeDrawerId)) !== null && _a !== void 0 ? _a : null;
+    const drawerItems = useMemo(() => (drawers === null || drawers === void 0 ? void 0 : drawers.items) || [], [drawers === null || drawers === void 0 ? void 0 : drawers.items]);
+    const toolsWidth = 290;
+    const MIN_WIDTH = (activeDrawer === null || activeDrawer === void 0 ? void 0 : activeDrawer.defaultSize) && activeDrawer.defaultSize < 290 ? activeDrawer === null || activeDrawer === void 0 ? void 0 : activeDrawer.defaultSize : 290;
+    const [relativeSize, setRelativeSize] = useState(0);
+    const getDrawerItemSizes = useCallback(() => {
+        const sizes = {};
+        if (!drawerItems) {
+            return {};
+        }
+        for (const item of drawerItems) {
+            if (item.defaultSize) {
+                sizes[item.id] = item.defaultSize;
+            }
+        }
+        return sizes;
+    }, [drawerItems]);
+    const [drawerItemSizes, setDrawerItemSizes] = useState(() => getDrawerItemSizes());
+    const drawerSize = !activeDrawerId && !isToolsOpen
+        ? 0
+        : activeDrawerId && drawerItemSizes[activeDrawerId]
+            ? drawerItemSizes[activeDrawerId]
+            : toolsWidth;
+    useEffect(() => {
+        // Ensure we only set new drawer items by performing a shallow merge
+        // of the latest drawer item sizes, and previous drawer item sizes.
+        setDrawerItemSizes(prev => (Object.assign(Object.assign({}, getDrawerItemSizes()), prev)));
+    }, [getDrawerItemSizes]);
+    useEffect(() => {
+        // effects are called inside out in the components tree
+        // wait one frame to allow app-layout to complete its calculations
+        const handle = requestAnimationFrame(() => {
+            const maxSize = drawersMaxWidth;
+            setRelativeSize(((drawerSize - MIN_WIDTH) / (maxSize - MIN_WIDTH)) * 100);
+        });
+        return () => cancelAnimationFrame(handle);
+    }, [drawerSize, drawersMaxWidth, MIN_WIDTH]);
+    const drawerResize = (resizeDetail) => {
+        const drawerItem = drawers === null || drawers === void 0 ? void 0 : drawers.items.find(item => item.id === resizeDetail.id);
+        fireNonCancelableEvent(drawerItem === null || drawerItem === void 0 ? void 0 : drawerItem.onResize, resizeDetail);
+        fireNonCancelableEvent(drawers === null || drawers === void 0 ? void 0 : drawers.onResize, resizeDetail);
+        setDrawerItemSizes(Object.assign(Object.assign({}, drawerItemSizes), { [resizeDetail.id]: resizeDetail.size }));
+    };
+    const setSidePanelWidth = (width) => {
+        const maxWidth = drawersMaxWidth;
+        const size = getLimitedValue(MIN_WIDTH, width, maxWidth);
+        const id = activeDrawer === null || activeDrawer === void 0 ? void 0 : activeDrawer.id;
+        if (id && maxWidth >= MIN_WIDTH) {
+            drawerResize({ size, id });
+        }
+    };
+    const position = 'side';
+    const setBottomPanelHeight = () => { };
+    const sizeControlProps = {
+        position,
+        panelRef: drawerRefObject,
+        handleRef: drawersRefs.slider,
+        setSidePanelWidth,
+        setBottomPanelHeight,
+        hasTransitions: true,
+    };
+    const onSliderPointerDown = usePointerEvents(sizeControlProps);
+    const onKeyDown = useKeyboardEvents(sizeControlProps);
+    const resizeHandle = (React.createElement("div", { ref: drawersRefs.slider, role: "slider", tabIndex: 0, "aria-label": (_b = activeDrawer === null || activeDrawer === void 0 ? void 0 : activeDrawer.ariaLabels) === null || _b === void 0 ? void 0 : _b.resizeHandle, "aria-valuemax": 100, "aria-valuemin": 0, "aria-valuenow": relativeSize, className: clsx(splitPanelStyles.slider, splitPanelStyles[`slider-side`], testutilStyles['drawers-slider']), onKeyDown: onKeyDown, onPointerDown: onSliderPointerDown },
+        React.createElement(ResizeHandler, { className: clsx(splitPanelStyles['slider-icon'], splitPanelStyles[`slider-icon-side`]) })));
+    return { resizeHandle: React.createElement("div", { className: styles['drawer-slider'] }, resizeHandle), drawerSize };
+}
+export default useResize;
+//# sourceMappingURL=use-resize.js.map

package/app-layout/utils/use-resize.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-resize.js","sourceRoot":"lib/default/","sources":["app-layout/utils/use-resize.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, { useState, useEffect, useMemo, useCallback } from 'react';\n\nimport { fireNonCancelableEvent } from '../../internal/events';\nimport clsx from 'clsx';\n\nimport ResizeHandler from '../../split-panel/icons/resize-handler';\nimport { getLimitedValue } from '../../split-panel/utils/size-utils';\nimport { usePointerEvents } from './use-pointer-events';\nimport { useKeyboardEvents } from './use-keyboard-events';\nimport { InternalDrawerProps } from '../drawer/interfaces';\n\nimport splitPanelStyles from '../../split-panel/styles.css.js';\nimport testutilStyles from '../test-classes/styles.css.js';\nimport styles from '../visual-refresh/styles.css.js';\nimport { DrawerFocusControlRefs } from './use-drawer-focus-control';\nimport { SizeControlProps } from './interfaces';\n\nexport interface DrawerResizeProps {\n  activeDrawerId?: string | null;\n  drawers: InternalDrawerProps['drawers'];\n  drawersRefs: DrawerFocusControlRefs;\n  isToolsOpen: boolean;\n  drawersMaxWidth: number;\n}\n\nfunction useResize(drawerRefObject: React.RefObject<HTMLDivElement>, drawerResizeProps: DrawerResizeProps) {\n  const { activeDrawerId, drawers, drawersRefs, isToolsOpen, drawersMaxWidth } = drawerResizeProps;\n\n  const activeDrawer = drawers?.items.find(item => item.id === activeDrawerId) ?? null;\n  const drawerItems = useMemo(() => drawers?.items || [], [drawers?.items]);\n  const toolsWidth = 290;\n  const MIN_WIDTH = activeDrawer?.defaultSize && activeDrawer.defaultSize < 290 ? activeDrawer?.defaultSize : 290;\n  const [relativeSize, setRelativeSize] = useState(0);\n  const getDrawerItemSizes = useCallback(() => {\n    const sizes: { [id: string]: number } = {};\n    if (!drawerItems) {\n      return {};\n    }\n\n    for (const item of drawerItems) {\n      if (item.defaultSize) {\n        sizes[item.id] = item.defaultSize;\n      }\n    }\n    return sizes;\n  }, [drawerItems]);\n  const [drawerItemSizes, setDrawerItemSizes] = useState(() => getDrawerItemSizes());\n\n  const drawerSize =\n    !activeDrawerId && !isToolsOpen\n      ? 0\n      : activeDrawerId && drawerItemSizes[activeDrawerId]\n      ? drawerItemSizes[activeDrawerId]\n      : toolsWidth;\n\n  useEffect(() => {\n    // Ensure we only set new drawer items by performing a shallow merge\n    // of the latest drawer item sizes, and previous drawer item sizes.\n    setDrawerItemSizes(prev => ({ ...getDrawerItemSizes(), ...prev }));\n  }, [getDrawerItemSizes]);\n\n  useEffect(() => {\n    // effects are called inside out in the components tree\n    // wait one frame to allow app-layout to complete its calculations\n    const handle = requestAnimationFrame(() => {\n      const maxSize = drawersMaxWidth;\n      setRelativeSize(((drawerSize - MIN_WIDTH) / (maxSize - MIN_WIDTH)) * 100);\n    });\n    return () => cancelAnimationFrame(handle);\n  }, [drawerSize, drawersMaxWidth, MIN_WIDTH]);\n\n  const drawerResize = (resizeDetail: { size: number; id: string }) => {\n    const drawerItem = drawers?.items.find(item => item.id === resizeDetail.id);\n    fireNonCancelableEvent(drawerItem?.onResize, resizeDetail);\n    fireNonCancelableEvent(drawers?.onResize, resizeDetail);\n    setDrawerItemSizes({ ...drawerItemSizes, [resizeDetail.id]: resizeDetail.size });\n  };\n\n  const setSidePanelWidth = (width: number) => {\n    const maxWidth = drawersMaxWidth;\n    const size = getLimitedValue(MIN_WIDTH, width, maxWidth);\n    const id = activeDrawer?.id;\n\n    if (id && maxWidth >= MIN_WIDTH) {\n      drawerResize({ size, id });\n    }\n  };\n\n  const position = 'side';\n  const setBottomPanelHeight = () => {};\n\n  const sizeControlProps: SizeControlProps = {\n    position,\n    panelRef: drawerRefObject,\n    handleRef: drawersRefs.slider,\n    setSidePanelWidth,\n    setBottomPanelHeight,\n    hasTransitions: true,\n  };\n\n  const onSliderPointerDown = usePointerEvents(sizeControlProps);\n  const onKeyDown = useKeyboardEvents(sizeControlProps);\n\n  const resizeHandle = (\n    <div\n      ref={drawersRefs.slider}\n      role=\"slider\"\n      tabIndex={0}\n      aria-label={activeDrawer?.ariaLabels?.resizeHandle}\n      aria-valuemax={100}\n      aria-valuemin={0}\n      aria-valuenow={relativeSize}\n      className={clsx(splitPanelStyles.slider, splitPanelStyles[`slider-side`], testutilStyles['drawers-slider'])}\n      onKeyDown={onKeyDown}\n      onPointerDown={onSliderPointerDown}\n    >\n      <ResizeHandler className={clsx(splitPanelStyles['slider-icon'], splitPanelStyles[`slider-icon-side`])} />\n    </div>\n  );\n\n  return { resizeHandle: <div className={styles['drawer-slider']}>{resizeHandle}</div>, drawerSize };\n}\n\nexport default useResize;\n"]}

package/app-layout/visual-refresh/context.d.ts

@@ -1,14 +1,18 @@
 import React from 'react';
 import { AppLayoutProps } from '../interfaces';
-import { DrawersProps } from './drawers';
 import { FocusControlRefs } from '../utils/use-focus-control';
+import { DrawerFocusControlRefs } from '../utils/use-drawer-focus-control';
 import { SplitPanelFocusControlRefs } from '../utils/use-split-panel-focus-control';
 import { SplitPanelSideToggleProps } from '../../internal/context/split-panel-context';
+import { InternalDrawerProps } from '../drawer/interfaces';
 interface AppLayoutInternals extends AppLayoutProps {
-    activeDrawerId: string | null;
-    activeDrawerWidth: number;
-    drawers: DrawersProps;
-    drawersRefs: FocusControlRefs;
+    activeDrawerId?: string | null;
+    drawers?: InternalDrawerProps['drawers'];
+    drawersRefs: DrawerFocusControlRefs;
+    drawerSize: number;
+    drawersMaxWidth: number;
+    drawerRef: React.Ref<HTMLElement>;
+    resizeHandle: React.ReactElement;
     drawersTriggerCount: number;
     dynamicOverlapHeight: number;
     handleDrawersClick: (activeDrawerId: string | null, skipFocusControl?: boolean) => void;
@@ -22,7 +26,7 @@ interface AppLayoutInternals extends AppLayoutProps {
     hasDefaultToolsWidth: boolean;
     hasDrawerViewportOverlay: boolean;
     hasNotificationsContent: boolean;
-    hasOpenDrawer: boolean;
+    hasOpenDrawer?: boolean;
     hasStickyBackground: boolean;
     isMobile: boolean;
     isNavigationOpen: boolean;
@@ -32,6 +36,7 @@ interface AppLayoutInternals extends AppLayoutProps {
     layoutElement: React.Ref<HTMLElement>;
     layoutWidth: number;
     loseToolsFocus: () => void;
+    loseDrawersFocus: () => void;
     mainElement: React.Ref<HTMLDivElement>;
     mainOffsetLeft: number;
     navigationRefs: FocusControlRefs;

package/app-layout/visual-refresh/context.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"context.d.ts","sourceRoot":"lib/default/","sources":["app-layout/visual-refresh/context.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"context.d.ts","sourceRoot":"lib/default/","sources":["app-layout/visual-refresh/context.tsx"],"names":[],"mappings":"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"}

package/app-layout/visual-refresh/context.js

@@ -7,6 +7,7 @@ import { AppLayoutContext } from '../../internal/context/app-layout-context';
 import { DynamicOverlapContext } from '../../internal/context/dynamic-overlap-context';
 import { fireNonCancelableEvent } from '../../internal/events';
 import { useFocusControl } from '../utils/use-focus-control';
+import { useDrawerFocusControl } from '../utils/use-drawer-focus-control';
 import { getSplitPanelDefaultSize } from '../../split-panel/utils/size-utils';
 import { isDevelopment } from '../../internal/is-development';
 import { getSplitPanelPosition } from './split-panel';
@@ -16,6 +17,7 @@ import { useSplitPanelFocusControl } from '../utils/use-split-panel-focus-contro
 import { useObservedElement } from '../utils/use-observed-element';
 import { useMobile } from '../../internal/hooks/use-mobile';
 import { warnOnce } from '@cloudscape-design/component-toolkit/internal';
+import useResize from '../utils/use-resize';
 import styles from './styles.css.js';
 /**
  * The default values are destructured in the context instantiation to
@@ -251,18 +253,30 @@ export const AppLayoutInternalsProvider = React.forwardRef((_a, forwardRef) => {
         controlledProp: 'drawers.activeDrawerId',
         changeHandler: 'onChange',
     });
-    const activeDrawerWidth = 290;
-    const { refs: drawersRefs, setFocus: focusDrawersButtons } = useFocusControl(activeDrawerId);
+    const [drawersMaxWidth, setDrawersMaxWidth] = useState(toolsWidth);
+    const activeDrawer = drawers === null || drawers === void 0 ? void 0 : drawers.items.find(drawer => drawer.id === activeDrawerId);
+    const { refs: drawersRefs, setFocus: focusDrawersButtons, loseFocus: loseDrawersFocus, setLastInteraction: setDrawerLastInteraction, } = useDrawerFocusControl([activeDrawerId, activeDrawer === null || activeDrawer === void 0 ? void 0 : activeDrawer.resizable], activeDrawerId !== undefined, true);
+    const drawerRef = useRef(null);
+    const { resizeHandle, drawerSize } = useResize(drawerRef, {
+        activeDrawerId,
+        drawers,
+        drawersRefs,
+        isToolsOpen,
+        drawersMaxWidth,
+    });
     const handleDrawersClick = useCallback(function handleDrawersChange(id, skipFocusControl) {
         const newActiveDrawerId = id !== activeDrawerId ? id : null;
         setActiveDrawerId(newActiveDrawerId);
         !skipFocusControl && focusDrawersButtons();
         fireNonCancelableEvent(drawers === null || drawers === void 0 ? void 0 : drawers.onChange, newActiveDrawerId);
-    }, [activeDrawerId, drawers === null || drawers === void 0 ? void 0 : drawers.onChange, focusDrawersButtons, setActiveDrawerId]);
+        setDrawerLastInteraction({ type: activeDrawerId ? 'close' : 'open' });
+    }, [activeDrawerId, drawers === null || drawers === void 0 ? void 0 : drawers.onChange, focusDrawersButtons, setActiveDrawerId, setDrawerLastInteraction]);
     const drawersTriggerCount = ((_e = drawers === null || drawers === void 0 ? void 0 : drawers.items.length) !== null && _e !== void 0 ? _e : 0) +
         (splitPanelDisplayed && splitPanelPosition === 'side' ? 1 : 0) +
         (!toolsHide ? 1 : 0);
-    const hasOpenDrawer = activeDrawerId || isToolsOpen || (splitPanelDisplayed && splitPanelPosition === 'side' && isSplitPanelOpen);
+    const hasOpenDrawer = activeDrawerId !== null ||
+        isToolsOpen ||
+        (splitPanelDisplayed && splitPanelPosition === 'side' && isSplitPanelOpen);
     const hasDrawerViewportOverlay = isMobile && (!!activeDrawerId || (!navigationHide && isNavigationOpen) || (!toolsHide && isToolsOpen));
     /**
      * The Layout element is not necessarily synonymous with the client
@@ -347,7 +361,7 @@ export const AppLayoutInternalsProvider = React.forwardRef((_a, forwardRef) => {
         const contentGapRight = 80; // Approximately 40px when rendered but doubled for safety
         const toolsFormOffsetWidth = 160; // Approximately 80px when rendered but doubled for safety
         const toolsOffsetWidth = isToolsOpen ? toolsWidth : 0;
-        const activeDrawerOffsetWidth = activeDrawerId ? activeDrawerWidth : 0;
+        const activeDrawerOffsetWidth = activeDrawerId ? drawerSize : 0;
         setSplitPanelMaxWidth(layoutWidth -
             mainOffsetLeft -
             minContentWidth -
@@ -355,9 +369,10 @@ export const AppLayoutInternalsProvider = React.forwardRef((_a, forwardRef) => {
             toolsOffsetWidth -
             toolsFormOffsetWidth -
             activeDrawerOffsetWidth);
+        setDrawersMaxWidth(layoutWidth - mainOffsetLeft - minContentWidth - contentGapRight - toolsFormOffsetWidth);
     }, [
         activeDrawerId,
-        activeDrawerWidth,
+        drawerSize,
         isNavigationOpen,
         isToolsOpen,
         layoutWidth,
@@ -366,10 +381,13 @@ export const AppLayoutInternalsProvider = React.forwardRef((_a, forwardRef) => {
         toolsWidth,
     ]);
     return (React.createElement(AppLayoutInternalsContext.Provider, { value: Object.assign(Object.assign({}, props), { activeDrawerId,
-            activeDrawerWidth,
             contentType,
             drawers,
             drawersRefs,
+            drawersMaxWidth,
+            drawerSize,
+            drawerRef,
+            resizeHandle,
             drawersTriggerCount,
             dynamicOverlapHeight,
             headerHeight,
@@ -391,6 +409,7 @@ export const AppLayoutInternalsProvider = React.forwardRef((_a, forwardRef) => {
             layoutElement,
             layoutWidth,
             loseToolsFocus,
+            loseDrawersFocus,
             mainElement,
             mainOffsetLeft,
             maxContentWidth,