@cloudscape-design/components 3.0.1075 → 3.0.1076

package/app-layout/utils/use-ai-drawer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-ai-drawer.js","sourceRoot":"","sources":["../../../../src/app-layout/utils/use-ai-drawer.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 { useEffect, useRef, useState } from 'react';\n\nimport { useStableCallback } from '@cloudscape-design/component-toolkit/internal';\n\nimport { fireNonCancelableEvent } from '../../internal/events';\nimport { metrics } from '../../internal/metrics';\nimport { AppLayoutMessage, DrawerPayload as RuntimeAiDrawerConfig } from '../../internal/plugins/widget/interfaces';\nimport { getAppLayoutInitialState, registerAppLayoutHandler } from '../../internal/plugins/widget/internal';\nimport { assertNever } from '../../internal/types';\nimport { mapRuntimeConfigToAiDrawer } from '../runtime-drawer';\n\nexport interface OnChangeParams {\n  initiatedByUserAction: boolean;\n}\n\nconst DEFAULT_ON_CHANGE_PARAMS = { initiatedByUserAction: true };\n\nfunction useRuntimeAiDrawer(\n  isEnabled: boolean,\n  activeAiDrawerId: string | null,\n  onActiveAiDrawerChange: (newDrawerId: string | null, { initiatedByUserAction }: OnChangeParams) => void,\n  onActiveAiDrawerResize: (size: number) => void\n) {\n  const [aiDrawer, setAiDrawer] = useState<RuntimeAiDrawerConfig | null>(null);\n  const appLayoutMessageHandler = useStableCallback((event: AppLayoutMessage) => {\n    if (event.type === 'registerLeftDrawer') {\n      setAiDrawer(event.payload);\n      if (!aiDrawerWasOpenRef.current && event.payload.defaultActive) {\n        onAiDrawersChangeStable(event.payload.id, { initiatedByUserAction: false });\n      }\n      return;\n    }\n    if (aiDrawer && aiDrawer.id !== event.payload.id) {\n      metrics.sendOpsMetricObject('awsui-widget-drawer-incorrect-id', { oldId: aiDrawer?.id, newId: event.payload.id });\n      return;\n    }\n    switch (event.type) {\n      case 'updateDrawerConfig':\n        setAiDrawer(current => (current ? { ...current, ...event.payload } : current));\n        break;\n      case 'openDrawer':\n        onActiveAiDrawerChangeStable(event.payload.id, { initiatedByUserAction: false });\n        break;\n      case 'closeDrawer':\n        onActiveAiDrawerChangeStable(null, { initiatedByUserAction: false });\n        break;\n      case 'resizeDrawer':\n        onActiveAiDrawerResizeStable(event.payload.size);\n        break;\n      /* istanbul ignore next: this code is not intended to be visited */\n      default:\n        assertNever(event);\n    }\n  });\n  const onAiDrawersChangeStable = useStableCallback(onActiveAiDrawerChange);\n  const onActiveAiDrawerResizeStable = useStableCallback(onActiveAiDrawerResize);\n  const onActiveAiDrawerChangeStable = useStableCallback(onActiveAiDrawerChange);\n  const aiDrawerWasOpenRef = useRef(false);\n  aiDrawerWasOpenRef.current = aiDrawerWasOpenRef.current || !!activeAiDrawerId;\n\n  useEffect(() => {\n    if (!isEnabled) {\n      return;\n    }\n\n    const initialDrawerMessage = getAppLayoutInitialState()?.find(message => message.type === 'registerLeftDrawer');\n    if (initialDrawerMessage && initialDrawerMessage.type === 'registerLeftDrawer') {\n      setAiDrawer(initialDrawerMessage.payload);\n      if (!aiDrawerWasOpenRef.current && initialDrawerMessage.payload.defaultActive) {\n        onAiDrawersChangeStable(initialDrawerMessage.payload.id, { initiatedByUserAction: false });\n      }\n    }\n\n    const unsubscribe = registerAppLayoutHandler(appLayoutMessageHandler);\n    return () => {\n      unsubscribe();\n      setAiDrawer(null);\n    };\n  }, [isEnabled, appLayoutMessageHandler, onAiDrawersChangeStable, onActiveAiDrawerResizeStable]);\n\n  return aiDrawer && mapRuntimeConfigToAiDrawer(aiDrawer);\n}\n\nexport const MIN_DRAWER_SIZE = 290;\n\ninterface UseDrawersProps {\n  isEnabled: boolean;\n  onAiDrawerFocus: () => void;\n  expandedDrawerId: string | null;\n  setExpandedDrawerId: (value: string | null) => void;\n}\n\nexport function useAiDrawer({ isEnabled, onAiDrawerFocus, expandedDrawerId, setExpandedDrawerId }: UseDrawersProps) {\n  const [activeAiDrawerId, setActiveAiDrawerId] = useState<string | null>(null);\n  const [size, setSize] = useState<number | null>(null);\n\n  function onActiveAiDrawerResize(size: number) {\n    setSize(size);\n    fireNonCancelableEvent(activeAiDrawer?.onResize, { id: activeAiDrawerId, size });\n  }\n\n  function onActiveAiDrawerChange(\n    newDrawerId: string | null,\n    { initiatedByUserAction }: OnChangeParams = DEFAULT_ON_CHANGE_PARAMS\n  ) {\n    setActiveAiDrawerId(newDrawerId);\n\n    if (newDrawerId) {\n      fireNonCancelableEvent(aiDrawer?.onToggle, { isOpen: true, initiatedByUserAction });\n    }\n\n    if (activeAiDrawerId) {\n      fireNonCancelableEvent(aiDrawer?.onToggle, { isOpen: false, initiatedByUserAction });\n\n      if (activeAiDrawerId === expandedDrawerId) {\n        setExpandedDrawerId?.(null);\n      }\n    }\n\n    onAiDrawerFocus?.();\n  }\n\n  const aiDrawer = useRuntimeAiDrawer(isEnabled, activeAiDrawerId, onActiveAiDrawerChange, onActiveAiDrawerResize);\n  const activeAiDrawer = activeAiDrawerId && activeAiDrawerId === aiDrawer?.id ? aiDrawer : null;\n  const activeAiDrawerSize = activeAiDrawerId ? (size ?? activeAiDrawer?.defaultSize ?? MIN_DRAWER_SIZE) : 0;\n  const minAiDrawerSize = Math.min(activeAiDrawer?.defaultSize ?? MIN_DRAWER_SIZE, MIN_DRAWER_SIZE);\n\n  return {\n    aiDrawer,\n    onActiveAiDrawerChange,\n    activeAiDrawer,\n    activeAiDrawerId,\n    activeAiDrawerSize,\n    minAiDrawerSize,\n    onActiveAiDrawerResize,\n  };\n}\n"]}

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

