@cloudscape-design/components 3.0.730 → 3.0.731

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

@@ -0,0 +1,179 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/* stylelint-disable @cloudscape-design/no-motion-outside-of-mixin, selector-combinator-disallowed-list, selector-pseudo-class-no-unknown, selector-class-pattern */
+/* stylelint-enable @cloudscape-design/no-motion-outside-of-mixin, selector-combinator-disallowed-list, selector-pseudo-class-no-unknown, selector-class-pattern */
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/* 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_1fglm_142:not(#\9) {
+    transition: var(--motion-duration-refresh-only-medium-nf6485, 165ms);
+    transition-property: border-color, opacity, block-size, inline-size;
+  }
+}
+@media (min-width: 689px) and (prefers-reduced-motion: reduce) {
+  .awsui_with-motion_b18tp_1fglm_142:not(#\9) {
+    animation: none;
+    transition: none;
+  }
+}
+@media (min-width: 689px) {
+  .awsui-motion-disabled .awsui_with-motion_b18tp_1fglm_142:not(#\9), .awsui-mode-entering .awsui_with-motion_b18tp_1fglm_142:not(#\9) {
+    animation: none;
+    transition: none;
+  }
+}
+
+/* stylelint-disable selector-combinator-disallowed-list, selector-max-type, selector-max-universal */
+.awsui_resize-active_b18tp_1fglm_161 *:not(#\9) {
+  -webkit-user-select: none;
+          user-select: none;
+}
+.awsui_resize-active_b18tp_1fglm_161 * .awsui_with-motion_b18tp_1fglm_142:not(#\9) {
+  transition: none;
+  animation: none;
+}
+.awsui_resize-active_b18tp_1fglm_161 iframe:not(#\9) {
+  pointer-events: none;
+}
+.awsui_resize-side_b18tp_1fglm_171 *:not(#\9) {
+  cursor: ew-resize;
+}
+.awsui_resize-bottom_b18tp_1fglm_174 *:not(#\9) {
+  cursor: ns-resize;
+}
+
+/* stylelint-enable selector-combinator-disallowed-list, selector-max-type, selector-max-universal */

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

@@ -0,0 +1,10 @@
+
+    // es-module interop with Babel and Typescript
+    Object.defineProperty(exports, "__esModule", { value: true });
+    module.exports.default = {
+  "with-motion": "awsui_with-motion_b18tp_1fglm_142",
+  "resize-active": "awsui_resize-active_b18tp_1fglm_161",
+  "resize-side": "awsui_resize-side_b18tp_1fglm_171",
+  "resize-bottom": "awsui_resize-bottom_b18tp_1fglm_174"
+};
+  

package/app-layout/styles.css.js

@@ -1,21 +1,17 @@
 
     import './styles.scoped.css';
     export default {
-  "resize-active": "awsui_resize-active_lm6vo_lnp81_150",
-  "resize-side": "awsui_resize-side_lm6vo_lnp81_156",
-  "resize-bottom": "awsui_resize-bottom_lm6vo_lnp81_159",
-  "with-motion": "awsui_with-motion_lm6vo_lnp81_164",
-  "root": "awsui_root_lm6vo_lnp81_179",
-  "root-no-scroll": "awsui_root-no-scroll_lm6vo_lnp81_186",
-  "layout": "awsui_layout_lm6vo_lnp81_191",
-  "layout-no-scroll": "awsui_layout-no-scroll_lm6vo_lnp81_197",
-  "layout-main": "awsui_layout-main_lm6vo_lnp81_201",
-  "layout-main-scrollable": "awsui_layout-main-scrollable_lm6vo_lnp81_207",
-  "unfocusable": "awsui_unfocusable_lm6vo_lnp81_212",
-  "breadcrumbs-desktop": "awsui_breadcrumbs-desktop_lm6vo_lnp81_216",
-  "content-header-wrapper": "awsui_content-header-wrapper_lm6vo_lnp81_221",
-  "content-wrapper": "awsui_content-wrapper_lm6vo_lnp81_225",
-  "content-overlapped": "awsui_content-overlapped_lm6vo_lnp81_229",
-  "content-extra-top-padding": "awsui_content-extra-top-padding_lm6vo_lnp81_233"
+  "root": "awsui_root_lm6vo_1sk5h_149",
+  "root-no-scroll": "awsui_root-no-scroll_lm6vo_1sk5h_156",
+  "layout": "awsui_layout_lm6vo_1sk5h_161",
+  "layout-no-scroll": "awsui_layout-no-scroll_lm6vo_1sk5h_167",
+  "layout-main": "awsui_layout-main_lm6vo_1sk5h_171",
+  "layout-main-scrollable": "awsui_layout-main-scrollable_lm6vo_1sk5h_177",
+  "unfocusable": "awsui_unfocusable_lm6vo_1sk5h_182",
+  "breadcrumbs-desktop": "awsui_breadcrumbs-desktop_lm6vo_1sk5h_186",
+  "content-header-wrapper": "awsui_content-header-wrapper_lm6vo_1sk5h_191",
+  "content-wrapper": "awsui_content-wrapper_lm6vo_1sk5h_195",
+  "content-overlapped": "awsui_content-overlapped_lm6vo_1sk5h_199",
+  "content-extra-top-padding": "awsui_content-extra-top-padding_lm6vo_1sk5h_203"
 };
   

package/app-layout/styles.scoped.css

