@cloudscape-design/components 3.0.810 → 3.0.812

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

@@ -1,9 +1,10 @@
 
     import './styles.scoped.css';
     export default {
-  "with-motion": "awsui_with-motion_b18tp_1ia5g_142",
-  "resize-active": "awsui_resize-active_b18tp_1ia5g_161",
-  "resize-side": "awsui_resize-side_b18tp_1ia5g_171",
-  "resize-bottom": "awsui_resize-bottom_b18tp_1ia5g_174"
+  "with-motion-vertical": "awsui_with-motion-vertical_b18tp_8csc7_142",
+  "with-motion-horizontal": "awsui_with-motion-horizontal_b18tp_8csc7_161",
+  "resize-active": "awsui_resize-active_b18tp_8csc7_180",
+  "resize-side": "awsui_resize-side_b18tp_8csc7_191",
+  "resize-bottom": "awsui_resize-bottom_b18tp_8csc7_194"
 };
   

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

@@ -139,40 +139,60 @@
 /* Style used for links in slots/components that are text heavy, to help links stand out among
 surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F73#description */
 @media (min-width: 689px) {
-  .awsui_with-motion_b18tp_1ia5g_142:not(#\9) {
+  .awsui_with-motion-vertical_b18tp_8csc7_142:not(#\9) {
     transition: var(--motion-duration-refresh-only-medium-nf6485, 165ms);
-    transition-property: border-color, opacity, block-size, inline-size, inset-block-start;
+    transition-property: border-color, opacity, block-size, inset-block-start;
   }
 }
 @media (min-width: 689px) and (prefers-reduced-motion: reduce) {
-  .awsui_with-motion_b18tp_1ia5g_142:not(#\9) {
+  .awsui_with-motion-vertical_b18tp_8csc7_142:not(#\9) {
     animation: none;
     transition: none;
   }
 }
 @media (min-width: 689px) {
-  .awsui-motion-disabled .awsui_with-motion_b18tp_1ia5g_142:not(#\9), .awsui-mode-entering .awsui_with-motion_b18tp_1ia5g_142:not(#\9) {
+  .awsui-motion-disabled .awsui_with-motion-vertical_b18tp_8csc7_142:not(#\9), .awsui-mode-entering .awsui_with-motion-vertical_b18tp_8csc7_142:not(#\9) {
+    animation: none;
+    transition: none;
+  }
+}
+
+@media (min-width: 689px) {
+  .awsui_with-motion-horizontal_b18tp_8csc7_161:not(#\9) {
+    transition: var(--motion-duration-refresh-only-medium-nf6485, 165ms);
+    transition-property: border-color, opacity, inline-size, inset-inline-start;
+  }
+}
+@media (min-width: 689px) and (prefers-reduced-motion: reduce) {
+  .awsui_with-motion-horizontal_b18tp_8csc7_161:not(#\9) {
+    animation: none;
+    transition: none;
+  }
+}
+@media (min-width: 689px) {
+  .awsui-motion-disabled .awsui_with-motion-horizontal_b18tp_8csc7_161:not(#\9), .awsui-mode-entering .awsui_with-motion-horizontal_b18tp_8csc7_161:not(#\9) {
     animation: none;
     transition: none;
   }
 }
 
 /* stylelint-disable selector-combinator-disallowed-list, selector-max-type, selector-max-universal */
-.awsui_resize-active_b18tp_1ia5g_161 *:not(#\9) {
+.awsui_resize-active_b18tp_8csc7_180 *:not(#\9) {
   -webkit-user-select: none;
           user-select: none;
 }
-.awsui_resize-active_b18tp_1ia5g_161 * .awsui_with-motion_b18tp_1ia5g_142:not(#\9) {
+.awsui_resize-active_b18tp_8csc7_180 * .awsui_with-motion-vertical_b18tp_8csc7_142:not(#\9),
+.awsui_resize-active_b18tp_8csc7_180 * .awsui_with-motion-horizontal_b18tp_8csc7_161:not(#\9) {
   transition: none;
   animation: none;
 }
-.awsui_resize-active_b18tp_1ia5g_161 iframe:not(#\9) {
+.awsui_resize-active_b18tp_8csc7_180 iframe:not(#\9) {
   pointer-events: none;
 }
-.awsui_resize-side_b18tp_1ia5g_171 *:not(#\9) {
+.awsui_resize-side_b18tp_8csc7_191 *:not(#\9) {
   cursor: ew-resize;
 }
-.awsui_resize-bottom_b18tp_1ia5g_174 *:not(#\9) {
+.awsui_resize-bottom_b18tp_8csc7_194 *:not(#\9) {
   cursor: ns-resize;
 }
 

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

@@ -2,9 +2,10 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "with-motion": "awsui_with-motion_b18tp_1ia5g_142",
-  "resize-active": "awsui_resize-active_b18tp_1ia5g_161",
-  "resize-side": "awsui_resize-side_b18tp_1ia5g_171",
-  "resize-bottom": "awsui_resize-bottom_b18tp_1ia5g_174"
+  "with-motion-vertical": "awsui_with-motion-vertical_b18tp_8csc7_142",
+  "with-motion-horizontal": "awsui_with-motion-horizontal_b18tp_8csc7_161",
+  "resize-active": "awsui_resize-active_b18tp_8csc7_180",
+  "resize-side": "awsui_resize-side_b18tp_8csc7_191",
+  "resize-bottom": "awsui_resize-bottom_b18tp_8csc7_194"
 };
   

package/app-layout/utils/interfaces.d.ts

@@ -4,6 +4,5 @@ export interface SizeControlProps {
     panelRef?: React.RefObject<HTMLDivElement>;
     handleRef?: React.RefObject<HTMLDivElement>;
     onResize: (newSize: number) => void;
-    hasTransitions?: boolean;
 }
 //# sourceMappingURL=interfaces.d.ts.map

package/app-layout/utils/interfaces.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../../src/app-layout/utils/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,EAAE,MAAM,GAAG,QAAQ,CAAC;IAC5B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;IAC3C,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;IAC5C,QAAQ,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B"}
+{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../../src/app-layout/utils/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,EAAE,MAAM,GAAG,QAAQ,CAAC;IAC5B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;IAC3C,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;IAC5C,QAAQ,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;CACrC"}

package/app-layout/utils/interfaces.js.map

@@ -1 +1 @@
-{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../../src/app-layout/utils/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\n\nexport interface SizeControlProps {\n  position: 'side' | 'bottom';\n  panelRef?: React.RefObject<HTMLDivElement>;\n  handleRef?: React.RefObject<HTMLDivElement>;\n  onResize: (newSize: number) => void;\n  hasTransitions?: boolean;\n}\n"]}
+{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../../src/app-layout/utils/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\n\nexport interface SizeControlProps {\n  position: 'side' | 'bottom';\n  panelRef?: React.RefObject<HTMLDivElement>;\n  handleRef?: React.RefObject<HTMLDivElement>;\n  onResize: (newSize: number) => void;\n}\n"]}

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

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

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,iEAM1B,gBAAgB,eAoDlB,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,eA+C7F,CAAC"}

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

@@ -3,12 +3,11 @@
 import { useCallback } from 'react';
 import { getIsRtl, getLogicalBoundingClientRect, getLogicalClientX, } from '@cloudscape-design/component-toolkit/internal';
 import styles from '../resize/styles.css.js';
-export const usePointerEvents = ({ position, panelRef, handleRef, onResize, hasTransitions = false, }) => {
+export const usePointerEvents = ({ position, panelRef, handleRef, onResize }) => {
     const onDocumentPointerMove = useCallback((event) => {
         if (!panelRef || !panelRef.current || !handleRef || !handleRef.current) {
             return;
         }
-        panelRef.current.classList.remove(styles['with-motion']);
         if (position === 'side') {
             const mouseClientX = getLogicalClientX(event, getIsRtl(panelRef.current)) || 0;
             // The handle offset aligns the cursor with the middle of the resize handle.
@@ -28,14 +27,11 @@ export const usePointerEvents = ({ position, panelRef, handleRef, onResize, hasT
         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);
-    }, [panelRef, onDocumentPointerMove, position, hasTransitions]);
+    }, [panelRef, onDocumentPointerMove, position]);
     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

@@ -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 = ({\n  position,\n  panelRef,\n  handleRef,\n  onResize,\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 = 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    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"]}
+{"version":3,"file":"use-pointer-events.js","sourceRoot":"","sources":["../../../../src/app-layout/utils/use-pointer-events.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAEpC,OAAO,EACL,QAAQ,EACR,4BAA4B,EAC5B,iBAAiB,GAClB,MAAM,+CAA+C,CAAC;AAIvD,OAAO,MAAM,MAAM,yBAAyB,CAAC;AAE7C,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,QAAQ,EAAoB,EAAE,EAAE;IAChG,MAAM,qBAAqB,GAAG,WAAW,CACvC,CAAC,KAAmB,EAAE,EAAE;QACtB,IAAI,CAAC,QAAQ,IAAI,CAAC,QAAQ,CAAC,OAAO,IAAI,CAAC,SAAS,IAAI,CAAC,SAAS,CAAC,OAAO,EAAE;YACtE,OAAO;SACR;QAED,IAAI,QAAQ,KAAK,MAAM,EAAE;YACvB,MAAM,YAAY,GAAG,iBAAiB,CAAC,KAAK,EAAE,QAAQ,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,CAAC;YAE/E,4EAA4E;YAC5E,MAAM,YAAY,GAAG,4BAA4B,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,UAAU,GAAG,CAAC,CAAC;YACpF,MAAM,KAAK,GAAG,4BAA4B,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,cAAc,GAAG,YAAY,GAAG,YAAY,CAAC;YAE1G,QAAQ,CAAC,KAAK,CAAC,CAAC;SACjB;aAAM;YACL,MAAM,YAAY,GAAG,KAAK,CAAC,OAAO,IAAI,CAAC,CAAC;YAExC,4EAA4E;YAC5E,MAAM,YAAY,GAAG,4BAA4B,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,SAAS,GAAG,CAAC,CAAC;YACnF,MAAM,MAAM,GAAG,4BAA4B,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,aAAa,GAAG,YAAY,GAAG,YAAY,CAAC;YAE1G,QAAQ,CAAC,MAAM,CAAC,CAAC;SAClB;IACH,CAAC,EACD,CAAC,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,QAAQ,CAAC,CAC1C,CAAC;IAEF,MAAM,mBAAmB,GAAG,WAAW,CAAC,GAAG,EAAE;QAC3C,IAAI,CAAC,QAAQ,IAAI,CAAC,QAAQ,CAAC,OAAO,EAAE;YAClC,OAAO;SACR;QAED,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,MAAM,CAAC,eAAe,CAAC,CAAC,CAAC;QACxD,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,MAAM,CAAC,UAAU,QAAQ,EAAE,CAAC,CAAC,CAAC;QAC7D,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,mBAAmB,CAAC,CAAC;QAC/D,QAAQ,CAAC,mBAAmB,CAAC,aAAa,EAAE,qBAAqB,CAAC,CAAC;IACrE,CAAC,EAAE,CAAC,QAAQ,EAAE,qBAAqB,EAAE,QAAQ,CAAC,CAAC,CAAC;IAEhD,MAAM,mBAAmB,GAAG,WAAW,CAAC,GAAG,EAAE;QAC3C,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,MAAM,CAAC,eAAe,CAAC,CAAC,CAAC;QACrD,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,MAAM,CAAC,UAAU,QAAQ,EAAE,CAAC,CAAC,CAAC;QAC1D,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,mBAAmB,CAAC,CAAC;QAC5D,QAAQ,CAAC,gBAAgB,CAAC,aAAa,EAAE,qBAAqB,CAAC,CAAC;IAClE,CAAC,EAAE,CAAC,qBAAqB,EAAE,mBAAmB,EAAE,QAAQ,CAAC,CAAC,CAAC;IAE3D,OAAO,mBAAmB,CAAC;AAC7B,CAAC,CAAC","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    if (!panelRef || !panelRef.current) {\n      return;\n    }\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]);\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.map

@@ -1 +1 @@
-{"version":3,"file":"use-resize.d.ts","sourceRoot":"","sources":["../../../../src/app-layout/utils/use-resize.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAInD,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAE/C,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAMvD,MAAM,WAAW,iBAAiB;IAChC,YAAY,EAAE,cAAc,CAAC,MAAM,GAAG,SAAS,CAAC;IAChD,gBAAgB,EAAE,MAAM,CAAC;IACzB,oBAAoB,EAAE,CAAC,MAAM,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IACrE,WAAW,EAAE,gBAAgB,CAAC;IAC9B,WAAW,EAAE,OAAO,CAAC;IACrB,eAAe,EAAE,MAAM,CAAC;IACxB,eAAe,EAAE,MAAM,CAAC;CACzB;AAED,iBAAS,SAAS,CAChB,eAAe,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,EAChD,EACE,YAAY,EACZ,gBAAgB,EAChB,oBAAoB,EACpB,WAAW,EACX,WAAW,EACX,eAAe,EACf,eAAe,GAChB,EAAE,iBAAiB;;;EAkDrB;AAED,eAAe,SAAS,CAAC"}
+{"version":3,"file":"use-resize.d.ts","sourceRoot":"","sources":["../../../../src/app-layout/utils/use-resize.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAInD,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAE/C,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAMvD,MAAM,WAAW,iBAAiB;IAChC,YAAY,EAAE,cAAc,CAAC,MAAM,GAAG,SAAS,CAAC;IAChD,gBAAgB,EAAE,MAAM,CAAC;IACzB,oBAAoB,EAAE,CAAC,MAAM,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IACrE,WAAW,EAAE,gBAAgB,CAAC;IAC9B,WAAW,EAAE,OAAO,CAAC;IACrB,eAAe,EAAE,MAAM,CAAC;IACxB,eAAe,EAAE,MAAM,CAAC;CACzB;AAED,iBAAS,SAAS,CAChB,eAAe,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,EAChD,EACE,YAAY,EACZ,gBAAgB,EAChB,oBAAoB,EACpB,WAAW,EACX,WAAW,EACX,eAAe,EACf,eAAe,GAChB,EAAE,iBAAiB;;;EAiDrB;AAED,eAAe,SAAS,CAAC"}

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

@@ -32,7 +32,6 @@ function useResize(drawerRefObject, { activeDrawer, activeDrawerSize, onActiveDr
         panelRef: drawerRefObject,
         handleRef: drawersRefs.slider,
         onResize: setSidePanelWidth,
-        hasTransitions: true,
     };
     const onSliderPointerDown = usePointerEvents(sizeControlProps);
     const onKeyDown = useKeyboardEvents(sizeControlProps);

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

@@ -1 +1 @@
-{"version":3,"file":"use-resize.js","sourceRoot":"","sources":["../../../../src/app-layout/utils/use-resize.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEnD,OAAO,iBAAiB,MAAM,+CAA+C,CAAC;AAC9E,OAAO,EAAE,eAAe,EAAE,MAAM,oCAAoC,CAAC;AAIrE,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAC1D,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAExD,OAAO,cAAc,MAAM,+BAA+B,CAAC;AAY3D,SAAS,SAAS,CAChB,eAAgD,EAChD,EACE,YAAY,EACZ,gBAAgB,EAChB,oBAAoB,EACpB,WAAW,EACX,WAAW,EACX,eAAe,EACf,eAAe,GACG;;IAEpB,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IAEpD,MAAM,UAAU,GAAG,CAAC,YAAY,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,gBAAgB,CAAC;IAExE,SAAS,CAAC,GAAG,EAAE;QACb,uDAAuD;QACvD,kEAAkE;QAClE,MAAM,MAAM,GAAG,qBAAqB,CAAC,GAAG,EAAE;YACxC,MAAM,OAAO,GAAG,eAAe,CAAC;YAChC,eAAe,CAAC,CAAC,CAAC,UAAU,GAAG,eAAe,CAAC,GAAG,CAAC,OAAO,GAAG,eAAe,CAAC,CAAC,GAAG,GAAG,CAAC,CAAC;QACxF,CAAC,CAAC,CAAC;QACH,OAAO,GAAG,EAAE,CAAC,oBAAoB,CAAC,MAAM,CAAC,CAAC;IAC5C,CAAC,EAAE,CAAC,UAAU,EAAE,eAAe,EAAE,eAAe,CAAC,CAAC,CAAC;IAEnD,MAAM,iBAAiB,GAAG,CAAC,KAAa,EAAE,EAAE;QAC1C,MAAM,QAAQ,GAAG,eAAe,CAAC;QACjC,MAAM,IAAI,GAAG,eAAe,CAAC,eAAe,EAAE,KAAK,EAAE,QAAQ,CAAC,CAAC;QAC/D,MAAM,EAAE,GAAG,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,EAAE,CAAC;QAE5B,IAAI,EAAE,IAAI,QAAQ,IAAI,eAAe,EAAE;YACrC,oBAAoB,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,CAAC;SACpC;IACH,CAAC,CAAC;IAEF,MAAM,gBAAgB,GAAqB;QACzC,QAAQ,EAAE,MAAM;QAChB,QAAQ,EAAE,eAAe;QACzB,SAAS,EAAE,WAAW,CAAC,MAAM;QAC7B,QAAQ,EAAE,iBAAiB;QAC3B,cAAc,EAAE,IAAI;KACrB,CAAC;IAEF,MAAM,mBAAmB,GAAG,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;IAC/D,MAAM,SAAS,GAAG,iBAAiB,CAAC,gBAAgB,CAAC,CAAC;IAEtD,MAAM,YAAY,GAAG,CACnB,oBAAC,iBAAiB,IAChB,GAAG,EAAE,WAAW,CAAC,MAAM,EACvB,QAAQ,EAAC,MAAM,EACf,SAAS,EAAE,MAAA,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,UAAU,0CAAE,YAAY,EACjD,YAAY,EAAE,YAAY,EAC1B,SAAS,EAAE,cAAc,CAAC,gBAAgB,CAAC,EAC3C,SAAS,EAAE,SAAS,EACpB,aAAa,EAAE,mBAAmB,GAClC,CACH,CAAC;IAEF,OAAO,EAAE,YAAY,EAAE,UAAU,EAAE,CAAC;AACtC,CAAC;AAED,eAAe,SAAS,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useEffect, useState } from 'react';\n\nimport PanelResizeHandle from '../../internal/components/panel-resize-handle';\nimport { getLimitedValue } from '../../split-panel/utils/size-utils';\nimport { AppLayoutProps } from '../interfaces';\nimport { SizeControlProps } from './interfaces';\nimport { FocusControlRefs } from './use-focus-control';\nimport { useKeyboardEvents } from './use-keyboard-events';\nimport { usePointerEvents } from './use-pointer-events';\n\nimport testutilStyles from '../test-classes/styles.css.js';\n\nexport interface DrawerResizeProps {\n  activeDrawer: AppLayoutProps.Drawer | undefined;\n  activeDrawerSize: number;\n  onActiveDrawerResize: (detail: { id: string; size: number }) => void;\n  drawersRefs: FocusControlRefs;\n  isToolsOpen: boolean;\n  drawersMaxWidth: number;\n  drawersMinWidth: number;\n}\n\nfunction useResize(\n  drawerRefObject: React.RefObject<HTMLDivElement>,\n  {\n    activeDrawer,\n    activeDrawerSize,\n    onActiveDrawerResize,\n    drawersRefs,\n    isToolsOpen,\n    drawersMinWidth,\n    drawersMaxWidth,\n  }: DrawerResizeProps\n) {\n  const [relativeSize, setRelativeSize] = useState(0);\n\n  const drawerSize = !activeDrawer && !isToolsOpen ? 0 : activeDrawerSize;\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 - drawersMinWidth) / (maxSize - drawersMinWidth)) * 100);\n    });\n    return () => cancelAnimationFrame(handle);\n  }, [drawerSize, drawersMaxWidth, drawersMinWidth]);\n\n  const setSidePanelWidth = (width: number) => {\n    const maxWidth = drawersMaxWidth;\n    const size = getLimitedValue(drawersMinWidth, width, maxWidth);\n    const id = activeDrawer?.id;\n\n    if (id && maxWidth >= drawersMinWidth) {\n      onActiveDrawerResize({ size, id });\n    }\n  };\n\n  const sizeControlProps: SizeControlProps = {\n    position: 'side',\n    panelRef: drawerRefObject,\n    handleRef: drawersRefs.slider,\n    onResize: setSidePanelWidth,\n    hasTransitions: true,\n  };\n\n  const onSliderPointerDown = usePointerEvents(sizeControlProps);\n  const onKeyDown = useKeyboardEvents(sizeControlProps);\n\n  const resizeHandle = (\n    <PanelResizeHandle\n      ref={drawersRefs.slider}\n      position=\"side\"\n      ariaLabel={activeDrawer?.ariaLabels?.resizeHandle}\n      ariaValuenow={relativeSize}\n      className={testutilStyles['drawers-slider']}\n      onKeyDown={onKeyDown}\n      onPointerDown={onSliderPointerDown}\n    />\n  );\n\n  return { resizeHandle, drawerSize };\n}\n\nexport default useResize;\n"]}
+{"version":3,"file":"use-resize.js","sourceRoot":"","sources":["../../../../src/app-layout/utils/use-resize.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEnD,OAAO,iBAAiB,MAAM,+CAA+C,CAAC;AAC9E,OAAO,EAAE,eAAe,EAAE,MAAM,oCAAoC,CAAC;AAIrE,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAC1D,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAExD,OAAO,cAAc,MAAM,+BAA+B,CAAC;AAY3D,SAAS,SAAS,CAChB,eAAgD,EAChD,EACE,YAAY,EACZ,gBAAgB,EAChB,oBAAoB,EACpB,WAAW,EACX,WAAW,EACX,eAAe,EACf,eAAe,GACG;;IAEpB,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IAEpD,MAAM,UAAU,GAAG,CAAC,YAAY,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,gBAAgB,CAAC;IAExE,SAAS,CAAC,GAAG,EAAE;QACb,uDAAuD;QACvD,kEAAkE;QAClE,MAAM,MAAM,GAAG,qBAAqB,CAAC,GAAG,EAAE;YACxC,MAAM,OAAO,GAAG,eAAe,CAAC;YAChC,eAAe,CAAC,CAAC,CAAC,UAAU,GAAG,eAAe,CAAC,GAAG,CAAC,OAAO,GAAG,eAAe,CAAC,CAAC,GAAG,GAAG,CAAC,CAAC;QACxF,CAAC,CAAC,CAAC;QACH,OAAO,GAAG,EAAE,CAAC,oBAAoB,CAAC,MAAM,CAAC,CAAC;IAC5C,CAAC,EAAE,CAAC,UAAU,EAAE,eAAe,EAAE,eAAe,CAAC,CAAC,CAAC;IAEnD,MAAM,iBAAiB,GAAG,CAAC,KAAa,EAAE,EAAE;QAC1C,MAAM,QAAQ,GAAG,eAAe,CAAC;QACjC,MAAM,IAAI,GAAG,eAAe,CAAC,eAAe,EAAE,KAAK,EAAE,QAAQ,CAAC,CAAC;QAC/D,MAAM,EAAE,GAAG,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,EAAE,CAAC;QAE5B,IAAI,EAAE,IAAI,QAAQ,IAAI,eAAe,EAAE;YACrC,oBAAoB,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,CAAC;SACpC;IACH,CAAC,CAAC;IAEF,MAAM,gBAAgB,GAAqB;QACzC,QAAQ,EAAE,MAAM;QAChB,QAAQ,EAAE,eAAe;QACzB,SAAS,EAAE,WAAW,CAAC,MAAM;QAC7B,QAAQ,EAAE,iBAAiB;KAC5B,CAAC;IAEF,MAAM,mBAAmB,GAAG,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;IAC/D,MAAM,SAAS,GAAG,iBAAiB,CAAC,gBAAgB,CAAC,CAAC;IAEtD,MAAM,YAAY,GAAG,CACnB,oBAAC,iBAAiB,IAChB,GAAG,EAAE,WAAW,CAAC,MAAM,EACvB,QAAQ,EAAC,MAAM,EACf,SAAS,EAAE,MAAA,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,UAAU,0CAAE,YAAY,EACjD,YAAY,EAAE,YAAY,EAC1B,SAAS,EAAE,cAAc,CAAC,gBAAgB,CAAC,EAC3C,SAAS,EAAE,SAAS,EACpB,aAAa,EAAE,mBAAmB,GAClC,CACH,CAAC;IAEF,OAAO,EAAE,YAAY,EAAE,UAAU,EAAE,CAAC;AACtC,CAAC;AAED,eAAe,SAAS,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useEffect, useState } from 'react';\n\nimport PanelResizeHandle from '../../internal/components/panel-resize-handle';\nimport { getLimitedValue } from '../../split-panel/utils/size-utils';\nimport { AppLayoutProps } from '../interfaces';\nimport { SizeControlProps } from './interfaces';\nimport { FocusControlRefs } from './use-focus-control';\nimport { useKeyboardEvents } from './use-keyboard-events';\nimport { usePointerEvents } from './use-pointer-events';\n\nimport testutilStyles from '../test-classes/styles.css.js';\n\nexport interface DrawerResizeProps {\n  activeDrawer: AppLayoutProps.Drawer | undefined;\n  activeDrawerSize: number;\n  onActiveDrawerResize: (detail: { id: string; size: number }) => void;\n  drawersRefs: FocusControlRefs;\n  isToolsOpen: boolean;\n  drawersMaxWidth: number;\n  drawersMinWidth: number;\n}\n\nfunction useResize(\n  drawerRefObject: React.RefObject<HTMLDivElement>,\n  {\n    activeDrawer,\n    activeDrawerSize,\n    onActiveDrawerResize,\n    drawersRefs,\n    isToolsOpen,\n    drawersMinWidth,\n    drawersMaxWidth,\n  }: DrawerResizeProps\n) {\n  const [relativeSize, setRelativeSize] = useState(0);\n\n  const drawerSize = !activeDrawer && !isToolsOpen ? 0 : activeDrawerSize;\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 - drawersMinWidth) / (maxSize - drawersMinWidth)) * 100);\n    });\n    return () => cancelAnimationFrame(handle);\n  }, [drawerSize, drawersMaxWidth, drawersMinWidth]);\n\n  const setSidePanelWidth = (width: number) => {\n    const maxWidth = drawersMaxWidth;\n    const size = getLimitedValue(drawersMinWidth, width, maxWidth);\n    const id = activeDrawer?.id;\n\n    if (id && maxWidth >= drawersMinWidth) {\n      onActiveDrawerResize({ size, id });\n    }\n  };\n\n  const sizeControlProps: SizeControlProps = {\n    position: 'side',\n    panelRef: drawerRefObject,\n    handleRef: drawersRefs.slider,\n    onResize: setSidePanelWidth,\n  };\n\n  const onSliderPointerDown = usePointerEvents(sizeControlProps);\n  const onKeyDown = useKeyboardEvents(sizeControlProps);\n\n  const resizeHandle = (\n    <PanelResizeHandle\n      ref={drawersRefs.slider}\n      position=\"side\"\n      ariaLabel={activeDrawer?.ariaLabels?.resizeHandle}\n      ariaValuenow={relativeSize}\n      className={testutilStyles['drawers-slider']}\n      onKeyDown={onKeyDown}\n      onPointerDown={onSliderPointerDown}\n    />\n  );\n\n  return { resizeHandle, drawerSize };\n}\n\nexport default useResize;\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":";AAQA,OAAO,EAAE,yBAAyB,EAAE,MAAM,0BAA0B,CAAC;AAGrE,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAElD,OAAO,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAOnD,UAAU,wCAAwC;IAChD,kBAAkB,EAAE,kBAAkB,CAAC;IACvC,IAAI,EAAE,OAAO,CAAC;IACd,kBAAkB,EACd,CAAC,cAAc,CAAC,MAAM,GAAG;QAAE,MAAM,CAAC,EAAE,yBAAyB,CAAC;QAAC,MAAM,CAAC,EAAE,yBAAyB,CAAA;KAAE,CAAC,GACpG,SAAS,CAAC;CACf;AAED,iBAAS,mCAAmC,CAAC,EAC3C,kBAAkB,EAClB,IAAI,EACJ,kBAAkB,GACnB,EAAE,wCAAwC,eA8G1C;AAED,eAAe,mCAAmC,CAAC"}
+{"version":3,"file":"global-drawer.d.ts","sourceRoot":"","sources":["../../../../../src/app-layout/visual-refresh-toolbar/drawer/global-drawer.tsx"],"names":[],"mappings":";AAQA,OAAO,EAAE,yBAAyB,EAAE,MAAM,0BAA0B,CAAC;AAGrE,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAElD,OAAO,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAOnD,UAAU,wCAAwC;IAChD,kBAAkB,EAAE,kBAAkB,CAAC;IACvC,IAAI,EAAE,OAAO,CAAC;IACd,kBAAkB,EACd,CAAC,cAAc,CAAC,MAAM,GAAG;QAAE,MAAM,CAAC,EAAE,yBAAyB,CAAC;QAAC,MAAM,CAAC,EAAE,yBAAyB,CAAA;KAAE,CAAC,GACpG,SAAS,CAAC;CACf;AAED,iBAAS,mCAAmC,CAAC,EAC3C,kBAAkB,EAClB,IAAI,EACJ,kBAAkB,GACnB,EAAE,wCAAwC,eAoH1C;AAED,eAAe,mCAAmC,CAAC"}

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

@@ -39,7 +39,7 @@ function AppLayoutGlobalDrawerImplementation({ appLayoutInternals, show, activeG
     const hasTriggerButton = !!(activeGlobalDrawer === null || activeGlobalDrawer === void 0 ? void 0 : activeGlobalDrawer.trigger);
     return (React.createElement(Transition, { nodeRef: drawerRef, in: show, appear: show, timeout: 0 }, state => {
         var _a;
-        return (React.createElement("aside", { id: activeDrawerId, "aria-hidden": !show, "aria-label": computedAriaLabels.content, className: clsx(styles.drawer, styles['drawer-global'], styles[state], sharedStyles['with-motion'], {
+        return (React.createElement("aside", { id: activeDrawerId, "aria-hidden": !show, "aria-label": computedAriaLabels.content, className: clsx(styles.drawer, styles['drawer-global'], styles[state], sharedStyles['with-motion-horizontal'], {
                 [styles['drawer-hidden']]: !show,
                 [styles['last-opened']]: lastOpenedDrawerId === activeDrawerId,
                 [testutilStyles['active-drawer']]: show,
@@ -60,7 +60,7 @@ function AppLayoutGlobalDrawerImplementation({ appLayoutInternals, show, activeG
             })), "data-testid": `awsui-app-layout-drawer-${activeDrawerId}` },
             !isMobile && (activeGlobalDrawer === null || activeGlobalDrawer === void 0 ? void 0 : activeGlobalDrawer.resizable) && (React.createElement("div", { className: styles['drawer-slider'] },
                 React.createElement(PanelResizeHandle, { ref: refs === null || refs === void 0 ? void 0 : refs.slider, position: "side", className: testutilStyles['drawers-slider'], ariaLabel: (_a = activeGlobalDrawer === null || activeGlobalDrawer === void 0 ? void 0 : activeGlobalDrawer.ariaLabels) === null || _a === void 0 ? void 0 : _a.resizeHandle, ariaValuenow: resizeProps.relativeSize, onKeyDown: resizeProps.onKeyDown, onPointerDown: resizeProps.onPointerDown }))),
-            React.createElement("div", { className: clsx(styles['drawer-content-container'], sharedStyles['with-motion']) },
+            React.createElement("div", { className: clsx(styles['drawer-content-container'], sharedStyles['with-motion-horizontal']) },
                 React.createElement("div", { className: clsx(styles['drawer-close-button']) },
                     React.createElement(InternalButton, { ariaLabel: computedAriaLabels.closeButton, className: clsx({
                             [testutilStyles['active-drawer-close-button']]: activeDrawerId,

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":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACtC,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AACpD,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAC1D,OAAO,iBAAiB,MAAM,kDAAkD,CAAC;AAEjF,OAAO,cAAc,MAAM,mDAAmD,CAAC;AAC/E,OAAO,EAAE,eAAe,EAAE,MAAM,uCAAuC,CAAC;AAExE,OAAO,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AAEvD,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzC,OAAO,YAAY,MAAM,4BAA4B,CAAC;AACtD,OAAO,cAAc,MAAM,kCAAkC,CAAC;AAC9D,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAUrC,SAAS,mCAAmC,CAAC,EAC3C,kBAAkB,EAClB,IAAI,EACJ,kBAAkB,GACuB;;IACzC,MAAM,EACJ,UAAU,EACV,yBAAyB,EACzB,QAAQ,EACR,SAAS,EACT,2BAA2B,EAC3B,oBAAoB,EACpB,qBAAqB,EACrB,qBAAqB,EACrB,wBAAwB,EACxB,eAAe,EACf,gBAAgB,GACjB,GAAG,kBAAkB,CAAC;IACvB,MAAM,SAAS,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAC/C,MAAM,cAAc,GAAG,MAAA,kBAAkB,aAAlB,kBAAkB,uBAAlB,kBAAkB,CAAE,EAAE,mCAAI,EAAE,CAAC;IAEpD,MAAM,kBAAkB,GAAG;QACzB,WAAW,EAAE,kBAAkB,CAAC,CAAC,CAAC,MAAA,kBAAkB,CAAC,UAAU,0CAAE,WAAW,CAAC,CAAC,CAAC,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,UAAU;QACrG,OAAO,EAAE,kBAAkB,CAAC,CAAC,CAAC,MAAA,kBAAkB,CAAC,UAAU,0CAAE,UAAU,CAAC,CAAC,CAAC,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,KAAK;KAC5F,CAAC;IAEF,MAAM,gBAAgB,GAAG,kBAAkB,CAAC,eAAe,EAAE,QAAQ,EAAE,SAAS,CAAC,CAAC;IAClF,MAAM,gBAAgB,GAAG,MAAA,CAAC,cAAc,CAAC,CAAC,CAAC,wBAAwB,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,mCAAI,CAAC,CAAC;IAC9F,MAAM,aAAa,GAAG,MAAA,CAAC,cAAc,CAAC,CAAC,CAAC,qBAAqB,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,mCAAI,CAAC,CAAC;IACxF,MAAM,aAAa,GAAG,MAAA,CAAC,cAAc,CAAC,CAAC,CAAC,qBAAqB,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,mCAAI,CAAC,CAAC;IACxF,MAAM,IAAI,GAAG,yBAAyB,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;IAC5D,MAAM,WAAW,GAAG,SAAS,CAAC;QAC5B,YAAY,EAAE,gBAAgB;QAC9B,QAAQ,EAAE,aAAa;QACvB,QAAQ,EAAE,aAAa;QACvB,QAAQ,EAAE,SAAS;QACnB,SAAS,EAAE,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,MAAM;QACvB,QAAQ,EAAE,IAAI,CAAC,EAAE,CAAC,oBAAoB,CAAC,EAAE,EAAE,EAAE,cAAe,EAAE,IAAI,EAAE,CAAC;KACtE,CAAC,CAAC;IACH,MAAM,IAAI,GAAG,eAAe,CAAC,aAAa,EAAE,gBAAgB,EAAE,aAAa,CAAC,CAAC;IAC7E,MAAM,kBAAkB,GAAG,gBAAgB,CAAC,MAAM,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;IAChF,MAAM,gBAAgB,GAAG,CAAC,CAAC,CAAA,kBAAkB,aAAlB,kBAAkB,uBAAlB,kBAAkB,CAAE,OAAO,CAAA,CAAC;IAEvD,OAAO,CACL,oBAAC,UAAU,IAAC,OAAO,EAAE,SAAS,EAAE,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC,IAC/D,KAAK,CAAC,EAAE;;QACP,OAAO,CACL,+BACE,EAAE,EAAE,cAAc,iBACL,CAAC,IAAI,gBACN,kBAAkB,CAAC,OAAO,EACtC,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,eAAe,CAAC,EAAE,MAAM,CAAC,KAAK,CAAC,EAAE,YAAY,CAAC,aAAa,CAAC,EAAE;gBAClG,CAAC,MAAM,CAAC,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI;gBAChC,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC,EAAE,kBAAkB,KAAK,cAAc;gBAC9D,CAAC,cAAc,CAAC,eAAe,CAAC,CAAC,EAAE,IAAI;aACxC,CAAC,EACF,GAAG,EAAE,SAAS,EACd,MAAM,EAAE,CAAC,CAAC,EAAE;gBACV,gEAAgE;gBAChE,kHAAkH;gBAClH,uDAAuD;gBACvD,uHAAuH;gBACvH,qCAAqC;gBACrC,IAAI,CAAC,gBAAgB,EAAE;oBACrB,OAAO;iBACR;gBAED,IAAI,CAAC,CAAC,CAAC,aAAa,IAAI,CAAC,CAAC,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,EAAE;oBAClE,yBAAyB,CAAC,SAAS,EAAE,CAAC;iBACvC;YACH,CAAC,EACD,KAAK,kBACH,SAAS,EAAE,gBAAgB,gBAAgB,QAAQ,SAAS,CAAC,aAAa,KAAK,EAC/E,eAAe,EAAE,gBAAgB,IAC9B,CAAC,CAAC,QAAQ,IAAI;gBACf,CAAC,cAAc,CAAC,UAAU,CAAC,EAAE,GAAG,CAAC,UAAU,EAAE,SAAS,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI;aACvF,CAAC,kBAES,2BAA2B,cAAc,EAAE;YAEvD,CAAC,QAAQ,KAAI,kBAAkB,aAAlB,kBAAkB,uBAAlB,kBAAkB,CAAE,SAAS,CAAA,IAAI,CAC7C,6BAAK,SAAS,EAAE,MAAM,CAAC,eAAe,CAAC;gBACrC,oBAAC,iBAAiB,IAChB,GAAG,EAAE,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,MAAM,EACjB,QAAQ,EAAC,MAAM,EACf,SAAS,EAAE,cAAc,CAAC,gBAAgB,CAAC,EAC3C,SAAS,EAAE,MAAA,kBAAkB,aAAlB,kBAAkB,uBAAlB,kBAAkB,CAAE,UAAU,0CAAE,YAAY,EACvD,YAAY,EAAE,WAAW,CAAC,YAAY,EACtC,SAAS,EAAE,WAAW,CAAC,SAAS,EAChC,aAAa,EAAE,WAAW,CAAC,aAAa,GACxC,CACE,CACP;YACD,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,0BAA0B,CAAC,EAAE,YAAY,CAAC,aAAa,CAAC,CAAC;gBACnF,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,qBAAqB,CAAC,CAAC;oBACjD,oBAAC,cAAc,IACb,SAAS,EAAE,kBAAkB,CAAC,WAAW,EACzC,SAAS,EAAE,IAAI,CAAC;4BACd,CAAC,cAAc,CAAC,4BAA4B,CAAC,CAAC,EAAE,cAAc;yBAC/D,CAAC,EACF,UAAU,EAAC,MAAM,EACjB,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,aAAa,EAC5C,OAAO,EAAE,GAAG,EAAE,CAAC,2BAA2B,CAAC,cAAc,CAAC,EAC1D,GAAG,EAAE,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,KAAK,EAChB,OAAO,EAAC,MAAM,GACd,CACE;gBACN,6BAAK,SAAS,EAAE,MAAM,CAAC,gBAAgB,CAAC,IAAG,kBAAkB,aAAlB,kBAAkB,uBAAlB,kBAAkB,CAAE,OAAO,CAAO,CACzE,CACA,CACT,CAAC;IACJ,CAAC,CACU,CACd,CAAC;AACJ,CAAC;AAED,eAAe,mCAAmC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useRef } from 'react';\nimport { Transition } from 'react-transition-group';\nimport clsx from 'clsx';\n\nimport { InternalButton } from '../../../button/internal';\nimport PanelResizeHandle from '../../../internal/components/panel-resize-handle';\nimport { NonCancelableEventHandler } from '../../../internal/events';\nimport customCssProps from '../../../internal/generated/custom-css-properties';\nimport { getLimitedValue } from '../../../split-panel/utils/size-utils';\nimport { AppLayoutProps } from '../../interfaces';\nimport { getDrawerTopOffset } from '../compute-layout';\nimport { AppLayoutInternals } from '../interfaces';\nimport { useResize } from './use-resize';\n\nimport sharedStyles from '../../resize/styles.css.js';\nimport testutilStyles from '../../test-classes/styles.css.js';\nimport styles from './styles.css.js';\n\ninterface AppLayoutGlobalDrawerImplementationProps {\n  appLayoutInternals: AppLayoutInternals;\n  show: boolean;\n  activeGlobalDrawer:\n    | (AppLayoutProps.Drawer & { onShow?: NonCancelableEventHandler; onHide?: NonCancelableEventHandler })\n    | undefined;\n}\n\nfunction AppLayoutGlobalDrawerImplementation({\n  appLayoutInternals,\n  show,\n  activeGlobalDrawer,\n}: AppLayoutGlobalDrawerImplementationProps) {\n  const {\n    ariaLabels,\n    globalDrawersFocusControl,\n    isMobile,\n    placement,\n    onActiveGlobalDrawersChange,\n    onActiveDrawerResize,\n    minGlobalDrawersSizes,\n    maxGlobalDrawersSizes,\n    activeGlobalDrawersSizes,\n    verticalOffsets,\n    drawersOpenQueue,\n  } = appLayoutInternals;\n  const drawerRef = useRef<HTMLDivElement>(null);\n  const activeDrawerId = activeGlobalDrawer?.id ?? '';\n\n  const computedAriaLabels = {\n    closeButton: activeGlobalDrawer ? activeGlobalDrawer.ariaLabels?.closeButton : ariaLabels?.toolsClose,\n    content: activeGlobalDrawer ? activeGlobalDrawer.ariaLabels?.drawerName : ariaLabels?.tools,\n  };\n\n  const drawersTopOffset = getDrawerTopOffset(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\n  return (\n    <Transition nodeRef={drawerRef} in={show} appear={show} timeout={0}>\n      {state => {\n        return (\n          <aside\n            id={activeDrawerId}\n            aria-hidden={!show}\n            aria-label={computedAriaLabels.content}\n            className={clsx(styles.drawer, styles['drawer-global'], styles[state], sharedStyles['with-motion'], {\n              [styles['drawer-hidden']]: !show,\n              [styles['last-opened']]: lastOpenedDrawerId === activeDrawerId,\n              [testutilStyles['active-drawer']]: show,\n            })}\n            ref={drawerRef}\n            onBlur={e => {\n              // Drawers with trigger buttons follow this restore focus logic:\n              // If a previously focused element exists, restore focus on it; otherwise, focus on the associated trigger button.\n              // This function resets the previously focused element.\n              // If the drawer has no trigger button and loses focus on the previously focused element, it defaults to document.body,\n              // which ideally should never happen.\n              if (!hasTriggerButton) {\n                return;\n              }\n\n              if (!e.relatedTarget || !e.currentTarget.contains(e.relatedTarget)) {\n                globalDrawersFocusControl.loseFocus();\n              }\n            }}\n            style={{\n              blockSize: `calc(100vh - ${drawersTopOffset}px - ${placement.insetBlockEnd}px)`,\n              insetBlockStart: drawersTopOffset,\n              ...(!isMobile && {\n                [customCssProps.drawerSize]: `${['entering', 'entered'].includes(state) ? size : 0}px`,\n              }),\n            }}\n            data-testid={`awsui-app-layout-drawer-${activeDrawerId}`}\n          >\n            {!isMobile && activeGlobalDrawer?.resizable && (\n              <div className={styles['drawer-slider']}>\n                <PanelResizeHandle\n                  ref={refs?.slider}\n                  position=\"side\"\n                  className={testutilStyles['drawers-slider']}\n                  ariaLabel={activeGlobalDrawer?.ariaLabels?.resizeHandle}\n                  ariaValuenow={resizeProps.relativeSize}\n                  onKeyDown={resizeProps.onKeyDown}\n                  onPointerDown={resizeProps.onPointerDown}\n                />\n              </div>\n            )}\n            <div className={clsx(styles['drawer-content-container'], sharedStyles['with-motion'])}>\n              <div className={clsx(styles['drawer-close-button'])}>\n                <InternalButton\n                  ariaLabel={computedAriaLabels.closeButton}\n                  className={clsx({\n                    [testutilStyles['active-drawer-close-button']]: activeDrawerId,\n                  })}\n                  formAction=\"none\"\n                  iconName={isMobile ? 'close' : 'angle-right'}\n                  onClick={() => onActiveGlobalDrawersChange(activeDrawerId)}\n                  ref={refs?.close}\n                  variant=\"icon\"\n                />\n              </div>\n              <div className={styles['drawer-content']}>{activeGlobalDrawer?.content}</div>\n            </div>\n          </aside>\n        );\n      }}\n    </Transition>\n  );\n}\n\nexport default AppLayoutGlobalDrawerImplementation;\n"]}
+{"version":3,"file":"global-drawer.js","sourceRoot":"","sources":["../../../../../src/app-layout/visual-refresh-toolbar/drawer/global-drawer.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useRef } from 'react';\nimport { Transition } from 'react-transition-group';\nimport clsx from 'clsx';\n\nimport { InternalButton } from '../../../button/internal';\nimport PanelResizeHandle from '../../../internal/components/panel-resize-handle';\nimport { NonCancelableEventHandler } from '../../../internal/events';\nimport customCssProps from '../../../internal/generated/custom-css-properties';\nimport { getLimitedValue } from '../../../split-panel/utils/size-utils';\nimport { AppLayoutProps } from '../../interfaces';\nimport { getDrawerTopOffset } from '../compute-layout';\nimport { AppLayoutInternals } from '../interfaces';\nimport { useResize } from './use-resize';\n\nimport sharedStyles from '../../resize/styles.css.js';\nimport testutilStyles from '../../test-classes/styles.css.js';\nimport styles from './styles.css.js';\n\ninterface AppLayoutGlobalDrawerImplementationProps {\n  appLayoutInternals: AppLayoutInternals;\n  show: boolean;\n  activeGlobalDrawer:\n    | (AppLayoutProps.Drawer & { onShow?: NonCancelableEventHandler; onHide?: NonCancelableEventHandler })\n    | undefined;\n}\n\nfunction AppLayoutGlobalDrawerImplementation({\n  appLayoutInternals,\n  show,\n  activeGlobalDrawer,\n}: AppLayoutGlobalDrawerImplementationProps) {\n  const {\n    ariaLabels,\n    globalDrawersFocusControl,\n    isMobile,\n    placement,\n    onActiveGlobalDrawersChange,\n    onActiveDrawerResize,\n    minGlobalDrawersSizes,\n    maxGlobalDrawersSizes,\n    activeGlobalDrawersSizes,\n    verticalOffsets,\n    drawersOpenQueue,\n  } = appLayoutInternals;\n  const drawerRef = useRef<HTMLDivElement>(null);\n  const activeDrawerId = activeGlobalDrawer?.id ?? '';\n\n  const computedAriaLabels = {\n    closeButton: activeGlobalDrawer ? activeGlobalDrawer.ariaLabels?.closeButton : ariaLabels?.toolsClose,\n    content: activeGlobalDrawer ? activeGlobalDrawer.ariaLabels?.drawerName : ariaLabels?.tools,\n  };\n\n  const drawersTopOffset = getDrawerTopOffset(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\n  return (\n    <Transition nodeRef={drawerRef} in={show} appear={show} timeout={0}>\n      {state => {\n        return (\n          <aside\n            id={activeDrawerId}\n            aria-hidden={!show}\n            aria-label={computedAriaLabels.content}\n            className={clsx(\n              styles.drawer,\n              styles['drawer-global'],\n              styles[state],\n              sharedStyles['with-motion-horizontal'],\n              {\n                [styles['drawer-hidden']]: !show,\n                [styles['last-opened']]: lastOpenedDrawerId === activeDrawerId,\n                [testutilStyles['active-drawer']]: show,\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: `calc(100vh - ${drawersTopOffset}px - ${placement.insetBlockEnd}px)`,\n              insetBlockStart: drawersTopOffset,\n              ...(!isMobile && {\n                [customCssProps.drawerSize]: `${['entering', 'entered'].includes(state) ? size : 0}px`,\n              }),\n            }}\n            data-testid={`awsui-app-layout-drawer-${activeDrawerId}`}\n          >\n            {!isMobile && activeGlobalDrawer?.resizable && (\n              <div className={styles['drawer-slider']}>\n                <PanelResizeHandle\n                  ref={refs?.slider}\n                  position=\"side\"\n                  className={testutilStyles['drawers-slider']}\n                  ariaLabel={activeGlobalDrawer?.ariaLabels?.resizeHandle}\n                  ariaValuenow={resizeProps.relativeSize}\n                  onKeyDown={resizeProps.onKeyDown}\n                  onPointerDown={resizeProps.onPointerDown}\n                />\n              </div>\n            )}\n            <div className={clsx(styles['drawer-content-container'], sharedStyles['with-motion-horizontal'])}>\n              <div className={clsx(styles['drawer-close-button'])}>\n                <InternalButton\n                  ariaLabel={computedAriaLabels.closeButton}\n                  className={clsx({\n                    [testutilStyles['active-drawer-close-button']]: activeDrawerId,\n                  })}\n                  formAction=\"none\"\n                  iconName={isMobile ? 'close' : 'angle-right'}\n                  onClick={() => onActiveGlobalDrawersChange(activeDrawerId)}\n                  ref={refs?.close}\n                  variant=\"icon\"\n                />\n              </div>\n              <div className={styles['drawer-content']}>{activeGlobalDrawer?.content}</div>\n            </div>\n          </aside>\n        );\n      }}\n    </Transition>\n  );\n}\n\nexport default AppLayoutGlobalDrawerImplementation;\n"]}

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

@@ -41,7 +41,7 @@ export function AppLayoutDrawerImplementation({ appLayoutInternals }) {
     const lastOpenedDrawerId = (drawersOpenQueue === null || drawersOpenQueue === void 0 ? void 0 : drawersOpenQueue.length) ? drawersOpenQueue[0] : activeDrawerId;
     return (React.createElement(Transition, { nodeRef: drawerRef, in: !!activeDrawer, appear: true, timeout: 0 }, state => {
         var _a;
-        return (React.createElement("aside", { id: activeDrawerId, "aria-hidden": !activeDrawer, "aria-label": computedAriaLabels.content, className: clsx(styles.drawer, sharedStyles['with-motion'], {
+        return (React.createElement("aside", { id: activeDrawerId, "aria-hidden": !activeDrawer, "aria-label": computedAriaLabels.content, className: clsx(styles.drawer, sharedStyles['with-motion-horizontal'], {
                 [styles['last-opened']]: lastOpenedDrawerId === activeDrawerId,
                 [styles.legacy]: isLegacyDrawer,
                 [testutilStyles['active-drawer']]: !toolsOnlyMode && activeDrawerId,
@@ -58,7 +58,7 @@ export function AppLayoutDrawerImplementation({ appLayoutInternals }) {
             })), "data-testid": `awsui-app-layout-drawer-${activeDrawerId}` },
             !isMobile && (activeDrawer === null || activeDrawer === void 0 ? void 0 : activeDrawer.resizable) && (React.createElement("div", { className: styles['drawer-slider'] },
                 React.createElement(PanelResizeHandle, { ref: drawersFocusControl.refs.slider, position: "side", className: testutilStyles['drawers-slider'], ariaLabel: (_a = activeDrawer === null || activeDrawer === void 0 ? void 0 : activeDrawer.ariaLabels) === null || _a === void 0 ? void 0 : _a.resizeHandle, ariaValuenow: resizeProps.relativeSize, onKeyDown: resizeProps.onKeyDown, onPointerDown: resizeProps.onPointerDown }))),
-            React.createElement("div", { className: clsx(styles['drawer-content-container'], sharedStyles['with-motion']) },
+            React.createElement("div", { className: clsx(styles['drawer-content-container'], sharedStyles['with-motion-horizontal']) },
                 React.createElement("div", { className: clsx(styles['drawer-close-button']) },
                     React.createElement(InternalButton, { ariaLabel: computedAriaLabels.closeButton, className: clsx({
                             [testutilStyles['active-drawer-close-button']]: !isToolsDrawer && activeDrawerId,

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"use-resize.d.ts","sourceRoot":"","sources":["../../../../../src/app-layout/visual-refresh-toolbar/drawer/use-resize.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,UAAU,WAAW;IACnB,YAAY,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;IAC1C,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;IAC3C,QAAQ,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;CACtC;AAED,wBAAgB,SAAS,CAAC,EAAE,YAAY,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,WAAW;;;;EAwBzG"}
+{"version":3,"file":"use-resize.d.ts","sourceRoot":"","sources":["../../../../../src/app-layout/visual-refresh-toolbar/drawer/use-resize.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,UAAU,WAAW;IACnB,YAAY,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;IAC1C,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;IAC3C,QAAQ,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;CACtC;AAED,wBAAgB,SAAS,CAAC,EAAE,YAAY,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,WAAW;;;;EAuBzG"}

package/app-layout/visual-refresh-toolbar/drawer/use-resize.js

@@ -13,7 +13,6 @@ export function useResize({ currentWidth, minWidth, maxWidth, panelRef, handleRe
         panelRef,
         handleRef,
         onResize: onResizeHandler,
-        hasTransitions: true,
     };
     const clampedWidth = getLimitedValue(minWidth, currentWidth, maxWidth);
     const relativeSize = ((clampedWidth - minWidth) / (maxWidth - minWidth)) * 100;

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

@@ -1 +1 @@
-{"version":3,"file":"use-resize.js","sourceRoot":"","sources":["../../../../../src/app-layout/visual-refresh-toolbar/drawer/use-resize.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,eAAe,EAAE,MAAM,uCAAuC,CAAC;AAExE,OAAO,EAAE,iBAAiB,EAAE,MAAM,iCAAiC,CAAC;AACpE,OAAO,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AAWlE,MAAM,UAAU,SAAS,CAAC,EAAE,YAAY,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,QAAQ,EAAe;IACxG,MAAM,eAAe,GAAG,CAAC,QAAgB,EAAE,EAAE;QAC3C,MAAM,IAAI,GAAG,eAAe,CAAC,QAAQ,EAAE,QAAQ,EAAE,QAAQ,CAAC,CAAC;QAE3D,IAAI,QAAQ,IAAI,QAAQ,EAAE;YACxB,QAAQ,CAAC,IAAI,CAAC,CAAC;SAChB;IACH,CAAC,CAAC;IAEF,MAAM,gBAAgB,GAAqB;QACzC,QAAQ,EAAE,MAAM;QAChB,QAAQ;QACR,SAAS;QACT,QAAQ,EAAE,eAAe;QACzB,cAAc,EAAE,IAAI;KACrB,CAAC;IAEF,MAAM,YAAY,GAAG,eAAe,CAAC,QAAQ,EAAE,YAAY,EAAE,QAAQ,CAAC,CAAC;IACvE,MAAM,YAAY,GAAG,CAAC,CAAC,YAAY,GAAG,QAAQ,CAAC,GAAG,CAAC,QAAQ,GAAG,QAAQ,CAAC,CAAC,GAAG,GAAG,CAAC;IAE/E,MAAM,aAAa,GAAG,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;IACzD,MAAM,SAAS,GAAG,iBAAiB,CAAC,gBAAgB,CAAC,CAAC;IAEtD,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,YAAY,EAAE,CAAC;AACpD,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\n\nimport { getLimitedValue } from '../../../split-panel/utils/size-utils';\nimport { SizeControlProps } from '../../utils/interfaces';\nimport { useKeyboardEvents } from '../../utils/use-keyboard-events';\nimport { usePointerEvents } from '../../utils/use-pointer-events';\n\ninterface ResizeProps {\n  currentWidth: number;\n  minWidth: number;\n  maxWidth: number;\n  panelRef: React.RefObject<HTMLDivElement>;\n  handleRef: React.RefObject<HTMLDivElement>;\n  onResize: (newWidth: number) => void;\n}\n\nexport function useResize({ currentWidth, minWidth, maxWidth, panelRef, handleRef, onResize }: ResizeProps) {\n  const onResizeHandler = (newWidth: number) => {\n    const size = getLimitedValue(minWidth, newWidth, maxWidth);\n\n    if (maxWidth >= minWidth) {\n      onResize(size);\n    }\n  };\n\n  const sizeControlProps: SizeControlProps = {\n    position: 'side',\n    panelRef,\n    handleRef,\n    onResize: onResizeHandler,\n    hasTransitions: true,\n  };\n\n  const clampedWidth = getLimitedValue(minWidth, currentWidth, maxWidth);\n  const relativeSize = ((clampedWidth - minWidth) / (maxWidth - minWidth)) * 100;\n\n  const onPointerDown = usePointerEvents(sizeControlProps);\n  const onKeyDown = useKeyboardEvents(sizeControlProps);\n\n  return { onKeyDown, onPointerDown, relativeSize };\n}\n"]}
+{"version":3,"file":"use-resize.js","sourceRoot":"","sources":["../../../../../src/app-layout/visual-refresh-toolbar/drawer/use-resize.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,eAAe,EAAE,MAAM,uCAAuC,CAAC;AAExE,OAAO,EAAE,iBAAiB,EAAE,MAAM,iCAAiC,CAAC;AACpE,OAAO,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AAWlE,MAAM,UAAU,SAAS,CAAC,EAAE,YAAY,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,QAAQ,EAAe;IACxG,MAAM,eAAe,GAAG,CAAC,QAAgB,EAAE,EAAE;QAC3C,MAAM,IAAI,GAAG,eAAe,CAAC,QAAQ,EAAE,QAAQ,EAAE,QAAQ,CAAC,CAAC;QAE3D,IAAI,QAAQ,IAAI,QAAQ,EAAE;YACxB,QAAQ,CAAC,IAAI,CAAC,CAAC;SAChB;IACH,CAAC,CAAC;IAEF,MAAM,gBAAgB,GAAqB;QACzC,QAAQ,EAAE,MAAM;QAChB,QAAQ;QACR,SAAS;QACT,QAAQ,EAAE,eAAe;KAC1B,CAAC;IAEF,MAAM,YAAY,GAAG,eAAe,CAAC,QAAQ,EAAE,YAAY,EAAE,QAAQ,CAAC,CAAC;IACvE,MAAM,YAAY,GAAG,CAAC,CAAC,YAAY,GAAG,QAAQ,CAAC,GAAG,CAAC,QAAQ,GAAG,QAAQ,CAAC,CAAC,GAAG,GAAG,CAAC;IAE/E,MAAM,aAAa,GAAG,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;IACzD,MAAM,SAAS,GAAG,iBAAiB,CAAC,gBAAgB,CAAC,CAAC;IAEtD,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,YAAY,EAAE,CAAC;AACpD,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\n\nimport { getLimitedValue } from '../../../split-panel/utils/size-utils';\nimport { SizeControlProps } from '../../utils/interfaces';\nimport { useKeyboardEvents } from '../../utils/use-keyboard-events';\nimport { usePointerEvents } from '../../utils/use-pointer-events';\n\ninterface ResizeProps {\n  currentWidth: number;\n  minWidth: number;\n  maxWidth: number;\n  panelRef: React.RefObject<HTMLDivElement>;\n  handleRef: React.RefObject<HTMLDivElement>;\n  onResize: (newWidth: number) => void;\n}\n\nexport function useResize({ currentWidth, minWidth, maxWidth, panelRef, handleRef, onResize }: ResizeProps) {\n  const onResizeHandler = (newWidth: number) => {\n    const size = getLimitedValue(minWidth, newWidth, maxWidth);\n\n    if (maxWidth >= minWidth) {\n      onResize(size);\n    }\n  };\n\n  const sizeControlProps: SizeControlProps = {\n    position: 'side',\n    panelRef,\n    handleRef,\n    onResize: onResizeHandler,\n  };\n\n  const clampedWidth = getLimitedValue(minWidth, currentWidth, maxWidth);\n  const relativeSize = ((clampedWidth - minWidth) / (maxWidth - minWidth)) * 100;\n\n  const onPointerDown = usePointerEvents(sizeControlProps);\n  const onKeyDown = useKeyboardEvents(sizeControlProps);\n\n  return { onKeyDown, onPointerDown, relativeSize };\n}\n"]}

package/app-layout/visual-refresh-toolbar/navigation/index.js

@@ -23,7 +23,7 @@ export function AppLayoutNavigationImplementation({ appLayoutInternals }) {
     return (React.createElement("nav", { "aria-label": (_a = ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.navigation) !== null && _a !== void 0 ? _a : undefined, className: clsx(styles.navigation, {
             [styles['is-navigation-open']]: navigationOpen,
             [testutilStyles['drawer-closed']]: !navigationOpen,
-        }, testutilStyles.navigation, sharedStyles['with-motion']), "aria-hidden": !navigationOpen, onClick: onNavigationClick, style: {
+        }, testutilStyles.navigation, sharedStyles['with-motion-horizontal']), "aria-hidden": !navigationOpen, onClick: onNavigationClick, style: {
             blockSize: `calc(100vh - ${drawersTopOffset}px - ${placement.insetBlockEnd}px)`,
             insetBlockStart: drawersTopOffset,
         } },

package/app-layout/visual-refresh-toolbar/navigation/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/app-layout/visual-refresh-toolbar/navigation/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,WAAW,EAAE,MAAM,0CAA0C,CAAC;AAEvE,OAAO,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAC1D,OAAO,EAAE,yBAAyB,EAAE,MAAM,2BAA2B,CAAC;AACtE,OAAO,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AAGvD,OAAO,YAAY,MAAM,4BAA4B,CAAC;AACtD,OAAO,cAAc,MAAM,kCAAkC,CAAC;AAC9D,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAMrC,MAAM,UAAU,iCAAiC,CAAC,EAAE,kBAAkB,EAA0C;;IAC9G,MAAM,EACJ,UAAU,EACV,kBAAkB,EAClB,QAAQ,EACR,cAAc,EACd,UAAU,EACV,sBAAsB,EACtB,SAAS,EACT,eAAe,GAChB,GAAG,kBAAkB,CAAC;IAEvB,MAAM,gBAAgB,GAAG,kBAAkB,CAAC,eAAe,EAAE,QAAQ,EAAE,SAAS,CAAC,CAAC;IAElF,0EAA0E;IAC1E,MAAM,iBAAiB,GAAG,CAAC,KAAuB,EAAE,EAAE;QACpD,MAAM,OAAO,GAAG,WAAW,CACzB,KAAK,CAAC,MAAqB,EAC3B,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,OAAO,KAAK,GAAG,IAAI,CAAC,CAAE,IAA0B,CAAC,IAAI,CACnE,CAAC;QACF,IAAI,OAAO,IAAI,QAAQ,EAAE;YACvB,kBAAkB,CAAC,KAAK,CAAC,CAAC;SAC3B;IACH,CAAC,CAAC;IAEF,OAAO,CACL,2CACc,MAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,UAAU,mCAAI,SAAS,EAC/C,SAAS,EAAE,IAAI,CACb,MAAM,CAAC,UAAU,EACjB;YACE,CAAC,MAAM,CAAC,oBAAoB,CAAC,CAAC,EAAE,cAAc;YAC9C,CAAC,cAAc,CAAC,eAAe,CAAC,CAAC,EAAE,CAAC,cAAc;SACnD,EACD,cAAc,CAAC,UAAU,EACzB,YAAY,CAAC,aAAa,CAAC,CAC5B,iBACY,CAAC,cAAc,EAC5B,OAAO,EAAE,iBAAiB,EAC1B,KAAK,EAAE;YACL,SAAS,EAAE,gBAAgB,gBAAgB,QAAQ,SAAS,CAAC,aAAa,KAAK;YAC/E,eAAe,EAAE,gBAAgB;SAClC;QAED,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,kBAAkB,CAAC,CAAC;YAC9C,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,iBAAiB,CAAC,CAAC;gBAC7C,oBAAC,cAAc,IACb,SAAS,EAAE,MAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,eAAe,mCAAI,SAAS,EACnD,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,YAAY,EAC3C,OAAO,EAAE,GAAG,EAAE,CAAC,kBAAkB,CAAC,KAAK,CAAC,EACxC,OAAO,EAAC,MAAM,EACd,UAAU,EAAC,MAAM,EACjB,SAAS,EAAE,cAAc,CAAC,kBAAkB,CAAC,EAC7C,GAAG,EAAE,sBAAsB,CAAC,IAAI,CAAC,KAAK,GACtC,CACE;YACL,UAAU,CACP,CACF,CACP,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,mCAAmC,GAAG,yBAAyB,CAAC,iCAAiC,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport clsx from 'clsx';\n\nimport { findUpUntil } from '@cloudscape-design/component-toolkit/dom';\n\nimport { InternalButton } from '../../../button/internal';\nimport { createWidgetizedComponent } from '../../../internal/widgets';\nimport { getDrawerTopOffset } from '../compute-layout';\nimport { AppLayoutInternals } from '../interfaces';\n\nimport sharedStyles from '../../resize/styles.css.js';\nimport testutilStyles from '../../test-classes/styles.css.js';\nimport styles from './styles.css.js';\n\ninterface AppLayoutNavigationImplementationProps {\n  appLayoutInternals: AppLayoutInternals;\n}\n\nexport function AppLayoutNavigationImplementation({ appLayoutInternals }: AppLayoutNavigationImplementationProps) {\n  const {\n    ariaLabels,\n    onNavigationToggle,\n    isMobile,\n    navigationOpen,\n    navigation,\n    navigationFocusControl,\n    placement,\n    verticalOffsets,\n  } = appLayoutInternals;\n\n  const drawersTopOffset = getDrawerTopOffset(verticalOffsets, isMobile, placement);\n\n  // Close the Navigation drawer on mobile when a user clicks a link inside.\n  const onNavigationClick = (event: React.MouseEvent) => {\n    const hasLink = findUpUntil(\n      event.target as HTMLElement,\n      node => node.tagName === 'A' && !!(node as HTMLAnchorElement).href\n    );\n    if (hasLink && isMobile) {\n      onNavigationToggle(false);\n    }\n  };\n\n  return (\n    <nav\n      aria-label={ariaLabels?.navigation ?? undefined}\n      className={clsx(\n        styles.navigation,\n        {\n          [styles['is-navigation-open']]: navigationOpen,\n          [testutilStyles['drawer-closed']]: !navigationOpen,\n        },\n        testutilStyles.navigation,\n        sharedStyles['with-motion']\n      )}\n      aria-hidden={!navigationOpen}\n      onClick={onNavigationClick}\n      style={{\n        blockSize: `calc(100vh - ${drawersTopOffset}px - ${placement.insetBlockEnd}px)`,\n        insetBlockStart: drawersTopOffset,\n      }}\n    >\n      <div className={clsx(styles['animated-content'])}>\n        <div className={clsx(styles['hide-navigation'])}>\n          <InternalButton\n            ariaLabel={ariaLabels?.navigationClose ?? undefined}\n            iconName={isMobile ? 'close' : 'angle-left'}\n            onClick={() => onNavigationToggle(false)}\n            variant=\"icon\"\n            formAction=\"none\"\n            className={testutilStyles['navigation-close']}\n            ref={navigationFocusControl.refs.close}\n          />\n        </div>\n        {navigation}\n      </div>\n    </nav>\n  );\n}\n\nexport const createWidgetizedAppLayoutNavigation = createWidgetizedComponent(AppLayoutNavigationImplementation);\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/app-layout/visual-refresh-toolbar/navigation/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,WAAW,EAAE,MAAM,0CAA0C,CAAC;AAEvE,OAAO,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAC1D,OAAO,EAAE,yBAAyB,EAAE,MAAM,2BAA2B,CAAC;AACtE,OAAO,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AAGvD,OAAO,YAAY,MAAM,4BAA4B,CAAC;AACtD,OAAO,cAAc,MAAM,kCAAkC,CAAC;AAC9D,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAMrC,MAAM,UAAU,iCAAiC,CAAC,EAAE,kBAAkB,EAA0C;;IAC9G,MAAM,EACJ,UAAU,EACV,kBAAkB,EAClB,QAAQ,EACR,cAAc,EACd,UAAU,EACV,sBAAsB,EACtB,SAAS,EACT,eAAe,GAChB,GAAG,kBAAkB,CAAC;IAEvB,MAAM,gBAAgB,GAAG,kBAAkB,CAAC,eAAe,EAAE,QAAQ,EAAE,SAAS,CAAC,CAAC;IAElF,0EAA0E;IAC1E,MAAM,iBAAiB,GAAG,CAAC,KAAuB,EAAE,EAAE;QACpD,MAAM,OAAO,GAAG,WAAW,CACzB,KAAK,CAAC,MAAqB,EAC3B,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,OAAO,KAAK,GAAG,IAAI,CAAC,CAAE,IAA0B,CAAC,IAAI,CACnE,CAAC;QACF,IAAI,OAAO,IAAI,QAAQ,EAAE;YACvB,kBAAkB,CAAC,KAAK,CAAC,CAAC;SAC3B;IACH,CAAC,CAAC;IAEF,OAAO,CACL,2CACc,MAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,UAAU,mCAAI,SAAS,EAC/C,SAAS,EAAE,IAAI,CACb,MAAM,CAAC,UAAU,EACjB;YACE,CAAC,MAAM,CAAC,oBAAoB,CAAC,CAAC,EAAE,cAAc;YAC9C,CAAC,cAAc,CAAC,eAAe,CAAC,CAAC,EAAE,CAAC,cAAc;SACnD,EACD,cAAc,CAAC,UAAU,EACzB,YAAY,CAAC,wBAAwB,CAAC,CACvC,iBACY,CAAC,cAAc,EAC5B,OAAO,EAAE,iBAAiB,EAC1B,KAAK,EAAE;YACL,SAAS,EAAE,gBAAgB,gBAAgB,QAAQ,SAAS,CAAC,aAAa,KAAK;YAC/E,eAAe,EAAE,gBAAgB;SAClC;QAED,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,kBAAkB,CAAC,CAAC;YAC9C,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,iBAAiB,CAAC,CAAC;gBAC7C,oBAAC,cAAc,IACb,SAAS,EAAE,MAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,eAAe,mCAAI,SAAS,EACnD,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,YAAY,EAC3C,OAAO,EAAE,GAAG,EAAE,CAAC,kBAAkB,CAAC,KAAK,CAAC,EACxC,OAAO,EAAC,MAAM,EACd,UAAU,EAAC,MAAM,EACjB,SAAS,EAAE,cAAc,CAAC,kBAAkB,CAAC,EAC7C,GAAG,EAAE,sBAAsB,CAAC,IAAI,CAAC,KAAK,GACtC,CACE;YACL,UAAU,CACP,CACF,CACP,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,mCAAmC,GAAG,yBAAyB,CAAC,iCAAiC,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport clsx from 'clsx';\n\nimport { findUpUntil } from '@cloudscape-design/component-toolkit/dom';\n\nimport { InternalButton } from '../../../button/internal';\nimport { createWidgetizedComponent } from '../../../internal/widgets';\nimport { getDrawerTopOffset } from '../compute-layout';\nimport { AppLayoutInternals } from '../interfaces';\n\nimport sharedStyles from '../../resize/styles.css.js';\nimport testutilStyles from '../../test-classes/styles.css.js';\nimport styles from './styles.css.js';\n\ninterface AppLayoutNavigationImplementationProps {\n  appLayoutInternals: AppLayoutInternals;\n}\n\nexport function AppLayoutNavigationImplementation({ appLayoutInternals }: AppLayoutNavigationImplementationProps) {\n  const {\n    ariaLabels,\n    onNavigationToggle,\n    isMobile,\n    navigationOpen,\n    navigation,\n    navigationFocusControl,\n    placement,\n    verticalOffsets,\n  } = appLayoutInternals;\n\n  const drawersTopOffset = getDrawerTopOffset(verticalOffsets, isMobile, placement);\n\n  // Close the Navigation drawer on mobile when a user clicks a link inside.\n  const onNavigationClick = (event: React.MouseEvent) => {\n    const hasLink = findUpUntil(\n      event.target as HTMLElement,\n      node => node.tagName === 'A' && !!(node as HTMLAnchorElement).href\n    );\n    if (hasLink && isMobile) {\n      onNavigationToggle(false);\n    }\n  };\n\n  return (\n    <nav\n      aria-label={ariaLabels?.navigation ?? undefined}\n      className={clsx(\n        styles.navigation,\n        {\n          [styles['is-navigation-open']]: navigationOpen,\n          [testutilStyles['drawer-closed']]: !navigationOpen,\n        },\n        testutilStyles.navigation,\n        sharedStyles['with-motion-horizontal']\n      )}\n      aria-hidden={!navigationOpen}\n      onClick={onNavigationClick}\n      style={{\n        blockSize: `calc(100vh - ${drawersTopOffset}px - ${placement.insetBlockEnd}px)`,\n        insetBlockStart: drawersTopOffset,\n      }}\n    >\n      <div className={clsx(styles['animated-content'])}>\n        <div className={clsx(styles['hide-navigation'])}>\n          <InternalButton\n            ariaLabel={ariaLabels?.navigationClose ?? undefined}\n            iconName={isMobile ? 'close' : 'angle-left'}\n            onClick={() => onNavigationToggle(false)}\n            variant=\"icon\"\n            formAction=\"none\"\n            className={testutilStyles['navigation-close']}\n            ref={navigationFocusControl.refs.close}\n          />\n        </div>\n        {navigation}\n      </div>\n    </nav>\n  );\n}\n\nexport const createWidgetizedAppLayoutNavigation = createWidgetizedComponent(AppLayoutNavigationImplementation);\n"]}

package/app-layout/visual-refresh-toolbar/skeleton/index.js

@@ -23,7 +23,7 @@ export const SkeletonLayout = React.forwardRef(({ style, notifications, headerVa
             [customCssProps.toolsWidth]: `${toolsWidth}px`,
         } },
         toolbar,
-        navigation && (React.createElement("div", { className: clsx(styles.navigation, !navigationOpen && styles['panel-hidden'], toolsOpen && styles['unfocusable-mobile'], sharedStyles['with-motion']) }, navigation)),
+        navigation && (React.createElement("div", { className: clsx(styles.navigation, !navigationOpen && styles['panel-hidden'], toolsOpen && styles['unfocusable-mobile'], sharedStyles['with-motion-horizontal']) }, navigation)),
         React.createElement("main", { className: clsx(styles['main-landmark'], isMobile && anyPanelOpen && styles['unfocusable-mobile']) },
             notifications && (React.createElement("div", { className: clsx(styles['notifications-background'], headerVariant === 'high-contrast' && highContrastHeaderClassName) })),
             notifications,
@@ -32,7 +32,7 @@ export const SkeletonLayout = React.forwardRef(({ style, notifications, headerVa
                 React.createElement("div", { className: clsx(styles.content, testutilStyles.content) }, content)),
             bottomSplitPanel && (React.createElement("div", { className: clsx(styles['split-panel-bottom']), style: { insetBlockEnd: placement.insetBlockEnd } }, bottomSplitPanel))),
         sideSplitPanel && (React.createElement("div", { className: clsx(styles['split-panel-side'], !splitPanelOpen && styles['panel-hidden']) }, sideSplitPanel)),
-        React.createElement("div", { className: clsx(styles.tools, !toolsOpen && styles['panel-hidden'], sharedStyles['with-motion'], navigationOpen && !toolsOpen && styles['unfocusable-mobile'], toolsOpen && styles['tools-open']) }, tools),
+        React.createElement("div", { className: clsx(styles.tools, !toolsOpen && styles['panel-hidden'], sharedStyles['with-motion-horizontal'], navigationOpen && !toolsOpen && styles['unfocusable-mobile'], toolsOpen && styles['tools-open']) }, tools),
         React.createElement("div", { className: clsx(styles['global-tools'], !globalToolsOpen && styles['panel-hidden']) }, globalTools)));
 });
 //# sourceMappingURL=index.js.map

package/app-layout/visual-refresh-toolbar/skeleton/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/app-layout/visual-refresh-toolbar/skeleton/index.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 from 'react';\nimport clsx from 'clsx';\n\nimport customCssProps from '../../../internal/generated/custom-css-properties';\nimport { useMobile } from '../../../internal/hooks/use-mobile';\nimport { highContrastHeaderClassName } from '../../../internal/utils/content-header-utils';\nimport { AppLayoutPropsWithDefaults } from '../../interfaces';\n\nimport sharedStyles from '../../resize/styles.css.js';\nimport testutilStyles from '../../test-classes/styles.css.js';\nimport styles from './styles.css.js';\n\nconst contentTypeCustomWidths: Array<string | undefined> = ['dashboard', 'cards', 'table'];\n\ninterface SkeletonLayoutProps\n  extends Pick<\n    AppLayoutPropsWithDefaults,\n    | 'notifications'\n    | 'headerVariant'\n    | 'contentHeader'\n    | 'content'\n    | 'contentType'\n    | 'maxContentWidth'\n    | 'disableContentPaddings'\n    | 'navigation'\n    | 'navigationOpen'\n    | 'navigationWidth'\n    | 'tools'\n    | 'toolsOpen'\n    | 'toolsWidth'\n    | 'placement'\n  > {\n  style?: React.CSSProperties;\n  toolbar?: React.ReactNode;\n  splitPanelOpen?: boolean;\n  sideSplitPanel?: React.ReactNode;\n  bottomSplitPanel?: React.ReactNode;\n  globalTools?: React.ReactNode;\n  globalToolsOpen?: boolean;\n}\n\nexport const SkeletonLayout = React.forwardRef<HTMLDivElement, SkeletonLayoutProps>(\n  (\n    {\n      style,\n      notifications,\n      headerVariant,\n      contentHeader,\n      content,\n      navigation,\n      navigationOpen,\n      navigationWidth,\n      tools,\n      globalTools,\n      toolsOpen,\n      toolsWidth,\n      toolbar,\n      sideSplitPanel,\n      bottomSplitPanel,\n      splitPanelOpen,\n      placement,\n      contentType,\n      maxContentWidth,\n      disableContentPaddings,\n      globalToolsOpen,\n    },\n    ref\n  ) => {\n    const isMobile = useMobile();\n    const isMaxWidth = maxContentWidth === Number.MAX_VALUE || maxContentWidth === Number.MAX_SAFE_INTEGER;\n    const anyPanelOpen = navigationOpen || toolsOpen;\n    return (\n      <div\n        ref={ref}\n        className={clsx(styles.root, testutilStyles.root, {\n          [styles['has-adaptive-widths-default']]: !contentTypeCustomWidths.includes(contentType),\n          [styles['has-adaptive-widths-dashboard']]: contentType === 'dashboard',\n        })}\n        style={{\n          minBlockSize: `calc(100vh - ${placement.insetBlockStart + placement.insetBlockEnd}px)`,\n          [customCssProps.maxContentWidth]: isMaxWidth ? '100%' : maxContentWidth ? `${maxContentWidth}px` : '',\n          [customCssProps.navigationWidth]: `${navigationWidth}px`,\n          [customCssProps.toolsWidth]: `${toolsWidth}px`,\n        }}\n      >\n        {toolbar}\n        {navigation && (\n          <div\n            className={clsx(\n              styles.navigation,\n              !navigationOpen && styles['panel-hidden'],\n              toolsOpen && styles['unfocusable-mobile'],\n              sharedStyles['with-motion']\n            )}\n          >\n            {navigation}\n          </div>\n        )}\n        <main className={clsx(styles['main-landmark'], isMobile && anyPanelOpen && styles['unfocusable-mobile'])}>\n          {notifications && (\n            <div\n              className={clsx(\n                styles['notifications-background'],\n                headerVariant === 'high-contrast' && highContrastHeaderClassName\n              )}\n            ></div>\n          )}\n          {notifications}\n          <div\n            className={clsx(styles.main, { [styles['main-disable-paddings']]: disableContentPaddings })}\n            style={style}\n          >\n            {contentHeader && <div className={styles['content-header']}>{contentHeader}</div>}\n            <div className={clsx(styles.content, testutilStyles.content)}>{content}</div>\n          </div>\n          {bottomSplitPanel && (\n            <div className={clsx(styles['split-panel-bottom'])} style={{ insetBlockEnd: placement.insetBlockEnd }}>\n              {bottomSplitPanel}\n            </div>\n          )}\n        </main>\n        {sideSplitPanel && (\n          <div className={clsx(styles['split-panel-side'], !splitPanelOpen && styles['panel-hidden'])}>\n            {sideSplitPanel}\n          </div>\n        )}\n        <div\n          className={clsx(\n            styles.tools,\n            !toolsOpen && styles['panel-hidden'],\n            sharedStyles['with-motion'],\n            navigationOpen && !toolsOpen && styles['unfocusable-mobile'],\n            toolsOpen && styles['tools-open']\n          )}\n        >\n          {tools}\n        </div>\n        <div className={clsx(styles['global-tools'], !globalToolsOpen && styles['panel-hidden'])}>{globalTools}</div>\n      </div>\n    );\n  }\n);\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/app-layout/visual-refresh-toolbar/skeleton/index.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 from 'react';\nimport clsx from 'clsx';\n\nimport customCssProps from '../../../internal/generated/custom-css-properties';\nimport { useMobile } from '../../../internal/hooks/use-mobile';\nimport { highContrastHeaderClassName } from '../../../internal/utils/content-header-utils';\nimport { AppLayoutPropsWithDefaults } from '../../interfaces';\n\nimport sharedStyles from '../../resize/styles.css.js';\nimport testutilStyles from '../../test-classes/styles.css.js';\nimport styles from './styles.css.js';\n\nconst contentTypeCustomWidths: Array<string | undefined> = ['dashboard', 'cards', 'table'];\n\ninterface SkeletonLayoutProps\n  extends Pick<\n    AppLayoutPropsWithDefaults,\n    | 'notifications'\n    | 'headerVariant'\n    | 'contentHeader'\n    | 'content'\n    | 'contentType'\n    | 'maxContentWidth'\n    | 'disableContentPaddings'\n    | 'navigation'\n    | 'navigationOpen'\n    | 'navigationWidth'\n    | 'tools'\n    | 'toolsOpen'\n    | 'toolsWidth'\n    | 'placement'\n  > {\n  style?: React.CSSProperties;\n  toolbar?: React.ReactNode;\n  splitPanelOpen?: boolean;\n  sideSplitPanel?: React.ReactNode;\n  bottomSplitPanel?: React.ReactNode;\n  globalTools?: React.ReactNode;\n  globalToolsOpen?: boolean;\n}\n\nexport const SkeletonLayout = React.forwardRef<HTMLDivElement, SkeletonLayoutProps>(\n  (\n    {\n      style,\n      notifications,\n      headerVariant,\n      contentHeader,\n      content,\n      navigation,\n      navigationOpen,\n      navigationWidth,\n      tools,\n      globalTools,\n      toolsOpen,\n      toolsWidth,\n      toolbar,\n      sideSplitPanel,\n      bottomSplitPanel,\n      splitPanelOpen,\n      placement,\n      contentType,\n      maxContentWidth,\n      disableContentPaddings,\n      globalToolsOpen,\n    },\n    ref\n  ) => {\n    const isMobile = useMobile();\n    const isMaxWidth = maxContentWidth === Number.MAX_VALUE || maxContentWidth === Number.MAX_SAFE_INTEGER;\n    const anyPanelOpen = navigationOpen || toolsOpen;\n    return (\n      <div\n        ref={ref}\n        className={clsx(styles.root, testutilStyles.root, {\n          [styles['has-adaptive-widths-default']]: !contentTypeCustomWidths.includes(contentType),\n          [styles['has-adaptive-widths-dashboard']]: contentType === 'dashboard',\n        })}\n        style={{\n          minBlockSize: `calc(100vh - ${placement.insetBlockStart + placement.insetBlockEnd}px)`,\n          [customCssProps.maxContentWidth]: isMaxWidth ? '100%' : maxContentWidth ? `${maxContentWidth}px` : '',\n          [customCssProps.navigationWidth]: `${navigationWidth}px`,\n          [customCssProps.toolsWidth]: `${toolsWidth}px`,\n        }}\n      >\n        {toolbar}\n        {navigation && (\n          <div\n            className={clsx(\n              styles.navigation,\n              !navigationOpen && styles['panel-hidden'],\n              toolsOpen && styles['unfocusable-mobile'],\n              sharedStyles['with-motion-horizontal']\n            )}\n          >\n            {navigation}\n          </div>\n        )}\n        <main className={clsx(styles['main-landmark'], isMobile && anyPanelOpen && styles['unfocusable-mobile'])}>\n          {notifications && (\n            <div\n              className={clsx(\n                styles['notifications-background'],\n                headerVariant === 'high-contrast' && highContrastHeaderClassName\n              )}\n            ></div>\n          )}\n          {notifications}\n          <div\n            className={clsx(styles.main, { [styles['main-disable-paddings']]: disableContentPaddings })}\n            style={style}\n          >\n            {contentHeader && <div className={styles['content-header']}>{contentHeader}</div>}\n            <div className={clsx(styles.content, testutilStyles.content)}>{content}</div>\n          </div>\n          {bottomSplitPanel && (\n            <div className={clsx(styles['split-panel-bottom'])} style={{ insetBlockEnd: placement.insetBlockEnd }}>\n              {bottomSplitPanel}\n            </div>\n          )}\n        </main>\n        {sideSplitPanel && (\n          <div className={clsx(styles['split-panel-side'], !splitPanelOpen && styles['panel-hidden'])}>\n            {sideSplitPanel}\n          </div>\n        )}\n        <div\n          className={clsx(\n            styles.tools,\n            !toolsOpen && styles['panel-hidden'],\n            sharedStyles['with-motion-horizontal'],\n            navigationOpen && !toolsOpen && styles['unfocusable-mobile'],\n            toolsOpen && styles['tools-open']\n          )}\n        >\n          {tools}\n        </div>\n        <div className={clsx(styles['global-tools'], !globalToolsOpen && styles['panel-hidden'])}>{globalTools}</div>\n      </div>\n    );\n  }\n);\n"]}

package/button-group/icon-button-item.d.ts

@@ -1,12 +1,12 @@
 import React from 'react';
 import { ButtonProps } from '../button/interfaces.js';
-import { CancelableEventHandler, ClickDetail } from '../internal/events/index.js';
+import { CancelableEventHandler } from '../internal/events/index.js';
 import { ButtonGroupProps } from './interfaces.js';
 declare const IconButtonItem: React.ForwardRefExoticComponent<{
     item: ButtonGroupProps.IconButton;
     showTooltip: boolean;
     showFeedback: boolean;
-    onItemClick?: CancelableEventHandler<ClickDetail> | undefined;
+    onItemClick?: CancelableEventHandler<ButtonGroupProps.ItemClickDetails> | undefined;
 } & React.RefAttributes<ButtonProps.Ref>>;
 export default IconButtonItem;
 //# sourceMappingURL=icon-button-item.d.ts.map

package/button-group/icon-button-item.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"icon-button-item.d.ts","sourceRoot":"","sources":["../../../src/button-group/icon-button-item.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAK1C,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAGtD,OAAO,EAAE,sBAAsB,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAC;AAElF,OAAO,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAInD,QAAA,MAAM,cAAc;UAQR,iBAAiB,UAAU;iBACpB,OAAO;kBACN,OAAO;;yCA8C1B,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"icon-button-item.d.ts","sourceRoot":"","sources":["../../../src/button-group/icon-button-item.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAK1C,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAGtD,OAAO,EAAE,sBAAsB,EAAuB,MAAM,6BAA6B,CAAC;AAE1F,OAAO,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAInD,QAAA,MAAM,cAAc;UAQR,iBAAiB,UAAU;iBACpB,OAAO;kBACN,OAAO;;yCAkD1B,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/button-group/icon-button-item.js

@@ -5,6 +5,7 @@ import clsx from 'clsx';
 import { warnOnce } from '@cloudscape-design/component-toolkit/internal';
 import { InternalButton } from '../button/internal.js';
 import Tooltip from '../internal/components/tooltip/index.js';
+import { fireCancelableEvent } from '../internal/events/index.js';
 import InternalLiveRegion from '../live-region/internal.js';
 import testUtilStyles from './test-classes/styles.css.js';
 const IconButtonItem = forwardRef(({ item, showTooltip, showFeedback, onItemClick, }, ref) => {
@@ -13,9 +14,11 @@ const IconButtonItem = forwardRef(({ item, showTooltip, showFeedback, onItemClic
     if (!hasIcon) {
         warnOnce('ButtonGroup', `Missing icon for item with id: ${item.id}`);
     }
+    const canShowTooltip = Boolean(showTooltip && !item.disabled && !item.loading);
+    const canShowFeedback = Boolean(showTooltip && showFeedback && item.popoverFeedback);
     return (React.createElement("div", { ref: containerRef },
-        React.createElement(InternalButton, { variant: "icon", loading: item.loading, loadingText: item.loadingText, disabled: item.disabled, iconName: hasIcon ? item.iconName : 'close', iconAlt: item.text, iconSvg: item.iconSvg, ariaLabel: item.text, onClick: onItemClick, ref: ref, "data-testid": item.id, "data-itemid": item.id, className: clsx(testUtilStyles.item, testUtilStyles['button-group-item']), __title: "" }, item.text),
-        showTooltip && !item.disabled && !item.loading && (!showFeedback || item.popoverFeedback) && (React.createElement(Tooltip, { trackRef: containerRef, trackKey: item.id, value: (showFeedback && React.createElement(InternalLiveRegion, { tagName: "span" }, item.popoverFeedback)) ||
+        React.createElement(InternalButton, { variant: "icon", loading: item.loading, loadingText: item.loadingText, disabled: item.disabled, __focusable: canShowFeedback, iconName: hasIcon ? item.iconName : 'close', iconUrl: item.iconUrl, iconSvg: item.iconSvg, iconAlt: item.text, ariaLabel: item.text, onClick: event => fireCancelableEvent(onItemClick, { id: item.id }, event), ref: ref, "data-testid": item.id, "data-itemid": item.id, className: clsx(testUtilStyles.item, testUtilStyles['button-group-item']), __title: "" }, item.text),
+        (canShowTooltip || canShowFeedback) && (React.createElement(Tooltip, { trackRef: containerRef, trackKey: item.id, value: (showFeedback && React.createElement(InternalLiveRegion, { tagName: "span" }, item.popoverFeedback)) ||
                 item.text, className: clsx(testUtilStyles.tooltip, testUtilStyles['button-group-tooltip']) }))));
 });
 export default IconButtonItem;