npm - @cloudscape-design/components-themeable - Versions diffs - 3.0.1163 → 3.0.1165 - Mend

@cloudscape-design/components-themeable 3.0.1163 → 3.0.1165

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (192) hide show

package/lib/internal/manifest.json CHANGED Viewed

@@ -1,3 +1,3 @@
 {
-  "commit": "857f6370d1a3aabe5c7be70005373ebbf1c48a45"
+  "commit": "1bfc081cf3a606d870361eaabd7f385af0fd3d98"
 }

package/lib/internal/scss/app-layout/visual-refresh/drawers.scss CHANGED Viewed

@@ -155,6 +155,7 @@
     block-size: 100%;
     display: flex;
     align-items: center;
+    z-index: 850;
   }
   &:not(.is-drawer-open) {

package/lib/internal/scss/app-layout/visual-refresh-toolbar/drawer/styles.scss CHANGED Viewed

@@ -23,7 +23,7 @@
 $global-drawer-gap-size: 8px;
 $global-drawer-expanded-mode-motion: #{awsui.$motion-duration-refresh-only-slow} #{awsui.$motion-easing-refresh-only-a};
 $drawer-resize-handle-size: awsui.$space-m;
-$ai-drawer-heider-height: 41px;
+$ai-drawer-heider-height: 42px;
 .drawer {
   position: sticky;
@@ -156,6 +156,7 @@ $ai-drawer-heider-height: 41px;
   }
   > .drawer-slider {
+    z-index: 850;
     grid-column: 1;
     grid-row: 1;
     block-size: 100%;
@@ -184,6 +185,7 @@ $ai-drawer-heider-height: 41px;
     }
     > .drawer-slider {
+      z-index: 850;
       grid-column: 2;
       grid-row: 1;
       display: flex;
@@ -259,6 +261,7 @@ $ai-drawer-heider-height: 41px;
     }
     > .drawer-slider {
+      z-index: 850;
       display: flex;
       justify-content: center;
       inline-size: awsui.$space-xs;

package/lib/internal/scss/drawer/styles.scss CHANGED Viewed

@@ -16,6 +16,16 @@
 .drawer {
   @include styles.styles-reset;
   word-wrap: break-word;
+  &.with-footer {
+    display: flex;
+    flex-direction: column;
+    min-block-size: 100%;
+    > .content {
+      flex: 1;
+    }
+  }
 }
 .header {
@@ -73,6 +83,21 @@
   padding-block-end: awsui.$space-panel-content-bottom;
 }
+.footer {
+  background-color: awsui.$color-background-container-content;
+  border-block-start: awsui.$border-divider-section-width solid awsui.$color-border-panel-header;
+  padding-block: awsui.$space-panel-content-top;
+  padding-inline: awsui.$space-panel-side-left awsui.$space-panel-side-right;
+  &.is-sticky {
+    position: sticky;
+    inset-block-end: 0;
+    inset-inline-start: 0;
+    inset-inline-end: 0;
+    z-index: 810;
+  }
+}
 .test-utils-drawer-content {
   /* used in test-utils */
 }

package/lib/internal/scss/internal/generated/custom-css-properties/index.scss CHANGED Viewed

@@ -1,6 +1,6 @@
     // Build environment
-    $awsui-commit-hash: "857f6370";
+    $awsui-commit-hash: "1bfc081c";
     // Manually managed CSS-variables
     $maxContentWidth: --awsui-max-content-width-d43v8n;
 $minContentWidth: --awsui-min-content-width-d43v8n;

package/lib/internal/scss/table/resizer/styles.scss CHANGED Viewed

@@ -20,12 +20,12 @@ $block-gap: calc(2 * #{awsui.$space-xs} + #{awsui.$space-xxxs});
 .resizer-wrapper {
   inset-block: 0;
   position: absolute;
-  inset-inline-end: calc(-1 * #{$handle-width} / 2);
+  inset-inline-end: calc(-1 * $handle-width / 2);
   inline-size: $handle-width;
   overflow: hidden;
   z-index: 10;
-  th:last-child > &:has(.divider-interactive):not(.is-visual-refresh) {
+  th:last-child > &:has(.divider-interactive).is-borderless {
     inset-inline-end: 0;
   }
 }
@@ -58,6 +58,11 @@ th:not(:last-child) > .divider-disabled {
   inset-inline-end: calc(#{$handle-width} / 2);
 }
+// stylelint-disable-next-line selector-combinator-disallowed-list
+th:last-child > .resizer-wrapper.visual-refresh.is-borderless .divider-interactive {
+  inset-inline-end: 0;
+}
 .divider-active {
   border-inline-start: $active-separator-width solid awsui.$color-border-divider-active;
 }
@@ -89,10 +94,6 @@ th:not(:last-child) > .divider-disabled {
   }
 }
-th:last-child > .resizer:not(.is-visual-refresh) {
-  inset-inline-end: 0;
-}
 .tracker {
   display: none;
   position: absolute;

package/lib/internal/template/anchor-navigation/styles.css.js CHANGED Viewed

@@ -1,13 +1,13 @@
     import './styles.scoped.css';
     export default {
-  "root": "awsui_root_swimc_1xp97_189",
-  "anchor-list": "awsui_anchor-list_swimc_1xp97_221",
-  "anchor-item": "awsui_anchor-item_swimc_1xp97_244",
-  "anchor-item--active": "awsui_anchor-item--active_swimc_1xp97_264",
-  "anchor-link": "awsui_anchor-link_swimc_1xp97_281",
-  "anchor-link--active": "awsui_anchor-link--active_swimc_1xp97_323",
-  "anchor-link-text": "awsui_anchor-link-text_swimc_1xp97_330",
-  "anchor-link-info": "awsui_anchor-link-info_swimc_1xp97_334"
+  "root": "awsui_root_swimc_2kzat_189",
+  "anchor-list": "awsui_anchor-list_swimc_2kzat_221",
+  "anchor-item": "awsui_anchor-item_swimc_2kzat_244",
+  "anchor-item--active": "awsui_anchor-item--active_swimc_2kzat_264",
+  "anchor-link": "awsui_anchor-link_swimc_2kzat_281",
+  "anchor-link--active": "awsui_anchor-link--active_swimc_2kzat_323",
+  "anchor-link-text": "awsui_anchor-link-text_swimc_2kzat_330",
+  "anchor-link-info": "awsui_anchor-link-info_swimc_2kzat_334"
 };

package/lib/internal/template/anchor-navigation/styles.scoped.css CHANGED Viewed

@@ -186,7 +186,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
-.awsui_root_swimc_1xp97_189:not(#\9) {
+.awsui_root_swimc_2kzat_189:not(#\9) {
   border-collapse: separate;
   border-spacing: 0;
   box-sizing: border-box;
@@ -218,7 +218,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   -moz-osx-font-smoothing: auto;
 }
-.awsui_anchor-list_swimc_1xp97_221:not(#\9) {
+.awsui_anchor-list_swimc_2kzat_221:not(#\9) {
   list-style: none;
   margin-block: 0;
   margin-inline: 0;
@@ -227,7 +227,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   position: relative;
   text-indent: 0;
 }
-.awsui_anchor-list_swimc_1xp97_221:not(#\9)::before {
+.awsui_anchor-list_swimc_2kzat_221:not(#\9)::before {
   content: "";
   background-color: var(--color-border-divider-default-ipvpev, #eaeded);
   border-start-start-radius: var(--border-radius-tabs-focus-ring-ciyqfm, 0px);
@@ -241,10 +241,10 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   inline-size: 2px;
 }
-.awsui_anchor-item_swimc_1xp97_244:not(#\9) {
+.awsui_anchor-item_swimc_2kzat_244:not(#\9) {
   font-size: var(--font-size-body-m-vv54cm, 14px);
   line-height: var(--line-height-body-m-bedeoh, 22px);
-  color: var(--color-text-body-secondary-twh4xm, #545b64);
+  color: var(--color-text-body-secondary-gaft81, #545b64);
   font-weight: 400;
   margin-block: var(--space-scaled-xxs-jatbiv, 4px);
   margin-inline: 0;
@@ -252,19 +252,19 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   transition-property: all;
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_anchor-item_swimc_1xp97_244:not(#\9) {
+  .awsui_anchor-item_swimc_2kzat_244:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_anchor-item_swimc_1xp97_244:not(#\9), .awsui-mode-entering .awsui_anchor-item_swimc_1xp97_244:not(#\9) {
+.awsui-motion-disabled .awsui_anchor-item_swimc_2kzat_244:not(#\9), .awsui-mode-entering .awsui_anchor-item_swimc_2kzat_244:not(#\9) {
   animation: none;
   transition: none;
 }
-.awsui_anchor-item--active_swimc_1xp97_264:not(#\9) {
+.awsui_anchor-item--active_swimc_2kzat_264:not(#\9) {
   position: relative;
 }
-.awsui_anchor-item--active_swimc_1xp97_264:not(#\9)::before {
+.awsui_anchor-item--active_swimc_2kzat_264:not(#\9)::before {
   content: "";
   background-color: var(--color-text-accent-rvq171, #0073bb);
   border-start-start-radius: var(--border-radius-tabs-focus-ring-ciyqfm, 0px);
@@ -278,11 +278,11 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   inline-size: 2px;
 }
-.awsui_anchor-link_swimc_1xp97_281:not(#\9) {
+.awsui_anchor-link_swimc_2kzat_281:not(#\9) {
   font-size: var(--font-size-body-m-vv54cm, 14px);
   line-height: var(--line-height-body-m-bedeoh, 22px);
   align-items: baseline;
-  color: var(--color-text-body-secondary-twh4xm, #545b64);
+  color: var(--color-text-body-secondary-gaft81, #545b64);
   display: flex;
   flex-direction: row;
   font-weight: 400;
@@ -291,16 +291,16 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   transition-property: all;
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_anchor-link_swimc_1xp97_281:not(#\9) {
+  .awsui_anchor-link_swimc_2kzat_281:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_anchor-link_swimc_1xp97_281:not(#\9), .awsui-mode-entering .awsui_anchor-link_swimc_1xp97_281:not(#\9) {
+.awsui-motion-disabled .awsui_anchor-link_swimc_2kzat_281:not(#\9), .awsui-mode-entering .awsui_anchor-link_swimc_2kzat_281:not(#\9) {
   animation: none;
   transition: none;
 }
-body[data-awsui-focus-visible=true] .awsui_anchor-link_swimc_1xp97_281:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_anchor-link_swimc_2kzat_281:not(#\9):focus {
   outline: thin dotted;
   outline: var(--border-link-focus-ring-outline-c5423y, 5px auto Highlight);
   outline-offset: 2px;
@@ -311,27 +311,27 @@ body[data-awsui-focus-visible=true] .awsui_anchor-link_swimc_1xp97_281:not(#\9):
   border-end-end-radius: var(--border-radius-control-default-focus-ring-9xsko1, 2px);
   box-shadow: 0 0 0 var(--border-link-focus-ring-shadow-spread-woh62o, 0px) var(--color-border-item-focused-r5f6xl, #0073bb);
 }
-.awsui_anchor-link_swimc_1xp97_281:not(#\9):hover {
+.awsui_anchor-link_swimc_2kzat_281:not(#\9):hover {
   color: var(--color-text-accent-rvq171, #0073bb);
 }
-.awsui_anchor-link_swimc_1xp97_281:not(#\9):focus {
+.awsui_anchor-link_swimc_2kzat_281:not(#\9):focus {
   outline: none;
 }
-.awsui_anchor-link_swimc_1xp97_281:not(#\9):hover, .awsui_anchor-link_swimc_1xp97_281:not(#\9):focus {
+.awsui_anchor-link_swimc_2kzat_281:not(#\9):hover, .awsui_anchor-link_swimc_2kzat_281:not(#\9):focus {
   text-decoration: none;
 }
-.awsui_anchor-link--active_swimc_1xp97_323:not(#\9) {
+.awsui_anchor-link--active_swimc_2kzat_323:not(#\9) {
   font-weight: var(--font-wayfinding-link-active-weight-lhxtkr, 700);
   -webkit-font-smoothing: var(--font-smoothing-webkit-px4az4, auto);
   -moz-osx-font-smoothing: var(--font-smoothing-moz-osx-ev3sgf, auto);
   color: var(--color-text-accent-rvq171, #0073bb);
 }
-.awsui_anchor-link-text_swimc_1xp97_330:not(#\9) {
+.awsui_anchor-link-text_swimc_2kzat_330:not(#\9) {
   display: block;
 }
-.awsui_anchor-link-info_swimc_1xp97_334:not(#\9) {
+.awsui_anchor-link-info_swimc_2kzat_334:not(#\9) {
   margin-inline-start: var(--space-xs-kw7k3v, 8px);
   font-size: var(--font-size-body-s-psgqn2, 12px);
   line-height: var(--line-height-body-s-otgtsr, 16px);
@@ -340,5 +340,5 @@ body[data-awsui-focus-visible=true] .awsui_anchor-link_swimc_1xp97_281:not(#\9):
   -moz-osx-font-smoothing: var(--font-smoothing-moz-osx-ev3sgf, auto);
   font-weight: 700;
   letter-spacing: 0.005em;
-  color: var(--color-text-link-default-x6cnv5, #0073bb);
+  color: var(--color-text-link-default-z7zuy8, #0073bb);
 }

package/lib/internal/template/anchor-navigation/styles.selectors.js CHANGED Viewed

@@ -2,13 +2,13 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "root": "awsui_root_swimc_1xp97_189",
-  "anchor-list": "awsui_anchor-list_swimc_1xp97_221",
-  "anchor-item": "awsui_anchor-item_swimc_1xp97_244",
-  "anchor-item--active": "awsui_anchor-item--active_swimc_1xp97_264",
-  "anchor-link": "awsui_anchor-link_swimc_1xp97_281",
-  "anchor-link--active": "awsui_anchor-link--active_swimc_1xp97_323",
-  "anchor-link-text": "awsui_anchor-link-text_swimc_1xp97_330",
-  "anchor-link-info": "awsui_anchor-link-info_swimc_1xp97_334"
+  "root": "awsui_root_swimc_2kzat_189",
+  "anchor-list": "awsui_anchor-list_swimc_2kzat_221",
+  "anchor-item": "awsui_anchor-item_swimc_2kzat_244",
+  "anchor-item--active": "awsui_anchor-item--active_swimc_2kzat_264",
+  "anchor-link": "awsui_anchor-link_swimc_2kzat_281",
+  "anchor-link--active": "awsui_anchor-link--active_swimc_2kzat_323",
+  "anchor-link-text": "awsui_anchor-link-text_swimc_2kzat_330",
+  "anchor-link-info": "awsui_anchor-link-info_swimc_2kzat_334"
 };

package/lib/internal/template/app-layout/runtime-drawer/index.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/app-layout/runtime-drawer/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAwC,MAAM,OAAO,CAAC;~~AAI7D~~,OAAO,EAAE,gBAAgB,~~EAAE~~,MAAM,+BAA+B,CAAC;~~AACjE~~,OAAO,EAA0B,yBAAyB,EAAE,MAAM,uBAAuB,CAAC;AAC1F,OAAO,EACL,YAAY,IAAI,mBAAmB,EACnC,uBAAuB,EACxB,MAAM,4CAA4C,CAAC;AAEpD,OAAO,EAAE,aAAa,IAAI,qBAAqB,EAAE,MAAM,0CAA0C,CAAC;AAClG,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAK/C,MAAM,WAAW,aAAc,SAAQ,cAAc,CAAC,MAAM;IAC1D,QAAQ,CAAC,EAAE,yBAAyB,CAAC,uBAAuB,CAAC,CAAC;IAC9D,QAAQ,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAC;CAC9B;AAED,MAAM,WAAW,aAAa;IAC5B,MAAM,EAAE,KAAK,CAAC,aAAa,CAAC,CAAC;IAC7B,WAAW,EAAE,KAAK,CAAC,aAAa,CAAC,CAAC;IAClC,UAAU,EAAE,KAAK,CAAC,aAAa,CAAC,CAAC;CAClC;~~AAkFD~~,eAAO,MAAM,wBAAwB,GACnC,eAAe,mBAAmB,KACjC,cAAc,CAAC,MAAM,GAAG;IACzB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,EAAE,yBAAyB,CAAC,uBAAuB,CAAC,CAAC;IAC9D,aAAa,CAAC,EAAE,aAAa,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC;~~CA2BtD~~,CAAC;AAEF,eAAO,MAAM,0BAA0B,GACrC,eAAe,qBAAqB,KACnC,cAAc,CAAC,MAAM,GAAG;IACzB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,EAAE,yBAAyB,CAAC,uBAAuB,CAAC,CAAC;IAC9D,aAAa,CAAC,EAAE,aAAa,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC;IACrD,uBAAuB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1C,iBAAiB,CAAC,EAAE,yBAAyB,CAAC;QAAE,UAAU,EAAE,OAAO,CAAA;KAAE,CAAC,CAAC;~~CAoCxE~~,CAAC;AAEF,wBAAgB,qBAAqB,CACnC,YAAY,EAAE,KAAK,CAAC,mBAAmB,CAAC,EACxC,aAAa,EAAE,KAAK,CAAC,mBAAmB,CAAC,GACxC,aAAa,CAQf"}
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/app-layout/runtime-drawer/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAwC,MAAM,OAAO,CAAC;AAE7D,OAAO,EAAE,gBAAgB,EAAe,MAAM,+BAA+B,CAAC;AAC9E,OAAO,EAA0B,yBAAyB,EAAE,MAAM,uBAAuB,CAAC;AAC1F,OAAO,EACL,YAAY,IAAI,mBAAmB,EACnC,uBAAuB,EACxB,MAAM,4CAA4C,CAAC;AAEpD,OAAO,EAAE,aAAa,IAAI,qBAAqB,EAAE,MAAM,0CAA0C,CAAC;AAClG,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAK/C,MAAM,WAAW,aAAc,SAAQ,cAAc,CAAC,MAAM;IAC1D,QAAQ,CAAC,EAAE,yBAAyB,CAAC,uBAAuB,CAAC,CAAC;IAC9D,QAAQ,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAC;CAC9B;AAED,MAAM,WAAW,aAAa;IAC5B,MAAM,EAAE,KAAK,CAAC,aAAa,CAAC,CAAC;IAC7B,WAAW,EAAE,KAAK,CAAC,aAAa,CAAC,CAAC;IAClC,UAAU,EAAE,KAAK,CAAC,aAAa,CAAC,CAAC;CAClC;AAmFD,eAAO,MAAM,wBAAwB,GACnC,eAAe,mBAAmB,KACjC,cAAc,CAAC,MAAM,GAAG;IACzB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,EAAE,yBAAyB,CAAC,uBAAuB,CAAC,CAAC;IAC9D,aAAa,CAAC,EAAE,aAAa,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC;CA6BtD,CAAC;AAEF,eAAO,MAAM,0BAA0B,GACrC,eAAe,qBAAqB,KACnC,cAAc,CAAC,MAAM,GAAG;IACzB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,EAAE,yBAAyB,CAAC,uBAAuB,CAAC,CAAC;IAC9D,aAAa,CAAC,EAAE,aAAa,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC;IACrD,uBAAuB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1C,iBAAiB,CAAC,EAAE,yBAAyB,CAAC;QAAE,UAAU,EAAE,OAAO,CAAA;KAAE,CAAC,CAAC;CAsCxE,CAAC;AAEF,wBAAgB,qBAAqB,CACnC,YAAY,EAAE,KAAK,CAAC,mBAAmB,CAAC,EACxC,aAAa,EAAE,KAAK,CAAC,mBAAmB,CAAC,GACxC,aAAa,CAQf"}

package/lib/internal/template/app-layout/runtime-drawer/index.js CHANGED Viewed

@@ -1,7 +1,6 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 import React, { useContext, useEffect, useRef } from 'react';
-import { warnOnce } from '@cloudscape-design/component-toolkit/internal';
 import { fireNonCancelableEvent } from '../../internal/events';
 import { sortByPriority } from '../../internal/plugins/helpers/utils';
 import { ActiveDrawersContext } from '../utils/visibility-context';
@@ -42,21 +41,20 @@ function RuntimeDrawerHeader({ mountHeader, unmountHeader }) {
     }, []);
     return React.createElement("div", { className: styles['runtime-header-wrapper'], ref: ref });
 }
-function checkForUnsupportedProps(headerActions) {
-    const unsupportedProps = new Set([
-        'iconSvg',
-        'popoverFeedback',
-        'pressedIconSvg',
-        'popoverFeedback',
-        'pressedPopoverFeedback',
-    ]);
-    for (const item of headerActions) {
-        const unsupported = Object.keys(item).filter(key => unsupportedProps.has(key));
-        if (unsupported.length > 0) {
-            warnOnce('AppLayout', `The headerActions properties are not supported for runtime api: ${unsupported.join(' ')}`);
-        }
-    }
-    return headerActions;
+function mapRuntimeHeaderActionsToHeaderActions(runtimeHeaderActions) {
+    return runtimeHeaderActions.map(runtimeHeaderAction => {
+        return {
+            ...runtimeHeaderAction,
+            ...('iconSvg' in runtimeHeaderAction &&
+                runtimeHeaderAction.iconSvg && {
+                iconSvg: convertRuntimeTriggerToReactNode(runtimeHeaderAction.iconSvg),
+            }),
+            ...('pressedIconSvg' in runtimeHeaderAction &&
+                runtimeHeaderAction.pressedIconSvg && {
+                iconSvg: convertRuntimeTriggerToReactNode(runtimeHeaderAction.pressedIconSvg),
+            }),
+        };
+    });
 }
 const convertRuntimeTriggerToReactNode = (runtimeTrigger) => {
     if (!runtimeTrigger) {
@@ -82,7 +80,9 @@ export const mapRuntimeConfigToDrawer = (runtimeConfig) => {
         onResize: event => {
             fireNonCancelableEvent(runtimeDrawer.onResize, { size: event.detail.size, id: runtimeDrawer.id });
         },
-        headerActions: runtimeDrawer.headerActions ? checkForUnsupportedProps(runtimeDrawer.headerActions) : undefined,
+        headerActions: runtimeDrawer.headerActions
+            ? mapRuntimeHeaderActionsToHeaderActions(runtimeDrawer.headerActions)
+            : undefined,
     };
 };
 export const mapRuntimeConfigToAiDrawer = (runtimeConfig) => {
@@ -109,7 +109,9 @@ export const mapRuntimeConfigToAiDrawer = (runtimeConfig) => {
         onResize: event => {
             fireNonCancelableEvent(runtimeDrawer.onResize, { size: event.detail.size, id: runtimeDrawer.id });
         },
-        headerActions: runtimeDrawer.headerActions ? checkForUnsupportedProps(runtimeDrawer.headerActions) : undefined,
+        headerActions: runtimeDrawer.headerActions
+            ? mapRuntimeHeaderActionsToHeaderActions(runtimeDrawer.headerActions)
+            : undefined,
     };
 };
 export function convertRuntimeDrawers(localDrawers, globalDrawers) {

package/lib/internal/template/app-layout/runtime-drawer/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/app-layout/runtime-drawer/index.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useContext, useEffect, useRef } from 'react';\n\nimport { warnOnce } from '@cloudscape-design/component-toolkit/internal';\n\nimport { ButtonGroupProps } from '../../button-group/interfaces';\nimport { fireNonCancelableEvent, NonCancelableEventHandler } from '../../internal/events';\nimport {\n DrawerConfig as RuntimeDrawerConfig,\n DrawerStateChangeParams,\n} from '../../internal/plugins/controllers/drawers';\nimport { sortByPriority } from '../../internal/plugins/helpers/utils';\nimport { DrawerPayload as RuntimeAiDrawerConfig } from '../../internal/plugins/widget/interfaces';\nimport { AppLayoutProps } from '../interfaces';\nimport { ActiveDrawersContext } from '../utils/visibility-context';\n\nimport styles from './styles.css.js';\n\nexport interface RuntimeDrawer extends AppLayoutProps.Drawer {\n onToggle?: NonCancelableEventHandler<DrawerStateChangeParams>;\n position?: 'side' \| 'bottom';\n}\n\nexport interface DrawersLayout {\n global: Array<RuntimeDrawer>;\n localBefore: Array<RuntimeDrawer>;\n localAfter: Array<RuntimeDrawer>;\n}\n\ntype VisibilityCallback = (isVisible: boolean) => void;\n\ninterface RuntimeContentWrapperProps {\n id?: string;\n mountContent: RuntimeDrawerConfig['mountContent'];\n unmountContent: RuntimeDrawerConfig['unmountContent'];\n}\n\nfunction RuntimeDrawerWrapper({ mountContent, unmountContent, id }: RuntimeContentWrapperProps) {\n const ref = useRef<HTMLDivElement>(null);\n const visibilityChangeCallback = useRef<VisibilityCallback \| null>(null);\n const activeDrawersIds = useContext(ActiveDrawersContext);\n const isVisible = !!id && activeDrawersIds.includes(id);\n\n useEffect(() => {\n const container = ref.current!;\n mountContent(container, {\n onVisibilityChange: cb => {\n visibilityChangeCallback.current = cb;\n },\n });\n return () => {\n unmountContent(container);\n visibilityChangeCallback.current = null;\n };\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n useEffect(() => {\n visibilityChangeCallback.current?.(isVisible);\n }, [isVisible]);\n\n return <div ref={ref} className={styles['runtime-content-wrapper']} data-awsui-runtime-drawer-root-id={id}></div>;\n}\n\ninterface RuntimeContentHeaderProps {\n mountHeader: (container: HTMLElement) => void;\n unmountHeader?: (container: HTMLElement) => void;\n}\n\nfunction RuntimeDrawerHeader({ mountHeader, unmountHeader }: RuntimeContentHeaderProps) {\n const ref = useRef<HTMLDivElement>(null);\n\n useEffect(() => {\n const container = ref.current!;\n mountHeader?.(container);\n return () => {\n unmountHeader?.(container);\n };\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n return <div className={styles['runtime-header-wrapper']} ref={ref} />;\n}\n\nfunction checkForUnsupportedProps(headerActions: ReadonlyArray<ButtonGroupProps.Item>) {\n const unsupportedProps = new Set([\n 'iconSvg',\n 'popoverFeedback',\n 'pressedIconSvg',\n 'popoverFeedback',\n 'pressedPopoverFeedback',\n ]);\n for (const item of headerActions) {\n const unsupported = Object.keys(item).filter(key => unsupportedProps.has(key));\n if (unsupported.length > 0) {\n warnOnce('AppLayout', `The headerActions properties are not supported for runtime api: ${unsupported.join(' ')}`);\n }\n }\n return headerActions;\n}\n\nconst convertRuntimeTriggerToReactNode = (runtimeTrigger?: string) => {\n if (!runtimeTrigger) {\n return undefined;\n }\n // eslint-disable-next-line react/no-danger\n return <span style={{ lineHeight: 0 }} dangerouslySetInnerHTML={{ __html: runtimeTrigger }} />;\n};\n\nexport const mapRuntimeConfigToDrawer = (\n runtimeConfig: RuntimeDrawerConfig\n): AppLayoutProps.Drawer & {\n orderPriority?: number;\n onToggle?: NonCancelableEventHandler<DrawerStateChangeParams>;\n headerActions?: ReadonlyArray<ButtonGroupProps.Item>;\n} => {\n const { mountContent, unmountContent, trigger, ...runtimeDrawer } = runtimeConfig;\n\n return {\n ...runtimeDrawer,\n ariaLabels: { drawerName: runtimeDrawer.ariaLabels.content ?? '', ...runtimeDrawer.ariaLabels },\n trigger: trigger\n ? {\n ...(trigger.iconSvg && {\n iconSvg: convertRuntimeTriggerToReactNode(trigger.iconSvg),\n }),\n }\n : undefined,\n content: (\n <RuntimeDrawerWrapper\n key={runtimeDrawer.id}\n mountContent={mountContent}\n unmountContent={unmountContent}\n id={runtimeDrawer.id}\n />\n ),\n onResize: event => {\n fireNonCancelableEvent(runtimeDrawer.onResize, { size: event.detail.size, id: runtimeDrawer.id });\n },\n headerActions: runtimeDrawer.headerActions ? checkForUnsupportedProps(runtimeDrawer.headerActions) : undefined,\n };\n};\n\nexport const mapRuntimeConfigToAiDrawer = (\n runtimeConfig: RuntimeAiDrawerConfig\n): AppLayoutProps.Drawer & {\n orderPriority?: number;\n onToggle?: NonCancelableEventHandler<DrawerStateChangeParams>;\n headerActions?: ReadonlyArray<ButtonGroupProps.Item>;\n exitExpandedModeTrigger?: React.ReactNode;\n onToggleFocusMode?: NonCancelableEventHandler<{ isExpanded: boolean }>;\n} => {\n const { mountContent, unmountContent, trigger, exitExpandedModeTrigger, ...runtimeDrawer } = runtimeConfig;\n\n return {\n ...runtimeDrawer,\n ariaLabels: { drawerName: runtimeDrawer.ariaLabels.content ?? '', ...runtimeDrawer.ariaLabels },\n ...(trigger && {\n trigger: {\n customIcon: convertRuntimeTriggerToReactNode(trigger?.customIcon),\n iconSvg: convertRuntimeTriggerToReactNode(trigger?.iconSvg),\n },\n }),\n exitExpandedModeTrigger: exitExpandedModeTrigger\n ? {\n customIcon: convertRuntimeTriggerToReactNode(exitExpandedModeTrigger?.customIcon),\n }\n : undefined,\n content: (\n <RuntimeDrawerWrapper\n key={runtimeDrawer.id}\n mountContent={mountContent}\n unmountContent={unmountContent}\n id={runtimeDrawer.id}\n />\n ),\n ...(runtimeDrawer.mountHeader && {\n header: (\n <RuntimeDrawerHeader mountHeader={runtimeDrawer.mountHeader} unmountHeader={runtimeDrawer.unmountHeader} />\n ),\n }),\n onResize: event => {\n fireNonCancelableEvent(runtimeDrawer.onResize, { size: event.detail.size, id: runtimeDrawer.id });\n },\n headerActions: runtimeDrawer.headerActions ? checkForUnsupportedProps(runtimeDrawer.headerActions) : undefined,\n };\n};\n\nexport function convertRuntimeDrawers(\n localDrawers: Array<RuntimeDrawerConfig>,\n globalDrawers: Array<RuntimeDrawerConfig>\n): DrawersLayout {\n const converted = localDrawers.map(mapRuntimeConfigToDrawer);\n const sorted = sortByPriority(converted);\n return {\n global: sortByPriority(globalDrawers.map(mapRuntimeConfigToDrawer)),\n localBefore: sorted.filter(item => (item.orderPriority ?? 0) > 0),\n localAfter: sorted.filter(item => (item.orderPriority ?? 0) <= 0),\n };\n}\n"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/app-layout/runtime-drawer/index.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useContext, useEffect, useRef } from 'react';\n\nimport { ButtonGroupProps, ItemRuntime } from '../../button-group/interfaces';\nimport { fireNonCancelableEvent, NonCancelableEventHandler } from '../../internal/events';\nimport {\n DrawerConfig as RuntimeDrawerConfig,\n DrawerStateChangeParams,\n} from '../../internal/plugins/controllers/drawers';\nimport { sortByPriority } from '../../internal/plugins/helpers/utils';\nimport { DrawerPayload as RuntimeAiDrawerConfig } from '../../internal/plugins/widget/interfaces';\nimport { AppLayoutProps } from '../interfaces';\nimport { ActiveDrawersContext } from '../utils/visibility-context';\n\nimport styles from './styles.css.js';\n\nexport interface RuntimeDrawer extends AppLayoutProps.Drawer {\n onToggle?: NonCancelableEventHandler<DrawerStateChangeParams>;\n position?: 'side' \| 'bottom';\n}\n\nexport interface DrawersLayout {\n global: Array<RuntimeDrawer>;\n localBefore: Array<RuntimeDrawer>;\n localAfter: Array<RuntimeDrawer>;\n}\n\ntype VisibilityCallback = (isVisible: boolean) => void;\n\ninterface RuntimeContentWrapperProps {\n id?: string;\n mountContent: RuntimeDrawerConfig['mountContent'];\n unmountContent: RuntimeDrawerConfig['unmountContent'];\n}\n\nfunction RuntimeDrawerWrapper({ mountContent, unmountContent, id }: RuntimeContentWrapperProps) {\n const ref = useRef<HTMLDivElement>(null);\n const visibilityChangeCallback = useRef<VisibilityCallback \| null>(null);\n const activeDrawersIds = useContext(ActiveDrawersContext);\n const isVisible = !!id && activeDrawersIds.includes(id);\n\n useEffect(() => {\n const container = ref.current!;\n mountContent(container, {\n onVisibilityChange: cb => {\n visibilityChangeCallback.current = cb;\n },\n });\n return () => {\n unmountContent(container);\n visibilityChangeCallback.current = null;\n };\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n useEffect(() => {\n visibilityChangeCallback.current?.(isVisible);\n }, [isVisible]);\n\n return <div ref={ref} className={styles['runtime-content-wrapper']} data-awsui-runtime-drawer-root-id={id}></div>;\n}\n\ninterface RuntimeContentHeaderProps {\n mountHeader: (container: HTMLElement) => void;\n unmountHeader?: (container: HTMLElement) => void;\n}\n\nfunction RuntimeDrawerHeader({ mountHeader, unmountHeader }: RuntimeContentHeaderProps) {\n const ref = useRef<HTMLDivElement>(null);\n\n useEffect(() => {\n const container = ref.current!;\n mountHeader?.(container);\n return () => {\n unmountHeader?.(container);\n };\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n return <div className={styles['runtime-header-wrapper']} ref={ref} />;\n}\n\nfunction mapRuntimeHeaderActionsToHeaderActions(\n runtimeHeaderActions: ReadonlyArray<ItemRuntime>\n): ReadonlyArray<ButtonGroupProps.Item> {\n return runtimeHeaderActions.map(runtimeHeaderAction => {\n return {\n ...runtimeHeaderAction,\n ...('iconSvg' in runtimeHeaderAction &&\n runtimeHeaderAction.iconSvg && {\n iconSvg: convertRuntimeTriggerToReactNode(runtimeHeaderAction.iconSvg),\n }),\n ...('pressedIconSvg' in runtimeHeaderAction &&\n runtimeHeaderAction.pressedIconSvg && {\n iconSvg: convertRuntimeTriggerToReactNode(runtimeHeaderAction.pressedIconSvg),\n }),\n };\n });\n}\n\nconst convertRuntimeTriggerToReactNode = (runtimeTrigger?: string) => {\n if (!runtimeTrigger) {\n return undefined;\n }\n // eslint-disable-next-line react/no-danger\n return <span style={{ lineHeight: 0 }} dangerouslySetInnerHTML={{ __html: runtimeTrigger }} />;\n};\n\nexport const mapRuntimeConfigToDrawer = (\n runtimeConfig: RuntimeDrawerConfig\n): AppLayoutProps.Drawer & {\n orderPriority?: number;\n onToggle?: NonCancelableEventHandler<DrawerStateChangeParams>;\n headerActions?: ReadonlyArray<ButtonGroupProps.Item>;\n} => {\n const { mountContent, unmountContent, trigger, ...runtimeDrawer } = runtimeConfig;\n\n return {\n ...runtimeDrawer,\n ariaLabels: { drawerName: runtimeDrawer.ariaLabels.content ?? '', ...runtimeDrawer.ariaLabels },\n trigger: trigger\n ? {\n ...(trigger.iconSvg && {\n iconSvg: convertRuntimeTriggerToReactNode(trigger.iconSvg),\n }),\n }\n : undefined,\n content: (\n <RuntimeDrawerWrapper\n key={runtimeDrawer.id}\n mountContent={mountContent}\n unmountContent={unmountContent}\n id={runtimeDrawer.id}\n />\n ),\n onResize: event => {\n fireNonCancelableEvent(runtimeDrawer.onResize, { size: event.detail.size, id: runtimeDrawer.id });\n },\n headerActions: runtimeDrawer.headerActions\n ? mapRuntimeHeaderActionsToHeaderActions(runtimeDrawer.headerActions)\n : undefined,\n };\n};\n\nexport const mapRuntimeConfigToAiDrawer = (\n runtimeConfig: RuntimeAiDrawerConfig\n): AppLayoutProps.Drawer & {\n orderPriority?: number;\n onToggle?: NonCancelableEventHandler<DrawerStateChangeParams>;\n headerActions?: ReadonlyArray<ButtonGroupProps.Item>;\n exitExpandedModeTrigger?: React.ReactNode;\n onToggleFocusMode?: NonCancelableEventHandler<{ isExpanded: boolean }>;\n} => {\n const { mountContent, unmountContent, trigger, exitExpandedModeTrigger, ...runtimeDrawer } = runtimeConfig;\n\n return {\n ...runtimeDrawer,\n ariaLabels: { drawerName: runtimeDrawer.ariaLabels.content ?? '', ...runtimeDrawer.ariaLabels },\n ...(trigger && {\n trigger: {\n customIcon: convertRuntimeTriggerToReactNode(trigger?.customIcon),\n iconSvg: convertRuntimeTriggerToReactNode(trigger?.iconSvg),\n },\n }),\n exitExpandedModeTrigger: exitExpandedModeTrigger\n ? {\n customIcon: convertRuntimeTriggerToReactNode(exitExpandedModeTrigger?.customIcon),\n }\n : undefined,\n content: (\n <RuntimeDrawerWrapper\n key={runtimeDrawer.id}\n mountContent={mountContent}\n unmountContent={unmountContent}\n id={runtimeDrawer.id}\n />\n ),\n ...(runtimeDrawer.mountHeader && {\n header: (\n <RuntimeDrawerHeader mountHeader={runtimeDrawer.mountHeader} unmountHeader={runtimeDrawer.unmountHeader} />\n ),\n }),\n onResize: event => {\n fireNonCancelableEvent(runtimeDrawer.onResize, { size: event.detail.size, id: runtimeDrawer.id });\n },\n headerActions: runtimeDrawer.headerActions\n ? mapRuntimeHeaderActionsToHeaderActions(runtimeDrawer.headerActions)\n : undefined,\n };\n};\n\nexport function convertRuntimeDrawers(\n localDrawers: Array<RuntimeDrawerConfig>,\n globalDrawers: Array<RuntimeDrawerConfig>\n): DrawersLayout {\n const converted = localDrawers.map(mapRuntimeConfigToDrawer);\n const sorted = sortByPriority(converted);\n return {\n global: sortByPriority(globalDrawers.map(mapRuntimeConfigToDrawer)),\n localBefore: sorted.filter(item => (item.orderPriority ?? 0) > 0),\n localAfter: sorted.filter(item => (item.orderPriority ?? 0) <= 0),\n };\n}\n"]}