@automattic/charts 0.56.3 → 0.56.5

package/dist/chunk-TKPK4RFS.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["/home/runner/work/jetpack/jetpack/projects/js-packages/charts/dist/chunk-TKPK4RFS.cjs","../src/charts/pie-semi-circle-chart/pie-semi-circle-chart.tsx","../src/charts/pie-semi-circle-chart/pie-semi-circle-chart.module.scss"],"names":[],"mappings":"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","file":"/home/runner/work/jetpack/jetpack/projects/js-packages/charts/dist/chunk-TKPK4RFS.cjs","sourcesContent":[null,"import { Group } from '@visx/group';\nimport { Pie } from '@visx/shape';\nimport { Text } from '@visx/text';\nimport { useTooltip, useTooltipInPortal } from '@visx/tooltip';\nimport { __ } from '@wordpress/i18n';\nimport clsx from 'clsx';\nimport { useCallback, useContext, useMemo } from 'react';\nimport { Legend, useChartLegendItems } from '../../components/legend';\nimport { BaseTooltip } from '../../components/tooltip';\nimport { useElementHeight, useInteractiveLegendData, usePrefersReducedMotion } from '../../hooks';\nimport { GlobalChartsProvider, useChartId, useChartRegistration, useGlobalChartsContext, GlobalChartsContext } from '../../providers';\nimport { attachSubComponents } from '../../utils';\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-semi-circle-chart.module.scss';\n\n/**\n * Parameters passed to the renderTooltip function for semi-circle charts.\n */\nimport { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from \"react/jsx-runtime\";\n/**\n * Default tooltip renderer for semi-circle pie charts.\n * Renders a BaseTooltip with the hovered segment's data.\n *\n * @param {PieSemiCircleChartRenderTooltipParams} params - The tooltip parameters containing the hovered data point\n * @return {ReactNode} The rendered tooltip content\n */\nconst renderDefaultPieSemiCircleTooltip = ({\n  tooltipData\n}) => {\n  return /*#__PURE__*/_jsx(BaseTooltip, {\n    data: tooltipData,\n    top: 0,\n    left: 0,\n    renderContainer: false\n  });\n};\nconst PAD_ANGLE = 0.03; // Padding between segments\n\n// Base props type with optional responsive properties\n\n// Composition API types\n\n/**\n * Validates the semi-circle 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 is greater than 0\n  const totalPercentage = data.reduce((sum, item) => sum + item.percentage, 0);\n  if (totalPercentage <= 0) {\n    return {\n      isValid: false,\n      message: 'Invalid percentage total: Must be greater than 0'\n    };\n  }\n  return {\n    isValid: true,\n    message: ''\n  };\n};\nconst PieSemiCircleChartInternal = ({\n  data,\n  chartId: providedChartId,\n  width = 400,\n  thickness = 0.4,\n  clockwise = true,\n  withTooltips = false,\n  showLegend = false,\n  legendOrientation = 'horizontal',\n  legendPosition = 'bottom',\n  legendAlignment = 'center',\n  legendMaxWidth,\n  legendTextOverflow = 'wrap',\n  legendItemClassName,\n  legendShape = 'circle',\n  legendValueDisplay = 'percentage',\n  legendInteractive = false,\n  label,\n  animation,\n  note,\n  className,\n  children,\n  tooltipOffsetX = 0,\n  tooltipOffsetY = -15,\n  renderTooltip = renderDefaultPieSemiCircleTooltip\n}) => {\n  const chartId = useChartId(providedChartId);\n  const [legendRef, legendHeight] = useElementHeight();\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 handleMouseMove = useCallback((event, arc) => {\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  }, [containerBounds.width, containerBounds.height, containerBounds.left, containerBounds.top, showTooltip, tooltipOffsetX, tooltipOffsetY]);\n  const handleMouseLeave = useCallback(() => {\n    hideTooltip();\n  }, [hideTooltip]);\n  const handleArcMouseMove = useCallback(arc => event => {\n    handleMouseMove(event, arc);\n  }, [handleMouseMove]);\n\n  // Validate data first to get validation result\n  const {\n    isValid,\n    message\n  } = validateData(data);\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  // Define accessors with useMemo to avoid changing dependencies\n  const accessors = useMemo(() => ({\n    value: d => d.value,\n    sort: (a, b) => b.value - a.value,\n    fill: d => getElementStyles({\n      data: d,\n      index: d.index\n    }).color\n  }), [getElementStyles]);\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\n  // Process children to extract compound components\n  const {\n    svgChildren,\n    htmlChildren,\n    otherChildren\n  } = useChartChildren(children, 'PieSemiCircleChart');\n\n  // Memoize metadata to prevent unnecessary re-registration\n  const chartMetadata = useMemo(() => ({\n    thickness,\n    clockwise\n  }), [thickness, clockwise]);\n\n  // Register chart with context only if data is valid\n  useChartRegistration({\n    chartId,\n    legendItems,\n    chartType: 'pie-semi-circle',\n    isDataValid: isValid,\n    metadata: chartMetadata\n  });\n  const prefersReducedMotion = usePrefersReducedMotion();\n  if (!isValid) {\n    return /*#__PURE__*/_jsx(\"div\", {\n      className: styles['pie-semi-circle-chart'],\n      children: /*#__PURE__*/_jsx(\"svg\", {\n        width: width,\n        height: width / 2,\n        children: /*#__PURE__*/_jsx(\"text\", {\n          x: \"50%\",\n          y: \"50%\",\n          textAnchor: \"middle\",\n          className: styles.error,\n          children: message\n        })\n      })\n    });\n  }\n\n  // Calculate chart dimensions\n  // TODO: we might want to accept height as a prop in the future, because the height of container might not always be enough.\n  const height = width / 2;\n  // The chart only takes the height minus the legend height.\n  const chartHeight = height - (showLegend && legendPosition === 'top' ? legendHeight : 0);\n  const radius = Math.min(width / 2, chartHeight);\n  const innerRadius = radius * (1 - thickness);\n\n  // Map data with 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\n  // Configure pie angles based on clockwise direction\n  const startAngle = clockwise ? -Math.PI / 2 : Math.PI / 2;\n  const endAngle = clockwise ? Math.PI / 2 : -Math.PI / 2;\n  return /*#__PURE__*/_jsx(SingleChartContext.Provider, {\n    value: {\n      chartId,\n      chartWidth: width,\n      chartHeight: radius\n    },\n    children: /*#__PURE__*/_jsxs(\"div\", {\n      ref: containerRef,\n      className: clsx('pie-semi-circle-chart', styles['pie-semi-circle-chart'], {\n        [styles['pie-semi-circle-chart--legend-top']]: showLegend && legendPosition === 'top'\n      }, className),\n      children: [/*#__PURE__*/_jsxs(\"svg\", {\n        width: width,\n        height: radius,\n        viewBox: `0 0 ${width} ${chartHeight}`,\n        children: [/*#__PURE__*/_jsx(\"defs\", {\n          children: /*#__PURE__*/_jsx(RadialWipeAnimation, {\n            id: `radial-wipe-${chartId}`,\n            radius: radius,\n            innerRadius: innerRadius,\n            startAngle: \"-180deg\",\n            wipePercentage: 50\n          })\n        }), /*#__PURE__*/_jsx(Group, {\n          top: chartHeight,\n          left: width / 2,\n          mask: animation && !prefersReducedMotion ? `url(#radial-wipe-${chartId})` : null,\n          children: allSegmentsHidden ? /*#__PURE__*/_jsx(\"text\", {\n            textAnchor: \"middle\",\n            y: -radius / 2,\n            fill: \"#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__*/_jsxs(_Fragment, {\n            children: [/*#__PURE__*/_jsx(Pie, {\n              data: dataWithIndex,\n              pieValue: accessors.value,\n              outerRadius: radius,\n              innerRadius: innerRadius,\n              cornerRadius: 3,\n              padAngle: PAD_ANGLE,\n              startAngle: startAngle,\n              endAngle: endAngle,\n              pieSort: accessors.sort,\n              children: pie => {\n                return pie.arcs.map(arc => /*#__PURE__*/_jsx(\"g\", {\n                  onMouseMove: withTooltips ? handleArcMouseMove(arc) : undefined,\n                  onMouseLeave: withTooltips ? handleMouseLeave : undefined,\n                  children: /*#__PURE__*/_jsx(\"path\", {\n                    d: pie.path(arc) || '',\n                    fill: accessors.fill(arc.data)\n                  })\n                }, arc.data.label));\n              }\n            }), /*#__PURE__*/_jsxs(Group, {\n              children: [/*#__PURE__*/_jsx(Text, {\n                textAnchor: \"middle\",\n                verticalAnchor: \"start\",\n                y: -40 // Position above the chart with space for note\n                ,\n                className: styles.label,\n                children: label\n              }), /*#__PURE__*/_jsx(Text, {\n                textAnchor: \"middle\",\n                verticalAnchor: \"start\",\n                y: -20 // Position between label and chart\n                ,\n                className: styles.note,\n                children: note\n              })]\n            }), !allSegmentsHidden && svgChildren]\n          })\n        })]\n      }), 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      }), 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        ref: legendRef,\n        chartId: chartId,\n        interactive: legendInteractive\n      }), htmlChildren, otherChildren]\n    })\n  });\n};\nconst PieSemiCircleChartWithProvider = 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(PieSemiCircleChartInternal, {\n      ...props\n    });\n  }\n\n  // Otherwise, create our own GlobalChartsProvider\n  return /*#__PURE__*/_jsx(GlobalChartsProvider, {\n    children: /*#__PURE__*/_jsx(PieSemiCircleChartInternal, {\n      ...props\n    })\n  });\n};\nPieSemiCircleChartWithProvider.displayName = 'PieSemiCircleChart';\n\n// Create PieSemiCircleChart with composition API\nconst PieSemiCircleChart = attachSubComponents(PieSemiCircleChartWithProvider, {\n  Legend: Legend,\n  SVG: ChartSVG,\n  HTML: ChartHTML\n});\n\n// Create responsive PieSemiCircleChart with composition API\nconst PieSemiCircleChartResponsive = attachSubComponents(withResponsive(PieSemiCircleChartWithProvider), {\n  Legend: Legend,\n  SVG: ChartSVG,\n  HTML: ChartHTML\n});\nexport { PieSemiCircleChartResponsive as default, PieSemiCircleChart as PieSemiCircleChartUnresponsive };","import 'css-chunk:src/charts/pie-semi-circle-chart/pie-semi-circle-chart.module.scss';export default {\n  \"pie-semi-circle-chart\": \"a8ccharts-8tyaQj\",\n  \"pie-semi-circle-chart--legend-top\": \"a8ccharts-M1lF7A\",\n  \"label\": \"a8ccharts-EKZS3j\",\n  \"note\": \"a8ccharts-v85A8-\"\n};"]}

