@automattic/charts 0.56.2 → 0.56.4

package/dist/chunk-KMYJJTSR.cjs

@@ -0,0 +1,421 @@
+"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 _chunkSH32YSZOcjs = require('./chunk-SH32YSZO.cjs');
+
+
+
+
+
+
+
+
+var _chunkLSV7F26Bcjs = require('./chunk-LSV7F26B.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,
+  height,
+  style,
+  renderStepLabel,
+  renderStepRate,
+  renderMainMetric,
+  renderTooltip
+}) => {
+  const chartId = _chunkLSV7F26Bcjs.useChartId.call(void 0, providedChartId);
+  const {
+    conversionFunnelChart: conversionFunnelChartSettings
+  } = _chunkLSV7F26Bcjs.useGlobalChartsTheme.call(void 0, );
+  const {
+    getElementStyles
+  } = _chunkLSV7F26Bcjs.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 resolvedHeight = _nullishCoalesce(_nullishCoalesce(height, () => ( _optionalChain([style, 'optionalAccess', _5 => _5.height]))), () => ( "100%"));
+  const {
+    primaryColor,
+    backgroundColor,
+    positiveChangeColor,
+    negativeChangeColor
+  } = conversionFunnelChartSettings;
+  const {
+    color: barColor
+  } = getElementStyles ? getElementStyles({
+    index: 0,
+    overrideColor: primaryColor
+  }) : {
+    color: primaryColor || "#000000"
+  };
+  const isPositiveChange = _optionalChain([changeIndicator, 'optionalAccess', _6 => _6.startsWith, 'call', _7 => _7("+")]);
+  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', _8 => _8.length]) || 0
+  }), [mainRate, changeIndicator, _optionalChain([steps, 'optionalAccess', _9 => _9.length])]);
+  _chunkLSV7F26Bcjs.useChartRegistration.call(void 0, {
+    chartId,
+    legendItems: [],
+    chartType: "conversion-funnel",
+    isDataValid,
+    metadata: chartMetadata
+  });
+  const prefersReducedMotion = _chunkLSV7F26Bcjs.usePrefersReducedMotion.call(void 0, );
+  if (!isDataValid) {
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkSH32YSZOcjs.Stack, {
+      direction: "column",
+      className: _clsx2.default.call(void 0, conversion_funnel_chart_module_default.conversionFunnelChart, loading && conversion_funnel_chart_module_default.loading, className),
+      style: {
+        ...style,
+        height: resolvedHeight
+      },
+      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, _chunkSH32YSZOcjs.Stack, {
+      direction: "column",
+      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: {
+        ...style,
+        height: resolvedHeight
+      },
+      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', _10 => _10.get, 'call', _11 => _11(step.id), 'optionalAccess', _12 => _12.onClick]),
+              onKeyDown: _optionalChain([stepHandlers, 'access', _13 => _13.get, 'call', _14 => _14(step.id), 'optionalAccess', _15 => _15.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, _chunkLSV7F26Bcjs.GlobalChartsContext);
+  if (existingContext) {
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ConversionFunnelChartInternal, {
+      ...props
+    });
+  }
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkLSV7F26Bcjs.GlobalChartsProvider, {
+    children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ConversionFunnelChartInternal, {
+      ...props
+    })
+  });
+};
+ConversionFunnelChartWithProvider.displayName = "ConversionFunnelChart";
+
+
+
+exports.ConversionFunnelChartWithProvider = ConversionFunnelChartWithProvider;
+//# sourceMappingURL=chunk-KMYJJTSR.cjs.map

package/dist/chunk-KMYJJTSR.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["/home/runner/work/jetpack/jetpack/projects/js-packages/charts/dist/chunk-KMYJJTSR.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-KMYJJTSR.cjs","sourcesContent":[null,"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"]}

package/dist/{chunk-A3AEEGKR.js → chunk-KXRWNFQJ.js}

@@ -1,5 +1,5 @@
 // src/charts/private/radial-wipe-animation/radial-wipe-animation.tsx