@@ -18,7 +18,7 @@ export const useKeyboardEvents = ({ position, onResize, panelRef }) => {
         onDirectionClick: (direction) => {
             let currentSize;
             const { panelHeight, panelWidth } = getCurrentSize(panelRef);
-            if (position === 'side') {
+            if (['side', 'side-start'].includes(position)) {
                 currentSize = panelWidth;
             }
             else {
@@ -29,11 +29,11 @@ export const useKeyboardEvents = ({ position, onResize, panelRef }) => {
             switch (direction) {
                 case 'block-start':
                 case 'inline-start':
-                    singleStepUp();
+                    position === 'side-start' ? singleStepDown() : singleStepUp();
                     break;
                 case 'block-end':
                 case 'inline-end':
-                    singleStepDown();
+                    position === 'side-start' ? singleStepUp() : singleStepDown();
                     break;
             }
         },
@@ -41,7 +41,7 @@ export const useKeyboardEvents = ({ position, onResize, panelRef }) => {
             let currentSize;
             let maxSize;
             const { panelHeight, panelWidth } = getCurrentSize(panelRef);
-            if (position === 'side') {
+            if (['side', 'side-start'].includes(position)) {
                 currentSize = panelWidth;
                 // don't need the exact max size as it's constrained in the set size function
                 maxSize = window.innerWidth;
@@ -58,16 +58,16 @@ export const useKeyboardEvents = ({ position, onResize, panelRef }) => {
             const multipleStepDown = () => onResize(currentSize - KEYBOARD_MULTIPLE_STEPS_SIZE);
             handleKey(event, {
                 onBlockStart: () => {
-                    position === 'bottom' ? singleStepUp() : singleStepDown();
+                    ['bottom', 'side-start'].includes(position) ? singleStepUp() : singleStepDown();
                 },
                 onBlockEnd: () => {
-                    position === 'bottom' ? singleStepDown() : singleStepUp();
+                    ['bottom', 'side-start'].includes(position) ? singleStepDown() : singleStepUp();
                 },
                 onInlineEnd: () => {
-                    position === 'bottom' ? singleStepUp() : singleStepDown();
+                    ['bottom', 'side-start'].includes(position) ? singleStepUp() : singleStepDown();
                 },
                 onInlineStart: () => {
-                    position === 'bottom' ? singleStepDown() : singleStepUp();
+                    ['bottom', 'side-start'].includes(position) ? singleStepDown() : singleStepUp();
                 },
                 onPageDown: () => multipleStepDown(),
                 onPageUp: () => multipleStepUp(),

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

@@ -1 +1 @@
-{"version":3,"file":"use-keyboard-events.js","sourceRoot":"","sources":["../../../../src/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';\n\nimport { Direction } from '../../internal/components/drag-handle-wrapper/interfaces';\nimport handleKey from '../../internal/utils/handle-key';\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 = ({ position, onResize, panelRef }: SizeControlProps) => {\n  return {\n    onDirectionClick: (direction: Direction) => {\n      let currentSize: number;\n\n      const { panelHeight, panelWidth } = getCurrentSize(panelRef);\n\n      if (position === 'side') {\n        currentSize = panelWidth;\n      } else {\n        currentSize = panelHeight;\n      }\n\n      const singleStepUp = () => onResize(currentSize + KEYBOARD_SINGLE_STEP_SIZE);\n      const singleStepDown = () => onResize(currentSize - KEYBOARD_SINGLE_STEP_SIZE);\n\n      switch (direction) {\n        case 'block-start':\n        case 'inline-start':\n          singleStepUp();\n          break;\n        case 'block-end':\n        case 'inline-end':\n          singleStepDown();\n          break;\n      }\n    },\n\n    onKeyDown: (event: React.KeyboardEvent<HTMLElement>) => {\n      let currentSize: number;\n      let maxSize: number;\n\n      const { panelHeight, panelWidth } = getCurrentSize(panelRef);\n\n      if (position === 'side') {\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        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      let isEventHandled = true;\n\n      const singleStepUp = () => onResize(currentSize + KEYBOARD_SINGLE_STEP_SIZE);\n      const singleStepDown = () => onResize(currentSize - KEYBOARD_SINGLE_STEP_SIZE);\n      const multipleStepUp = () => onResize(currentSize + KEYBOARD_MULTIPLE_STEPS_SIZE);\n      const multipleStepDown = () => onResize(currentSize - KEYBOARD_MULTIPLE_STEPS_SIZE);\n\n      handleKey(event, {\n        onBlockStart: () => {\n          position === 'bottom' ? singleStepUp() : singleStepDown();\n        },\n        onBlockEnd: () => {\n          position === 'bottom' ? singleStepDown() : singleStepUp();\n        },\n        onInlineEnd: () => {\n          position === 'bottom' ? singleStepUp() : singleStepDown();\n        },\n        onInlineStart: () => {\n          position === 'bottom' ? singleStepDown() : singleStepUp();\n        },\n        onPageDown: () => multipleStepDown(),\n        onPageUp: () => multipleStepUp(),\n        onHome: () => onResize(maxSize),\n        onEnd: () => onResize(0),\n        onDefault: () => (isEventHandled = false),\n      });\n\n      if (isEventHandled) {\n        event.preventDefault();\n      }\n    },\n  };\n};\n"]}
+{"version":3,"file":"use-keyboard-events.js","sourceRoot":"","sources":["../../../../src/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';\n\nimport { Direction } from '../../internal/components/drag-handle-wrapper/interfaces';\nimport handleKey from '../../internal/utils/handle-key';\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 = ({ position, onResize, panelRef }: SizeControlProps) => {\n  return {\n    onDirectionClick: (direction: Direction) => {\n      let currentSize: number;\n\n      const { panelHeight, panelWidth } = getCurrentSize(panelRef);\n\n      if (['side', 'side-start'].includes(position)) {\n        currentSize = panelWidth;\n      } else {\n        currentSize = panelHeight;\n      }\n\n      const singleStepUp = () => onResize(currentSize + KEYBOARD_SINGLE_STEP_SIZE);\n      const singleStepDown = () => onResize(currentSize - KEYBOARD_SINGLE_STEP_SIZE);\n\n      switch (direction) {\n        case 'block-start':\n        case 'inline-start':\n          position === 'side-start' ? singleStepDown() : singleStepUp();\n          break;\n        case 'block-end':\n        case 'inline-end':\n          position === 'side-start' ? singleStepUp() : singleStepDown();\n          break;\n      }\n    },\n\n    onKeyDown: (event: React.KeyboardEvent<HTMLElement>) => {\n      let currentSize: number;\n      let maxSize: number;\n\n      const { panelHeight, panelWidth } = getCurrentSize(panelRef);\n\n      if (['side', 'side-start'].includes(position)) {\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        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      let isEventHandled = true;\n\n      const singleStepUp = () => onResize(currentSize + KEYBOARD_SINGLE_STEP_SIZE);\n      const singleStepDown = () => onResize(currentSize - KEYBOARD_SINGLE_STEP_SIZE);\n      const multipleStepUp = () => onResize(currentSize + KEYBOARD_MULTIPLE_STEPS_SIZE);\n      const multipleStepDown = () => onResize(currentSize - KEYBOARD_MULTIPLE_STEPS_SIZE);\n\n      handleKey(event, {\n        onBlockStart: () => {\n          ['bottom', 'side-start'].includes(position) ? singleStepUp() : singleStepDown();\n        },\n        onBlockEnd: () => {\n          ['bottom', 'side-start'].includes(position) ? singleStepDown() : singleStepUp();\n        },\n        onInlineEnd: () => {\n          ['bottom', 'side-start'].includes(position) ? singleStepUp() : singleStepDown();\n        },\n        onInlineStart: () => {\n          ['bottom', 'side-start'].includes(position) ? singleStepDown() : singleStepUp();\n        },\n        onPageDown: () => multipleStepDown(),\n        onPageUp: () => multipleStepUp(),\n        onHome: () => onResize(maxSize),\n        onEnd: () => onResize(0),\n        onDefault: () => (isEventHandled = false),\n      });\n\n      if (isEventHandled) {\n        event.preventDefault();\n      }\n    },\n  };\n};\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"use-pointer-events.d.ts","sourceRoot":"","sources":["../../../../src/app-layout/utils/use-pointer-events.ts"],"names":[],"mappings":"AAUA,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAIhD,eAAO,MAAM,gBAAgB,gDAAiD,gBAAgB,eAwD7F,CAAC"}
+{"version":3,"file":"use-pointer-events.d.ts","sourceRoot":"","sources":["../../../../src/app-layout/utils/use-pointer-events.ts"],"names":[],"mappings":"AAUA,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAIhD,eAAO,MAAM,gBAAgB,gDAAiD,gBAAgB,eAkE7F,CAAC"}

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

@@ -15,6 +15,14 @@ export const usePointerEvents = ({ position, panelRef, handleRef, onResize }) =>
             const width = getLogicalBoundingClientRect(panelRef.current).insetInlineEnd - mouseClientX + handleOffset;
             onResize(width);
         }
+        else if (position === 'side-start') {
+            const mouseClientX = getLogicalClientX(event, getIsRtl(panelRef.current)) || 0;
+            // The handle offset aligns the cursor with the middle of the resize handle.
+            const handleOffset = getLogicalBoundingClientRect(handleRef.current).inlineSize / 2;
+            const panelBoundingClientRect = getLogicalBoundingClientRect(panelRef.current);
+            const width = panelBoundingClientRect.insetInlineEnd + mouseClientX + handleOffset - panelBoundingClientRect.inlineSize;
+            onResize(width);
+        }
         else {
             const mouseClientY = event.clientY || 0;
             // The handle offset aligns the cursor with the middle of the resize handle.

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

@@ -1 +1 @@
-{"version":3,"file":"use-pointer-events.js","sourceRoot":"","sources":["../../../../src/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';\n\nimport {\n  getIsRtl,\n  getLogicalBoundingClientRect,\n  getLogicalClientX,\n} from '@cloudscape-design/component-toolkit/internal';\n\nimport { SizeControlProps } from './interfaces';\n\nimport styles from '../resize/styles.css.js';\n\nexport const usePointerEvents = ({ position, panelRef, handleRef, onResize }: SizeControlProps) => {\n  const onDocumentPointerMove = useCallback(\n    (event: PointerEvent) => {\n      if (!panelRef || !panelRef.current || !handleRef || !handleRef.current) {\n        return;\n      }\n\n      if (position === 'side') {\n        const mouseClientX = getLogicalClientX(event, getIsRtl(panelRef.current)) || 0;\n\n        // The handle offset aligns the cursor with the middle of the resize handle.\n        const handleOffset = getLogicalBoundingClientRect(handleRef.current).inlineSize / 2;\n        const width = getLogicalBoundingClientRect(panelRef.current).insetInlineEnd - mouseClientX + handleOffset;\n\n        onResize(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 = getLogicalBoundingClientRect(handleRef.current).blockSize / 2;\n        const height = getLogicalBoundingClientRect(panelRef.current).insetBlockEnd - mouseClientY + handleOffset;\n\n        onResize(height);\n      }\n    },\n    [position, panelRef, handleRef, onResize]\n  );\n\n  const onDocumentPointerUp = useCallback(() => {\n    const panelElement = panelRef?.current;\n    /* istanbul ignore if  */\n    if (!panelElement) {\n      return;\n    }\n    const currentDocument = panelElement.ownerDocument;\n\n    currentDocument.body.classList.remove(styles['resize-active']);\n    currentDocument.body.classList.remove(styles[`resize-${position}`]);\n    currentDocument.removeEventListener('pointerup', onDocumentPointerUp);\n    currentDocument.removeEventListener('pointermove', onDocumentPointerMove);\n  }, [panelRef, onDocumentPointerMove, position]);\n\n  const onSliderPointerDown = useCallback(() => {\n    const panelElement = panelRef?.current;\n    /* istanbul ignore if  */\n    if (!panelElement) {\n      return;\n    }\n    const currentDocument = panelElement.ownerDocument;\n    currentDocument.body.classList.add(styles['resize-active']);\n    currentDocument.body.classList.add(styles[`resize-${position}`]);\n    currentDocument.addEventListener('pointerup', onDocumentPointerUp);\n    currentDocument.addEventListener('pointermove', onDocumentPointerMove);\n  }, [panelRef, onDocumentPointerMove, onDocumentPointerUp, position]);\n\n  return onSliderPointerDown;\n};\n"]}
+{"version":3,"file":"use-pointer-events.js","sourceRoot":"","sources":["../../../../src/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';\n\nimport {\n  getIsRtl,\n  getLogicalBoundingClientRect,\n  getLogicalClientX,\n} from '@cloudscape-design/component-toolkit/internal';\n\nimport { SizeControlProps } from './interfaces';\n\nimport styles from '../resize/styles.css.js';\n\nexport const usePointerEvents = ({ position, panelRef, handleRef, onResize }: SizeControlProps) => {\n  const onDocumentPointerMove = useCallback(\n    (event: PointerEvent) => {\n      if (!panelRef || !panelRef.current || !handleRef || !handleRef.current) {\n        return;\n      }\n\n      if (position === 'side') {\n        const mouseClientX = getLogicalClientX(event, getIsRtl(panelRef.current)) || 0;\n\n        // The handle offset aligns the cursor with the middle of the resize handle.\n        const handleOffset = getLogicalBoundingClientRect(handleRef.current).inlineSize / 2;\n        const width = getLogicalBoundingClientRect(panelRef.current).insetInlineEnd - mouseClientX + handleOffset;\n\n        onResize(width);\n      } else if (position === 'side-start') {\n        const mouseClientX = getLogicalClientX(event, getIsRtl(panelRef.current)) || 0;\n\n        // The handle offset aligns the cursor with the middle of the resize handle.\n        const handleOffset = getLogicalBoundingClientRect(handleRef.current).inlineSize / 2;\n        const panelBoundingClientRect = getLogicalBoundingClientRect(panelRef.current);\n        const width =\n          panelBoundingClientRect.insetInlineEnd + mouseClientX + handleOffset - panelBoundingClientRect.inlineSize;\n\n        onResize(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 = getLogicalBoundingClientRect(handleRef.current).blockSize / 2;\n        const height = getLogicalBoundingClientRect(panelRef.current).insetBlockEnd - mouseClientY + handleOffset;\n\n        onResize(height);\n      }\n    },\n    [position, panelRef, handleRef, onResize]\n  );\n\n  const onDocumentPointerUp = useCallback(() => {\n    const panelElement = panelRef?.current;\n    /* istanbul ignore if  */\n    if (!panelElement) {\n      return;\n    }\n    const currentDocument = panelElement.ownerDocument;\n\n    currentDocument.body.classList.remove(styles['resize-active']);\n    currentDocument.body.classList.remove(styles[`resize-${position}`]);\n    currentDocument.removeEventListener('pointerup', onDocumentPointerUp);\n    currentDocument.removeEventListener('pointermove', onDocumentPointerMove);\n  }, [panelRef, onDocumentPointerMove, position]);\n\n  const onSliderPointerDown = useCallback(() => {\n    const panelElement = panelRef?.current;\n    /* istanbul ignore if  */\n    if (!panelElement) {\n      return;\n    }\n    const currentDocument = panelElement.ownerDocument;\n    currentDocument.body.classList.add(styles['resize-active']);\n    currentDocument.body.classList.add(styles[`resize-${position}`]);\n    currentDocument.addEventListener('pointerup', onDocumentPointerUp);\n    currentDocument.addEventListener('pointermove', onDocumentPointerMove);\n  }, [panelRef, onDocumentPointerMove, onDocumentPointerUp, position]);\n\n  return onSliderPointerDown;\n};\n"]}

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

@@ -10,6 +10,7 @@ interface HorizontalLayoutInput {
   splitPanelSize: number;
   isMobile: boolean;
   activeGlobalDrawersSizes: Record<string, number>;
+  activeAiDrawerSize: number;
 }
 export declare const CONTENT_PADDING: number;
 export declare function computeHorizontalLayout({
@@ -22,7 +23,8 @@ export declare function computeHorizontalLayout({
   splitPanelPosition,
   splitPanelSize,
   isMobile,
-  activeGlobalDrawersSizes
+  activeGlobalDrawersSizes,
+  activeAiDrawerSize
 }: HorizontalLayoutInput): {
   splitPanelPosition: "bottom" | "side";
   splitPanelForcedPosition: boolean;
@@ -32,6 +34,7 @@ export declare function computeHorizontalLayout({
   maxGlobalDrawersSizes: Record<string, number>;
   totalActiveGlobalDrawersSize: number;
   resizableSpaceAvailable: number;
+  maxAiDrawerSize: number;
 };
 interface VerticalLayoutInput {
   topOffset: number;

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

@@ -1 +1 @@
-{"version":3,"file":"compute-layout.d.ts","sourceRoot":"","sources":["../../../../src/app-layout/visual-refresh-toolbar/compute-layout.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,0BAA0B,EAAE,MAAM,eAAe,CAAC;AAG3D,UAAU,qBAAqB;IAC7B,cAAc,EAAE,OAAO,CAAC;IACxB,eAAe,EAAE,MAAM,CAAC;IACxB,SAAS,EAAE,0BAA0B,CAAC,WAAW,CAAC,CAAC;IACnD,eAAe,EAAE,MAAM,CAAC;IACxB,gBAAgB,EAAE,MAAM,CAAC;IACzB,cAAc,EAAE,OAAO,CAAC;IACxB,kBAAkB,EAAE,MAAM,GAAG,QAAQ,GAAG,SAAS,CAAC;IAClD,cAAc,EAAE,MAAM,CAAC;IACvB,QAAQ,EAAE,OAAO,CAAC;IAClB,wBAAwB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CAClD;AAED,eAAO,MAAM,eAAe,QAAS,CAAC;AAEtC,wBAAgB,uBAAuB,CAAC,EACtC,cAAc,EACd,eAAe,EACf,SAAS,EACT,eAAe,EACf,gBAAgB,EAChB,cAAc,EACd,kBAAkB,EAClB,cAAc,EACd,QAAQ,EACR,wBAAwB,GACzB,EAAE,qBAAqB;;;;;;;;;EA2CvB;AAED,UAAU,mBAAmB;IAC3B,SAAS,EAAE,MAAM,CAAC;IAClB,iBAAiB,EAAE,OAAO,CAAC;IAC3B,aAAa,EAAE,MAAM,CAAC;IACtB,mBAAmB,EAAE,OAAO,CAAC;IAC7B,mBAAmB,EAAE,MAAM,CAAC;CAC7B;AAED,MAAM,WAAW,oBAAoB;IACnC,OAAO,EAAE,MAAM,CAAC;IAChB,aAAa,EAAE,MAAM,CAAC;IACtB,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,wBAAgB,qBAAqB,CAAC,EACpC,SAAS,EACT,iBAAiB,EACjB,aAAa,EACb,mBAAmB,EACnB,mBAAmB,GACpB,EAAE,mBAAmB,GAAG,oBAAoB,CAe5C;AAED,UAAU,qBAAqB;IAC7B,aAAa,EAAE,OAAO,CAAC;IACvB,SAAS,EAAE,0BAA0B,CAAC,WAAW,CAAC,CAAC;IACnD,kBAAkB,EAAE,QAAQ,GAAG,MAAM,CAAC;IACtC,cAAc,EAAE,OAAO,CAAC;IACxB,sBAAsB,EAAE,MAAM,CAAC;IAC/B,oBAAoB,EAAE,MAAM,CAAC;CAC9B;AAED,wBAAgB,wBAAwB,CAAC,EACvC,aAAa,EACb,kBAAkB,EAClB,SAAS,EACT,cAAc,EACd,oBAAoB,EACpB,sBAAsB,GACvB,EAAE,qBAAqB;;;;;;EAYvB;AAED,wBAAgB,eAAe,CAC7B,eAAe,EAAE,oBAAoB,EACrC,QAAQ,EAAE,OAAO,EACjB,SAAS,EAAE,0BAA0B,CAAC,WAAW,CAAC,GACjD;IACD,eAAe,EAAE,MAAM,CAAC;IACxB,YAAY,EAAE,MAAM,CAAC;CACtB,CAIA"}
+{"version":3,"file":"compute-layout.d.ts","sourceRoot":"","sources":["../../../../src/app-layout/visual-refresh-toolbar/compute-layout.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,0BAA0B,EAAE,MAAM,eAAe,CAAC;AAG3D,UAAU,qBAAqB;IAC7B,cAAc,EAAE,OAAO,CAAC;IACxB,eAAe,EAAE,MAAM,CAAC;IACxB,SAAS,EAAE,0BAA0B,CAAC,WAAW,CAAC,CAAC;IACnD,eAAe,EAAE,MAAM,CAAC;IACxB,gBAAgB,EAAE,MAAM,CAAC;IACzB,cAAc,EAAE,OAAO,CAAC;IACxB,kBAAkB,EAAE,MAAM,GAAG,QAAQ,GAAG,SAAS,CAAC;IAClD,cAAc,EAAE,MAAM,CAAC;IACvB,QAAQ,EAAE,OAAO,CAAC;IAClB,wBAAwB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACjD,kBAAkB,EAAE,MAAM,CAAC;CAC5B;AAED,eAAO,MAAM,eAAe,QAAS,CAAC;AAGtC,wBAAgB,uBAAuB,CAAC,EACtC,cAAc,EACd,eAAe,EACf,SAAS,EACT,eAAe,EACf,gBAAgB,EAChB,cAAc,EACd,kBAAkB,EAClB,cAAc,EACd,QAAQ,EACR,wBAAwB,EACxB,kBAAkB,GACnB,EAAE,qBAAqB;;;;;;;;;;EA8CvB;AAED,UAAU,mBAAmB;IAC3B,SAAS,EAAE,MAAM,CAAC;IAClB,iBAAiB,EAAE,OAAO,CAAC;IAC3B,aAAa,EAAE,MAAM,CAAC;IACtB,mBAAmB,EAAE,OAAO,CAAC;IAC7B,mBAAmB,EAAE,MAAM,CAAC;CAC7B;AAED,MAAM,WAAW,oBAAoB;IACnC,OAAO,EAAE,MAAM,CAAC;IAChB,aAAa,EAAE,MAAM,CAAC;IACtB,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,wBAAgB,qBAAqB,CAAC,EACpC,SAAS,EACT,iBAAiB,EACjB,aAAa,EACb,mBAAmB,EACnB,mBAAmB,GACpB,EAAE,mBAAmB,GAAG,oBAAoB,CAe5C;AAED,UAAU,qBAAqB;IAC7B,aAAa,EAAE,OAAO,CAAC;IACvB,SAAS,EAAE,0BAA0B,CAAC,WAAW,CAAC,CAAC;IACnD,kBAAkB,EAAE,QAAQ,GAAG,MAAM,CAAC;IACtC,cAAc,EAAE,OAAO,CAAC;IACxB,sBAAsB,EAAE,MAAM,CAAC;IAC/B,oBAAoB,EAAE,MAAM,CAAC;CAC9B;AAED,wBAAgB,wBAAwB,CAAC,EACvC,aAAa,EACb,kBAAkB,EAClB,SAAS,EACT,cAAc,EACd,oBAAoB,EACpB,sBAAsB,GACvB,EAAE,qBAAqB;;;;;;EAYvB;AAED,wBAAgB,eAAe,CAC7B,eAAe,EAAE,oBAAoB,EACrC,QAAQ,EAAE,OAAO,EACjB,SAAS,EAAE,0BAA0B,CAAC,WAAW,CAAC,GACjD;IACD,eAAe,EAAE,MAAM,CAAC;IACxB,YAAY,EAAE,MAAM,CAAC;CACtB,CAIA"}

package/app-layout/visual-refresh-toolbar/compute-layout.js

@@ -2,9 +2,10 @@
 // SPDX-License-Identifier: Apache-2.0
 import { shouldSplitPanelBeForcedToBottom } from '../split-panel/split-panel-forced-position';
 export const CONTENT_PADDING = 2 * 24; // space-xl
-export function computeHorizontalLayout({ navigationOpen, navigationWidth, placement, minContentWidth, activeDrawerSize, splitPanelOpen, splitPanelPosition, splitPanelSize, isMobile, activeGlobalDrawersSizes, }) {
+const MOBILE_BREAKPOINT = 688;
+export function computeHorizontalLayout({ navigationOpen, navigationWidth, placement, minContentWidth, activeDrawerSize, splitPanelOpen, splitPanelPosition, splitPanelSize, isMobile, activeGlobalDrawersSizes, activeAiDrawerSize, }) {
     const activeNavigationWidth = navigationOpen ? navigationWidth : 0;
-    let resizableSpaceAvailable = Math.max(0, placement.inlineSize - minContentWidth - CONTENT_PADDING - activeNavigationWidth);
+    let resizableSpaceAvailable = Math.max(0, placement.inlineSize - minContentWidth - CONTENT_PADDING - activeNavigationWidth - activeAiDrawerSize);
     const totalActiveGlobalDrawersSize = Object.values(activeGlobalDrawersSizes).reduce((acc, size) => acc + size, 0);
     const availableWidthForSplitPanel = resizableSpaceAvailable - activeDrawerSize;
     const splitPanelForcedPosition = shouldSplitPanelBeForcedToBottom({
@@ -16,6 +17,8 @@ export function computeHorizontalLayout({ navigationOpen, navigationWidth, place
     const maxSplitPanelSize = Math.max(resizableSpaceAvailable - totalActiveGlobalDrawersSize - activeDrawerSize, 0);
     resizableSpaceAvailable -= sideSplitPanelSize;
     const maxDrawerSize = resizableSpaceAvailable - totalActiveGlobalDrawersSize;
+    // let the ai drawer be resized until the "main screen" hits the mobile breakpoint to have consistent UX
+    const maxAiDrawerSize = placement.inlineSize - MOBILE_BREAKPOINT;
     const maxGlobalDrawersSizes = Object.keys(activeGlobalDrawersSizes).reduce((acc, drawerId) => {
         return Object.assign(Object.assign({}, acc), { [drawerId]: resizableSpaceAvailable -
                 activeDrawerSize -
@@ -31,6 +34,7 @@ export function computeHorizontalLayout({ navigationOpen, navigationWidth, place
         maxGlobalDrawersSizes,
         totalActiveGlobalDrawersSize,
         resizableSpaceAvailable,
+        maxAiDrawerSize,
     };
 }
 export function computeVerticalLayout({ topOffset, hasVisibleToolbar, toolbarHeight, stickyNotifications, notificationsHeight, }) {

package/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":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { AppLayoutPropsWithDefaults } from '../interfaces';\nimport { shouldSplitPanelBeForcedToBottom } from '../split-panel/split-panel-forced-position';\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 const CONTENT_PADDING = 2 * 24; // space-xl\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 activeNavigationWidth = navigationOpen ? navigationWidth : 0;\n\n  let resizableSpaceAvailable = Math.max(\n    0,\n    placement.inlineSize - minContentWidth - CONTENT_PADDING - activeNavigationWidth\n  );\n  const totalActiveGlobalDrawersSize = Object.values(activeGlobalDrawersSizes).reduce((acc, size) => acc + size, 0);\n\n  const availableWidthForSplitPanel = resizableSpaceAvailable - activeDrawerSize;\n  const splitPanelForcedPosition = shouldSplitPanelBeForcedToBottom({\n    isMobile,\n    availableWidthForSplitPanel,\n  });\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\ninterface SplitPanelOffsetInput {\n  hasSplitPanel: boolean;\n  placement: AppLayoutPropsWithDefaults['placement'];\n  splitPanelPosition: 'bottom' | 'side';\n  splitPanelOpen: boolean;\n  splitPanelHeaderHeight: number;\n  splitPanelFullHeight: number;\n}\n\nexport function computeSplitPanelOffsets({\n  hasSplitPanel,\n  splitPanelPosition,\n  placement,\n  splitPanelOpen,\n  splitPanelFullHeight,\n  splitPanelHeaderHeight,\n}: SplitPanelOffsetInput) {\n  if (!hasSplitPanel || splitPanelPosition !== 'bottom') {\n    return {\n      stickyVerticalBottomOffset: placement.insetBlockEnd,\n      mainContentPaddingBlockEnd: undefined,\n    };\n  }\n  const mainContentBottomOffset = splitPanelOpen ? splitPanelFullHeight : splitPanelHeaderHeight;\n  return {\n    stickyVerticalBottomOffset: mainContentBottomOffset + placement.insetBlockEnd,\n    mainContentPaddingBlockEnd: mainContentBottomOffset,\n  };\n}\n\nexport function getDrawerStyles(\n  verticalOffsets: VerticalLayoutOutput,\n  isMobile: boolean,\n  placement: AppLayoutPropsWithDefaults['placement']\n): {\n  drawerTopOffset: number;\n  drawerHeight: string;\n} {\n  const drawerTopOffset = isMobile ? verticalOffsets.toolbar : (verticalOffsets.drawers ?? placement.insetBlockStart);\n  const drawerHeight = `calc(100vh - ${drawerTopOffset}px - ${placement.insetBlockEnd}px)`;\n  return { drawerTopOffset, drawerHeight };\n}\n"]}
+{"version":3,"file":"compute-layout.js","sourceRoot":"","sources":["../../../../src/app-layout/visual-refresh-toolbar/compute-layout.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\n\nimport { AppLayoutPropsWithDefaults } from '../interfaces';\nimport { shouldSplitPanelBeForcedToBottom } from '../split-panel/split-panel-forced-position';\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  activeAiDrawerSize: number;\n}\n\nexport const CONTENT_PADDING = 2 * 24; // space-xl\nconst MOBILE_BREAKPOINT = 688;\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  activeAiDrawerSize,\n}: HorizontalLayoutInput) {\n  const activeNavigationWidth = navigationOpen ? navigationWidth : 0;\n\n  let resizableSpaceAvailable = Math.max(\n    0,\n    placement.inlineSize - minContentWidth - CONTENT_PADDING - activeNavigationWidth - activeAiDrawerSize\n  );\n  const totalActiveGlobalDrawersSize = Object.values(activeGlobalDrawersSizes).reduce((acc, size) => acc + size, 0);\n\n  const availableWidthForSplitPanel = resizableSpaceAvailable - activeDrawerSize;\n  const splitPanelForcedPosition = shouldSplitPanelBeForcedToBottom({\n    isMobile,\n    availableWidthForSplitPanel,\n  });\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  // let the ai drawer be resized until the \"main screen\" hits the mobile breakpoint to have consistent UX\n  const maxAiDrawerSize = placement.inlineSize - MOBILE_BREAKPOINT;\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    maxAiDrawerSize,\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\ninterface SplitPanelOffsetInput {\n  hasSplitPanel: boolean;\n  placement: AppLayoutPropsWithDefaults['placement'];\n  splitPanelPosition: 'bottom' | 'side';\n  splitPanelOpen: boolean;\n  splitPanelHeaderHeight: number;\n  splitPanelFullHeight: number;\n}\n\nexport function computeSplitPanelOffsets({\n  hasSplitPanel,\n  splitPanelPosition,\n  placement,\n  splitPanelOpen,\n  splitPanelFullHeight,\n  splitPanelHeaderHeight,\n}: SplitPanelOffsetInput) {\n  if (!hasSplitPanel || splitPanelPosition !== 'bottom') {\n    return {\n      stickyVerticalBottomOffset: placement.insetBlockEnd,\n      mainContentPaddingBlockEnd: undefined,\n    };\n  }\n  const mainContentBottomOffset = splitPanelOpen ? splitPanelFullHeight : splitPanelHeaderHeight;\n  return {\n    stickyVerticalBottomOffset: mainContentBottomOffset + placement.insetBlockEnd,\n    mainContentPaddingBlockEnd: mainContentBottomOffset,\n  };\n}\n\nexport function getDrawerStyles(\n  verticalOffsets: VerticalLayoutOutput,\n  isMobile: boolean,\n  placement: AppLayoutPropsWithDefaults['placement']\n): {\n  drawerTopOffset: number;\n  drawerHeight: string;\n} {\n  const drawerTopOffset = isMobile ? verticalOffsets.toolbar : (verticalOffsets.drawers ?? placement.insetBlockStart);\n  const drawerHeight = `calc(100vh - ${drawerTopOffset}px - ${placement.insetBlockEnd}px)`;\n  return { drawerTopOffset, drawerHeight };\n}\n"]}

package/app-layout/visual-refresh-toolbar/drawer/global-ai-drawer.d.ts

@@ -0,0 +1,35 @@
+/// <reference types="react" />
+import { AppLayoutProps } from '../../interfaces';
+import { OnChangeParams } from '../../utils/use-ai-drawer';
+import { FocusControlState } from '../../utils/use-focus-control';
+import { AppLayoutInternals, InternalDrawer } from '../interfaces';
+interface AIDrawerProps {
+  activeAiDrawerSize: number;
+  minAiDrawerSize: number;
+  aiDrawer: AppLayoutProps.Drawer | undefined;
+  maxAiDrawerSize: number;
+  ariaLabels: any;
+  aiDrawerFocusControl: FocusControlState | undefined;
+  isMobile: boolean;
+  drawersOpenQueue: ReadonlyArray<string> | undefined;
+  onActiveAiDrawerChange: undefined | ((newDrawerId: string | null, params?: OnChangeParams) => void);
+  onActiveDrawerResize: (detail: {
+    id: string;
+    size: number;
+  }) => void;
+  expandedDrawerId?: string | null;
+  setExpandedDrawerId: (value: string | null) => void;
+}
+interface AppLayoutGlobalAiDrawerImplementationProps {
+  appLayoutInternals: AppLayoutInternals;
+  show: boolean;
+  activeAiDrawer: InternalDrawer | null;
+  aiDrawerProps: AIDrawerProps;
+}
+export declare function AppLayoutGlobalAiDrawerImplementation({
+  appLayoutInternals,
+  show,
+  activeAiDrawer,
+  aiDrawerProps
+}: AppLayoutGlobalAiDrawerImplementationProps): JSX.Element;
+export {};

package/app-layout/visual-refresh-toolbar/drawer/global-ai-drawer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"global-ai-drawer.d.ts","sourceRoot":"","sources":["../../../../../src/app-layout/visual-refresh-toolbar/drawer/global-ai-drawer.tsx"],"names":[],"mappings":";AAWA,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAC3D,OAAO,EAAE,iBAAiB,EAAE,MAAM,+BAA+B,CAAC;AAClE,OAAO,EAAE,kBAAkB,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAOnE,UAAU,aAAa;IACrB,kBAAkB,EAAE,MAAM,CAAC;IAC3B,eAAe,EAAE,MAAM,CAAC;IACxB,QAAQ,EAAE,cAAc,CAAC,MAAM,GAAG,SAAS,CAAC;IAC5C,eAAe,EAAE,MAAM,CAAC;IACxB,UAAU,EAAE,GAAG,CAAC;IAChB,oBAAoB,EAAE,iBAAiB,GAAG,SAAS,CAAC;IACpD,QAAQ,EAAE,OAAO,CAAC;IAClB,gBAAgB,EAAE,aAAa,CAAC,MAAM,CAAC,GAAG,SAAS,CAAC;IACpD,sBAAsB,EAAE,SAAS,GAAG,CAAC,CAAC,WAAW,EAAE,MAAM,GAAG,IAAI,EAAE,MAAM,CAAC,EAAE,cAAc,KAAK,IAAI,CAAC,CAAC;IACpG,oBAAoB,EAAE,CAAC,MAAM,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IACrE,gBAAgB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACjC,mBAAmB,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;CACrD;AAED,UAAU,0CAA0C;IAClD,kBAAkB,EAAE,kBAAkB,CAAC;IACvC,IAAI,EAAE,OAAO,CAAC;IACd,cAAc,EAAE,cAAc,GAAG,IAAI,CAAC;IACtC,aAAa,EAAE,aAAa,CAAC;CAC9B;AAED,wBAAgB,qCAAqC,CAAC,EACpD,kBAAkB,EAClB,IAAI,EACJ,cAAc,EACd,aAAa,GACd,EAAE,0CAA0C,eAmK5C"}

package/app-layout/visual-refresh-toolbar/drawer/global-ai-drawer.js

@@ -0,0 +1,81 @@
+// 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 { usePrevious } from '../../../internal/hooks/use-previous';
+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';
+export function AppLayoutGlobalAiDrawerImplementation({ appLayoutInternals, show, activeAiDrawer, aiDrawerProps, }) {
+    var _a, _b;
+    const { activeAiDrawerSize, minAiDrawerSize, maxAiDrawerSize, ariaLabels, aiDrawerFocusControl, isMobile, drawersOpenQueue, onActiveAiDrawerChange, onActiveDrawerResize, expandedDrawerId, setExpandedDrawerId, } = aiDrawerProps;
+    const { verticalOffsets, placement } = appLayoutInternals;
+    const drawerRef = useRef(null);
+    const activeDrawerId = activeAiDrawer === null || activeAiDrawer === void 0 ? void 0 : activeAiDrawer.id;
+    const computedAriaLabels = {
+        closeButton: activeAiDrawer ? (_a = activeAiDrawer.ariaLabels) === null || _a === void 0 ? void 0 : _a.closeButton : ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.toolsClose,
+        content: activeAiDrawer ? (_b = activeAiDrawer.ariaLabels) === null || _b === void 0 ? void 0 : _b.drawerName : ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.tools,
+    };
+    const resizeProps = useResize({
+        currentWidth: activeAiDrawerSize,
+        minWidth: minAiDrawerSize,
+        maxWidth: maxAiDrawerSize,
+        panelRef: drawerRef,
+        handleRef: aiDrawerFocusControl.refs.slider,
+        onResize: size => {
+            onActiveDrawerResize({ id: activeDrawerId, size });
+        },
+        position: 'side-start',
+    });
+    const size = getLimitedValue(minAiDrawerSize, activeAiDrawerSize, maxAiDrawerSize);
+    const isExpanded = (activeAiDrawer === null || activeAiDrawer === void 0 ? void 0 : activeAiDrawer.isExpandable) && expandedDrawerId === activeDrawerId;
+    const wasExpanded = usePrevious(isExpanded);
+    const animationDisabled = ((activeAiDrawer === null || activeAiDrawer === void 0 ? void 0 : activeAiDrawer.defaultActive) && !(drawersOpenQueue === null || drawersOpenQueue === void 0 ? void 0 : drawersOpenQueue.includes(activeAiDrawer.id))) || (wasExpanded && !isExpanded);
+    const drawerHeight = `calc(100vh - ${verticalOffsets.toolbar + placement.insetBlockEnd}px)`;
+    // disable resizing when the drawer is at its minimum width in a "squeezed" state
+    // (window is between mobile and desktop sizes). At this point, the drawer can't be
+    // resized in either direction, so we disable the resize handler
+    const isResizingDisabled = maxAiDrawerSize < activeAiDrawerSize;
+    return (React.createElement(Transition, { nodeRef: drawerRef, in: show, appear: show, mountOnEnter: true, timeout: 250 }, drawerTransitionState => {
+        return (React.createElement(Transition, { nodeRef: drawerRef, in: isExpanded, timeout: 250 }, expandedTransitionState => {
+            var _a, _b, _c, _d, _e, _f;
+            return (React.createElement("aside", { id: activeAiDrawer === null || activeAiDrawer === void 0 ? void 0 : activeAiDrawer.id, "aria-hidden": !activeAiDrawer, "aria-label": computedAriaLabels.content, className: clsx(styles.drawer, styles['ai-drawer'], !animationDisabled && isExpanded && styles['with-expanded-motion'], {
+                    [sharedStyles['with-motion-horizontal']]: !animationDisabled,
+                    [testutilStyles['active-drawer']]: show,
+                    [styles['drawer-hidden']]: !show && drawerTransitionState === 'exited',
+                    [testutilStyles['drawer-closed']]: !activeAiDrawer,
+                    [styles['drawer-expanded']]: isExpanded,
+                }), ref: drawerRef, onBlur: e => {
+                    if (!e.relatedTarget || !e.currentTarget.contains(e.relatedTarget)) {
+                        aiDrawerFocusControl === null || aiDrawerFocusControl === void 0 ? void 0 : aiDrawerFocusControl.loseFocus();
+                    }
+                }, style: Object.assign({ blockSize: drawerHeight, insetBlockStart: `${placement.insetBlockStart}px` }, (!isMobile && {
+                    [customCssProps.drawerSize]: `${['entering', 'entered'].includes(drawerTransitionState) ? size : 0}px`,
+                })), "data-testid": activeDrawerId && `awsui-app-layout-drawer-${activeDrawerId}` },
+                !isMobile && (activeAiDrawer === null || activeAiDrawer === void 0 ? void 0 : activeAiDrawer.resizable) && (!isExpanded || expandedTransitionState !== 'entered') && (React.createElement("div", { className: styles['drawer-slider'] },
+                    React.createElement(PanelResizeHandle, { ref: aiDrawerFocusControl === null || aiDrawerFocusControl === void 0 ? void 0 : aiDrawerFocusControl.refs.slider, position: "side-start", className: clsx(testutilStyles['drawers-slider'], styles['ai-drawer-slider-handle']), ariaLabel: (_a = activeAiDrawer === null || activeAiDrawer === void 0 ? void 0 : activeAiDrawer.ariaLabels) === null || _a === void 0 ? void 0 : _a.resizeHandle, tooltipText: (_b = activeAiDrawer === null || activeAiDrawer === void 0 ? void 0 : activeAiDrawer.ariaLabels) === null || _b === void 0 ? void 0 : _b.resizeHandleTooltipText, ariaValuenow: resizeProps.relativeSize, onKeyDown: resizeProps.onKeyDown, onPointerDown: resizeProps.onPointerDown, onDirectionClick: resizeProps.onDirectionClick, disabled: isResizingDisabled }))),
+                React.createElement("div", { className: clsx(styles['drawer-content-container'], sharedStyles['with-motion-horizontal']) },
+                    React.createElement("div", { className: styles['drawer-content'] },
+                        React.createElement("header", { className: styles['drawer-content-header'] },
+                            React.createElement("div", { className: styles['drawer-content-header-content'] }, (_c = activeAiDrawer === null || activeAiDrawer === void 0 ? void 0 : activeAiDrawer.header) !== null && _c !== void 0 ? _c : React.createElement("div", null),
+                                React.createElement("div", { className: styles['drawer-actions'] },
+                                    !isMobile && (activeAiDrawer === null || activeAiDrawer === void 0 ? void 0 : activeAiDrawer.isExpandable) && (React.createElement("div", { className: styles['drawer-expanded-mode-button'] },
+                                        React.createElement(InternalButton, { ariaLabel: (_d = activeAiDrawer === null || activeAiDrawer === void 0 ? void 0 : activeAiDrawer.ariaLabels) === null || _d === void 0 ? void 0 : _d.expandedModeButton, className: testutilStyles['active-drawer-expanded-mode-button'], formAction: "none", ariaExpanded: isExpanded, iconName: isExpanded ? 'shrink' : 'expand', onClick: () => setExpandedDrawerId(isExpanded ? null : activeDrawerId), variant: "icon", analyticsAction: isExpanded ? 'expand' : 'collapse' }))),
+                                    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-left', onClick: () => onActiveAiDrawerChange === null || onActiveAiDrawerChange === void 0 ? void 0 : onActiveAiDrawerChange(null, { initiatedByUserAction: true }), ref: aiDrawerFocusControl === null || aiDrawerFocusControl === void 0 ? void 0 : aiDrawerFocusControl.refs.close, variant: "icon", analyticsAction: "close" })))),
+                            !isMobile && isExpanded && ((_e = activeAiDrawer === null || activeAiDrawer === void 0 ? void 0 : activeAiDrawer.ariaLabels) === null || _e === void 0 ? void 0 : _e.exitExpandedModeButton) && (React.createElement("div", { className: styles['drawer-back-to-console-slot'] },
+                                React.createElement("div", { className: styles['drawer-back-to-console-button-wrapper'] },
+                                    React.createElement("button", { className: clsx(testutilStyles['active-ai-drawer-leave-expanded-mode-custom-button'], styles['drawer-back-to-console-button']), formAction: "none", onClick: () => setExpandedDrawerId(null) }, (_f = activeAiDrawer === null || activeAiDrawer === void 0 ? void 0 : activeAiDrawer.ariaLabels) === null || _f === void 0 ? void 0 : _f.exitExpandedModeButton))))), activeAiDrawer === null || activeAiDrawer === void 0 ? void 0 :
+                        activeAiDrawer.content))));
+        }));
+    }));
+}
+//# sourceMappingURL=global-ai-drawer.js.map

package/app-layout/visual-refresh-toolbar/drawer/global-ai-drawer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"global-ai-drawer.js","sourceRoot":"","sources":["../../../../../src/app-layout/visual-refresh-toolbar/drawer/global-ai-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 { usePrevious } from '../../../internal/hooks/use-previous';\nimport { getLimitedValue } from '../../../split-panel/utils/size-utils';\nimport { AppLayoutProps } from '../../interfaces';\nimport { OnChangeParams } from '../../utils/use-ai-drawer';\nimport { FocusControlState } from '../../utils/use-focus-control';\nimport { AppLayoutInternals, InternalDrawer } 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 AIDrawerProps {\n  activeAiDrawerSize: number;\n  minAiDrawerSize: number;\n  aiDrawer: AppLayoutProps.Drawer | undefined;\n  maxAiDrawerSize: number;\n  ariaLabels: any;\n  aiDrawerFocusControl: FocusControlState | undefined;\n  isMobile: boolean;\n  drawersOpenQueue: ReadonlyArray<string> | undefined;\n  onActiveAiDrawerChange: undefined | ((newDrawerId: string | null, params?: OnChangeParams) => void);\n  onActiveDrawerResize: (detail: { id: string; size: number }) => void;\n  expandedDrawerId?: string | null;\n  setExpandedDrawerId: (value: string | null) => void;\n}\n\ninterface AppLayoutGlobalAiDrawerImplementationProps {\n  appLayoutInternals: AppLayoutInternals;\n  show: boolean;\n  activeAiDrawer: InternalDrawer | null;\n  aiDrawerProps: AIDrawerProps;\n}\n\nexport function AppLayoutGlobalAiDrawerImplementation({\n  appLayoutInternals,\n  show,\n  activeAiDrawer,\n  aiDrawerProps,\n}: AppLayoutGlobalAiDrawerImplementationProps) {\n  const {\n    activeAiDrawerSize,\n    minAiDrawerSize,\n    maxAiDrawerSize,\n    ariaLabels,\n    aiDrawerFocusControl,\n    isMobile,\n    drawersOpenQueue,\n    onActiveAiDrawerChange,\n    onActiveDrawerResize,\n    expandedDrawerId,\n    setExpandedDrawerId,\n  } = aiDrawerProps;\n  const { verticalOffsets, placement } = appLayoutInternals;\n  const drawerRef = useRef<HTMLDivElement>(null);\n  const activeDrawerId = activeAiDrawer?.id;\n\n  const computedAriaLabels = {\n    closeButton: activeAiDrawer ? activeAiDrawer.ariaLabels?.closeButton : ariaLabels?.toolsClose,\n    content: activeAiDrawer ? activeAiDrawer.ariaLabels?.drawerName : ariaLabels?.tools,\n  };\n\n  const resizeProps = useResize({\n    currentWidth: activeAiDrawerSize,\n    minWidth: minAiDrawerSize,\n    maxWidth: maxAiDrawerSize,\n    panelRef: drawerRef,\n    handleRef: aiDrawerFocusControl!.refs.slider,\n    onResize: size => {\n      onActiveDrawerResize({ id: activeDrawerId!, size });\n    },\n    position: 'side-start',\n  });\n  const size = getLimitedValue(minAiDrawerSize, activeAiDrawerSize, maxAiDrawerSize);\n  const isExpanded = activeAiDrawer?.isExpandable && expandedDrawerId === activeDrawerId;\n  const wasExpanded = usePrevious(isExpanded);\n  const animationDisabled =\n    (activeAiDrawer?.defaultActive && !drawersOpenQueue?.includes(activeAiDrawer.id)) || (wasExpanded && !isExpanded);\n  const drawerHeight = `calc(100vh - ${verticalOffsets.toolbar + placement.insetBlockEnd}px)`;\n  // disable resizing when the drawer is at its minimum width in a \"squeezed\" state\n  // (window is between mobile and desktop sizes). At this point, the drawer can't be\n  // resized in either direction, so we disable the resize handler\n  const isResizingDisabled = maxAiDrawerSize < activeAiDrawerSize;\n\n  return (\n    <Transition nodeRef={drawerRef} in={show} appear={show} mountOnEnter={true} timeout={250}>\n      {drawerTransitionState => {\n        return (\n          <Transition nodeRef={drawerRef} in={isExpanded} timeout={250}>\n            {expandedTransitionState => {\n              return (\n                <aside\n                  id={activeAiDrawer?.id}\n                  aria-hidden={!activeAiDrawer}\n                  aria-label={computedAriaLabels.content}\n                  className={clsx(\n                    styles.drawer,\n                    styles['ai-drawer'],\n                    !animationDisabled && isExpanded && styles['with-expanded-motion'],\n                    {\n                      [sharedStyles['with-motion-horizontal']]: !animationDisabled,\n                      [testutilStyles['active-drawer']]: show,\n                      [styles['drawer-hidden']]: !show && drawerTransitionState === 'exited',\n                      [testutilStyles['drawer-closed']]: !activeAiDrawer,\n                      [styles['drawer-expanded']]: isExpanded,\n                    }\n                  )}\n                  ref={drawerRef}\n                  onBlur={e => {\n                    if (!e.relatedTarget || !e.currentTarget.contains(e.relatedTarget)) {\n                      aiDrawerFocusControl?.loseFocus();\n                    }\n                  }}\n                  style={{\n                    blockSize: drawerHeight,\n                    insetBlockStart: `${placement.insetBlockStart}px`,\n                    ...(!isMobile && {\n                      [customCssProps.drawerSize]: `${['entering', 'entered'].includes(drawerTransitionState) ? size : 0}px`,\n                    }),\n                  }}\n                  data-testid={activeDrawerId && `awsui-app-layout-drawer-${activeDrawerId}`}\n                >\n                  {!isMobile && activeAiDrawer?.resizable && (!isExpanded || expandedTransitionState !== 'entered') && (\n                    <div className={styles['drawer-slider']}>\n                      <PanelResizeHandle\n                        ref={aiDrawerFocusControl?.refs.slider}\n                        position=\"side-start\"\n                        className={clsx(testutilStyles['drawers-slider'], styles['ai-drawer-slider-handle'])}\n                        ariaLabel={activeAiDrawer?.ariaLabels?.resizeHandle}\n                        tooltipText={activeAiDrawer?.ariaLabels?.resizeHandleTooltipText}\n                        ariaValuenow={resizeProps.relativeSize}\n                        onKeyDown={resizeProps.onKeyDown}\n                        onPointerDown={resizeProps.onPointerDown}\n                        onDirectionClick={resizeProps.onDirectionClick}\n                        disabled={isResizingDisabled}\n                      />\n                    </div>\n                  )}\n                  <div className={clsx(styles['drawer-content-container'], sharedStyles['with-motion-horizontal'])}>\n                    <div className={styles['drawer-content']}>\n                      <header className={styles['drawer-content-header']}>\n                        <div className={styles['drawer-content-header-content']}>\n                          {activeAiDrawer?.header ?? <div />}\n                          <div className={styles['drawer-actions']}>\n                            {!isMobile && activeAiDrawer?.isExpandable && (\n                              <div className={styles['drawer-expanded-mode-button']}>\n                                <InternalButton\n                                  ariaLabel={activeAiDrawer?.ariaLabels?.expandedModeButton}\n                                  className={testutilStyles['active-drawer-expanded-mode-button']}\n                                  formAction=\"none\"\n                                  ariaExpanded={isExpanded}\n                                  iconName={isExpanded ? 'shrink' : 'expand'}\n                                  onClick={() => setExpandedDrawerId(isExpanded ? null : activeDrawerId!)}\n                                  variant=\"icon\"\n                                  analyticsAction={isExpanded ? 'expand' : 'collapse'}\n                                />\n                              </div>\n                            )}\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-left'}\n                                onClick={() => onActiveAiDrawerChange?.(null, { initiatedByUserAction: true })}\n                                ref={aiDrawerFocusControl?.refs.close}\n                                variant=\"icon\"\n                                analyticsAction=\"close\"\n                              />\n                            </div>\n                          </div>\n                        </div>\n                        {!isMobile && isExpanded && activeAiDrawer?.ariaLabels?.exitExpandedModeButton && (\n                          <div className={styles['drawer-back-to-console-slot']}>\n                            <div className={styles['drawer-back-to-console-button-wrapper']}>\n                              <button\n                                className={clsx(\n                                  testutilStyles['active-ai-drawer-leave-expanded-mode-custom-button'],\n                                  styles['drawer-back-to-console-button']\n                                )}\n                                formAction=\"none\"\n                                onClick={() => setExpandedDrawerId(null)}\n                              >\n                                {activeAiDrawer?.ariaLabels?.exitExpandedModeButton}\n                              </button>\n                            </div>\n                          </div>\n                        )}\n                      </header>\n                      {activeAiDrawer?.content}\n                    </div>\n                  </div>\n                </aside>\n              );\n            }}\n          </Transition>\n        );\n      }}\n    </Transition>\n  );\n}\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"global-drawer.d.ts","sourceRoot":"","sources":["../../../../../src/app-layout/visual-refresh-toolbar/drawer/global-drawer.tsx"],"names":[],"mappings":";AAYA,OAAO,EAAE,kBAAkB,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAOnE,UAAU,wCAAwC;IAChD,kBAAkB,EAAE,kBAAkB,CAAC;IACvC,IAAI,EAAE,OAAO,CAAC;IACd,kBAAkB,EAAE,cAAc,GAAG,SAAS,CAAC;CAChD;AAED,iBAAS,mCAAmC,CAAC,EAC3C,kBAAkB,EAClB,IAAI,EACJ,kBAAkB,GACnB,EAAE,wCAAwC,eA6J1C;AAED,eAAe,mCAAmC,CAAC"}
+{"version":3,"file":"global-drawer.d.ts","sourceRoot":"","sources":["../../../../../src/app-layout/visual-refresh-toolbar/drawer/global-drawer.tsx"],"names":[],"mappings":";AAYA,OAAO,EAAE,kBAAkB,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAOnE,UAAU,wCAAwC;IAChD,kBAAkB,EAAE,kBAAkB,CAAC;IACvC,IAAI,EAAE,OAAO,CAAC;IACd,kBAAkB,EAAE,cAAc,GAAG,SAAS,CAAC;CAChD;AAED,iBAAS,mCAAmC,CAAC,EAC3C,kBAAkB,EAClB,IAAI,EACJ,kBAAkB,GACnB,EAAE,wCAAwC,eA8J1C;AAED,eAAe,mCAAmC,CAAC"}

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

@@ -15,7 +15,7 @@ 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;
-    const { ariaLabels, globalDrawersFocusControl, isMobile, placement, onActiveGlobalDrawersChange, onActiveDrawerResize, minGlobalDrawersSizes, maxGlobalDrawersSizes, activeGlobalDrawersSizes, activeGlobalDrawers, verticalOffsets, drawersOpenQueue, expandedDrawerId, setExpandedDrawerId, } = appLayoutInternals;
+    const { ariaLabels, globalDrawersFocusControl, isMobile, placement, onActiveGlobalDrawersChange, onActiveDrawerResize, minGlobalDrawersSizes, maxGlobalDrawersSizes, activeGlobalDrawersSizes, activeGlobalDrawers, verticalOffsets, drawersOpenQueue, expandedDrawerId, setExpandedDrawerId, activeAiDrawer, } = appLayoutInternals;
     const drawerRef = useRef(null);
     const activeDrawerId = (_a = activeGlobalDrawer === null || activeGlobalDrawer === void 0 ? void 0 : activeGlobalDrawer.id) !== null && _a !== void 0 ? _a : '';
     const computedAriaLabels = {
@@ -46,7 +46,7 @@ function AppLayoutGlobalDrawerImplementation({ appLayoutInternals, show, activeG
         var _a, _b, _c;
         return (React.createElement("aside", { id: activeDrawerId, "aria-hidden": !show, "aria-label": computedAriaLabels.content, className: clsx(styles.drawer, styles['drawer-global'], styles[state], !animationDisabled && sharedStyles['with-motion-horizontal'], !animationDisabled && isExpanded && styles['with-expanded-motion'], {
                 [styles['drawer-hidden']]: !show,
-                [styles['last-opened']]: lastOpenedDrawerId === activeDrawerId || isExpanded,
+                [styles['last-opened']]: (!activeAiDrawer && lastOpenedDrawerId === activeDrawerId) || isExpanded,
                 [testutilStyles['active-drawer']]: show,
                 [styles['drawer-expanded']]: isExpanded,
                 [styles['has-next-siblings']]: activeGlobalDrawers.findIndex(drawer => drawer.id === activeDrawerId) + 1 <

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

@@ -1 +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 customCssProps from '../../../internal/generated/custom-css-properties';\nimport { usePrevious } from '../../../internal/hooks/use-previous';\nimport { getLimitedValue } from '../../../split-panel/utils/size-utils';\nimport { getDrawerStyles } from '../compute-layout';\nimport { AppLayoutInternals, InternalDrawer } 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: InternalDrawer | 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    activeGlobalDrawers,\n    verticalOffsets,\n    drawersOpenQueue,\n    expandedDrawerId,\n    setExpandedDrawerId,\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 { drawerTopOffset, drawerHeight } = getDrawerStyles(verticalOffsets, isMobile, placement);\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  const isExpanded = activeGlobalDrawer?.isExpandable && expandedDrawerId === activeDrawerId;\n  const wasExpanded = usePrevious(isExpanded);\n  const animationDisabled =\n    (activeGlobalDrawer?.defaultActive && !drawersOpenQueue.includes(activeGlobalDrawer.id)) ||\n    (wasExpanded && !isExpanded);\n\n  return (\n    <Transition nodeRef={drawerRef} in={show || isExpanded} appear={show || isExpanded} timeout={0}>\n      {state => {\n        return (\n          <aside\n            id={activeDrawerId}\n            aria-hidden={!show}\n            aria-label={computedAriaLabels.content}\n            className={clsx(\n              styles.drawer,\n              styles['drawer-global'],\n              styles[state],\n              !animationDisabled && sharedStyles['with-motion-horizontal'],\n              !animationDisabled && isExpanded && styles['with-expanded-motion'],\n              {\n                [styles['drawer-hidden']]: !show,\n                [styles['last-opened']]: lastOpenedDrawerId === activeDrawerId || isExpanded,\n                [testutilStyles['active-drawer']]: show,\n                [styles['drawer-expanded']]: isExpanded,\n                [styles['has-next-siblings']]:\n                  activeGlobalDrawers.findIndex(drawer => drawer.id === activeDrawerId) + 1 <\n                  activeGlobalDrawers.length,\n              }\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: drawerHeight,\n              insetBlockStart: drawerTopOffset,\n              ...(!isMobile && {\n                [customCssProps.drawerSize]: `${['entering', 'entered'].includes(state) ? (isExpanded ? '100%' : size + 'px') : 0}`,\n              }),\n            }}\n            data-testid={`awsui-app-layout-drawer-${activeDrawerId}`}\n          >\n            <div className={clsx(styles['global-drawer-wrapper'])}>\n              {!isMobile && <div className={styles['drawer-gap']}></div>}\n              {!isMobile && activeGlobalDrawer?.resizable && !isExpanded && (\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                    tooltipText={activeGlobalDrawer?.ariaLabels?.resizeHandleTooltipText}\n                    ariaValuenow={resizeProps.relativeSize}\n                    onKeyDown={resizeProps.onKeyDown}\n                    onDirectionClick={resizeProps.onDirectionClick}\n                    onPointerDown={resizeProps.onPointerDown}\n                  />\n                </div>\n              )}\n\n              <div\n                className={clsx(styles['drawer-content-container'], sharedStyles['with-motion-horizontal'])}\n                data-testid={`awsui-app-layout-drawer-content-${activeDrawerId}`}\n              >\n                <div className={styles['drawer-actions']}>\n                  {!isMobile && activeGlobalDrawer?.isExpandable && (\n                    <div className={styles['drawer-expanded-mode-button']}>\n                      <InternalButton\n                        ariaLabel={activeGlobalDrawer?.ariaLabels?.expandedModeButton}\n                        className={testutilStyles['active-drawer-expanded-mode-button']}\n                        formAction=\"none\"\n                        ariaExpanded={isExpanded}\n                        iconName={isExpanded ? 'shrink' : 'expand'}\n                        onClick={() => setExpandedDrawerId(isExpanded ? null : activeDrawerId)}\n                        variant=\"icon\"\n                        analyticsAction={isExpanded ? 'expand' : 'collapse'}\n                      />\n                    </div>\n                  )}\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, { initiatedByUserAction: true })}\n                      ref={refs?.close}\n                      variant=\"icon\"\n                      analyticsAction=\"close\"\n                    />\n                  </div>\n                </div>\n                <div className={styles['drawer-content']} style={{ blockSize: drawerHeight }}>\n                  {activeGlobalDrawer?.content}\n                </div>\n              </div>\n            </div>\n          </aside>\n        );\n      }}\n    </Transition>\n  );\n}\n\nexport default AppLayoutGlobalDrawerImplementation;\n"]}
+{"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 customCssProps from '../../../internal/generated/custom-css-properties';\nimport { usePrevious } from '../../../internal/hooks/use-previous';\nimport { getLimitedValue } from '../../../split-panel/utils/size-utils';\nimport { getDrawerStyles } from '../compute-layout';\nimport { AppLayoutInternals, InternalDrawer } 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: InternalDrawer | 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    activeGlobalDrawers,\n    verticalOffsets,\n    drawersOpenQueue,\n    expandedDrawerId,\n    setExpandedDrawerId,\n    activeAiDrawer,\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 { drawerTopOffset, drawerHeight } = getDrawerStyles(verticalOffsets, isMobile, placement);\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  const isExpanded = activeGlobalDrawer?.isExpandable && expandedDrawerId === activeDrawerId;\n  const wasExpanded = usePrevious(isExpanded);\n  const animationDisabled =\n    (activeGlobalDrawer?.defaultActive && !drawersOpenQueue.includes(activeGlobalDrawer.id)) ||\n    (wasExpanded && !isExpanded);\n\n  return (\n    <Transition nodeRef={drawerRef} in={show || isExpanded} appear={show || isExpanded} timeout={0}>\n      {state => {\n        return (\n          <aside\n            id={activeDrawerId}\n            aria-hidden={!show}\n            aria-label={computedAriaLabels.content}\n            className={clsx(\n              styles.drawer,\n              styles['drawer-global'],\n              styles[state],\n              !animationDisabled && sharedStyles['with-motion-horizontal'],\n              !animationDisabled && isExpanded && styles['with-expanded-motion'],\n              {\n                [styles['drawer-hidden']]: !show,\n                [styles['last-opened']]: (!activeAiDrawer && lastOpenedDrawerId === activeDrawerId) || isExpanded,\n                [testutilStyles['active-drawer']]: show,\n                [styles['drawer-expanded']]: isExpanded,\n                [styles['has-next-siblings']]:\n                  activeGlobalDrawers.findIndex(drawer => drawer.id === activeDrawerId) + 1 <\n                  activeGlobalDrawers.length,\n              }\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: drawerHeight,\n              insetBlockStart: drawerTopOffset,\n              ...(!isMobile && {\n                [customCssProps.drawerSize]: `${['entering', 'entered'].includes(state) ? (isExpanded ? '100%' : size + 'px') : 0}`,\n              }),\n            }}\n            data-testid={`awsui-app-layout-drawer-${activeDrawerId}`}\n          >\n            <div className={clsx(styles['global-drawer-wrapper'])}>\n              {!isMobile && <div className={styles['drawer-gap']}></div>}\n              {!isMobile && activeGlobalDrawer?.resizable && !isExpanded && (\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                    tooltipText={activeGlobalDrawer?.ariaLabels?.resizeHandleTooltipText}\n                    ariaValuenow={resizeProps.relativeSize}\n                    onKeyDown={resizeProps.onKeyDown}\n                    onDirectionClick={resizeProps.onDirectionClick}\n                    onPointerDown={resizeProps.onPointerDown}\n                  />\n                </div>\n              )}\n\n              <div\n                className={clsx(styles['drawer-content-container'], sharedStyles['with-motion-horizontal'])}\n                data-testid={`awsui-app-layout-drawer-content-${activeDrawerId}`}\n              >\n                <div className={styles['drawer-actions']}>\n                  {!isMobile && activeGlobalDrawer?.isExpandable && (\n                    <div className={styles['drawer-expanded-mode-button']}>\n                      <InternalButton\n                        ariaLabel={activeGlobalDrawer?.ariaLabels?.expandedModeButton}\n                        className={testutilStyles['active-drawer-expanded-mode-button']}\n                        formAction=\"none\"\n                        ariaExpanded={isExpanded}\n                        iconName={isExpanded ? 'shrink' : 'expand'}\n                        onClick={() => setExpandedDrawerId(isExpanded ? null : activeDrawerId)}\n                        variant=\"icon\"\n                        analyticsAction={isExpanded ? 'expand' : 'collapse'}\n                      />\n                    </div>\n                  )}\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, { initiatedByUserAction: true })}\n                      ref={refs?.close}\n                      variant=\"icon\"\n                      analyticsAction=\"close\"\n                    />\n                  </div>\n                </div>\n                <div className={styles['drawer-content']} style={{ blockSize: drawerHeight }}>\n                  {activeGlobalDrawer?.content}\n                </div>\n              </div>\n            </div>\n          </aside>\n        );\n      }}\n    </Transition>\n  );\n}\n\nexport default AppLayoutGlobalDrawerImplementation;\n"]}