@cloudscape-design/components-themeable 3.0.961 → 3.0.963

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

@@ -158,129 +158,129 @@ 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_1kvqz_161:not(#\9) {
-  transition: opacity var(--motion-duration-transition-quick-1ym1ir, 90ms) var(--motion-easing-transition-quick-c2tqbv, linear);
+.awsui_segment__path_1edmh_1ke3l_161:not(#\9) {
+  transition: opacity var(--motion-duration-transition-quick-ucajl5, 90ms) var(--motion-easing-transition-quick-034duw, linear);
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_segment__path_1edmh_1kvqz_161:not(#\9) {
+  .awsui_segment__path_1edmh_1ke3l_161:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_segment__path_1edmh_1kvqz_161:not(#\9), .awsui-mode-entering .awsui_segment__path_1edmh_1kvqz_161:not(#\9) {
+.awsui-motion-disabled .awsui_segment__path_1edmh_1ke3l_161:not(#\9), .awsui-mode-entering .awsui_segment__path_1edmh_1ke3l_161:not(#\9) {
   animation: none;
   transition: none;
 }
 
-.awsui_segment_1edmh_1kvqz_161:not(#\9) {
-  transition: opacity var(--motion-duration-transition-quick-1ym1ir, 90ms) var(--motion-easing-transition-quick-c2tqbv, linear);
+.awsui_segment_1edmh_1ke3l_161:not(#\9) {
+  transition: opacity var(--motion-duration-transition-quick-ucajl5, 90ms) var(--motion-easing-transition-quick-034duw, linear);
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_segment_1edmh_1kvqz_161:not(#\9) {
+  .awsui_segment_1edmh_1ke3l_161:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_segment_1edmh_1kvqz_161:not(#\9), .awsui-mode-entering .awsui_segment_1edmh_1kvqz_161:not(#\9) {
+.awsui-motion-disabled .awsui_segment_1edmh_1ke3l_161:not(#\9), .awsui-mode-entering .awsui_segment_1edmh_1ke3l_161:not(#\9) {
   animation: none;
   transition: none;
 }
-.awsui_segment_1edmh_1kvqz_161 > .awsui_segment__hover_1edmh_1kvqz_188:not(#\9) {
-  transition: opacity var(--motion-duration-transition-quick-1ym1ir, 90ms) var(--motion-easing-transition-quick-c2tqbv, linear);
+.awsui_segment_1edmh_1ke3l_161 > .awsui_segment__hover_1edmh_1ke3l_188:not(#\9) {
+  transition: opacity var(--motion-duration-transition-quick-ucajl5, 90ms) var(--motion-easing-transition-quick-034duw, linear);
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_segment_1edmh_1kvqz_161 > .awsui_segment__hover_1edmh_1kvqz_188:not(#\9) {
+  .awsui_segment_1edmh_1ke3l_161 > .awsui_segment__hover_1edmh_1ke3l_188:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_segment_1edmh_1kvqz_161 > .awsui_segment__hover_1edmh_1kvqz_188:not(#\9), .awsui-mode-entering .awsui_segment_1edmh_1kvqz_161 > .awsui_segment__hover_1edmh_1kvqz_188:not(#\9) {
+.awsui-motion-disabled .awsui_segment_1edmh_1ke3l_161 > .awsui_segment__hover_1edmh_1ke3l_188:not(#\9), .awsui-mode-entering .awsui_segment_1edmh_1ke3l_161 > .awsui_segment__hover_1edmh_1ke3l_188:not(#\9) {
   animation: none;
   transition: none;
 }
 
-.awsui_label_1edmh_1kvqz_202:not(#\9) {
-  transition: opacity var(--motion-duration-transition-quick-1ym1ir, 90ms) var(--motion-easing-transition-quick-c2tqbv, linear);
+.awsui_label_1edmh_1ke3l_202:not(#\9) {
+  transition: opacity var(--motion-duration-transition-quick-ucajl5, 90ms) var(--motion-easing-transition-quick-034duw, linear);
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_label_1edmh_1kvqz_202:not(#\9) {
+  .awsui_label_1edmh_1ke3l_202:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_label_1edmh_1kvqz_202:not(#\9), .awsui-mode-entering .awsui_label_1edmh_1kvqz_202:not(#\9) {
+.awsui-motion-disabled .awsui_label_1edmh_1ke3l_202:not(#\9), .awsui-mode-entering .awsui_label_1edmh_1ke3l_202:not(#\9) {
   animation: none;
   transition: none;
 }
 
-.awsui_root_1edmh_1kvqz_216:not(#\9) {
+.awsui_root_1edmh_1ke3l_216:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_content_1edmh_1kvqz_220.awsui_content--small_1edmh_1kvqz_220:not(#\9) {
-  min-block-size: calc(2 * (50px + var(--space-xs-6dgkww, 8px) + calc(2 * var(--line-height-body-m-gw0130, 22px))));
+.awsui_content_1edmh_1ke3l_220.awsui_content--small_1edmh_1ke3l_220:not(#\9) {
+  min-block-size: calc(2 * (50px + var(--space-xs-kw7k3v, 8px) + calc(2 * var(--line-height-body-m-bedeoh, 22px))));
 }
-.awsui_content_1edmh_1kvqz_220.awsui_content--small_1edmh_1kvqz_220.awsui_content--fit-height_1edmh_1kvqz_223:not(#\9) {
-  min-block-size: calc(2 * (30px + calc(2 * var(--line-height-body-m-gw0130, 22px))));
+.awsui_content_1edmh_1ke3l_220.awsui_content--small_1edmh_1ke3l_220.awsui_content--fit-height_1edmh_1ke3l_223:not(#\9) {
+  min-block-size: calc(2 * (30px + calc(2 * var(--line-height-body-m-bedeoh, 22px))));
 }
-.awsui_content_1edmh_1kvqz_220.awsui_content--small_1edmh_1kvqz_220.awsui_content--without-labels_1edmh_1kvqz_226:not(#\9) {
-  min-block-size: calc(2 * (50px + var(--space-xs-6dgkww, 8px)));
+.awsui_content_1edmh_1ke3l_220.awsui_content--small_1edmh_1ke3l_220.awsui_content--without-labels_1edmh_1ke3l_226:not(#\9) {
+  min-block-size: calc(2 * (50px + var(--space-xs-kw7k3v, 8px)));
 }
-.awsui_content_1edmh_1kvqz_220.awsui_content--small_1edmh_1kvqz_220.awsui_content--without-labels_1edmh_1kvqz_226.awsui_content--fit-height_1edmh_1kvqz_223:not(#\9) {
+.awsui_content_1edmh_1ke3l_220.awsui_content--small_1edmh_1ke3l_220.awsui_content--without-labels_1edmh_1ke3l_226.awsui_content--fit-height_1edmh_1ke3l_223:not(#\9) {
   min-block-size: calc(2 * (30px));
 }
-.awsui_content_1edmh_1kvqz_220.awsui_content--medium_1edmh_1kvqz_232:not(#\9) {
-  min-block-size: calc(2 * (100px + var(--space-s-vmutj3, 12px) + calc(2 * var(--line-height-body-m-gw0130, 22px))));
+.awsui_content_1edmh_1ke3l_220.awsui_content--medium_1edmh_1ke3l_232:not(#\9) {
+  min-block-size: calc(2 * (100px + var(--space-s-4a5hs8, 12px) + calc(2 * var(--line-height-body-m-bedeoh, 22px))));
 }
-.awsui_content_1edmh_1kvqz_220.awsui_content--medium_1edmh_1kvqz_232.awsui_content--fit-height_1edmh_1kvqz_223:not(#\9) {
-  min-block-size: calc(2 * (100px + calc(2 * var(--line-height-body-m-gw0130, 22px))));
+.awsui_content_1edmh_1ke3l_220.awsui_content--medium_1edmh_1ke3l_232.awsui_content--fit-height_1edmh_1ke3l_223:not(#\9) {
+  min-block-size: calc(2 * (100px + calc(2 * var(--line-height-body-m-bedeoh, 22px))));
 }
-.awsui_content_1edmh_1kvqz_220.awsui_content--medium_1edmh_1kvqz_232.awsui_content--without-labels_1edmh_1kvqz_226:not(#\9) {
-  min-block-size: calc(2 * (100px + var(--space-s-vmutj3, 12px)));
+.awsui_content_1edmh_1ke3l_220.awsui_content--medium_1edmh_1ke3l_232.awsui_content--without-labels_1edmh_1ke3l_226:not(#\9) {
+  min-block-size: calc(2 * (100px + var(--space-s-4a5hs8, 12px)));
 }
-.awsui_content_1edmh_1kvqz_220.awsui_content--medium_1edmh_1kvqz_232.awsui_content--without-labels_1edmh_1kvqz_226.awsui_content--fit-height_1edmh_1kvqz_223:not(#\9) {
+.awsui_content_1edmh_1ke3l_220.awsui_content--medium_1edmh_1ke3l_232.awsui_content--without-labels_1edmh_1ke3l_226.awsui_content--fit-height_1edmh_1ke3l_223:not(#\9) {
   min-block-size: calc(2 * (100px));
 }
-.awsui_content_1edmh_1kvqz_220.awsui_content--large_1edmh_1kvqz_244:not(#\9) {
-  min-block-size: calc(2 * (140px + var(--space-s-vmutj3, 12px) + calc(2 * var(--line-height-body-m-gw0130, 22px))));
+.awsui_content_1edmh_1ke3l_220.awsui_content--large_1edmh_1ke3l_244:not(#\9) {
+  min-block-size: calc(2 * (140px + var(--space-s-4a5hs8, 12px) + calc(2 * var(--line-height-body-m-bedeoh, 22px))));
 }
-.awsui_content_1edmh_1kvqz_220.awsui_content--large_1edmh_1kvqz_244.awsui_content--fit-height_1edmh_1kvqz_223:not(#\9) {
-  min-block-size: calc(2 * (140px + calc(2 * var(--line-height-body-m-gw0130, 22px))));
+.awsui_content_1edmh_1ke3l_220.awsui_content--large_1edmh_1ke3l_244.awsui_content--fit-height_1edmh_1ke3l_223:not(#\9) {
+  min-block-size: calc(2 * (140px + calc(2 * var(--line-height-body-m-bedeoh, 22px))));
 }
-.awsui_content_1edmh_1kvqz_220.awsui_content--large_1edmh_1kvqz_244.awsui_content--without-labels_1edmh_1kvqz_226:not(#\9) {
-  min-block-size: calc(2 * (140px + var(--space-s-vmutj3, 12px)));
+.awsui_content_1edmh_1ke3l_220.awsui_content--large_1edmh_1ke3l_244.awsui_content--without-labels_1edmh_1ke3l_226:not(#\9) {
+  min-block-size: calc(2 * (140px + var(--space-s-4a5hs8, 12px)));
 }
-.awsui_content_1edmh_1kvqz_220.awsui_content--large_1edmh_1kvqz_244.awsui_content--without-labels_1edmh_1kvqz_226.awsui_content--fit-height_1edmh_1kvqz_223:not(#\9) {
+.awsui_content_1edmh_1ke3l_220.awsui_content--large_1edmh_1ke3l_244.awsui_content--without-labels_1edmh_1ke3l_226.awsui_content--fit-height_1edmh_1ke3l_223:not(#\9) {
   min-block-size: calc(2 * (140px));
 }
 
-.awsui_content--fit-height_1edmh_1kvqz_223:not(#\9) {
+.awsui_content--fit-height_1edmh_1ke3l_223:not(#\9) {
   flex: 1;
 }
 
-.awsui_status-container_1edmh_1kvqz_261:not(#\9) {
+.awsui_status-container_1edmh_1ke3l_261:not(#\9) {
   /* used in test utils */
 }
 
-.awsui_chart-container_1edmh_1kvqz_265:not(#\9) {
+.awsui_chart-container_1edmh_1ke3l_265:not(#\9) {
   display: flex;
   flex: 1;
 }
-.awsui_chart-container--fit-height_1edmh_1kvqz_269:not(#\9) {
+.awsui_chart-container--fit-height_1edmh_1ke3l_269:not(#\9) {
   block-size: 100%;
   min-block-size: inherit;
 }
 
-.awsui_chart-container-chart-plot_1edmh_1kvqz_274:not(#\9) {
+.awsui_chart-container-chart-plot_1edmh_1ke3l_274:not(#\9) {
   display: contents;
 }
-.awsui_chart-container-chart-plot--fit-height_1edmh_1kvqz_277:not(#\9) {
+.awsui_chart-container-chart-plot--fit-height_1edmh_1ke3l_277:not(#\9) {
   display: block;
   position: absolute;
   inset: 0;
 }
 
-.awsui_inner-content_1edmh_1kvqz_283:not(#\9) {
+.awsui_inner-content_1edmh_1ke3l_283:not(#\9) {
   display: flex;
   position: absolute;
   flex-direction: column;
@@ -291,76 +291,76 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   pointer-events: none;
 }
 
-.awsui_segment__highlight_1edmh_1kvqz_294:not(#\9) {
+.awsui_segment__highlight_1edmh_1ke3l_294:not(#\9) {
   stroke: none;
   opacity: 0;
 }
 
-.awsui_segment_1edmh_1kvqz_161:not(#\9) {
-  stroke: var(--color-background-container-content-myy7cn, #ffffff);
+.awsui_segment_1edmh_1ke3l_161:not(#\9) {
+  stroke: var(--color-background-container-content-mvmryi, #ffffff);
   stroke-width: 2px;
   stroke-linejoin: round;
   opacity: 1;
   cursor: pointer;
 }
-.awsui_segment_1edmh_1kvqz_161:not(#\9):focus {
+.awsui_segment_1edmh_1ke3l_161:not(#\9):focus {
   outline: none;
 }
-.awsui_segment_1edmh_1kvqz_161.awsui_segment--dimmed_1edmh_1kvqz_309:not(#\9) {
+.awsui_segment_1edmh_1ke3l_161.awsui_segment--dimmed_1edmh_1ke3l_309:not(#\9) {
   opacity: 0.35;
 }
-.awsui_segment_1edmh_1kvqz_161.awsui_segment--highlighted_1edmh_1kvqz_312 > .awsui_segment__highlight_1edmh_1kvqz_294:not(#\9), .awsui_segment_1edmh_1kvqz_161:not(#\9):hover:not(.awsui_segment--dimmed_1edmh_1kvqz_309) > .awsui_segment__highlight_1edmh_1kvqz_294 {
+.awsui_segment_1edmh_1ke3l_161.awsui_segment--highlighted_1edmh_1ke3l_312 > .awsui_segment__highlight_1edmh_1ke3l_294:not(#\9), .awsui_segment_1edmh_1ke3l_161:not(#\9):hover:not(.awsui_segment--dimmed_1edmh_1ke3l_309) > .awsui_segment__highlight_1edmh_1ke3l_294 {
   opacity: 1;
 }
 
-.awsui_label_1edmh_1kvqz_202:not(#\9) {
-  color: var(--color-text-heading-default-8wpkvf, #16191f);
+.awsui_label_1edmh_1ke3l_202:not(#\9) {
+  color: var(--color-text-heading-default-x2l7g1, #16191f);
   opacity: 1;
   /* stylelint-disable-next-line selector-max-type */
   /* stylelint-disable-next-line selector-max-type */
 }
-.awsui_label_1edmh_1kvqz_202 > line:not(#\9) {
-  stroke: var(--color-stroke-chart-line-z8sxxc, #879596);
-  stroke-width: var(--border-divider-section-width-iueskx, 1px);
+.awsui_label_1edmh_1ke3l_202 > line:not(#\9) {
+  stroke: var(--color-stroke-chart-line-8651o9, #879596);
+  stroke-width: var(--border-divider-section-width-sznrdy, 1px);
 }
-.awsui_label_1edmh_1kvqz_202 > div:not(#\9) {
+.awsui_label_1edmh_1ke3l_202 > div:not(#\9) {
   margin-block-start: -0.75em;
 }
-.awsui_label_1edmh_1kvqz_202.awsui_label--dimmed_1edmh_1kvqz_329:not(#\9) {
+.awsui_label_1edmh_1ke3l_202.awsui_label--dimmed_1edmh_1ke3l_329:not(#\9) {
   opacity: 0.35;
 }
-.awsui_label_1edmh_1kvqz_202.awsui_label--align-right_1edmh_1kvqz_332:not(#\9) {
+.awsui_label_1edmh_1ke3l_202.awsui_label--align-right_1edmh_1ke3l_332:not(#\9) {
   /* stylelint-disable-next-line selector-max-type */
 }
-.awsui_label_1edmh_1kvqz_202.awsui_label--align-right_1edmh_1kvqz_332 > div:not(#\9) {
+.awsui_label_1edmh_1ke3l_202.awsui_label--align-right_1edmh_1ke3l_332 > div:not(#\9) {
   text-align: end;
 }
 
 /* stylelint-disable-next-line selector-max-type */
-.awsui_label-text_1edmh_1kvqz_340 > text:not(#\9) {
-  font-size: var(--font-size-body-m-6wxxs5, 14px);
-  line-height: var(--line-height-body-m-gw0130, 22px);
-  font-weight: var(--font-display-label-weight-5p8eav, 400);
-  fill: var(--color-text-heading-default-8wpkvf, #16191f);
+.awsui_label-text_1edmh_1ke3l_340 > text:not(#\9) {
+  font-size: var(--font-size-body-m-vv54cm, 14px);
+  line-height: var(--line-height-body-m-bedeoh, 22px);
+  font-weight: var(--font-display-label-weight-ise9n2, 400);
+  fill: var(--color-text-heading-default-x2l7g1, #16191f);
   dominant-baseline: middle;
 }
 
-text.awsui_label__description_1edmh_1kvqz_348:not(#\9) {
-  font-size: var(--font-chart-detail-size-z60lhi, 14px);
+text.awsui_label__description_1edmh_1ke3l_348:not(#\9) {
+  font-size: var(--font-chart-detail-size-drm2a6, 14px);
   font-weight: 400;
-  color: var(--color-text-group-label-eorpbe, #545b64);
-  fill: var(--color-text-group-label-eorpbe, #545b64);
+  color: var(--color-text-group-label-ahnpvr, #545b64);
+  fill: var(--color-text-group-label-ahnpvr, #545b64);
 }
 
-.awsui_label-line_1edmh_1kvqz_355:not(#\9) {
+.awsui_label-line_1edmh_1ke3l_355:not(#\9) {
   /* used in component code */
 }
 
-.awsui_label--highlighted_1edmh_1kvqz_359:not(#\9) {
+.awsui_label--highlighted_1edmh_1ke3l_359:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_popover-header_1edmh_1kvqz_363:not(#\9) {
+.awsui_popover-header_1edmh_1ke3l_363: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_1kvqz_161",
-  "segment": "awsui_segment_1edmh_1kvqz_161",
-  "segment__hover": "awsui_segment__hover_1edmh_1kvqz_188",
-  "label": "awsui_label_1edmh_1kvqz_202",
-  "root": "awsui_root_1edmh_1kvqz_216",
-  "content": "awsui_content_1edmh_1kvqz_220",
-  "content--small": "awsui_content--small_1edmh_1kvqz_220",
-  "content--fit-height": "awsui_content--fit-height_1edmh_1kvqz_223",
-  "content--without-labels": "awsui_content--without-labels_1edmh_1kvqz_226",
-  "content--medium": "awsui_content--medium_1edmh_1kvqz_232",
-  "content--large": "awsui_content--large_1edmh_1kvqz_244",
-  "status-container": "awsui_status-container_1edmh_1kvqz_261",
-  "chart-container": "awsui_chart-container_1edmh_1kvqz_265",
-  "chart-container--fit-height": "awsui_chart-container--fit-height_1edmh_1kvqz_269",
-  "chart-container-chart-plot": "awsui_chart-container-chart-plot_1edmh_1kvqz_274",
-  "chart-container-chart-plot--fit-height": "awsui_chart-container-chart-plot--fit-height_1edmh_1kvqz_277",
-  "inner-content": "awsui_inner-content_1edmh_1kvqz_283",
-  "segment__highlight": "awsui_segment__highlight_1edmh_1kvqz_294",
-  "segment--dimmed": "awsui_segment--dimmed_1edmh_1kvqz_309",
-  "segment--highlighted": "awsui_segment--highlighted_1edmh_1kvqz_312",
-  "label--dimmed": "awsui_label--dimmed_1edmh_1kvqz_329",
-  "label--align-right": "awsui_label--align-right_1edmh_1kvqz_332",
-  "label-text": "awsui_label-text_1edmh_1kvqz_340",
-  "label__description": "awsui_label__description_1edmh_1kvqz_348",
-  "label-line": "awsui_label-line_1edmh_1kvqz_355",
-  "label--highlighted": "awsui_label--highlighted_1edmh_1kvqz_359",
-  "popover-header": "awsui_popover-header_1edmh_1kvqz_363"
+  "segment__path": "awsui_segment__path_1edmh_1ke3l_161",
+  "segment": "awsui_segment_1edmh_1ke3l_161",
+  "segment__hover": "awsui_segment__hover_1edmh_1ke3l_188",
+  "label": "awsui_label_1edmh_1ke3l_202",
+  "root": "awsui_root_1edmh_1ke3l_216",
+  "content": "awsui_content_1edmh_1ke3l_220",
+  "content--small": "awsui_content--small_1edmh_1ke3l_220",
+  "content--fit-height": "awsui_content--fit-height_1edmh_1ke3l_223",
+  "content--without-labels": "awsui_content--without-labels_1edmh_1ke3l_226",
+  "content--medium": "awsui_content--medium_1edmh_1ke3l_232",
+  "content--large": "awsui_content--large_1edmh_1ke3l_244",
+  "status-container": "awsui_status-container_1edmh_1ke3l_261",
+  "chart-container": "awsui_chart-container_1edmh_1ke3l_265",
+  "chart-container--fit-height": "awsui_chart-container--fit-height_1edmh_1ke3l_269",
+  "chart-container-chart-plot": "awsui_chart-container-chart-plot_1edmh_1ke3l_274",
+  "chart-container-chart-plot--fit-height": "awsui_chart-container-chart-plot--fit-height_1edmh_1ke3l_277",
+  "inner-content": "awsui_inner-content_1edmh_1ke3l_283",
+  "segment__highlight": "awsui_segment__highlight_1edmh_1ke3l_294",
+  "segment--dimmed": "awsui_segment--dimmed_1edmh_1ke3l_309",
+  "segment--highlighted": "awsui_segment--highlighted_1edmh_1ke3l_312",
+  "label--dimmed": "awsui_label--dimmed_1edmh_1ke3l_329",
+  "label--align-right": "awsui_label--align-right_1edmh_1ke3l_332",
+  "label-text": "awsui_label-text_1edmh_1ke3l_340",
+  "label__description": "awsui_label__description_1edmh_1ke3l_348",
+  "label-line": "awsui_label-line_1edmh_1ke3l_355",
+  "label--highlighted": "awsui_label--highlighted_1edmh_1ke3l_359",
+  "popover-header": "awsui_popover-header_1edmh_1ke3l_363"
 };
   

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

@@ -5,7 +5,7 @@ export interface PopoverBodyProps {
     onDismiss: (() => void) | undefined;
     header: React.ReactNode | undefined;
     children: React.ReactNode;
-    variant?: 'annotation';
+    variant?: 'annotation' | 'chart';
     overflowVisible?: 'content' | 'both';
     className?: string;
     ariaLabelledby?: string;

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,KAAyC,MAAM,OAAO,CAAC;AAc9D,MAAM,WAAW,gBAAgB;IAC/B,aAAa,EAAE,OAAO,CAAC;IACvB,gBAAgB,EAAE,MAAM,GAAG,SAAS,CAAC;IACrC,SAAS,EAAE,CAAC,MAAM,IAAI,CAAC,GAAG,SAAS,CAAC;IAEpC,MAAM,EAAE,KAAK,CAAC,SAAS,GAAG,SAAS,CAAC;IACpC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,eAAe,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC;IAErC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB,oBAAoB,CAAC,EAAE,MAAM,CAAC;CAC/B;AAED,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAClC,aAAa,EAAE,iBAAiB,EAChC,gBAAgB,EAChB,MAAM,EACN,QAAQ,EACR,SAAS,EACT,OAAO,EACP,eAAe,EACf,SAAS,EACT,cAAc,EACd,oBAAoB,GACrB,EAAE,gBAAgB,eA+ElB"}
+{"version":3,"file":"body.d.ts","sourceRoot":"","sources":["../../../src/popover/body.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAyC,MAAM,OAAO,CAAC;AAc9D,MAAM,WAAW,gBAAgB;IAC/B,aAAa,EAAE,OAAO,CAAC;IACvB,gBAAgB,EAAE,MAAM,GAAG,SAAS,CAAC;IACrC,SAAS,EAAE,CAAC,MAAM,IAAI,CAAC,GAAG,SAAS,CAAC;IAEpC,MAAM,EAAE,KAAK,CAAC,SAAS,GAAG,SAAS,CAAC;IACpC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,OAAO,CAAC,EAAE,YAAY,GAAG,OAAO,CAAC;IACjC,eAAe,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC;IAErC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB,oBAAoB,CAAC,EAAE,MAAM,CAAC;CAC/B;AAED,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAClC,aAAa,EAAE,iBAAiB,EAChC,gBAAgB,EAChB,MAAM,EACN,QAAQ,EACR,SAAS,EACT,OAAO,EACP,eAAe,EACf,SAAS,EACT,cAAc,EACd,oBAAoB,GACrB,EAAE,gBAAgB,eA+ElB"}

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

@@ -40,7 +40,7 @@ export default function PopoverBody({ dismissButton: showDismissButton, dismissA
             'aria-labelledby': ariaLabelledby !== null && ariaLabelledby !== void 0 ? ariaLabelledby : (header ? labelledById : undefined),
         }
         : {};
-    return (React.createElement("div", Object.assign({ className: clsx(styles.body, className, {
+    return (React.createElement("div", Object.assign({ className: clsx(styles.body, styles[`body-variant-${variant}`], className, {
             [styles['body-overflow-visible']]: overflowVisible === 'both',
         }), onKeyDown: onKeyDown }, dialogProps),
         React.createElement(FocusLock, { disabled: !shouldTrapFocus, autoFocus: false },

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, useEffect, useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';\n\nimport { ButtonProps } from '../button/interfaces';\nimport { InternalButton } from '../button/internal';\nimport { useInternalI18n } from '../i18n/context';\nimport FocusLock from '../internal/components/focus-lock';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\nimport { KeyCode } from '../internal/keycode';\n\nimport styles from './styles.css.js';\n\nexport interface PopoverBodyProps {\n  dismissButton: boolean;\n  dismissAriaLabel: string | undefined;\n  onDismiss: (() => void) | undefined;\n\n  header: React.ReactNode | undefined;\n  children: React.ReactNode;\n  variant?: 'annotation';\n  overflowVisible?: 'content' | 'both';\n\n  className?: string;\n  ariaLabelledby?: string;\n\n  closeAnalyticsAction?: string;\n}\n\nexport default function PopoverBody({\n  dismissButton: showDismissButton,\n  dismissAriaLabel,\n  header,\n  children,\n  onDismiss,\n  variant,\n  overflowVisible,\n  className,\n  ariaLabelledby,\n  closeAnalyticsAction,\n}: PopoverBodyProps) {\n  const i18n = useInternalI18n('popover');\n  const labelledById = useUniqueId('awsui-popover-');\n  const dismissButtonFocused = useRef(false);\n  const dismissButtonRef = useRef<ButtonProps.Ref>(null);\n\n  const onKeyDown = useCallback(\n    (event: React.KeyboardEvent) => {\n      if (event.keyCode === KeyCode.escape) {\n        event.stopPropagation();\n        onDismiss?.();\n      }\n    },\n    [onDismiss]\n  );\n\n  // Implement our own auto-focus rather than using FocusLock's,\n  // because we also want to focus the dismiss button when it\n  // is added dynamically (e.g. in chart popovers)\n  useEffect(() => {\n    if (showDismissButton && !dismissButtonFocused.current) {\n      dismissButtonRef.current?.focus({ preventScroll: true });\n    }\n    dismissButtonFocused.current = showDismissButton;\n  }, [showDismissButton]);\n\n  const dismissButton = (showDismissButton ?? null) && (\n    <div\n      className={styles.dismiss}\n      {...(closeAnalyticsAction ? getAnalyticsMetadataAttribute({ action: closeAnalyticsAction }) : {})}\n    >\n      <InternalButton\n        variant=\"icon\"\n        formAction=\"none\"\n        iconName=\"close\"\n        className={styles['dismiss-control']}\n        ariaLabel={i18n('dismissAriaLabel', dismissAriaLabel)}\n        onClick={() => onDismiss?.()}\n        ref={dismissButtonRef}\n      />\n    </div>\n  );\n\n  const isDialog = showDismissButton;\n  const shouldTrapFocus = showDismissButton && variant !== 'annotation';\n\n  const dialogProps = isDialog\n    ? {\n        role: 'dialog',\n        'aria-labelledby': ariaLabelledby ?? (header ? labelledById : undefined),\n      }\n    : {};\n\n  return (\n    <div\n      className={clsx(styles.body, className, {\n        [styles['body-overflow-visible']]: overflowVisible === 'both',\n      })}\n      onKeyDown={onKeyDown}\n      {...dialogProps}\n    >\n      <FocusLock disabled={!shouldTrapFocus} autoFocus={false}>\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, useEffect, useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';\n\nimport { ButtonProps } from '../button/interfaces';\nimport { InternalButton } from '../button/internal';\nimport { useInternalI18n } from '../i18n/context';\nimport FocusLock from '../internal/components/focus-lock';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\nimport { KeyCode } from '../internal/keycode';\n\nimport styles from './styles.css.js';\n\nexport interface PopoverBodyProps {\n  dismissButton: boolean;\n  dismissAriaLabel: string | undefined;\n  onDismiss: (() => void) | undefined;\n\n  header: React.ReactNode | undefined;\n  children: React.ReactNode;\n  variant?: 'annotation' | 'chart';\n  overflowVisible?: 'content' | 'both';\n\n  className?: string;\n  ariaLabelledby?: string;\n\n  closeAnalyticsAction?: string;\n}\n\nexport default function PopoverBody({\n  dismissButton: showDismissButton,\n  dismissAriaLabel,\n  header,\n  children,\n  onDismiss,\n  variant,\n  overflowVisible,\n  className,\n  ariaLabelledby,\n  closeAnalyticsAction,\n}: PopoverBodyProps) {\n  const i18n = useInternalI18n('popover');\n  const labelledById = useUniqueId('awsui-popover-');\n  const dismissButtonFocused = useRef(false);\n  const dismissButtonRef = useRef<ButtonProps.Ref>(null);\n\n  const onKeyDown = useCallback(\n    (event: React.KeyboardEvent) => {\n      if (event.keyCode === KeyCode.escape) {\n        event.stopPropagation();\n        onDismiss?.();\n      }\n    },\n    [onDismiss]\n  );\n\n  // Implement our own auto-focus rather than using FocusLock's,\n  // because we also want to focus the dismiss button when it\n  // is added dynamically (e.g. in chart popovers)\n  useEffect(() => {\n    if (showDismissButton && !dismissButtonFocused.current) {\n      dismissButtonRef.current?.focus({ preventScroll: true });\n    }\n    dismissButtonFocused.current = showDismissButton;\n  }, [showDismissButton]);\n\n  const dismissButton = (showDismissButton ?? null) && (\n    <div\n      className={styles.dismiss}\n      {...(closeAnalyticsAction ? getAnalyticsMetadataAttribute({ action: closeAnalyticsAction }) : {})}\n    >\n      <InternalButton\n        variant=\"icon\"\n        formAction=\"none\"\n        iconName=\"close\"\n        className={styles['dismiss-control']}\n        ariaLabel={i18n('dismissAriaLabel', dismissAriaLabel)}\n        onClick={() => onDismiss?.()}\n        ref={dismissButtonRef}\n      />\n    </div>\n  );\n\n  const isDialog = showDismissButton;\n  const shouldTrapFocus = showDismissButton && variant !== 'annotation';\n\n  const dialogProps = isDialog\n    ? {\n        role: 'dialog',\n        'aria-labelledby': ariaLabelledby ?? (header ? labelledById : undefined),\n      }\n    : {};\n\n  return (\n    <div\n      className={clsx(styles.body, styles[`body-variant-${variant}`], className, {\n        [styles['body-overflow-visible']]: overflowVisible === 'both',\n      })}\n      onKeyDown={onKeyDown}\n      {...dialogProps}\n    >\n      <FocusLock disabled={!shouldTrapFocus} autoFocus={false}>\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

@@ -2,7 +2,8 @@ import React from 'react';
 import { InternalPosition, PopoverProps } from './interfaces';
 interface PopoverContainerProps {
     /** References the element the container is positioned against. */
-    trackRef: React.RefObject<HTMLElement | SVGElement>;
+    trackRef?: React.RefObject<HTMLElement | SVGElement>;
+    getTrack?: () => null | HTMLElement | SVGElement;
     /**
       Used to update the container position in case track or track position changes:
       
@@ -13,6 +14,7 @@ interface PopoverContainerProps {
       </>)
     */
     trackKey?: string | number;
+    minVisibleBlockSize?: number;
     position: PopoverProps.Position;
     zIndex?: React.CSSProperties['zIndex'];
     arrow: (position: InternalPosition | null) => React.ReactNode;
@@ -25,8 +27,9 @@ interface PopoverContainerProps {
     allowScrollToFit?: boolean;
     allowVerticalOverflow?: boolean;
     hideOnOverscroll?: boolean;
+    hoverArea?: boolean;
     className?: string;
 }
-export default function PopoverContainer({ position, trackRef, trackKey, arrow, children, zIndex, renderWithPortal, size, fixedWidth, variant, keepPosition, allowScrollToFit, allowVerticalOverflow, hideOnOverscroll, className, }: PopoverContainerProps): JSX.Element | null;
+export default function PopoverContainer({ position, trackRef, getTrack: externalGetTrack, trackKey, minVisibleBlockSize, arrow, children, zIndex, renderWithPortal, size, fixedWidth, variant, keepPosition, allowScrollToFit, allowVerticalOverflow, hideOnOverscroll, hoverArea, className, }: PopoverContainerProps): JSX.Element | null;
 export {};
 //# 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,KAAkC,MAAM,OAAO,CAAC;AAOvD,OAAO,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAK9D,UAAU,qBAAqB;IAC7B,kEAAkE;IAClE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,UAAU,CAAC,CAAC;IACpD;;;;;;;;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,GAAG,SAAS,CAAC;IACpC,UAAU,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,YAAY,CAAC;IAEvB,YAAY,CAAC,EAAE,OAAO,CAAC;IAGvB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAEhC,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,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,EACP,YAAY,EACZ,gBAAgB,EAChB,qBAAqB,EACrB,gBAAgB,EAChB,SAAS,GACV,EAAE,qBAAqB,sBAiGvB"}
+{"version":3,"file":"container.d.ts","sourceRoot":"","sources":["../../../src/popover/container.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAkC,MAAM,OAAO,CAAC;AAOvD,OAAO,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAK9D,UAAU,qBAAqB;IAC7B,kEAAkE;IAClE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,UAAU,CAAC,CAAC;IACrD,QAAQ,CAAC,EAAE,MAAM,IAAI,GAAG,WAAW,GAAG,UAAU,CAAC;IACjD;;;;;;;;MAQE;IACF,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC3B,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,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,GAAG,SAAS,CAAC;IACpC,UAAU,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,YAAY,CAAC;IAEvB,YAAY,CAAC,EAAE,OAAO,CAAC;IAGvB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAEhC,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EACvC,QAAQ,EACR,QAAQ,EACR,QAAQ,EAAE,gBAAgB,EAC1B,QAAQ,EACR,mBAAmB,EACnB,KAAK,EACL,QAAQ,EACR,MAAM,EACN,gBAAgB,EAChB,IAAI,EACJ,UAAU,EACV,OAAO,EACP,YAAY,EACZ,gBAAgB,EAChB,qBAAqB,EACrB,gBAAgB,EAChB,SAAS,EACT,SAAS,GACV,EAAE,qBAAqB,sBAkHvB"}

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

@@ -7,18 +7,27 @@ import { useResizeObserver } from '@cloudscape-design/component-toolkit/internal
 import { useVisualRefresh } from '../internal/hooks/use-visual-mode';
 import usePopoverPosition from './use-popover-position.js';
 import styles from './styles.css.js';
-export default function PopoverContainer({ position, trackRef, trackKey, arrow, children, zIndex, renderWithPortal, size, fixedWidth, variant, keepPosition, allowScrollToFit, allowVerticalOverflow, hideOnOverscroll, className, }) {
+export default function PopoverContainer({ position, trackRef, getTrack: externalGetTrack, trackKey, minVisibleBlockSize, arrow, children, zIndex, renderWithPortal, size, fixedWidth, variant, keepPosition, allowScrollToFit, allowVerticalOverflow, hideOnOverscroll, hoverArea, className, }) {
     const bodyRef = useRef(null);
     const contentRef = useRef(null);
     const popoverRef = useRef(null);
     const arrowRef = useRef(null);
     const isRefresh = useVisualRefresh();
+    const getTrack = useRef(() => {
+        if (trackRef) {
+            return trackRef.current;
+        }
+        if (externalGetTrack) {
+            return externalGetTrack();
+        }
+        throw new Error('Invariant violation: must provide either trackRef or getTrack.');
+    });
     // Updates the position handler.
     const { updatePositionHandler, popoverStyle, internalPosition, positionHandlerRef, isOverscrolling } = usePopoverPosition({
         popoverRef,
         bodyRef,
         arrowRef,
-        trackRef,
+        getTrack: getTrack.current,
         contentRef,
         allowScrollToFit,
         allowVerticalOverflow,
@@ -26,6 +35,7 @@ export default function PopoverContainer({ position, trackRef, trackKey, arrow,
         renderWithPortal,
         keepPosition,
         hideOnOverscroll,
+        minVisibleBlockSize,
     });
     // Recalculate position when properties change.
     useLayoutEffect(() => {
@@ -49,7 +59,7 @@ export default function PopoverContainer({ position, trackRef, trackKey, arrow,
             keepPosition ||
                 // If the click was on the trigger, this will make the popover appear or disappear,
                 // so no need to update its position either in this case.
-                nodeContains(trackRef.current, event.target)) {
+                nodeContains(getTrack.current(), event.target)) {
                 return;
             }
             requestAnimationFrame(() => {
@@ -71,7 +81,7 @@ export default function PopoverContainer({ position, trackRef, trackKey, arrow,
         React.createElement("div", { ref: bodyRef, className: clsx(styles['container-body'], styles[`container-body-size-${size}`], {
                 [styles['fixed-width']]: fixedWidth,
                 [styles[`container-body-variant-${variant}`]]: variant,
-            }) },
-            React.createElement("div", { ref: contentRef }, children))));
+            }) }, hoverArea ? (React.createElement("div", { className: styles['hover-area'] },
+            React.createElement("div", { ref: contentRef }, children))) : (React.createElement("div", { ref: contentRef }, children)))));
 }
 //# sourceMappingURL=container.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"container.js","sourceRoot":"","sources":["../../../src/popover/container.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, { useLayoutEffect, useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { nodeContains } from '@cloudscape-design/component-toolkit/dom';\nimport { useResizeObserver } from '@cloudscape-design/component-toolkit/internal';\n\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport { InternalPosition, PopoverProps } from './interfaces';\nimport usePopoverPosition from './use-popover-position.js';\n\nimport styles from './styles.css.js';\n\ninterface PopoverContainerProps {\n  /** References the element the container is positioned against. */\n  trackRef: React.RefObject<HTMLElement | SVGElement>;\n  /**\n    Used to update the container position in case track or track position changes:\n    \n    const trackRef = useRef<Element>(null)\n    return (<>\n      <Track style={getPosition(selectedItemId)} ref={trackRef} />\n      <PopoverContainer trackRef={trackRef} trackKey={selectedItemId} .../>\n    </>)\n  */\n  trackKey?: string | number;\n  position: PopoverProps.Position;\n  zIndex?: React.CSSProperties['zIndex'];\n  arrow: (position: InternalPosition | null) => React.ReactNode;\n  children: React.ReactNode;\n  renderWithPortal?: boolean;\n  size: PopoverProps.Size | 'content';\n  fixedWidth: boolean;\n  variant?: 'annotation';\n  // When keepPosition is true, the popover will not recalculate its position when it resizes nor when it receives clicks.\n  keepPosition?: boolean;\n  // When allowScrollToFit is true, we will scroll to the the popover if it overflows the viewport even when choosing the best possible position for it.\n  // Do not use this if the popover is open on hover, in order to avoid unexpected movement.\n  allowScrollToFit?: boolean;\n  allowVerticalOverflow?: boolean;\n  // Whether the popover should be hidden when the trigger is scrolled away.\n  hideOnOverscroll?: boolean;\n  className?: string;\n}\n\nexport default function PopoverContainer({\n  position,\n  trackRef,\n  trackKey,\n  arrow,\n  children,\n  zIndex,\n  renderWithPortal,\n  size,\n  fixedWidth,\n  variant,\n  keepPosition,\n  allowScrollToFit,\n  allowVerticalOverflow,\n  hideOnOverscroll,\n  className,\n}: PopoverContainerProps) {\n  const bodyRef = useRef<HTMLDivElement | null>(null);\n  const contentRef = useRef<HTMLDivElement | null>(null);\n  const popoverRef = useRef<HTMLDivElement | null>(null);\n  const arrowRef = useRef<HTMLDivElement | null>(null);\n\n  const isRefresh = useVisualRefresh();\n\n  // Updates the position handler.\n  const { updatePositionHandler, popoverStyle, internalPosition, positionHandlerRef, isOverscrolling } =\n    usePopoverPosition({\n      popoverRef,\n      bodyRef,\n      arrowRef,\n      trackRef,\n      contentRef,\n      allowScrollToFit,\n      allowVerticalOverflow,\n      preferredPosition: position,\n      renderWithPortal,\n      keepPosition,\n      hideOnOverscroll,\n    });\n\n  // Recalculate position when properties change.\n  useLayoutEffect(() => {\n    updatePositionHandler();\n  }, [updatePositionHandler, trackKey]);\n\n  // Recalculate position when content size changes.\n  useResizeObserver(contentRef, () => {\n    updatePositionHandler(true);\n  });\n\n  // Recalculate position on DOM events.\n  useLayoutEffect(() => {\n    /*\n    This is a heuristic. Some layout changes are caused by user clicks (e.g. toggling the tools panel, submitting a form),\n    and by tracking the click event we can adapt the popover's position to the new layout.\n\n    TODO: extend this to Enter and Spacebar?\n    */\n\n    const onClick = (event: UIEvent | KeyboardEvent) => {\n      if (\n        // Do not update position if keepPosition is true.\n        keepPosition ||\n        // If the click was on the trigger, this will make the popover appear or disappear,\n        // so no need to update its position either in this case.\n        nodeContains(trackRef.current, event.target)\n      ) {\n        return;\n      }\n\n      requestAnimationFrame(() => {\n        updatePositionHandler();\n      });\n    };\n\n    const updatePositionOnResize = () => requestAnimationFrame(() => updatePositionHandler());\n    const refreshPosition = () => requestAnimationFrame(() => positionHandlerRef.current());\n    const controller = new AbortController();\n\n    window.addEventListener('click', onClick, { signal: controller.signal });\n    window.addEventListener('resize', updatePositionOnResize, { signal: controller.signal });\n    window.addEventListener('scroll', refreshPosition, { capture: true, signal: controller.signal });\n\n    return () => {\n      controller.abort();\n    };\n  }, [hideOnOverscroll, keepPosition, positionHandlerRef, trackRef, updatePositionHandler]);\n\n  return isOverscrolling ? null : (\n    <div\n      ref={popoverRef}\n      style={{ ...popoverStyle, zIndex }}\n      className={clsx(styles.container, isRefresh && styles.refresh, className)}\n    >\n      <div\n        ref={arrowRef}\n        className={clsx(styles[`container-arrow`], styles[`container-arrow-position-${internalPosition}`])}\n        aria-hidden={true}\n      >\n        {arrow(internalPosition)}\n      </div>\n\n      <div\n        ref={bodyRef}\n        className={clsx(styles['container-body'], styles[`container-body-size-${size}`], {\n          [styles['fixed-width']]: fixedWidth,\n          [styles[`container-body-variant-${variant}`]]: variant,\n        })}\n      >\n        <div ref={contentRef}>{children}</div>\n      </div>\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"container.js","sourceRoot":"","sources":["../../../src/popover/container.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, { useLayoutEffect, useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { nodeContains } from '@cloudscape-design/component-toolkit/dom';\nimport { useResizeObserver } from '@cloudscape-design/component-toolkit/internal';\n\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport { InternalPosition, PopoverProps } from './interfaces';\nimport usePopoverPosition from './use-popover-position.js';\n\nimport styles from './styles.css.js';\n\ninterface PopoverContainerProps {\n  /** References the element the container is positioned against. */\n  trackRef?: React.RefObject<HTMLElement | SVGElement>;\n  getTrack?: () => null | HTMLElement | SVGElement;\n  /**\n    Used to update the container position in case track or track position changes:\n    \n    const trackRef = useRef<Element>(null)\n    return (<>\n      <Track style={getPosition(selectedItemId)} ref={trackRef} />\n      <PopoverContainer trackRef={trackRef} trackKey={selectedItemId} .../>\n    </>)\n  */\n  trackKey?: string | number;\n  minVisibleBlockSize?: number;\n  position: PopoverProps.Position;\n  zIndex?: React.CSSProperties['zIndex'];\n  arrow: (position: InternalPosition | null) => React.ReactNode;\n  children: React.ReactNode;\n  renderWithPortal?: boolean;\n  size: PopoverProps.Size | 'content';\n  fixedWidth: boolean;\n  variant?: 'annotation';\n  // When keepPosition is true, the popover will not recalculate its position when it resizes nor when it receives clicks.\n  keepPosition?: boolean;\n  // When allowScrollToFit is true, we will scroll to the the popover if it overflows the viewport even when choosing the best possible position for it.\n  // Do not use this if the popover is open on hover, in order to avoid unexpected movement.\n  allowScrollToFit?: boolean;\n  allowVerticalOverflow?: boolean;\n  // Whether the popover should be hidden when the trigger is scrolled away.\n  hideOnOverscroll?: boolean;\n  hoverArea?: boolean;\n  className?: string;\n}\n\nexport default function PopoverContainer({\n  position,\n  trackRef,\n  getTrack: externalGetTrack,\n  trackKey,\n  minVisibleBlockSize,\n  arrow,\n  children,\n  zIndex,\n  renderWithPortal,\n  size,\n  fixedWidth,\n  variant,\n  keepPosition,\n  allowScrollToFit,\n  allowVerticalOverflow,\n  hideOnOverscroll,\n  hoverArea,\n  className,\n}: PopoverContainerProps) {\n  const bodyRef = useRef<HTMLDivElement | null>(null);\n  const contentRef = useRef<HTMLDivElement | null>(null);\n  const popoverRef = useRef<HTMLDivElement | null>(null);\n  const arrowRef = useRef<HTMLDivElement | null>(null);\n\n  const isRefresh = useVisualRefresh();\n\n  const getTrack = useRef(() => {\n    if (trackRef) {\n      return trackRef.current;\n    }\n    if (externalGetTrack) {\n      return externalGetTrack();\n    }\n    throw new Error('Invariant violation: must provide either trackRef or getTrack.');\n  });\n\n  // Updates the position handler.\n  const { updatePositionHandler, popoverStyle, internalPosition, positionHandlerRef, isOverscrolling } =\n    usePopoverPosition({\n      popoverRef,\n      bodyRef,\n      arrowRef,\n      getTrack: getTrack.current,\n      contentRef,\n      allowScrollToFit,\n      allowVerticalOverflow,\n      preferredPosition: position,\n      renderWithPortal,\n      keepPosition,\n      hideOnOverscroll,\n      minVisibleBlockSize,\n    });\n\n  // Recalculate position when properties change.\n  useLayoutEffect(() => {\n    updatePositionHandler();\n  }, [updatePositionHandler, trackKey]);\n\n  // Recalculate position when content size changes.\n  useResizeObserver(contentRef, () => {\n    updatePositionHandler(true);\n  });\n\n  // Recalculate position on DOM events.\n  useLayoutEffect(() => {\n    /*\n    This is a heuristic. Some layout changes are caused by user clicks (e.g. toggling the tools panel, submitting a form),\n    and by tracking the click event we can adapt the popover's position to the new layout.\n\n    TODO: extend this to Enter and Spacebar?\n    */\n\n    const onClick = (event: UIEvent | KeyboardEvent) => {\n      if (\n        // Do not update position if keepPosition is true.\n        keepPosition ||\n        // If the click was on the trigger, this will make the popover appear or disappear,\n        // so no need to update its position either in this case.\n        nodeContains(getTrack.current(), event.target)\n      ) {\n        return;\n      }\n\n      requestAnimationFrame(() => {\n        updatePositionHandler();\n      });\n    };\n\n    const updatePositionOnResize = () => requestAnimationFrame(() => updatePositionHandler());\n    const refreshPosition = () => requestAnimationFrame(() => positionHandlerRef.current());\n    const controller = new AbortController();\n\n    window.addEventListener('click', onClick, { signal: controller.signal });\n    window.addEventListener('resize', updatePositionOnResize, { signal: controller.signal });\n    window.addEventListener('scroll', refreshPosition, { capture: true, signal: controller.signal });\n\n    return () => {\n      controller.abort();\n    };\n  }, [hideOnOverscroll, keepPosition, positionHandlerRef, trackRef, updatePositionHandler]);\n\n  return isOverscrolling ? null : (\n    <div\n      ref={popoverRef}\n      style={{ ...popoverStyle, zIndex }}\n      className={clsx(styles.container, isRefresh && styles.refresh, className)}\n    >\n      <div\n        ref={arrowRef}\n        className={clsx(styles[`container-arrow`], styles[`container-arrow-position-${internalPosition}`])}\n        aria-hidden={true}\n      >\n        {arrow(internalPosition)}\n      </div>\n\n      <div\n        ref={bodyRef}\n        className={clsx(styles['container-body'], styles[`container-body-size-${size}`], {\n          [styles['fixed-width']]: fixedWidth,\n          [styles[`container-body-variant-${variant}`]]: variant,\n        })}\n      >\n        {hoverArea ? (\n          <div className={styles['hover-area']}>\n            <div ref={contentRef}>{children}</div>\n          </div>\n        ) : (\n          <div ref={contentRef}>{children}</div>\n        )}\n      </div>\n    </div>\n  );\n}\n"]}