-import { jsx } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 function RadialWipeAnimation({
   id,
   radius,
@@ -15,9 +15,9 @@ function RadialWipeAnimation({
   const isValidWipePercentage = 0 < wipePercentage && wipePercentage <= 100;
   const animationDuration = `${// If wipePercentage is invalid, set animation duration to 0 to disable animation.
   isValidWipePercentage ? durationMs * (100 / wipePercentage) : 0}ms`;
-  return /* @__PURE__ */ jsx("mask", { id, children: /* @__PURE__ */ jsx(
-    "circle",
-    {
+  return /* @__PURE__ */ _jsx("mask", {
+    id,
+    children: /* @__PURE__ */ _jsx("circle", {
       cx: 0,
       cy: 0,
       r: radius,
@@ -27,26 +27,25 @@ function RadialWipeAnimation({
       strokeWidth,
       strokeDasharray: "100, 1000",
       strokeDashoffset: "0",
-      style: { transform: `rotate(${startAngle}) scaleY(${scaleY})` },
-      children: /* @__PURE__ */ jsx(
-        "animate",
-        {
-          attributeName: "stroke-dashoffset",
-          from: "0",
-          to: "100.1",
-          dur: animationDuration,
-          fill: "freeze",
-          calcMode: "spline",
-          keySplines: "0.42 0 0.58 1;0 0 1 1",
-          keyTimes: `0;${wipePercentage / 100};1`
-        }
-      )
-    }
-  ) });
+      style: {
+        transform: `rotate(${startAngle}) scaleY(${scaleY})`
+      },
+      children: /* @__PURE__ */ _jsx("animate", {
+        attributeName: "stroke-dashoffset",
+        from: "0",
+        to: "100.1",
+        dur: animationDuration,
+        fill: "freeze",
+        calcMode: "spline",
+        keySplines: "0.42 0 0.58 1;0 0 1 1",
+        keyTimes: `0;${wipePercentage / 100};1`
+      })
+    })
+  });
 }
 var radial_wipe_animation_default = RadialWipeAnimation;
 
 export {
   radial_wipe_animation_default
 };
-//# sourceMappingURL=chunk-A3AEEGKR.js.map
+//# sourceMappingURL=chunk-KXRWNFQJ.js.map

package/dist/chunk-KXRWNFQJ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/charts/private/radial-wipe-animation/radial-wipe-animation.tsx"],"sourcesContent":["import { jsx as _jsx } from \"react/jsx-runtime\";\n/**\n * This animation uses the SVG self-drawing technique (source: https://www.joshwcomeau.com/svg/friendly-introduction-to-svg/),\n * leveraging stroke-dasharray and stroke-dashoffset properties to create the effect.\n *\n * Here, we reverse the animation to \"un-draw\" the circle for the revealing / radial wipe effect:\n * - Initially, the entire circle is drawn with a white mask.\n * - The circle's border (stroke) is drawn with a black stroke, wide enough to cover the circle.\n * - The stroke is then \"un-drawn,\" creating the wipe animation.\n * - A white mask makes the area visible, while a black mask makes the area invisible.\n */\n\n/**\n * RadialWipeAnimationProps - SVG mask props that requires a radial wipe animation effect.\n *\n * @param {object}                            props                         - The properties object.\n * @param {string}                            props.id                      - The unique ID for the mask.\n * @param {number}                            props.radius                  - The outer radius of the radial wipe.\n * @param {number}                            [props.innerRadius=0]         - The inner radius of the radial wipe.\n * @param {number}                            [props.durationMs=1000]       - The duration of the animation in milliseconds.\n * @param {number}                            [props.wipePercentage=100]    - The percentage of the wipe animation to complete.\n * @param {'clockwise' | 'counter-clockwise'} [props.direction='clockwise'] - The direction of the wipe animation.\n * @param {Angle}                             [props.startAngle='-90deg']   - The starting angle of the wipe animation.\n *\n * @return {JSX.Element} The radial wipe mask element.\n */\n\n/**\n * Renders a SVG mask that creates a radial wipe animation effect.\n *\n * @param {RadialWipeAnimationProps} props - Component props\n * @return {JSX.Element} The rendered mask component\n */\nfunction RadialWipeAnimation({\n  id,\n  radius,\n  innerRadius = 0,\n  durationMs = 1000,\n  wipePercentage = 100,\n  direction = 'clockwise',\n  startAngle = '-90deg'\n}) {\n  const strokeWidth = (radius - innerRadius) * 2 +\n  // The stroke is centered on the circumference, so we need to double the width.\n  1; // Added 1 to prevent sub-pixel rendering issues.\n\n  const scaleY = direction === 'clockwise' ? -1 : 1;\n  const isValidWipePercentage = 0 < wipePercentage && wipePercentage <= 100;\n  const animationDuration = `${\n  // If wipePercentage is invalid, set animation duration to 0 to disable animation.\n  isValidWipePercentage ? durationMs * (100 / wipePercentage) : 0}ms`;\n  return /*#__PURE__*/_jsx(\"mask\", {\n    id: id,\n    children: /*#__PURE__*/_jsx(\"circle\", {\n      cx: 0,\n      cy: 0,\n      r: radius,\n      pathLength: \"100\",\n      fill: \"white\",\n      stroke: \"black\" // The stroke will be un-drawn, hence 'black' mask.\n      ,\n      strokeWidth: strokeWidth,\n      strokeDasharray: \"100, 1000\",\n      strokeDashoffset: \"0\",\n      style: {\n        transform: `rotate(${startAngle}) scaleY(${scaleY})`\n      },\n      children: /*#__PURE__*/_jsx(\"animate\", {\n        attributeName: \"stroke-dashoffset\",\n        from: \"0\",\n        to: \"100.1\",\n        dur: animationDuration,\n        fill: \"freeze\" // Same as CSS 'forwards' to retain the final state after animation.\n        ,\n        calcMode: \"spline\" // custom easing\n        ,\n        keySplines: \"0.42 0 0.58 1;0 0 1 1\" // ease-in-out ; linear (unimportant)\n        ,\n        keyTimes: `0;${wipePercentage / 100};1`\n      })\n    })\n  });\n}\nexport default RadialWipeAnimation;"],"mappings":";AAAA,SAAS,OAAO,YAAY;AAiC5B,SAAS,oBAAoB;AAAA,EAC3B;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,aAAa;AAAA,EACb,iBAAiB;AAAA,EACjB,YAAY;AAAA,EACZ,aAAa;AACf,GAAG;AACD,QAAM,eAAe,SAAS,eAAe;AAAA,EAE7C;AAEA,QAAM,SAAS,cAAc,cAAc,KAAK;AAChD,QAAM,wBAAwB,IAAI,kBAAkB,kBAAkB;AACtE,QAAM,oBAAoB;AAAA,EAE1B,wBAAwB,cAAc,MAAM,kBAAkB,CAAC;AAC/D,SAAoB,qBAAK,QAAQ;AAAA,IAC/B;AAAA,IACA,UAAuB,qBAAK,UAAU;AAAA,MACpC,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,GAAG;AAAA,MACH,YAAY;AAAA,MACZ,MAAM;AAAA,MACN,QAAQ;AAAA,MAER;AAAA,MACA,iBAAiB;AAAA,MACjB,kBAAkB;AAAA,MAClB,OAAO;AAAA,QACL,WAAW,UAAU,UAAU,YAAY,MAAM;AAAA,MACnD;AAAA,MACA,UAAuB,qBAAK,WAAW;AAAA,QACrC,eAAe;AAAA,QACf,MAAM;AAAA,QACN,IAAI;AAAA,QACJ,KAAK;AAAA,QACL,MAAM;AAAA,QAEN,UAAU;AAAA,QAEV,YAAY;AAAA,QAEZ,UAAU,KAAK,iBAAiB,GAAG;AAAA,MACrC,CAAC;AAAA,IACH,CAAC;AAAA,EACH,CAAC;AACH;AACA,IAAO,gCAAQ;","names":[]}