@automattic/charts 0.56.3 → 0.56.4

package/dist/chunk-GRYNIPWH.cjs

@@ -1,385 +0,0 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }
-
-
-
-
-
-
-
-var _chunkTVV7ZI7Ccjs = require('./chunk-TVV7ZI7C.cjs');
-
-
-
-var _chunkZVGEDXDPcjs = require('./chunk-ZVGEDXDP.cjs');
-
-// src/charts/conversion-funnel-chart/conversion-funnel-chart.tsx
-var _tooltip = require('@visx/tooltip');
-var _clsx = require('clsx'); var _clsx2 = _interopRequireDefault(_clsx);
-var _react = require('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
-
-var useFunnelSelection = (hideTooltip) => {
-  const [clickedStep, setClickedStep] = _react.useState.call(void 0, null);
-  const handleBarClick = _react.useCallback.call(void 0, 
-    (stepId) => {
-      if (clickedStep === stepId) {
-        setClickedStep(null);
-        _optionalChain([hideTooltip, 'optionalCall', _ => _()]);
-      } else {
-        setClickedStep(stepId);
-      }
-    },
-    [clickedStep, hideTooltip]
-  );
-  const handleBarKeyDown = _react.useCallback.call(void 0, 
-    (stepId, event) => {
-      if (event.key === "Enter" || event.key === " ") {
-        event.preventDefault();
-        if (clickedStep === stepId) {
-          setClickedStep(null);
-          _optionalChain([hideTooltip, 'optionalCall', _2 => _2()]);
-        } else {
-          setClickedStep(stepId);
-        }
-      } else if (event.key === "Escape") {
-        event.preventDefault();
-        setClickedStep(null);
-        _optionalChain([hideTooltip, 'optionalCall', _3 => _3()]);
-      }
-    },
-    [clickedStep, hideTooltip]
-  );
-  const clearSelection = _react.useCallback.call(void 0, () => {
-    setClickedStep(null);
-    _optionalChain([hideTooltip, 'optionalCall', _4 => _4()]);
-  }, [hideTooltip]);
-  const getStepState = _react.useCallback.call(void 0, 
-    (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
-var _jsxruntime = require('react/jsx-runtime');
-var ConversionFunnelChartInternal = ({
-  mainRate,
-  changeIndicator,
-  steps,
-  loading = false,
-  animation,
-  className,
-  chartId: providedChartId,
-  style,
-  renderStepLabel,
-  renderStepRate,
-  renderMainMetric,
-  renderTooltip
-}) => {
-  const chartId = _chunkTVV7ZI7Ccjs.useChartId.call(void 0, providedChartId);
-  const { conversionFunnelChart: conversionFunnelChartSettings } = _chunkTVV7ZI7Ccjs.useGlobalChartsTheme.call(void 0, );
-  const { getElementStyles } = _chunkTVV7ZI7Ccjs.useGlobalChartsContext.call(void 0, );
-  const chartRef = _react.useRef.call(void 0, null);
-  const selectedBarRef = _react.useRef.call(void 0, null);
-  const { tooltipData, tooltipLeft, tooltipTop, tooltipOpen, showTooltip, hideTooltip } = _tooltip.useTooltip.call(void 0, );
-  const { handleBarClick, handleBarKeyDown, clearSelection, getStepState } = useFunnelSelection(hideTooltip);
-  const {
-    containerRef: portalContainerRef,
-    TooltipInPortal,
-    containerBounds
-  } = _tooltip.useTooltipInPortal.call(void 0, {
-    // use TooltipWithBounds for boundary detection
-    detectBounds: true,
-    // when tooltip containers are scrolled, this will correctly update the Tooltip position
-    scroll: true
-  });
-  const clearSelectionAndRef = _react.useCallback.call(void 0, () => {
-    clearSelection();
-    selectedBarRef.current = null;
-    hideTooltip();
-  }, [clearSelection, hideTooltip]);
-  const showTooltipAt = _react.useCallback.call(void 0, 
-    (step, x, y) => {
-      showTooltip({
-        tooltipData: step,
-        tooltipLeft: x,
-        tooltipTop: y - 10
-      });
-    },
-    [showTooltip]
-  );
-  const getMouseTooltipCoords = _react.useCallback.call(void 0, 
-    (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 = _react.useCallback.call(void 0, 
-    (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 = _react.useCallback.call(void 0, 
-    (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 = _react.useMemo.call(void 0, () => {
-    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]);
-  _react.useEffect.call(void 0, () => {
-    const handleDocumentClick = (event) => {
-      if (selectedBarRef.current && !selectedBarRef.current.contains(event.target)) {
-        clearSelectionAndRef();
-      }
-    };
-    document.addEventListener("mousedown", handleDocumentClick);
-    return () => {
-      document.removeEventListener("mousedown", handleDocumentClick);
-    };
-  }, [clearSelectionAndRef]);
-  const { primaryColor, backgroundColor, positiveChangeColor, negativeChangeColor } = conversionFunnelChartSettings;
-  const { color: barColor } = getElementStyles ? getElementStyles({
-    index: 0,
-    overrideColor: primaryColor
-  }) : { color: primaryColor || "#000000" };
-  const isPositiveChange = _optionalChain([changeIndicator, 'optionalAccess', _5 => _5.startsWith, 'call', _6 => _6("+")]);
-  const changeColor = isPositiveChange ? positiveChangeColor : negativeChangeColor;
-  const barBackgroundColor = backgroundColor || _chunkZVGEDXDPcjs.hexToRgba.call(void 0, barColor, 0.08) || "rgba(0, 0, 0, 0.08)";
-  const renderDefaultMainMetric = () => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: conversion_funnel_chart_module_default["main-rate"], children: _chunkZVGEDXDPcjs.formatPercentage.call(void 0, mainRate) }),
-    changeIndicator && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: conversion_funnel_chart_module_default["change-indicator"], style: { color: changeColor }, children: changeIndicator })
-  ] });
-  const renderDefaultTooltip = (step) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: conversion_funnel_chart_module_default["tooltip-title"], children: step.label }),
-    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: conversion_funnel_chart_module_default["tooltip-content"], children: [
-      _chunkZVGEDXDPcjs.formatPercentage.call(void 0, step.rate),
-      ` \u2022 ${_nullishCoalesce(step.count, () => ( "no"))} items`
-    ] })
-  ] });
-  const isDataValid = Boolean(steps && steps.length > 0);
-  const chartMetadata = _react.useMemo.call(void 0, 
-    () => ({
-      mainRate,
-      changeIndicator,
-      stepsCount: _optionalChain([steps, 'optionalAccess', _7 => _7.length]) || 0
-    }),
-    [mainRate, changeIndicator, _optionalChain([steps, 'optionalAccess', _8 => _8.length])]
-  );
-  _chunkTVV7ZI7Ccjs.useChartRegistration.call(void 0, {
-    chartId,
-    legendItems: [],
-    chartType: "conversion-funnel",
-    isDataValid,
-    metadata: chartMetadata
-  });
-  const prefersReducedMotion = _chunkTVV7ZI7Ccjs.usePrefersReducedMotion.call(void 0, );
-  if (!isDataValid) {
-    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      "div",
-      {
-        className: _clsx2.default.call(void 0, conversion_funnel_chart_module_default.conversionFunnelChart, loading && conversion_funnel_chart_module_default.loading, className),
-        style,
-        children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "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__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
-    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-      "div",
-      {
-        ref: (node) => {
-          portalContainerRef(node);
-          chartRef.current = node;
-        },
-        className: _clsx2.default.call(void 0, conversion_funnel_chart_module_default.conversionFunnelChart, loading && conversion_funnel_chart_module_default.loading, className),
-        style,
-        children: [
-          renderMainMetric ? renderMainMetric({
-            mainRate,
-            changeIndicator,
-            className: conversion_funnel_chart_module_default["main-metric"],
-            changeColor
-          }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: conversion_funnel_chart_module_default["main-metric"], children: renderDefaultMainMetric() }),
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "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__ */ _jsxruntime.jsxs.call(void 0, 
-              "div",
-              {
-                className: _clsx2.default.call(void 0, conversion_funnel_chart_module_default["funnel-step"], isBlurred && conversion_funnel_chart_module_default.blurred),
-                children: [
-                  /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: conversion_funnel_chart_module_default["step-header"], children: [
-                    renderStepLabel ? renderStepLabel({
-                      step,
-                      index,
-                      className: conversion_funnel_chart_module_default["step-label"]
-                    }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "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__ */ _jsxruntime.jsx.call(void 0, "span", { className: conversion_funnel_chart_module_default["step-rate"], children: _chunkZVGEDXDPcjs.formatPercentage.call(void 0, step.rate) })
-                  ] }),
-                  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                    "div",
-                    {
-                      className: _clsx2.default.call(void 0, conversion_funnel_chart_module_default["bar-container"], isBlurred && conversion_funnel_chart_module_default.disabled),
-                      onClick: _optionalChain([stepHandlers, 'access', _9 => _9.get, 'call', _10 => _10(step.id), 'optionalAccess', _11 => _11.onClick]),
-                      onKeyDown: _optionalChain([stepHandlers, 'access', _12 => _12.get, 'call', _13 => _13(step.id), 'optionalAccess', _14 => _14.onKeyDown]),
-                      role: "button",
-                      tabIndex: isBlurred ? -1 : 0,
-                      "aria-label": step.label,
-                      style: { backgroundColor: barBackgroundColor },
-                      children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                        "div",
-                        {
-                          className: _clsx2.default.call(void 0, 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__ */ _jsxruntime.jsx.call(void 0, 
-        TooltipInPortal,
-        {
-          top: tooltipTop,
-          left: tooltipLeft,
-          className: conversion_funnel_chart_module_default["tooltip-wrapper"],
-          children: tooltipContent
-        },
-        Math.random()
-      );
-    })()
-  ] });
-};
-var ConversionFunnelChartWithProvider = (props) => {
-  const existingContext = _react.useContext.call(void 0, _chunkTVV7ZI7Ccjs.GlobalChartsContext);
-  if (existingContext) {
-    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ConversionFunnelChartInternal, { ...props });
-  }
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkTVV7ZI7Ccjs.GlobalChartsProvider, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ConversionFunnelChartInternal, { ...props }) });
-};
-ConversionFunnelChartWithProvider.displayName = "ConversionFunnelChart";
-
-
-
-exports.ConversionFunnelChartWithProvider = ConversionFunnelChartWithProvider;
-//# sourceMappingURL=chunk-GRYNIPWH.cjs.map

