@automattic/charts 0.56.5 → 0.56.7

package/dist/{chunk-LT4YOIMM.js → chunk-7FDQGBY7.js}

@@ -12,9 +12,12 @@ import {
 import {
   BaseTooltip
 } from "./chunk-BPYKWMI7.js";
+import {
+  Stack
+} from "./chunk-IS5YYLTV.js";
 import {
   withResponsive
-} from "./chunk-TYIH5LMV.js";
+} from "./chunk-OP6PHB2U.js";
 import {
   GlobalChartsContext,
   GlobalChartsProvider,
@@ -23,12 +26,12 @@ import {
   useChartId,
   useChartLegendItems,
   useChartRegistration,
-  useElementHeight,
+  useElementSize,
   useGlobalChartsContext,
   useGlobalChartsTheme,
   useInteractiveLegendData,
   usePrefersReducedMotion
-} from "./chunk-32ESS4MV.js";
+} from "./chunk-RFSHE3HL.js";
 import {
   attachSubComponents
 } from "./chunk-TE63Y5PX.js";
@@ -44,7 +47,8 @@ import { useCallback, useContext, useMemo } from "react";
 // src/charts/pie-chart/pie-chart.module.scss
 var pie_chart_module_default = {
   "pie-chart": "a8ccharts-C-n-Gu",
-  "pie-chart--legend-top": "a8ccharts-Mu0uxl"
+  "pie-chart--responsive": "a8ccharts-IQVR6j",
+  "pie-chart__svg-wrapper": "a8ccharts-iQ1Rki"
 };
 
 // src/charts/pie-chart/pie-chart.tsx
@@ -98,6 +102,8 @@ var PieChartInternal = ({
   legendTextOverflow = "wrap",
   legendItemClassName,
   legendShape = "circle",
+  width: propWidth,
+  height: propHeight,
   size,
   animation,
   thickness = 1,
@@ -110,11 +116,12 @@ var PieChartInternal = ({
   children = null,
   tooltipOffsetX = 0,
   tooltipOffsetY = -15,
-  renderTooltip = renderDefaultPieTooltip
+  renderTooltip = renderDefaultPieTooltip,
+  gap = "md"
 }) => {
   const providerTheme = useGlobalChartsTheme();
   const chartId = useChartId(providedChartId);
-  const [legendRef, legendHeight] = useElementHeight();
+  const [svgWrapperRef, svgWrapperWidth, svgWrapperHeight] = useElementSize();
   const {
     tooltipOpen,
     tooltipLeft,
@@ -188,12 +195,15 @@ var PieChartInternal = ({
       })
     });
   }
-  const width = size;
-  const height = size;
-  const adjustedHeight = showLegend && legendPosition === "top" ? height - legendHeight : height;
-  const radius = Math.min(width, adjustedHeight) / 2;
+  const availableWidth = svgWrapperWidth > 0 ? svgWrapperWidth : 300;
+  const availableHeight = svgWrapperHeight > 0 ? svgWrapperHeight : 300;
+  const availableSize = Math.min(availableWidth, availableHeight);
+  const actualSize = size ? Math.min(size, availableSize) : availableSize;
+  const width = actualSize;
+  const height = actualSize;
+  const radius = Math.min(width, height) / 2;
   const centerX = width / 2;
-  const centerY = adjustedHeight / 2;
+  const centerY = height / 2;
   const padAngle = gapScale * (2 * Math.PI / data.length);
   const outerRadius = radius - padding;
   const innerRadius = thickness === 0 ? 0 : outerRadius * (1 - thickness);
@@ -215,122 +225,138 @@ var PieChartInternal = ({
       }).color;
     }
   };
