@automattic/charts 0.58.0 → 1.0.0

package/dist/chunk-KJHWXOCZ.js

@@ -1,421 +0,0 @@
-import {
-  Stack
-} from "./chunk-YAFQVVDI.js";
-import {
-  GlobalChartsContext,
-  GlobalChartsProvider,
-  useChartId,
-  useChartRegistration,
-  useGlobalChartsContext,
-  useGlobalChartsTheme,
-  usePrefersReducedMotion
-} from "./chunk-2I67QUIV.js";
-import {
-  formatPercentage,
-  hexToRgba
-} from "./chunk-JJIMABHT.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-KJHWXOCZ.js.map

package/dist/chunk-KJHWXOCZ.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-KRWGSOJ2.js

@@ -1,91 +0,0 @@
-import {
-  Legend
-} from "./chunk-WTQYGUNF.js";
-
-// src/charts/private/chart-composition/chart-svg.tsx
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
-var ChartSVG = ({
-  children
-}) => {
-  return /* @__PURE__ */ _jsx(_Fragment, {
-    children
-  });
-};
-ChartSVG.displayName = "Chart.SVG";
-
-// src/charts/private/chart-composition/chart-html.tsx
-import { Fragment as _Fragment2, jsx as _jsx2 } from "react/jsx-runtime";
-var ChartHTML = ({
-  children
-}) => {
-  return /* @__PURE__ */ _jsx2(_Fragment2, {
-    children
-  });
-};
-ChartHTML.displayName = "Chart.HTML";
-
-// src/charts/private/chart-composition/render-legend-slot.ts
-import { createElement, Fragment } from "react";
-function renderLegendSlot(legendChildren, position) {
-  return legendChildren.filter((l) => l.position === position).map(
-    (l, i) => createElement(Fragment, { key: `legend-${position}-${i}` }, l.element)
-  );
-}
-
-// src/charts/private/chart-composition/use-chart-children.ts
-import { Group } from "@visx/group";
-import { useMemo, Children, isValidElement } from "react";
-function useChartChildren(children, chartType) {
-  return useMemo(() => {
-    const svg = [];
-    const html = [];
-    const legend = [];
-    const other = [];
-    const nonLegend = [];
-    Children.forEach(children, (child) => {
-      if (isValidElement(child)) {
-        if (child.type === Legend) {
-          const rawPosition = child.props?.position;
-          const position = rawPosition === "top" || rawPosition === "bottom" ? rawPosition : "bottom";
-          legend.push({ element: child, position });
-          return;
-        }
-        const childType = child.type;
-        const displayName = childType?.displayName;
-        if (displayName === `${chartType}.SVG` || displayName === "Chart.SVG") {
-          if (child.props?.children) {
-            Children.forEach(child.props.children, (svgChild) => {
-              svg.push(svgChild);
-            });
-          }
-        } else if (displayName === `${chartType}.HTML` || displayName === "Chart.HTML") {
-          if (child.props?.children) {
-            Children.forEach(child.props.children, (htmlChild) => {
-              html.push(htmlChild);
-            });
-          }
-        } else if (child.type === Group) {
-          svg.push(child);
-        } else {
-          other.push(child);
-        }
-      }
-      nonLegend.push(child);
-    });
-    return {
-      svgChildren: svg,
-      htmlChildren: html,
-      legendChildren: legend,
-      otherChildren: other,
-      nonLegendChildren: nonLegend
-    };
-  }, [children, chartType]);
-}
-
-export {
-  ChartSVG,
-  ChartHTML,
-  renderLegendSlot,
-  useChartChildren
-};
-//# sourceMappingURL=chunk-KRWGSOJ2.js.map