package/dist/{chunk-C33AQZEC.js → chunk-TYIH5LMV.js}

@@ -7,7 +7,7 @@ var with_responsive_module_default = {
 };
 
 // src/charts/private/with-responsive/with-responsive.tsx
-import { jsx } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 var useResponsiveDimensions = ({
   resizeDebounceTime = 300,
   maxWidth = 1200,
@@ -58,31 +58,24 @@ function withResponsive(WrappedComponent) {
     const effectiveWidth = measuredWidth || size || width || 0;
     const effectiveHeight = measuredHeight || size || height || 0;
     const defaultHeight = hasAspectRatio ? "auto" : "100%";
-    return /* @__PURE__ */ jsx(
-      "div",
-      {
-        ref: parentRef,
-        "data-testid": "responsive-wrapper",
-        className: with_responsive_module_default.container,
-        style: {
-          width: size ?? width ?? "100%",
-          height: size ?? height ?? defaultHeight
-        },
-        children: /* @__PURE__ */ jsx(
-          WrappedComponent,
-          {
-            width: effectiveWidth,
-            height: effectiveHeight,
-            size: effectiveWidth,
-            ...chartProps
-          }
-        )
-      }
-    );
+    return /* @__PURE__ */ _jsx("div", {
+      ref: parentRef,
+      className: with_responsive_module_default.container,
+      style: {
+        width: size ?? width ?? "100%",
+        height: size ?? height ?? defaultHeight
+      },
+      children: /* @__PURE__ */ _jsx(WrappedComponent, {
+        width: effectiveWidth,
+        height: effectiveHeight,
+        size: effectiveWidth,
+        ...chartProps
+      })
+    });
   };
 }
 
 export {
   withResponsive
 };
-//# sourceMappingURL=chunk-C33AQZEC.js.map
+//# sourceMappingURL=chunk-TYIH5LMV.js.map

package/dist/chunk-TYIH5LMV.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/charts/private/with-responsive/with-responsive.tsx","../src/charts/private/with-responsive/with-responsive.module.scss"],"sourcesContent":["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 props if measurement returns 0\n    // (e.g., during initial render or in test environments without DOM measurement)\n    const effectiveWidth = measuredWidth || size || width || 0;\n    const effectiveHeight = measuredHeight || size || height || 0;\n    const defaultHeight = hasAspectRatio ? 'auto' : '100%';\n    return /*#__PURE__*/_jsx(\"div\", {\n      ref: parentRef,\n      className: styles.container,\n      style: {\n        width: size ?? width ?? '100%',\n        height: size ?? height ?? defaultHeight\n      },\n      children: /*#__PURE__*/_jsx(WrappedComponent, {\n        width: effectiveWidth,\n        height: effectiveHeight,\n        size: effectiveWidth,\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};"],"mappings":";AAAA,SAAS,qBAAqB;;;ACAoD,IAAO,iCAAQ;AAAA,EAC/F,aAAa;AACf;;;ADAA,SAAS,OAAO,YAAY;AAC5B,IAAM,0BAA0B,CAAC;AAAA,EAC/B,qBAAqB;AAAA,EACrB,WAAW;AAAA,EACX;AACF,MAAM;AACJ,QAAM;AAAA,IACJ;AAAA,IACA,OAAO;AAAA,IACP,QAAQ;AAAA,EACV,IAAI,cAAc;AAAA,IAChB,cAAc;AAAA,IACd,2BAA2B;AAAA,EAC7B,CAAC;AACD,QAAM,iBAAiB,cAAc,IAAI,KAAK,IAAI,aAAa,QAAQ,IAAI;AAC3E,QAAM,kBAAkB,gBAAgB,SAAY,iBAAiB,cAAc;AACnF,SAAO;AAAA,IACL;AAAA,IACA,OAAO;AAAA,IACP,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMR,gBAAgB,gBAAgB;AAAA,EAClC;AACF;AASO,SAAS,eAEhB,kBAAkB;AAChB,SAAO,SAAS,gBAAgB;AAAA,IAC9B,qBAAqB;AAAA,IACrB,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,GAAG;AACD,UAAM;AAAA,MACJ;AAAA,MACA,OAAO;AAAA,MACP,QAAQ;AAAA,MACR;AAAA,IACF,IAAI,wBAAwB;AAAA,MAC1B;AAAA,MACA;AAAA,MACA;AAAA,IACF,CAAC;AAID,UAAM,iBAAiB,iBAAiB,QAAQ,SAAS;AACzD,UAAM,kBAAkB,kBAAkB,QAAQ,UAAU;AAC5D,UAAM,gBAAgB,iBAAiB,SAAS;AAChD,WAAoB,qBAAK,OAAO;AAAA,MAC9B,KAAK;AAAA,MACL,WAAW,+BAAO;AAAA,MAClB,OAAO;AAAA,QACL,OAAO,QAAQ,SAAS;AAAA,QACxB,QAAQ,QAAQ,UAAU;AAAA,MAC5B;AAAA,MACA,UAAuB,qBAAK,kBAAkB;AAAA,QAC5C,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,MAAM;AAAA,QACN,GAAG;AAAA,MACL,CAAC;AAAA,IACH,CAAC;AAAA,EACH;AACF;","names":[]}

package/dist/chunk-X6GX4QUJ.js

@@ -0,0 +1,421 @@
+import {
+  Stack
+} from "./chunk-MEIVKY4K.js";
+import {
+  GlobalChartsContext,
+  GlobalChartsProvider,
+  useChartId,
+  useChartRegistration,
+  useGlobalChartsContext,
+  useGlobalChartsTheme,
+  usePrefersReducedMotion
+} from "./chunk-32ESS4MV.js";
+import {
+  formatPercentage,
+  hexToRgba
+} from "./chunk-TE63Y5PX.js";
+
+// src/charts/conversion-funnel-chart/conversion-funnel-chart.tsx
+import { useTooltip, useTooltipInPortal } from "@visx/tooltip";
+import clsx from "clsx";
+import { useRef, useMemo, useEffect, useCallback as useCallback2, useContext } from "react";
+
+// src/charts/conversion-funnel-chart/conversion-funnel-chart.module.scss
+var conversion_funnel_chart_module_default = {
+  "conversionFunnelChart": "a8ccharts-lK-YNK",
+  "loading": "a8ccharts-DbHKK5",
+  "main-metric": "a8ccharts-61WPYr",
+  "main-rate": "a8ccharts-RRRI6x",
+  "change-indicator": "a8ccharts-661iwx",
+  "funnel-container": "a8ccharts-Z7EGnW",
+  "funnel-step": "a8ccharts-VqFY0l",
+  "blurred": "a8ccharts-7dTRBs",
+  "step-header": "a8ccharts-2JsQiV",
+  "step-label": "a8ccharts-6OabC4",
+  "step-rate": "a8ccharts-9wSZ6n",
+  "bar-container": "a8ccharts-sSmCTi",
+  "disabled": "a8ccharts-PLWVAW",
+  "funnel-bar": "a8ccharts-EzczI-",
+  "selected": "a8ccharts-wNpZEu",
+  "funnel-bar--animated": "a8ccharts-68HQJl",
+  "stretch": "a8ccharts-CmtieZ",
+  "tooltip-wrapper": "a8ccharts-2TeoCn",
+  "tooltip-title": "a8ccharts-jkRitH",
+  "tooltip-content": "a8ccharts-8jgT-3",
+  "empty-state": "a8ccharts-Ml6MMr"
+};
+
+// src/charts/conversion-funnel-chart/private/use-funnel-selection.ts
+import { useCallback, useState } from "react";
+var useFunnelSelection = (hideTooltip) => {
+  const [clickedStep, setClickedStep] = useState(null);
+  const handleBarClick = useCallback(
+    (stepId) => {
+      if (clickedStep === stepId) {
+        setClickedStep(null);
+        hideTooltip?.();
+      } else {
+        setClickedStep(stepId);
+      }
+    },
+    [clickedStep, hideTooltip]
+  );
+  const handleBarKeyDown = useCallback(
+    (stepId, event) => {
+      if (event.key === "Enter" || event.key === " ") {
+        event.preventDefault();
+        if (clickedStep === stepId) {
+          setClickedStep(null);
+          hideTooltip?.();
+        } else {
+          setClickedStep(stepId);
+        }
+      } else if (event.key === "Escape") {
+        event.preventDefault();
+        setClickedStep(null);
+        hideTooltip?.();
+      }
+    },
+    [clickedStep, hideTooltip]
+  );
+  const clearSelection = useCallback(() => {
+    setClickedStep(null);
+    hideTooltip?.();
+  }, [hideTooltip]);
+  const getStepState = useCallback(
+    (stepId) => ({
+      isClicked: clickedStep === stepId,
+      isBlurred: clickedStep !== null && clickedStep !== stepId
+    }),
+    [clickedStep]
+  );
+  return {
+    clickedStep,
+    handleBarClick,
+    handleBarKeyDown,
+    clearSelection,
+    getStepState
+  };
+};
+
+// src/charts/conversion-funnel-chart/conversion-funnel-chart.tsx
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+var ConversionFunnelChartInternal = ({
+  mainRate,
+  changeIndicator,
+  steps,
+  loading = false,
+  animation,
+  className,
+  chartId: providedChartId,
+  height,
+  style,
+  renderStepLabel,
+  renderStepRate,
+  renderMainMetric,
+  renderTooltip
+}) => {
+  const chartId = useChartId(providedChartId);
+  const {
+    conversionFunnelChart: conversionFunnelChartSettings
+  } = useGlobalChartsTheme();
+  const {
+    getElementStyles
+  } = useGlobalChartsContext();
+  const chartRef = useRef(null);
+  const selectedBarRef = useRef(null);
+  const {
+    tooltipData,
+    tooltipLeft,
+    tooltipTop,
+    tooltipOpen,
+    showTooltip,
+    hideTooltip
+  } = useTooltip();
+  const {
+    handleBarClick,
+    handleBarKeyDown,
+    clearSelection,
+    getStepState
+  } = useFunnelSelection(hideTooltip);
+  const {
+    containerRef: portalContainerRef,
+    TooltipInPortal,
+    containerBounds
+  } = useTooltipInPortal({
+    // use TooltipWithBounds for boundary detection
+    detectBounds: true,
+    // when tooltip containers are scrolled, this will correctly update the Tooltip position
+    scroll: true
+  });
+  const clearSelectionAndRef = useCallback2(() => {
+    clearSelection();
+    selectedBarRef.current = null;
+    hideTooltip();
+  }, [clearSelection, hideTooltip]);
+  const showTooltipAt = useCallback2((step, x, y) => {
+    showTooltip({
+      tooltipData: step,
+      tooltipLeft: x,
+      tooltipTop: y - 10
+    });
+  }, [showTooltip]);
+  const getMouseTooltipCoords = useCallback2((event) => {
+    if (containerBounds.width === 0 || containerBounds.height === 0) {
+      return null;
+    }
+    return {
+      x: event.clientX - containerBounds.left,
+      y: event.clientY - containerBounds.top
+    };
+  }, [containerBounds.width, containerBounds.height, containerBounds.left, containerBounds.top]);
+  const getKeyboardTooltipCoords = useCallback2((event) => {
+    if (containerBounds.width === 0 || containerBounds.height === 0) {
+      return null;
+    }
+    const rect = event.currentTarget.getBoundingClientRect();
+    const x = rect.left + rect.width / 2 - containerBounds.left;
+    const y = rect.top - containerBounds.top;
+    return {
+      x,
+      y
+    };
+  }, [containerBounds.width, containerBounds.height, containerBounds.left, containerBounds.top]);
+  const handleStepInteraction = useCallback2((step, event, interactionType) => {
+    selectedBarRef.current = event.currentTarget;
+    const {
+      isClicked
+    } = getStepState(step.id);
+    if (isClicked) {
+      if (interactionType === "click") {
+        handleBarClick(step.id);
+      } else {
+        handleBarKeyDown(step.id, event);
+      }
+      return;
+    }
+    if (interactionType === "click") {
+      handleBarClick(step.id);
+      const coords = getMouseTooltipCoords(event);
+      if (coords) {
+        showTooltipAt(step, coords.x, coords.y);
+      }
+    } else {
+      handleBarKeyDown(step.id, event);
+      const coords = getKeyboardTooltipCoords(event);
+      if (coords) {
+        showTooltipAt(step, coords.x, coords.y);
+      }
+    }
+  }, [getStepState, handleBarClick, handleBarKeyDown, showTooltipAt, getMouseTooltipCoords, getKeyboardTooltipCoords]);
+  const stepHandlers = useMemo(() => {
+    const handlers = /* @__PURE__ */ new Map();
+    steps.forEach((step) => {
+      const onClick = (event) => {
+        event.stopPropagation();
+        handleStepInteraction(step, event, "click");
+      };
+      const onKeyDown = (event) => {
+        if (event.key === "Enter" || event.key === " ") {
+          handleStepInteraction(step, event, "keyboard");
+        } else {
+          selectedBarRef.current = event.currentTarget;
+          handleBarKeyDown(step.id, event);
+        }
+      };
+      handlers.set(step.id, {
+        onClick,
+        onKeyDown
+      });
+    });
+    return handlers;
+  }, [steps, handleStepInteraction, handleBarKeyDown]);
+  useEffect(() => {
+    const handleDocumentClick = (event) => {
+      if (selectedBarRef.current && !selectedBarRef.current.contains(event.target)) {
+        clearSelectionAndRef();
+      }
+    };
+    document.addEventListener("mousedown", handleDocumentClick);
+    return () => {
+      document.removeEventListener("mousedown", handleDocumentClick);
+    };
+  }, [clearSelectionAndRef]);
+  const resolvedHeight = height ?? style?.height ?? "100%";
+  const {
+    primaryColor,
+    backgroundColor,
+    positiveChangeColor,
+    negativeChangeColor
+  } = conversionFunnelChartSettings;
+  const {
+    color: barColor
+  } = getElementStyles ? getElementStyles({
+    index: 0,
+    overrideColor: primaryColor
+  }) : {
+    color: primaryColor || "#000000"
+  };
+  const isPositiveChange = changeIndicator?.startsWith("+");
+  const changeColor = isPositiveChange ? positiveChangeColor : negativeChangeColor;
+  const barBackgroundColor = backgroundColor || hexToRgba(barColor, 0.08) || "rgba(0, 0, 0, 0.08)";
+  const renderDefaultMainMetric = () => /* @__PURE__ */ _jsxs(_Fragment, {
+    children: [/* @__PURE__ */ _jsx("span", {
+      className: conversion_funnel_chart_module_default["main-rate"],
+      children: formatPercentage(mainRate)
+    }), changeIndicator && /* @__PURE__ */ _jsx("span", {
+      className: conversion_funnel_chart_module_default["change-indicator"],
+      style: {
+        color: changeColor
+      },
+      children: changeIndicator
+    })]
+  });
+  const renderDefaultTooltip = (step) => /* @__PURE__ */ _jsxs(_Fragment, {
+    children: [/* @__PURE__ */ _jsx("div", {
+      className: conversion_funnel_chart_module_default["tooltip-title"],
+      children: step.label
+    }), /* @__PURE__ */ _jsxs("div", {
+      className: conversion_funnel_chart_module_default["tooltip-content"],
+      children: [formatPercentage(step.rate), ` \u2022 ${step.count ?? "no"} items`]
+    })]
+  });
+  const isDataValid = Boolean(steps && steps.length > 0);
+  const chartMetadata = useMemo(() => ({
+    mainRate,
+    changeIndicator,
+    stepsCount: steps?.length || 0
+  }), [mainRate, changeIndicator, steps?.length]);
+  useChartRegistration({
+    chartId,
+    legendItems: [],
+    chartType: "conversion-funnel",
+    isDataValid,
+    metadata: chartMetadata
+  });
+  const prefersReducedMotion = usePrefersReducedMotion();
+  if (!isDataValid) {
+    return /* @__PURE__ */ _jsx(Stack, {
+      direction: "column",
+      className: clsx(conversion_funnel_chart_module_default.conversionFunnelChart, loading && conversion_funnel_chart_module_default.loading, className),
+      style: {
+        ...style,
+        height: resolvedHeight
+      },
+      children: /* @__PURE__ */ _jsx("div", {
+        className: conversion_funnel_chart_module_default["empty-state"],
+        children: loading ? "Loading..." : "No data available"
+      })
+    });
+  }
+  const maxRate = Math.max(...steps.map((step) => step.rate));
+  return /* @__PURE__ */ _jsxs(_Fragment, {
+    children: [/* @__PURE__ */ _jsxs(Stack, {
+      direction: "column",
+      ref: (node) => {
+        portalContainerRef(node);
+        chartRef.current = node;
+      },
+      className: clsx(conversion_funnel_chart_module_default.conversionFunnelChart, loading && conversion_funnel_chart_module_default.loading, className),
+      style: {
+        ...style,
+        height: resolvedHeight
+      },
+      children: [renderMainMetric ? renderMainMetric({
+        mainRate,
+        changeIndicator,
+        className: conversion_funnel_chart_module_default["main-metric"],
+        changeColor
+      }) : /* @__PURE__ */ _jsx("div", {
+        className: conversion_funnel_chart_module_default["main-metric"],
+        children: renderDefaultMainMetric()
+      }), /* @__PURE__ */ _jsx("div", {
+        className: conversion_funnel_chart_module_default["funnel-container"],
+        children: steps.map((step, index) => {
+          const barHeight = step.rate / maxRate * 100;
+          const {
+            isBlurred
+          } = getStepState(step.id);
+          return /* @__PURE__ */ _jsxs("div", {
+            className: clsx(conversion_funnel_chart_module_default["funnel-step"], isBlurred && conversion_funnel_chart_module_default.blurred),
+            children: [/* @__PURE__ */ _jsxs("div", {
+              className: conversion_funnel_chart_module_default["step-header"],
+              children: [renderStepLabel ? renderStepLabel({
+                step,
+                index,
+                className: conversion_funnel_chart_module_default["step-label"]
+              }) : /* @__PURE__ */ _jsx("span", {
+                className: conversion_funnel_chart_module_default["step-label"],
+                children: step.label
+              }), renderStepRate ? renderStepRate({
+                step,
+                index,
+                className: conversion_funnel_chart_module_default["step-rate"]
+              }) : /* @__PURE__ */ _jsx("span", {
+                className: conversion_funnel_chart_module_default["step-rate"],
+                children: formatPercentage(step.rate)
+              })]
+            }), /* @__PURE__ */ _jsx("div", {
+              className: clsx(conversion_funnel_chart_module_default["bar-container"], isBlurred && conversion_funnel_chart_module_default.disabled),
+              onClick: stepHandlers.get(step.id)?.onClick,
+              onKeyDown: stepHandlers.get(step.id)?.onKeyDown,
+              role: "button",
+              tabIndex: isBlurred ? -1 : 0,
+              "aria-label": step.label,
+              style: {
+                backgroundColor: barBackgroundColor
+              },
+              children: /* @__PURE__ */ _jsx("div", {
+                className: clsx(conversion_funnel_chart_module_default["funnel-bar"], {
+                  [conversion_funnel_chart_module_default["funnel-bar--animated"]]: animation && !loading && !prefersReducedMotion
+                }),
+                style: {
+                  height: `${barHeight}%`,
+                  backgroundColor: barColor
+                }
+              })
+            })]
+          }, step.id);
+        })
+      })]
+    }), tooltipOpen && tooltipData && (() => {
+      const tooltipContent = renderTooltip ? renderTooltip({
+        step: tooltipData,
+        index: steps.findIndex((s) => s.id === tooltipData.id),
+        top: tooltipTop,
+        left: tooltipLeft,
+        className: conversion_funnel_chart_module_default["tooltip-wrapper"]
+      }) : renderDefaultTooltip(tooltipData);
+      if (!tooltipContent) return null;
+      return /* @__PURE__ */ _jsx(
+        TooltipInPortal,
+        {
+          top: tooltipTop,
+          left: tooltipLeft,
+          className: conversion_funnel_chart_module_default["tooltip-wrapper"],
+          children: tooltipContent
+        },
+        Math.random()
+      );
+    })()]
+  });
+};
+var ConversionFunnelChartWithProvider = (props) => {
+  const existingContext = useContext(GlobalChartsContext);
+  if (existingContext) {
+    return /* @__PURE__ */ _jsx(ConversionFunnelChartInternal, {
+      ...props
+    });
+  }
+  return /* @__PURE__ */ _jsx(GlobalChartsProvider, {
+    children: /* @__PURE__ */ _jsx(ConversionFunnelChartInternal, {
+      ...props
+    })
+  });
+};
+ConversionFunnelChartWithProvider.displayName = "ConversionFunnelChart";
+
+export {
+  ConversionFunnelChartWithProvider
+};
+//# sourceMappingURL=chunk-X6GX4QUJ.js.map

package/dist/chunk-X6GX4QUJ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/charts/conversion-funnel-chart/conversion-funnel-chart.tsx","../src/charts/conversion-funnel-chart/conversion-funnel-chart.module.scss","../src/charts/conversion-funnel-chart/private/use-funnel-selection.ts"],"sourcesContent":["import { useTooltip, useTooltipInPortal } from '@visx/tooltip';\nimport { Stack } from '@wordpress/ui';\nimport clsx from 'clsx';\nimport { useRef, useMemo, useEffect, useCallback, useContext } from 'react';\nimport { usePrefersReducedMotion } from '../../hooks';\nimport { GlobalChartsProvider, GlobalChartsContext, useChartId, useChartRegistration, useGlobalChartsTheme, useGlobalChartsContext } from '../../providers';\nimport { formatPercentage, hexToRgba } from '../../utils';\nimport styles from './conversion-funnel-chart.module.scss';\nimport { useFunnelSelection } from './private';\nimport { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from \"react/jsx-runtime\";\n/**\n * Internal ConversionFunnelChart component with chart registration\n *\n * @param props                  - Component props\n * @param props.chartId          - Optional unique identifier for the chart\n * @param props.mainRate         - Main conversion rate to highlight\n * @param props.changeIndicator  - Change indicator (e.g., +2%, -1.5%)\n * @param props.steps            - Array of funnel steps\n * @param props.loading          - Whether the chart is in loading state\n * @param props.animation        - Whether to show chart animation on initial render or not\n * @param props.className        - Additional CSS class name\n * @param props.height           - Height of the chart container. Falls back to style.height if set, otherwise defaults to \"100%\".\n * @param props.style            - Custom styling\n * @param props.renderStepLabel  - Custom render function for step labels\n * @param props.renderStepRate   - Custom render function for step rates\n * @param props.renderMainMetric - Custom render function for the entire main metric section\n * @param props.renderTooltip    - Custom render function for tooltip content\n * @return JSX element representing the conversion funnel chart\n */\nconst ConversionFunnelChartInternal = ({\n  mainRate,\n  changeIndicator,\n  steps,\n  loading = false,\n  animation,\n  className,\n  chartId: providedChartId,\n  height,\n  style,\n  renderStepLabel,\n  renderStepRate,\n  renderMainMetric,\n  renderTooltip\n}) => {\n  const chartId = useChartId(providedChartId);\n  const {\n    conversionFunnelChart: conversionFunnelChartSettings\n  } = useGlobalChartsTheme();\n  const {\n    getElementStyles\n  } = useGlobalChartsContext();\n  const chartRef = useRef(null);\n  const selectedBarRef = useRef(null);\n\n  // Use @visx/tooltip hooks for tooltip positioning\n  const {\n    tooltipData,\n    tooltipLeft,\n    tooltipTop,\n    tooltipOpen,\n    showTooltip,\n    hideTooltip\n  } = useTooltip();\n\n  // Use custom hook for selection management\n  const {\n    handleBarClick,\n    handleBarKeyDown,\n    clearSelection,\n    getStepState\n  } = useFunnelSelection(hideTooltip);\n  const {\n    containerRef: portalContainerRef,\n    TooltipInPortal,\n    containerBounds\n  } = useTooltipInPortal({\n    // use TooltipWithBounds for boundary detection\n    detectBounds: true,\n    // when tooltip containers are scrolled, this will correctly update the Tooltip position\n    scroll: true\n  });\n\n  // Wrapper to clear selectedBarRef after clearing selection\n  const clearSelectionAndRef = useCallback(() => {\n    clearSelection();\n    selectedBarRef.current = null;\n    hideTooltip();\n  }, [clearSelection, hideTooltip]);\n\n  // Helper function to show tooltip at specific coordinates\n  const showTooltipAt = useCallback((step, x, y) => {\n    showTooltip({\n      tooltipData: step,\n      tooltipLeft: x,\n      tooltipTop: y - 10\n    });\n  }, [showTooltip]);\n\n  // Helper function to get tooltip coordinates for mouse events\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 correct page coordinates\n  // regardless of whether bounds are stale (e.g., after dashboard customization).\n  const getMouseTooltipCoords = useCallback(event => {\n    // Don't return coords until container bounds are measured\n    if (containerBounds.width === 0 || containerBounds.height === 0) {\n      return null;\n    }\n    return {\n      x: event.clientX - containerBounds.left,\n      y: event.clientY - containerBounds.top\n    };\n  }, [containerBounds.width, containerBounds.height, containerBounds.left, containerBounds.top]);\n\n  // Helper function to get tooltip coordinates for keyboard events\n  // Use fresh getBoundingClientRect() and subtract containerBounds to cancel out stale offset.\n  const getKeyboardTooltipCoords = useCallback(event => {\n    // Don't return coords until container bounds are measured\n    if (containerBounds.width === 0 || containerBounds.height === 0) {\n      return null;\n    }\n    const rect = event.currentTarget.getBoundingClientRect();\n    // Calculate center of element in viewport coordinates, then subtract containerBounds\n    const x = rect.left + rect.width / 2 - containerBounds.left;\n    const y = rect.top - containerBounds.top;\n    return {\n      x,\n      y\n    };\n  }, [containerBounds.width, containerBounds.height, containerBounds.left, containerBounds.top]);\n\n  // Helper function to handle step interaction (both click and keyboard)\n  const handleStepInteraction = useCallback((step, event, interactionType) => {\n    // Store reference to the interacted element\n    selectedBarRef.current = event.currentTarget;\n\n    // Check if deselecting the same step\n    const {\n      isClicked\n    } = getStepState(step.id);\n    if (isClicked) {\n      // Deselecting - clear selection (tooltip will be hidden by hook)\n      if (interactionType === 'click') {\n        handleBarClick(step.id);\n      } else {\n        handleBarKeyDown(step.id, event);\n      }\n      return;\n    }\n\n    // Selecting - handle selection and show tooltip\n    if (interactionType === 'click') {\n      handleBarClick(step.id);\n      const coords = getMouseTooltipCoords(event);\n      if (coords) {\n        showTooltipAt(step, coords.x, coords.y);\n      }\n    } else {\n      handleBarKeyDown(step.id, event);\n      const coords = getKeyboardTooltipCoords(event);\n      if (coords) {\n        showTooltipAt(step, coords.x, coords.y);\n      }\n    }\n  }, [getStepState, handleBarClick, handleBarKeyDown, showTooltipAt, getMouseTooltipCoords, getKeyboardTooltipCoords]);\n\n  // Create handler factories to avoid arrow functions in JSX\n  const stepHandlers = useMemo(() => {\n    const handlers = new Map();\n    steps.forEach(step => {\n      const onClick = event => {\n        event.stopPropagation();\n        handleStepInteraction(step, event, 'click');\n      };\n      const onKeyDown = event => {\n        if (event.key === 'Enter' || event.key === ' ') {\n          handleStepInteraction(step, event, 'keyboard');\n        } else {\n          // For other keys (like Escape), just handle the selection\n          selectedBarRef.current = event.currentTarget;\n          handleBarKeyDown(step.id, event);\n        }\n      };\n      handlers.set(step.id, {\n        onClick,\n        onKeyDown\n      });\n    });\n    return handlers;\n  }, [steps, handleStepInteraction, handleBarKeyDown]);\n\n  // Handle document-level click to clear selection when clicking outside selected bar\n  useEffect(() => {\n    const handleDocumentClick = event => {\n      // Only clear selection if there's an active selection and click is outside the selected bar\n      if (selectedBarRef.current && !selectedBarRef.current.contains(event.target)) {\n        clearSelectionAndRef();\n      }\n    };\n    document.addEventListener('mousedown', handleDocumentClick);\n    return () => {\n      document.removeEventListener('mousedown', handleDocumentClick);\n    };\n  }, [clearSelectionAndRef]);\n\n  // Resolve height: explicit height prop > style.height > default 100%\n  const resolvedHeight = height ?? style?.height ?? '100%';\n\n  // Get component settings from theme with fallbacks\n  const {\n    primaryColor,\n    backgroundColor,\n    positiveChangeColor,\n    negativeChangeColor\n  } = conversionFunnelChartSettings;\n\n  // Resolve bar color using getElementStyles with primaryColor as override\n  const {\n    color: barColor\n  } = getElementStyles ? getElementStyles({\n    index: 0,\n    overrideColor: primaryColor\n  }) : {\n    color: primaryColor || '#000000'\n  };\n\n  // Determine change indicator color\n  const isPositiveChange = changeIndicator?.startsWith('+');\n  const changeColor = isPositiveChange ? positiveChangeColor : negativeChangeColor;\n\n  // Create light background version of primary color if not set\n  const barBackgroundColor = backgroundColor || hexToRgba(barColor, 0.08) || 'rgba(0, 0, 0, 0.08)';\n\n  // Default main metric rendering function\n  const renderDefaultMainMetric = () => /*#__PURE__*/_jsxs(_Fragment, {\n    children: [/*#__PURE__*/_jsx(\"span\", {\n      className: styles['main-rate'],\n      children: formatPercentage(mainRate)\n    }), changeIndicator && /*#__PURE__*/_jsx(\"span\", {\n      className: styles['change-indicator'],\n      style: {\n        color: changeColor\n      },\n      children: changeIndicator\n    })]\n  });\n\n  // Default tooltip rendering function\n  const renderDefaultTooltip = step => /*#__PURE__*/_jsxs(_Fragment, {\n    children: [/*#__PURE__*/_jsx(\"div\", {\n      className: styles['tooltip-title'],\n      children: step.label\n    }), /*#__PURE__*/_jsxs(\"div\", {\n      className: styles['tooltip-content'],\n      children: [formatPercentage(step.rate), ` • ${step.count ?? 'no'} items`]\n    })]\n  });\n\n  // Validate data\n  const isDataValid = Boolean(steps && steps.length > 0);\n\n  // Memoize metadata to prevent unnecessary re-registration\n  const chartMetadata = useMemo(() => ({\n    mainRate,\n    changeIndicator,\n    stepsCount: steps?.length || 0\n  }), [mainRate, changeIndicator, steps?.length]);\n  useChartRegistration({\n    chartId,\n    legendItems: [],\n    chartType: 'conversion-funnel',\n    isDataValid,\n    metadata: chartMetadata\n  });\n  const prefersReducedMotion = usePrefersReducedMotion();\n\n  // Handle empty or undefined data\n  if (!isDataValid) {\n    return /*#__PURE__*/_jsx(Stack, {\n      direction: \"column\",\n      className: clsx(styles.conversionFunnelChart, loading && styles.loading, className),\n      style: {\n        ...style,\n        height: resolvedHeight\n      },\n      children: /*#__PURE__*/_jsx(\"div\", {\n        className: styles['empty-state'],\n        children: loading ? 'Loading...' : 'No data available'\n      })\n    });\n  }\n\n  // Calculate bar heights relative to the maximum (first step)\n  const maxRate = Math.max(...steps.map(step => step.rate));\n  return /*#__PURE__*/_jsxs(_Fragment, {\n    children: [/*#__PURE__*/_jsxs(Stack, {\n      direction: \"column\",\n      ref: node => {\n        // Set containerRef for @visx coordinate system\n        portalContainerRef(node);\n        chartRef.current = node;\n      },\n      className: clsx(styles.conversionFunnelChart, loading && styles.loading, className),\n      style: {\n        ...style,\n        height: resolvedHeight\n      },\n      children: [renderMainMetric ? renderMainMetric({\n        mainRate,\n        changeIndicator,\n        className: styles['main-metric'],\n        changeColor\n      }) : /*#__PURE__*/_jsx(\"div\", {\n        className: styles['main-metric'],\n        children: renderDefaultMainMetric()\n      }), /*#__PURE__*/_jsx(\"div\", {\n        className: styles['funnel-container'],\n        children: steps.map((step, index) => {\n          const barHeight = step.rate / maxRate * 100;\n          const {\n            isBlurred\n          } = getStepState(step.id);\n          return /*#__PURE__*/_jsxs(\"div\", {\n            className: clsx(styles['funnel-step'], isBlurred && styles.blurred),\n            children: [/*#__PURE__*/_jsxs(\"div\", {\n              className: styles['step-header'],\n              children: [renderStepLabel ? renderStepLabel({\n                step,\n                index,\n                className: styles['step-label']\n              }) : /*#__PURE__*/_jsx(\"span\", {\n                className: styles['step-label'],\n                children: step.label\n              }), renderStepRate ? renderStepRate({\n                step,\n                index,\n                className: styles['step-rate']\n              }) : /*#__PURE__*/_jsx(\"span\", {\n                className: styles['step-rate'],\n                children: formatPercentage(step.rate)\n              })]\n            }), /*#__PURE__*/_jsx(\"div\", {\n              className: clsx(styles['bar-container'], isBlurred && styles.disabled),\n              onClick: stepHandlers.get(step.id)?.onClick,\n              onKeyDown: stepHandlers.get(step.id)?.onKeyDown,\n              role: \"button\",\n              tabIndex: isBlurred ? -1 : 0,\n              \"aria-label\": step.label,\n              style: {\n                backgroundColor: barBackgroundColor\n              },\n              children: /*#__PURE__*/_jsx(\"div\", {\n                className: clsx(styles['funnel-bar'], {\n                  [styles['funnel-bar--animated']]: animation && !loading && !prefersReducedMotion\n                }),\n                style: {\n                  height: `${barHeight}%`,\n                  backgroundColor: barColor\n                }\n              })\n            })]\n          }, step.id);\n        })\n      })]\n    }), tooltipOpen && tooltipData && (() => {\n      const tooltipContent = renderTooltip ? renderTooltip({\n        step: tooltipData,\n        index: steps.findIndex(s => s.id === tooltipData.id),\n        top: tooltipTop,\n        left: tooltipLeft,\n        className: styles['tooltip-wrapper']\n      }) : renderDefaultTooltip(tooltipData);\n\n      // Don't render tooltip if renderTooltip returns falsy\n      if (!tooltipContent) return null;\n      return /*#__PURE__*/_jsx(TooltipInPortal\n      // set this to random so it correctly updates with parent bounds\n      , {\n        top: tooltipTop,\n        left: tooltipLeft,\n        className: styles['tooltip-wrapper'],\n        children: tooltipContent\n      }, Math.random());\n    })()]\n  });\n};\n\n/**\n * ConversionFunnelChart component with provider wrapper\n *\n * @param props - Component props\n * @return JSX element representing the conversion funnel chart\n */\nconst ConversionFunnelChartWithProvider = 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(ConversionFunnelChartInternal, {\n      ...props\n    });\n  }\n\n  // Otherwise, create our own GlobalChartsProvider\n  return /*#__PURE__*/_jsx(GlobalChartsProvider, {\n    children: /*#__PURE__*/_jsx(ConversionFunnelChartInternal, {\n      ...props\n    })\n  });\n};\nConversionFunnelChartWithProvider.displayName = 'ConversionFunnelChart';\nexport { ConversionFunnelChartWithProvider as default };","import 'css-chunk:src/charts/conversion-funnel-chart/conversion-funnel-chart.module.scss';export default {\n  \"conversionFunnelChart\": \"a8ccharts-lK-YNK\",\n  \"loading\": \"a8ccharts-DbHKK5\",\n  \"main-metric\": \"a8ccharts-61WPYr\",\n  \"main-rate\": \"a8ccharts-RRRI6x\",\n  \"change-indicator\": \"a8ccharts-661iwx\",\n  \"funnel-container\": \"a8ccharts-Z7EGnW\",\n  \"funnel-step\": \"a8ccharts-VqFY0l\",\n  \"blurred\": \"a8ccharts-7dTRBs\",\n  \"step-header\": \"a8ccharts-2JsQiV\",\n  \"step-label\": \"a8ccharts-6OabC4\",\n  \"step-rate\": \"a8ccharts-9wSZ6n\",\n  \"bar-container\": \"a8ccharts-sSmCTi\",\n  \"disabled\": \"a8ccharts-PLWVAW\",\n  \"funnel-bar\": \"a8ccharts-EzczI-\",\n  \"selected\": \"a8ccharts-wNpZEu\",\n  \"funnel-bar--animated\": \"a8ccharts-68HQJl\",\n  \"stretch\": \"a8ccharts-CmtieZ\",\n  \"tooltip-wrapper\": \"a8ccharts-2TeoCn\",\n  \"tooltip-title\": \"a8ccharts-jkRitH\",\n  \"tooltip-content\": \"a8ccharts-8jgT-3\",\n  \"empty-state\": \"a8ccharts-Ml6MMr\"\n};","import { useCallback, useState } from 'react';\n\n/**\n * Custom hook to manage funnel bar selection state and interactions\n * @param hideTooltip - Function to hide tooltip when selection is cleared\n * @return Object containing selection state and event handlers\n */\nexport const useFunnelSelection = ( hideTooltip?: () => void ) => {\n\tconst [ clickedStep, setClickedStep ] = useState< string | null >( null );\n\n\t// Handle bar click\n\tconst handleBarClick = useCallback(\n\t\t( stepId: string ) => {\n\t\t\tif ( clickedStep === stepId ) {\n\t\t\t\t// If clicking the same step, deselect it\n\t\t\t\tsetClickedStep( null );\n\t\t\t\thideTooltip?.();\n\t\t\t} else {\n\t\t\t\t// Otherwise, select this step\n\t\t\t\tsetClickedStep( stepId );\n\t\t\t}\n\t\t},\n\t\t[ clickedStep, hideTooltip ]\n\t);\n\n\t// Handle bar keydown\n\tconst handleBarKeyDown = useCallback(\n\t\t( stepId: string, event: React.KeyboardEvent ) => {\n\t\t\tif ( event.key === 'Enter' || event.key === ' ' ) {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tif ( clickedStep === stepId ) {\n\t\t\t\t\tsetClickedStep( null );\n\t\t\t\t\thideTooltip?.();\n\t\t\t\t} else {\n\t\t\t\t\tsetClickedStep( stepId );\n\t\t\t\t}\n\t\t\t} else if ( event.key === 'Escape' ) {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tsetClickedStep( null );\n\t\t\t\thideTooltip?.();\n\t\t\t}\n\t\t},\n\t\t[ clickedStep, hideTooltip ]\n\t);\n\n\t// Clear selection (for chart-level click)\n\tconst clearSelection = useCallback( () => {\n\t\tsetClickedStep( null );\n\t\thideTooltip?.();\n\t}, [ hideTooltip ] );\n\n\t// Get step state helpers\n\tconst getStepState = useCallback(\n\t\t( stepId: string ) => ( {\n\t\t\tisClicked: clickedStep === stepId,\n\t\t\tisBlurred: clickedStep !== null && clickedStep !== stepId,\n\t\t} ),\n\t\t[ clickedStep ]\n\t);\n\n\treturn {\n\t\tclickedStep,\n\t\thandleBarClick,\n\t\thandleBarKeyDown,\n\t\tclearSelection,\n\t\tgetStepState,\n\t};\n};\n"],"mappings":"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","names":["useCallback","useCallback"]}