@automattic/charts 0.57.0 → 0.59.0

package/dist/chunk-CZGYJKG6.js

@@ -1,421 +0,0 @@
-import {
-  Stack
-} from "./chunk-Z26M4V2M.js";
-import {
-  GlobalChartsContext,
-  GlobalChartsProvider,
-  useChartId,
-  useChartRegistration,
-  useGlobalChartsContext,
-  useGlobalChartsTheme,
-  usePrefersReducedMotion
-} from "./chunk-32DH6JDF.js";
-import {
-  formatPercentage,
-  hexToRgba
-} from "./chunk-DAU3HNEG.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-CZGYJKG6.js.map

package/dist/chunk-CZGYJKG6.js.map

@@ -1 +0,0 @@
-{"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"]}

package/dist/chunk-D2UH4CFE.cjs

@@ -1,120 +0,0 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var _chunkASLARV7Lcjs = require('./chunk-ASLARV7L.cjs');
-
-
-
-
-var _chunkRHHVEJHJcjs = require('./chunk-RHHVEJHJ.cjs');
-
-
-
-
-var _chunkVTS3PNMScjs = require('./chunk-VTS3PNMS.cjs');
-
-// src/charts/geo-chart/geo-chart.tsx
-var _i18n = require('@wordpress/i18n');
-var _clsx = require('clsx'); var _clsx2 = _interopRequireDefault(_clsx);
-var _react = require('react');
-var _reactgooglecharts = require('react-google-charts');
-
-// src/charts/geo-chart/geo-chart.module.scss
-var geo_chart_module_default = {
-  "container": "a8ccharts-JvcqOz"
-};
-
-// src/charts/geo-chart/geo-chart.tsx
-var _jsxruntime = require('react/jsx-runtime');
-var DEFAULT_FEATURE_FILL_COLOR = "#ffffff";
-var DEFAULT_BACKGROUND_COLOR = "#ffffff";
-var GeoChartInternal = ({
-  className,
-  data,
-  width,
-  height,
-  region = "world",
-  resolution = "countries",
-  renderPlaceholder
-}) => {
-  const {
-    getElementStyles,
-    theme: {
-      geoChart: {
-        featureFillColor
-      },
-      backgroundColor
-    }
-  } = _chunkRHHVEJHJcjs.useGlobalChartsContext.call(void 0, );
-  const loadingPlaceholder = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-    className: _clsx2.default.call(void 0, "geo-chart", geo_chart_module_default.container, className),
-    style: {
-      width,
-      height
-    },
-    children: renderPlaceholder ? renderPlaceholder() : _i18n.__.call(void 0, "Loading map", "jetpack-charts")
-  });
-  const fullColorHex = getElementStyles({
-    index: 0
-  }).color;
-  const lightColorHex = _chunkVTS3PNMScjs.lightenHexColor.call(void 0, fullColorHex, 0.8);
-  const backgroundColorHex = _chunkVTS3PNMScjs.normalizeColorToHex.call(void 0, backgroundColor, null, _chunkVTS3PNMScjs.resolveCssVariable) || DEFAULT_BACKGROUND_COLOR;
-  const defaultFillColorHex = _chunkVTS3PNMScjs.normalizeColorToHex.call(void 0, featureFillColor, null, _chunkVTS3PNMScjs.resolveCssVariable) || DEFAULT_FEATURE_FILL_COLOR;
-  const hasHtmlTooltips = _react.useMemo.call(void 0, () => data.length > 0 && data[0].some((col) => typeof col === "object" && col !== null && "role" in col && col.role === "tooltip" && "p" in col && typeof col.p === "object" && col.p !== null && "html" in col.p && col.p.html === true), [data]);
-  const options = _react.useMemo.call(void 0, () => ({
-    ...region !== "world" && {
-      region
-    },
-    ...resolution !== "countries" && {
-      resolution
-    },
-    colorAxis: {
-      colors: [lightColorHex, fullColorHex]
-    },
-    backgroundColor: backgroundColorHex,
-    datalessRegionColor: defaultFillColorHex,
-    defaultColor: defaultFillColorHex,
-    tooltip: {
-      trigger: "focus",
-      isHtml: hasHtmlTooltips
-    },
-    legend: "none",
-    keepAspectRatio: true
-  }), [region, resolution, lightColorHex, fullColorHex, backgroundColorHex, defaultFillColorHex, hasHtmlTooltips]);
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-    className: _clsx2.default.call(void 0, "geo-chart", geo_chart_module_default.container, className),
-    style: {
-      width,
-      height,
-      backgroundColor
-    },
-    children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reactgooglecharts.Chart, {
-      chartType: "GeoChart",
-      width,
-      height,
-      data,
-      options,
-      loader: loadingPlaceholder
-    })
-  });
-};
-var GeoChartWithProvider = (props) => {
-  const existingContext = _react.useContext.call(void 0, _chunkRHHVEJHJcjs.GlobalChartsContext);
-  if (existingContext) {
-    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, GeoChartInternal, {
-      ...props
-    });
-  }
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkRHHVEJHJcjs.GlobalChartsProvider, {
-    children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, GeoChartInternal, {
-      ...props
-    })
-  });
-};
-GeoChartWithProvider.displayName = "GeoChart";
-var GeoChartResponsive = _chunkASLARV7Lcjs.withResponsive.call(void 0, GeoChartWithProvider);
-
-
-
-
-exports.GeoChartWithProvider = GeoChartWithProvider; exports.GeoChartResponsive = GeoChartResponsive;
-//# sourceMappingURL=chunk-D2UH4CFE.cjs.map