package/dist/chunk-KRWGSOJ2.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/charts/private/chart-composition/chart-svg.tsx","../src/charts/private/chart-composition/chart-html.tsx","../src/charts/private/chart-composition/render-legend-slot.ts","../src/charts/private/chart-composition/use-chart-children.ts"],"sourcesContent":["import { Fragment as _Fragment, jsx as _jsx } from \"react/jsx-runtime\";\n/**\n * Compound component for SVG children in charts.\n * This component serves as a marker for SVG content that should be rendered\n * inside the chart's SVG element. The actual rendering is handled by the parent chart.\n *\n * @param {PropsWithChildren} props          - Component props\n * @param {ReactNode}         props.children - Child elements to render inside the SVG\n * @return {JSX.Element} The children wrapped in a fragment\n */\nexport const ChartSVG = ({\n  children\n}) => {\n  // This component doesn't render directly - its children are extracted by the parent chart\n  // We just return the children as-is\n  return /*#__PURE__*/_jsx(_Fragment, {\n    children: children\n  });\n};\n\n// Set displayName for better debugging and type checking\nChartSVG.displayName = 'Chart.SVG';","import { Fragment as _Fragment, jsx as _jsx } from \"react/jsx-runtime\";\n/**\n * Compound component for HTML children in charts.\n * This component serves as a marker for HTML content that should be rendered\n * outside the chart's SVG element. The actual rendering is handled by the parent chart.\n *\n * @param {PropsWithChildren} props          - Component props\n * @param {ReactNode}         props.children - Child elements to render outside the SVG\n * @return {JSX.Element} The children wrapped in a fragment\n */\nexport const ChartHTML = ({\n  children\n}) => {\n  // This component doesn't render directly - its children are extracted by the parent chart\n  // We just return the children as-is\n  return /*#__PURE__*/_jsx(_Fragment, {\n    children: children\n  });\n};\n\n// Set displayName for better debugging and type checking\nChartHTML.displayName = 'Chart.HTML';","import { createElement, Fragment } from 'react';\nimport type { LegendChild } from './use-chart-children';\nimport type { LegendPosition } from '../../../types';\nimport type { ReactNode } from 'react';\n\n/**\n * Renders legend children filtered by position slot.\n *\n * @param {LegendChild[]}  legendChildren - The legend children to filter and render\n * @param {LegendPosition} position       - The position slot to render\n * @return {ReactNode[]} Array of legend elements for the given position\n */\nexport function renderLegendSlot(\n\tlegendChildren: LegendChild[],\n\tposition: LegendPosition\n): ReactNode[] {\n\treturn legendChildren\n\t\t.filter( l => l.position === position )\n\t\t.map( ( l, i ) =>\n\t\t\tcreateElement( Fragment, { key: `legend-${ position }-${ i }` }, l.element )\n\t\t);\n}\n","import { Group } from '@visx/group';\nimport { useMemo, Children, isValidElement } from 'react';\nimport { Legend } from '../../../components/legend';\nimport type { LegendPosition } from '../../../types';\nimport type { ReactElement, ReactNode } from 'react';\n\nexport type LegendChild = {\n\telement: ReactElement;\n\tposition: LegendPosition;\n};\n\ninterface ChartChildren {\n\tsvgChildren: ReactNode[];\n\thtmlChildren: ReactNode[];\n\tlegendChildren: LegendChild[];\n\totherChildren: ReactNode[];\n\t/** All children except Legend, in original order. */\n\tnonLegendChildren: ReactNode[];\n}\n\n/**\n * Custom hook to process and categorize chart children for composition API.\n * Extracts children from compound components (Chart.SVG, Chart.HTML) and\n * maintains backward compatibility with legacy Group components.\n *\n * @param {ReactNode} children  - The children prop from the chart component\n * @param {string}    chartType - The type of chart (e.g., 'PieChart', 'BarChart')\n * @return {ChartChildren} Categorized children for rendering\n */\nexport function useChartChildren( children: ReactNode, chartType: string ): ChartChildren {\n\treturn useMemo( () => {\n\t\tconst svg: ReactNode[] = [];\n\t\tconst html: ReactNode[] = [];\n\t\tconst legend: LegendChild[] = [];\n\t\tconst other: ReactNode[] = [];\n\t\tconst nonLegend: ReactNode[] = [];\n\n\t\tChildren.forEach( children, child => {\n\t\t\tif ( isValidElement( child ) ) {\n\t\t\t\t// Extract Legend children for position-based slot rendering\n\t\t\t\tif ( child.type === Legend ) {\n\t\t\t\t\tconst rawPosition = child.props?.position;\n\t\t\t\t\tconst position =\n\t\t\t\t\t\trawPosition === 'top' || rawPosition === 'bottom' ? rawPosition : 'bottom';\n\n\t\t\t\t\tlegend.push( { element: child as ReactElement, position } );\n\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\t// Check displayName for compound components\n\t\t\t\tconst childType = child.type as { displayName?: string };\n\t\t\t\tconst displayName = childType?.displayName;\n\n\t\t\t\t// Handle chart-specific compound components (e.g., PieChart.SVG)\n\t\t\t\tif ( displayName === `${ chartType }.SVG` || displayName === 'Chart.SVG' ) {\n\t\t\t\t\t// Extract children from Chart.SVG with safety checks\n\t\t\t\t\tif ( child.props?.children ) {\n\t\t\t\t\t\tChildren.forEach( child.props.children, svgChild => {\n\t\t\t\t\t\t\tsvg.push( svgChild );\n\t\t\t\t\t\t} );\n\t\t\t\t\t}\n\t\t\t\t} else if ( displayName === `${ chartType }.HTML` || displayName === 'Chart.HTML' ) {\n\t\t\t\t\t// Extract children from Chart.HTML with safety checks\n\t\t\t\t\tif ( child.props?.children ) {\n\t\t\t\t\t\tChildren.forEach( child.props.children, htmlChild => {\n\t\t\t\t\t\t\thtml.push( htmlChild );\n\t\t\t\t\t\t} );\n\t\t\t\t\t}\n\t\t\t\t} else if ( child.type === Group ) {\n\t\t\t\t\t// Legacy support: still check for Group type for backward compatibility\n\t\t\t\t\tsvg.push( child );\n\t\t\t\t} else {\n\t\t\t\t\tother.push( child );\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t// Preserve original order of all non-Legend children\n\t\t\tnonLegend.push( child );\n\t\t} );\n\n\t\treturn {\n\t\t\tsvgChildren: svg,\n\t\t\thtmlChildren: html,\n\t\t\tlegendChildren: legend,\n\t\t\totherChildren: other,\n\t\t\tnonLegendChildren: nonLegend,\n\t\t};\n\t}, [ children, chartType ] );\n}\n"],"mappings":";;;;;AAAA,SAAS,YAAY,WAAW,OAAO,YAAY;AAU5C,IAAM,WAAW,CAAC;AAAA,EACvB;AACF,MAAM;AAGJ,SAAoB,qBAAK,WAAW;AAAA,IAClC;AAAA,EACF,CAAC;AACH;AAGA,SAAS,cAAc;;;ACrBvB,SAAS,YAAYA,YAAW,OAAOC,aAAY;AAU5C,IAAM,YAAY,CAAC;AAAA,EACxB;AACF,MAAM;AAGJ,SAAoB,gBAAAA,MAAKD,YAAW;AAAA,IAClC;AAAA,EACF,CAAC;AACH;AAGA,UAAU,cAAc;;;ACrBxB,SAAS,eAAe,gBAAgB;AAYjC,SAAS,iBACf,gBACA,UACc;AACd,SAAO,eACL,OAAQ,OAAK,EAAE,aAAa,QAAS,EACrC;AAAA,IAAK,CAAE,GAAG,MACV,cAAe,UAAU,EAAE,KAAK,UAAW,QAAS,IAAK,CAAE,GAAG,GAAG,EAAE,OAAQ;AAAA,EAC5E;AACF;;;ACrBA,SAAS,aAAa;AACtB,SAAS,SAAS,UAAU,sBAAsB;AA4B3C,SAAS,iBAAkB,UAAqB,WAAmC;AACzF,SAAO,QAAS,MAAM;AACrB,UAAM,MAAmB,CAAC;AAC1B,UAAM,OAAoB,CAAC;AAC3B,UAAM,SAAwB,CAAC;AAC/B,UAAM,QAAqB,CAAC;AAC5B,UAAM,YAAyB,CAAC;AAEhC,aAAS,QAAS,UAAU,WAAS;AACpC,UAAK,eAAgB,KAAM,GAAI;AAE9B,YAAK,MAAM,SAAS,QAAS;AAC5B,gBAAM,cAAc,MAAM,OAAO;AACjC,gBAAM,WACL,gBAAgB,SAAS,gBAAgB,WAAW,cAAc;AAEnE,iBAAO,KAAM,EAAE,SAAS,OAAuB,SAAS,CAAE;AAE1D;AAAA,QACD;AAGA,cAAM,YAAY,MAAM;AACxB,cAAM,cAAc,WAAW;AAG/B,YAAK,gBAAgB,GAAI,SAAU,UAAU,gBAAgB,aAAc;AAE1E,cAAK,MAAM,OAAO,UAAW;AAC5B,qBAAS,QAAS,MAAM,MAAM,UAAU,cAAY;AACnD,kBAAI,KAAM,QAAS;AAAA,YACpB,CAAE;AAAA,UACH;AAAA,QACD,WAAY,gBAAgB,GAAI,SAAU,WAAW,gBAAgB,cAAe;AAEnF,cAAK,MAAM,OAAO,UAAW;AAC5B,qBAAS,QAAS,MAAM,MAAM,UAAU,eAAa;AACpD,mBAAK,KAAM,SAAU;AAAA,YACtB,CAAE;AAAA,UACH;AAAA,QACD,WAAY,MAAM,SAAS,OAAQ;AAElC,cAAI,KAAM,KAAM;AAAA,QACjB,OAAO;AACN,gBAAM,KAAM,KAAM;AAAA,QACnB;AAAA,MACD;AAGA,gBAAU,KAAM,KAAM;AAAA,IACvB,CAAE;AAEF,WAAO;AAAA,MACN,aAAa;AAAA,MACb,cAAc;AAAA,MACd,gBAAgB;AAAA,MAChB,eAAe;AAAA,MACf,mBAAmB;AAAA,IACpB;AAAA,EACD,GAAG,CAAE,UAAU,SAAU,CAAE;AAC5B;","names":["_Fragment","_jsx"]}

package/dist/chunk-KXRWNFQJ.js

@@ -1,51 +0,0 @@
-// src/charts/private/radial-wipe-animation/radial-wipe-animation.tsx
-import { jsx as _jsx } from "react/jsx-runtime";
-function RadialWipeAnimation({
-  id,
-  radius,
-  innerRadius = 0,
-  durationMs = 1e3,
-  wipePercentage = 100,
-  direction = "clockwise",
-  startAngle = "-90deg"
-}) {
-  const strokeWidth = (radius - innerRadius) * 2 + // The stroke is centered on the circumference, so we need to double the width.
-  1;
-  const scaleY = direction === "clockwise" ? -1 : 1;
-  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", {
-      cx: 0,
-      cy: 0,
-      r: radius,
-      pathLength: "100",
-      fill: "white",
-      stroke: "black",
-      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`
-      })
-    })
-  });
-}
-var radial_wipe_animation_default = RadialWipeAnimation;
-
-export {
-  radial_wipe_animation_default
-};
-//# sourceMappingURL=chunk-KXRWNFQJ.js.map

package/dist/chunk-KXRWNFQJ.js.map

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