+  const legendElement = showLegend && /* @__PURE__ */ _jsx(Legend, {
+    orientation: legendOrientation,
+    position: legendPosition,
+    alignment: legendAlignment,
+    maxWidth: legendMaxWidth,
+    textOverflow: legendTextOverflow,
+    legendItemClassName,
+    shape: legendShape,
+    chartId,
+    interactive: legendInteractive
+  });
   return /* @__PURE__ */ _jsx(SingleChartContext.Provider, {
     value: {
       chartId,
       chartWidth: width,
-      chartHeight: adjustedHeight
+      chartHeight: height
     },
-    children: /* @__PURE__ */ _jsxs("div", {
+    children: /* @__PURE__ */ _jsxs(Stack, {
       ref: containerRef,
-      className: clsx("pie-chart", pie_chart_module_default["pie-chart"], {
-        [pie_chart_module_default["pie-chart--legend-top"]]: showLegend && legendPosition === "top"
-      }, className),
-      children: [/* @__PURE__ */ _jsxs("svg", {
-        viewBox: `0 0 ${width} ${adjustedHeight}`,
-        preserveAspectRatio: "xMidYMid meet",
-        width,
-        height: adjustedHeight,
-        children: [/* @__PURE__ */ _jsx("defs", {
-          children: /* @__PURE__ */ _jsx(radial_wipe_animation_default, {
-            id: `radial-wipe-${chartId}`,
-            radius: outerRadius,
-            innerRadius
-          })
-        }), /* @__PURE__ */ _jsxs(Group, {
-          top: centerY,
-          left: centerX,
-          mask: animation && !prefersReducedMotion ? `url(#radial-wipe-${chartId})` : null,
-          children: [allSegmentsHidden ? /* @__PURE__ */ _jsx("text", {
-            textAnchor: "middle",
-            dy: ".33em",
-            fill: providerTheme.gridColor || "#ccc",
-            fontSize: "14",
-            fontFamily: "-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif",
-            children: __("All segments are hidden. Click legend items to show data.", "jetpack-charts")
-          }) : /* @__PURE__ */ _jsx(Pie, {
-            data: dataWithIndex,
-            pieValue: accessors.value,
-            outerRadius,
-            innerRadius,
-            padAngle,
-            cornerRadius,
-            children: (pie) => {
-              return pie.arcs.map((arc, index) => {
-                const [centroidX, centroidY] = pie.path.centroid(arc);
-                const hasSpaceForLabel = arc.endAngle - arc.startAngle >= 0.25;
-                const handleMouseMove = (event) => {
-                  if (!withTooltips) {
-                    return;
+      direction: "column",
+      gap,
+      className: clsx(
+        "pie-chart",
+        pie_chart_module_default["pie-chart"],
+        // Fill parent when no explicit dimensions provided
+        {
+          [pie_chart_module_default["pie-chart--responsive"]]: !propWidth && !propHeight
+        },
+        className
+      ),
+      style: {
+        width: propWidth || void 0,
+        height: propHeight || void 0
+      },
+      children: [legendPosition === "top" && legendElement, /* @__PURE__ */ _jsx("div", {
+        className: pie_chart_module_default["pie-chart__svg-wrapper"],
+        ref: svgWrapperRef,
+        children: /* @__PURE__ */ _jsxs("svg", {
+          viewBox: `0 0 ${width} ${height}`,
+          preserveAspectRatio: "xMidYMid meet",
+          width,
+          height,
+          children: [/* @__PURE__ */ _jsx("defs", {
+            children: /* @__PURE__ */ _jsx(radial_wipe_animation_default, {
+              id: `radial-wipe-${chartId}`,
+              radius: outerRadius,
+              innerRadius
+            })
+          }), /* @__PURE__ */ _jsxs(Group, {
+            top: centerY,
+            left: centerX,
+            mask: animation && !prefersReducedMotion ? `url(#radial-wipe-${chartId})` : null,
+            children: [allSegmentsHidden ? /* @__PURE__ */ _jsx("text", {
+              textAnchor: "middle",
+              dy: ".33em",
+              fill: providerTheme.gridColor || "#ccc",
+              fontSize: "14",
+              fontFamily: "-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif",
+              children: __("All segments are hidden. Click legend items to show data.", "jetpack-charts")
+            }) : /* @__PURE__ */ _jsx(Pie, {
+              data: dataWithIndex,
+              pieValue: accessors.value,
+              outerRadius,
+              innerRadius,
+              padAngle,
+              cornerRadius,
+              children: (pie) => {
+                return pie.arcs.map((arc, index) => {
+                  const [centroidX, centroidY] = pie.path.centroid(arc);
+                  const hasSpaceForLabel = arc.endAngle - arc.startAngle >= 0.25;
+                  const handleMouseMove = (event) => {
+                    if (!withTooltips) {
+                      return;
+                    }
+                    if (containerBounds.width === 0 || containerBounds.height === 0) {
+                      return;
+                    }
+                    showTooltip({
+                      tooltipData: arc.data,
+                      tooltipLeft: event.clientX - containerBounds.left + tooltipOffsetX,
+                      tooltipTop: event.clientY - containerBounds.top + tooltipOffsetY
+                    });
+                  };
+                  const pathProps = {
+                    d: pie.path(arc) || "",
+                    fill: accessors.fill(arc.data),
+                    "data-testid": "pie-segment"
+                  };
+                  const groupProps = {};
+                  if (withTooltips) {
+                    groupProps.onMouseMove = handleMouseMove;
+                    groupProps.onMouseLeave = onMouseLeave;
                   }
-                  if (containerBounds.width === 0 || containerBounds.height === 0) {
-                    return;
-                  }
-                  showTooltip({
-                    tooltipData: arc.data,
-                    tooltipLeft: event.clientX - containerBounds.left + tooltipOffsetX,
-                    tooltipTop: event.clientY - containerBounds.top + tooltipOffsetY
+                  const fontSize = 12;
+                  const estimatedTextWidth = getStringWidth(arc.data.label, {
+                    fontSize
                   });
-                };
-                const pathProps = {
-                  d: pie.path(arc) || "",
-                  fill: accessors.fill(arc.data)
-                };
-                const groupProps = {};
-                if (withTooltips) {
-                  groupProps.onMouseMove = handleMouseMove;
-                  groupProps.onMouseLeave = onMouseLeave;
-                }
-                const fontSize = 12;
-                const estimatedTextWidth = getStringWidth(arc.data.label, {
-                  fontSize
-                });
-                const labelPadding = 6;
-                const backgroundWidth = estimatedTextWidth + labelPadding * 2;
-                const backgroundHeight = fontSize + labelPadding * 2;
-                return /* @__PURE__ */ _jsxs("g", {
-                  ...groupProps,
-                  children: [/* @__PURE__ */ _jsx("path", {
-                    ...pathProps
-                  }), showLabels && hasSpaceForLabel && /* @__PURE__ */ _jsxs("g", {
-                    children: [providerTheme.labelBackgroundColor && /* @__PURE__ */ _jsx("rect", {
-                      x: centroidX - backgroundWidth / 2,
-                      y: centroidY - backgroundHeight / 2,
-                      width: backgroundWidth,
-                      height: backgroundHeight,
-                      fill: providerTheme.labelBackgroundColor,
-                      rx: 4,
-                      ry: 4,
-                      pointerEvents: "none"
-                    }), /* @__PURE__ */ _jsx("text", {
-                      x: centroidX,
-                      y: centroidY,
-                      dy: ".33em",
-                      fill: providerTheme.labelTextColor || "#333",
-                      fontSize,
-                      textAnchor: "middle",
-                      pointerEvents: "none",
-                      children: arc.data.label
+                  const labelPadding = 6;
+                  const backgroundWidth = estimatedTextWidth + labelPadding * 2;
+                  const backgroundHeight = fontSize + labelPadding * 2;
+                  return /* @__PURE__ */ _jsxs("g", {
+                    ...groupProps,
+                    children: [/* @__PURE__ */ _jsx("path", {
+                      ...pathProps
+                    }), showLabels && hasSpaceForLabel && /* @__PURE__ */ _jsxs("g", {
+                      children: [providerTheme.labelBackgroundColor && /* @__PURE__ */ _jsx("rect", {
+                        x: centroidX - backgroundWidth / 2,
+                        y: centroidY - backgroundHeight / 2,
+                        width: backgroundWidth,
+                        height: backgroundHeight,
+                        fill: providerTheme.labelBackgroundColor,
+                        rx: 4,
+                        ry: 4,
+                        pointerEvents: "none"
+                      }), /* @__PURE__ */ _jsx("text", {
+                        x: centroidX,
+                        y: centroidY,
+                        dy: ".33em",
+                        fill: providerTheme.labelTextColor || "#333",
+                        fontSize,
+                        textAnchor: "middle",
+                        pointerEvents: "none",
+                        children: arc.data.label
+                      })]
                     })]
-                  })]
-                }, `arc-${index}`);
-              });
-            }
-          }), !allSegmentsHidden && svgChildren]
-        })]
-      }), showLegend && /* @__PURE__ */ _jsx(Legend, {
-        orientation: legendOrientation,
-        position: legendPosition,
-        alignment: legendAlignment,
-        maxWidth: legendMaxWidth,
-        textOverflow: legendTextOverflow,
-        legendItemClassName,
-        className: pie_chart_module_default["pie-chart-legend"],
-        shape: legendShape,
-        ref: legendRef,
-        chartId,
-        interactive: legendInteractive
-      }), withTooltips && tooltipOpen && tooltipData && /* @__PURE__ */ _jsx(TooltipInPortal, {
+                  }, `arc-${index}`);
+                });
+              }
+            }), !allSegmentsHidden && svgChildren]
+          })]
+        })
+      }), legendPosition === "bottom" && legendElement, withTooltips && tooltipOpen && tooltipData && /* @__PURE__ */ _jsx(TooltipInPortal, {
         top: tooltipTop || 0,
         left: tooltipLeft || 0,
         children: /* @__PURE__ */ _jsx("div", {
@@ -372,4 +398,4 @@ export {
   PieChart,
   PieChartResponsive
 };
-//# sourceMappingURL=chunk-LT4YOIMM.js.map
+//# sourceMappingURL=chunk-7FDQGBY7.js.map

package/dist/chunk-7FDQGBY7.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/charts/pie-chart/pie-chart.tsx","../src/charts/pie-chart/pie-chart.module.scss"],"sourcesContent":["import { Group } from '@visx/group';\nimport { Pie } from '@visx/shape';\nimport { useTooltip, useTooltipInPortal } from '@visx/tooltip';\nimport { __ } from '@wordpress/i18n';\nimport { Stack } from '@wordpress/ui';\nimport clsx from 'clsx';\nimport { useCallback, useContext, useMemo } from 'react';\nimport { Legend, useChartLegendItems } from '../../components/legend';\nimport { BaseTooltip } from '../../components/tooltip';\nimport { useElementSize, useInteractiveLegendData, usePrefersReducedMotion } from '../../hooks';\nimport { GlobalChartsProvider, useChartId, useChartRegistration, useGlobalChartsContext, useGlobalChartsTheme, GlobalChartsContext } from '../../providers';\nimport { attachSubComponents } from '../../utils';\nimport { getStringWidth } from '../../visx/text';\nimport { ChartSVG, ChartHTML, useChartChildren } from '../private/chart-composition';\nimport { RadialWipeAnimation } from '../private/radial-wipe-animation/';\nimport { SingleChartContext } from '../private/single-chart-context';\nimport { withResponsive } from '../private/with-responsive';\nimport styles from './pie-chart.module.scss';\n\n/**\n * Parameters passed to the renderTooltip function for pie charts.\n */\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\n/**\n * Default tooltip renderer for pie charts.\n * Renders a BaseTooltip with the hovered segment's data.\n *\n * @param {PieChartRenderTooltipParams} params - The tooltip parameters containing the hovered data point\n * @return {ReactNode} The rendered tooltip content\n */\nconst renderDefaultPieTooltip = ({\n  tooltipData\n}) => {\n  return /*#__PURE__*/_jsx(BaseTooltip, {\n    data: tooltipData,\n    top: 0,\n    left: 0,\n    renderContainer: false\n  });\n};\n\n// Base props type with optional responsive properties\n\n// Composition API types\n\n/**\n * Validates the pie chart data\n * @param data - The data to validate\n * @return Object containing validation result and error message\n */\nconst validateData = data => {\n  if (!data.length) {\n    return {\n      isValid: false,\n      message: 'No data available'\n    };\n  }\n\n  // Check for negative values\n  const hasNegativeValues = data.some(item => item.percentage < 0 || item.value < 0);\n  if (hasNegativeValues) {\n    return {\n      isValid: false,\n      message: 'Invalid data: Negative values are not allowed'\n    };\n  }\n\n  // Validate total percentage\n  const totalPercentage = data.reduce((sum, item) => sum + item.percentage, 0);\n  if (Math.abs(totalPercentage - 100) > 0.01) {\n    // Using small epsilon for floating point comparison\n    return {\n      isValid: false,\n      message: 'Invalid percentage total: Must equal 100'\n    };\n  }\n  return {\n    isValid: true,\n    message: ''\n  };\n};\n\n/**\n * Renders a pie or donut chart using the provided data.\n *\n * @param {PieChartProps} props - Component props\n * @return {JSX.Element} The rendered chart component\n */\nconst PieChartInternal = ({\n  data,\n  chartId: providedChartId,\n  withTooltips = false,\n  className,\n  showLegend = false,\n  legendOrientation = 'horizontal',\n  legendPosition = 'bottom',\n  legendAlignment = 'center',\n  legendMaxWidth,\n  legendTextOverflow = 'wrap',\n  legendItemClassName,\n  legendShape = 'circle',\n  width: propWidth,\n  height: propHeight,\n  size,\n  animation,\n  thickness = 1,\n  padding = 0,\n  gapScale = 0,\n  cornerScale = 0,\n  showLabels = true,\n  legendValueDisplay = 'percentage',\n  legendInteractive = false,\n  children = null,\n  tooltipOffsetX = 0,\n  tooltipOffsetY = -15,\n  renderTooltip = renderDefaultPieTooltip,\n  gap = 'md'\n}) => {\n  const providerTheme = useGlobalChartsTheme();\n  const chartId = useChartId(providedChartId);\n  const [svgWrapperRef, svgWrapperWidth, svgWrapperHeight] = useElementSize();\n  const {\n    tooltipOpen,\n    tooltipLeft,\n    tooltipTop,\n    tooltipData,\n    hideTooltip,\n    showTooltip\n  } = useTooltip();\n\n  // Set up portal tooltip for better z-index handling\n  // We get containerBounds to cancel out stale offsets in the position calculation\n  const {\n    containerRef,\n    TooltipInPortal,\n    containerBounds\n  } = useTooltipInPortal({\n    detectBounds: true,\n    scroll: true,\n    debounce: 0\n  });\n  const onMouseLeave = useCallback(() => {\n    if (!withTooltips) {\n      return;\n    }\n    hideTooltip();\n  }, [withTooltips, hideTooltip]);\n  const {\n    getElementStyles,\n    isSeriesVisible\n  } = useGlobalChartsContext();\n\n  // Filter and recalculate data for interactive legends\n  const {\n    visibleData,\n    allSegmentsHidden,\n    legendData\n  } = useInteractiveLegendData({\n    data,\n    chartId,\n    legendInteractive,\n    isSeriesVisible\n  });\n\n  // Memoize legend options to prevent unnecessary re-calculations\n  const legendOptions = useMemo(() => ({\n    showValues: true,\n    legendValueDisplay\n  }), [legendValueDisplay]);\n\n  // Create legend items using legendData (has recalculated percentages for visible items)\n  const legendItems = useChartLegendItems(legendData, legendOptions);\n  const {\n    isValid,\n    message\n  } = validateData(data);\n\n  // Process children to extract compound components\n  const {\n    svgChildren,\n    htmlChildren,\n    otherChildren\n  } = useChartChildren(children, 'PieChart');\n\n  // Memoize metadata to prevent unnecessary re-registration\n  const chartMetadata = useMemo(() => ({\n    thickness,\n    gapScale,\n    cornerScale\n  }), [thickness, gapScale, cornerScale]);\n\n  // Register chart with context only if data is valid\n  useChartRegistration({\n    chartId,\n    legendItems,\n    chartType: 'pie',\n    isDataValid: isValid,\n    metadata: chartMetadata\n  });\n  const prefersReducedMotion = usePrefersReducedMotion();\n  if (!isValid) {\n    return /*#__PURE__*/_jsx(\"div\", {\n      className: clsx('pie-chart', styles['pie-chart'], className),\n      children: /*#__PURE__*/_jsx(\"div\", {\n        className: styles['error-message'],\n        children: message\n      })\n    });\n  }\n\n  // Calculate the actual pie size:\n  // - Measure available space from the svg-wrapper\n  // - If size prop provided: use it as max, but shrink if container is smaller\n  // - If no size prop: fill available space\n  const availableWidth = svgWrapperWidth > 0 ? svgWrapperWidth : 300;\n  const availableHeight = svgWrapperHeight > 0 ? svgWrapperHeight : 300;\n  const availableSize = Math.min(availableWidth, availableHeight);\n  const actualSize = size ? Math.min(size, availableSize) : availableSize;\n  const width = actualSize;\n  const height = actualSize;\n\n  // Calculate radius based on width/height\n  const radius = Math.min(width, height) / 2;\n\n  // Center the chart in the available space\n  const centerX = width / 2;\n  const centerY = height / 2;\n\n  // Calculate the angle between each (use original data length for consistent spacing)\n  const padAngle = gapScale * (2 * Math.PI / data.length);\n  const outerRadius = radius - padding;\n  const innerRadius = thickness === 0 ? 0 : outerRadius * (1 - thickness);\n  const maxCornerRadius = (outerRadius - innerRadius) / 2;\n  const cornerRadius = cornerScale ? Math.min(cornerScale * outerRadius, maxCornerRadius) : 0;\n\n  // Map the data to include index for color assignment\n  // When interactive, we need to find the original index to maintain consistent colors\n  const dataWithIndex = visibleData.map(d => {\n    const originalIndex = data.findIndex(item => item.label === d.label);\n    return {\n      ...d,\n      index: originalIndex >= 0 ? originalIndex : 0\n    };\n  });\n  const accessors = {\n    value: d => d.value,\n    fill: d => {\n      return getElementStyles({\n        data: d,\n        index: d.index\n      }).color;\n    }\n  };\n  const legendElement = showLegend && /*#__PURE__*/_jsx(Legend, {\n    orientation: legendOrientation,\n    position: legendPosition,\n    alignment: legendAlignment,\n    maxWidth: legendMaxWidth,\n    textOverflow: legendTextOverflow,\n    legendItemClassName: legendItemClassName,\n    shape: legendShape,\n    chartId: chartId,\n    interactive: legendInteractive\n  });\n  return /*#__PURE__*/_jsx(SingleChartContext.Provider, {\n    value: {\n      chartId,\n      chartWidth: width,\n      chartHeight: height\n    },\n    children: /*#__PURE__*/_jsxs(Stack, {\n      ref: containerRef,\n      direction: \"column\",\n      gap: gap,\n      className: clsx('pie-chart', styles['pie-chart'],\n      // Fill parent when no explicit dimensions provided\n      {\n        [styles['pie-chart--responsive']]: !propWidth && !propHeight\n      }, className),\n      style: {\n        width: propWidth || undefined,\n        height: propHeight || undefined\n      },\n      children: [legendPosition === 'top' && legendElement, /*#__PURE__*/_jsx(\"div\", {\n        className: styles['pie-chart__svg-wrapper'],\n        ref: svgWrapperRef,\n        children: /*#__PURE__*/_jsxs(\"svg\", {\n          viewBox: `0 0 ${width} ${height}`,\n          preserveAspectRatio: \"xMidYMid meet\",\n          width: width,\n          height: height,\n          children: [/*#__PURE__*/_jsx(\"defs\", {\n            children: /*#__PURE__*/_jsx(RadialWipeAnimation, {\n              id: `radial-wipe-${chartId}`,\n              radius: outerRadius,\n              innerRadius: innerRadius\n            })\n          }), /*#__PURE__*/_jsxs(Group, {\n            top: centerY,\n            left: centerX,\n            mask: animation && !prefersReducedMotion ? `url(#radial-wipe-${chartId})` : null,\n            children: [allSegmentsHidden ? /*#__PURE__*/_jsx(\"text\", {\n              textAnchor: \"middle\",\n              dy: \".33em\",\n              fill: providerTheme.gridColor || '#ccc',\n              fontSize: \"14\",\n              fontFamily: \"-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif\",\n              children: __('All segments are hidden. Click legend items to show data.', 'jetpack-charts')\n            }) : /*#__PURE__*/_jsx(Pie, {\n              data: dataWithIndex,\n              pieValue: accessors.value,\n              outerRadius: outerRadius,\n              innerRadius: innerRadius,\n              padAngle: padAngle,\n              cornerRadius: cornerRadius,\n              children: pie => {\n                return pie.arcs.map((arc, index) => {\n                  const [centroidX, centroidY] = pie.path.centroid(arc);\n                  const hasSpaceForLabel = arc.endAngle - arc.startAngle >= 0.25;\n                  const handleMouseMove = event => {\n                    if (!withTooltips) {\n                      return;\n                    }\n\n                    // Don't show tooltip until container bounds are measured\n                    if (containerBounds.width === 0 || containerBounds.height === 0) {\n                      return;\n                    }\n\n                    // Use clientX/Y and subtract containerBounds to cancel out any stale offset.\n                    // TooltipInPortal calculates: tooltipLeft + containerBounds.left + scrollX\n                    // By passing (clientX - containerBounds.left), we get:\n                    // (clientX - containerBounds.left) + containerBounds.left + scrollX = clientX + scrollX\n                    // This gives correct page coordinates regardless of stale bounds.\n                    showTooltip({\n                      tooltipData: arc.data,\n                      tooltipLeft: event.clientX - containerBounds.left + tooltipOffsetX,\n                      tooltipTop: event.clientY - containerBounds.top + tooltipOffsetY\n                    });\n                  };\n                  const pathProps = {\n                    d: pie.path(arc) || '',\n                    fill: accessors.fill(arc.data),\n                    'data-testid': 'pie-segment'\n                  };\n                  const groupProps = {};\n                  if (withTooltips) {\n                    groupProps.onMouseMove = handleMouseMove;\n                    groupProps.onMouseLeave = onMouseLeave;\n                  }\n\n                  // Estimate text width more accurately for background sizing\n                  const fontSize = 12;\n                  const estimatedTextWidth = getStringWidth(arc.data.label, {\n                    fontSize\n                  });\n                  const labelPadding = 6;\n                  const backgroundWidth = estimatedTextWidth + labelPadding * 2;\n                  const backgroundHeight = fontSize + labelPadding * 2;\n                  return /*#__PURE__*/_jsxs(\"g\", {\n                    ...groupProps,\n                    children: [/*#__PURE__*/_jsx(\"path\", {\n                      ...pathProps\n                    }), showLabels && hasSpaceForLabel && /*#__PURE__*/_jsxs(\"g\", {\n                      children: [providerTheme.labelBackgroundColor && /*#__PURE__*/_jsx(\"rect\", {\n                        x: centroidX - backgroundWidth / 2,\n                        y: centroidY - backgroundHeight / 2,\n                        width: backgroundWidth,\n                        height: backgroundHeight,\n                        fill: providerTheme.labelBackgroundColor,\n                        rx: 4,\n                        ry: 4,\n                        pointerEvents: \"none\"\n                      }), /*#__PURE__*/_jsx(\"text\", {\n                        x: centroidX,\n                        y: centroidY,\n                        dy: \".33em\",\n                        fill: providerTheme.labelTextColor || '#333',\n                        fontSize: fontSize,\n                        textAnchor: \"middle\",\n                        pointerEvents: \"none\",\n                        children: arc.data.label\n                      })]\n                    })]\n                  }, `arc-${index}`);\n                });\n              }\n            }), !allSegmentsHidden && svgChildren]\n          })]\n        })\n      }), legendPosition === 'bottom' && legendElement, withTooltips && tooltipOpen && tooltipData && /*#__PURE__*/_jsx(TooltipInPortal, {\n        top: tooltipTop || 0,\n        left: tooltipLeft || 0,\n        children: /*#__PURE__*/_jsx(\"div\", {\n          role: \"tooltip\",\n          children: renderTooltip({\n            tooltipData\n          })\n        })\n      }), htmlChildren, otherChildren]\n    })\n  });\n};\nconst PieChartWithProvider = props => {\n  const existingContext = useContext(GlobalChartsContext);\n\n  // If we're already in a GlobalChartsProvider context, don't create a new one\n  if (existingContext) {\n    return /*#__PURE__*/_jsx(PieChartInternal, {\n      ...props\n    });\n  }\n\n  // Otherwise, create our own GlobalChartsProvider\n  return /*#__PURE__*/_jsx(GlobalChartsProvider, {\n    children: /*#__PURE__*/_jsx(PieChartInternal, {\n      ...props\n    })\n  });\n};\nPieChartWithProvider.displayName = 'PieChart';\n\n// Create PieChart with composition API\nconst PieChart = attachSubComponents(PieChartWithProvider, {\n  Legend: Legend,\n  SVG: ChartSVG,\n  HTML: ChartHTML\n});\n\n// Create responsive PieChart with composition API\nconst PieChartResponsive = attachSubComponents(withResponsive(PieChartWithProvider), {\n  Legend: Legend,\n  SVG: ChartSVG,\n  HTML: ChartHTML\n});\nexport { PieChartResponsive as default, PieChart as PieChartUnresponsive };","import 'css-chunk:src/charts/pie-chart/pie-chart.module.scss';export default {\n  \"pie-chart\": \"a8ccharts-C-n-Gu\",\n  \"pie-chart--responsive\": \"a8ccharts-IQVR6j\",\n  \"pie-chart__svg-wrapper\": \"a8ccharts-iQ1Rki\"\n};"],"mappings":"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","names":[]}

package/dist/{chunk-7QDEU3KN.cjs → chunk-ASLARV7L.cjs}

@@ -55,20 +55,20 @@ function withResponsive(WrappedComponent) {
       maxWidth,
       aspectRatio
     });
-    const effectiveWidth = measuredWidth || size || width || 0;
-    const effectiveHeight = measuredHeight || size || height || 0;
+    const effectiveWidth = measuredWidth || width || 0;
+    const effectiveHeight = measuredHeight || height || 0;
     const defaultHeight = hasAspectRatio ? "auto" : "100%";
     return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
       ref: parentRef,
       className: with_responsive_module_default.container,
       style: {
-        width: _nullishCoalesce(_nullishCoalesce(size, () => ( width)), () => ( "100%")),
-        height: _nullishCoalesce(_nullishCoalesce(size, () => ( height)), () => ( defaultHeight))
+        width: _nullishCoalesce(width, () => ( "100%")),
+        height: _nullishCoalesce(height, () => ( defaultHeight))
       },
       children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, WrappedComponent, {
         width: effectiveWidth,
         height: effectiveHeight,
-        size: effectiveWidth,
+        size,
         ...chartProps
       })
     });
@@ -78,4 +78,4 @@ function withResponsive(WrappedComponent) {
 
 
 exports.withResponsive = withResponsive;
-//# sourceMappingURL=chunk-7QDEU3KN.cjs.map
+//# sourceMappingURL=chunk-ASLARV7L.cjs.map

package/dist/chunk-ASLARV7L.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["/home/runner/work/jetpack/jetpack/projects/js-packages/charts/dist/chunk-ASLARV7L.cjs","../src/charts/private/with-responsive/with-responsive.tsx","../src/charts/private/with-responsive/with-responsive.module.scss"],"names":[],"mappings":"AAAA;ACAA,8CAA8B;ADE9B;AACA;AEHkF,IAAO,+BAAA,EAAQ;AAAA,EAC/F,WAAA,EAAa;AACf,CAAA;AFKA;AACA;ACNA,+CAA4B;AAC5B,IAAM,wBAAA,EAA0B,CAAC;AAAA,EAC/B,mBAAA,EAAqB,GAAA;AAAA,EACrB,SAAA,EAAW,IAAA;AAAA,EACX;AACF,CAAA,EAAA,GAAM;AACJ,EAAA,MAAM;AAAA,IACJ,SAAA;AAAA,IACA,KAAA,EAAO,WAAA;AAAA,IACP,MAAA,EAAQ;AAAA,EACV,EAAA,EAAI,uCAAA;AAAc,IAChB,YAAA,EAAc,kBAAA;AAAA,IACd,yBAAA,EAA2B;AAAA,EAC7B,CAAC,CAAA;AACD,EAAA,MAAM,eAAA,EAAiB,YAAA,EAAc,EAAA,EAAI,IAAA,CAAK,GAAA,CAAI,WAAA,EAAa,QAAQ,EAAA,EAAI,CAAA;AAC3E,EAAA,MAAM,gBAAA,EAAkB,YAAA,IAAgB,KAAA,EAAA,EAAY,eAAA,EAAiB,YAAA,EAAc,YAAA;AACnF,EAAA,OAAO;AAAA,IACL,SAAA;AAAA,IACA,KAAA,EAAO,cAAA;AAAA,IACP,MAAA,EAAQ,eAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMR,cAAA,EAAgB,YAAA,IAAgB,KAAA;AAAA,EAClC,CAAA;AACF,CAAA;AASO,SAAS,cAAA,CAEhB,gBAAA,EAAkB;AAChB,EAAA,OAAO,SAAS,eAAA,CAAgB;AAAA,IAC9B,mBAAA,EAAqB,GAAA;AAAA,IACrB,SAAA,EAAW,IAAA;AAAA,IACX,WAAA;AAAA,IACA,IAAA;AAAA,IACA,KAAA;AAAA,IACA,MAAA;AAAA,IACA,GAAG;AAAA,EACL,CAAA,EAAG;AACD,IAAA,MAAM;AAAA,MACJ,SAAA;AAAA,MACA,KAAA,EAAO,aAAA;AAAA,MACP,MAAA,EAAQ,cAAA;AAAA,MACR;AAAA,IACF,EAAA,EAAI,uBAAA,CAAwB;AAAA,MAC1B,kBAAA;AAAA,MACA,QAAA;AAAA,MACA;AAAA,IACF,CAAC,CAAA;AAKD,IAAA,MAAM,eAAA,EAAiB,cAAA,GAAiB,MAAA,GAAS,CAAA;AACjD,IAAA,MAAM,gBAAA,EAAkB,eAAA,GAAkB,OAAA,GAAU,CAAA;AACpD,IAAA,MAAM,cAAA,EAAgB,eAAA,EAAiB,OAAA,EAAS,MAAA;AAChD,IAAA,uBAAoB,6BAAA,KAAK,EAAO;AAAA,MAC9B,GAAA,EAAK,SAAA;AAAA,MACL,SAAA,EAAW,8BAAA,CAAO,SAAA;AAAA,MAClB,KAAA,EAAO;AAAA,QACL,KAAA,mBAAO,KAAA,UAAS,QAAA;AAAA,QAChB,MAAA,mBAAQ,MAAA,UAAU;AAAA,MACpB,CAAA;AAAA,MACA,QAAA,kBAAuB,6BAAA,gBAAK,EAAkB;AAAA,QAC5C,KAAA,EAAO,cAAA;AAAA,QACP,MAAA,EAAQ,eAAA;AAAA,QACR,IAAA;AAAA,QACA,GAAG;AAAA,MACL,CAAC;AAAA,IACH,CAAC,CAAA;AAAA,EACH,CAAA;AACF;ADNA;AACA;AACE;AACF,wCAAC","file":"/home/runner/work/jetpack/jetpack/projects/js-packages/charts/dist/chunk-ASLARV7L.cjs","sourcesContent":[null,"import { useParentSize } from '@visx/responsive';\nimport styles from './with-responsive.module.scss';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst useResponsiveDimensions = ({\n  resizeDebounceTime = 300,\n  maxWidth = 1200,\n  aspectRatio\n}) => {\n  const {\n    parentRef,\n    width: parentWidth,\n    height: parentHeight\n  } = useParentSize({\n    debounceTime: resizeDebounceTime,\n    enableDebounceLeadingCall: true\n  });\n  const containerWidth = parentWidth > 0 ? Math.min(parentWidth, maxWidth) : 0;\n  const containerHeight = aspectRatio !== undefined ? containerWidth * aspectRatio : parentHeight;\n  return {\n    parentRef,\n    width: containerWidth,\n    height: containerHeight,\n    /**\n     * Whether an aspectRatio was provided. Used to determine container\n     * height styling: 'auto' when true (height derived from width),\n     * '100%' when false (fill parent container).\n     */\n    hasAspectRatio: aspectRatio !== undefined\n  };\n};\n\n/**\n * A higher-order component that provides responsive dimensions\n * to the wrapped chart component using useParentSize from `@visx/responsive`.\n *\n * @param WrappedComponent - The chart component to be wrapped.\n * @return A functional component that renders the wrapped component with responsive dimensions.\n */\nexport function withResponsive(\n// 'options' is excluded so that each chart can define its own options type\nWrappedComponent) {\n  return function ResponsiveChart({\n    resizeDebounceTime = 300,\n    maxWidth = 1200,\n    aspectRatio,\n    size,\n    width,\n    height,\n    ...chartProps\n  }) {\n    const {\n      parentRef,\n      width: measuredWidth,\n      height: measuredHeight,\n      hasAspectRatio\n    } = useResponsiveDimensions({\n      resizeDebounceTime,\n      maxWidth,\n      aspectRatio\n    });\n\n    // Use measured dimensions, but fall back to explicit width/height props if measurement returns 0\n    // (e.g., during initial render or in test environments without DOM measurement).\n    // Do not use size here — size controls chart element dimensions (e.g. pie diameter), not container dimensions.\n    const effectiveWidth = measuredWidth || width || 0;\n    const effectiveHeight = measuredHeight || height || 0;\n    const defaultHeight = hasAspectRatio ? 'auto' : '100%';\n    return /*#__PURE__*/_jsx(\"div\", {\n      ref: parentRef,\n      className: styles.container,\n      style: {\n        width: width ?? '100%',\n        height: height ?? defaultHeight\n      },\n      children: /*#__PURE__*/_jsx(WrappedComponent, {\n        width: effectiveWidth,\n        height: effectiveHeight,\n        size: size,\n        ...chartProps\n      })\n    });\n  };\n}","import 'css-chunk:src/charts/private/with-responsive/with-responsive.module.scss';export default {\n  \"container\": \"a8ccharts-GSKfBD\"\n};"]}