@cloudscape-design/components-themeable 3.0.109 → 3.0.110

package/lib/internal/scss/app-layout/visual-refresh/app-bar.scss

@@ -89,13 +89,22 @@ section.appbar {
     }
 
     /*
-    If the content type supports a dark sticky header then 
-    minimal bottom padding should be on the breadcrumbs to
+    Table and cards content types implement a custom dark header. 
+    Minimal bottom padding should be on the breadcrumbs to
     reduce the the vertical distance from the main content.
     */
     > .breadcrumbs.content-type-cards,
     > .breadcrumbs.content-type-table {
       padding-bottom: awsui.$space-xxs;
+    }
+
+    /*
+    If a child component tells the AppLayout to have a sticky 
+    background (typically because of a stickyHeader with a 
+    full-page variant) the z-index of the breadcrumbs needs to 
+    be lifted so it doesn't render behind the background element.
+    */
+    > .breadcrumbs.has-sticky-background {
       z-index: 799;
     }
   }

package/lib/internal/scss/app-layout/visual-refresh/background.scss

@@ -21,8 +21,7 @@ div.background {
     behind the notifications above the content dark header.
     */
     @include styles.media-breakpoint-up(styles.$breakpoint-x-small) {
-      &.content-type-cards.has-notifications-content.sticky-notifications,
-      &.content-type-table.has-notifications-content.sticky-notifications {
+      &.has-sticky-background.has-notifications-content.sticky-notifications {
         position: sticky;
         top: var(#{custom-props.$offsetTop});
         z-index: 799;
@@ -36,15 +35,13 @@ div.background {
     grid-row: 4;
 
     /*
-    The cards and table content types have sticky header content that 
-    will retain position on viewport scroll. They are setting the 
-    dynamicOverlapHeight property in the AppLayout context with a container query 
-    that observes the content height. The background needs to be sticky in 
-    desktop viewports without overlapping notification content if it exists.
+    The cards and table content types can have sticky header content that 
+    will retain position on viewport scroll. The overlap background needs to 
+    be sticky in desktop viewports to prevent light background gutters with 
+    the high contrast header background only in the content area.
     */
     @include styles.media-breakpoint-up(styles.$breakpoint-x-small) {
-      &.content-type-cards,
-      &.content-type-table {
+      &.has-sticky-background {
         position: sticky;
         top: var(#{custom-props.$offsetTopWithNotifications});
         z-index: 799;

package/lib/internal/scss/app-layout/visual-refresh/navigation.scss

@@ -17,6 +17,18 @@
   top: var(#{custom-props.$offsetTop});
   z-index: 850;
 
+  /*
+  The navigation and tools containers (that contain the toggle buttons)
+  stretch the full height of the app layout. Normally, this wouldn't be an
+  issue because they sit above the app layout's content padding.
+  
+  But if disableContentPaddings is set to true and there are buttons on the
+  left/right edges of the screen, they will be covered by the containers. So
+  we need to disable pointer events in the container and re-enable them in
+  the panels and toggle buttons.
+  */
+  pointer-events: none;
+
   @include styles.media-breakpoint-up(styles.$breakpoint-xx-large) {
     #{custom-props.$navigationWidth}: 320px;
   }
@@ -73,6 +85,7 @@ nav.navigation {
   overscroll-behavior-y: contain;
   position: relative;
   word-wrap: break-word;
+  pointer-events: auto;
 
   // Animation for the Navigation opacity and width when it is added to the DOM
   @keyframes openNavigation {

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

@@ -84,6 +84,7 @@ section.split-panel-bottom {
 section.split-panel-side {
   height: 100%;
   overflow-x: hidden;
+  pointer-events: auto;
 
   // Animation for opacity and width when pening the Split Panel
   @keyframes openSplitPanelSide {

package/lib/internal/scss/app-layout/visual-refresh/tools.scss

@@ -33,6 +33,8 @@ viewport size and state of the Tools drawer.
   top: var(#{custom-props.$offsetTop});
   z-index: 850;
 
+  pointer-events: none;
+
   @include styles.media-breakpoint-up(styles.$breakpoint-xx-large) {
     #{custom-props.$toolsWidth}: 360px;
   }
@@ -58,6 +60,8 @@ viewport size and state of the Tools drawer.
   position: relative;
   word-wrap: break-word;
 
+  pointer-events: auto;
+
   // Animation for the Tools opacity and width when it is added to the DOM
   @keyframes openTools {
     from {

package/lib/internal/scss/app-layout/visual-refresh/trigger-button.scss

@@ -23,6 +23,8 @@ handleSplitPanelMaxWidth function in the context.
   padding: 0 awsui.$space-s;
   width: awsui.$space-layout-toggle-diameter;
 
+  pointer-events: auto;
+
   @include focus-visible.when-visible {
     @include styles.focus-highlight(3px);
   }

package/lib/internal/scss/container/styles.scss

@@ -99,7 +99,21 @@
   }
 
   &-variant-full-page.header-stuck {
-    box-shadow: awsui.$shadow-sticky;
+    box-shadow: none;
+
+    &::after {
+      content: '';
+
+      position: absolute;
+      right: 0;
+      left: 0;
+      bottom: 0;
+      top: 0;
+
+      box-shadow: awsui.$shadow-sticky;
+      // This polygon only shows the part of the shadow that is lower than the element itself.
+      clip-path: polygon(-999% 100%, 999% 100%, 999% 999%, -999% 999%);
+    }
   }
 }
 

package/lib/internal/scss/split-panel/icons/icons-styles.scss

@@ -54,6 +54,9 @@
   &--disabled {
     fill: awsui.$color-background-control-disabled;
   }
+  &--column-header {
+    fill: awsui.$color-text-input-disabled;
+  }
   &--window {
     stroke: awsui.$color-background-home-header;
     fill: awsui.$color-background-container-content;
@@ -65,7 +68,7 @@
     fill: awsui.$color-text-body-default;
   }
   &--separator {
-    stroke: awsui.$color-border-button-primary-disabled;
+    stroke: awsui.$color-border-divider-default;
   }
   &--input-default {
     fill: awsui.$color-border-input-default;

package/lib/internal/scss/table/header-cell/styles.scss

@@ -19,11 +19,11 @@
   &-sticky {
     border-bottom: awsui.$border-table-sticky-width solid awsui.$color-border-divider-default;
   }
-  &-stuck {
+  &-stuck:not(.header-cell-variant-full-page) {
     border-bottom-color: transparent;
   }
-  &-variant-full-page {
-    border-bottom: awsui.$space-scaled-xxs solid transparent;
+  &-variant-full-page.header-cell-hidden {
+    border-bottom-color: transparent;
   }
   &:first-child {
     padding-left: awsui.$space-xs;

package/lib/internal/scss/table/styles.scss

@@ -141,6 +141,14 @@
   }
 }
 
+/*
+The dynamic height dark header needs a background that will cover
+the default white background of the container component.
+*/
+.dark-header {
+  background-color: awsui.$color-background-layout-main;
+}
+
 .header-secondary {
   overflow: auto;
   -ms-overflow-style: none; /* Internet Explorer 10+ */
@@ -159,6 +167,9 @@
   &::-webkit-scrollbar {
     display: none; /* Safari and Chrome */
   }
+  &.table-has-header {
+    border-top: awsui.$border-divider-list-width solid awsui.$color-border-container-divider;
+  }
 }
 
 .header-controls {
@@ -174,9 +185,6 @@
     padding-right: awsui.$space-table-header-horizontal;
     padding-top: awsui.$space-table-embedded-header-top;
   }
-  & + .header-secondary {
-    border-top: awsui.$border-divider-list-width solid awsui.$color-border-container-divider;
-  }
 }
 
 .divider {

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

@@ -1 +1 @@
-{"version":3,"file":"app-bar.d.ts","sourceRoot":"","sources":["../../../../src/app-layout/visual-refresh/app-bar.tsx"],"names":[],"mappings":"AAUA;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,MAAM,uBA2F7B"}
+{"version":3,"file":"app-bar.d.ts","sourceRoot":"","sources":["../../../../src/app-layout/visual-refresh/app-bar.tsx"],"names":[],"mappings":"AAUA;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,MAAM,uBA6F7B"}

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

@@ -14,7 +14,7 @@ import { useFocusControl } from '../utils/use-focus-control';
 export default function AppBar() {
     var _a, _b, _c, _d;
     var _e, _f, _g;
-    var _h = useContext(AppLayoutContext), ariaLabels = _h.ariaLabels, breadcrumbs = _h.breadcrumbs, contentHeader = _h.contentHeader, contentType = _h.contentType, dynamicOverlapHeight = _h.dynamicOverlapHeight, handleNavigationClick = _h.handleNavigationClick, handleToolsClick = _h.handleToolsClick, hasNotificationsContent = _h.hasNotificationsContent, isMobile = _h.isMobile, navigationHide = _h.navigationHide, isNavigationOpen = _h.isNavigationOpen, isToolsOpen = _h.isToolsOpen, toolsHide = _h.toolsHide, isAnyPanelOpen = _h.isAnyPanelOpen;
+    var _h = useContext(AppLayoutContext), ariaLabels = _h.ariaLabels, breadcrumbs = _h.breadcrumbs, contentHeader = _h.contentHeader, contentType = _h.contentType, dynamicOverlapHeight = _h.dynamicOverlapHeight, handleNavigationClick = _h.handleNavigationClick, handleToolsClick = _h.handleToolsClick, hasNotificationsContent = _h.hasNotificationsContent, hasStickyBackground = _h.hasStickyBackground, isMobile = _h.isMobile, navigationHide = _h.navigationHide, isNavigationOpen = _h.isNavigationOpen, isToolsOpen = _h.isToolsOpen, toolsHide = _h.toolsHide, isAnyPanelOpen = _h.isAnyPanelOpen;
     var focusRefsNav = useFocusControl(isNavigationOpen).refs;
     var focusRefsTools = useFocusControl(isToolsOpen, true).refs;
     if (navigationHide && !breadcrumbs && toolsHide) {
@@ -31,6 +31,7 @@ export default function AppBar() {
                 _c[styles['has-dynamic-overlap-height']] = dynamicOverlapHeight > 0,
                 _c[styles['has-header']] = contentHeader,
                 _c[styles['has-notifications-content']] = hasNotificationsContent,
+                _c[styles['has-sticky-background']] = hasStickyBackground,
                 _c)) }, breadcrumbs)),
         !toolsHide && isMobile && (React.createElement("aside", { className: clsx(styles['appbar-tools'], (_d = {}, _d[testutilStyles['drawer-closed']] = !isToolsOpen, _d)), "aria-hidden": isToolsOpen, "aria-label": (_f = ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.tools) !== null && _f !== void 0 ? _f : undefined },
             React.createElement(InternalButton, { className: testutilStyles['tools-toggle'], ariaExpanded: isToolsOpen, disabled: isAnyPanelOpen, ariaLabel: (_g = ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.toolsToggle) !== null && _g !== void 0 ? _g : undefined, iconName: "status-info", formAction: "none", onClick: function () { return handleToolsClick(true); }, variant: "icon", ref: focusRefsTools.toggle, __nativeAttributes: { 'aria-haspopup': true } })))));

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

@@ -1 +1 @@
-{"version":3,"file":"app-bar.js","sourceRoot":"","sources":["../../../../src/app-layout/visual-refresh/app-bar.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, { useContext } from 'react';\nimport clsx from 'clsx';\nimport { AppLayoutContext } from './context';\nimport { InternalButton } from '../../button/internal';\nimport styles from './styles.css.js';\nimport testutilStyles from '../test-classes/styles.css.js';\nimport { useFocusControl } from '../utils/use-focus-control';\n\n/**\n * The CSS class 'awsui-context-content-header' needs to be added to the root element so\n * that the design tokens used are overridden with the appropriate values.\n */\nexport default function AppBar() {\n  const {\n    ariaLabels,\n    breadcrumbs,\n    contentHeader,\n    contentType,\n    dynamicOverlapHeight,\n    handleNavigationClick,\n    handleToolsClick,\n    hasNotificationsContent,\n    isMobile,\n    navigationHide,\n    isNavigationOpen,\n    isToolsOpen,\n    toolsHide,\n    isAnyPanelOpen,\n  } = useContext(AppLayoutContext);\n  const { refs: focusRefsNav } = useFocusControl(isNavigationOpen);\n  const { refs: focusRefsTools } = useFocusControl(isToolsOpen, true);\n\n  if (navigationHide && !breadcrumbs && toolsHide) {\n    return null;\n  }\n\n  return (\n    <section\n      aria-hidden={!isMobile && !breadcrumbs ? true : undefined}\n      className={clsx(\n        styles.appbar,\n        {\n          [styles['has-breadcrumbs']]: breadcrumbs,\n          [styles.unfocusable]: isMobile && isAnyPanelOpen,\n          [testutilStyles['mobile-bar']]: isMobile,\n        },\n        'awsui-context-content-header'\n      )}\n    >\n      {!navigationHide && isMobile && (\n        <nav\n          className={clsx(styles['appbar-nav'], { [testutilStyles['drawer-closed']]: !isNavigationOpen })}\n          aria-hidden={isNavigationOpen}\n        >\n          <InternalButton\n            ariaLabel={ariaLabels?.navigationToggle ?? undefined}\n            ariaExpanded={isNavigationOpen}\n            iconName=\"menu\"\n            formAction=\"none\"\n            onClick={() => handleNavigationClick(true)}\n            variant=\"icon\"\n            className={testutilStyles['navigation-toggle']}\n            ref={focusRefsNav.toggle}\n            disabled={isAnyPanelOpen}\n            __nativeAttributes={{ 'aria-haspopup': true }}\n          />\n        </nav>\n      )}\n\n      {breadcrumbs && (\n        <div\n          className={clsx(styles.breadcrumbs, styles[`content-type-${contentType}`], testutilStyles.breadcrumbs, {\n            [styles['has-dynamic-overlap-height']]: dynamicOverlapHeight > 0,\n            [styles['has-header']]: contentHeader,\n            [styles['has-notifications-content']]: hasNotificationsContent,\n          })}\n        >\n          {breadcrumbs}\n        </div>\n      )}\n\n      {!toolsHide && isMobile && (\n        <aside\n          className={clsx(styles['appbar-tools'], { [testutilStyles['drawer-closed']]: !isToolsOpen })}\n          aria-hidden={isToolsOpen}\n          aria-label={ariaLabels?.tools ?? undefined}\n        >\n          <InternalButton\n            className={testutilStyles['tools-toggle']}\n            ariaExpanded={isToolsOpen}\n            disabled={isAnyPanelOpen}\n            ariaLabel={ariaLabels?.toolsToggle ?? undefined}\n            iconName=\"status-info\"\n            formAction=\"none\"\n            onClick={() => handleToolsClick(true)}\n            variant=\"icon\"\n            ref={focusRefsTools.toggle}\n            __nativeAttributes={{ 'aria-haspopup': true }}\n          />\n        </aside>\n      )}\n    </section>\n  );\n}\n"]}
+{"version":3,"file":"app-bar.js","sourceRoot":"","sources":["../../../../src/app-layout/visual-refresh/app-bar.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, { useContext } from 'react';\nimport clsx from 'clsx';\nimport { AppLayoutContext } from './context';\nimport { InternalButton } from '../../button/internal';\nimport styles from './styles.css.js';\nimport testutilStyles from '../test-classes/styles.css.js';\nimport { useFocusControl } from '../utils/use-focus-control';\n\n/**\n * The CSS class 'awsui-context-content-header' needs to be added to the root element so\n * that the design tokens used are overridden with the appropriate values.\n */\nexport default function AppBar() {\n  const {\n    ariaLabels,\n    breadcrumbs,\n    contentHeader,\n    contentType,\n    dynamicOverlapHeight,\n    handleNavigationClick,\n    handleToolsClick,\n    hasNotificationsContent,\n    hasStickyBackground,\n    isMobile,\n    navigationHide,\n    isNavigationOpen,\n    isToolsOpen,\n    toolsHide,\n    isAnyPanelOpen,\n  } = useContext(AppLayoutContext);\n  const { refs: focusRefsNav } = useFocusControl(isNavigationOpen);\n  const { refs: focusRefsTools } = useFocusControl(isToolsOpen, true);\n\n  if (navigationHide && !breadcrumbs && toolsHide) {\n    return null;\n  }\n\n  return (\n    <section\n      aria-hidden={!isMobile && !breadcrumbs ? true : undefined}\n      className={clsx(\n        styles.appbar,\n        {\n          [styles['has-breadcrumbs']]: breadcrumbs,\n          [styles.unfocusable]: isMobile && isAnyPanelOpen,\n          [testutilStyles['mobile-bar']]: isMobile,\n        },\n        'awsui-context-content-header'\n      )}\n    >\n      {!navigationHide && isMobile && (\n        <nav\n          className={clsx(styles['appbar-nav'], { [testutilStyles['drawer-closed']]: !isNavigationOpen })}\n          aria-hidden={isNavigationOpen}\n        >\n          <InternalButton\n            ariaLabel={ariaLabels?.navigationToggle ?? undefined}\n            ariaExpanded={isNavigationOpen}\n            iconName=\"menu\"\n            formAction=\"none\"\n            onClick={() => handleNavigationClick(true)}\n            variant=\"icon\"\n            className={testutilStyles['navigation-toggle']}\n            ref={focusRefsNav.toggle}\n            disabled={isAnyPanelOpen}\n            __nativeAttributes={{ 'aria-haspopup': true }}\n          />\n        </nav>\n      )}\n\n      {breadcrumbs && (\n        <div\n          className={clsx(styles.breadcrumbs, styles[`content-type-${contentType}`], testutilStyles.breadcrumbs, {\n            [styles['has-dynamic-overlap-height']]: dynamicOverlapHeight > 0,\n            [styles['has-header']]: contentHeader,\n            [styles['has-notifications-content']]: hasNotificationsContent,\n            [styles['has-sticky-background']]: hasStickyBackground,\n          })}\n        >\n          {breadcrumbs}\n        </div>\n      )}\n\n      {!toolsHide && isMobile && (\n        <aside\n          className={clsx(styles['appbar-tools'], { [testutilStyles['drawer-closed']]: !isToolsOpen })}\n          aria-hidden={isToolsOpen}\n          aria-label={ariaLabels?.tools ?? undefined}\n        >\n          <InternalButton\n            className={testutilStyles['tools-toggle']}\n            ariaExpanded={isToolsOpen}\n            disabled={isAnyPanelOpen}\n            ariaLabel={ariaLabels?.toolsToggle ?? undefined}\n            iconName=\"status-info\"\n            formAction=\"none\"\n            onClick={() => handleToolsClick(true)}\n            variant=\"icon\"\n            ref={focusRefsTools.toggle}\n            __nativeAttributes={{ 'aria-haspopup': true }}\n          />\n        </aside>\n      )}\n    </section>\n  );\n}\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"background.d.ts","sourceRoot":"","sources":["../../../../src/app-layout/visual-refresh/background.tsx"],"names":[],"mappings":"AAOA;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,UAAU,gBAejC"}
+{"version":3,"file":"background.d.ts","sourceRoot":"","sources":["../../../../src/app-layout/visual-refresh/background.tsx"],"names":[],"mappings":"AAOA;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,UAAU,gBAoBjC"}

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

@@ -9,13 +9,16 @@ import styles from './styles.css.js';
  * that the design tokens used are overridden with the appropriate values.
  */
 export default function Background() {
-    var _a;
-    var _b = useContext(AppLayoutContext), contentType = _b.contentType, hasNotificationsContent = _b.hasNotificationsContent, stickyNotifications = _b.stickyNotifications;
+    var _a, _b;
+    var _c = useContext(AppLayoutContext), hasNotificationsContent = _c.hasNotificationsContent, hasStickyBackground = _c.hasStickyBackground, stickyNotifications = _c.stickyNotifications;
     return (React.createElement("div", { className: clsx(styles.background, 'awsui-context-content-header') },
-        React.createElement("div", { className: clsx(styles['notifications-appbar-header'], styles["content-type-".concat(contentType)], (_a = {},
+        React.createElement("div", { className: clsx(styles['notifications-appbar-header'], (_a = {},
                 _a[styles['has-notifications-content']] = hasNotificationsContent,
+                _a[styles['has-sticky-background']] = hasStickyBackground,
                 _a[styles['sticky-notifications']] = stickyNotifications,
                 _a)) }),
-        React.createElement("div", { className: clsx(styles.overlap, styles["content-type-".concat(contentType)]) })));
+        React.createElement("div", { className: clsx(styles.overlap, (_b = {},
+                _b[styles['has-sticky-background']] = hasStickyBackground,
+                _b)) })));
 }
 //# sourceMappingURL=background.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"background.js","sourceRoot":"","sources":["../../../../src/app-layout/visual-refresh/background.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,gBAAgB,EAAE,MAAM,WAAW,CAAC;AAC7C,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,UAAU;;IAC1B,IAAA,KAAgE,UAAU,CAAC,gBAAgB,CAAC,EAA1F,WAAW,iBAAA,EAAE,uBAAuB,6BAAA,EAAE,mBAAmB,yBAAiC,CAAC;IAEnG,OAAO,CACL,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,UAAU,EAAE,8BAA8B,CAAC;QACrE,6BACE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,6BAA6B,CAAC,EAAE,MAAM,CAAC,uBAAgB,WAAW,CAAE,CAAC;gBAC1F,GAAC,MAAM,CAAC,2BAA2B,CAAC,IAAG,uBAAuB;gBAC9D,GAAC,MAAM,CAAC,sBAAsB,CAAC,IAAG,mBAAmB;oBACrD,GACF;QAEF,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,OAAO,EAAE,MAAM,CAAC,uBAAgB,WAAW,CAAE,CAAC,CAAC,GAAI,CAC3E,CACP,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useContext } from 'react';\nimport clsx from 'clsx';\nimport { AppLayoutContext } from './context';\nimport styles from './styles.css.js';\n\n/**\n * The CSS class 'awsui-context-content-header' needs to be added to the root element so\n * that the design tokens used are overridden with the appropriate values.\n */\nexport default function Background() {\n  const { contentType, hasNotificationsContent, stickyNotifications } = useContext(AppLayoutContext);\n\n  return (\n    <div className={clsx(styles.background, 'awsui-context-content-header')}>\n      <div\n        className={clsx(styles['notifications-appbar-header'], styles[`content-type-${contentType}`], {\n          [styles['has-notifications-content']]: hasNotificationsContent,\n          [styles['sticky-notifications']]: stickyNotifications,\n        })}\n      />\n\n      <div className={clsx(styles.overlap, styles[`content-type-${contentType}`])} />\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"background.js","sourceRoot":"","sources":["../../../../src/app-layout/visual-refresh/background.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,gBAAgB,EAAE,MAAM,WAAW,CAAC;AAC7C,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,UAAU;;IAC1B,IAAA,KAAwE,UAAU,CAAC,gBAAgB,CAAC,EAAlG,uBAAuB,6BAAA,EAAE,mBAAmB,yBAAA,EAAE,mBAAmB,yBAAiC,CAAC;IAE3G,OAAO,CACL,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,UAAU,EAAE,8BAA8B,CAAC;QACrE,6BACE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,6BAA6B,CAAC;gBACnD,GAAC,MAAM,CAAC,2BAA2B,CAAC,IAAG,uBAAuB;gBAC9D,GAAC,MAAM,CAAC,uBAAuB,CAAC,IAAG,mBAAmB;gBACtD,GAAC,MAAM,CAAC,sBAAsB,CAAC,IAAG,mBAAmB;oBACrD,GACF;QAEF,6BACE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,OAAO;gBAC5B,GAAC,MAAM,CAAC,uBAAuB,CAAC,IAAG,mBAAmB;oBACtD,GACF,CACE,CACP,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useContext } from 'react';\nimport clsx from 'clsx';\nimport { AppLayoutContext } from './context';\nimport styles from './styles.css.js';\n\n/**\n * The CSS class 'awsui-context-content-header' needs to be added to the root element so\n * that the design tokens used are overridden with the appropriate values.\n */\nexport default function Background() {\n  const { hasNotificationsContent, hasStickyBackground, stickyNotifications } = useContext(AppLayoutContext);\n\n  return (\n    <div className={clsx(styles.background, 'awsui-context-content-header')}>\n      <div\n        className={clsx(styles['notifications-appbar-header'], {\n          [styles['has-notifications-content']]: hasNotificationsContent,\n          [styles['has-sticky-background']]: hasStickyBackground,\n          [styles['sticky-notifications']]: stickyNotifications,\n        })}\n      />\n\n      <div\n        className={clsx(styles.overlap, {\n          [styles['has-sticky-background']]: hasStickyBackground,\n        })}\n      />\n    </div>\n  );\n}\n"]}

package/lib/internal/template/app-layout/visual-refresh/context.d.ts

@@ -17,6 +17,7 @@ export declare const AppLayoutContext: React.Context<{
     handleToolsClick: (value: boolean) => void;
     hasDefaultToolsWidth: boolean;
     hasNotificationsContent: boolean;
+    hasStickyBackground: boolean;
     isAnyPanelOpen: boolean;
     isMobile: boolean;
     isNavigationOpen: boolean;
@@ -31,6 +32,7 @@ export declare const AppLayoutContext: React.Context<{
     notificationsHeight: number;
     offsetBottom: number;
     setDynamicOverlapHeight: (value: number) => void;
+    setHasStickyBackground: (value: boolean) => void;
     setIsNavigationOpen: (value: boolean) => void;
     setIsToolsOpen: (value: boolean) => void;
     setOffsetBottom: (value: number) => void;

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

@@ -1 +1 @@
-{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../../src/app-layout/visual-refresh/context.tsx"],"names":[],"mappings":"AAEA,OAAO,KASN,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAW/C,OAAO,EAAE,iBAAiB,EAAmB,MAAM,4BAA4B,CAAC;AAkGhF;;;;GAIG;AACH,eAAO,MAAM,gBAAgB;0BApGL,MAAM;2BACL,MAAM,IAAI;oCACD,OAAO,KAAK,IAAI;gDACJ,eAAe,qBAAqB,KAAK,IAAI;qCACxD;QAAE,IAAI,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI;8BAChC,OAAO,KAAK,IAAI;0BACpB,OAAO;6BACJ,OAAO;oBAChB,OAAO;cACb,OAAO;sBACC,OAAO;gCACG,OAAO;;iBAEtB,OAAO;mBACL,MAAM,GAAG,CAAC,WAAW,CAAC;iBACxB,MAAM;iBACN,MAAM,GAAG,CAAC,cAAc,CAAC;oBACtB,MAAM;0BACA,MAAM,GAAG,CAAC,cAAc,CAAC;yBAC1B,MAAM;kBACb,MAAM;qCACa,MAAM,KAAK,IAAI;iCACnB,OAAO,KAAK,IAAI;4BACrB,OAAO,KAAK,IAAI;6BACf,MAAM,KAAK,IAAI;uCACL,MAAM,KAAK,IAAI;kBACpC,MAAM;kBACN,MAAM;wBACA,MAAM;wBACN,MAAM;wBACN,eAAe,kBAAkB;4BAC7B,MAAM;uBACX,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAoEwB,CAAC;AAM/D,eAAO,MAAM,iBAAiB;cAHlB,MAAM,SAAS;4CA8a1B,CAAC"}
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../../src/app-layout/visual-refresh/context.tsx"],"names":[],"mappings":"AAEA,OAAO,KASN,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAW/C,OAAO,EAAE,iBAAiB,EAAmB,MAAM,4BAA4B,CAAC;AAsGhF;;;;GAIG;AACH,eAAO,MAAM,gBAAgB;0BAxGL,MAAM;2BACL,MAAM,IAAI;oCACD,OAAO,KAAK,IAAI;gDACJ,eAAe,qBAAqB,KAAK,IAAI;qCACxD;QAAE,IAAI,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI;8BAChC,OAAO,KAAK,IAAI;0BACpB,OAAO;6BACJ,OAAO;yBACX,OAAO;oBACZ,OAAO;cACb,OAAO;sBACC,OAAO;gCACG,OAAO;;iBAEtB,OAAO;mBACL,MAAM,GAAG,CAAC,WAAW,CAAC;iBACxB,MAAM;iBACN,MAAM,GAAG,CAAC,cAAc,CAAC;oBACtB,MAAM;0BACA,MAAM,GAAG,CAAC,cAAc,CAAC;yBAC1B,MAAM;kBACb,MAAM;qCACa,MAAM,KAAK,IAAI;oCAChB,OAAO,KAAK,IAAI;iCACnB,OAAO,KAAK,IAAI;4BACrB,OAAO,KAAK,IAAI;6BACf,MAAM,KAAK,IAAI;uCACL,MAAM,KAAK,IAAI;kBACpC,MAAM;kBACN,MAAM;wBACA,MAAM;wBACN,MAAM;wBACN,eAAe,kBAAkB;4BAC7B,MAAM;uBACX,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAsEwB,CAAC;AAM/D,eAAO,MAAM,iBAAiB;cAHlB,MAAM,SAAS;4CAmb1B,CAAC"}

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

@@ -32,6 +32,7 @@ var defaults = {
     handleToolsClick: function (value) { return value; },
     hasDefaultToolsWidth: true,
     hasNotificationsContent: false,
+    hasStickyBackground: false,
     isAnyPanelOpen: false,
     isMobile: false,
     isNavigationOpen: false,
@@ -57,6 +58,7 @@ var defaults = {
     onSplitPanelToggle: function () { },
     onSplitPanelPreferencesChange: function () { },
     setDynamicOverlapHeight: function (value) { return void value; },
+    setHasStickyBackground: function (value) { return value; },
     setIsNavigationOpen: function (value) { return value; },
     setIsToolsOpen: function (value) { return value; },
     setOffsetBottom: function (value) { return void value; },
@@ -90,8 +92,11 @@ export var AppLayoutProvider = React.forwardRef(function (_a, forwardRef) {
     /**
      * The overlap height has a default set in CSS but can also be dynamically overridden
      * for content types (such as Table and Wizard) that have variable size content in the overlap.
+     * If a child component utilizes a sticky header the hasStickyBackground property will determine
+     * if the background remains in the same vertical position.
      */
     var _h = useState(0), dynamicOverlapHeight = _h[0], setDynamicOverlapHeight = _h[1];
+    var _j = useState(false), hasStickyBackground = _j[0], setHasStickyBackground = _j[1];
     /**
      * Set the default values for minimum and maximum content width.
      */
@@ -122,7 +127,7 @@ export var AppLayoutProvider = React.forwardRef(function (_a, forwardRef) {
      * useControllable hook and also fire the onNavigationChange function to
      * emit the state change.
      */
-    var _j = useControllable(controlledNavigationOpen, props.onNavigationChange, isMobile ? false : contentTypeDefaults.navigationOpen, { componentName: 'AppLayout', controlledProp: 'navigationOpen', changeHandler: 'onNavigationChange' }), _k = _j[0], isNavigationOpen = _k === void 0 ? false : _k, setIsNavigationOpen = _j[1];
+    var _k = useControllable(controlledNavigationOpen, props.onNavigationChange, isMobile ? false : contentTypeDefaults.navigationOpen, { componentName: 'AppLayout', controlledProp: 'navigationOpen', changeHandler: 'onNavigationChange' }), _l = _k[0], isNavigationOpen = _l === void 0 ? false : _l, setIsNavigationOpen = _k[1];
     var handleNavigationClick = useCallback(function handleNavigationChange(isOpen) {
         setIsNavigationOpen(isOpen);
         fireNonCancelableEvent(props.onNavigationChange, { open: isOpen });
@@ -140,7 +145,7 @@ export var AppLayoutProvider = React.forwardRef(function (_a, forwardRef) {
      */
     var toolsWidth = (_d = props.toolsWidth) !== null && _d !== void 0 ? _d : 290;
     var hasDefaultToolsWidth = props.toolsWidth === undefined;
-    var _l = useControllable(controlledToolsOpen, props.onToolsChange, isMobile ? false : contentTypeDefaults.toolsOpen, { componentName: 'AppLayout', controlledProp: 'toolsOpen', changeHandler: 'onToolsChange' }), _m = _l[0], isToolsOpen = _m === void 0 ? false : _m, setIsToolsOpen = _l[1];
+    var _m = useControllable(controlledToolsOpen, props.onToolsChange, isMobile ? false : contentTypeDefaults.toolsOpen, { componentName: 'AppLayout', controlledProp: 'toolsOpen', changeHandler: 'onToolsChange' }), _o = _m[0], isToolsOpen = _o === void 0 ? false : _o, setIsToolsOpen = _m[1];
     var toolsFocusControl = useFocusControl(isToolsOpen, true);
     var handleToolsClick = useCallback(function handleToolsChange(isOpen) {
         setIsToolsOpen(isOpen);
@@ -188,10 +193,10 @@ export var AppLayoutProvider = React.forwardRef(function (_a, forwardRef) {
      * Query the DOM for the header and footer elements based on the selectors provided
      * by the properties and pass the heights to the custom property definitions.
      */
-    var _o = useState(0), headerHeight = _o[0], setHeaderHeight = _o[1];
+    var _p = useState(0), headerHeight = _p[0], setHeaderHeight = _p[1];
     var getHeader = useCallback(function () { return document.querySelector(headerSelector); }, [headerSelector]);
     useResizeObserver(getHeader, function (entry) { return setHeaderHeight(entry.borderBoxHeight); });
-    var _p = useState(0), footerHeight = _p[0], setFooterHeight = _p[1];
+    var _q = useState(0), footerHeight = _q[0], setFooterHeight = _q[1];
     var getFooter = useCallback(function () { return document.querySelector(footerSelector); }, [footerSelector]);
     useResizeObserver(getFooter, function (entry) { return setFooterHeight(entry.borderBoxHeight); });
     /**
@@ -202,7 +207,7 @@ export var AppLayoutProvider = React.forwardRef(function (_a, forwardRef) {
      * a forced position on the bottom.
      */
     var splitPanelMinWidth = 280;
-    var _q = useState(splitPanelMinWidth), splitPanelMaxWidth = _q[0], setSplitPanelMaxWidth = _q[1];
+    var _r = useState(splitPanelMinWidth), splitPanelMaxWidth = _r[0], setSplitPanelMaxWidth = _r[1];
     /**
      * The useControllable hook will set the default value and manage either
      * the controlled or uncontrolled state of the Split Panel. By default
@@ -213,7 +218,7 @@ export var AppLayoutProvider = React.forwardRef(function (_a, forwardRef) {
      * to open or closed given the current state. It will set the isSplitPanelOpen
      * controlled state and fire the onSplitPanelToggle event.
      */
-    var _r = useControllable(props.splitPanelOpen, props.onSplitPanelToggle, false, { componentName: 'AppLayout', controlledProp: 'splitPanelOpen', changeHandler: 'onSplitPanelToggle' }), isSplitPanelOpen = _r[0], setIsSplitPanelOpen = _r[1];
+    var _s = useControllable(props.splitPanelOpen, props.onSplitPanelToggle, false, { componentName: 'AppLayout', controlledProp: 'splitPanelOpen', changeHandler: 'onSplitPanelToggle' }), isSplitPanelOpen = _s[0], setIsSplitPanelOpen = _s[1];
     var handleSplitPanelClick = useCallback(function handleSplitPanelChange() {
         setIsSplitPanelOpen(!isSplitPanelOpen);
         fireNonCancelableEvent(props.onSplitPanelToggle, { open: !isSplitPanelOpen });
@@ -228,11 +233,11 @@ export var AppLayoutProvider = React.forwardRef(function (_a, forwardRef) {
      * object that will determine if the SplitPanel is rendered either on the
      * bottom of the viewport or within the Tools container.
      */
-    var _s = useControllable(props.splitPanelPreferences, props.onSplitPanelPreferencesChange, undefined, {
+    var _t = useControllable(props.splitPanelPreferences, props.onSplitPanelPreferencesChange, undefined, {
         componentName: 'AppLayout',
         controlledProp: 'splitPanelPreferences',
         changeHandler: 'onSplitPanelPreferencesChange'
-    }), splitPanelPreferences = _s[0], setSplitPanelPreferences = _s[1];
+    }), splitPanelPreferences = _t[0], setSplitPanelPreferences = _t[1];
     /**
      * The Split Panel will be in forced (bottom) position if the defined minimum width is
      * greater than the maximum width. In other words, the maximum width is the currently
@@ -240,7 +245,7 @@ export var AppLayoutProvider = React.forwardRef(function (_a, forwardRef) {
      * minimum width exceeds this value then there is not enough horizontal space and we must
      * force it to the bottom position.
      */
-    var _t = useState(false), isSplitPanelForcedPosition = _t[0], setSplitPanelForcedPosition = _t[1];
+    var _u = useState(false), isSplitPanelForcedPosition = _u[0], setSplitPanelForcedPosition = _u[1];
     var splitPanelPosition = getSplitPanelPosition(isSplitPanelForcedPosition, splitPanelPreferences);
     useLayoutEffect(function handleSplitPanelForcePosition() {
         setSplitPanelForcedPosition(splitPanelMinWidth > splitPanelMaxWidth);
@@ -256,8 +261,8 @@ export var AppLayoutProvider = React.forwardRef(function (_a, forwardRef) {
      * It will set the splitPanelControlledSize controlled state and fire the
      * onSplitPanelResize event.
      */
-    var _u = useState(0), splitPanelReportedSize = _u[0], setSplitPanelReportedSize = _u[1];
-    var _v = useControllable(props.splitPanelSize, props.onSplitPanelResize, getSplitPanelDefaultSize(splitPanelPosition), { componentName: 'AppLayout', controlledProp: 'splitPanelSize', changeHandler: 'onSplitPanelResize' }), splitPanelSize = _v[0], setSplitPanelSize = _v[1];
+    var _v = useState(0), splitPanelReportedSize = _v[0], setSplitPanelReportedSize = _v[1];
+    var _w = useControllable(props.splitPanelSize, props.onSplitPanelResize, getSplitPanelDefaultSize(splitPanelPosition), { componentName: 'AppLayout', controlledProp: 'splitPanelSize', changeHandler: 'onSplitPanelResize' }), splitPanelSize = _w[0], setSplitPanelSize = _w[1];
     var handleSplitPanelResize = useCallback(function handleSplitPanelChange(detail) {
         setSplitPanelSize(detail.size);
         fireNonCancelableEvent(props.onSplitPanelResize, detail);
@@ -281,10 +286,10 @@ export var AppLayoutProvider = React.forwardRef(function (_a, forwardRef) {
      * This value is used to determine the max width constraint calculation
      * for the Tools container.
      */
-    var _w = useContainerQuery(function (rect) { return rect.width; }), layoutContainerQuery = _w[0], layoutElement = _w[1];
+    var _x = useContainerQuery(function (rect) { return rect.width; }), layoutContainerQuery = _x[0], layoutElement = _x[1];
     var layoutWidth = layoutContainerQuery !== null && layoutContainerQuery !== void 0 ? layoutContainerQuery : 0;
     var mainElement = useRef(null);
-    var _x = useState(0), mainOffsetLeft = _x[0], setMainOffsetLeft = _x[1];
+    var _y = useState(0), mainOffsetLeft = _y[0], setMainOffsetLeft = _y[1];
     useLayoutEffect(function handleMainOffsetLeft() {
         var _a, _b;
         setMainOffsetLeft((_b = (_a = mainElement === null || mainElement === void 0 ? void 0 : mainElement.current) === null || _a === void 0 ? void 0 : _a.offsetLeft) !== null && _b !== void 0 ? _b : 0);
@@ -330,9 +335,9 @@ export var AppLayoutProvider = React.forwardRef(function (_a, forwardRef) {
      * that it is not repeated in various components (such as AppBar) that need to
      * know if the notifications slot is empty.
      */
-    var _y = useContainerQuery(function (rect) { return rect.height; }), notificationsContainerQuery = _y[0], notificationsElement = _y[1];
-    var _z = useState(0), notificationsHeight = _z[0], setNotificationsHeight = _z[1];
-    var _0 = useState(false), hasNotificationsContent = _0[0], setHasNotificationsContent = _0[1];
+    var _z = useContainerQuery(function (rect) { return rect.height; }), notificationsContainerQuery = _z[0], notificationsElement = _z[1];
+    var _0 = useState(0), notificationsHeight = _0[0], setNotificationsHeight = _0[1];
+    var _1 = useState(false), hasNotificationsContent = _1[0], setHasNotificationsContent = _1[1];
     useEffect(function handleNotificationsContent() {
         setNotificationsHeight(notificationsContainerQuery !== null && notificationsContainerQuery !== void 0 ? notificationsContainerQuery : 0);
         setHasNotificationsContent(notificationsContainerQuery && notificationsContainerQuery > 0 ? true : false);
@@ -343,7 +348,7 @@ export var AppLayoutProvider = React.forwardRef(function (_a, forwardRef) {
      * is either a footer outside of the AppLayout, a SplitPanel in the bottom position
      * within the AppLayout, or both.
      */
-    var _1 = useState(0), offsetBottom = _1[0], setOffsetBottom = _1[1];
-    return (React.createElement(AppLayoutContext.Provider, { value: __assign(__assign(__assign({}, defaults), props), { contentType: contentType, dynamicOverlapHeight: dynamicOverlapHeight, headerHeight: headerHeight, footerHeight: footerHeight, hasDefaultToolsWidth: hasDefaultToolsWidth, handleNavigationClick: handleNavigationClick, handleSplitPanelClick: handleSplitPanelClick, handleSplitPanelPreferencesChange: handleSplitPanelPreferencesChange, handleSplitPanelResize: handleSplitPanelResize, handleToolsClick: handleToolsClick, hasNotificationsContent: hasNotificationsContent, isAnyPanelOpen: isAnyPanelOpen, isMobile: isMobile, isNavigationOpen: isNavigationOpen !== null && isNavigationOpen !== void 0 ? isNavigationOpen : false, isSplitPanelForcedPosition: isSplitPanelForcedPosition, isSplitPanelOpen: isSplitPanelOpen, isToolsOpen: isToolsOpen, layoutElement: layoutElement, layoutWidth: layoutWidth, mainElement: mainElement, mainOffsetLeft: mainOffsetLeft, maxContentWidth: maxContentWidth, minContentWidth: minContentWidth, navigationHide: navigationHide, notificationsElement: notificationsElement, notificationsHeight: notificationsHeight, offsetBottom: offsetBottom, setDynamicOverlapHeight: setDynamicOverlapHeight, setOffsetBottom: setOffsetBottom, setSplitPanelReportedSize: setSplitPanelReportedSize, splitPanelMaxWidth: splitPanelMaxWidth, splitPanelMinWidth: splitPanelMinWidth, splitPanelPosition: splitPanelPosition, splitPanelPreferences: splitPanelPreferences, splitPanelReportedSize: splitPanelReportedSize, splitPanelSize: splitPanelSize, toolsHide: toolsHide, toolsOpen: isToolsOpen, toolsWidth: toolsWidth, toolsFocusControl: toolsFocusControl }) }, children));
+    var _2 = useState(0), offsetBottom = _2[0], setOffsetBottom = _2[1];
+    return (React.createElement(AppLayoutContext.Provider, { value: __assign(__assign(__assign({}, defaults), props), { contentType: contentType, dynamicOverlapHeight: dynamicOverlapHeight, headerHeight: headerHeight, footerHeight: footerHeight, hasDefaultToolsWidth: hasDefaultToolsWidth, handleNavigationClick: handleNavigationClick, handleSplitPanelClick: handleSplitPanelClick, handleSplitPanelPreferencesChange: handleSplitPanelPreferencesChange, handleSplitPanelResize: handleSplitPanelResize, handleToolsClick: handleToolsClick, hasNotificationsContent: hasNotificationsContent, hasStickyBackground: hasStickyBackground, isAnyPanelOpen: isAnyPanelOpen, isMobile: isMobile, isNavigationOpen: isNavigationOpen !== null && isNavigationOpen !== void 0 ? isNavigationOpen : false, isSplitPanelForcedPosition: isSplitPanelForcedPosition, isSplitPanelOpen: isSplitPanelOpen, isToolsOpen: isToolsOpen, layoutElement: layoutElement, layoutWidth: layoutWidth, mainElement: mainElement, mainOffsetLeft: mainOffsetLeft, maxContentWidth: maxContentWidth, minContentWidth: minContentWidth, navigationHide: navigationHide, notificationsElement: notificationsElement, notificationsHeight: notificationsHeight, offsetBottom: offsetBottom, setDynamicOverlapHeight: setDynamicOverlapHeight, setHasStickyBackground: setHasStickyBackground, setOffsetBottom: setOffsetBottom, setSplitPanelReportedSize: setSplitPanelReportedSize, splitPanelMaxWidth: splitPanelMaxWidth, splitPanelMinWidth: splitPanelMinWidth, splitPanelPosition: splitPanelPosition, splitPanelPreferences: splitPanelPreferences, splitPanelReportedSize: splitPanelReportedSize, splitPanelSize: splitPanelSize, toolsHide: toolsHide, toolsOpen: isToolsOpen, toolsWidth: toolsWidth, toolsFocusControl: toolsFocusControl }) }, children));
 });
 //# sourceMappingURL=context.js.map