@cloudscape-design/components 3.0.360 → 3.0.362

package/modal/styles.scoped.css

@@ -94,7 +94,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
 */
-@keyframes awsui_modal-slide-up_1d2i7_oeue5_1 {
+@keyframes awsui_modal-slide-up_1d2i7_1ber5_1 {
   0% {
     transform: translate(0, 10px);
   }
@@ -102,12 +102,12 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
     transform: translate(0, 0);
   }
 }
-.awsui_dialog_1d2i7_oeue5_105:not(#\9) {
-  animation: awsui_modal-slide-up_1d2i7_oeue5_1 var(--motion-duration-slow-z2kaah, 180ms) ease-out, awsui_awsui-motion-fade-in-0_1d2i7_oeue5_1 var(--motion-duration-slow-z2kaah, 180ms) ease-out;
+.awsui_dialog_1d2i7_1ber5_105:not(#\9) {
+  animation: awsui_modal-slide-up_1d2i7_1ber5_1 var(--motion-duration-slow-z2kaah, 180ms) ease-out, awsui_awsui-motion-fade-in-0_1d2i7_1ber5_1 var(--motion-duration-slow-z2kaah, 180ms) ease-out;
   animation-delay: var(--motion-duration-fast-sbm3r7, 90ms);
   animation-fill-mode: both;
 }
-@keyframes awsui_awsui-motion-fade-in-0_1d2i7_oeue5_1 {
+@keyframes awsui_awsui-motion-fade-in-0_1d2i7_1ber5_1 {
   from {
     opacity: 0;
   }
@@ -116,22 +116,22 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   }
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_dialog_1d2i7_oeue5_105:not(#\9) {
+  .awsui_dialog_1d2i7_1ber5_105:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_dialog_1d2i7_oeue5_105:not(#\9), .awsui-mode-entering .awsui_dialog_1d2i7_oeue5_105:not(#\9) {
+.awsui-motion-disabled .awsui_dialog_1d2i7_1ber5_105:not(#\9), .awsui-mode-entering .awsui_dialog_1d2i7_1ber5_105:not(#\9) {
   animation: none;
   transition: none;
 }
-.awsui_dialog_1d2i7_oeue5_105.awsui_refresh_1d2i7_oeue5_128:not(#\9) {
-  animation: awsui_awsui-motion-scale-popup_1d2i7_oeue5_1, awsui_awsui-motion-fade-in-0_1d2i7_oeue5_1;
+.awsui_dialog_1d2i7_1ber5_105.awsui_refresh_1d2i7_1ber5_128:not(#\9) {
+  animation: awsui_awsui-motion-scale-popup_1d2i7_1ber5_1, awsui_awsui-motion-fade-in-0_1d2i7_1ber5_1;
   animation-duration: var(--motion-duration-refresh-only-fast-4jn2d7, 115ms);
   animation-timing-function: var(--motion-easing-refresh-only-a-8flf9q, cubic-bezier(0, 0, 0, 1));
   animation-fill-mode: both;
 }
-@keyframes awsui_awsui-motion-fade-in-0_1d2i7_oeue5_1 {
+@keyframes awsui_awsui-motion-fade-in-0_1d2i7_1ber5_1 {
   from {
     opacity: 0;
   }
@@ -139,7 +139,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
     opacity: 1;
   }
 }
-@keyframes awsui_awsui-motion-scale-popup_1d2i7_oeue5_1 {
+@keyframes awsui_awsui-motion-scale-popup_1d2i7_1ber5_1 {
   0% {
     transform: scale(0.95);
   }
@@ -148,21 +148,21 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   }
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_dialog_1d2i7_oeue5_105.awsui_refresh_1d2i7_oeue5_128:not(#\9) {
+  .awsui_dialog_1d2i7_1ber5_105.awsui_refresh_1d2i7_1ber5_128:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_dialog_1d2i7_oeue5_105.awsui_refresh_1d2i7_oeue5_128:not(#\9), .awsui-mode-entering .awsui_dialog_1d2i7_oeue5_105.awsui_refresh_1d2i7_oeue5_128:not(#\9) {
+.awsui-motion-disabled .awsui_dialog_1d2i7_1ber5_105.awsui_refresh_1d2i7_1ber5_128:not(#\9), .awsui-mode-entering .awsui_dialog_1d2i7_1ber5_105.awsui_refresh_1d2i7_1ber5_128:not(#\9) {
   animation: none;
   transition: none;
 }
 
-.awsui_root_1d2i7_oeue5_161:not(#\9) {
-  animation: awsui_awsui-motion-fade-in_1d2i7_oeue5_1 var(--motion-duration-extra-slow-ngjb9g, 270ms) ease-out;
+.awsui_root_1d2i7_1ber5_161:not(#\9) {
+  animation: awsui_awsui-motion-fade-in_1d2i7_1ber5_1 var(--motion-duration-extra-slow-ngjb9g, 270ms) ease-out;
   animation-fill-mode: both;
 }
-@keyframes awsui_awsui-motion-fade-in_1d2i7_oeue5_1 {
+@keyframes awsui_awsui-motion-fade-in_1d2i7_1ber5_1 {
   from {
     opacity: 0.2;
   }
@@ -171,25 +171,25 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   }
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_root_1d2i7_oeue5_161:not(#\9) {
+  .awsui_root_1d2i7_1ber5_161:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_root_1d2i7_oeue5_161:not(#\9), .awsui-mode-entering .awsui_root_1d2i7_oeue5_161:not(#\9) {
+.awsui-motion-disabled .awsui_root_1d2i7_1ber5_161:not(#\9), .awsui-mode-entering .awsui_root_1d2i7_1ber5_161:not(#\9) {
   animation: none;
   transition: none;
 }
-.awsui_root_1d2i7_oeue5_161.awsui_refresh_1d2i7_oeue5_128:not(#\9) {
+.awsui_root_1d2i7_1ber5_161.awsui_refresh_1d2i7_1ber5_128:not(#\9) {
   animation-duration: var(--motion-duration-refresh-only-fast-4jn2d7, 115ms);
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_root_1d2i7_oeue5_161.awsui_refresh_1d2i7_oeue5_128:not(#\9) {
+  .awsui_root_1d2i7_1ber5_161.awsui_refresh_1d2i7_1ber5_128:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_root_1d2i7_oeue5_161.awsui_refresh_1d2i7_oeue5_128:not(#\9), .awsui-mode-entering .awsui_root_1d2i7_oeue5_161.awsui_refresh_1d2i7_oeue5_128:not(#\9) {
+.awsui-motion-disabled .awsui_root_1d2i7_1ber5_161.awsui_refresh_1d2i7_1ber5_128:not(#\9), .awsui-mode-entering .awsui_root_1d2i7_1ber5_161.awsui_refresh_1d2i7_1ber5_128:not(#\9) {
   animation: none;
   transition: none;
 }
@@ -198,7 +198,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_1d2i7_oeue5_161:not(#\9) {
+.awsui_root_1d2i7_1ber5_161:not(#\9) {
   /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
   border-collapse: separate;
   border-spacing: 0;
@@ -249,11 +249,11 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   overflow: auto;
   cursor: pointer;
 }
-.awsui_root_1d2i7_oeue5_161.awsui_hidden_1d2i7_oeue5_226:not(#\9) {
+.awsui_root_1d2i7_1ber5_161.awsui_hidden_1d2i7_1ber5_226:not(#\9) {
   display: none;
 }
 
-.awsui_focus-lock_1d2i7_oeue5_230:not(#\9) {
+.awsui_focus-lock_1d2i7_1ber5_230:not(#\9) {
   align-self: flex-start;
   margin: auto;
   padding: var(--space-s-34lx8l, 12px) 0;
@@ -261,7 +261,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   pointer-events: none;
 }
 
-.awsui_dialog_1d2i7_oeue5_105:not(#\9) {
+.awsui_dialog_1d2i7_1ber5_105:not(#\9) {
   position: static;
   top: 0;
   transform: translate(0, 0);
@@ -271,21 +271,21 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   z-index: 5000;
   pointer-events: all;
 }
-.awsui_dialog_1d2i7_oeue5_105.awsui_small_1d2i7_oeue5_248:not(#\9) {
+.awsui_dialog_1d2i7_1ber5_105.awsui_small_1d2i7_1ber5_248:not(#\9) {
   max-width: 320px;
 }
-.awsui_dialog_1d2i7_oeue5_105.awsui_medium_1d2i7_oeue5_251:not(#\9) {
+.awsui_dialog_1d2i7_1ber5_105.awsui_medium_1d2i7_1ber5_251:not(#\9) {
   max-width: 600px;
 }
-.awsui_dialog_1d2i7_oeue5_105.awsui_large_1d2i7_oeue5_254:not(#\9) {
+.awsui_dialog_1d2i7_1ber5_105.awsui_large_1d2i7_1ber5_254:not(#\9) {
   max-width: 820px;
 }
-.awsui_dialog_1d2i7_oeue5_105.awsui_max_1d2i7_oeue5_257.awsui_breakpoint-xs_1d2i7_oeue5_257:not(#\9) {
+.awsui_dialog_1d2i7_1ber5_105.awsui_max_1d2i7_1ber5_257.awsui_breakpoint-xs_1d2i7_1ber5_257:not(#\9) {
   max-width: calc(100vw - (2 * 4 * 10px + var(--space-xxxl-4x2gki, 40px)));
   margin: auto;
 }
 
-.awsui_container_1d2i7_oeue5_262:not(#\9) {
+.awsui_container_1d2i7_1ber5_262:not(#\9) {
   /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
   border-collapse: separate;
   border-spacing: 0;
@@ -330,46 +330,46 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   box-shadow: var(--shadow-modal-espdsd, 0px 4px 20px 1px rgba(0, 7, 22, 0.1));
 }
 
-.awsui_content_1d2i7_oeue5_281:not(#\9) {
+.awsui_content_1d2i7_1ber5_281:not(#\9) {
   padding: var(--space-container-content-top-1ae0r3, 4px) var(--space-modal-horizontal-f89syl, 20px) var(--space-modal-content-bottom-hqahub, 16px);
 }
-.awsui_content_1d2i7_oeue5_281.awsui_no-paddings_1d2i7_oeue5_284:not(#\9) {
+.awsui_content_1d2i7_1ber5_281.awsui_no-paddings_1d2i7_1ber5_284:not(#\9) {
   padding: 0;
 }
 
-.awsui_header_1d2i7_oeue5_288:not(#\9) {
+.awsui_header_1d2i7_1ber5_288:not(#\9) {
   padding: var(--space-container-header-top-5qav00, 12px) var(--space-modal-horizontal-f89syl, 20px) var(--space-container-header-bottom-vj01hn, 8px);
   background-color: var(--color-background-container-header-8b9fgi, #ffffff);
   border-bottom: 1px solid var(--color-border-container-divider-p2uygo, transparent);
   border-radius: var(--border-radius-container-wqv1zi, 16px) var(--border-radius-container-wqv1zi, 16px) 0 0;
 }
 
-.awsui_header--text_1d2i7_oeue5_295:not(#\9) {
+.awsui_header--text_1d2i7_1ber5_295:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_footer_1d2i7_oeue5_299:not(#\9) {
-  border-top: var(--border-divider-section-width-4ax5o2, 2px) solid var(--color-border-divider-default-d3adp9, #e9ebed);
+.awsui_footer_1d2i7_1ber5_299:not(#\9) {
+  border-top: var(--border-divider-section-width-8a5uu9, 2px) solid var(--color-border-divider-default-et9j7s, #e9ebed);
   padding: var(--space-scaled-s-aqzyko, 12px) var(--space-container-horizontal-wfukh3, 20px);
   background-color: var(--color-background-container-content-4un1ap, #ffffff);
   position: sticky;
   bottom: 0;
   z-index: 800;
 }
-.awsui_footer--stuck_1d2i7_oeue5_307:not(#\9) {
+.awsui_footer--stuck_1d2i7_1ber5_307:not(#\9) {
   border-radius: 0 0 var(--border-radius-container-wqv1zi, 16px) var(--border-radius-container-wqv1zi, 16px);
 }
-.awsui_footer_1d2i7_oeue5_299:not(#\9):after {
+.awsui_footer_1d2i7_1ber5_299:not(#\9):after {
   content: "";
   display: table;
   clear: both;
 }
 
-.awsui_dismiss-control_1d2i7_oeue5_316:not(#\9) {
+.awsui_dismiss-control_1d2i7_1ber5_316:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_modal-open_1d2i7_oeue5_320:not(#\9) {
+.awsui_modal-open_1d2i7_1ber5_320:not(#\9) {
   overflow: hidden;
   /*
    * When padding-right is added to account for scrollbar being turned

package/modal/styles.selectors.js

@@ -2,28 +2,28 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "dialog": "awsui_dialog_1d2i7_oeue5_105",
-  "modal-slide-up": "awsui_modal-slide-up_1d2i7_oeue5_1",
-  "awsui-motion-fade-in-0": "awsui_awsui-motion-fade-in-0_1d2i7_oeue5_1",
-  "refresh": "awsui_refresh_1d2i7_oeue5_128",
-  "awsui-motion-scale-popup": "awsui_awsui-motion-scale-popup_1d2i7_oeue5_1",
-  "root": "awsui_root_1d2i7_oeue5_161",
-  "awsui-motion-fade-in": "awsui_awsui-motion-fade-in_1d2i7_oeue5_1",
-  "hidden": "awsui_hidden_1d2i7_oeue5_226",
-  "focus-lock": "awsui_focus-lock_1d2i7_oeue5_230",
-  "small": "awsui_small_1d2i7_oeue5_248",
-  "medium": "awsui_medium_1d2i7_oeue5_251",
-  "large": "awsui_large_1d2i7_oeue5_254",
-  "max": "awsui_max_1d2i7_oeue5_257",
-  "breakpoint-xs": "awsui_breakpoint-xs_1d2i7_oeue5_257",
-  "container": "awsui_container_1d2i7_oeue5_262",
-  "content": "awsui_content_1d2i7_oeue5_281",
-  "no-paddings": "awsui_no-paddings_1d2i7_oeue5_284",
-  "header": "awsui_header_1d2i7_oeue5_288",
-  "header--text": "awsui_header--text_1d2i7_oeue5_295",
-  "footer": "awsui_footer_1d2i7_oeue5_299",
-  "footer--stuck": "awsui_footer--stuck_1d2i7_oeue5_307",
-  "dismiss-control": "awsui_dismiss-control_1d2i7_oeue5_316",
-  "modal-open": "awsui_modal-open_1d2i7_oeue5_320"
+  "dialog": "awsui_dialog_1d2i7_1ber5_105",
+  "modal-slide-up": "awsui_modal-slide-up_1d2i7_1ber5_1",
+  "awsui-motion-fade-in-0": "awsui_awsui-motion-fade-in-0_1d2i7_1ber5_1",
+  "refresh": "awsui_refresh_1d2i7_1ber5_128",
+  "awsui-motion-scale-popup": "awsui_awsui-motion-scale-popup_1d2i7_1ber5_1",
+  "root": "awsui_root_1d2i7_1ber5_161",
+  "awsui-motion-fade-in": "awsui_awsui-motion-fade-in_1d2i7_1ber5_1",
+  "hidden": "awsui_hidden_1d2i7_1ber5_226",
+  "focus-lock": "awsui_focus-lock_1d2i7_1ber5_230",
+  "small": "awsui_small_1d2i7_1ber5_248",
+  "medium": "awsui_medium_1d2i7_1ber5_251",
+  "large": "awsui_large_1d2i7_1ber5_254",
+  "max": "awsui_max_1d2i7_1ber5_257",
+  "breakpoint-xs": "awsui_breakpoint-xs_1d2i7_1ber5_257",
+  "container": "awsui_container_1d2i7_1ber5_262",
+  "content": "awsui_content_1d2i7_1ber5_281",
+  "no-paddings": "awsui_no-paddings_1d2i7_1ber5_284",
+  "header": "awsui_header_1d2i7_1ber5_288",
+  "header--text": "awsui_header--text_1d2i7_1ber5_295",
+  "footer": "awsui_footer_1d2i7_1ber5_299",
+  "footer--stuck": "awsui_footer--stuck_1d2i7_1ber5_307",
+  "dismiss-control": "awsui_dismiss-control_1d2i7_1ber5_316",
+  "modal-open": "awsui_modal-open_1d2i7_1ber5_320"
 };
   

package/package.json

@@ -109,7 +109,7 @@
     "./internal/base-component/index.js",
     "./internal/base-component/styles.css.js"
   ],
-  "version": "3.0.360",
+  "version": "3.0.362",
   "repository": {
     "type": "git",
     "url": "https://github.com/cloudscape-design/components.git"

package/pie-chart/labels.js

@@ -5,8 +5,8 @@ import clsx from 'clsx';
 import { arc } from 'd3-shape';
 import styles from './styles.css.js';
 import { balanceLabelNodes } from './utils';
-import { useResizeObserver } from '../internal/hooks/container-queries';
 import ResponsiveText from './responsive-text';
+import { useResizeObserver } from '@cloudscape-design/component-toolkit/internal';
 function LabelElement({ x, y, hideTitles, hideDescriptions, rightSide, title, description, containerBoundaries, }) {
     return (
     // Reset the transform property to prepare for `balanceLabelNodes`.

package/pie-chart/labels.js.map

@@ -1 +1 @@
-{"version":3,"file":"labels.js","sourceRoot":"lib/default/","sources":["pie-chart/labels.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, useMemo, useRef, useState } from 'react';\nimport clsx from 'clsx';\nimport { arc, PieArcDatum } from 'd3-shape';\n\nimport { PieChartProps } from './interfaces';\nimport styles from './styles.css.js';\nimport { InternalChartDatum } from './pie-chart';\nimport { Dimension, balanceLabelNodes } from './utils';\nimport { useResizeObserver } from '../internal/hooks/container-queries';\nimport ResponsiveText from './responsive-text';\n\nexport interface LabelsProps<T> {\n  pieData: PieArcDatum<InternalChartDatum<T>>[];\n  visibleDataSum: number;\n  dimensions: Dimension;\n  hideTitles: boolean;\n  hideDescriptions: boolean;\n  highlightedSegment: PieChartProps.Datum | null;\n  segmentDescription?: PieChartProps.SegmentDescriptionFunction<T>;\n  containerRef: React.RefObject<HTMLDivElement>;\n}\n\ninterface LabelElementProps {\n  x: number;\n  y: number;\n  rightSide: boolean;\n  hideTitles: boolean;\n  hideDescriptions: boolean;\n  title: PieChartProps.Datum['title'];\n  description?: string;\n  containerBoundaries: null | { left: number; right: number };\n}\n\nfunction LabelElement({\n  x,\n  y,\n  hideTitles,\n  hideDescriptions,\n  rightSide,\n  title,\n  description,\n  containerBoundaries,\n}: LabelElementProps) {\n  return (\n    // Reset the transform property to prepare for `balanceLabelNodes`.\n    // The dataset attributes are also needed in the function for IE11 support.\n    <g className={styles['label-text']} transform=\"\" data-x={x} data-y={y}>\n      {!hideTitles && (\n        <ResponsiveText x={x} y={y} rightSide={rightSide} containerBoundaries={containerBoundaries}>\n          {title}\n        </ResponsiveText>\n      )}\n      {!hideDescriptions && description && (\n        <ResponsiveText\n          x={x}\n          y={y + (hideTitles ? 0 : 18)}\n          rightSide={rightSide}\n          className={styles.label__description}\n          containerBoundaries={containerBoundaries}\n        >\n          {description}\n        </ResponsiveText>\n      )}\n    </g>\n  );\n}\n\nexport default <T extends PieChartProps.Datum>({\n  pieData,\n  dimensions,\n  highlightedSegment,\n  segmentDescription,\n  visibleDataSum,\n  hideTitles,\n  hideDescriptions,\n  containerRef,\n}: LabelsProps<T>) => {\n  const containerBoundaries = useElementBoundaries(containerRef);\n\n  const markers = useMemo(() => {\n    const { outerRadius: radius, innerLabelPadding } = dimensions;\n\n    // More arc factories for the label positioning\n    const arcMarkerStart = arc<PieArcDatum<any>>()\n      .innerRadius(radius - 1)\n      .outerRadius(radius - 1);\n\n    const arcMarkerBreak = arc<PieArcDatum<any>>()\n      .innerRadius(radius + innerLabelPadding)\n      .outerRadius(radius + innerLabelPadding);\n\n    return pieData.map((datum, i) => {\n      const labelDatum = pieData[i];\n      const midAngle = labelDatum.startAngle + (labelDatum.endAngle - labelDatum.startAngle) / 2;\n\n      // Make the marker line longer if the segment is closer to the top or bottom of the chart\n      arcMarkerBreak.outerRadius(radius + 20 * (0.5 * Math.cos(2 * midAngle) + 0.5));\n      arcMarkerBreak.innerRadius(radius + 20 * (0.5 * Math.cos(2 * midAngle) + 0.5));\n      const [startX, startY] = arcMarkerStart.centroid(datum);\n      const [breakX, breakY] = arcMarkerBreak.centroid(datum);\n\n      const rightSide = midAngle < Math.PI;\n      const endX = (radius + 20) * (rightSide ? 1 : -1);\n      const textX = endX + 5 * (rightSide ? 1 : -1);\n\n      return {\n        startX,\n        startY,\n        breakX,\n        breakY,\n        endX,\n        endY: breakY,\n        textX,\n        textY: breakY,\n        rightSide,\n        datum,\n      };\n    });\n  }, [pieData, dimensions]);\n\n  const rootRef = useRef<SVGGElement>(null);\n\n  useLayoutEffect(() => {\n    if (!rootRef.current) {\n      return;\n    }\n\n    // Relax labels that are overlapping\n    const labelNodes = rootRef.current.querySelectorAll<SVGGElement>(`.${styles['label-text']}`);\n    balanceLabelNodes(labelNodes, markers, false);\n    balanceLabelNodes(labelNodes, markers, true);\n  }, [markers, pieData]);\n\n  return (\n    <g className={styles.markers} aria-hidden=\"true\" ref={rootRef}>\n      {markers.map(({ startX, startY, breakX, breakY, endX, endY, textX, textY, rightSide, datum }) => {\n        const segment = datum.data.datum;\n        const description = segmentDescription?.(segment, visibleDataSum);\n        if ((hideTitles && !description) || (hideDescriptions && !segment.title)) {\n          return null;\n        }\n        return (\n          <g\n            key={datum.data.index}\n            className={clsx(styles.label, {\n              [styles['label--highlighted']]: highlightedSegment === segment,\n              [styles['label--dimmed']]: highlightedSegment !== null && highlightedSegment !== segment,\n              [styles['label--align-right']]: !rightSide,\n            })}\n          >\n            <line x1={startX} y1={startY} x2={breakX} y2={breakY} />\n            <line x1={breakX} y1={breakY} x2={endX} y2={endY} className={styles['label-line']} />\n            <LabelElement\n              x={textX}\n              y={textY}\n              rightSide={rightSide}\n              title={segment.title}\n              description={description}\n              hideTitles={hideTitles}\n              hideDescriptions={hideDescriptions}\n              containerBoundaries={containerBoundaries}\n            />\n          </g>\n        );\n      })}\n    </g>\n  );\n};\n\nfunction useElementBoundaries(ref: React.RefObject<HTMLElement>): { left: number; right: number } {\n  const [state, setState] = useState({ left: 0, right: 0 });\n  useResizeObserver(ref, entry => {\n    const elementRect = entry.target.getBoundingClientRect();\n    setState({ left: elementRect.left, right: elementRect.right });\n  });\n  return state;\n}\n"]}
+{"version":3,"file":"labels.js","sourceRoot":"lib/default/","sources":["pie-chart/labels.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, useMemo, useRef, useState } from 'react';\nimport clsx from 'clsx';\nimport { arc, PieArcDatum } from 'd3-shape';\n\nimport { PieChartProps } from './interfaces';\nimport styles from './styles.css.js';\nimport { InternalChartDatum } from './pie-chart';\nimport { Dimension, balanceLabelNodes } from './utils';\nimport ResponsiveText from './responsive-text';\nimport { useResizeObserver } from '@cloudscape-design/component-toolkit/internal';\n\nexport interface LabelsProps<T> {\n  pieData: PieArcDatum<InternalChartDatum<T>>[];\n  visibleDataSum: number;\n  dimensions: Dimension;\n  hideTitles: boolean;\n  hideDescriptions: boolean;\n  highlightedSegment: PieChartProps.Datum | null;\n  segmentDescription?: PieChartProps.SegmentDescriptionFunction<T>;\n  containerRef: React.RefObject<HTMLDivElement>;\n}\n\ninterface LabelElementProps {\n  x: number;\n  y: number;\n  rightSide: boolean;\n  hideTitles: boolean;\n  hideDescriptions: boolean;\n  title: PieChartProps.Datum['title'];\n  description?: string;\n  containerBoundaries: null | { left: number; right: number };\n}\n\nfunction LabelElement({\n  x,\n  y,\n  hideTitles,\n  hideDescriptions,\n  rightSide,\n  title,\n  description,\n  containerBoundaries,\n}: LabelElementProps) {\n  return (\n    // Reset the transform property to prepare for `balanceLabelNodes`.\n    // The dataset attributes are also needed in the function for IE11 support.\n    <g className={styles['label-text']} transform=\"\" data-x={x} data-y={y}>\n      {!hideTitles && (\n        <ResponsiveText x={x} y={y} rightSide={rightSide} containerBoundaries={containerBoundaries}>\n          {title}\n        </ResponsiveText>\n      )}\n      {!hideDescriptions && description && (\n        <ResponsiveText\n          x={x}\n          y={y + (hideTitles ? 0 : 18)}\n          rightSide={rightSide}\n          className={styles.label__description}\n          containerBoundaries={containerBoundaries}\n        >\n          {description}\n        </ResponsiveText>\n      )}\n    </g>\n  );\n}\n\nexport default <T extends PieChartProps.Datum>({\n  pieData,\n  dimensions,\n  highlightedSegment,\n  segmentDescription,\n  visibleDataSum,\n  hideTitles,\n  hideDescriptions,\n  containerRef,\n}: LabelsProps<T>) => {\n  const containerBoundaries = useElementBoundaries(containerRef);\n\n  const markers = useMemo(() => {\n    const { outerRadius: radius, innerLabelPadding } = dimensions;\n\n    // More arc factories for the label positioning\n    const arcMarkerStart = arc<PieArcDatum<any>>()\n      .innerRadius(radius - 1)\n      .outerRadius(radius - 1);\n\n    const arcMarkerBreak = arc<PieArcDatum<any>>()\n      .innerRadius(radius + innerLabelPadding)\n      .outerRadius(radius + innerLabelPadding);\n\n    return pieData.map((datum, i) => {\n      const labelDatum = pieData[i];\n      const midAngle = labelDatum.startAngle + (labelDatum.endAngle - labelDatum.startAngle) / 2;\n\n      // Make the marker line longer if the segment is closer to the top or bottom of the chart\n      arcMarkerBreak.outerRadius(radius + 20 * (0.5 * Math.cos(2 * midAngle) + 0.5));\n      arcMarkerBreak.innerRadius(radius + 20 * (0.5 * Math.cos(2 * midAngle) + 0.5));\n      const [startX, startY] = arcMarkerStart.centroid(datum);\n      const [breakX, breakY] = arcMarkerBreak.centroid(datum);\n\n      const rightSide = midAngle < Math.PI;\n      const endX = (radius + 20) * (rightSide ? 1 : -1);\n      const textX = endX + 5 * (rightSide ? 1 : -1);\n\n      return {\n        startX,\n        startY,\n        breakX,\n        breakY,\n        endX,\n        endY: breakY,\n        textX,\n        textY: breakY,\n        rightSide,\n        datum,\n      };\n    });\n  }, [pieData, dimensions]);\n\n  const rootRef = useRef<SVGGElement>(null);\n\n  useLayoutEffect(() => {\n    if (!rootRef.current) {\n      return;\n    }\n\n    // Relax labels that are overlapping\n    const labelNodes = rootRef.current.querySelectorAll<SVGGElement>(`.${styles['label-text']}`);\n    balanceLabelNodes(labelNodes, markers, false);\n    balanceLabelNodes(labelNodes, markers, true);\n  }, [markers, pieData]);\n\n  return (\n    <g className={styles.markers} aria-hidden=\"true\" ref={rootRef}>\n      {markers.map(({ startX, startY, breakX, breakY, endX, endY, textX, textY, rightSide, datum }) => {\n        const segment = datum.data.datum;\n        const description = segmentDescription?.(segment, visibleDataSum);\n        if ((hideTitles && !description) || (hideDescriptions && !segment.title)) {\n          return null;\n        }\n        return (\n          <g\n            key={datum.data.index}\n            className={clsx(styles.label, {\n              [styles['label--highlighted']]: highlightedSegment === segment,\n              [styles['label--dimmed']]: highlightedSegment !== null && highlightedSegment !== segment,\n              [styles['label--align-right']]: !rightSide,\n            })}\n          >\n            <line x1={startX} y1={startY} x2={breakX} y2={breakY} />\n            <line x1={breakX} y1={breakY} x2={endX} y2={endY} className={styles['label-line']} />\n            <LabelElement\n              x={textX}\n              y={textY}\n              rightSide={rightSide}\n              title={segment.title}\n              description={description}\n              hideTitles={hideTitles}\n              hideDescriptions={hideDescriptions}\n              containerBoundaries={containerBoundaries}\n            />\n          </g>\n        );\n      })}\n    </g>\n  );\n};\n\nfunction useElementBoundaries(ref: React.RefObject<HTMLElement>): { left: number; right: number } {\n  const [state, setState] = useState({ left: 0, right: 0 });\n  useResizeObserver(ref, entry => {\n    const elementRect = entry.target.getBoundingClientRect();\n    setState({ left: elementRect.left, right: elementRect.right });\n  });\n  return state;\n}\n"]}

package/pie-chart/styles.css.js

@@ -1,32 +1,32 @@
 
     import './styles.scoped.css';
     export default {
-  "segment__path": "awsui_segment__path_1edmh_1pq09_97",
-  "segment": "awsui_segment_1edmh_1pq09_97",
-  "segment__hover": "awsui_segment__hover_1edmh_1pq09_124",
-  "label": "awsui_label_1edmh_1pq09_138",
-  "root": "awsui_root_1edmh_1pq09_156",
-  "content": "awsui_content_1edmh_1pq09_160",
-  "content--small": "awsui_content--small_1edmh_1pq09_160",
-  "content--without-labels": "awsui_content--without-labels_1edmh_1pq09_163",
-  "content--medium": "awsui_content--medium_1edmh_1pq09_166",
-  "content--large": "awsui_content--large_1edmh_1pq09_172",
-  "content--fit-height": "awsui_content--fit-height_1edmh_1pq09_179",
-  "status-container": "awsui_status-container_1edmh_1pq09_183",
-  "chart-container": "awsui_chart-container_1edmh_1pq09_187",
-  "chart-container--fit-height": "awsui_chart-container--fit-height_1edmh_1pq09_191",
-  "chart-container-chart-plot": "awsui_chart-container-chart-plot_1edmh_1pq09_196",
-  "chart-container-chart-plot--fit-height": "awsui_chart-container-chart-plot--fit-height_1edmh_1pq09_199",
-  "inner-content": "awsui_inner-content_1edmh_1pq09_208",
-  "segment__highlight": "awsui_segment__highlight_1edmh_1pq09_222",
-  "segment--dimmed": "awsui_segment--dimmed_1edmh_1pq09_237",
-  "segment--highlighted": "awsui_segment--highlighted_1edmh_1pq09_240",
-  "label--dimmed": "awsui_label--dimmed_1edmh_1pq09_257",
-  "label--align-right": "awsui_label--align-right_1edmh_1pq09_260",
-  "label-text": "awsui_label-text_1edmh_1pq09_268",
-  "label__description": "awsui_label__description_1edmh_1pq09_276",
-  "label-line": "awsui_label-line_1edmh_1pq09_283",
-  "label--highlighted": "awsui_label--highlighted_1edmh_1pq09_287",
-  "popover-header": "awsui_popover-header_1edmh_1pq09_291"
+  "segment__path": "awsui_segment__path_1edmh_1iq5s_97",
+  "segment": "awsui_segment_1edmh_1iq5s_97",
+  "segment__hover": "awsui_segment__hover_1edmh_1iq5s_124",
+  "label": "awsui_label_1edmh_1iq5s_138",
+  "root": "awsui_root_1edmh_1iq5s_156",
+  "content": "awsui_content_1edmh_1iq5s_160",
+  "content--small": "awsui_content--small_1edmh_1iq5s_160",
+  "content--without-labels": "awsui_content--without-labels_1edmh_1iq5s_163",
+  "content--medium": "awsui_content--medium_1edmh_1iq5s_166",
+  "content--large": "awsui_content--large_1edmh_1iq5s_172",
+  "content--fit-height": "awsui_content--fit-height_1edmh_1iq5s_179",
+  "status-container": "awsui_status-container_1edmh_1iq5s_183",
+  "chart-container": "awsui_chart-container_1edmh_1iq5s_187",
+  "chart-container--fit-height": "awsui_chart-container--fit-height_1edmh_1iq5s_191",
+  "chart-container-chart-plot": "awsui_chart-container-chart-plot_1edmh_1iq5s_196",
+  "chart-container-chart-plot--fit-height": "awsui_chart-container-chart-plot--fit-height_1edmh_1iq5s_199",
+  "inner-content": "awsui_inner-content_1edmh_1iq5s_208",
+  "segment__highlight": "awsui_segment__highlight_1edmh_1iq5s_222",
+  "segment--dimmed": "awsui_segment--dimmed_1edmh_1iq5s_237",
+  "segment--highlighted": "awsui_segment--highlighted_1edmh_1iq5s_240",
+  "label--dimmed": "awsui_label--dimmed_1edmh_1iq5s_257",
+  "label--align-right": "awsui_label--align-right_1edmh_1iq5s_260",
+  "label-text": "awsui_label-text_1edmh_1iq5s_268",
+  "label__description": "awsui_label__description_1edmh_1iq5s_276",
+  "label-line": "awsui_label-line_1edmh_1iq5s_283",
+  "label--highlighted": "awsui_label--highlighted_1edmh_1iq5s_287",
+  "popover-header": "awsui_popover-header_1edmh_1iq5s_291"
 };