package/dist/chunk-D2UH4CFE.cjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["/home/runner/work/jetpack/jetpack/projects/js-packages/charts/dist/chunk-D2UH4CFE.cjs","../src/charts/geo-chart/geo-chart.tsx","../src/charts/geo-chart/geo-chart.module.scss"],"names":[],"mappings":"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","file":"/home/runner/work/jetpack/jetpack/projects/js-packages/charts/dist/chunk-D2UH4CFE.cjs","sourcesContent":[null,"/**\n * External dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport clsx from 'clsx';\nimport { useContext, useMemo } from 'react';\nimport { Chart } from 'react-google-charts';\n/**\n * Internal dependencies\n */\nimport { GlobalChartsContext, GlobalChartsProvider, useGlobalChartsContext } from '../../providers';\nimport { lightenHexColor, normalizeColorToHex } from '../../utils/color-utils';\nimport { resolveCssVariable } from '../../utils/resolve-css-var';\nimport { withResponsive } from '../private/with-responsive';\nimport styles from './geo-chart.module.scss';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst DEFAULT_FEATURE_FILL_COLOR = '#ffffff';\nconst DEFAULT_BACKGROUND_COLOR = '#ffffff';\n\n/**\n * Renders a geographical chart using Google Charts GeoChart to visualize data.\n *\n * Supports the full Google Charts data format including custom tooltips, formatted values,\n * and multiple data columns for maximum flexibility.\n *\n * Locations can be identified by full name (e.g., 'United States', 'California') or codes\n * (e.g., 'US', 'US-CA'). Full names are recommended for better readability in tooltips.\n *\n * @param props                   - The props for the GeoChart component\n * @param props.data              - Data in Google Charts format (array of arrays with headers)\n * @param props.width             - Width of the chart in pixels\n * @param props.height            - Height of the chart in pixels\n * @param props.region            - Region to display ('world', 'US', or ISO 3166-1 alpha-2 code)\n * @param props.resolution        - Resolution level ('countries', 'provinces', or 'metros')\n * @param props.className         - Additional CSS class name for the chart container\n * @param props.renderPlaceholder - Optional render function for the loading placeholder\n * @return A React component displaying an interactive map with data visualization\n */\nconst GeoChartInternal = ({\n  className,\n  data,\n  width,\n  height,\n  region = 'world',\n  resolution = 'countries',\n  renderPlaceholder\n}) => {\n  const {\n    getElementStyles,\n    theme: {\n      geoChart: {\n        featureFillColor\n      },\n      backgroundColor\n    }\n  } = useGlobalChartsContext();\n\n  // Render loading placeholder\n  const loadingPlaceholder = /*#__PURE__*/_jsx(\"div\", {\n    className: clsx('geo-chart', styles.container, className),\n    style: {\n      width,\n      height\n    },\n    children: renderPlaceholder ? renderPlaceholder() : __('Loading map', 'jetpack-charts')\n  });\n\n  // Google charts doesn't accept CSS variables, so we need to convert them to hex colors\n  const fullColorHex = getElementStyles({\n    index: 0\n  }).color;\n  const lightColorHex = lightenHexColor(fullColorHex, 0.8);\n  // Use normalizeColorToHex to ensure HSL/RGB values from CSS variables are converted to hex\n  const backgroundColorHex = normalizeColorToHex(backgroundColor, null, resolveCssVariable) || DEFAULT_BACKGROUND_COLOR;\n  const defaultFillColorHex = normalizeColorToHex(featureFillColor, null, resolveCssVariable) || DEFAULT_FEATURE_FILL_COLOR;\n\n  // Check if data has HTML tooltips (column with role: 'tooltip' and p.html: true)\n  const hasHtmlTooltips = useMemo(() => data.length > 0 && data[0].some(col => typeof col === 'object' && col !== null && 'role' in col && col.role === 'tooltip' && 'p' in col && typeof col.p === 'object' && col.p !== null && 'html' in col.p && col.p.html === true), [data]);\n  const options = useMemo(() => ({\n    ...(region !== 'world' && {\n      region\n    }),\n    ...(resolution !== 'countries' && {\n      resolution\n    }),\n    colorAxis: {\n      colors: [lightColorHex, fullColorHex]\n    },\n    backgroundColor: backgroundColorHex,\n    datalessRegionColor: defaultFillColorHex,\n    defaultColor: defaultFillColorHex,\n    tooltip: {\n      trigger: 'focus',\n      isHtml: hasHtmlTooltips\n    },\n    legend: 'none',\n    keepAspectRatio: true\n  }), [region, resolution, lightColorHex, fullColorHex, backgroundColorHex, defaultFillColorHex, hasHtmlTooltips]);\n  return /*#__PURE__*/_jsx(\"div\", {\n    className: clsx('geo-chart', styles.container, className),\n    style: {\n      width,\n      height,\n      backgroundColor\n    },\n    children: /*#__PURE__*/_jsx(Chart, {\n      chartType: \"GeoChart\",\n      width: width,\n      height: height,\n      data: data,\n      options: options,\n      loader: loadingPlaceholder\n    })\n  });\n};\nconst GeoChartWithProvider = 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(GeoChartInternal, {\n      ...props\n    });\n  }\n\n  // Otherwise, create our own GlobalChartsProvider\n  return /*#__PURE__*/_jsx(GlobalChartsProvider, {\n    children: /*#__PURE__*/_jsx(GeoChartInternal, {\n      ...props\n    })\n  });\n};\nGeoChartWithProvider.displayName = 'GeoChart';\nconst GeoChartResponsive = withResponsive(GeoChartWithProvider);\nexport { GeoChartResponsive as default, GeoChartWithProvider as GeoChartUnresponsive };","import 'css-chunk:src/charts/geo-chart/geo-chart.module.scss';export default {\n  \"container\": \"a8ccharts-JvcqOz\"\n};"]}