@cloudscape-design/components-themeable 3.0.65 → 3.0.67

package/lib/internal/template/pie-chart/styles.scoped.css

@@ -94,57 +94,57 @@ 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_segment__path_1edmh_912m4_97:not(#\9) {
+.awsui_segment__path_1edmh_1x93y_97:not(#\9) {
   transition: opacity var(--motion-duration-transition-quick-x85tae, 90ms) var(--motion-easing-transition-quick-lukbd8, linear);
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_segment__path_1edmh_912m4_97:not(#\9) {
+  .awsui_segment__path_1edmh_1x93y_97:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_segment__path_1edmh_912m4_97:not(#\9), .awsui-mode-entering .awsui_segment__path_1edmh_912m4_97:not(#\9) {
+.awsui-motion-disabled .awsui_segment__path_1edmh_1x93y_97:not(#\9), .awsui-mode-entering .awsui_segment__path_1edmh_1x93y_97:not(#\9) {
   animation: none;
   transition: none;
 }
 
-.awsui_segment_1edmh_912m4_97:not(#\9) {
+.awsui_segment_1edmh_1x93y_97:not(#\9) {
   transition: opacity var(--motion-duration-transition-quick-x85tae, 90ms) var(--motion-easing-transition-quick-lukbd8, linear);
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_segment_1edmh_912m4_97:not(#\9) {
+  .awsui_segment_1edmh_1x93y_97:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_segment_1edmh_912m4_97:not(#\9), .awsui-mode-entering .awsui_segment_1edmh_912m4_97:not(#\9) {
+.awsui-motion-disabled .awsui_segment_1edmh_1x93y_97:not(#\9), .awsui-mode-entering .awsui_segment_1edmh_1x93y_97:not(#\9) {
   animation: none;
   transition: none;
 }
-.awsui_segment_1edmh_912m4_97 > .awsui_segment__hover_1edmh_912m4_124:not(#\9) {
+.awsui_segment_1edmh_1x93y_97 > .awsui_segment__hover_1edmh_1x93y_124:not(#\9) {
   transition: opacity var(--motion-duration-transition-quick-x85tae, 90ms) var(--motion-easing-transition-quick-lukbd8, linear);
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_segment_1edmh_912m4_97 > .awsui_segment__hover_1edmh_912m4_124:not(#\9) {
+  .awsui_segment_1edmh_1x93y_97 > .awsui_segment__hover_1edmh_1x93y_124:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_segment_1edmh_912m4_97 > .awsui_segment__hover_1edmh_912m4_124:not(#\9), .awsui-mode-entering .awsui_segment_1edmh_912m4_97 > .awsui_segment__hover_1edmh_912m4_124:not(#\9) {
+.awsui-motion-disabled .awsui_segment_1edmh_1x93y_97 > .awsui_segment__hover_1edmh_1x93y_124:not(#\9), .awsui-mode-entering .awsui_segment_1edmh_1x93y_97 > .awsui_segment__hover_1edmh_1x93y_124:not(#\9) {
   animation: none;
   transition: none;
 }
 
-.awsui_label_1edmh_912m4_138:not(#\9) {
+.awsui_label_1edmh_1x93y_138:not(#\9) {
   transition: opacity var(--motion-duration-transition-quick-x85tae, 90ms) var(--motion-easing-transition-quick-lukbd8, linear);
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_label_1edmh_912m4_138:not(#\9) {
+  .awsui_label_1edmh_1x93y_138:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_label_1edmh_912m4_138:not(#\9), .awsui-mode-entering .awsui_label_1edmh_912m4_138:not(#\9) {
+.awsui-motion-disabled .awsui_label_1edmh_1x93y_138:not(#\9), .awsui-mode-entering .awsui_label_1edmh_1x93y_138:not(#\9) {
   animation: none;
   transition: none;
 }
@@ -153,7 +153,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_1edmh_912m4_156:not(#\9) {
+.awsui_root_1edmh_1x93y_156:not(#\9) {
   /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
   border-collapse: separate;
   border-spacing: 0;
@@ -191,55 +191,55 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   display: block;
 }
 
-.awsui_filter-container_1edmh_912m4_168:not(#\9) {
+.awsui_filter-container_1edmh_1x93y_168:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_has-default-filter_1edmh_912m4_172 > :not(#\9):first-child {
+.awsui_has-default-filter_1edmh_1x93y_172 > :not(#\9):first-child {
   flex: 280px 0 1;
 }
 
-.awsui_content_1edmh_912m4_176:not(#\9) {
+.awsui_content_1edmh_1x93y_176:not(#\9) {
   display: flex;
   position: relative;
   justify-content: center;
   align-items: center;
 }
-.awsui_content_1edmh_912m4_176.awsui_content--small_1edmh_912m4_182:not(#\9) {
+.awsui_content_1edmh_1x93y_176.awsui_content--small_1edmh_1x93y_182:not(#\9) {
   min-height: calc(2 * (50px + var(--space-xs-rsr2qu, 8px) + calc(2 * var(--font-body-m-line-height-i7xxvv, 22px))));
 }
-.awsui_content_1edmh_912m4_176.awsui_content--small_1edmh_912m4_182.awsui_content--without-labels_1edmh_912m4_185:not(#\9) {
+.awsui_content_1edmh_1x93y_176.awsui_content--small_1edmh_1x93y_182.awsui_content--without-labels_1edmh_1x93y_185:not(#\9) {
   min-height: calc(2 * (50px + var(--space-xs-rsr2qu, 8px)));
 }
-.awsui_content_1edmh_912m4_176.awsui_content--medium_1edmh_912m4_188:not(#\9) {
+.awsui_content_1edmh_1x93y_176.awsui_content--medium_1edmh_1x93y_188:not(#\9) {
   min-height: calc(2 * (100px + var(--space-s-hv8c1d, 12px) + calc(2 * var(--font-body-m-line-height-i7xxvv, 22px))));
 }
-.awsui_content_1edmh_912m4_176.awsui_content--medium_1edmh_912m4_188.awsui_content--without-labels_1edmh_912m4_185:not(#\9) {
+.awsui_content_1edmh_1x93y_176.awsui_content--medium_1edmh_1x93y_188.awsui_content--without-labels_1edmh_1x93y_185:not(#\9) {
   min-height: calc(2 * (100px + var(--space-s-hv8c1d, 12px)));
 }
-.awsui_content_1edmh_912m4_176.awsui_content--large_1edmh_912m4_194:not(#\9) {
+.awsui_content_1edmh_1x93y_176.awsui_content--large_1edmh_1x93y_194:not(#\9) {
   min-height: calc(2 * (140px + var(--space-s-hv8c1d, 12px) + calc(2 * var(--font-body-m-line-height-i7xxvv, 22px))));
 }
-.awsui_content_1edmh_912m4_176.awsui_content--large_1edmh_912m4_194.awsui_content--without-labels_1edmh_912m4_185:not(#\9) {
+.awsui_content_1edmh_1x93y_176.awsui_content--large_1edmh_1x93y_194.awsui_content--without-labels_1edmh_1x93y_185:not(#\9) {
   min-height: calc(2 * (140px + var(--space-s-hv8c1d, 12px)));
 }
-.awsui_content_1edmh_912m4_176.awsui_content--reserve-filter_1edmh_912m4_200:not(#\9) {
+.awsui_content_1edmh_1x93y_176.awsui_content--reserve-filter_1edmh_1x93y_200:not(#\9) {
   margin-top: calc(2 * var(--font-body-m-line-height-i7xxvv, 22px));
 }
-.awsui_content_1edmh_912m4_176.awsui_content--reserve-legend_1edmh_912m4_203:not(#\9) {
+.awsui_content_1edmh_1x93y_176.awsui_content--reserve-legend_1edmh_1x93y_203:not(#\9) {
   margin-bottom: calc(2 * var(--font-body-m-line-height-i7xxvv, 22px));
 }
 
-.awsui_status-container_1edmh_912m4_207:not(#\9) {
+.awsui_status-container_1edmh_1x93y_207:not(#\9) {
   /* used in test utils */
 }
 
-.awsui_chart-container_1edmh_912m4_211:not(#\9) {
+.awsui_chart-container_1edmh_1x93y_211:not(#\9) {
   display: flex;
   flex: 1;
 }
 
-.awsui_inner-content_1edmh_912m4_216:not(#\9) {
+.awsui_inner-content_1edmh_1x93y_216:not(#\9) {
   display: flex;
   position: absolute;
   flex-direction: column;
@@ -253,74 +253,74 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   pointer-events: none;
 }
 
-.awsui_segment__highlight_1edmh_912m4_230:not(#\9) {
+.awsui_segment__highlight_1edmh_1x93y_230:not(#\9) {
   stroke: none;
   opacity: 0;
 }
 
-.awsui_segment_1edmh_912m4_97:not(#\9) {
+.awsui_segment_1edmh_1x93y_97:not(#\9) {
   stroke: var(--color-background-container-content-o88wxm, #ffffff);
   stroke-width: 2px;
   stroke-linejoin: round;
   opacity: 1;
   cursor: pointer;
 }
-.awsui_segment_1edmh_912m4_97:not(#\9):focus {
+.awsui_segment_1edmh_1x93y_97:not(#\9):focus {
   outline: none;
 }
-.awsui_segment_1edmh_912m4_97.awsui_segment--dimmed_1edmh_912m4_245:not(#\9) {
+.awsui_segment_1edmh_1x93y_97.awsui_segment--dimmed_1edmh_1x93y_245:not(#\9) {
   opacity: 0.35;
 }
-.awsui_segment_1edmh_912m4_97.awsui_segment--highlighted_1edmh_912m4_248 > .awsui_segment__highlight_1edmh_912m4_230:not(#\9), .awsui_segment_1edmh_912m4_97:not(#\9):hover:not(.awsui_segment--dimmed_1edmh_912m4_245) > .awsui_segment__highlight_1edmh_912m4_230 {
+.awsui_segment_1edmh_1x93y_97.awsui_segment--highlighted_1edmh_1x93y_248 > .awsui_segment__highlight_1edmh_1x93y_230:not(#\9), .awsui_segment_1edmh_1x93y_97:not(#\9):hover:not(.awsui_segment--dimmed_1edmh_1x93y_245) > .awsui_segment__highlight_1edmh_1x93y_230 {
   opacity: 1;
 }
 
-.awsui_label_1edmh_912m4_138:not(#\9) {
+.awsui_label_1edmh_1x93y_138:not(#\9) {
   color: var(--color-text-heading-default-bjds33, #16191f);
   opacity: 1;
   /* stylelint-disable-next-line selector-max-type */
   /* stylelint-disable-next-line selector-max-type */
 }
-.awsui_label_1edmh_912m4_138 > line:not(#\9) {
-  stroke: var(--color-border-control-default-jt0hca, #aab7b8);
+.awsui_label_1edmh_1x93y_138 > line:not(#\9) {
+  stroke: var(--color-border-control-default-bwkbmv, #879596);
   stroke-width: var(--border-divider-section-width-5a4cv1, 1px);
 }
-.awsui_label_1edmh_912m4_138 > div:not(#\9) {
+.awsui_label_1edmh_1x93y_138 > div:not(#\9) {
   margin-top: -0.75em;
 }
-.awsui_label_1edmh_912m4_138.awsui_label--dimmed_1edmh_912m4_265:not(#\9) {
+.awsui_label_1edmh_1x93y_138.awsui_label--dimmed_1edmh_1x93y_265:not(#\9) {
   opacity: 0.35;
 }
-.awsui_label_1edmh_912m4_138.awsui_label--align-right_1edmh_912m4_268:not(#\9) {
+.awsui_label_1edmh_1x93y_138.awsui_label--align-right_1edmh_1x93y_268:not(#\9) {
   /* stylelint-disable-next-line selector-max-type */
 }
-.awsui_label_1edmh_912m4_138.awsui_label--align-right_1edmh_912m4_268 > div:not(#\9) {
+.awsui_label_1edmh_1x93y_138.awsui_label--align-right_1edmh_1x93y_268 > div:not(#\9) {
   text-align: right;
 }
 
 /* stylelint-disable-next-line selector-max-type */
-.awsui_label-text_1edmh_912m4_276 > text:not(#\9) {
+.awsui_label-text_1edmh_1x93y_276 > text:not(#\9) {
   font-weight: var(--font-display-label-weight-tjy9e4, 400);
   fill: var(--color-text-heading-default-bjds33, #16191f);
   dominant-baseline: middle;
 }
 
-text.awsui_label__description_1edmh_912m4_282:not(#\9) {
+text.awsui_label__description_1edmh_1x93y_282:not(#\9) {
   font-size: var(--font-chart-detail-size-viz5mm, 14px);
   font-weight: 400;
   color: var(--color-text-group-label-5rxtyp, #545b64);
   fill: var(--color-text-group-label-5rxtyp, #545b64);
 }
 
-.awsui_label-line_1edmh_912m4_289:not(#\9) {
+.awsui_label-line_1edmh_1x93y_289:not(#\9) {
   /* used in component code */
 }
 
-.awsui_label--highlighted_1edmh_912m4_293:not(#\9) {
+.awsui_label--highlighted_1edmh_1x93y_293:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_popover-header_1edmh_912m4_297:not(#\9) {
+.awsui_popover-header_1edmh_1x93y_297:not(#\9) {
   display: inline-flex;
   align-items: flex-start;
 }

package/lib/internal/template/pie-chart/styles.selectors.js

@@ -2,32 +2,32 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "segment__path": "awsui_segment__path_1edmh_912m4_97",
-  "segment": "awsui_segment_1edmh_912m4_97",
-  "segment__hover": "awsui_segment__hover_1edmh_912m4_124",
-  "label": "awsui_label_1edmh_912m4_138",
-  "root": "awsui_root_1edmh_912m4_156",
-  "filter-container": "awsui_filter-container_1edmh_912m4_168",
-  "has-default-filter": "awsui_has-default-filter_1edmh_912m4_172",
-  "content": "awsui_content_1edmh_912m4_176",
-  "content--small": "awsui_content--small_1edmh_912m4_182",
-  "content--without-labels": "awsui_content--without-labels_1edmh_912m4_185",
-  "content--medium": "awsui_content--medium_1edmh_912m4_188",
-  "content--large": "awsui_content--large_1edmh_912m4_194",
-  "content--reserve-filter": "awsui_content--reserve-filter_1edmh_912m4_200",
-  "content--reserve-legend": "awsui_content--reserve-legend_1edmh_912m4_203",
-  "status-container": "awsui_status-container_1edmh_912m4_207",
-  "chart-container": "awsui_chart-container_1edmh_912m4_211",
-  "inner-content": "awsui_inner-content_1edmh_912m4_216",
-  "segment__highlight": "awsui_segment__highlight_1edmh_912m4_230",
-  "segment--dimmed": "awsui_segment--dimmed_1edmh_912m4_245",
-  "segment--highlighted": "awsui_segment--highlighted_1edmh_912m4_248",
-  "label--dimmed": "awsui_label--dimmed_1edmh_912m4_265",
-  "label--align-right": "awsui_label--align-right_1edmh_912m4_268",
-  "label-text": "awsui_label-text_1edmh_912m4_276",
-  "label__description": "awsui_label__description_1edmh_912m4_282",
-  "label-line": "awsui_label-line_1edmh_912m4_289",
-  "label--highlighted": "awsui_label--highlighted_1edmh_912m4_293",
-  "popover-header": "awsui_popover-header_1edmh_912m4_297"
+  "segment__path": "awsui_segment__path_1edmh_1x93y_97",
+  "segment": "awsui_segment_1edmh_1x93y_97",
+  "segment__hover": "awsui_segment__hover_1edmh_1x93y_124",
+  "label": "awsui_label_1edmh_1x93y_138",
+  "root": "awsui_root_1edmh_1x93y_156",
+  "filter-container": "awsui_filter-container_1edmh_1x93y_168",
+  "has-default-filter": "awsui_has-default-filter_1edmh_1x93y_172",
+  "content": "awsui_content_1edmh_1x93y_176",
+  "content--small": "awsui_content--small_1edmh_1x93y_182",
+  "content--without-labels": "awsui_content--without-labels_1edmh_1x93y_185",
+  "content--medium": "awsui_content--medium_1edmh_1x93y_188",
+  "content--large": "awsui_content--large_1edmh_1x93y_194",
+  "content--reserve-filter": "awsui_content--reserve-filter_1edmh_1x93y_200",
+  "content--reserve-legend": "awsui_content--reserve-legend_1edmh_1x93y_203",
+  "status-container": "awsui_status-container_1edmh_1x93y_207",
+  "chart-container": "awsui_chart-container_1edmh_1x93y_211",
+  "inner-content": "awsui_inner-content_1edmh_1x93y_216",
+  "segment__highlight": "awsui_segment__highlight_1edmh_1x93y_230",
+  "segment--dimmed": "awsui_segment--dimmed_1edmh_1x93y_245",
+  "segment--highlighted": "awsui_segment--highlighted_1edmh_1x93y_248",
+  "label--dimmed": "awsui_label--dimmed_1edmh_1x93y_265",
+  "label--align-right": "awsui_label--align-right_1edmh_1x93y_268",
+  "label-text": "awsui_label-text_1edmh_1x93y_276",
+  "label__description": "awsui_label__description_1edmh_1x93y_282",
+  "label-line": "awsui_label-line_1edmh_1x93y_289",
+  "label--highlighted": "awsui_label--highlighted_1edmh_1x93y_293",
+  "popover-header": "awsui_popover-header_1edmh_1x93y_297"
 };
   

package/lib/internal/template/popover/body.d.ts

@@ -1,9 +1,6 @@
 import React from 'react';
 import { ButtonProps } from '../button/interfaces';
-import { PopoverProps } from './interfaces';
 export interface PopoverBodyProps {
-    size: PopoverProps.Size;
-    fixedWidth: boolean;
     dismissButton: boolean;
     dismissAriaLabel: string | undefined;
     onDismiss: () => void;
@@ -15,5 +12,5 @@ export interface PopoverBodyProps {
     dismissButtonRef?: React.Ref<ButtonProps.Ref>;
     className?: string;
 }
-export default function PopoverBody({ size, fixedWidth, dismissButton: showDismissButton, dismissAriaLabel, header, children, onDismiss, variant, returnFocus, overflowVisible, dismissButtonRef, className, }: PopoverBodyProps): JSX.Element;
+export default function PopoverBody({ dismissButton: showDismissButton, dismissAriaLabel, header, children, onDismiss, variant, returnFocus, overflowVisible, dismissButtonRef, className, }: PopoverBodyProps): JSX.Element;
 //# sourceMappingURL=body.d.ts.map

package/lib/internal/template/popover/body.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"body.d.ts","sourceRoot":"","sources":["../../../src/popover/body.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAsB,MAAM,OAAO,CAAC;AAM3C,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAGnD,OAAO,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAG5C,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,YAAY,CAAC,IAAI,CAAC;IACxB,UAAU,EAAE,OAAO,CAAC;IACpB,aAAa,EAAE,OAAO,CAAC;IACvB,gBAAgB,EAAE,MAAM,GAAG,SAAS,CAAC;IACrC,SAAS,EAAE,MAAM,IAAI,CAAC;IAEtB,MAAM,EAAE,KAAK,CAAC,SAAS,GAAG,SAAS,CAAC;IACpC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,eAAe,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC;IAErC,gBAAgB,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC;IAE9C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAClC,IAAI,EACJ,UAAU,EACV,aAAa,EAAE,iBAAiB,EAChC,gBAAgB,EAChB,MAAM,EACN,QAAQ,EACR,SAAS,EACT,OAAO,EACP,WAAkB,EAClB,eAAe,EACf,gBAAgB,EAChB,SAAS,GACV,EAAE,gBAAgB,eAwDlB"}
+{"version":3,"file":"body.d.ts","sourceRoot":"","sources":["../../../src/popover/body.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAsB,MAAM,OAAO,CAAC;AAM3C,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAKnD,MAAM,WAAW,gBAAgB;IAC/B,aAAa,EAAE,OAAO,CAAC;IACvB,gBAAgB,EAAE,MAAM,GAAG,SAAS,CAAC;IACrC,SAAS,EAAE,MAAM,IAAI,CAAC;IAEtB,MAAM,EAAE,KAAK,CAAC,SAAS,GAAG,SAAS,CAAC;IACpC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,eAAe,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC;IAErC,gBAAgB,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC;IAE9C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAClC,aAAa,EAAE,iBAAiB,EAChC,gBAAgB,EAChB,MAAM,EACN,QAAQ,EACR,SAAS,EACT,OAAO,EACP,WAAkB,EAClB,eAAe,EACf,gBAAgB,EAChB,SAAS,GACV,EAAE,gBAAgB,eAsDlB"}

package/lib/internal/template/popover/body.js

@@ -9,7 +9,7 @@ import { InternalButton } from '../button/internal';
 import styles from './styles.css.js';
 export default function PopoverBody(_a) {
     var _b, _c;
-    var size = _a.size, fixedWidth = _a.fixedWidth, showDismissButton = _a.dismissButton, dismissAriaLabel = _a.dismissAriaLabel, header = _a.header, children = _a.children, onDismiss = _a.onDismiss, variant = _a.variant, _d = _a.returnFocus, returnFocus = _d === void 0 ? true : _d, overflowVisible = _a.overflowVisible, dismissButtonRef = _a.dismissButtonRef, className = _a.className;
+    var showDismissButton = _a.dismissButton, dismissAriaLabel = _a.dismissAriaLabel, header = _a.header, children = _a.children, onDismiss = _a.onDismiss, variant = _a.variant, _d = _a.returnFocus, returnFocus = _d === void 0 ? true : _d, overflowVisible = _a.overflowVisible, dismissButtonRef = _a.dismissButtonRef, className = _a.className;
     var labelledById = useUniqueId('awsui-popover-');
     var onKeyDown = useCallback(function (event) {
         if (event.keyCode === KeyCode.escape) {
@@ -18,9 +18,7 @@ export default function PopoverBody(_a) {
     }, [onDismiss]);
     var dismissButton = (showDismissButton !== null && showDismissButton !== void 0 ? showDismissButton : null) && (React.createElement("div", { className: styles.dismiss },
         React.createElement(InternalButton, { variant: "icon", formAction: "none", iconName: "close", className: styles['dismiss-control'], ariaLabel: dismissAriaLabel, onClick: function () { return onDismiss(); }, ref: dismissButtonRef })));
-    return (React.createElement("div", { className: clsx(styles.body, className, styles["body-size-".concat(size)], (_b = {},
-            _b[styles['fixed-width']] = fixedWidth,
-            _b[styles["variant-".concat(variant)]] = variant,
+    return (React.createElement("div", { className: clsx(styles.body, className, (_b = {},
             _b[styles['body-overflow-visible']] = overflowVisible === 'both',
             _b)), role: header ? 'dialog' : undefined, onKeyDown: onKeyDown, "aria-modal": showDismissButton && variant !== 'annotation' ? true : undefined, "aria-labelledby": header ? labelledById : undefined },
         React.createElement(FocusLock, { disabled: variant === 'annotation' || !showDismissButton, autoFocus: true, returnFocus: returnFocus },

package/lib/internal/template/popover/body.js.map

@@ -1 +1 @@
-{"version":3,"file":"body.js","sourceRoot":"","sources":["../../../src/popover/body.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, { useCallback } from 'react';\nimport clsx from 'clsx';\nimport FocusLock from 'react-focus-lock';\n\nimport { KeyCode } from '../internal/keycode';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\nimport { ButtonProps } from '../button/interfaces';\nimport { InternalButton } from '../button/internal';\n\nimport { PopoverProps } from './interfaces';\nimport styles from './styles.css.js';\n\nexport interface PopoverBodyProps {\n  size: PopoverProps.Size;\n  fixedWidth: boolean;\n  dismissButton: boolean;\n  dismissAriaLabel: string | undefined;\n  onDismiss: () => void;\n\n  header: React.ReactNode | undefined;\n  children: React.ReactNode;\n  variant?: 'annotation';\n  returnFocus?: boolean;\n  overflowVisible?: 'content' | 'both';\n\n  dismissButtonRef?: React.Ref<ButtonProps.Ref>;\n\n  className?: string;\n}\n\nexport default function PopoverBody({\n  size,\n  fixedWidth,\n  dismissButton: showDismissButton,\n  dismissAriaLabel,\n  header,\n  children,\n  onDismiss,\n  variant,\n  returnFocus = true,\n  overflowVisible,\n  dismissButtonRef,\n  className,\n}: PopoverBodyProps) {\n  const labelledById = useUniqueId('awsui-popover-');\n\n  const onKeyDown = useCallback(\n    (event: React.KeyboardEvent) => {\n      if (event.keyCode === KeyCode.escape) {\n        onDismiss();\n      }\n    },\n    [onDismiss]\n  );\n\n  const dismissButton = (showDismissButton ?? null) && (\n    <div className={styles.dismiss}>\n      <InternalButton\n        variant=\"icon\"\n        formAction=\"none\"\n        iconName=\"close\"\n        className={styles['dismiss-control']}\n        ariaLabel={dismissAriaLabel}\n        onClick={() => onDismiss()}\n        ref={dismissButtonRef}\n      />\n    </div>\n  );\n\n  return (\n    <div\n      className={clsx(styles.body, className, styles[`body-size-${size}`], {\n        [styles['fixed-width']]: fixedWidth,\n        [styles[`variant-${variant}`]]: variant,\n        [styles['body-overflow-visible']]: overflowVisible === 'both',\n      })}\n      role={header ? 'dialog' : undefined}\n      onKeyDown={onKeyDown}\n      aria-modal={showDismissButton && variant !== 'annotation' ? true : undefined}\n      aria-labelledby={header ? labelledById : undefined}\n    >\n      <FocusLock disabled={variant === 'annotation' || !showDismissButton} autoFocus={true} returnFocus={returnFocus}>\n        {header && (\n          <div className={clsx(styles['header-row'], showDismissButton && styles['has-dismiss'])}>\n            {dismissButton}\n            <div className={styles.header} id={labelledById}>\n              <h2>{header}</h2>\n            </div>\n          </div>\n        )}\n        <div className={!header && showDismissButton ? styles['has-dismiss'] : undefined}>\n          {!header && dismissButton}\n          <div className={clsx(styles.content, { [styles['content-overflow-visible']]: !!overflowVisible })}>\n            {children}\n          </div>\n        </div>\n      </FocusLock>\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"body.js","sourceRoot":"","sources":["../../../src/popover/body.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, { useCallback } from 'react';\nimport clsx from 'clsx';\nimport FocusLock from 'react-focus-lock';\n\nimport { KeyCode } from '../internal/keycode';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\nimport { ButtonProps } from '../button/interfaces';\nimport { InternalButton } from '../button/internal';\n\nimport styles from './styles.css.js';\n\nexport interface PopoverBodyProps {\n  dismissButton: boolean;\n  dismissAriaLabel: string | undefined;\n  onDismiss: () => void;\n\n  header: React.ReactNode | undefined;\n  children: React.ReactNode;\n  variant?: 'annotation';\n  returnFocus?: boolean;\n  overflowVisible?: 'content' | 'both';\n\n  dismissButtonRef?: React.Ref<ButtonProps.Ref>;\n\n  className?: string;\n}\n\nexport default function PopoverBody({\n  dismissButton: showDismissButton,\n  dismissAriaLabel,\n  header,\n  children,\n  onDismiss,\n  variant,\n  returnFocus = true,\n  overflowVisible,\n  dismissButtonRef,\n  className,\n}: PopoverBodyProps) {\n  const labelledById = useUniqueId('awsui-popover-');\n\n  const onKeyDown = useCallback(\n    (event: React.KeyboardEvent) => {\n      if (event.keyCode === KeyCode.escape) {\n        onDismiss();\n      }\n    },\n    [onDismiss]\n  );\n\n  const dismissButton = (showDismissButton ?? null) && (\n    <div className={styles.dismiss}>\n      <InternalButton\n        variant=\"icon\"\n        formAction=\"none\"\n        iconName=\"close\"\n        className={styles['dismiss-control']}\n        ariaLabel={dismissAriaLabel}\n        onClick={() => onDismiss()}\n        ref={dismissButtonRef}\n      />\n    </div>\n  );\n\n  return (\n    <div\n      className={clsx(styles.body, className, {\n        [styles['body-overflow-visible']]: overflowVisible === 'both',\n      })}\n      role={header ? 'dialog' : undefined}\n      onKeyDown={onKeyDown}\n      aria-modal={showDismissButton && variant !== 'annotation' ? true : undefined}\n      aria-labelledby={header ? labelledById : undefined}\n    >\n      <FocusLock disabled={variant === 'annotation' || !showDismissButton} autoFocus={true} returnFocus={returnFocus}>\n        {header && (\n          <div className={clsx(styles['header-row'], showDismissButton && styles['has-dismiss'])}>\n            {dismissButton}\n            <div className={styles.header} id={labelledById}>\n              <h2>{header}</h2>\n            </div>\n          </div>\n        )}\n        <div className={!header && showDismissButton ? styles['has-dismiss'] : undefined}>\n          {!header && dismissButton}\n          <div className={clsx(styles.content, { [styles['content-overflow-visible']]: !!overflowVisible })}>\n            {children}\n          </div>\n        </div>\n      </FocusLock>\n    </div>\n  );\n}\n"]}

package/lib/internal/template/popover/container.d.ts

@@ -18,6 +18,9 @@ export interface PopoverContainerProps {
     arrow: (position: InternalPosition | null) => React.ReactNode;
     children: React.ReactNode;
     renderWithPortal?: boolean;
+    size: PopoverProps.Size;
+    fixedWidth: boolean;
+    variant?: 'annotation';
 }
-export default function PopoverContainer({ position, trackRef, trackKey, arrow, children, zIndex, renderWithPortal, }: PopoverContainerProps): JSX.Element;
+export default function PopoverContainer({ position, trackRef, trackKey, arrow, children, zIndex, renderWithPortal, size, fixedWidth, variant, }: PopoverContainerProps): JSX.Element;
 //# sourceMappingURL=container.d.ts.map

package/lib/internal/template/popover/container.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"container.d.ts","sourceRoot":"","sources":["../../../src/popover/container.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAwE,MAAM,OAAO,CAAC;AAK7F,OAAO,EAAkB,gBAAgB,EAAU,YAAY,EAAE,MAAM,cAAc,CAAC;AAMtF,MAAM,WAAW,qBAAqB;IACpC,kEAAkE;IAClE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC;IACnC;;;;;;;;MAQE;IACF,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC3B,QAAQ,EAAE,YAAY,CAAC,QAAQ,CAAC;IAChC,MAAM,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;IACvC,KAAK,EAAE,CAAC,QAAQ,EAAE,gBAAgB,GAAG,IAAI,KAAK,KAAK,CAAC,SAAS,CAAC;IAC9D,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAID,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EACvC,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,KAAK,EACL,QAAQ,EACR,MAAM,EACN,gBAAgB,GACjB,EAAE,qBAAqB,eAiJvB"}
+{"version":3,"file":"container.d.ts","sourceRoot":"","sources":["../../../src/popover/container.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAwE,MAAM,OAAO,CAAC;AAK7F,OAAO,EAAkB,gBAAgB,EAAU,YAAY,EAAE,MAAM,cAAc,CAAC;AAKtF,MAAM,WAAW,qBAAqB;IACpC,kEAAkE;IAClE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC;IACnC;;;;;;;;MAQE;IACF,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC3B,QAAQ,EAAE,YAAY,CAAC,QAAQ,CAAC;IAChC,MAAM,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;IACvC,KAAK,EAAE,CAAC,QAAQ,EAAE,gBAAgB,GAAG,IAAI,KAAK,KAAK,CAAC,SAAS,CAAC;IAC9D,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,IAAI,EAAE,YAAY,CAAC,IAAI,CAAC;IACxB,UAAU,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,YAAY,CAAC;CACxB;AAID,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EACvC,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,KAAK,EACL,QAAQ,EACR,MAAM,EACN,gBAAgB,EAChB,IAAI,EACJ,UAAU,EACV,OAAO,GACR,EAAE,qBAAqB,eAqKvB"}

package/lib/internal/template/popover/container.js

@@ -4,47 +4,50 @@ import { __assign } from "tslib";
 import React, { useCallback, useLayoutEffect, useRef, useState } from 'react';
 import clsx from 'clsx';
 import { getContainingBlock, nodeContains } from '../internal/utils/dom';
-import { useContainerQuery } from '../internal/hooks/container-queries';
+import { useResizeObserver } from '../internal/hooks/container-queries';
 import { calculatePosition } from './utils/positions';
 import styles from './styles.css.js';
 import { useVisualRefresh } from '../internal/hooks/use-visual-mode';
-import { useMergeRefs } from '../internal/hooks/use-merge-refs';
 var INITIAL_STYLES = { position: 'absolute', top: -9999, left: -9999 };
 export default function PopoverContainer(_a) {
-    var position = _a.position, trackRef = _a.trackRef, trackKey = _a.trackKey, arrow = _a.arrow, children = _a.children, zIndex = _a.zIndex, renderWithPortal = _a.renderWithPortal;
-    var _b = useContainerQuery(function (rect, prev) {
-        var roundedRect = { width: Math.round(rect.width), height: Math.round(rect.height) };
-        return (prev === null || prev === void 0 ? void 0 : prev.width) === roundedRect.width && (prev === null || prev === void 0 ? void 0 : prev.height) === roundedRect.height ? prev : rect;
-    }), popoverRect = _b[0], ref = _b[1];
+    var _b;
+    var position = _a.position, trackRef = _a.trackRef, trackKey = _a.trackKey, arrow = _a.arrow, children = _a.children, zIndex = _a.zIndex, renderWithPortal = _a.renderWithPortal, size = _a.size, fixedWidth = _a.fixedWidth, variant = _a.variant;
     var bodyRef = useRef(null);
+    var contentRef = useRef(null);
+    var popoverRef = useRef(null);
     var arrowRef = useRef(null);
-    var _c = useState(INITIAL_STYLES), inlineStyle = _c[0], setInlineStyle = _c[1];
+    var _c = useState(INITIAL_STYLES), popoverStyle = _c[0], setPopoverStyle = _c[1];
     var _d = useState(null), internalPosition = _d[0], setInternalPosition = _d[1];
     var isRefresh = useVisualRefresh();
     // Store the handler in a ref so that it can still be replaced from outside of the listener closure.
     var positionHandlerRef = useRef(function () { });
     // Updates the position handler.
     var updatePositionHandler = useCallback(function () {
-        if (!trackRef.current || !ref.current || !bodyRef.current || !arrowRef.current) {
+        if (!trackRef.current || !popoverRef.current || !bodyRef.current || !contentRef.current || !arrowRef.current) {
             return;
         }
         // Get important elements
+        var popover = popoverRef.current;
         var body = bodyRef.current;
         var arrow = arrowRef.current;
-        var document = ref.current.ownerDocument;
+        var document = popover.ownerDocument;
         var track = trackRef.current;
         // If the popover body isn't being rendered for whatever reason (e.g. "display: none" or JSDOM),
         // or track does not belong to the document - bail on calculating dimensions.
-        if (body.offsetWidth === 0 || body.offsetHeight === 0 || !nodeContains(document.body, track)) {
+        if (popover.offsetWidth === 0 || popover.offsetHeight === 0 || !nodeContains(document.body, track)) {
             return;
         }
         // Imperatively move body off-screen to give it room to expand.
         // Not doing this in React because this recalculation should happen
         // in the span of a single frame without rerendering anything.
-        var prevTop = body.style.top;
-        var prevLeft = body.style.left;
-        body.style.top = '0';
-        body.style.left = '0';
+        var prevTop = popover.style.top;
+        var prevLeft = popover.style.left;
+        popover.style.top = '0';
+        popover.style.left = '0';
+        // Imperatively remove body styles that can remain from the previous computation.
+        body.style.maxHeight = '';
+        body.style.overflowX = '';
+        body.style.overflowY = '';
         // Get rects representing key elements
         // Use getComputedStyle for arrowRect to avoid modifications made by transform
         var viewportRect = getViewportRect(document.defaultView);
@@ -53,43 +56,48 @@ export default function PopoverContainer(_a) {
             width: parseFloat(getComputedStyle(arrow).width),
             height: parseFloat(getComputedStyle(arrow).height)
         };
-        var containingBlock = getContainingBlock(body);
+        var containingBlock = getContainingBlock(popover);
         var containingBlockRect = containingBlock ? containingBlock.getBoundingClientRect() : viewportRect;
-        // Round up dimensions (IE11 doesn't handle subpixels too accurately)
-        var bodyRect = body.getBoundingClientRect();
-        var bodyRectCeil = {
-            top: bodyRect.top,
-            left: bodyRect.left,
-            width: Math.ceil(bodyRect.width),
-            height: Math.ceil(bodyRect.height)
+        var bodyBorderWidth = getBorderWidth(body);
+        var contentRect = contentRef.current.getBoundingClientRect();
+        var contentBoundingBox = {
+            width: contentRect.width + 2 * bodyBorderWidth,
+            height: contentRect.height + 2 * bodyBorderWidth
         };
         // Calculate the arrow direction and viewport-relative position of the popover.
-        var _a = calculatePosition(position, trackRect, arrowRect, bodyRectCeil, containingBlock ? containingBlockRect : getDocumentRect(document), viewportRect, renderWithPortal), newInternalPosition = _a.internalPosition, boundingOffset = _a.boundingOffset;
+        var _a = calculatePosition(position, trackRect, arrowRect, contentBoundingBox, containingBlock ? containingBlockRect : getDocumentRect(document), viewportRect, renderWithPortal), scrollable = _a.scrollable, newInternalPosition = _a.internalPosition, boundingOffset = _a.boundingOffset;
         // Get the position of the popover relative to the offset parent.
         var popoverOffset = toRelativePosition(boundingOffset, containingBlockRect);
         // Cache the distance between the trigger and the popover (which stays the same as you scroll),
         // and use that to recalculate the new popover position.
         var trackRelativeOffset = toRelativePosition(popoverOffset, toRelativePosition(trackRect, containingBlockRect));
-        // Bring back the container to its original position to prevent any
-        // flashing.
-        body.style.top = prevTop;
-        body.style.left = prevLeft;
+        // Bring back the container to its original position to prevent any flashing.
+        popover.style.top = prevTop;
+        popover.style.left = prevLeft;
+        // Allow popover body to scroll if can't fit the popover into the container/viewport otherwise.
+        if (scrollable) {
+            body.style.maxHeight = boundingOffset.height + 'px';
+            body.style.overflowX = 'hidden';
+            body.style.overflowY = 'auto';
+        }
         // Position the popover
         setInternalPosition(newInternalPosition);
-        setInlineStyle({ top: popoverOffset.top, left: popoverOffset.left });
+        setPopoverStyle({ top: popoverOffset.top, left: popoverOffset.left });
         positionHandlerRef.current = function () {
             var newTrackOffset = toRelativePosition(track.getBoundingClientRect(), containingBlock ? containingBlock.getBoundingClientRect() : viewportRect);
-            setInlineStyle({
+            setPopoverStyle({
                 top: newTrackOffset.top + trackRelativeOffset.top,
                 left: newTrackOffset.left + trackRelativeOffset.left
             });
         };
-    }, [position, trackRef, ref, renderWithPortal]);
-    // Update the handler when properties change.
+    }, [position, trackRef, renderWithPortal]);
+    // Recalculate position when properties change.
     useLayoutEffect(function () {
         updatePositionHandler();
-    }, [updatePositionHandler, trackKey, popoverRect]);
-    // Attach document listeners.
+    }, [updatePositionHandler, trackKey]);
+    // Recalculate position when content size changes.
+    useResizeObserver(contentRef, function () { return updatePositionHandler(); });
+    // Recalculate position on DOM events.
     useLayoutEffect(function () {
         /*
           This is a heuristic. Some layout changes are caused by user clicks (e.g. toggling the tools panel, submitting a form),
@@ -108,10 +116,16 @@ export default function PopoverContainer(_a) {
             window.removeEventListener('scroll', refreshPosition, true);
         };
     }, [updatePositionHandler]);
-    var mergedRef = useMergeRefs(bodyRef, ref);
-    return (React.createElement("div", { ref: mergedRef, style: __assign(__assign({}, inlineStyle), { zIndex: zIndex }), className: clsx(styles.container, isRefresh && styles.refresh) },
+    return (React.createElement("div", { ref: popoverRef, style: __assign(__assign({}, popoverStyle), { zIndex: zIndex }), className: clsx(styles.container, isRefresh && styles.refresh) },
         React.createElement("div", { ref: arrowRef, className: clsx(styles["container-arrow"], styles["container-arrow-position-".concat(internalPosition)]), "aria-hidden": true }, arrow(internalPosition)),
-        children));
+        React.createElement("div", { ref: bodyRef, className: clsx(styles['container-body'], styles["container-body-size-".concat(size)], (_b = {},
+                _b[styles['fixed-width']] = fixedWidth,
+                _b[styles["container-body-variant-".concat(variant)]] = variant,
+                _b)) },
+            React.createElement("div", { ref: contentRef }, children))));
+}
+function getBorderWidth(element) {
+    return parseInt(getComputedStyle(element).borderWidth) || 0;
 }
 /**
  * Convert a viewport-relative offset to an element-relative offset.