@cloudscape-design/components-themeable 3.0.340 → 3.0.341

package/lib/internal/manifest.json

@@ -1,3 +1,3 @@
 {
-  "commit": "19ca65aee8cef5f5f8c16b96182ed28682155c25"
+  "commit": "8e2a25ea23ba5d3a1c5e114c70e2ae9998809322"
 }

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

@@ -30,7 +30,7 @@ div.background {
 
     &.has-sticky-notifications {
       height: calc(
-        var(#{custom-props.$notificationsGap}) + var(#{custom-props.$notificationsHeight}) + #{awsui.$space-s} + var(#{custom-props.$overlapHeight})
+        var(#{custom-props.$notificationsGap}) + var(#{custom-props.$notificationsHeight}) + #{awsui.$space-scaled-s} + var(#{custom-props.$overlapHeight})
       );
     }
   }

package/lib/internal/scss/area-chart/styles.scss

@@ -3,53 +3,11 @@
  SPDX-License-Identifier: Apache-2.0
 */
 
-@use '../internal/styles' as styles;
 @use '../internal/styles/tokens' as awsui;
-@use '../internal/hooks/focus-visible' as focus-visible;
 @use './motion';
 
 .root {
-  @include styles.styles-reset;
-
-  position: relative;
-  display: block;
-}
-
-.has-default-filter {
-  & > :first-child {
-    flex: 280px 0 1;
-  }
-}
-
-.chart-container {
-  display: flex;
-  width: 100%;
-  flex-direction: column;
-}
-
-.chart-container__vertical {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-}
-
-.chart-container__horizontal {
-  display: flex;
-}
-
-.content {
-  display: flex;
-  position: relative;
-  justify-content: center;
-  align-items: center;
-}
-
-.content--reserve-filter {
-  margin-top: calc(2 * #{awsui.$font-body-m-line-height});
-}
-
-.content--reserve-legend {
-  margin-bottom: calc(2 * #{awsui.$font-body-m-line-height});
+  /* used in test-utils */
 }
 
 .series {

package/lib/internal/scss/container/shared.scss

@@ -6,7 +6,9 @@
 @use '../internal/styles' as styles;
 @use '../internal/styles/tokens' as awsui;
 
-$header-padding: awsui.$space-container-header-vertical awsui.$space-container-horizontal;
+$header-padding-horizontal: awsui.$space-container-horizontal;
+$header-padding-vertical: awsui.$space-container-header-vertical;
+$header-padding: $header-padding-vertical $header-padding-horizontal;
 $footer-padding: awsui.$space-scaled-s awsui.$space-container-horizontal;
 
 // HACK: Remediate focus border for expandable section

package/lib/internal/scss/expandable-section/styles.scss

@@ -15,6 +15,11 @@ $icon-margin-left: '(#{awsui.$font-body-m-line-height} - #{$icon-width-normal})
 $icon-margin-right-normal: '#{awsui.$space-xxs} + #{awsui.$border-divider-list-width}';
 $icon-margin-right-medium: awsui.$space-xs;
 
+// Total space occupied by the expand icon on the left and its margins.
+// Useful to keep elements correctly aligned.
+$icon-total-space-normal: calc(#{$icon-width-normal} + #{$icon-margin-left} + #{$icon-margin-right-normal});
+$icon-total-space-medium: calc(#{$icon-width-medium} + #{$icon-margin-left} + #{$icon-margin-right-medium});
+
 .root {
   @include styles.styles-reset;
   @include styles.text-wrapping;
@@ -50,15 +55,6 @@ $icon-margin-right-medium: awsui.$space-xs;
   line-height: awsui.$font-body-m-line-height;
   text-align: left;
 
-  &-default {
-    padding: awsui.$space-scaled-xxs awsui.$space-xxs;
-  }
-
-  &-footer {
-    // We remove left and right padding here to better align the carat icon
-    padding: awsui.$space-scaled-xxs 0;
-  }
-
   &-default,
   &-footer {
     border: awsui.$border-divider-section-width solid transparent;
@@ -83,8 +79,42 @@ $icon-margin-right-medium: awsui.$space-xs;
     letter-spacing: awsui.$font-heading-s-letter-spacing;
   }
 
+  &-default {
+    padding-top: awsui.$space-scaled-xxs;
+    padding-bottom: awsui.$space-scaled-xxs;
+    padding-right: awsui.$space-xxs;
+    &.header-deprecated {
+      padding-left: awsui.$space-xxs;
+    }
+    &:not(.header-deprecated) {
+      padding-left: calc(#{awsui.$space-xxs} + #{$icon-total-space-normal});
+    }
+  }
+
+  &-footer {
+    // We remove left and right padding here to better align the carat icon
+    padding-top: awsui.$space-scaled-xxs;
+    padding-bottom: awsui.$space-scaled-xxs;
+    padding-right: 0;
+    &.header-deprecated {
+      padding-left: 0;
+    }
+    &:not(.header-deprecated) {
+      padding-left: $icon-total-space-normal;
+    }
+  }
+
   &-container {
-    padding: container.$header-padding;
+    padding-top: container.$header-padding-vertical;
+    padding-bottom: container.$header-padding-vertical;
+    padding-right: container.$header-padding-horizontal;
+
+    &.header-deprecated {
+      padding-left: container.$header-padding-horizontal;
+    }
+    &:not(.header-deprecated) {
+      padding-left: calc(#{container.$header-padding-horizontal} + #{$icon-total-space-medium});
+    }
 
     @include focus-visible.when-visible {
       // HACK: Remediate focus border
@@ -113,16 +143,21 @@ $icon-margin-right-medium: awsui.$space-xs;
     padding: 0;
   }
 
+  &-button,
+  &-container-button {
+    @include focus-visible.when-visible {
+      @include styles.focus-highlight(0px);
+    }
+  }
+
   &-button {
     box-sizing: border-box;
     display: flex;
+    margin-left: calc(-1 * #{$icon-total-space-normal});
   }
 
-  &-button,
   &-container-button {
-    @include focus-visible.when-visible {
-      @include styles.focus-highlight(0px);
-    }
+    margin-left: calc(-1 * #{$icon-total-space-medium});
   }
 
   &-container {
@@ -189,12 +224,3 @@ $icon-margin-right-medium: awsui.$space-xs;
     color: awsui.$color-text-expandable-section-hover;
   }
 }
-
-// Indent the description by exactly the same amount as the header, which is pushed to the right by the icon.
-.description-default,
-.description-footer {
-  padding-left: calc(#{$icon-width-normal} + #{$icon-margin-left} + #{$icon-margin-right-normal});
-}
-.description-container {
-  padding-left: calc(#{$icon-width-medium} + #{$icon-margin-left} + #{$icon-margin-right-medium});
-}

package/lib/internal/scss/internal/components/cartesian-chart/styles.scss

@@ -110,6 +110,18 @@
   stroke-width: 2px;
 }
 
-.filter-container {
-  /* used in test-utils */
+.chart-container {
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+}
+
+.chart-container__vertical {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+.chart-container__horizontal {
+  display: flex;
 }

package/lib/internal/scss/internal/components/chart-wrapper/styles.scss

@@ -0,0 +1,38 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+
+@use '../../styles/tokens' as awsui;
+@use '../../styles' as styles;
+
+.wrapper {
+  @include styles.styles-reset;
+  position: relative;
+  display: block;
+}
+
+.has-default-filter {
+  & > :first-child {
+    flex: 280px 0 1;
+  }
+}
+
+.content {
+  display: flex;
+  position: relative;
+  justify-content: center;
+  align-items: center;
+}
+
+.content--reserve-filter {
+  margin-top: calc(2 * #{awsui.$font-body-m-line-height});
+}
+
+.content--reserve-legend {
+  margin-bottom: calc(2 * #{awsui.$font-body-m-line-height});
+}
+
+.filter-container {
+  /* used in test-utils */
+}

package/lib/internal/scss/mixed-line-bar-chart/styles.scss

@@ -8,53 +8,9 @@
 @use './motion';
 
 .root {
-  @include styles.styles-reset;
-
-  position: relative;
-  display: block;
-}
-
-.filter-container {
   /* used in test-utils */
 }
 
-.has-default-filter {
-  & > :first-child {
-    flex: 280px 0 1;
-  }
-}
-
-.chart-container {
-  display: flex;
-  width: 100%;
-  flex-direction: column;
-}
-
-.chart-container__vertical {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-}
-
-.chart-container__horizontal {
-  display: flex;
-}
-
-.content {
-  display: flex;
-  position: relative;
-  justify-content: center;
-  align-items: center;
-}
-
-.content--reserve-filter {
-  margin-top: calc(2 * #{awsui.$font-body-m-line-height});
-}
-
-.content--reserve-legend {
-  margin-bottom: calc(2 * #{awsui.$font-body-m-line-height});
-}
-
 .series {
   display: block;
   stroke-width: awsui.$border-line-chart-width;

package/lib/internal/scss/pie-chart/styles.scss

@@ -10,26 +10,10 @@
 @use './motion';
 
 .root {
-  @include styles.styles-reset;
-  display: block;
-}
-
-.filter-container {
   /* used in test-utils */
 }
 
-.has-default-filter {
-  & > :first-child {
-    flex: 280px 0 1;
-  }
-}
-
 .content {
-  display: flex;
-  position: relative;
-  justify-content: center;
-  align-items: center;
-
   @each $size in map.keys(constants.$pie-chart-sizes) {
     &.content--#{$size} {
       $sizes: map.get(constants.$pie-chart-sizes, $size);
@@ -41,14 +25,6 @@
       }
     }
   }
-
-  &.content--reserve-filter {
-    margin-top: calc(2 * #{awsui.$font-body-m-line-height});
-  }
-
-  &.content--reserve-legend {
-    margin-bottom: calc(2 * #{awsui.$font-body-m-line-height});
-  }
 }
 
 .status-container {

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

@@ -277,6 +277,9 @@ $border-placeholder: awsui.$border-item-width solid transparent;
             'horizontal': calc(-1 * #{awsui.$space-scaled-xxs}),
           )
         );
+        &.sticky-cell {
+          position: sticky;
+        }
       }
       &:hover {
         position: relative;
@@ -304,6 +307,9 @@ $border-placeholder: awsui.$border-item-width solid transparent;
           padding-top: calc(#{$cell-vertical-padding} - calc(#{awsui.$border-divider-list-width}));
           padding-bottom: calc(#{$cell-vertical-padding} - calc(#{awsui.$border-divider-list-width}));
         }
+        &.sticky-cell {
+          position: sticky;
+        }
       }
     }
   }

package/lib/internal/template/app-layout/runtime-api.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"runtime-api.d.ts","sourceRoot":"lib/default/","sources":["app-layout/runtime-api.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,YAAY,IAAI,mBAAmB,EAAE,MAAM,wCAAwC,CAAC;AAC7F,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAoBjD,MAAM,WAAW,aAAa;IAC5B,MAAM,EAAE,KAAK,CAAC,UAAU,CAAC,CAAC;IAC1B,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,CAAC;CAC1B;AAED,wBAAgB,qBAAqB,CAAC,OAAO,EAAE,KAAK,CAAC,mBAAmB,CAAC,GAAG,aAAa,CA0BxF"}
+{"version":3,"file":"runtime-api.d.ts","sourceRoot":"lib/default/","sources":["app-layout/runtime-api.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,YAAY,IAAI,mBAAmB,EAAE,MAAM,wCAAwC,CAAC;AAC7F,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAoBjD,MAAM,WAAW,aAAa;IAC5B,MAAM,EAAE,KAAK,CAAC,UAAU,CAAC,CAAC;IAC1B,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,CAAC;CAC1B;AAED,wBAAgB,qBAAqB,CAAC,OAAO,EAAE,KAAK,CAAC,mBAAmB,CAAC,GAAG,aAAa,CAuBxF"}

package/lib/internal/template/app-layout/runtime-api.js

@@ -15,10 +15,11 @@ function RuntimeContentWrapper({ mountContent, unmountContent }) {
 export function convertRuntimeDrawers(drawers) {
     const converted = drawers.map((_a) => {
         var { mountContent, unmountContent, trigger } = _a, runtimeDrawer = __rest(_a, ["mountContent", "unmountContent", "trigger"]);
-        return (Object.assign(Object.assign({}, runtimeDrawer), { trigger: trigger.iconSvg
-                ? Object.assign(Object.assign({}, trigger), { iconSvg: (
-                    // eslint-disable-next-line react/no-danger
-                    React.createElement("span", { dangerouslySetInnerHTML: { __html: trigger.iconSvg } })) }) : trigger, content: (React.createElement(RuntimeContentWrapper, { key: runtimeDrawer.id, mountContent: mountContent, unmountContent: unmountContent })) }));
+        return (Object.assign(Object.assign({}, runtimeDrawer), { trigger: {
+                iconSvg: (
+                // eslint-disable-next-line react/no-danger
+                React.createElement("span", { dangerouslySetInnerHTML: { __html: trigger.iconSvg } })),
+            }, content: (React.createElement(RuntimeContentWrapper, { key: runtimeDrawer.id, mountContent: mountContent, unmountContent: unmountContent })) }));
     });
     converted.sort((a, b) => {
         var _a, _b;

package/lib/internal/template/app-layout/runtime-api.js.map

@@ -1 +1 @@
-{"version":3,"file":"runtime-api.js","sourceRoot":"lib/default/","sources":["app-layout/runtime-api.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AASjD,SAAS,qBAAqB,CAAC,EAAE,YAAY,EAAE,cAAc,EAA8B;IACzF,MAAM,GAAG,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAEzC,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,SAAS,GAAG,GAAG,CAAC,OAAQ,CAAC;QAC/B,YAAY,CAAC,SAAS,CAAC,CAAC;QACxB,OAAO,GAAG,EAAE,CAAC,cAAc,CAAC,SAAS,CAAC,CAAC;QACvC,uDAAuD;IACzD,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,6BAAK,GAAG,EAAE,GAAG,GAAQ,CAAC;AAC/B,CAAC;AAOD,MAAM,UAAU,qBAAqB,CAAC,OAAmC;IACvE,MAAM,SAAS,GAAG,OAAO,CAAC,GAAG,CAAC,CAAC,EAA2D,EAAE,EAAE;YAA/D,EAAE,YAAY,EAAE,cAAc,EAAE,OAAO,OAAoB,EAAf,aAAa,cAAzD,6CAA2D,CAAF;QAAO,OAAA,iCAC1F,aAAa,KAChB,OAAO,EAAE,OAAO,CAAC,OAAO;gBACtB,CAAC,iCACM,OAAO,KACV,OAAO,EAAE;oBACP,2CAA2C;oBAC3C,8BAAM,uBAAuB,EAAE,EAAE,MAAM,EAAE,OAAO,CAAC,OAAO,EAAE,GAAI,CAC/D,IAEL,CAAC,CAAC,OAAO,EACX,OAAO,EAAE,CACP,oBAAC,qBAAqB,IAAC,GAAG,EAAE,aAAa,CAAC,EAAE,EAAE,YAAY,EAAE,YAAY,EAAE,cAAc,EAAE,cAAc,GAAI,CAC7G,IACD,CAAA;KAAA,CAAC,CAAC;IACJ,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;;QACtB,IAAI,CAAC,CAAC,aAAa,KAAK,CAAC,CAAC,aAAa,EAAE;YACvC,OAAO,IAAI,CAAC,IAAI,CAAC,CAAC,MAAA,CAAC,CAAC,aAAa,mCAAI,CAAC,CAAC,GAAG,CAAC,MAAA,CAAC,CAAC,aAAa,mCAAI,CAAC,CAAC,CAAC,CAAC;SACnE;QACD,OAAO,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAC9B,CAAC,CAAC,CAAC;IACH,OAAO;QACL,MAAM,EAAE,SAAS,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,WAAC,OAAA,CAAC,MAAA,IAAI,CAAC,aAAa,mCAAI,CAAC,CAAC,GAAG,CAAC,CAAA,EAAA,CAAC;QAC/D,KAAK,EAAE,SAAS,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,WAAC,OAAA,CAAC,MAAA,IAAI,CAAC,aAAa,mCAAI,CAAC,CAAC,IAAI,CAAC,CAAA,EAAA,CAAC;KAChE,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useEffect, useRef } from 'react';\nimport { DrawerConfig as RuntimeDrawerConfig } from '../internal/plugins/drawers-controller';\nimport { DrawerItem } from './drawer/interfaces';\n\ninterface RuntimeContentWrapperProps {\n  mountContent: RuntimeDrawerConfig['mountContent'];\n  unmountContent: RuntimeDrawerConfig['unmountContent'];\n}\n\nfunction RuntimeContentWrapper({ mountContent, unmountContent }: RuntimeContentWrapperProps) {\n  const ref = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    const container = ref.current!;\n    mountContent(container);\n    return () => unmountContent(container);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  return <div ref={ref}></div>;\n}\n\nexport interface DrawersLayout {\n  before: Array<DrawerItem>;\n  after: Array<DrawerItem>;\n}\n\nexport function convertRuntimeDrawers(drawers: Array<RuntimeDrawerConfig>): DrawersLayout {\n  const converted = drawers.map(({ mountContent, unmountContent, trigger, ...runtimeDrawer }) => ({\n    ...runtimeDrawer,\n    trigger: trigger.iconSvg\n      ? {\n          ...trigger,\n          iconSvg: (\n            // eslint-disable-next-line react/no-danger\n            <span dangerouslySetInnerHTML={{ __html: trigger.iconSvg }} />\n          ),\n        }\n      : trigger,\n    content: (\n      <RuntimeContentWrapper key={runtimeDrawer.id} mountContent={mountContent} unmountContent={unmountContent} />\n    ),\n  }));\n  converted.sort((a, b) => {\n    if (b.orderPriority !== a.orderPriority) {\n      return Math.sign((b.orderPriority ?? 0) - (a.orderPriority ?? 0));\n    }\n    return b.id < a.id ? 1 : -1;\n  });\n  return {\n    before: converted.filter(item => (item.orderPriority ?? 0) > 0),\n    after: converted.filter(item => (item.orderPriority ?? 0) <= 0),\n  };\n}\n"]}
+{"version":3,"file":"runtime-api.js","sourceRoot":"lib/default/","sources":["app-layout/runtime-api.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AASjD,SAAS,qBAAqB,CAAC,EAAE,YAAY,EAAE,cAAc,EAA8B;IACzF,MAAM,GAAG,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAEzC,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,SAAS,GAAG,GAAG,CAAC,OAAQ,CAAC;QAC/B,YAAY,CAAC,SAAS,CAAC,CAAC;QACxB,OAAO,GAAG,EAAE,CAAC,cAAc,CAAC,SAAS,CAAC,CAAC;QACvC,uDAAuD;IACzD,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,6BAAK,GAAG,EAAE,GAAG,GAAQ,CAAC;AAC/B,CAAC;AAOD,MAAM,UAAU,qBAAqB,CAAC,OAAmC;IACvE,MAAM,SAAS,GAAG,OAAO,CAAC,GAAG,CAAC,CAAC,EAA2D,EAAE,EAAE;YAA/D,EAAE,YAAY,EAAE,cAAc,EAAE,OAAO,OAAoB,EAAf,aAAa,cAAzD,6CAA2D,CAAF;QAAO,OAAA,iCAC1F,aAAa,KAChB,OAAO,EAAE;gBACP,OAAO,EAAE;gBACP,2CAA2C;gBAC3C,8BAAM,uBAAuB,EAAE,EAAE,MAAM,EAAE,OAAO,CAAC,OAAO,EAAE,GAAI,CAC/D;aACF,EACD,OAAO,EAAE,CACP,oBAAC,qBAAqB,IAAC,GAAG,EAAE,aAAa,CAAC,EAAE,EAAE,YAAY,EAAE,YAAY,EAAE,cAAc,EAAE,cAAc,GAAI,CAC7G,IACD,CAAA;KAAA,CAAC,CAAC;IACJ,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;;QACtB,IAAI,CAAC,CAAC,aAAa,KAAK,CAAC,CAAC,aAAa,EAAE;YACvC,OAAO,IAAI,CAAC,IAAI,CAAC,CAAC,MAAA,CAAC,CAAC,aAAa,mCAAI,CAAC,CAAC,GAAG,CAAC,MAAA,CAAC,CAAC,aAAa,mCAAI,CAAC,CAAC,CAAC,CAAC;SACnE;QACD,OAAO,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAC9B,CAAC,CAAC,CAAC;IACH,OAAO;QACL,MAAM,EAAE,SAAS,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,WAAC,OAAA,CAAC,MAAA,IAAI,CAAC,aAAa,mCAAI,CAAC,CAAC,GAAG,CAAC,CAAA,EAAA,CAAC;QAC/D,KAAK,EAAE,SAAS,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,WAAC,OAAA,CAAC,MAAA,IAAI,CAAC,aAAa,mCAAI,CAAC,CAAC,IAAI,CAAC,CAAA,EAAA,CAAC;KAChE,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useEffect, useRef } from 'react';\nimport { DrawerConfig as RuntimeDrawerConfig } from '../internal/plugins/drawers-controller';\nimport { DrawerItem } from './drawer/interfaces';\n\ninterface RuntimeContentWrapperProps {\n  mountContent: RuntimeDrawerConfig['mountContent'];\n  unmountContent: RuntimeDrawerConfig['unmountContent'];\n}\n\nfunction RuntimeContentWrapper({ mountContent, unmountContent }: RuntimeContentWrapperProps) {\n  const ref = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    const container = ref.current!;\n    mountContent(container);\n    return () => unmountContent(container);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  return <div ref={ref}></div>;\n}\n\nexport interface DrawersLayout {\n  before: Array<DrawerItem>;\n  after: Array<DrawerItem>;\n}\n\nexport function convertRuntimeDrawers(drawers: Array<RuntimeDrawerConfig>): DrawersLayout {\n  const converted = drawers.map(({ mountContent, unmountContent, trigger, ...runtimeDrawer }) => ({\n    ...runtimeDrawer,\n    trigger: {\n      iconSvg: (\n        // eslint-disable-next-line react/no-danger\n        <span dangerouslySetInnerHTML={{ __html: trigger.iconSvg }} />\n      ),\n    },\n    content: (\n      <RuntimeContentWrapper key={runtimeDrawer.id} mountContent={mountContent} unmountContent={unmountContent} />\n    ),\n  }));\n  converted.sort((a, b) => {\n    if (b.orderPriority !== a.orderPriority) {\n      return Math.sign((b.orderPriority ?? 0) - (a.orderPriority ?? 0));\n    }\n    return b.id < a.id ? 1 : -1;\n  });\n  return {\n    before: converted.filter(item => (item.orderPriority ?? 0) > 0),\n    after: converted.filter(item => (item.orderPriority ?? 0) <= 0),\n  };\n}\n"]}

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

@@ -1,74 +1,74 @@
 
     import './styles.scoped.css';
     export default {
-  "background": "awsui_background_hyvsj_1u33b_93",
-  "scrolling-background": "awsui_scrolling-background_hyvsj_1u33b_96",
-  "sticky-background": "awsui_sticky-background_hyvsj_1u33b_102",
-  "has-sticky-notifications": "awsui_has-sticky-notifications_hyvsj_1u33b_110",
-  "breadcrumbs": "awsui_breadcrumbs_hyvsj_1u33b_123",
-  "has-sticky-background": "awsui_has-sticky-background_hyvsj_1u33b_133",
-  "drawers-container": "awsui_drawers-container_hyvsj_1u33b_145",
-  "has-open-drawer": "awsui_has-open-drawer_hyvsj_1u33b_157",
-  "disable-body-scroll": "awsui_disable-body-scroll_hyvsj_1u33b_191",
-  "drawers-desktop-triggers-container": "awsui_drawers-desktop-triggers-container_hyvsj_1u33b_196",
-  "has-multiple-triggers": "awsui_has-multiple-triggers_hyvsj_1u33b_214",
-  "drawers-trigger-content": "awsui_drawers-trigger-content_hyvsj_1u33b_246",
-  "drawers-trigger": "awsui_drawers-trigger_hyvsj_1u33b_246",
-  "drawer": "awsui_drawer_hyvsj_1u33b_145",
-  "drawer-close-button": "awsui_drawer-close-button_hyvsj_1u33b_295",
-  "drawer-content": "awsui_drawer-content_hyvsj_1u33b_300",
-  "drawer-slider": "awsui_drawer-slider_hyvsj_1u33b_305",
-  "is-drawer-open": "awsui_is-drawer-open_hyvsj_1u33b_312",
-  "content": "awsui_content_hyvsj_1u33b_337",
-  "layout": "awsui_layout_hyvsj_1u33b_358",
-  "has-max-content-width": "awsui_has-max-content-width_hyvsj_1u33b_441",
-  "content-type-dashboard": "awsui_content-type-dashboard_hyvsj_1u33b_456",
-  "is-overlap-disabled": "awsui_is-overlap-disabled_hyvsj_1u33b_473",
-  "has-content-gap-left": "awsui_has-content-gap-left_hyvsj_1u33b_505",
-  "has-content-gap-right": "awsui_has-content-gap-right_hyvsj_1u33b_508",
-  "content-first-child-notifications": "awsui_content-first-child-notifications_hyvsj_1u33b_518",
-  "has-breadcrumbs": "awsui_has-breadcrumbs_hyvsj_1u33b_521",
-  "content-first-child-header": "awsui_content-first-child-header_hyvsj_1u33b_524",
-  "has-header": "awsui_has-header_hyvsj_1u33b_524",
-  "content-first-child-main": "awsui_content-first-child-main_hyvsj_1u33b_545",
-  "disable-content-paddings": "awsui_disable-content-paddings_hyvsj_1u33b_545",
-  "has-split-panel": "awsui_has-split-panel_hyvsj_1u33b_588",
-  "split-panel-position-bottom": "awsui_split-panel-position-bottom_hyvsj_1u33b_588",
-  "block-body-scroll": "awsui_block-body-scroll_hyvsj_1u33b_604",
-  "unfocusable": "awsui_unfocusable_hyvsj_1u33b_609",
-  "container": "awsui_container_hyvsj_1u33b_619",
-  "is-navigation-open": "awsui_is-navigation-open_hyvsj_1u33b_644",
-  "is-tools-open": "awsui_is-tools-open_hyvsj_1u33b_647",
-  "is-split-panel-open": "awsui_is-split-panel-open_hyvsj_1u33b_647",
-  "split-panel-position-side": "awsui_split-panel-position-side_hyvsj_1u33b_647",
-  "mobile-toolbar": "awsui_mobile-toolbar_hyvsj_1u33b_656",
-  "mobile-toolbar-nav": "awsui_mobile-toolbar-nav_hyvsj_1u33b_672",
-  "mobile-toolbar-breadcrumbs": "awsui_mobile-toolbar-breadcrumbs_hyvsj_1u33b_676",
-  "mobile-toolbar-tools": "awsui_mobile-toolbar-tools_hyvsj_1u33b_680",
-  "navigation-container": "awsui_navigation-container_hyvsj_1u33b_689",
-  "show-navigation": "awsui_show-navigation_hyvsj_1u33b_733",
-  "animating": "awsui_animating_hyvsj_1u33b_755",
-  "showButtons": "awsui_showButtons_hyvsj_1u33b_1",
-  "navigation": "awsui_navigation_hyvsj_1u33b_689",
-  "openNavigation": "awsui_openNavigation_hyvsj_1u33b_1",
-  "animated-content": "awsui_animated-content_hyvsj_1u33b_816",
-  "hide-navigation": "awsui_hide-navigation_hyvsj_1u33b_825",
-  "notifications": "awsui_notifications_hyvsj_1u33b_835",
-  "sticky-notifications": "awsui_sticky-notifications_hyvsj_1u33b_841",
-  "split-panel-bottom": "awsui_split-panel-bottom_hyvsj_1u33b_858",
-  "position-bottom": "awsui_position-bottom_hyvsj_1u33b_904",
-  "openSplitPanelBottom": "awsui_openSplitPanelBottom_hyvsj_1u33b_1",
-  "split-panel-side": "awsui_split-panel-side_hyvsj_1u33b_933",
-  "position-side": "awsui_position-side_hyvsj_1u33b_961",
-  "openSplitPanelSide": "awsui_openSplitPanelSide_hyvsj_1u33b_1",
-  "tools-container": "awsui_tools-container_hyvsj_1u33b_998",
-  "tools": "awsui_tools_hyvsj_1u33b_998",
-  "openTools": "awsui_openTools_hyvsj_1u33b_1",
-  "has-tools-form-persistence": "awsui_has-tools-form-persistence_hyvsj_1u33b_1092",
-  "hide-tools": "awsui_hide-tools_hyvsj_1u33b_1102",
-  "show-tools": "awsui_show-tools_hyvsj_1u33b_1114",
-  "has-tools-form": "awsui_has-tools-form_hyvsj_1u33b_1092",
-  "trigger": "awsui_trigger_hyvsj_1u33b_1181",
-  "selected": "awsui_selected_hyvsj_1u33b_1220"
+  "background": "awsui_background_hyvsj_18m22_93",
+  "scrolling-background": "awsui_scrolling-background_hyvsj_18m22_96",
+  "sticky-background": "awsui_sticky-background_hyvsj_18m22_102",
+  "has-sticky-notifications": "awsui_has-sticky-notifications_hyvsj_18m22_110",
+  "breadcrumbs": "awsui_breadcrumbs_hyvsj_18m22_123",
+  "has-sticky-background": "awsui_has-sticky-background_hyvsj_18m22_133",
+  "drawers-container": "awsui_drawers-container_hyvsj_18m22_145",
+  "has-open-drawer": "awsui_has-open-drawer_hyvsj_18m22_157",
+  "disable-body-scroll": "awsui_disable-body-scroll_hyvsj_18m22_191",
+  "drawers-desktop-triggers-container": "awsui_drawers-desktop-triggers-container_hyvsj_18m22_196",
+  "has-multiple-triggers": "awsui_has-multiple-triggers_hyvsj_18m22_214",
+  "drawers-trigger-content": "awsui_drawers-trigger-content_hyvsj_18m22_246",
+  "drawers-trigger": "awsui_drawers-trigger_hyvsj_18m22_246",
+  "drawer": "awsui_drawer_hyvsj_18m22_145",
+  "drawer-close-button": "awsui_drawer-close-button_hyvsj_18m22_295",
+  "drawer-content": "awsui_drawer-content_hyvsj_18m22_300",
+  "drawer-slider": "awsui_drawer-slider_hyvsj_18m22_305",
+  "is-drawer-open": "awsui_is-drawer-open_hyvsj_18m22_312",
+  "content": "awsui_content_hyvsj_18m22_337",
+  "layout": "awsui_layout_hyvsj_18m22_358",
+  "has-max-content-width": "awsui_has-max-content-width_hyvsj_18m22_441",
+  "content-type-dashboard": "awsui_content-type-dashboard_hyvsj_18m22_456",
+  "is-overlap-disabled": "awsui_is-overlap-disabled_hyvsj_18m22_473",
+  "has-content-gap-left": "awsui_has-content-gap-left_hyvsj_18m22_505",
+  "has-content-gap-right": "awsui_has-content-gap-right_hyvsj_18m22_508",
+  "content-first-child-notifications": "awsui_content-first-child-notifications_hyvsj_18m22_518",
+  "has-breadcrumbs": "awsui_has-breadcrumbs_hyvsj_18m22_521",
+  "content-first-child-header": "awsui_content-first-child-header_hyvsj_18m22_524",
+  "has-header": "awsui_has-header_hyvsj_18m22_524",
+  "content-first-child-main": "awsui_content-first-child-main_hyvsj_18m22_545",
+  "disable-content-paddings": "awsui_disable-content-paddings_hyvsj_18m22_545",
+  "has-split-panel": "awsui_has-split-panel_hyvsj_18m22_588",
+  "split-panel-position-bottom": "awsui_split-panel-position-bottom_hyvsj_18m22_588",
+  "block-body-scroll": "awsui_block-body-scroll_hyvsj_18m22_604",
+  "unfocusable": "awsui_unfocusable_hyvsj_18m22_609",
+  "container": "awsui_container_hyvsj_18m22_619",
+  "is-navigation-open": "awsui_is-navigation-open_hyvsj_18m22_644",
+  "is-tools-open": "awsui_is-tools-open_hyvsj_18m22_647",
+  "is-split-panel-open": "awsui_is-split-panel-open_hyvsj_18m22_647",
+  "split-panel-position-side": "awsui_split-panel-position-side_hyvsj_18m22_647",
+  "mobile-toolbar": "awsui_mobile-toolbar_hyvsj_18m22_656",
+  "mobile-toolbar-nav": "awsui_mobile-toolbar-nav_hyvsj_18m22_672",
+  "mobile-toolbar-breadcrumbs": "awsui_mobile-toolbar-breadcrumbs_hyvsj_18m22_676",
+  "mobile-toolbar-tools": "awsui_mobile-toolbar-tools_hyvsj_18m22_680",
+  "navigation-container": "awsui_navigation-container_hyvsj_18m22_689",
+  "show-navigation": "awsui_show-navigation_hyvsj_18m22_733",
+  "animating": "awsui_animating_hyvsj_18m22_755",
+  "showButtons": "awsui_showButtons_hyvsj_18m22_1",
+  "navigation": "awsui_navigation_hyvsj_18m22_689",
+  "openNavigation": "awsui_openNavigation_hyvsj_18m22_1",
+  "animated-content": "awsui_animated-content_hyvsj_18m22_816",
+  "hide-navigation": "awsui_hide-navigation_hyvsj_18m22_825",
+  "notifications": "awsui_notifications_hyvsj_18m22_835",
+  "sticky-notifications": "awsui_sticky-notifications_hyvsj_18m22_841",
+  "split-panel-bottom": "awsui_split-panel-bottom_hyvsj_18m22_858",
+  "position-bottom": "awsui_position-bottom_hyvsj_18m22_904",
+  "openSplitPanelBottom": "awsui_openSplitPanelBottom_hyvsj_18m22_1",
+  "split-panel-side": "awsui_split-panel-side_hyvsj_18m22_933",
+  "position-side": "awsui_position-side_hyvsj_18m22_961",
+  "openSplitPanelSide": "awsui_openSplitPanelSide_hyvsj_18m22_1",
+  "tools-container": "awsui_tools-container_hyvsj_18m22_998",
+  "tools": "awsui_tools_hyvsj_18m22_998",
+  "openTools": "awsui_openTools_hyvsj_18m22_1",
+  "has-tools-form-persistence": "awsui_has-tools-form-persistence_hyvsj_18m22_1092",
+  "hide-tools": "awsui_hide-tools_hyvsj_18m22_1102",
+  "show-tools": "awsui_show-tools_hyvsj_18m22_1114",
+  "has-tools-form": "awsui_has-tools-form_hyvsj_18m22_1092",
+  "trigger": "awsui_trigger_hyvsj_18m22_1181",
+  "selected": "awsui_selected_hyvsj_18m22_1220"
 };