package/dist/chunk-GRYNIPWH.cjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["/home/runner/work/jetpack/jetpack/projects/js-packages/charts/dist/chunk-GRYNIPWH.cjs","../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"],"names":["useCallback"],"mappings":"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","file":"/home/runner/work/jetpack/jetpack/projects/js-packages/charts/dist/chunk-GRYNIPWH.cjs","sourcesContent":[null,"import { useTooltip, useTooltipInPortal } from '@visx/tooltip';\nimport clsx from 'clsx';\nimport { type FC, useRef, useMemo, useEffect, useCallback, useContext } from 'react';\nimport { usePrefersReducedMotion } from '../../hooks';\nimport {\n\tGlobalChartsProvider,\n\tGlobalChartsContext,\n\tuseChartId,\n\tuseChartRegistration,\n\tuseGlobalChartsTheme,\n\tuseGlobalChartsContext,\n} from '../../providers';\nimport { formatPercentage, hexToRgba } from '../../utils';\nimport styles from './conversion-funnel-chart.module.scss';\nimport { useFunnelSelection } from './private';\nimport type { FunnelStep, ConversionFunnelChartProps } from './types';\n\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.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: FC< ConversionFunnelChartProps > = ( {\n\tmainRate,\n\tchangeIndicator,\n\tsteps,\n\tloading = false,\n\tanimation,\n\tclassName,\n\tchartId: providedChartId,\n\tstyle,\n\trenderStepLabel,\n\trenderStepRate,\n\trenderMainMetric,\n\trenderTooltip,\n} ) => {\n\tconst chartId = useChartId( providedChartId );\n\tconst { conversionFunnelChart: conversionFunnelChartSettings } = useGlobalChartsTheme();\n\tconst { getElementStyles } = useGlobalChartsContext();\n\tconst chartRef = useRef< HTMLDivElement >( null );\n\tconst selectedBarRef = useRef< HTMLDivElement | null >( null );\n\n\t// Use @visx/tooltip hooks for tooltip positioning\n\tconst { tooltipData, tooltipLeft, tooltipTop, tooltipOpen, showTooltip, hideTooltip } =\n\t\tuseTooltip();\n\n\t// Use custom hook for selection management\n\tconst { handleBarClick, handleBarKeyDown, clearSelection, getStepState } =\n\t\tuseFunnelSelection( hideTooltip );\n\tconst {\n\t\tcontainerRef: portalContainerRef,\n\t\tTooltipInPortal,\n\t\tcontainerBounds,\n\t} = useTooltipInPortal( {\n\t\t// use TooltipWithBounds for boundary detection\n\t\tdetectBounds: true,\n\t\t// when tooltip containers are scrolled, this will correctly update the Tooltip position\n\t\tscroll: true,\n\t} );\n\n\t// Wrapper to clear selectedBarRef after clearing selection\n\tconst clearSelectionAndRef = useCallback( () => {\n\t\tclearSelection();\n\t\tselectedBarRef.current = null;\n\t\thideTooltip();\n\t}, [ clearSelection, hideTooltip ] );\n\n\t// Helper function to show tooltip at specific coordinates\n\tconst showTooltipAt = useCallback(\n\t\t( step: FunnelStep, x: number, y: number ) => {\n\t\t\tshowTooltip( {\n\t\t\t\ttooltipData: step,\n\t\t\t\ttooltipLeft: x,\n\t\t\t\ttooltipTop: y - 10,\n\t\t\t} );\n\t\t},\n\t\t[ showTooltip ]\n\t);\n\n\t// Helper function to get tooltip coordinates for mouse events\n\t// Use clientX/Y and subtract containerBounds to cancel out any stale offset.\n\t// TooltipInPortal calculates: tooltipLeft + containerBounds.left + scrollX\n\t// By passing (clientX - containerBounds.left), we get correct page coordinates\n\t// regardless of whether bounds are stale (e.g., after dashboard customization).\n\tconst getMouseTooltipCoords = useCallback(\n\t\t( event: React.MouseEvent ) => {\n\t\t\t// Don't return coords until container bounds are measured\n\t\t\tif ( containerBounds.width === 0 || containerBounds.height === 0 ) {\n\t\t\t\treturn null;\n\t\t\t}\n\n\t\t\treturn {\n\t\t\t\tx: event.clientX - containerBounds.left,\n\t\t\t\ty: event.clientY - containerBounds.top,\n\t\t\t};\n\t\t},\n\t\t[ containerBounds.width, containerBounds.height, containerBounds.left, containerBounds.top ]\n\t);\n\n\t// Helper function to get tooltip coordinates for keyboard events\n\t// Use fresh getBoundingClientRect() and subtract containerBounds to cancel out stale offset.\n\tconst getKeyboardTooltipCoords = useCallback(\n\t\t( event: React.KeyboardEvent ) => {\n\t\t\t// Don't return coords until container bounds are measured\n\t\t\tif ( containerBounds.width === 0 || containerBounds.height === 0 ) {\n\t\t\t\treturn null;\n\t\t\t}\n\n\t\t\tconst rect = event.currentTarget.getBoundingClientRect();\n\t\t\t// Calculate center of element in viewport coordinates, then subtract containerBounds\n\t\t\tconst x = rect.left + rect.width / 2 - containerBounds.left;\n\t\t\tconst y = rect.top - containerBounds.top;\n\t\t\treturn { x, y };\n\t\t},\n\t\t[ containerBounds.width, containerBounds.height, containerBounds.left, containerBounds.top ]\n\t);\n\n\t// Helper function to handle step interaction (both click and keyboard)\n\tconst handleStepInteraction = useCallback(\n\t\t(\n\t\t\tstep: FunnelStep,\n\t\t\tevent: React.MouseEvent | React.KeyboardEvent,\n\t\t\tinteractionType: 'click' | 'keyboard'\n\t\t) => {\n\t\t\t// Store reference to the interacted element\n\t\t\tselectedBarRef.current = event.currentTarget as HTMLDivElement;\n\n\t\t\t// Check if deselecting the same step\n\t\t\tconst { isClicked } = getStepState( step.id );\n\t\t\tif ( isClicked ) {\n\t\t\t\t// Deselecting - clear selection (tooltip will be hidden by hook)\n\t\t\t\tif ( interactionType === 'click' ) {\n\t\t\t\t\thandleBarClick( step.id );\n\t\t\t\t} else {\n\t\t\t\t\thandleBarKeyDown( step.id, event as React.KeyboardEvent );\n\t\t\t\t}\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\t// Selecting - handle selection and show tooltip\n\t\t\tif ( interactionType === 'click' ) {\n\t\t\t\thandleBarClick( step.id );\n\t\t\t\tconst coords = getMouseTooltipCoords( event as React.MouseEvent );\n\t\t\t\tif ( coords ) {\n\t\t\t\t\tshowTooltipAt( step, coords.x, coords.y );\n\t\t\t\t}\n\t\t\t} else {\n\t\t\t\thandleBarKeyDown( step.id, event as React.KeyboardEvent );\n\t\t\t\tconst coords = getKeyboardTooltipCoords( event as React.KeyboardEvent );\n\t\t\t\tif ( coords ) {\n\t\t\t\t\tshowTooltipAt( step, coords.x, coords.y );\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\t\t[\n\t\t\tgetStepState,\n\t\t\thandleBarClick,\n\t\t\thandleBarKeyDown,\n\t\t\tshowTooltipAt,\n\t\t\tgetMouseTooltipCoords,\n\t\t\tgetKeyboardTooltipCoords,\n\t\t]\n\t);\n\n\t// Create handler factories to avoid arrow functions in JSX\n\tconst stepHandlers = useMemo( () => {\n\t\tconst handlers = new Map<\n\t\t\tstring,\n\t\t\t{\n\t\t\t\tonClick: ( event: React.MouseEvent ) => void;\n\t\t\t\tonKeyDown: ( event: React.KeyboardEvent ) => void;\n\t\t\t}\n\t\t>();\n\n\t\tsteps.forEach( step => {\n\t\t\tconst onClick = ( event: React.MouseEvent ) => {\n\t\t\t\tevent.stopPropagation();\n\t\t\t\thandleStepInteraction( step, event, 'click' );\n\t\t\t};\n\n\t\t\tconst onKeyDown = ( event: React.KeyboardEvent ) => {\n\t\t\t\tif ( event.key === 'Enter' || event.key === ' ' ) {\n\t\t\t\t\thandleStepInteraction( step, event, 'keyboard' );\n\t\t\t\t} else {\n\t\t\t\t\t// For other keys (like Escape), just handle the selection\n\t\t\t\t\tselectedBarRef.current = event.currentTarget as HTMLDivElement;\n\t\t\t\t\thandleBarKeyDown( step.id, event );\n\t\t\t\t}\n\t\t\t};\n\n\t\t\thandlers.set( step.id, { onClick, onKeyDown } );\n\t\t} );\n\n\t\treturn handlers;\n\t}, [ steps, handleStepInteraction, handleBarKeyDown ] );\n\n\t// Handle document-level click to clear selection when clicking outside selected bar\n\tuseEffect( () => {\n\t\tconst handleDocumentClick = ( event: MouseEvent ) => {\n\t\t\t// Only clear selection if there's an active selection and click is outside the selected bar\n\t\t\tif ( selectedBarRef.current && ! selectedBarRef.current.contains( event.target as Node ) ) {\n\t\t\t\tclearSelectionAndRef();\n\t\t\t}\n\t\t};\n\n\t\tdocument.addEventListener( 'mousedown', handleDocumentClick );\n\n\t\treturn () => {\n\t\t\tdocument.removeEventListener( 'mousedown', handleDocumentClick );\n\t\t};\n\t}, [ clearSelectionAndRef ] );\n\n\t// Get component settings from theme with fallbacks\n\tconst { primaryColor, backgroundColor, positiveChangeColor, negativeChangeColor } =\n\t\tconversionFunnelChartSettings;\n\n\t// Resolve bar color using getElementStyles with primaryColor as override\n\tconst { color: barColor } = getElementStyles\n\t\t? getElementStyles( {\n\t\t\t\tindex: 0,\n\t\t\t\toverrideColor: primaryColor,\n\t\t  } )\n\t\t: { color: primaryColor || '#000000' };\n\n\t// Determine change indicator color\n\tconst isPositiveChange = changeIndicator?.startsWith( '+' );\n\tconst changeColor = isPositiveChange ? positiveChangeColor : negativeChangeColor;\n\n\t// Create light background version of primary color if not set\n\tconst barBackgroundColor =\n\t\tbackgroundColor || hexToRgba( barColor, 0.08 ) || 'rgba(0, 0, 0, 0.08)';\n\n\t// Default main metric rendering function\n\tconst renderDefaultMainMetric = () => (\n\t\t<>\n\t\t\t<span className={ styles[ 'main-rate' ] }>{ formatPercentage( mainRate ) }</span>\n\t\t\t{ changeIndicator && (\n\t\t\t\t<span className={ styles[ 'change-indicator' ] } style={ { color: changeColor } }>\n\t\t\t\t\t{ changeIndicator }\n\t\t\t\t</span>\n\t\t\t) }\n\t\t</>\n\t);\n\n\t// Default tooltip rendering function\n\tconst renderDefaultTooltip = ( step: FunnelStep ) => (\n\t\t<>\n\t\t\t<div className={ styles[ 'tooltip-title' ] }>{ step.label }</div>\n\t\t\t<div className={ styles[ 'tooltip-content' ] }>\n\t\t\t\t{ formatPercentage( step.rate ) }\n\t\t\t\t{ ` • ${ step.count ?? 'no' } items` }\n\t\t\t</div>\n\t\t</>\n\t);\n\n\t// Validate data\n\tconst isDataValid = Boolean( steps && steps.length > 0 );\n\n\t// Memoize metadata to prevent unnecessary re-registration\n\tconst chartMetadata = useMemo(\n\t\t() => ( {\n\t\t\tmainRate,\n\t\t\tchangeIndicator,\n\t\t\tstepsCount: steps?.length || 0,\n\t\t} ),\n\t\t[ mainRate, changeIndicator, steps?.length ]\n\t);\n\n\tuseChartRegistration( {\n\t\tchartId,\n\t\tlegendItems: [],\n\t\tchartType: 'conversion-funnel',\n\t\tisDataValid,\n\t\tmetadata: chartMetadata,\n\t} );\n\n\tconst prefersReducedMotion = usePrefersReducedMotion();\n\n\t// Handle empty or undefined data\n\tif ( ! isDataValid ) {\n\t\treturn (\n\t\t\t<div\n\t\t\t\tclassName={ clsx( styles.conversionFunnelChart, loading && styles.loading, className ) }\n\t\t\t\tstyle={ style }\n\t\t\t>\n\t\t\t\t<div className={ styles[ 'empty-state' ] }>\n\t\t\t\t\t{ loading ? 'Loading...' : 'No data available' }\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t);\n\t}\n\n\t// Calculate bar heights relative to the maximum (first step)\n\tconst maxRate = Math.max( ...steps.map( step => step.rate ) );\n\n\treturn (\n\t\t<>\n\t\t\t<div\n\t\t\t\tref={ node => {\n\t\t\t\t\t// Set containerRef for @visx coordinate system\n\t\t\t\t\tportalContainerRef( node );\n\t\t\t\t\tchartRef.current = node;\n\t\t\t\t} }\n\t\t\t\tclassName={ clsx( styles.conversionFunnelChart, loading && styles.loading, className ) }\n\t\t\t\tstyle={ style }\n\t\t\t>\n\t\t\t\t{ /* Main Metric */ }\n\t\t\t\t{ renderMainMetric ? (\n\t\t\t\t\trenderMainMetric( {\n\t\t\t\t\t\tmainRate,\n\t\t\t\t\t\tchangeIndicator,\n\t\t\t\t\t\tclassName: styles[ 'main-metric' ],\n\t\t\t\t\t\tchangeColor,\n\t\t\t\t\t} )\n\t\t\t\t) : (\n\t\t\t\t\t<div className={ styles[ 'main-metric' ] }>{ renderDefaultMainMetric() }</div>\n\t\t\t\t) }\n\n\t\t\t\t{ /* Funnel Steps */ }\n\t\t\t\t<div className={ styles[ 'funnel-container' ] }>\n\t\t\t\t\t{ steps.map( ( step, index ) => {\n\t\t\t\t\t\tconst barHeight = ( step.rate / maxRate ) * 100;\n\t\t\t\t\t\tconst { isBlurred } = getStepState( step.id );\n\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tkey={ step.id }\n\t\t\t\t\t\t\t\tclassName={ clsx( styles[ 'funnel-step' ], isBlurred && styles.blurred ) }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ /* Step Label and Rate */ }\n\t\t\t\t\t\t\t\t<div className={ styles[ 'step-header' ] }>\n\t\t\t\t\t\t\t\t\t{ renderStepLabel ? (\n\t\t\t\t\t\t\t\t\t\trenderStepLabel( {\n\t\t\t\t\t\t\t\t\t\t\tstep,\n\t\t\t\t\t\t\t\t\t\t\tindex,\n\t\t\t\t\t\t\t\t\t\t\tclassName: styles[ 'step-label' ],\n\t\t\t\t\t\t\t\t\t\t} )\n\t\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t\t<span className={ styles[ 'step-label' ] }>{ step.label }</span>\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t{ renderStepRate ? (\n\t\t\t\t\t\t\t\t\t\trenderStepRate( {\n\t\t\t\t\t\t\t\t\t\t\tstep,\n\t\t\t\t\t\t\t\t\t\t\tindex,\n\t\t\t\t\t\t\t\t\t\t\tclassName: styles[ 'step-rate' ],\n\t\t\t\t\t\t\t\t\t\t} )\n\t\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t\t<span className={ styles[ 'step-rate' ] }>\n\t\t\t\t\t\t\t\t\t\t\t{ formatPercentage( step.rate ) }\n\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t\t\t{ /* Funnel Bar */ }\n\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\tclassName={ clsx( styles[ 'bar-container' ], isBlurred && styles.disabled ) }\n\t\t\t\t\t\t\t\t\tonClick={ stepHandlers.get( step.id )?.onClick }\n\t\t\t\t\t\t\t\t\tonKeyDown={ stepHandlers.get( step.id )?.onKeyDown }\n\t\t\t\t\t\t\t\t\trole=\"button\"\n\t\t\t\t\t\t\t\t\ttabIndex={ isBlurred ? -1 : 0 }\n\t\t\t\t\t\t\t\t\taria-label={ step.label }\n\t\t\t\t\t\t\t\t\tstyle={ { backgroundColor: barBackgroundColor } }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\tclassName={ clsx( styles[ 'funnel-bar' ], {\n\t\t\t\t\t\t\t\t\t\t\t[ styles[ 'funnel-bar--animated' ] ]:\n\t\t\t\t\t\t\t\t\t\t\t\tanimation && ! loading && ! prefersReducedMotion,\n\t\t\t\t\t\t\t\t\t\t} ) }\n\t\t\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\t\t\theight: `${ barHeight }%`,\n\t\t\t\t\t\t\t\t\t\t\tbackgroundColor: barColor,\n\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t);\n\t\t\t\t\t} ) }\n\t\t\t\t</div>\n\t\t\t</div>\n\n\t\t\t{ /* Tooltip Portal */ }\n\t\t\t{ tooltipOpen &&\n\t\t\t\ttooltipData &&\n\t\t\t\t( () => {\n\t\t\t\t\tconst tooltipContent = renderTooltip\n\t\t\t\t\t\t? renderTooltip( {\n\t\t\t\t\t\t\t\tstep: tooltipData as FunnelStep,\n\t\t\t\t\t\t\t\tindex: steps.findIndex( s => s.id === ( tooltipData as FunnelStep ).id ),\n\t\t\t\t\t\t\t\ttop: tooltipTop,\n\t\t\t\t\t\t\t\tleft: tooltipLeft,\n\t\t\t\t\t\t\t\tclassName: styles[ 'tooltip-wrapper' ],\n\t\t\t\t\t\t  } )\n\t\t\t\t\t\t: renderDefaultTooltip( tooltipData as FunnelStep );\n\n\t\t\t\t\t// Don't render tooltip if renderTooltip returns falsy\n\t\t\t\t\tif ( ! tooltipContent ) return null;\n\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<TooltipInPortal\n\t\t\t\t\t\t\t// set this to random so it correctly updates with parent bounds\n\t\t\t\t\t\t\tkey={ Math.random() }\n\t\t\t\t\t\t\ttop={ tooltipTop }\n\t\t\t\t\t\t\tleft={ tooltipLeft }\n\t\t\t\t\t\t\tclassName={ styles[ 'tooltip-wrapper' ] }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ tooltipContent }\n\t\t\t\t\t\t</TooltipInPortal>\n\t\t\t\t\t);\n\t\t\t\t} )() }\n\t\t</>\n\t);\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: FC< ConversionFunnelChartProps > = props => {\n\tconst existingContext = useContext( GlobalChartsContext );\n\n\t// If we're already in a GlobalChartsProvider context, don't create a new one\n\tif ( existingContext ) {\n\t\treturn <ConversionFunnelChartInternal { ...props } />;\n\t}\n\n\t// Otherwise, create our own GlobalChartsProvider\n\treturn (\n\t\t<GlobalChartsProvider>\n\t\t\t<ConversionFunnelChartInternal { ...props } />\n\t\t</GlobalChartsProvider>\n\t);\n};\n\nConversionFunnelChartWithProvider.displayName = 'ConversionFunnelChart';\n\nexport { ConversionFunnelChartWithProvider as default };\n","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"]}