@cloudscape-design/components-themeable 3.0.177 → 3.0.178

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

@@ -16,18 +16,18 @@ import customCssProps from '../../internal/generated/custom-css-properties';
 export default function Layout(_a) {
     var _b, _c, _d, _e, _f, _g;
     var children = _a.children;
-    var _h = useAppLayoutInternals(), contentHeader = _h.contentHeader, contentType = _h.contentType, disableBodyScroll = _h.disableBodyScroll, disableContentHeaderOverlap = _h.disableContentHeaderOverlap, dynamicOverlapHeight = _h.dynamicOverlapHeight, footerHeight = _h.footerHeight, hasNotificationsContent = _h.hasNotificationsContent, headerHeight = _h.headerHeight, isNavigationOpen = _h.isNavigationOpen, isSplitPanelOpen = _h.isSplitPanelOpen, isToolsOpen = _h.isToolsOpen, layoutElement = _h.layoutElement, layoutWidth = _h.layoutWidth, mainOffsetLeft = _h.mainOffsetLeft, maxContentWidth = _h.maxContentWidth, minContentWidth = _h.minContentWidth, navigationHide = _h.navigationHide, notificationsHeight = _h.notificationsHeight, splitPanel = _h.splitPanel, splitPanelPosition = _h.splitPanelPosition, stickyNotifications = _h.stickyNotifications, toolsHide = _h.toolsHide;
+    var _h = useAppLayoutInternals(), contentHeader = _h.contentHeader, contentType = _h.contentType, disableBodyScroll = _h.disableBodyScroll, disableContentHeaderOverlap = _h.disableContentHeaderOverlap, dynamicOverlapHeight = _h.dynamicOverlapHeight, footerHeight = _h.footerHeight, hasNotificationsContent = _h.hasNotificationsContent, headerHeight = _h.headerHeight, isNavigationOpen = _h.isNavigationOpen, isSplitPanelOpen = _h.isSplitPanelOpen, isToolsOpen = _h.isToolsOpen, layoutElement = _h.layoutElement, layoutWidth = _h.layoutWidth, mainOffsetLeft = _h.mainOffsetLeft, maxContentWidth = _h.maxContentWidth, minContentWidth = _h.minContentWidth, navigationHide = _h.navigationHide, notificationsHeight = _h.notificationsHeight, splitPanelPosition = _h.splitPanelPosition, stickyNotifications = _h.stickyNotifications, splitPanelDisplayed = _h.splitPanelDisplayed, toolsHide = _h.toolsHide;
     var isOverlapDisabled = getOverlapDisabled(dynamicOverlapHeight, contentHeader, disableContentHeaderOverlap);
     // Content gaps on the left and right are used with the minmax function in the CSS grid column definition
     var hasContentGapLeft = getContentGapLeft(isNavigationOpen, navigationHide);
-    var hasContentGapRight = getContentGapRight(splitPanelPosition, isSplitPanelOpen, isToolsOpen, splitPanel, toolsHide);
+    var hasContentGapRight = getContentGapRight(splitPanelPosition, isSplitPanelOpen, isToolsOpen, splitPanelDisplayed, toolsHide);
     return (React.createElement("main", { className: clsx(styles.layout, styles["content-type-".concat(contentType)], styles["split-panel-position-".concat(splitPanelPosition !== null && splitPanelPosition !== void 0 ? splitPanelPosition : 'bottom')], (_b = {},
             _b[styles['disable-body-scroll']] = disableBodyScroll,
             _b[testutilStyles['disable-body-scroll-root']] = disableBodyScroll,
             _b[styles['has-content-gap-left']] = hasContentGapLeft,
             _b[styles['has-content-gap-right']] = hasContentGapRight,
             _b[styles['has-max-content-width']] = maxContentWidth && maxContentWidth > 0,
-            _b[styles['has-split-panel']] = splitPanel,
+            _b[styles['has-split-panel']] = splitPanelDisplayed,
             _b[styles['has-sticky-notifications']] = stickyNotifications && hasNotificationsContent,
             _b[styles['is-overlap-disabled']] = isOverlapDisabled,
             _b), testutilStyles.root), ref: layoutElement, style: __assign(__assign(__assign(__assign((_c = {}, _c[customCssProps.headerHeight] = "".concat(headerHeight, "px"), _c[customCssProps.footerHeight] = "".concat(footerHeight, "px"), _c[customCssProps.layoutWidth] = "".concat(layoutWidth, "px"), _c[customCssProps.mainOffsetLeft] = "".concat(mainOffsetLeft, "px"), _c), (maxContentWidth && (_d = {}, _d[customCssProps.maxContentWidth] = "".concat(maxContentWidth, "px"), _d))), (minContentWidth && (_e = {}, _e[customCssProps.minContentWidth] = "".concat(minContentWidth, "px"), _e))), (_f = {}, _f[customCssProps.notificationsHeight] = "".concat(notificationsHeight, "px"), _f)), (!isOverlapDisabled &&
@@ -41,22 +41,22 @@ export default function Layout(_a) {
  * determine the necessity of utilizing the content gap left property to create
  * horizontal space between the center column and its adjacent siblings.
  */
-function getContentGapRight(splitPanelPosition, isSplitPanelOpen, isToolsOpen, splitPanel, toolsHide) {
+function getContentGapRight(splitPanelPosition, isSplitPanelOpen, isToolsOpen, splitPanelDisplayed, toolsHide) {
     var hasContentGapRight = false;
     // Main is touching the edge of the Layout and needs a content gap
-    if (!splitPanel && toolsHide) {
+    if (!splitPanelDisplayed && toolsHide) {
         hasContentGapRight = true;
     }
     // Main is touching the Tools drawer and needs a content gap
-    if ((!splitPanel || !isSplitPanelOpen) && !toolsHide && isToolsOpen) {
+    if ((!splitPanelDisplayed || !isSplitPanelOpen) && !toolsHide && isToolsOpen) {
         hasContentGapRight = true;
     }
     // Main is touching the edge of the Layout and needs a content gap
-    if (splitPanel && splitPanelPosition === 'bottom' && (isToolsOpen || toolsHide)) {
+    if (splitPanelDisplayed && splitPanelPosition === 'bottom' && (isToolsOpen || toolsHide)) {
         hasContentGapRight = true;
     }
     // Main is touching the Split Panel drawer and needs a content gap
-    if (splitPanel && isSplitPanelOpen && splitPanelPosition === 'side') {
+    if (splitPanelDisplayed && isSplitPanelOpen && splitPanelPosition === 'side') {
         hasContentGapRight = true;
     }
     return hasContentGapRight;

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

@@ -1 +1 @@
-{"version":3,"file":"layout.js","sourceRoot":"","sources":["../../../../src/app-layout/visual-refresh/layout.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';\nimport { useAppLayoutInternals } from './context';\nimport styles from './styles.css.js';\nimport testutilStyles from '../test-classes/styles.css.js';\nimport { AppLayoutProps } from '../interfaces';\nimport customCssProps from '../../internal/generated/custom-css-properties';\n\ninterface LayoutProps {\n  children: React.ReactNode;\n}\n\n/**\n * The layoutElement ref will be used by the resize observers to calculate the offset from\n * the top and bottom of the viewport based on the header and footer elements. This is to\n * ensure the Layout component minimum height will fill 100% of the viewport less those\n * cumulative heights.\n */\nexport default function Layout({ children }: LayoutProps) {\n  const {\n    contentHeader,\n    contentType,\n    disableBodyScroll,\n    disableContentHeaderOverlap,\n    dynamicOverlapHeight,\n    footerHeight,\n    hasNotificationsContent,\n    headerHeight,\n    isNavigationOpen,\n    isSplitPanelOpen,\n    isToolsOpen,\n    layoutElement,\n    layoutWidth,\n    mainOffsetLeft,\n    maxContentWidth,\n    minContentWidth,\n    navigationHide,\n    notificationsHeight,\n    splitPanel,\n    splitPanelPosition,\n    stickyNotifications,\n    toolsHide,\n  } = useAppLayoutInternals();\n\n  const isOverlapDisabled = getOverlapDisabled(dynamicOverlapHeight, contentHeader, disableContentHeaderOverlap);\n\n  // Content gaps on the left and right are used with the minmax function in the CSS grid column definition\n  const hasContentGapLeft = getContentGapLeft(isNavigationOpen, navigationHide);\n  const hasContentGapRight = getContentGapRight(\n    splitPanelPosition,\n    isSplitPanelOpen,\n    isToolsOpen,\n    splitPanel,\n    toolsHide\n  );\n\n  return (\n    <main\n      className={clsx(\n        styles.layout,\n        styles[`content-type-${contentType}`],\n        styles[`split-panel-position-${splitPanelPosition ?? 'bottom'}`],\n        {\n          [styles['disable-body-scroll']]: disableBodyScroll,\n          [testutilStyles['disable-body-scroll-root']]: disableBodyScroll,\n          [styles['has-content-gap-left']]: hasContentGapLeft,\n          [styles['has-content-gap-right']]: hasContentGapRight,\n          [styles['has-max-content-width']]: maxContentWidth && maxContentWidth > 0,\n          [styles['has-split-panel']]: splitPanel,\n          [styles['has-sticky-notifications']]: stickyNotifications && hasNotificationsContent,\n          [styles['is-overlap-disabled']]: isOverlapDisabled,\n        },\n        testutilStyles.root\n      )}\n      ref={layoutElement}\n      style={{\n        [customCssProps.headerHeight]: `${headerHeight}px`,\n        [customCssProps.footerHeight]: `${footerHeight}px`,\n        [customCssProps.layoutWidth]: `${layoutWidth}px`,\n        [customCssProps.mainOffsetLeft]: `${mainOffsetLeft}px`,\n        ...(maxContentWidth && { [customCssProps.maxContentWidth]: `${maxContentWidth}px` }),\n        ...(minContentWidth && { [customCssProps.minContentWidth]: `${minContentWidth}px` }),\n        [customCssProps.notificationsHeight]: `${notificationsHeight}px`,\n        ...(!isOverlapDisabled &&\n          dynamicOverlapHeight > 0 && { [customCssProps.overlapHeight]: `${dynamicOverlapHeight}px` }),\n      }}\n    >\n      {children}\n    </main>\n  );\n}\n\n/**\n * When the Navigation and Tools are present the grid definition has the center column\n * touch the first and last columns with no gap. The forms with the circular buttons\n * for Navigation and Tools have internal padding which creates the necessary\n * horizontal space when the drawers are closed. The remaining conditions below\n * determine the necessity of utilizing the content gap left property to create\n * horizontal space between the center column and its adjacent siblings.\n */\nfunction getContentGapRight(\n  splitPanelPosition: AppLayoutProps.SplitPanelPosition,\n  isSplitPanelOpen?: boolean,\n  isToolsOpen?: boolean,\n  splitPanel?: React.ReactNode,\n  toolsHide?: boolean\n) {\n  let hasContentGapRight = false;\n\n  // Main is touching the edge of the Layout and needs a content gap\n  if (!splitPanel && toolsHide) {\n    hasContentGapRight = true;\n  }\n\n  // Main is touching the Tools drawer and needs a content gap\n  if ((!splitPanel || !isSplitPanelOpen) && !toolsHide && isToolsOpen) {\n    hasContentGapRight = true;\n  }\n\n  // Main is touching the edge of the Layout and needs a content gap\n  if (splitPanel && splitPanelPosition === 'bottom' && (isToolsOpen || toolsHide)) {\n    hasContentGapRight = true;\n  }\n\n  // Main is touching the Split Panel drawer and needs a content gap\n  if (splitPanel && isSplitPanelOpen && splitPanelPosition === 'side') {\n    hasContentGapRight = true;\n  }\n\n  return hasContentGapRight;\n}\n\n/**\n * Additional function to determine whether or not a content gap is needed\n * on the left (see the getContentGapRight function). The same render logic applies\n * regarding the center column touching an adjacent sibling but the only\n * component state that needs to be tracked is the Navigation.\n */\nfunction getContentGapLeft(isNavigationOpen: boolean, navigationHide?: boolean) {\n  return isNavigationOpen || navigationHide ? true : false;\n}\n\n/**\n * Determine whether the overlap between the contentHeader and content slots should be disabled.\n * The disableContentHeaderOverlap property is absolute and will always disable the overlap\n * if it is set to true. If there is no contentHeader then the overlap should be disabled\n * unless there is a dynamicOverlapHeight. The dynamicOverlapHeight property is set by a\n * component in the content slot that needs to manually control the overlap height. Components\n * such as the Table (full page variant), Wizard, ContentLayout use this property and will\n * retain the overlap even if there is nothing rendered in the contentHeader slot.\n */\nfunction getOverlapDisabled(\n  dynamicOverlapHeight: number,\n  contentHeader?: React.ReactNode,\n  disableContentHeaderOverlap?: boolean\n) {\n  let isOverlapDisabled = false;\n\n  if (disableContentHeaderOverlap) {\n    isOverlapDisabled = true;\n  } else if (!contentHeader && dynamicOverlapHeight <= 0) {\n    isOverlapDisabled = true;\n  }\n\n  return isOverlapDisabled;\n}\n"]}
+{"version":3,"file":"layout.js","sourceRoot":"","sources":["../../../../src/app-layout/visual-refresh/layout.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';\nimport { useAppLayoutInternals } from './context';\nimport styles from './styles.css.js';\nimport testutilStyles from '../test-classes/styles.css.js';\nimport { AppLayoutProps } from '../interfaces';\nimport customCssProps from '../../internal/generated/custom-css-properties';\n\ninterface LayoutProps {\n  children: React.ReactNode;\n}\n\n/**\n * The layoutElement ref will be used by the resize observers to calculate the offset from\n * the top and bottom of the viewport based on the header and footer elements. This is to\n * ensure the Layout component minimum height will fill 100% of the viewport less those\n * cumulative heights.\n */\nexport default function Layout({ children }: LayoutProps) {\n  const {\n    contentHeader,\n    contentType,\n    disableBodyScroll,\n    disableContentHeaderOverlap,\n    dynamicOverlapHeight,\n    footerHeight,\n    hasNotificationsContent,\n    headerHeight,\n    isNavigationOpen,\n    isSplitPanelOpen,\n    isToolsOpen,\n    layoutElement,\n    layoutWidth,\n    mainOffsetLeft,\n    maxContentWidth,\n    minContentWidth,\n    navigationHide,\n    notificationsHeight,\n    splitPanelPosition,\n    stickyNotifications,\n    splitPanelDisplayed,\n    toolsHide,\n  } = useAppLayoutInternals();\n\n  const isOverlapDisabled = getOverlapDisabled(dynamicOverlapHeight, contentHeader, disableContentHeaderOverlap);\n\n  // Content gaps on the left and right are used with the minmax function in the CSS grid column definition\n  const hasContentGapLeft = getContentGapLeft(isNavigationOpen, navigationHide);\n  const hasContentGapRight = getContentGapRight(\n    splitPanelPosition,\n    isSplitPanelOpen,\n    isToolsOpen,\n    splitPanelDisplayed,\n    toolsHide\n  );\n\n  return (\n    <main\n      className={clsx(\n        styles.layout,\n        styles[`content-type-${contentType}`],\n        styles[`split-panel-position-${splitPanelPosition ?? 'bottom'}`],\n        {\n          [styles['disable-body-scroll']]: disableBodyScroll,\n          [testutilStyles['disable-body-scroll-root']]: disableBodyScroll,\n          [styles['has-content-gap-left']]: hasContentGapLeft,\n          [styles['has-content-gap-right']]: hasContentGapRight,\n          [styles['has-max-content-width']]: maxContentWidth && maxContentWidth > 0,\n          [styles['has-split-panel']]: splitPanelDisplayed,\n          [styles['has-sticky-notifications']]: stickyNotifications && hasNotificationsContent,\n          [styles['is-overlap-disabled']]: isOverlapDisabled,\n        },\n        testutilStyles.root\n      )}\n      ref={layoutElement}\n      style={{\n        [customCssProps.headerHeight]: `${headerHeight}px`,\n        [customCssProps.footerHeight]: `${footerHeight}px`,\n        [customCssProps.layoutWidth]: `${layoutWidth}px`,\n        [customCssProps.mainOffsetLeft]: `${mainOffsetLeft}px`,\n        ...(maxContentWidth && { [customCssProps.maxContentWidth]: `${maxContentWidth}px` }),\n        ...(minContentWidth && { [customCssProps.minContentWidth]: `${minContentWidth}px` }),\n        [customCssProps.notificationsHeight]: `${notificationsHeight}px`,\n        ...(!isOverlapDisabled &&\n          dynamicOverlapHeight > 0 && { [customCssProps.overlapHeight]: `${dynamicOverlapHeight}px` }),\n      }}\n    >\n      {children}\n    </main>\n  );\n}\n\n/**\n * When the Navigation and Tools are present the grid definition has the center column\n * touch the first and last columns with no gap. The forms with the circular buttons\n * for Navigation and Tools have internal padding which creates the necessary\n * horizontal space when the drawers are closed. The remaining conditions below\n * determine the necessity of utilizing the content gap left property to create\n * horizontal space between the center column and its adjacent siblings.\n */\nfunction getContentGapRight(\n  splitPanelPosition: AppLayoutProps.SplitPanelPosition,\n  isSplitPanelOpen: boolean | undefined,\n  isToolsOpen: boolean,\n  splitPanelDisplayed: boolean,\n  toolsHide?: boolean\n) {\n  let hasContentGapRight = false;\n\n  // Main is touching the edge of the Layout and needs a content gap\n  if (!splitPanelDisplayed && toolsHide) {\n    hasContentGapRight = true;\n  }\n\n  // Main is touching the Tools drawer and needs a content gap\n  if ((!splitPanelDisplayed || !isSplitPanelOpen) && !toolsHide && isToolsOpen) {\n    hasContentGapRight = true;\n  }\n\n  // Main is touching the edge of the Layout and needs a content gap\n  if (splitPanelDisplayed && splitPanelPosition === 'bottom' && (isToolsOpen || toolsHide)) {\n    hasContentGapRight = true;\n  }\n\n  // Main is touching the Split Panel drawer and needs a content gap\n  if (splitPanelDisplayed && isSplitPanelOpen && splitPanelPosition === 'side') {\n    hasContentGapRight = true;\n  }\n\n  return hasContentGapRight;\n}\n\n/**\n * Additional function to determine whether or not a content gap is needed\n * on the left (see the getContentGapRight function). The same render logic applies\n * regarding the center column touching an adjacent sibling but the only\n * component state that needs to be tracked is the Navigation.\n */\nfunction getContentGapLeft(isNavigationOpen: boolean, navigationHide?: boolean) {\n  return isNavigationOpen || navigationHide ? true : false;\n}\n\n/**\n * Determine whether the overlap between the contentHeader and content slots should be disabled.\n * The disableContentHeaderOverlap property is absolute and will always disable the overlap\n * if it is set to true. If there is no contentHeader then the overlap should be disabled\n * unless there is a dynamicOverlapHeight. The dynamicOverlapHeight property is set by a\n * component in the content slot that needs to manually control the overlap height. Components\n * such as the Table (full page variant), Wizard, ContentLayout use this property and will\n * retain the overlap even if there is nothing rendered in the contentHeader slot.\n */\nfunction getOverlapDisabled(\n  dynamicOverlapHeight: number,\n  contentHeader?: React.ReactNode,\n  disableContentHeaderOverlap?: boolean\n) {\n  let isOverlapDisabled = false;\n\n  if (disableContentHeaderOverlap) {\n    isOverlapDisabled = true;\n  } else if (!contentHeader && dynamicOverlapHeight <= 0) {\n    isOverlapDisabled = true;\n  }\n\n  return isOverlapDisabled;\n}\n"]}

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

@@ -8,7 +8,7 @@ import styles from './styles.css.js';
 import testutilStyles from '../test-classes/styles.css.js';
 export default function Main() {
     var _a, _b;
-    var _c = useAppLayoutInternals(), breadcrumbs = _c.breadcrumbs, content = _c.content, contentHeader = _c.contentHeader, contentType = _c.contentType, disableContentPaddings = _c.disableContentPaddings, dynamicOverlapHeight = _c.dynamicOverlapHeight, hasNotificationsContent = _c.hasNotificationsContent, isNavigationOpen = _c.isNavigationOpen, isSplitPanelOpen = _c.isSplitPanelOpen, isToolsOpen = _c.isToolsOpen, isMobile = _c.isMobile, isAnyPanelOpen = _c.isAnyPanelOpen, mainElement = _c.mainElement, splitPanel = _c.splitPanel, offsetBottom = _c.offsetBottom, footerHeight = _c.footerHeight, splitPanelPosition = _c.splitPanelPosition;
+    var _c = useAppLayoutInternals(), breadcrumbs = _c.breadcrumbs, content = _c.content, contentHeader = _c.contentHeader, contentType = _c.contentType, disableContentPaddings = _c.disableContentPaddings, dynamicOverlapHeight = _c.dynamicOverlapHeight, hasNotificationsContent = _c.hasNotificationsContent, isNavigationOpen = _c.isNavigationOpen, isSplitPanelOpen = _c.isSplitPanelOpen, isToolsOpen = _c.isToolsOpen, isMobile = _c.isMobile, isAnyPanelOpen = _c.isAnyPanelOpen, mainElement = _c.mainElement, splitPanelDisplayed = _c.splitPanelDisplayed, offsetBottom = _c.offsetBottom, footerHeight = _c.footerHeight, splitPanelPosition = _c.splitPanelPosition;
     var isUnfocusable = isMobile && isAnyPanelOpen;
     var splitPanelHeight = offsetBottom - footerHeight;
     return (React.createElement("div", { className: clsx(styles.container, styles["content-type-".concat(contentType)], styles["split-panel-position-".concat(splitPanelPosition !== null && splitPanelPosition !== void 0 ? splitPanelPosition : 'bottom')], (_a = {},
@@ -17,7 +17,7 @@ export default function Main() {
             _a[styles['has-dynamic-overlap-height']] = dynamicOverlapHeight > 0,
             _a[styles['has-header']] = contentHeader,
             _a[styles['has-notifications-content']] = hasNotificationsContent,
-            _a[styles['has-split-panel']] = splitPanel,
+            _a[styles['has-split-panel']] = splitPanelDisplayed,
             _a[styles['is-navigation-open']] = isNavigationOpen,
             _a[styles['is-tools-open']] = isToolsOpen,
             _a[styles['is-split-panel-open']] = isSplitPanelOpen,

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

@@ -1 +1 @@
-{"version":3,"file":"main.js","sourceRoot":"","sources":["../../../../src/app-layout/visual-refresh/main.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,qBAAqB,EAAE,MAAM,WAAW,CAAC;AAClD,OAAO,cAAc,MAAM,gDAAgD,CAAC;AAC5E,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,cAAc,MAAM,+BAA+B,CAAC;AAE3D,MAAM,CAAC,OAAO,UAAU,IAAI;;IACpB,IAAA,KAkBF,qBAAqB,EAAE,EAjBzB,WAAW,iBAAA,EACX,OAAO,aAAA,EACP,aAAa,mBAAA,EACb,WAAW,iBAAA,EACX,sBAAsB,4BAAA,EACtB,oBAAoB,0BAAA,EACpB,uBAAuB,6BAAA,EACvB,gBAAgB,sBAAA,EAChB,gBAAgB,sBAAA,EAChB,WAAW,iBAAA,EACX,QAAQ,cAAA,EACR,cAAc,oBAAA,EACd,WAAW,iBAAA,EACX,UAAU,gBAAA,EACV,YAAY,kBAAA,EACZ,YAAY,kBAAA,EACZ,kBAAkB,wBACO,CAAC;IAE5B,IAAM,aAAa,GAAG,QAAQ,IAAI,cAAc,CAAC;IACjD,IAAM,gBAAgB,GAAG,YAAY,GAAG,YAAY,CAAC;IAErD,OAAO,CACL,6BACE,SAAS,EAAE,IAAI,CACb,MAAM,CAAC,SAAS,EAChB,MAAM,CAAC,uBAAgB,WAAW,CAAE,CAAC,EACrC,MAAM,CAAC,+BAAwB,kBAAkB,aAAlB,kBAAkB,cAAlB,kBAAkB,GAAI,QAAQ,CAAE,CAAC;YAE9D,GAAC,MAAM,CAAC,0BAA0B,CAAC,IAAG,sBAAsB;YAC5D,GAAC,MAAM,CAAC,iBAAiB,CAAC,IAAG,WAAW;YACxC,GAAC,MAAM,CAAC,4BAA4B,CAAC,IAAG,oBAAoB,GAAG,CAAC;YAChE,GAAC,MAAM,CAAC,YAAY,CAAC,IAAG,aAAa;YACrC,GAAC,MAAM,CAAC,2BAA2B,CAAC,IAAG,uBAAuB;YAC9D,GAAC,MAAM,CAAC,iBAAiB,CAAC,IAAG,UAAU;YACvC,GAAC,MAAM,CAAC,oBAAoB,CAAC,IAAG,gBAAgB;YAChD,GAAC,MAAM,CAAC,eAAe,CAAC,IAAG,WAAW;YACtC,GAAC,MAAM,CAAC,qBAAqB,CAAC,IAAG,gBAAgB;YACjD,GAAC,MAAM,CAAC,WAAW,IAAG,aAAa;iBAErC,cAAc,CAAC,OAAO,CACvB,EACD,GAAG,EAAE,WAAW,EAChB,KAAK;YACH,GAAC,cAAc,CAAC,gBAAgB,IAAG,UAAG,gBAAgB,OAAI;mBAG3D,OAAO,CACJ,CACP,CAAC;AACJ,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';\nimport { useAppLayoutInternals } from './context';\nimport customCssProps from '../../internal/generated/custom-css-properties';\nimport styles from './styles.css.js';\nimport testutilStyles from '../test-classes/styles.css.js';\n\nexport default function Main() {\n  const {\n    breadcrumbs,\n    content,\n    contentHeader,\n    contentType,\n    disableContentPaddings,\n    dynamicOverlapHeight,\n    hasNotificationsContent,\n    isNavigationOpen,\n    isSplitPanelOpen,\n    isToolsOpen,\n    isMobile,\n    isAnyPanelOpen,\n    mainElement,\n    splitPanel,\n    offsetBottom,\n    footerHeight,\n    splitPanelPosition,\n  } = useAppLayoutInternals();\n\n  const isUnfocusable = isMobile && isAnyPanelOpen;\n  const splitPanelHeight = offsetBottom - footerHeight;\n\n  return (\n    <div\n      className={clsx(\n        styles.container,\n        styles[`content-type-${contentType}`],\n        styles[`split-panel-position-${splitPanelPosition ?? 'bottom'}`],\n        {\n          [styles['disable-content-paddings']]: disableContentPaddings,\n          [styles['has-breadcrumbs']]: breadcrumbs,\n          [styles['has-dynamic-overlap-height']]: dynamicOverlapHeight > 0,\n          [styles['has-header']]: contentHeader,\n          [styles['has-notifications-content']]: hasNotificationsContent,\n          [styles['has-split-panel']]: splitPanel,\n          [styles['is-navigation-open']]: isNavigationOpen,\n          [styles['is-tools-open']]: isToolsOpen,\n          [styles['is-split-panel-open']]: isSplitPanelOpen,\n          [styles.unfocusable]: isUnfocusable,\n        },\n        testutilStyles.content\n      )}\n      ref={mainElement}\n      style={{\n        [customCssProps.splitPanelHeight]: `${splitPanelHeight}px`,\n      }}\n    >\n      {content}\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"main.js","sourceRoot":"","sources":["../../../../src/app-layout/visual-refresh/main.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,qBAAqB,EAAE,MAAM,WAAW,CAAC;AAClD,OAAO,cAAc,MAAM,gDAAgD,CAAC;AAC5E,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,cAAc,MAAM,+BAA+B,CAAC;AAE3D,MAAM,CAAC,OAAO,UAAU,IAAI;;IACpB,IAAA,KAkBF,qBAAqB,EAAE,EAjBzB,WAAW,iBAAA,EACX,OAAO,aAAA,EACP,aAAa,mBAAA,EACb,WAAW,iBAAA,EACX,sBAAsB,4BAAA,EACtB,oBAAoB,0BAAA,EACpB,uBAAuB,6BAAA,EACvB,gBAAgB,sBAAA,EAChB,gBAAgB,sBAAA,EAChB,WAAW,iBAAA,EACX,QAAQ,cAAA,EACR,cAAc,oBAAA,EACd,WAAW,iBAAA,EACX,mBAAmB,yBAAA,EACnB,YAAY,kBAAA,EACZ,YAAY,kBAAA,EACZ,kBAAkB,wBACO,CAAC;IAE5B,IAAM,aAAa,GAAG,QAAQ,IAAI,cAAc,CAAC;IACjD,IAAM,gBAAgB,GAAG,YAAY,GAAG,YAAY,CAAC;IAErD,OAAO,CACL,6BACE,SAAS,EAAE,IAAI,CACb,MAAM,CAAC,SAAS,EAChB,MAAM,CAAC,uBAAgB,WAAW,CAAE,CAAC,EACrC,MAAM,CAAC,+BAAwB,kBAAkB,aAAlB,kBAAkB,cAAlB,kBAAkB,GAAI,QAAQ,CAAE,CAAC;YAE9D,GAAC,MAAM,CAAC,0BAA0B,CAAC,IAAG,sBAAsB;YAC5D,GAAC,MAAM,CAAC,iBAAiB,CAAC,IAAG,WAAW;YACxC,GAAC,MAAM,CAAC,4BAA4B,CAAC,IAAG,oBAAoB,GAAG,CAAC;YAChE,GAAC,MAAM,CAAC,YAAY,CAAC,IAAG,aAAa;YACrC,GAAC,MAAM,CAAC,2BAA2B,CAAC,IAAG,uBAAuB;YAC9D,GAAC,MAAM,CAAC,iBAAiB,CAAC,IAAG,mBAAmB;YAChD,GAAC,MAAM,CAAC,oBAAoB,CAAC,IAAG,gBAAgB;YAChD,GAAC,MAAM,CAAC,eAAe,CAAC,IAAG,WAAW;YACtC,GAAC,MAAM,CAAC,qBAAqB,CAAC,IAAG,gBAAgB;YACjD,GAAC,MAAM,CAAC,WAAW,IAAG,aAAa;iBAErC,cAAc,CAAC,OAAO,CACvB,EACD,GAAG,EAAE,WAAW,EAChB,KAAK;YACH,GAAC,cAAc,CAAC,gBAAgB,IAAG,UAAG,gBAAgB,OAAI;mBAG3D,OAAO,CACJ,CACP,CAAC;AACJ,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';\nimport { useAppLayoutInternals } from './context';\nimport customCssProps from '../../internal/generated/custom-css-properties';\nimport styles from './styles.css.js';\nimport testutilStyles from '../test-classes/styles.css.js';\n\nexport default function Main() {\n  const {\n    breadcrumbs,\n    content,\n    contentHeader,\n    contentType,\n    disableContentPaddings,\n    dynamicOverlapHeight,\n    hasNotificationsContent,\n    isNavigationOpen,\n    isSplitPanelOpen,\n    isToolsOpen,\n    isMobile,\n    isAnyPanelOpen,\n    mainElement,\n    splitPanelDisplayed,\n    offsetBottom,\n    footerHeight,\n    splitPanelPosition,\n  } = useAppLayoutInternals();\n\n  const isUnfocusable = isMobile && isAnyPanelOpen;\n  const splitPanelHeight = offsetBottom - footerHeight;\n\n  return (\n    <div\n      className={clsx(\n        styles.container,\n        styles[`content-type-${contentType}`],\n        styles[`split-panel-position-${splitPanelPosition ?? 'bottom'}`],\n        {\n          [styles['disable-content-paddings']]: disableContentPaddings,\n          [styles['has-breadcrumbs']]: breadcrumbs,\n          [styles['has-dynamic-overlap-height']]: dynamicOverlapHeight > 0,\n          [styles['has-header']]: contentHeader,\n          [styles['has-notifications-content']]: hasNotificationsContent,\n          [styles['has-split-panel']]: splitPanelDisplayed,\n          [styles['is-navigation-open']]: isNavigationOpen,\n          [styles['is-tools-open']]: isToolsOpen,\n          [styles['is-split-panel-open']]: isSplitPanelOpen,\n          [styles.unfocusable]: isUnfocusable,\n        },\n        testutilStyles.content\n      )}\n      ref={mainElement}\n      style={{\n        [customCssProps.splitPanelHeight]: `${splitPanelHeight}px`,\n      }}\n    >\n      {content}\n    </div>\n  );\n}\n"]}

package/lib/internal/template/app-layout/visual-refresh/split-panel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"split-panel.d.ts","sourceRoot":"","sources":["../../../../src/app-layout/visual-refresh/split-panel.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAmB,MAAM,OAAO,CAAC;AASxC,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAK/C;;;GAGG;AACH,iBAAS,UAAU,CAAC,EAAE,QAAQ,EAAE,EAAE,KAAK,CAAC,iBAAiB,CAAC,OAAO,CAAC,eAoDjE;kBApDQ,UAAU;;;;AAsDnB;;;;;GAKG;AACH,iBAAS,gBAAgB,uBAuCxB;AAED;;;;;GAKG;AACH,iBAAS,cAAc,uBAmCtB;AAED;;;GAGG;AACH,wBAAgB,qBAAqB,CACnC,0BAA0B,EAAE,OAAO,EACnC,qBAAqB,EAAE,cAAc,CAAC,qBAAqB,GAAG,SAAS,qCASxE;AAID,eAAe,UAAU,CAAC"}
+{"version":3,"file":"split-panel.d.ts","sourceRoot":"","sources":["../../../../src/app-layout/visual-refresh/split-panel.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAmB,MAAM,OAAO,CAAC;AASxC,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAK/C;;;GAGG;AACH,iBAAS,UAAU,CAAC,EAAE,QAAQ,EAAE,EAAE,KAAK,CAAC,iBAAiB,CAAC,OAAO,CAAC,eAkDjE;kBAlDQ,UAAU;;;;AAoDnB;;;;;GAKG;AACH,iBAAS,gBAAgB,uBAuCxB;AAED;;;;;GAKG;AACH,iBAAS,cAAc,uBAmCtB;AAED;;;GAGG;AACH,wBAAgB,qBAAqB,CACnC,0BAA0B,EAAE,OAAO,EACnC,qBAAqB,EAAE,cAAc,CAAC,qBAAqB,GAAG,SAAS,qCASxE;AAID,eAAe,UAAU,CAAC"}

package/lib/internal/template/app-layout/visual-refresh/split-panel.js

@@ -14,9 +14,8 @@ import customCssProps from '../../internal/generated/custom-css-properties';
  */
 function SplitPanel(_a) {
     var children = _a.children;
-    var _b = useAppLayoutInternals(), handleSplitPanelClick = _b.handleSplitPanelClick, handleSplitPanelPreferencesChange = _b.handleSplitPanelPreferencesChange, handleSplitPanelResize = _b.handleSplitPanelResize, isMobile = _b.isMobile, isSplitPanelForcedPosition = _b.isSplitPanelForcedPosition, isSplitPanelOpen = _b.isSplitPanelOpen, setSplitPanelReportedSize = _b.setSplitPanelReportedSize, setSplitPanelReportedHeaderHeight = _b.setSplitPanelReportedHeaderHeight, splitPanelPosition = _b.splitPanelPosition, splitPanelSize = _b.splitPanelSize, headerHeight = _b.headerHeight, footerHeight = _b.footerHeight;
-    var _c = useState(undefined), openButtonAriaLabel = _c[0], setOpenButtonAriaLabel = _c[1];
-    var _d = useState(), splitPanelLastInteraction = _d[0], setSplitPanelLastInteraction = _d[1];
+    var _b = useAppLayoutInternals(), handleSplitPanelClick = _b.handleSplitPanelClick, handleSplitPanelPreferencesChange = _b.handleSplitPanelPreferencesChange, handleSplitPanelResize = _b.handleSplitPanelResize, isMobile = _b.isMobile, isSplitPanelForcedPosition = _b.isSplitPanelForcedPosition, isSplitPanelOpen = _b.isSplitPanelOpen, setSplitPanelReportedSize = _b.setSplitPanelReportedSize, setSplitPanelReportedHeaderHeight = _b.setSplitPanelReportedHeaderHeight, splitPanelPosition = _b.splitPanelPosition, splitPanelSize = _b.splitPanelSize, setSplitPanelToggle = _b.setSplitPanelToggle, headerHeight = _b.headerHeight, footerHeight = _b.footerHeight;
+    var _c = useState(), splitPanelLastInteraction = _c[0], setSplitPanelLastInteraction = _c[1];
     useEffectOnUpdate(function () { return setSplitPanelLastInteraction(isSplitPanelOpen ? { type: 'open' } : { type: 'close' }); }, [isSplitPanelOpen]);
     useEffectOnUpdate(function () { return setSplitPanelLastInteraction({ type: 'position' }); }, [splitPanelPosition]);
     var context = {
@@ -40,8 +39,7 @@ function SplitPanel(_a) {
         rightOffset: 0,
         size: splitPanelSize || 0,
         topOffset: 0,
-        openButtonAriaLabel: openButtonAriaLabel,
-        setOpenButtonAriaLabel: setOpenButtonAriaLabel,
+        setSplitPanelToggle: setSplitPanelToggle,
         lastInteraction: splitPanelLastInteraction
     };
     return React.createElement(SplitPanelContextProvider, { value: context }, children);

package/lib/internal/template/app-layout/visual-refresh/split-panel.js.map

@@ -1 +1 @@
-{"version":3,"file":"split-panel.js","sourceRoot":"","sources":["../../../../src/app-layout/visual-refresh/split-panel.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useState } from 'react';\nimport clsx from 'clsx';\nimport { useAppLayoutInternals } from './context';\nimport {\n  SplitPanelContextProvider,\n  SplitPanelContextProps,\n  SplitPanelLastInteraction,\n} from '../../internal/context/split-panel-context';\nimport styles from './styles.css.js';\nimport { AppLayoutProps } from '../interfaces';\nimport { useEffectOnUpdate } from '../../internal/hooks/use-effect-on-update';\nimport { Transition } from '../../internal/components/transition';\nimport customCssProps from '../../internal/generated/custom-css-properties';\n\n/**\n * If there is no Split Panel in the AppLayout context then the SplitPanel\n * will pass through the AppLayout children without the context.\n */\nfunction SplitPanel({ children }: React.PropsWithChildren<unknown>) {\n  const {\n    handleSplitPanelClick,\n    handleSplitPanelPreferencesChange,\n    handleSplitPanelResize,\n    isMobile,\n    isSplitPanelForcedPosition,\n    isSplitPanelOpen,\n    setSplitPanelReportedSize,\n    setSplitPanelReportedHeaderHeight,\n    splitPanelPosition,\n    splitPanelSize,\n    headerHeight,\n    footerHeight,\n  } = useAppLayoutInternals();\n\n  const [openButtonAriaLabel, setOpenButtonAriaLabel] = useState<undefined | string>(undefined);\n\n  const [splitPanelLastInteraction, setSplitPanelLastInteraction] = useState<undefined | SplitPanelLastInteraction>();\n  useEffectOnUpdate(\n    () => setSplitPanelLastInteraction(isSplitPanelOpen ? { type: 'open' } : { type: 'close' }),\n    [isSplitPanelOpen]\n  );\n  useEffectOnUpdate(() => setSplitPanelLastInteraction({ type: 'position' }), [splitPanelPosition]);\n\n  const context: SplitPanelContextProps = {\n    bottomOffset: 0,\n    getMaxHeight: () => {\n      const availableHeight = document.documentElement.clientHeight - headerHeight - footerHeight;\n      // If the page is likely zoomed in at 200%, allow the split panel to fill the content area.\n      return availableHeight < 400 ? availableHeight - 40 : availableHeight - 250;\n    },\n    getMaxWidth: () => document.documentElement.clientWidth,\n    isForcedPosition: isSplitPanelForcedPosition,\n    isMobile,\n    isOpen: isSplitPanelOpen,\n    leftOffset: 0,\n    onPreferencesChange: handleSplitPanelPreferencesChange,\n    onResize: handleSplitPanelResize,\n    onToggle: handleSplitPanelClick,\n    position: splitPanelPosition,\n    reportSize: setSplitPanelReportedSize,\n    reportHeaderHeight: setSplitPanelReportedHeaderHeight,\n    rightOffset: 0,\n    size: splitPanelSize || 0,\n    topOffset: 0,\n    openButtonAriaLabel,\n    setOpenButtonAriaLabel,\n    lastInteraction: splitPanelLastInteraction,\n  };\n\n  return <SplitPanelContextProvider value={context}>{children}</SplitPanelContextProvider>;\n}\n\n/**\n * This is the render function for the SplitPanel when it is in bottom position.\n * The Split Panel container will be another row entry in the grid definition in\n * the Layout component. The start and finish columns will be variable based\n * on the presence and state of the Navigation and Tools components.\n */\nfunction SplitPanelBottom() {\n  const {\n    disableBodyScroll,\n    isNavigationOpen,\n    isSplitPanelOpen,\n    isToolsOpen,\n    splitPanel,\n    splitPanelPosition,\n    splitPanelReportedSize,\n    splitPanelReportedHeaderHeight,\n  } = useAppLayoutInternals();\n\n  if (!splitPanel) {\n    return null;\n  }\n\n  return (\n    <Transition in={isSplitPanelOpen ?? false} exit={false}>\n      {(state, transitionEventsRef) => (\n        <section\n          className={clsx(styles['split-panel-bottom'], styles[`position-${splitPanelPosition}`], {\n            [styles.animating]: state === 'entering',\n            [styles['disable-body-scroll']]: disableBodyScroll,\n            [styles['is-navigation-open']]: isNavigationOpen,\n            [styles['is-split-panel-open']]: isSplitPanelOpen,\n            [styles['is-tools-open']]: isToolsOpen,\n          })}\n          ref={transitionEventsRef}\n          style={{\n            [customCssProps.splitPanelReportedSize]: `${splitPanelReportedSize}px`,\n            [customCssProps.splitPanelReportedHeaderSize]: `${splitPanelReportedHeaderHeight}px`,\n          }}\n        >\n          <SplitPanel></SplitPanel>\n          {splitPanelPosition === 'bottom' && splitPanel}\n        </section>\n      )}\n    </Transition>\n  );\n}\n\n/**\n * This is the render function for the SplitPanel when it is side position.\n * The Split Panel will not be within the grid defined in the Layout component\n * but instead a direct child of the Tools component. The width constraints\n * for this position are computed in the Tools component.\n */\nfunction SplitPanelSide() {\n  const {\n    isSplitPanelOpen,\n    splitPanel,\n    splitPanelPosition,\n    splitPanelMaxWidth,\n    splitPanelMinWidth,\n    splitPanelReportedSize,\n  } = useAppLayoutInternals();\n\n  if (!splitPanel) {\n    return null;\n  }\n\n  return (\n    <Transition in={isSplitPanelOpen ?? false} exit={false}>\n      {(state, transitionEventsRef) => (\n        <section\n          aria-hidden={!isSplitPanelOpen || splitPanelPosition === 'bottom' ? true : false}\n          className={clsx(styles['split-panel-side'], styles[`position-${splitPanelPosition}`], {\n            [styles.animating]: state === 'entering',\n            [styles['is-split-panel-open']]: isSplitPanelOpen,\n          })}\n          ref={transitionEventsRef}\n          style={{\n            [customCssProps.splitPanelMaxWidth]: `${splitPanelMaxWidth}px`,\n            [customCssProps.splitPanelMinWidth]: `${splitPanelMinWidth}px`,\n            [customCssProps.splitPanelReportedHeaderSize]: `${splitPanelReportedSize}px`,\n          }}\n        >\n          <div className={clsx(styles['animated-content'])}>{splitPanelPosition === 'side' && splitPanel}</div>\n        </section>\n      )}\n    </Transition>\n  );\n}\n\n/**\n * This logic will determine what the Split Panel position should be. It reconciles the possibility\n * of being in forced position with the current selected position in the settings.\n */\nexport function getSplitPanelPosition(\n  isSplitPanelForcedPosition: boolean,\n  splitPanelPreferences: AppLayoutProps.SplitPanelPreferences | undefined\n) {\n  let splitPanelPosition: AppLayoutProps.SplitPanelPosition = 'bottom';\n\n  if (!isSplitPanelForcedPosition && splitPanelPreferences?.position === 'side') {\n    splitPanelPosition = 'side';\n  }\n\n  return splitPanelPosition;\n}\nSplitPanel.Bottom = SplitPanelBottom;\nSplitPanel.Side = SplitPanelSide;\n\nexport default SplitPanel;\n"]}
+{"version":3,"file":"split-panel.js","sourceRoot":"","sources":["../../../../src/app-layout/visual-refresh/split-panel.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useState } from 'react';\nimport clsx from 'clsx';\nimport { useAppLayoutInternals } from './context';\nimport {\n  SplitPanelContextProvider,\n  SplitPanelContextProps,\n  SplitPanelLastInteraction,\n} from '../../internal/context/split-panel-context';\nimport styles from './styles.css.js';\nimport { AppLayoutProps } from '../interfaces';\nimport { useEffectOnUpdate } from '../../internal/hooks/use-effect-on-update';\nimport { Transition } from '../../internal/components/transition';\nimport customCssProps from '../../internal/generated/custom-css-properties';\n\n/**\n * If there is no Split Panel in the AppLayout context then the SplitPanel\n * will pass through the AppLayout children without the context.\n */\nfunction SplitPanel({ children }: React.PropsWithChildren<unknown>) {\n  const {\n    handleSplitPanelClick,\n    handleSplitPanelPreferencesChange,\n    handleSplitPanelResize,\n    isMobile,\n    isSplitPanelForcedPosition,\n    isSplitPanelOpen,\n    setSplitPanelReportedSize,\n    setSplitPanelReportedHeaderHeight,\n    splitPanelPosition,\n    splitPanelSize,\n    setSplitPanelToggle,\n    headerHeight,\n    footerHeight,\n  } = useAppLayoutInternals();\n\n  const [splitPanelLastInteraction, setSplitPanelLastInteraction] = useState<undefined | SplitPanelLastInteraction>();\n  useEffectOnUpdate(\n    () => setSplitPanelLastInteraction(isSplitPanelOpen ? { type: 'open' } : { type: 'close' }),\n    [isSplitPanelOpen]\n  );\n  useEffectOnUpdate(() => setSplitPanelLastInteraction({ type: 'position' }), [splitPanelPosition]);\n\n  const context: SplitPanelContextProps = {\n    bottomOffset: 0,\n    getMaxHeight: () => {\n      const availableHeight = document.documentElement.clientHeight - headerHeight - footerHeight;\n      // If the page is likely zoomed in at 200%, allow the split panel to fill the content area.\n      return availableHeight < 400 ? availableHeight - 40 : availableHeight - 250;\n    },\n    getMaxWidth: () => document.documentElement.clientWidth,\n    isForcedPosition: isSplitPanelForcedPosition,\n    isMobile,\n    isOpen: isSplitPanelOpen,\n    leftOffset: 0,\n    onPreferencesChange: handleSplitPanelPreferencesChange,\n    onResize: handleSplitPanelResize,\n    onToggle: handleSplitPanelClick,\n    position: splitPanelPosition,\n    reportSize: setSplitPanelReportedSize,\n    reportHeaderHeight: setSplitPanelReportedHeaderHeight,\n    rightOffset: 0,\n    size: splitPanelSize || 0,\n    topOffset: 0,\n    setSplitPanelToggle,\n    lastInteraction: splitPanelLastInteraction,\n  };\n\n  return <SplitPanelContextProvider value={context}>{children}</SplitPanelContextProvider>;\n}\n\n/**\n * This is the render function for the SplitPanel when it is in bottom position.\n * The Split Panel container will be another row entry in the grid definition in\n * the Layout component. The start and finish columns will be variable based\n * on the presence and state of the Navigation and Tools components.\n */\nfunction SplitPanelBottom() {\n  const {\n    disableBodyScroll,\n    isNavigationOpen,\n    isSplitPanelOpen,\n    isToolsOpen,\n    splitPanel,\n    splitPanelPosition,\n    splitPanelReportedSize,\n    splitPanelReportedHeaderHeight,\n  } = useAppLayoutInternals();\n\n  if (!splitPanel) {\n    return null;\n  }\n\n  return (\n    <Transition in={isSplitPanelOpen ?? false} exit={false}>\n      {(state, transitionEventsRef) => (\n        <section\n          className={clsx(styles['split-panel-bottom'], styles[`position-${splitPanelPosition}`], {\n            [styles.animating]: state === 'entering',\n            [styles['disable-body-scroll']]: disableBodyScroll,\n            [styles['is-navigation-open']]: isNavigationOpen,\n            [styles['is-split-panel-open']]: isSplitPanelOpen,\n            [styles['is-tools-open']]: isToolsOpen,\n          })}\n          ref={transitionEventsRef}\n          style={{\n            [customCssProps.splitPanelReportedSize]: `${splitPanelReportedSize}px`,\n            [customCssProps.splitPanelReportedHeaderSize]: `${splitPanelReportedHeaderHeight}px`,\n          }}\n        >\n          <SplitPanel></SplitPanel>\n          {splitPanelPosition === 'bottom' && splitPanel}\n        </section>\n      )}\n    </Transition>\n  );\n}\n\n/**\n * This is the render function for the SplitPanel when it is side position.\n * The Split Panel will not be within the grid defined in the Layout component\n * but instead a direct child of the Tools component. The width constraints\n * for this position are computed in the Tools component.\n */\nfunction SplitPanelSide() {\n  const {\n    isSplitPanelOpen,\n    splitPanel,\n    splitPanelPosition,\n    splitPanelMaxWidth,\n    splitPanelMinWidth,\n    splitPanelReportedSize,\n  } = useAppLayoutInternals();\n\n  if (!splitPanel) {\n    return null;\n  }\n\n  return (\n    <Transition in={isSplitPanelOpen ?? false} exit={false}>\n      {(state, transitionEventsRef) => (\n        <section\n          aria-hidden={!isSplitPanelOpen || splitPanelPosition === 'bottom' ? true : false}\n          className={clsx(styles['split-panel-side'], styles[`position-${splitPanelPosition}`], {\n            [styles.animating]: state === 'entering',\n            [styles['is-split-panel-open']]: isSplitPanelOpen,\n          })}\n          ref={transitionEventsRef}\n          style={{\n            [customCssProps.splitPanelMaxWidth]: `${splitPanelMaxWidth}px`,\n            [customCssProps.splitPanelMinWidth]: `${splitPanelMinWidth}px`,\n            [customCssProps.splitPanelReportedHeaderSize]: `${splitPanelReportedSize}px`,\n          }}\n        >\n          <div className={clsx(styles['animated-content'])}>{splitPanelPosition === 'side' && splitPanel}</div>\n        </section>\n      )}\n    </Transition>\n  );\n}\n\n/**\n * This logic will determine what the Split Panel position should be. It reconciles the possibility\n * of being in forced position with the current selected position in the settings.\n */\nexport function getSplitPanelPosition(\n  isSplitPanelForcedPosition: boolean,\n  splitPanelPreferences: AppLayoutProps.SplitPanelPreferences | undefined\n) {\n  let splitPanelPosition: AppLayoutProps.SplitPanelPosition = 'bottom';\n\n  if (!isSplitPanelForcedPosition && splitPanelPreferences?.position === 'side') {\n    splitPanelPosition = 'side';\n  }\n\n  return splitPanelPosition;\n}\nSplitPanel.Bottom = SplitPanelBottom;\nSplitPanel.Side = SplitPanelSide;\n\nexport default SplitPanel;\n"]}

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

@@ -1,65 +1,65 @@
 
     import './styles.scoped.css';
     export default {
-  "appbar": "awsui_appbar_hyvsj_1xn91_93",
-  "appbar-nav": "awsui_appbar-nav_hyvsj_1xn91_117",
-  "breadcrumbs": "awsui_breadcrumbs_hyvsj_1xn91_121",
-  "appbar-tools": "awsui_appbar-tools_hyvsj_1xn91_125",
-  "has-breadcrumbs": "awsui_has-breadcrumbs_hyvsj_1xn91_166",
-  "has-notifications-content": "awsui_has-notifications-content_hyvsj_1xn91_173",
-  "has-header": "awsui_has-header_hyvsj_1xn91_179",
-  "has-dynamic-overlap-height": "awsui_has-dynamic-overlap-height_hyvsj_1xn91_179",
-  "content-type-wizard": "awsui_content-type-wizard_hyvsj_1xn91_180",
-  "content-type-cards": "awsui_content-type-cards_hyvsj_1xn91_183",
-  "content-type-table": "awsui_content-type-table_hyvsj_1xn91_184",
-  "has-sticky-background": "awsui_has-sticky-background_hyvsj_1xn91_187",
-  "background": "awsui_background_hyvsj_1xn91_221",
-  "notifications-appbar-header": "awsui_notifications-appbar-header_hyvsj_1xn91_224",
-  "sticky-notifications": "awsui_sticky-notifications_hyvsj_1xn91_236",
-  "overlap": "awsui_overlap_hyvsj_1xn91_242",
-  "content": "awsui_content_hyvsj_1xn91_180",
-  "layout": "awsui_layout_hyvsj_1xn91_329",
-  "has-max-content-width": "awsui_has-max-content-width_hyvsj_1xn91_411",
-  "is-overlap-disabled": "awsui_is-overlap-disabled_hyvsj_1xn91_438",
-  "disable-body-scroll": "awsui_disable-body-scroll_hyvsj_1xn91_441",
-  "has-sticky-notifications": "awsui_has-sticky-notifications_hyvsj_1xn91_445",
-  "has-split-panel": "awsui_has-split-panel_hyvsj_1xn91_459",
-  "split-panel-position-bottom": "awsui_split-panel-position-bottom_hyvsj_1xn91_459",
-  "has-content-gap-left": "awsui_has-content-gap-left_hyvsj_1xn91_471",
-  "has-content-gap-right": "awsui_has-content-gap-right_hyvsj_1xn91_474",
-  "block-body-scroll": "awsui_block-body-scroll_hyvsj_1xn91_489",
-  "container": "awsui_container_hyvsj_1xn91_497",
-  "disable-content-paddings": "awsui_disable-content-paddings_hyvsj_1xn91_523",
-  "is-navigation-open": "awsui_is-navigation-open_hyvsj_1xn91_528",
-  "is-tools-open": "awsui_is-tools-open_hyvsj_1xn91_531",
-  "is-split-panel-open": "awsui_is-split-panel-open_hyvsj_1xn91_531",
-  "split-panel-position-side": "awsui_split-panel-position-side_hyvsj_1xn91_531",
-  "content-type-default": "awsui_content-type-default_hyvsj_1xn91_551",
-  "content-type-form": "awsui_content-type-form_hyvsj_1xn91_551",
-  "unfocusable": "awsui_unfocusable_hyvsj_1xn91_592",
-  "navigation-container": "awsui_navigation-container_hyvsj_1xn91_600",
-  "show-navigation": "awsui_show-navigation_hyvsj_1xn91_635",
-  "animating": "awsui_animating_hyvsj_1xn91_657",
-  "showButtons": "awsui_showButtons_hyvsj_1xn91_1",
-  "navigation": "awsui_navigation_hyvsj_1xn91_600",
-  "openNavigation": "awsui_openNavigation_hyvsj_1xn91_1",
-  "animated-content": "awsui_animated-content_hyvsj_1xn91_718",
-  "hide-navigation": "awsui_hide-navigation_hyvsj_1xn91_727",
-  "notifications": "awsui_notifications_hyvsj_1xn91_224",
-  "split-panel-bottom": "awsui_split-panel-bottom_hyvsj_1xn91_792",
-  "position-bottom": "awsui_position-bottom_hyvsj_1xn91_838",
-  "openSplitPanelBottom": "awsui_openSplitPanelBottom_hyvsj_1xn91_1",
-  "split-panel-side": "awsui_split-panel-side_hyvsj_1xn91_867",
-  "position-side": "awsui_position-side_hyvsj_1xn91_895",
-  "openSplitPanelSide": "awsui_openSplitPanelSide_hyvsj_1xn91_1",
-  "tools-container": "awsui_tools-container_hyvsj_1xn91_932",
-  "tools": "awsui_tools_hyvsj_1xn91_932",
-  "openTools": "awsui_openTools_hyvsj_1xn91_1",
-  "has-tools-form-persistence": "awsui_has-tools-form-persistence_hyvsj_1xn91_1017",
-  "hide-tools": "awsui_hide-tools_hyvsj_1xn91_1027",
-  "show-tools": "awsui_show-tools_hyvsj_1xn91_1039",
-  "has-tools-form": "awsui_has-tools-form_hyvsj_1xn91_1017",
-  "trigger": "awsui_trigger_hyvsj_1xn91_1096",
-  "selected": "awsui_selected_hyvsj_1xn91_1135"
+  "appbar": "awsui_appbar_hyvsj_12mno_93",
+  "appbar-nav": "awsui_appbar-nav_hyvsj_12mno_117",
+  "breadcrumbs": "awsui_breadcrumbs_hyvsj_12mno_121",
+  "appbar-tools": "awsui_appbar-tools_hyvsj_12mno_125",
+  "has-breadcrumbs": "awsui_has-breadcrumbs_hyvsj_12mno_166",
+  "has-notifications-content": "awsui_has-notifications-content_hyvsj_12mno_173",
+  "has-header": "awsui_has-header_hyvsj_12mno_179",
+  "has-dynamic-overlap-height": "awsui_has-dynamic-overlap-height_hyvsj_12mno_179",
+  "content-type-wizard": "awsui_content-type-wizard_hyvsj_12mno_180",
+  "content-type-cards": "awsui_content-type-cards_hyvsj_12mno_183",
+  "content-type-table": "awsui_content-type-table_hyvsj_12mno_184",
+  "has-sticky-background": "awsui_has-sticky-background_hyvsj_12mno_187",
+  "background": "awsui_background_hyvsj_12mno_221",
+  "notifications-appbar-header": "awsui_notifications-appbar-header_hyvsj_12mno_224",
+  "sticky-notifications": "awsui_sticky-notifications_hyvsj_12mno_236",
+  "overlap": "awsui_overlap_hyvsj_12mno_242",
+  "content": "awsui_content_hyvsj_12mno_180",
+  "layout": "awsui_layout_hyvsj_12mno_333",
+  "has-max-content-width": "awsui_has-max-content-width_hyvsj_12mno_415",
+  "is-overlap-disabled": "awsui_is-overlap-disabled_hyvsj_12mno_442",
+  "disable-body-scroll": "awsui_disable-body-scroll_hyvsj_12mno_445",
+  "has-sticky-notifications": "awsui_has-sticky-notifications_hyvsj_12mno_449",
+  "has-split-panel": "awsui_has-split-panel_hyvsj_12mno_463",
+  "split-panel-position-bottom": "awsui_split-panel-position-bottom_hyvsj_12mno_463",
+  "has-content-gap-left": "awsui_has-content-gap-left_hyvsj_12mno_475",
+  "has-content-gap-right": "awsui_has-content-gap-right_hyvsj_12mno_478",
+  "block-body-scroll": "awsui_block-body-scroll_hyvsj_12mno_493",
+  "container": "awsui_container_hyvsj_12mno_501",
+  "disable-content-paddings": "awsui_disable-content-paddings_hyvsj_12mno_527",
+  "is-navigation-open": "awsui_is-navigation-open_hyvsj_12mno_532",
+  "is-tools-open": "awsui_is-tools-open_hyvsj_12mno_535",
+  "is-split-panel-open": "awsui_is-split-panel-open_hyvsj_12mno_535",
+  "split-panel-position-side": "awsui_split-panel-position-side_hyvsj_12mno_535",
+  "content-type-default": "awsui_content-type-default_hyvsj_12mno_555",
+  "content-type-form": "awsui_content-type-form_hyvsj_12mno_555",
+  "unfocusable": "awsui_unfocusable_hyvsj_12mno_596",
+  "navigation-container": "awsui_navigation-container_hyvsj_12mno_604",
+  "show-navigation": "awsui_show-navigation_hyvsj_12mno_639",
+  "animating": "awsui_animating_hyvsj_12mno_661",
+  "showButtons": "awsui_showButtons_hyvsj_12mno_1",
+  "navigation": "awsui_navigation_hyvsj_12mno_604",
+  "openNavigation": "awsui_openNavigation_hyvsj_12mno_1",
+  "animated-content": "awsui_animated-content_hyvsj_12mno_722",
+  "hide-navigation": "awsui_hide-navigation_hyvsj_12mno_731",
+  "notifications": "awsui_notifications_hyvsj_12mno_224",
+  "split-panel-bottom": "awsui_split-panel-bottom_hyvsj_12mno_796",
+  "position-bottom": "awsui_position-bottom_hyvsj_12mno_842",
+  "openSplitPanelBottom": "awsui_openSplitPanelBottom_hyvsj_12mno_1",
+  "split-panel-side": "awsui_split-panel-side_hyvsj_12mno_871",
+  "position-side": "awsui_position-side_hyvsj_12mno_899",
+  "openSplitPanelSide": "awsui_openSplitPanelSide_hyvsj_12mno_1",
+  "tools-container": "awsui_tools-container_hyvsj_12mno_936",
+  "tools": "awsui_tools_hyvsj_12mno_936",
+  "openTools": "awsui_openTools_hyvsj_12mno_1",
+  "has-tools-form-persistence": "awsui_has-tools-form-persistence_hyvsj_12mno_1021",
+  "hide-tools": "awsui_hide-tools_hyvsj_12mno_1031",
+  "show-tools": "awsui_show-tools_hyvsj_12mno_1043",
+  "has-tools-form": "awsui_has-tools-form_hyvsj_12mno_1021",
+  "trigger": "awsui_trigger_hyvsj_12mno_1100",
+  "selected": "awsui_selected_hyvsj_12mno_1139"
 };