@@ -146,91 +146,60 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
-/* stylelint-disable selector-combinator-disallowed-list, selector-max-type, selector-max-universal */
-.awsui_resize-active_lm6vo_lnp81_150 *:not(#\9) {
-  -webkit-user-select: none;
-          user-select: none;
-}
-.awsui_resize-active_lm6vo_lnp81_150 iframe:not(#\9) {
-  pointer-events: none;
-}
-.awsui_resize-side_lm6vo_lnp81_156 *:not(#\9) {
-  cursor: ew-resize;
-}
-.awsui_resize-bottom_lm6vo_lnp81_159 *:not(#\9) {
-  cursor: ns-resize;
-}
-
-/* stylelint-enable selector-combinator-disallowed-list, selector-max-type, selector-max-universal */
-.awsui_with-motion_lm6vo_lnp81_164:not(#\9) {
-  transition: var(--motion-duration-refresh-only-fast-4jn2d7, 115ms);
-  transition-property: border-color, opacity, width;
-}
-@media (prefers-reduced-motion: reduce) {
-  .awsui_with-motion_lm6vo_lnp81_164:not(#\9) {
-    animation: none;
-    transition: none;
-  }
-}
-.awsui-motion-disabled .awsui_with-motion_lm6vo_lnp81_164:not(#\9), .awsui-mode-entering .awsui_with-motion_lm6vo_lnp81_164:not(#\9) {
-  animation: none;
-  transition: none;
-}
-
-.awsui_root_lm6vo_lnp81_179:not(#\9) {
+.awsui_root_lm6vo_1sk5h_149:not(#\9) {
   display: flex;
   flex-direction: column;
   position: relative;
   color: var(--color-text-body-default-at06ol, #000716);
 }
 
-.awsui_root-no-scroll_lm6vo_lnp81_186:not(#\9) {
+.awsui_root-no-scroll_lm6vo_1sk5h_156:not(#\9) {
   position: relative;
   z-index: 1;
 }
 
-.awsui_layout_lm6vo_lnp81_191:not(#\9) {
+.awsui_layout_lm6vo_1sk5h_161:not(#\9) {
   flex: 1 1 auto;
   display: flex;
   align-items: stretch;
   background-color: var(--color-background-layout-main-nx09lr, #ffffff);
 }
-.awsui_layout-no-scroll_lm6vo_lnp81_197:not(#\9) {
+.awsui_layout-no-scroll_lm6vo_1sk5h_167:not(#\9) {
   overflow: hidden;
 }
 
-.awsui_layout-main_lm6vo_lnp81_201:not(#\9) {
+.awsui_layout-main_lm6vo_1sk5h_171:not(#\9) {
   flex: 1;
   min-inline-size: 0;
   background-color: var(--color-background-layout-main-nx09lr, #ffffff);
   position: relative;
 }
-.awsui_layout-main-scrollable_lm6vo_lnp81_207:not(#\9) {
+.awsui_layout-main-scrollable_lm6vo_1sk5h_177:not(#\9) {
   overflow: auto;
 }
 
 /* stylelint-disable-next-line selector-combinator-disallowed-list, selector-max-universal */
-.awsui_unfocusable_lm6vo_lnp81_212 *:not(#\9) {
+.awsui_unfocusable_lm6vo_1sk5h_182 *:not(#\9) {
   visibility: hidden;
 }
 
-.awsui_breadcrumbs-desktop_lm6vo_lnp81_216:not(#\9) {
+.awsui_breadcrumbs-desktop_lm6vo_1sk5h_186:not(#\9) {
   padding-block-start: var(--space-scaled-m-mo5yse, 16px);
   padding-block-end: var(--space-scaled-s-aqzyko, 12px);
 }
 
-.awsui_content-header-wrapper_lm6vo_lnp81_221:not(#\9) {
+.awsui_content-header-wrapper_lm6vo_1sk5h_191:not(#\9) {
   padding-block-end: var(--space-content-header-padding-bottom-y2enua, 16px);
 }
 
-.awsui_content-wrapper_lm6vo_lnp81_225:not(#\9) {
+.awsui_content-wrapper_lm6vo_1sk5h_195:not(#\9) {
   padding-block-end: var(--space-layout-content-bottom-noqzmw, 40px);
 }
 
-.awsui_content-overlapped_lm6vo_lnp81_229:not(#\9) {
+.awsui_content-overlapped_lm6vo_1sk5h_199:not(#\9) {
   margin-block-start: calc(-1 * var(--space-dark-header-overlap-distance-lxpp0s, 36px));
 }
 
-.awsui_content-extra-top-padding_lm6vo_lnp81_233:not(#\9) {
+.awsui_content-extra-top-padding_lm6vo_1sk5h_203:not(#\9) {
   padding-block-start: var(--space-scaled-m-mo5yse, 16px);
 }

package/app-layout/styles.selectors.js

@@ -2,21 +2,17 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "resize-active": "awsui_resize-active_lm6vo_lnp81_150",
-  "resize-side": "awsui_resize-side_lm6vo_lnp81_156",
-  "resize-bottom": "awsui_resize-bottom_lm6vo_lnp81_159",
-  "with-motion": "awsui_with-motion_lm6vo_lnp81_164",
-  "root": "awsui_root_lm6vo_lnp81_179",
-  "root-no-scroll": "awsui_root-no-scroll_lm6vo_lnp81_186",
-  "layout": "awsui_layout_lm6vo_lnp81_191",
-  "layout-no-scroll": "awsui_layout-no-scroll_lm6vo_lnp81_197",
-  "layout-main": "awsui_layout-main_lm6vo_lnp81_201",
-  "layout-main-scrollable": "awsui_layout-main-scrollable_lm6vo_lnp81_207",
-  "unfocusable": "awsui_unfocusable_lm6vo_lnp81_212",
-  "breadcrumbs-desktop": "awsui_breadcrumbs-desktop_lm6vo_lnp81_216",
-  "content-header-wrapper": "awsui_content-header-wrapper_lm6vo_lnp81_221",
-  "content-wrapper": "awsui_content-wrapper_lm6vo_lnp81_225",
-  "content-overlapped": "awsui_content-overlapped_lm6vo_lnp81_229",
-  "content-extra-top-padding": "awsui_content-extra-top-padding_lm6vo_lnp81_233"
+  "root": "awsui_root_lm6vo_1sk5h_149",
+  "root-no-scroll": "awsui_root-no-scroll_lm6vo_1sk5h_156",
+  "layout": "awsui_layout_lm6vo_1sk5h_161",
+  "layout-no-scroll": "awsui_layout-no-scroll_lm6vo_1sk5h_167",
+  "layout-main": "awsui_layout-main_lm6vo_1sk5h_171",
+  "layout-main-scrollable": "awsui_layout-main-scrollable_lm6vo_1sk5h_177",
+  "unfocusable": "awsui_unfocusable_lm6vo_1sk5h_182",
+  "breadcrumbs-desktop": "awsui_breadcrumbs-desktop_lm6vo_1sk5h_186",
+  "content-header-wrapper": "awsui_content-header-wrapper_lm6vo_1sk5h_191",
+  "content-wrapper": "awsui_content-wrapper_lm6vo_1sk5h_195",
+  "content-overlapped": "awsui_content-overlapped_lm6vo_1sk5h_199",
+  "content-extra-top-padding": "awsui_content-extra-top-padding_lm6vo_1sk5h_203"
 };
   

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

@@ -98,7 +98,7 @@ export function useDrawers({ drawers, activeDrawerId: controlledActiveDrawerId,
     activeDrawerIdResolved = (_a = activeDrawer === null || activeDrawer === void 0 ? void 0 : activeDrawer.id) !== null && _a !== void 0 ? _a : null;
     const activeDrawerSize = activeDrawerIdResolved
         ? (_c = (_b = drawerSizes[activeDrawerIdResolved]) !== null && _b !== void 0 ? _b : activeDrawer === null || activeDrawer === void 0 ? void 0 : activeDrawer.defaultSize) !== null && _c !== void 0 ? _c : toolsProps.toolsWidth
-        : 0;
+        : toolsProps.toolsWidth;
     const minDrawerSize = Math.min((_d = activeDrawer === null || activeDrawer === void 0 ? void 0 : activeDrawer.defaultSize) !== null && _d !== void 0 ? _d : 290, 290);
     return {
         ariaLabelsWithDrawers: ariaLabels,

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

@@ -1 +1 @@
-{"version":3,"file":"use-drawers.js","sourceRoot":"","sources":["../../../../src/app-layout/utils/use-drawers.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useEffect, useRef, useState } from 'react';\n\nimport { useStableCallback } from '@cloudscape-design/component-toolkit/internal';\n\nimport { fireNonCancelableEvent } from '../../internal/events';\nimport { useControllable } from '../../internal/hooks/use-controllable';\nimport { awsuiPluginsInternal } from '../../internal/plugins/api';\nimport { sortByPriority } from '../../internal/plugins/helpers/utils';\nimport { AppLayoutProps } from '../interfaces';\nimport { convertRuntimeDrawers, DrawersLayout } from '../runtime-api';\nimport { togglesConfig } from '../toggles';\n\nexport const TOOLS_DRAWER_ID = 'awsui-internal-tools';\n\ninterface ToolsProps {\n  toolsHide: boolean | undefined;\n  toolsOpen: boolean | undefined;\n  toolsWidth: number;\n  tools: React.ReactNode | undefined;\n  onToolsToggle: (newOpen: boolean) => void;\n  ariaLabels: AppLayoutProps.Labels | undefined;\n  disableDrawersMerge?: boolean;\n}\n\nfunction getToolsDrawerItem(props: ToolsProps): AppLayoutProps.Drawer | null {\n  if (props.toolsHide) {\n    return null;\n  }\n  const { iconName, getLabels } = togglesConfig.tools;\n  const { mainLabel, closeLabel, openLabel } = getLabels(props.ariaLabels);\n  return {\n    id: TOOLS_DRAWER_ID,\n    content: props.tools,\n    resizable: false,\n    ariaLabels: {\n      triggerButton: openLabel,\n      closeButton: closeLabel,\n      drawerName: mainLabel ?? '',\n    },\n    trigger: {\n      iconName: iconName,\n    },\n  };\n}\n\nfunction useRuntimeDrawers(\n  disableRuntimeDrawers: boolean | undefined,\n  activeDrawerId: string | null,\n  onActiveDrawerChange: (newDrawerId: string | null) => void\n) {\n  const [runtimeDrawers, setRuntimeDrawers] = useState<DrawersLayout>({ before: [], after: [] });\n  const onActiveDrawerChangeStable = useStableCallback(onActiveDrawerChange);\n\n  const drawerWasOpenRef = useRef(false);\n  drawerWasOpenRef.current = drawerWasOpenRef.current || !!activeDrawerId;\n\n  useEffect(() => {\n    if (disableRuntimeDrawers) {\n      return;\n    }\n    const unsubscribe = awsuiPluginsInternal.appLayout.onDrawersRegistered(drawers => {\n      setRuntimeDrawers(convertRuntimeDrawers(drawers));\n      if (!drawerWasOpenRef.current) {\n        const defaultActiveDrawer = sortByPriority(drawers).find(drawer => drawer.defaultActive);\n        if (defaultActiveDrawer) {\n          onActiveDrawerChangeStable(defaultActiveDrawer.id);\n        }\n      }\n    });\n    return () => {\n      unsubscribe();\n      setRuntimeDrawers({ before: [], after: [] });\n    };\n  }, [disableRuntimeDrawers, onActiveDrawerChangeStable]);\n\n  return runtimeDrawers;\n}\n\nfunction applyToolsDrawer(toolsProps: ToolsProps, runtimeDrawers: DrawersLayout) {\n  const drawers = [...runtimeDrawers.before, ...runtimeDrawers.after];\n  if (drawers.length === 0 && toolsProps.disableDrawersMerge) {\n    return null;\n  }\n  const toolsItem = getToolsDrawerItem(toolsProps);\n  if (toolsItem) {\n    drawers.unshift(toolsItem);\n  }\n\n  return drawers;\n}\n\ntype UseDrawersProps = Pick<AppLayoutProps, 'drawers' | 'activeDrawerId' | 'onDrawerChange'> & {\n  __disableRuntimeDrawers?: boolean;\n};\n\nexport function useDrawers(\n  {\n    drawers,\n    activeDrawerId: controlledActiveDrawerId,\n    onDrawerChange,\n    __disableRuntimeDrawers: disableRuntimeDrawers,\n  }: UseDrawersProps,\n  ariaLabels: AppLayoutProps['ariaLabels'],\n  toolsProps: ToolsProps\n) {\n  const [activeDrawerId = null, setActiveDrawerId] = useControllable(controlledActiveDrawerId, onDrawerChange, null, {\n    componentName: 'AppLayout',\n    controlledProp: 'activeDrawerId',\n    changeHandler: 'onChange',\n  });\n  const [drawerSizes, setDrawerSizes] = useState<Record<string, number>>({});\n\n  function onActiveDrawerResize({ id, size }: { id: string; size: number }) {\n    setDrawerSizes(oldSizes => ({ ...oldSizes, [id]: size }));\n    fireNonCancelableEvent(activeDrawer?.onResize, { id, size });\n  }\n\n  function onActiveDrawerChange(newDrawerId: string | null) {\n    setActiveDrawerId(newDrawerId);\n    if (hasOwnDrawers) {\n      fireNonCancelableEvent(onDrawerChange, { activeDrawerId: newDrawerId });\n    } else if (!toolsProps.toolsHide) {\n      toolsProps.onToolsToggle(newDrawerId === TOOLS_DRAWER_ID);\n    }\n  }\n\n  const hasOwnDrawers = !!drawers;\n  const runtimeDrawers = useRuntimeDrawers(disableRuntimeDrawers, activeDrawerId, onActiveDrawerChange);\n  const combinedDrawers = drawers\n    ? [...runtimeDrawers.before, ...drawers, ...runtimeDrawers.after]\n    : applyToolsDrawer(toolsProps, runtimeDrawers);\n  // support toolsOpen in runtime-drawers-only mode\n  let activeDrawerIdResolved = toolsProps?.toolsOpen && !hasOwnDrawers ? TOOLS_DRAWER_ID : activeDrawerId;\n  const activeDrawer = combinedDrawers?.find(drawer => drawer.id === activeDrawerIdResolved);\n  // ensure that id is only defined when the drawer exists\n  activeDrawerIdResolved = activeDrawer?.id ?? null;\n\n  const activeDrawerSize = activeDrawerIdResolved\n    ? drawerSizes[activeDrawerIdResolved] ?? activeDrawer?.defaultSize ?? toolsProps.toolsWidth\n    : 0;\n  const minDrawerSize = Math.min(activeDrawer?.defaultSize ?? 290, 290);\n\n  return {\n    ariaLabelsWithDrawers: ariaLabels,\n    drawers: combinedDrawers || undefined,\n    activeDrawer,\n    activeDrawerId: activeDrawerIdResolved,\n    activeDrawerSize,\n    minDrawerSize,\n    onActiveDrawerChange,\n    onActiveDrawerResize,\n  };\n}\n"]}
+{"version":3,"file":"use-drawers.js","sourceRoot":"","sources":["../../../../src/app-layout/utils/use-drawers.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useEffect, useRef, useState } from 'react';\n\nimport { useStableCallback } from '@cloudscape-design/component-toolkit/internal';\n\nimport { fireNonCancelableEvent } from '../../internal/events';\nimport { useControllable } from '../../internal/hooks/use-controllable';\nimport { awsuiPluginsInternal } from '../../internal/plugins/api';\nimport { sortByPriority } from '../../internal/plugins/helpers/utils';\nimport { AppLayoutProps } from '../interfaces';\nimport { convertRuntimeDrawers, DrawersLayout } from '../runtime-api';\nimport { togglesConfig } from '../toggles';\n\nexport const TOOLS_DRAWER_ID = 'awsui-internal-tools';\n\ninterface ToolsProps {\n  toolsHide: boolean | undefined;\n  toolsOpen: boolean | undefined;\n  toolsWidth: number;\n  tools: React.ReactNode | undefined;\n  onToolsToggle: (newOpen: boolean) => void;\n  ariaLabels: AppLayoutProps.Labels | undefined;\n  disableDrawersMerge?: boolean;\n}\n\nfunction getToolsDrawerItem(props: ToolsProps): AppLayoutProps.Drawer | null {\n  if (props.toolsHide) {\n    return null;\n  }\n  const { iconName, getLabels } = togglesConfig.tools;\n  const { mainLabel, closeLabel, openLabel } = getLabels(props.ariaLabels);\n  return {\n    id: TOOLS_DRAWER_ID,\n    content: props.tools,\n    resizable: false,\n    ariaLabels: {\n      triggerButton: openLabel,\n      closeButton: closeLabel,\n      drawerName: mainLabel ?? '',\n    },\n    trigger: {\n      iconName: iconName,\n    },\n  };\n}\n\nfunction useRuntimeDrawers(\n  disableRuntimeDrawers: boolean | undefined,\n  activeDrawerId: string | null,\n  onActiveDrawerChange: (newDrawerId: string | null) => void\n) {\n  const [runtimeDrawers, setRuntimeDrawers] = useState<DrawersLayout>({ before: [], after: [] });\n  const onActiveDrawerChangeStable = useStableCallback(onActiveDrawerChange);\n\n  const drawerWasOpenRef = useRef(false);\n  drawerWasOpenRef.current = drawerWasOpenRef.current || !!activeDrawerId;\n\n  useEffect(() => {\n    if (disableRuntimeDrawers) {\n      return;\n    }\n    const unsubscribe = awsuiPluginsInternal.appLayout.onDrawersRegistered(drawers => {\n      setRuntimeDrawers(convertRuntimeDrawers(drawers));\n      if (!drawerWasOpenRef.current) {\n        const defaultActiveDrawer = sortByPriority(drawers).find(drawer => drawer.defaultActive);\n        if (defaultActiveDrawer) {\n          onActiveDrawerChangeStable(defaultActiveDrawer.id);\n        }\n      }\n    });\n    return () => {\n      unsubscribe();\n      setRuntimeDrawers({ before: [], after: [] });\n    };\n  }, [disableRuntimeDrawers, onActiveDrawerChangeStable]);\n\n  return runtimeDrawers;\n}\n\nfunction applyToolsDrawer(toolsProps: ToolsProps, runtimeDrawers: DrawersLayout) {\n  const drawers = [...runtimeDrawers.before, ...runtimeDrawers.after];\n  if (drawers.length === 0 && toolsProps.disableDrawersMerge) {\n    return null;\n  }\n  const toolsItem = getToolsDrawerItem(toolsProps);\n  if (toolsItem) {\n    drawers.unshift(toolsItem);\n  }\n\n  return drawers;\n}\n\ntype UseDrawersProps = Pick<AppLayoutProps, 'drawers' | 'activeDrawerId' | 'onDrawerChange'> & {\n  __disableRuntimeDrawers?: boolean;\n};\n\nexport function useDrawers(\n  {\n    drawers,\n    activeDrawerId: controlledActiveDrawerId,\n    onDrawerChange,\n    __disableRuntimeDrawers: disableRuntimeDrawers,\n  }: UseDrawersProps,\n  ariaLabels: AppLayoutProps['ariaLabels'],\n  toolsProps: ToolsProps\n) {\n  const [activeDrawerId = null, setActiveDrawerId] = useControllable(controlledActiveDrawerId, onDrawerChange, null, {\n    componentName: 'AppLayout',\n    controlledProp: 'activeDrawerId',\n    changeHandler: 'onChange',\n  });\n  const [drawerSizes, setDrawerSizes] = useState<Record<string, number>>({});\n\n  function onActiveDrawerResize({ id, size }: { id: string; size: number }) {\n    setDrawerSizes(oldSizes => ({ ...oldSizes, [id]: size }));\n    fireNonCancelableEvent(activeDrawer?.onResize, { id, size });\n  }\n\n  function onActiveDrawerChange(newDrawerId: string | null) {\n    setActiveDrawerId(newDrawerId);\n    if (hasOwnDrawers) {\n      fireNonCancelableEvent(onDrawerChange, { activeDrawerId: newDrawerId });\n    } else if (!toolsProps.toolsHide) {\n      toolsProps.onToolsToggle(newDrawerId === TOOLS_DRAWER_ID);\n    }\n  }\n\n  const hasOwnDrawers = !!drawers;\n  const runtimeDrawers = useRuntimeDrawers(disableRuntimeDrawers, activeDrawerId, onActiveDrawerChange);\n  const combinedDrawers = drawers\n    ? [...runtimeDrawers.before, ...drawers, ...runtimeDrawers.after]\n    : applyToolsDrawer(toolsProps, runtimeDrawers);\n  // support toolsOpen in runtime-drawers-only mode\n  let activeDrawerIdResolved = toolsProps?.toolsOpen && !hasOwnDrawers ? TOOLS_DRAWER_ID : activeDrawerId;\n  const activeDrawer = combinedDrawers?.find(drawer => drawer.id === activeDrawerIdResolved);\n  // ensure that id is only defined when the drawer exists\n  activeDrawerIdResolved = activeDrawer?.id ?? null;\n\n  const activeDrawerSize = activeDrawerIdResolved\n    ? drawerSizes[activeDrawerIdResolved] ?? activeDrawer?.defaultSize ?? toolsProps.toolsWidth\n    : toolsProps.toolsWidth;\n  const minDrawerSize = Math.min(activeDrawer?.defaultSize ?? 290, 290);\n\n  return {\n    ariaLabelsWithDrawers: ariaLabels,\n    drawers: combinedDrawers || undefined,\n    activeDrawer,\n    activeDrawerId: activeDrawerIdResolved,\n    activeDrawerSize,\n    minDrawerSize,\n    onActiveDrawerChange,\n    onActiveDrawerResize,\n  };\n}\n"]}

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

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 import { useCallback } from 'react';
 import { getIsRtl, getLogicalBoundingClientRect, getLogicalClientX, } from '@cloudscape-design/component-toolkit/internal';
-import styles from '../styles.css.js';
+import styles from '../resize/styles.css.js';
 export const usePointerEvents = ({ position, panelRef, handleRef, onResize, hasTransitions = false, }) => {
     const onDocumentPointerMove = useCallback((event) => {
         if (!panelRef || !panelRef.current || !handleRef || !handleRef.current) {

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":"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,kBAAkB,CAAC;AAEtC,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,EAC/B,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,cAAc,GAAG,KAAK,GACL,EAAE,EAAE;IACrB,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,QAAQ,CAAC,OAAO,CAAC,SAAS,CAAC,MAAM,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC,CAAC;QAEzD,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,IAAI,cAAc,EAAE;YAClB,QAAQ,CAAC,OAAO,CAAC,SAAS,CAAC,GAAG,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC,CAAC;SACvD;QACD,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,EAAE,cAAc,CAAC,CAAC,CAAC;IAEhE,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 '../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":"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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"]}

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

@@ -8,8 +8,9 @@ interface HorizontalLayoutInput {
     splitPanelOpen: boolean;
     splitPanelPosition: 'side' | 'bottom' | undefined;
     splitPanelSize: number;
+    isMobile: boolean;
 }
-export declare function computeHorizontalLayout({ navigationOpen, navigationWidth, placement, minContentWidth, activeDrawerSize, splitPanelOpen, splitPanelPosition, splitPanelSize, }: HorizontalLayoutInput): {
+export declare function computeHorizontalLayout({ navigationOpen, navigationWidth, placement, minContentWidth, activeDrawerSize, splitPanelOpen, splitPanelPosition, splitPanelSize, isMobile, }: HorizontalLayoutInput): {
     splitPanelPosition: "bottom" | "side";
     splitPanelForcedPosition: boolean;
     sideSplitPanelSize: number;

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

@@ -1 +1 @@
-{"version":3,"file":"compute-layout.d.ts","sourceRoot":"","sources":["../../../../src/app-layout/visual-refresh-toolbar/compute-layout.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,0BAA0B,EAAE,MAAM,eAAe,CAAC;AAG3D,UAAU,qBAAqB;IAC7B,cAAc,EAAE,OAAO,CAAC;IACxB,eAAe,EAAE,MAAM,CAAC;IACxB,SAAS,EAAE,0BAA0B,CAAC,WAAW,CAAC,CAAC;IACnD,eAAe,EAAE,MAAM,CAAC;IACxB,gBAAgB,EAAE,MAAM,CAAC;IACzB,cAAc,EAAE,OAAO,CAAC;IACxB,kBAAkB,EAAE,MAAM,GAAG,QAAQ,GAAG,SAAS,CAAC;IAClD,cAAc,EAAE,MAAM,CAAC;CACxB;AAED,wBAAgB,uBAAuB,CAAC,EACtC,cAAc,EACd,eAAe,EACf,SAAS,EACT,eAAe,EACf,gBAAgB,EAChB,cAAc,EACd,kBAAkB,EAClB,cAAc,GACf,EAAE,qBAAqB;;;;;;EAsBvB;AAED,UAAU,mBAAmB;IAC3B,SAAS,EAAE,MAAM,CAAC;IAClB,iBAAiB,EAAE,OAAO,CAAC;IAC3B,aAAa,EAAE,MAAM,CAAC;IACtB,mBAAmB,EAAE,OAAO,CAAC;IAC7B,mBAAmB,EAAE,MAAM,CAAC;CAC7B;AAED,MAAM,WAAW,oBAAoB;IACnC,OAAO,EAAE,MAAM,CAAC;IAChB,aAAa,EAAE,MAAM,CAAC;IACtB,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,wBAAgB,qBAAqB,CAAC,EACpC,SAAS,EACT,iBAAiB,EACjB,aAAa,EACb,mBAAmB,EACnB,mBAAmB,GACpB,EAAE,mBAAmB,GAAG,oBAAoB,CAY5C"}
+{"version":3,"file":"compute-layout.d.ts","sourceRoot":"","sources":["../../../../src/app-layout/visual-refresh-toolbar/compute-layout.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,0BAA0B,EAAE,MAAM,eAAe,CAAC;AAG3D,UAAU,qBAAqB;IAC7B,cAAc,EAAE,OAAO,CAAC;IACxB,eAAe,EAAE,MAAM,CAAC;IACxB,SAAS,EAAE,0BAA0B,CAAC,WAAW,CAAC,CAAC;IACnD,eAAe,EAAE,MAAM,CAAC;IACxB,gBAAgB,EAAE,MAAM,CAAC;IACzB,cAAc,EAAE,OAAO,CAAC;IACxB,kBAAkB,EAAE,MAAM,GAAG,QAAQ,GAAG,SAAS,CAAC;IAClD,cAAc,EAAE,MAAM,CAAC;IACvB,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED,wBAAgB,uBAAuB,CAAC,EACtC,cAAc,EACd,eAAe,EACf,SAAS,EACT,eAAe,EACf,gBAAgB,EAChB,cAAc,EACd,kBAAkB,EAClB,cAAc,EACd,QAAQ,GACT,EAAE,qBAAqB;;;;;;EAsBvB;AAED,UAAU,mBAAmB;IAC3B,SAAS,EAAE,MAAM,CAAC;IAClB,iBAAiB,EAAE,OAAO,CAAC;IAC3B,aAAa,EAAE,MAAM,CAAC;IACtB,mBAAmB,EAAE,OAAO,CAAC;IAC7B,mBAAmB,EAAE,MAAM,CAAC;CAC7B;AAED,MAAM,WAAW,oBAAoB;IACnC,OAAO,EAAE,MAAM,CAAC;IAChB,aAAa,EAAE,MAAM,CAAC;IACtB,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,wBAAgB,qBAAqB,CAAC,EACpC,SAAS,EACT,iBAAiB,EACjB,aAAa,EACb,mBAAmB,EACnB,mBAAmB,GACpB,EAAE,mBAAmB,GAAG,oBAAoB,CAY5C"}

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

@@ -1,11 +1,11 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 import { SPLIT_PANEL_MIN_WIDTH } from '../split-panel';
-export function computeHorizontalLayout({ navigationOpen, navigationWidth, placement, minContentWidth, activeDrawerSize, splitPanelOpen, splitPanelPosition, splitPanelSize, }) {
+export function computeHorizontalLayout({ navigationOpen, navigationWidth, placement, minContentWidth, activeDrawerSize, splitPanelOpen, splitPanelPosition, splitPanelSize, isMobile, }) {
     const contentPadding = 2 * 24; // space-xl
     const activeNavigationWidth = navigationOpen ? navigationWidth : 0;
     const resizableSpaceAvailable = Math.max(0, placement.inlineSize - minContentWidth - contentPadding - activeNavigationWidth);
-    const splitPanelForcedPosition = resizableSpaceAvailable - activeDrawerSize < SPLIT_PANEL_MIN_WIDTH;
+    const splitPanelForcedPosition = resizableSpaceAvailable - activeDrawerSize < SPLIT_PANEL_MIN_WIDTH || isMobile;
     const resolvedSplitPanelPosition = splitPanelForcedPosition ? 'bottom' : splitPanelPosition !== null && splitPanelPosition !== void 0 ? splitPanelPosition : 'bottom';
     const sideSplitPanelSize = resolvedSplitPanelPosition === 'side' && splitPanelOpen ? splitPanelSize !== null && splitPanelSize !== void 0 ? splitPanelSize : 0 : 0;
     const maxSplitPanelSize = resizableSpaceAvailable - activeDrawerSize;

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

@@ -1 +1 @@
-{"version":3,"file":"compute-layout.js","sourceRoot":"","sources":["../../../../src/app-layout/visual-refresh-toolbar/compute-layout.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AAGtC,OAAO,EAAE,qBAAqB,EAAE,MAAM,gBAAgB,CAAC;AAavD,MAAM,UAAU,uBAAuB,CAAC,EACtC,cAAc,EACd,eAAe,EACf,SAAS,EACT,eAAe,EACf,gBAAgB,EAChB,cAAc,EACd,kBAAkB,EAClB,cAAc,GACQ;IACtB,MAAM,cAAc,GAAG,CAAC,GAAG,EAAE,CAAC,CAAC,WAAW;IAC1C,MAAM,qBAAqB,GAAG,cAAc,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,CAAC;IAEnE,MAAM,uBAAuB,GAAG,IAAI,CAAC,GAAG,CACtC,CAAC,EACD,SAAS,CAAC,UAAU,GAAG,eAAe,GAAG,cAAc,GAAG,qBAAqB,CAChF,CAAC;IAEF,MAAM,wBAAwB,GAAG,uBAAuB,GAAG,gBAAgB,GAAG,qBAAqB,CAAC;IACpG,MAAM,0BAA0B,GAAG,wBAAwB,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,kBAAkB,aAAlB,kBAAkB,cAAlB,kBAAkB,GAAI,QAAQ,CAAC;IACxG,MAAM,kBAAkB,GAAG,0BAA0B,KAAK,MAAM,IAAI,cAAc,CAAC,CAAC,CAAC,cAAc,aAAd,cAAc,cAAd,cAAc,GAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAC7G,MAAM,iBAAiB,GAAG,uBAAuB,GAAG,gBAAgB,CAAC;IACrE,MAAM,aAAa,GAAG,uBAAuB,GAAG,kBAAkB,CAAC;IAEnE,OAAO;QACL,kBAAkB,EAAE,0BAA0B;QAC9C,wBAAwB;QACxB,kBAAkB;QAClB,iBAAiB;QACjB,aAAa;KACd,CAAC;AACJ,CAAC;AAgBD,MAAM,UAAU,qBAAqB,CAAC,EACpC,SAAS,EACT,iBAAiB,EACjB,aAAa,EACb,mBAAmB,EACnB,mBAAmB,GACC;IACpB,MAAM,OAAO,GAAG,SAAS,CAAC;IAC1B,IAAI,aAAa,GAAG,SAAS,CAAC;IAC9B,IAAI,iBAAiB,EAAE;QACrB,aAAa,IAAI,aAAa,CAAC;KAChC;IACD,IAAI,MAAM,GAAG,aAAa,CAAC;IAC3B,IAAI,mBAAmB,EAAE;QACvB,MAAM,IAAI,mBAAmB,CAAC;KAC/B;IAED,OAAO,EAAE,OAAO,EAAE,aAAa,EAAE,MAAM,EAAE,CAAC;AAC5C,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { AppLayoutPropsWithDefaults } from '../interfaces';\nimport { SPLIT_PANEL_MIN_WIDTH } from '../split-panel';\n\ninterface HorizontalLayoutInput {\n  navigationOpen: boolean;\n  navigationWidth: number;\n  placement: AppLayoutPropsWithDefaults['placement'];\n  minContentWidth: number;\n  activeDrawerSize: number;\n  splitPanelOpen: boolean;\n  splitPanelPosition: 'side' | 'bottom' | undefined;\n  splitPanelSize: number;\n}\n\nexport function computeHorizontalLayout({\n  navigationOpen,\n  navigationWidth,\n  placement,\n  minContentWidth,\n  activeDrawerSize,\n  splitPanelOpen,\n  splitPanelPosition,\n  splitPanelSize,\n}: HorizontalLayoutInput) {\n  const contentPadding = 2 * 24; // space-xl\n  const activeNavigationWidth = navigationOpen ? navigationWidth : 0;\n\n  const resizableSpaceAvailable = Math.max(\n    0,\n    placement.inlineSize - minContentWidth - contentPadding - activeNavigationWidth\n  );\n\n  const splitPanelForcedPosition = resizableSpaceAvailable - activeDrawerSize < SPLIT_PANEL_MIN_WIDTH;\n  const resolvedSplitPanelPosition = splitPanelForcedPosition ? 'bottom' : splitPanelPosition ?? 'bottom';\n  const sideSplitPanelSize = resolvedSplitPanelPosition === 'side' && splitPanelOpen ? splitPanelSize ?? 0 : 0;\n  const maxSplitPanelSize = resizableSpaceAvailable - activeDrawerSize;\n  const maxDrawerSize = resizableSpaceAvailable - sideSplitPanelSize;\n\n  return {\n    splitPanelPosition: resolvedSplitPanelPosition,\n    splitPanelForcedPosition,\n    sideSplitPanelSize,\n    maxSplitPanelSize,\n    maxDrawerSize,\n  };\n}\n\ninterface VerticalLayoutInput {\n  topOffset: number;\n  hasVisibleToolbar: boolean;\n  toolbarHeight: number;\n  stickyNotifications: boolean;\n  notificationsHeight: number;\n}\n\nexport interface VerticalLayoutOutput {\n  toolbar: number;\n  notifications: number;\n  header: number;\n}\n\nexport function computeVerticalLayout({\n  topOffset,\n  hasVisibleToolbar,\n  toolbarHeight,\n  stickyNotifications,\n  notificationsHeight,\n}: VerticalLayoutInput): VerticalLayoutOutput {\n  const toolbar = topOffset;\n  let notifications = topOffset;\n  if (hasVisibleToolbar) {\n    notifications += toolbarHeight;\n  }\n  let header = notifications;\n  if (stickyNotifications) {\n    header += notificationsHeight;\n  }\n\n  return { toolbar, notifications, header };\n}\n"]}
+{"version":3,"file":"compute-layout.js","sourceRoot":"","sources":["../../../../src/app-layout/visual-refresh-toolbar/compute-layout.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AAGtC,OAAO,EAAE,qBAAqB,EAAE,MAAM,gBAAgB,CAAC;AAcvD,MAAM,UAAU,uBAAuB,CAAC,EACtC,cAAc,EACd,eAAe,EACf,SAAS,EACT,eAAe,EACf,gBAAgB,EAChB,cAAc,EACd,kBAAkB,EAClB,cAAc,EACd,QAAQ,GACc;IACtB,MAAM,cAAc,GAAG,CAAC,GAAG,EAAE,CAAC,CAAC,WAAW;IAC1C,MAAM,qBAAqB,GAAG,cAAc,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,CAAC;IAEnE,MAAM,uBAAuB,GAAG,IAAI,CAAC,GAAG,CACtC,CAAC,EACD,SAAS,CAAC,UAAU,GAAG,eAAe,GAAG,cAAc,GAAG,qBAAqB,CAChF,CAAC;IAEF,MAAM,wBAAwB,GAAG,uBAAuB,GAAG,gBAAgB,GAAG,qBAAqB,IAAI,QAAQ,CAAC;IAChH,MAAM,0BAA0B,GAAG,wBAAwB,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,kBAAkB,aAAlB,kBAAkB,cAAlB,kBAAkB,GAAI,QAAQ,CAAC;IACxG,MAAM,kBAAkB,GAAG,0BAA0B,KAAK,MAAM,IAAI,cAAc,CAAC,CAAC,CAAC,cAAc,aAAd,cAAc,cAAd,cAAc,GAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAC7G,MAAM,iBAAiB,GAAG,uBAAuB,GAAG,gBAAgB,CAAC;IACrE,MAAM,aAAa,GAAG,uBAAuB,GAAG,kBAAkB,CAAC;IAEnE,OAAO;QACL,kBAAkB,EAAE,0BAA0B;QAC9C,wBAAwB;QACxB,kBAAkB;QAClB,iBAAiB;QACjB,aAAa;KACd,CAAC;AACJ,CAAC;AAgBD,MAAM,UAAU,qBAAqB,CAAC,EACpC,SAAS,EACT,iBAAiB,EACjB,aAAa,EACb,mBAAmB,EACnB,mBAAmB,GACC;IACpB,MAAM,OAAO,GAAG,SAAS,CAAC;IAC1B,IAAI,aAAa,GAAG,SAAS,CAAC;IAC9B,IAAI,iBAAiB,EAAE;QACrB,aAAa,IAAI,aAAa,CAAC;KAChC;IACD,IAAI,MAAM,GAAG,aAAa,CAAC;IAC3B,IAAI,mBAAmB,EAAE;QACvB,MAAM,IAAI,mBAAmB,CAAC;KAC/B;IAED,OAAO,EAAE,OAAO,EAAE,aAAa,EAAE,MAAM,EAAE,CAAC;AAC5C,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { AppLayoutPropsWithDefaults } from '../interfaces';\nimport { SPLIT_PANEL_MIN_WIDTH } from '../split-panel';\n\ninterface HorizontalLayoutInput {\n  navigationOpen: boolean;\n  navigationWidth: number;\n  placement: AppLayoutPropsWithDefaults['placement'];\n  minContentWidth: number;\n  activeDrawerSize: number;\n  splitPanelOpen: boolean;\n  splitPanelPosition: 'side' | 'bottom' | undefined;\n  splitPanelSize: number;\n  isMobile: boolean;\n}\n\nexport function computeHorizontalLayout({\n  navigationOpen,\n  navigationWidth,\n  placement,\n  minContentWidth,\n  activeDrawerSize,\n  splitPanelOpen,\n  splitPanelPosition,\n  splitPanelSize,\n  isMobile,\n}: HorizontalLayoutInput) {\n  const contentPadding = 2 * 24; // space-xl\n  const activeNavigationWidth = navigationOpen ? navigationWidth : 0;\n\n  const resizableSpaceAvailable = Math.max(\n    0,\n    placement.inlineSize - minContentWidth - contentPadding - activeNavigationWidth\n  );\n\n  const splitPanelForcedPosition = resizableSpaceAvailable - activeDrawerSize < SPLIT_PANEL_MIN_WIDTH || isMobile;\n  const resolvedSplitPanelPosition = splitPanelForcedPosition ? 'bottom' : splitPanelPosition ?? 'bottom';\n  const sideSplitPanelSize = resolvedSplitPanelPosition === 'side' && splitPanelOpen ? splitPanelSize ?? 0 : 0;\n  const maxSplitPanelSize = resizableSpaceAvailable - activeDrawerSize;\n  const maxDrawerSize = resizableSpaceAvailable - sideSplitPanelSize;\n\n  return {\n    splitPanelPosition: resolvedSplitPanelPosition,\n    splitPanelForcedPosition,\n    sideSplitPanelSize,\n    maxSplitPanelSize,\n    maxDrawerSize,\n  };\n}\n\ninterface VerticalLayoutInput {\n  topOffset: number;\n  hasVisibleToolbar: boolean;\n  toolbarHeight: number;\n  stickyNotifications: boolean;\n  notificationsHeight: number;\n}\n\nexport interface VerticalLayoutOutput {\n  toolbar: number;\n  notifications: number;\n  header: number;\n}\n\nexport function computeVerticalLayout({\n  topOffset,\n  hasVisibleToolbar,\n  toolbarHeight,\n  stickyNotifications,\n  notificationsHeight,\n}: VerticalLayoutInput): VerticalLayoutOutput {\n  const toolbar = topOffset;\n  let notifications = topOffset;\n  if (hasVisibleToolbar) {\n    notifications += toolbarHeight;\n  }\n  let header = notifications;\n  if (stickyNotifications) {\n    header += notificationsHeight;\n  }\n\n  return { toolbar, notifications, header };\n}\n"]}

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

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

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

@@ -7,7 +7,7 @@ import PanelResizeHandle from '../../../internal/components/panel-resize-handle'
 import { createWidgetizedComponent } from '../../../internal/widgets';
 import { TOOLS_DRAWER_ID } from '../../utils/use-drawers';
 import { useResize } from './use-resize';
-import sharedStyles from '../../styles.css.js';
+import sharedStyles from '../../resize/styles.css.js';
 import testutilStyles from '../../test-classes/styles.css.js';
 import styles from './styles.css.js';
 export function AppLayoutDrawerImplementation({ appLayoutInternals }) {
@@ -30,7 +30,7 @@ export function AppLayoutDrawerImplementation({ appLayoutInternals }) {
         handleRef: drawersFocusControl.refs.slider,
         onResize: size => onActiveDrawerResize({ id: activeDrawerId, size }),
     });
-    return (React.createElement("aside", { id: activeDrawerId, "aria-hidden": !activeDrawer, "aria-label": computedAriaLabels.content, className: clsx(styles.drawer, sharedStyles['with-motion'], {
+    return (React.createElement("aside", { id: activeDrawerId, "aria-hidden": !activeDrawer, "aria-label": computedAriaLabels.content, className: clsx(styles.drawer, {
             [testutilStyles['active-drawer']]: !toolsOnlyMode && activeDrawerId,
             [testutilStyles.tools]: isToolsDrawer,
         }), ref: drawerRef, onBlur: e => {
@@ -43,13 +43,13 @@ export function AppLayoutDrawerImplementation({ appLayoutInternals }) {
         } },
         !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: (_d = activeDrawer === null || activeDrawer === void 0 ? void 0 : activeDrawer.ariaLabels) === null || _d === void 0 ? void 0 : _d.resizeHandle, ariaValuenow: resizeProps.relativeSize, onKeyDown: resizeProps.onKeyDown, onPointerDown: resizeProps.onPointerDown }))),
-        React.createElement("div", { className: styles['drawer-content-container'] },
+        React.createElement("div", { className: clsx(styles['drawer-content-container'], sharedStyles['with-motion']), style: { width: isMobile ? '100%' : `${activeDrawerSize}px` } },
             React.createElement("div", { className: clsx(styles['drawer-close-button']) },
                 React.createElement(InternalButton, { ariaLabel: computedAriaLabels.closeButton, className: clsx({
                         [testutilStyles['active-drawer-close-button']]: !isToolsDrawer && activeDrawerId,
                         [testutilStyles['tools-close']]: isToolsDrawer,
                     }), formAction: "none", iconName: isMobile ? 'close' : 'angle-right', onClick: () => onActiveDrawerChange(null), ref: drawersFocusControl.refs.close, variant: "icon" })),
-            toolsContent && (React.createElement("div", { className: clsx(styles['drawer-content'], activeDrawerId !== TOOLS_DRAWER_ID && styles['drawer-content-hidden']) }, toolsContent)),
+            React.createElement("div", { className: clsx(styles['drawer-content'], activeDrawerId !== TOOLS_DRAWER_ID && styles['drawer-content-hidden']) }, toolsContent),
             activeDrawerId !== TOOLS_DRAWER_ID && React.createElement("div", { className: styles['drawer-content'] }, activeDrawer === null || activeDrawer === void 0 ? void 0 : activeDrawer.content))));
 }
 export const createWidgetizedAppLayoutDrawer = createWidgetizedComponent(AppLayoutDrawerImplementation);

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/app-layout/visual-refresh-toolbar/drawer/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, { useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { InternalButton } from '../../../button/internal';\nimport PanelResizeHandle from '../../../internal/components/panel-resize-handle';\nimport { createWidgetizedComponent } from '../../../internal/widgets';\nimport { TOOLS_DRAWER_ID } from '../../utils/use-drawers';\nimport { AppLayoutInternals } from '../interfaces';\nimport { useResize } from './use-resize';\n\nimport sharedStyles from '../../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    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 isToolsDrawer = activeDrawer?.id === TOOLS_DRAWER_ID;\n  const toolsOnlyMode = drawers.length === 1 && drawers[0].id === TOOLS_DRAWER_ID;\n  const toolsContent = drawers?.find(drawer => drawer.id === TOOLS_DRAWER_ID)?.content;\n  const resizeProps = useResize({\n    currentWidth: activeDrawerSize,\n    minWidth: minDrawerSize,\n    maxWidth: maxDrawerSize,\n    panelRef: drawerRef,\n    handleRef: drawersFocusControl.refs.slider,\n    onResize: size => onActiveDrawerResize({ id: activeDrawerId!, size }),\n  });\n\n  return (\n    <aside\n      id={activeDrawerId}\n      aria-hidden={!activeDrawer}\n      aria-label={computedAriaLabels.content}\n      className={clsx(styles.drawer, sharedStyles['with-motion'], {\n        [testutilStyles['active-drawer']]: !toolsOnlyMode && activeDrawerId,\n        [testutilStyles.tools]: isToolsDrawer,\n      })}\n      ref={drawerRef}\n      onBlur={e => {\n        if (!e.relatedTarget || !e.currentTarget.contains(e.relatedTarget)) {\n          drawersFocusControl.loseFocus();\n        }\n      }}\n      style={{\n        blockSize: `calc(100vh - ${placement.insetBlockStart}px - ${placement.insetBlockEnd}px)`,\n        insetBlockStart: placement.insetBlockStart,\n      }}\n    >\n      {!isMobile && activeDrawer?.resizable && (\n        <div className={styles['drawer-slider']}>\n          <PanelResizeHandle\n            ref={drawersFocusControl.refs.slider}\n            position=\"side\"\n            className={testutilStyles['drawers-slider']}\n            ariaLabel={activeDrawer?.ariaLabels?.resizeHandle}\n            ariaValuenow={resizeProps.relativeSize}\n            onKeyDown={resizeProps.onKeyDown}\n            onPointerDown={resizeProps.onPointerDown}\n          />\n        </div>\n      )}\n      <div className={styles['drawer-content-container']}>\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        {toolsContent && (\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        )}\n        {activeDrawerId !== TOOLS_DRAWER_ID && <div className={styles['drawer-content']}>{activeDrawer?.content}</div>}\n      </div>\n    </aside>\n  );\n}\n\nexport const createWidgetizedAppLayoutDrawer = createWidgetizedComponent(AppLayoutDrawerImplementation);\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/app-layout/visual-refresh-toolbar/drawer/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, { useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { InternalButton } from '../../../button/internal';\nimport PanelResizeHandle from '../../../internal/components/panel-resize-handle';\nimport { createWidgetizedComponent } from '../../../internal/widgets';\nimport { TOOLS_DRAWER_ID } from '../../utils/use-drawers';\nimport { AppLayoutInternals } from '../interfaces';\nimport { useResize } from './use-resize';\n\nimport sharedStyles from '../../resize/styles.css.js';\nimport testutilStyles from '../../test-classes/styles.css.js';\nimport styles from './styles.css.js';\n\ninterface AppLayoutDrawerImplementationProps {\n  appLayoutInternals: AppLayoutInternals;\n}\n\nexport function AppLayoutDrawerImplementation({ appLayoutInternals }: AppLayoutDrawerImplementationProps) {\n  const {\n    activeDrawer,\n    minDrawerSize,\n    activeDrawerSize,\n    maxDrawerSize,\n    ariaLabels,\n    drawers,\n    drawersFocusControl,\n    isMobile,\n    placement,\n    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 isToolsDrawer = activeDrawer?.id === TOOLS_DRAWER_ID;\n  const toolsOnlyMode = drawers.length === 1 && drawers[0].id === TOOLS_DRAWER_ID;\n  const toolsContent = drawers?.find(drawer => drawer.id === TOOLS_DRAWER_ID)?.content;\n  const resizeProps = useResize({\n    currentWidth: activeDrawerSize,\n    minWidth: minDrawerSize,\n    maxWidth: maxDrawerSize,\n    panelRef: drawerRef,\n    handleRef: drawersFocusControl.refs.slider,\n    onResize: size => onActiveDrawerResize({ id: activeDrawerId!, size }),\n  });\n\n  return (\n    <aside\n      id={activeDrawerId}\n      aria-hidden={!activeDrawer}\n      aria-label={computedAriaLabels.content}\n      className={clsx(styles.drawer, {\n        [testutilStyles['active-drawer']]: !toolsOnlyMode && activeDrawerId,\n        [testutilStyles.tools]: isToolsDrawer,\n      })}\n      ref={drawerRef}\n      onBlur={e => {\n        if (!e.relatedTarget || !e.currentTarget.contains(e.relatedTarget)) {\n          drawersFocusControl.loseFocus();\n        }\n      }}\n      style={{\n        blockSize: `calc(100vh - ${placement.insetBlockStart}px - ${placement.insetBlockEnd}px)`,\n        insetBlockStart: placement.insetBlockStart,\n      }}\n    >\n      {!isMobile && activeDrawer?.resizable && (\n        <div className={styles['drawer-slider']}>\n          <PanelResizeHandle\n            ref={drawersFocusControl.refs.slider}\n            position=\"side\"\n            className={testutilStyles['drawers-slider']}\n            ariaLabel={activeDrawer?.ariaLabels?.resizeHandle}\n            ariaValuenow={resizeProps.relativeSize}\n            onKeyDown={resizeProps.onKeyDown}\n            onPointerDown={resizeProps.onPointerDown}\n          />\n        </div>\n      )}\n      <div\n        className={clsx(styles['drawer-content-container'], sharedStyles['with-motion'])}\n        style={{ width: isMobile ? '100%' : `${activeDrawerSize}px` }}\n      >\n        <div className={clsx(styles['drawer-close-button'])}>\n          <InternalButton\n            ariaLabel={computedAriaLabels.closeButton}\n            className={clsx({\n              [testutilStyles['active-drawer-close-button']]: !isToolsDrawer && activeDrawerId,\n              [testutilStyles['tools-close']]: isToolsDrawer,\n            })}\n            formAction=\"none\"\n            iconName={isMobile ? 'close' : 'angle-right'}\n            onClick={() => onActiveDrawerChange(null)}\n            ref={drawersFocusControl.refs.close}\n            variant=\"icon\"\n          />\n        </div>\n        <div\n          className={clsx(\n            styles['drawer-content'],\n            activeDrawerId !== TOOLS_DRAWER_ID && styles['drawer-content-hidden']\n          )}\n        >\n          {toolsContent}\n        </div>\n        {activeDrawerId !== TOOLS_DRAWER_ID && <div className={styles['drawer-content']}>{activeDrawer?.content}</div>}\n      </div>\n    </aside>\n  );\n}\n\nexport const createWidgetizedAppLayoutDrawer = createWidgetizedComponent(AppLayoutDrawerImplementation);\n"]}

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;;;;EAuBzG"}
+{"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"}

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

@@ -13,6 +13,7 @@ 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;