@dynatrace/strato-components 3.12.2 → 3.13.0

package/esm/charts/xy-chart/components/legend/XYLegend/XYLegend.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/xy-chart/components/legend/XYLegend/XYLegend.tsx"],
-  "sourcesContent": ["import type { ScaleOrdinal } from 'd3-scale';\nimport { useCallback, useMemo } from 'react';\n\nimport { getXYLegendActions } from './utils/getXYLegendActions.js';\nimport {\n  AREA_CHART_ICON_SHAPE,\n  BAR_CHART_ICON_SHAPE,\n  LINE_CHART_ICON_SHAPE,\n  RECT_CHART_ICON_SHAPE,\n  XYLegendIcon,\n} from './XYLegendIcon.js';\nimport { useChartLayoutLoading } from '../../../../core/components/chart-layout/hooks/useChartLayoutLoading.js';\nimport { useChartLayoutOrientation } from '../../../../core/components/chart-layout/hooks/useChartLayoutOrientation.js';\nimport { getLegendOrientation } from '../../../../core/components/chart-layout/utils/orientation.js';\nimport { ChartLegend } from '../../../../core/components/legend/categorical/ChartLegend.js';\nimport type { LegendItem } from '../../../../core/components/legend/categorical/types/legend.js';\nimport { usePinCoordinationActions } from '../../../../core/components/overlay-tooltip/usePinCoordinationActions.js';\nimport { useTooltipActions } from '../../../../core/components/overlay-tooltip/useTooltipActions.js';\nimport { buildCategoricalItemsFromScale } from '../../../../core/utils/build-categorical-items-from-scale.js';\nimport { safeGet } from '../../../../core/utils/safe-get.js';\nimport type { SeriesIdToColorScale } from '../../../context/XYChartColorScales.context.js';\nimport { useXYChartColorScales } from '../../../hooks/useXYChartColorScales.js';\nimport { useXYChartTruncationMode } from '../../../hooks/useXYChartTruncationMode.js';\nimport { reduceFilterSeries } from '../../../store/reducer-filter-series.js';\nimport { useSetState } from '../../../store/selectors.js';\nimport {\n  AREA_VARIANT,\n  type AreaSeriesWithDatapoints,\n  BAR_VARIANT,\n  type BarSeriesWithDatapoints,\n  DOT_VARIANT,\n  type DotSeriesWithDatapoints,\n  LINE_VARIANT,\n  type LineSeriesWithDatapoints,\n  RECT_VARIANT,\n  type RectSeriesWithDatapoints,\n  type SeriesToMetadata,\n  type XYChartSeriesWithDatapoints,\n} from '../../../types/xy-chart-internals.js';\nimport { isRangeLegend } from '../../../utils/is-range-legend.js';\nimport { isRectSeries } from '../../../utils/type-guards.js';\n\nconst CHART_ICONS = {\n  [LINE_VARIANT]: LINE_CHART_ICON_SHAPE,\n  [BAR_VARIANT]: BAR_CHART_ICON_SHAPE,\n  [RECT_VARIANT]: RECT_CHART_ICON_SHAPE,\n  [AREA_VARIANT]: AREA_CHART_ICON_SHAPE,\n} as const;\n\nfunction getLegendItems(\n  series: (\n    | DotSeriesWithDatapoints\n    | LineSeriesWithDatapoints\n    | BarSeriesWithDatapoints\n    | RectSeriesWithDatapoints\n    | AreaSeriesWithDatapoints\n  )[],\n  metadata: SeriesToMetadata,\n  isMixedSeries: boolean,\n  scaleColorMap: SeriesIdToColorScale,\n  isCategoricalRectOnly: boolean,\n) {\n  return series.flatMap((series) => {\n    if (series.type === RECT_VARIANT) {\n      if (isRangeLegend(metadata, series)) {\n        return [];\n      }\n      const scale = safeGet(scaleColorMap, series.id) as ScaleOrdinal<\n        string,\n        string\n      >;\n      const overrideItems = safeGet(metadata, series).categoricalColorOverrides;\n\n      const shape = isCategoricalRectOnly ? 'circle' : CHART_ICONS[series.type];\n\n      const items = buildCategoricalItemsFromScale(\n        scale,\n        overrideItems,\n        //We need to compare exactly the same id when an action is selected\n        //In RectSeries, categories are unique per series.\n        (category: string) => `${series.id}--${category}`,\n      );\n\n      return items.map((item: LegendItem) => ({\n        ...item,\n        icon: <XYLegendIcon color={item.color.Default} shape={shape} />,\n      }));\n    } else {\n      const { name, color, shape = 'circle' } = safeGet(metadata, series);\n      const iconShape =\n        isMixedSeries && series.type !== DOT_VARIANT\n          ? CHART_ICONS[series.type]\n          : shape;\n\n      return {\n        id: series.id,\n        color,\n        name,\n        icon: <XYLegendIcon color={color.Default} shape={iconShape} />,\n      };\n    }\n  });\n}\n\ninterface XYLegendProps {\n  series: XYChartSeriesWithDatapoints[];\n  seriesToMetadata: SeriesToMetadata;\n}\n\nexport function XYLegend({ series, seriesToMetadata }: XYLegendProps) {\n  const { reset } = useTooltipActions();\n  const { dismissAnnotation } = usePinCoordinationActions();\n  const { orientation: layoutOrientation } = useChartLayoutOrientation();\n  const orientation = getLegendOrientation(layoutOrientation);\n  const setState = useSetState();\n  const isLoading = useChartLayoutLoading();\n  const scaleColorMap = useXYChartColorScales();\n\n  const { truncationMode } = useXYChartTruncationMode();\n\n  const firstSeries = series[0];\n  const isCategoricalRectOnly =\n    isRectSeries(firstSeries) &&\n    series.every(isRectSeries) &&\n    !isRangeLegend(seriesToMetadata, firstSeries);\n\n  const isMixedSeries = useMemo(() => {\n    const typeSet = new Set(series.map((s) => s.type));\n    return typeSet.size >= 2;\n  }, [series]);\n\n  const legendItems = useMemo(\n    () =>\n      getLegendItems(\n        series,\n        seriesToMetadata,\n        isMixedSeries,\n        scaleColorMap,\n        isCategoricalRectOnly,\n      ),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [series, seriesToMetadata],\n  );\n\n  const legendActions = getXYLegendActions(series, seriesToMetadata);\n\n  const updateVisibleSeries = useCallback(\n    (visibleItems: LegendItem[]) => {\n      const visibleIds = new Set(visibleItems.map((item) => item.id));\n\n      reset();\n      dismissAnnotation();\n      setState(reduceFilterSeries(visibleIds));\n    },\n    [setState, reset, dismissAnnotation],\n  );\n\n  const updateHighlightedSeriesId = (legendItemId?: string) => {\n    setState((prev) => ({ ...prev, highlightedSeriesId: legendItemId }));\n  };\n\n  return (\n    <ChartLegend\n      items={legendItems}\n      orientation={orientation}\n      truncationMode={truncationMode}\n      interactionsDisabled={isLoading}\n      onSeriesAction={legendActions}\n      onHover={(legendItem) => updateHighlightedSeriesId(legendItem?.id)}\n      onClick={updateVisibleSeries}\n    />\n  );\n}\n"],
+  "sourcesContent": ["import type { ScaleOrdinal } from 'd3-scale';\nimport { useCallback, useMemo } from 'react';\n\nimport { getXYLegendActions } from './utils/getXYLegendActions.js';\nimport {\n  AREA_CHART_ICON_SHAPE,\n  BAR_CHART_ICON_SHAPE,\n  LINE_CHART_ICON_SHAPE,\n  RECT_CHART_ICON_SHAPE,\n  XYLegendIcon,\n} from './XYLegendIcon.js';\nimport { useChartLayoutLoading } from '../../../../core/components/chart-layout/hooks/useChartLayoutLoading.js';\nimport { useChartLayoutOrientation } from '../../../../core/components/chart-layout/hooks/useChartLayoutOrientation.js';\nimport { getLegendOrientation } from '../../../../core/components/chart-layout/utils/orientation.js';\nimport { ChartLegend } from '../../../../core/components/legend/categorical/ChartLegend.js';\nimport type { LegendItem } from '../../../../core/components/legend/categorical/types/legend.js';\nimport { usePinCoordinationActions } from '../../../../core/components/overlay-tooltip/usePinCoordinationActions.js';\nimport { useTooltipActions } from '../../../../core/components/overlay-tooltip/useTooltipActions.js';\nimport { buildCategoricalItemsFromScale } from '../../../../core/utils/build-categorical-items-from-scale.js';\nimport { safeGet } from '../../../../core/utils/safe-get.js';\nimport type { SeriesIdToColorScale } from '../../../context/XYChartColorScales.context.js';\nimport { useXYChartColorScales } from '../../../hooks/useXYChartColorScales.js';\nimport { useXYChartTruncationMode } from '../../../hooks/useXYChartTruncationMode.js';\nimport { reduceFilterSeries } from '../../../store/reducer-filter-series.js';\nimport { useSetState } from '../../../store/selectors.js';\nimport {\n  AREA_VARIANT,\n  type AreaSeriesWithDatapoints,\n  BAR_VARIANT,\n  type BarSeriesWithDatapoints,\n  DOT_VARIANT,\n  type DotSeriesWithDatapoints,\n  LINE_VARIANT,\n  type LineSeriesWithDatapoints,\n  RECT_VARIANT,\n  type RectSeriesWithDatapoints,\n  type SeriesToMetadata,\n  type XYChartSeriesWithDatapoints,\n} from '../../../types/xy-chart-internals.js';\nimport { isRangeLegend } from '../../../utils/is-range-legend.js';\nimport { isRectSeries } from '../../../utils/type-guards.js';\n\nconst CHART_ICONS = {\n  [LINE_VARIANT]: LINE_CHART_ICON_SHAPE,\n  [BAR_VARIANT]: BAR_CHART_ICON_SHAPE,\n  [RECT_VARIANT]: RECT_CHART_ICON_SHAPE,\n  [AREA_VARIANT]: AREA_CHART_ICON_SHAPE,\n} as const;\n\nfunction getLegendItems(\n  series: (\n    | DotSeriesWithDatapoints\n    | LineSeriesWithDatapoints\n    | BarSeriesWithDatapoints\n    | RectSeriesWithDatapoints\n    | AreaSeriesWithDatapoints\n  )[],\n  metadata: SeriesToMetadata,\n  isMixedSeries: boolean,\n  scaleColorMap: SeriesIdToColorScale,\n  isCategoricalRectOnly: boolean,\n) {\n  return series.flatMap((series) => {\n    if (series.type === RECT_VARIANT) {\n      if (isRangeLegend(metadata, series)) {\n        return [];\n      }\n      const scale = safeGet(scaleColorMap, series.id) as ScaleOrdinal<\n        string,\n        string\n      >;\n      const overrideItems = safeGet(metadata, series).categoricalColorOverrides;\n\n      const shape = isCategoricalRectOnly ? 'circle' : CHART_ICONS[series.type];\n\n      const items = buildCategoricalItemsFromScale(\n        scale,\n        overrideItems,\n        //We need to compare exactly the same id when an action is selected\n        //In RectSeries, categories are unique per series.\n        (category: string) => `${series.id}--${category}`,\n      );\n\n      return items.map((item: LegendItem) => ({\n        ...item,\n        icon: <XYLegendIcon color={item.color.Default} shape={shape} />,\n      }));\n    } else {\n      const { name, color, shape = 'circle' } = safeGet(metadata, series);\n      const iconShape =\n        isMixedSeries && series.type !== DOT_VARIANT\n          ? CHART_ICONS[series.type]\n          : shape;\n\n      return {\n        id: series.id,\n        color,\n        name,\n        icon: <XYLegendIcon color={color.Default} shape={iconShape} />,\n      };\n    }\n  });\n}\n\ninterface XYLegendProps {\n  series: XYChartSeriesWithDatapoints[];\n  seriesToMetadata: SeriesToMetadata;\n}\n\nexport function XYLegend({ series, seriesToMetadata }: XYLegendProps) {\n  const { reset } = useTooltipActions();\n  const { dismissAnnotation } = usePinCoordinationActions();\n  const { orientation: layoutOrientation } = useChartLayoutOrientation();\n  const orientation = getLegendOrientation(layoutOrientation);\n  const setState = useSetState();\n  const isLoading = useChartLayoutLoading();\n  const scaleColorMap = useXYChartColorScales();\n\n  const { truncationMode } = useXYChartTruncationMode();\n\n  const firstSeries = series[0];\n  const isCategoricalRectOnly =\n    isRectSeries(firstSeries) &&\n    series.every(isRectSeries) &&\n    !isRangeLegend(seriesToMetadata, firstSeries);\n\n  const isMixedSeries = useMemo(() => {\n    const typeSet = new Set(series.map((s) => s.type));\n    return typeSet.size >= 2;\n  }, [series]);\n\n  const legendItems = useMemo(\n    () =>\n      getLegendItems(\n        series,\n        seriesToMetadata,\n        isMixedSeries,\n        scaleColorMap,\n        isCategoricalRectOnly,\n      ),\n    // oxlint-disable-next-line react-hooks/exhaustive-deps\n    [series, seriesToMetadata],\n  );\n\n  const legendActions = getXYLegendActions(series, seriesToMetadata);\n\n  const updateVisibleSeries = useCallback(\n    (visibleItems: LegendItem[]) => {\n      const visibleIds = new Set(visibleItems.map((item) => item.id));\n\n      reset();\n      dismissAnnotation();\n      setState(reduceFilterSeries(visibleIds));\n    },\n    [setState, reset, dismissAnnotation],\n  );\n\n  const updateHighlightedSeriesId = (legendItemId?: string) => {\n    setState((prev) => ({ ...prev, highlightedSeriesId: legendItemId }));\n  };\n\n  return (\n    <ChartLegend\n      items={legendItems}\n      orientation={orientation}\n      truncationMode={truncationMode}\n      interactionsDisabled={isLoading}\n      onSeriesAction={legendActions}\n      onHover={(legendItem) => updateHighlightedSeriesId(legendItem?.id)}\n      onClick={updateVisibleSeries}\n    />\n  );\n}\n"],
   "mappings": "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",
   "names": ["series"]
 }

package/esm/charts/xy-chart/components/legend/XYLegend/xy-legend.css

@@ -1,3 +1,3 @@
-._1lwufqz0-3-12-2 {
+._1lwufqz0-3-13-0 {
   margin: var(--dt-spacings-size-2, 2px);
 }

package/esm/charts/xy-chart/components/legend/XYLegend/xy-legend.sty.js

@@ -1,5 +1,5 @@
 import "./xy-legend.css";
-var shapeIconWrapper = "_1lwufqz0-3-12-2";
+var shapeIconWrapper = "_1lwufqz0-3-13-0";
 export {
   shapeIconWrapper
 };

package/esm/charts/xy-chart/components/legend/XYLegend/xy-legend.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/xy-chart/components/legend/XYLegend/xy-legend.css.ts"],
-  "sourcesContent": ["import './xy-legend.css';\nexport var shapeIconWrapper = '_1lwufqz0-3-12-2';"],
+  "sourcesContent": ["import './xy-legend.css';\nexport var shapeIconWrapper = '_1lwufqz0-3-13-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,mBAAmB;",
   "names": []
 }

package/esm/charts/xy-chart/components/overlay/XYChartOverlay.js

@@ -1,6 +1,6 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { every } from "lodash-es";
-import { useContext, useEffect, useRef } from "react";
+import { useEffect, useRef } from "react";
 import { XYChartSynchronizedCrosshair } from "./XYChartSynchronizedCrosshair.js";
 import { useGridPlotSize } from "../../../core/components/chart-grid/hooks/useGridPlotSize.js";
 import { InteractionsOverlay } from "../../../core/components/interactions-overlay/InteractionsOverlay.js";
@@ -27,7 +27,6 @@ import {
 import { SynchronizedSelectionArea } from "../../../core/components/shared-chart-interactions/components/SynchronizedSelectionArea.js";
 import { useSynchronizedSelection } from "../../../core/components/shared-chart-interactions/hooks/useSynchronizedSelection.js";
 import { useToolbarHandlerRef } from "../../../core/components/toolbar/hooks/useToolbarHandlerRef.js";
-import { ChartVariantContext } from "../../../core/context/ChartVariantContext.js";
 import { useEffectOnValueChange } from "../../../core/hooks/useEffectOnValueChange.js";
 import { zIndicesXYChartAreas } from "../../constants/xy-chart-z-index-areas.js";
 import { XYChartSelectionAreaRefContext } from "../../context/XYChartSelectionAreaRef.context.js";
@@ -63,7 +62,6 @@ const XYChartOverlay = () => {
   const chartId = useXYChartId();
   const syncedXScale = useSyncedXScaleByPriority();
   const { axesMetadata } = useXYChartData();
-  const { crosshair: crosshairConfig } = useContext(ChartVariantContext);
   const { zoomOutEnabled } = useZoomState();
   const isZoomDisabled = !axesMetadata.isZoomEnabled;
   const isPanDisabled = !(axesMetadata.isPanEnabled && zoomOutEnabled);
@@ -103,7 +101,7 @@ const XYChartOverlay = () => {
       style: {
         zIndex: zIndicesXYChartAreas.overlays,
         userSelect: selectState?.finished === false ? "none" : "auto",
-        cursor: hideHorizontal && hideVertical ? "default" : crosshairConfig?.cursor
+        cursor: hideHorizontal && hideVertical ? "default" : void 0
       },
       ref: overlay.overlayRef,
       mode,

package/esm/charts/xy-chart/components/overlay/XYChartOverlay.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/xy-chart/components/overlay/XYChartOverlay.tsx"],
-  "sourcesContent": ["import { every } from 'lodash-es';\nimport { useContext, useEffect, useRef, type FocusEvent } from 'react';\n\nimport { XYChartSynchronizedCrosshair } from './XYChartSynchronizedCrosshair.js';\nimport { useGridPlotSize } from '../../../core/components/chart-grid/hooks/useGridPlotSize.js';\nimport { InteractionsOverlay } from '../../../core/components/interactions-overlay/InteractionsOverlay.js';\nimport { useOverlay } from '../../../core/components/overlay-tooltip/contexts/OverlayContext.js';\nimport { reduceExploreCancelHighlight } from '../../store/reducer-explorer.js';\nimport {\n  useInteractionModeState,\n  useSelectState,\n  useSetState,\n  useZoomState,\n} from '../../store/selectors.js';\nimport { XYChartSelectionArea } from '../selection/XYChartSelectionArea.js';\nimport { XYChartToolbar } from '../toolbar/XYChartToolbar.js';\nimport { XYChartOverlayTooltip } from '../tooltip/XYChartOverlayTooltip.js';\nimport { XYChartCrosshair } from './explore/XYChartCrosshair.js';\nimport { XYChartLinearPoint } from './explore/XYChartLinearPoint.js';\nimport { XYChartRectanglePoint } from './explore/XYChartRectanglePoint.js';\nimport { useOverlayEvents } from './hooks/useOverlayEvents.js';\nimport { isOwnEvent } from '../../../core/components/interactions-overlay/utils/is-own-event.js';\nimport {\n  useSelector,\n  useTooltipSnapshot,\n} from '../../../core/components/overlay-tooltip/selectors.js';\nimport type { _SelectionRef } from '../../../core/components/selection-area/types.js';\nimport { SynchronizedSelectionArea } from '../../../core/components/shared-chart-interactions/components/SynchronizedSelectionArea.js';\nimport { useSynchronizedSelection } from '../../../core/components/shared-chart-interactions/hooks/useSynchronizedSelection.js';\nimport { useToolbarHandlerRef } from '../../../core/components/toolbar/hooks/useToolbarHandlerRef.js';\nimport { ChartVariantContext } from '../../../core/context/ChartVariantContext.js';\nimport { useEffectOnValueChange } from '../../../core/hooks/useEffectOnValueChange.js';\nimport { zIndicesXYChartAreas } from '../../constants/xy-chart-z-index-areas.js';\nimport { XYChartSelectionAreaRefContext } from '../../context/XYChartSelectionAreaRef.context.js';\nimport { useSelectConfig } from '../../hooks/useSelectConfig.js';\nimport { useSyncedXScaleByPriority } from '../../hooks/useSyncedXScaleByPriority.js';\nimport { useXYChartCrosshairHidden } from '../../hooks/useXYChartCrosshairHidden.js';\nimport { useXYChartData } from '../../hooks/useXYChartData.js';\nimport { useXYChartId } from '../../hooks/useXYChartId.js';\n\nexport const XYChartOverlay = () => {\n  const setState = useSetState();\n  const handlerRef = useToolbarHandlerRef();\n  const overlay = useOverlay();\n  const selectionRef = useRef<_SelectionRef>(null);\n  const { width, height } = useGridPlotSize();\n  useSelector(({ inBounds, pinned }) => `${inBounds}-${pinned}`);\n  const { inBounds, pinned } = useTooltipSnapshot();\n  const {\n    handleModeChange,\n    handleHover,\n    handleTogglePin,\n    handleReset,\n    handleLeave,\n    handlePanChange,\n    handleSelectChange,\n    handleSelectEnd,\n    handleZoomChange,\n    handleSelectStart,\n    resetTooltip,\n  } = useOverlayEvents();\n  const mode = useInteractionModeState();\n  const selectState = useSelectState();\n  const synchronizedSelection = useSynchronizedSelection();\n  const chartId = useXYChartId();\n  const syncedXScale = useSyncedXScaleByPriority();\n  const { axesMetadata } = useXYChartData();\n  const { crosshair: crosshairConfig } = useContext(ChartVariantContext);\n  const { zoomOutEnabled } = useZoomState();\n  const isZoomDisabled = !axesMetadata.isZoomEnabled;\n  const isPanDisabled = !(axesMetadata.isPanEnabled && zoomOutEnabled);\n  const isSelectDisabled = useSelectConfig()?.disabled === true;\n\n  const { hideHorizontal, hideVertical } = useXYChartCrosshairHidden();\n\n  useEffect(() => {\n    if (\n      every([\n        selectState,\n        !synchronizedSelection.selectedChartId,\n        !synchronizedSelection?.disabled,\n      ])\n    ) {\n      // clear current chart selection if the shared selection was removed\n      setState((s) => ({ ...s, select: undefined }));\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [synchronizedSelection.selectedChartId]);\n\n  useEffect(() => {\n    if (synchronizedSelection.selectedChartId === chartId && !selectState) {\n      // clear shared chart selection if the current selection was removed\n      synchronizedSelection.resetSelectionState?.();\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [!!selectState]);\n\n  useEffectOnValueChange(() => {\n    if (!pinned) {\n      setState(reduceExploreCancelHighlight);\n    }\n  }, [pinned, setState]);\n\n  const showHighlightedData =\n    selectState === undefined || selectState?.variant === 'select';\n  const handleFocus = (event?: FocusEvent) => {\n    if (!event || event.cancelable) {\n      return;\n    }\n    if (isOwnEvent(event)) {\n      handlerRef.current.handleFocus();\n    }\n  };\n  return (\n    <InteractionsOverlay\n      style={{\n        zIndex: zIndicesXYChartAreas.overlays,\n        userSelect: selectState?.finished === false ? 'none' : 'auto',\n        cursor:\n          hideHorizontal && hideVertical ? 'default' : crosshairConfig?.cursor,\n      }}\n      ref={overlay.overlayRef}\n      mode={mode}\n      pinned={pinned}\n      selectionArea={\n        selectState ? [selectState?.start, selectState?.end] : undefined\n      }\n      width={width}\n      height={height}\n      onModeChange={handleModeChange}\n      onReset={handleReset}\n      onLeave={handleLeave}\n      onPanChange={handlePanChange}\n      onHover={handleHover}\n      onFocus={handleFocus}\n      onTogglePin={({ pin, position }) => handleTogglePin(pin, position)}\n      onSelectStart={handleSelectStart}\n      onSelectChange={handleSelectChange}\n      onSelectEnd={(event) => handleSelectEnd(event, selectionRef)}\n      onZoomChange={handleZoomChange}\n      isZoomDisabled={isZoomDisabled}\n      isZoomXDisabled={isZoomDisabled}\n      isPanDisabled={isPanDisabled}\n      isSelectDisabled={isSelectDisabled}\n    >\n      {(inBounds || pinned || selectState) && (\n        <>\n          <XYChartOverlayTooltip />\n          <XYChartCrosshair chartRef={overlay.overlayRef} />\n          {showHighlightedData && (\n            <>\n              <XYChartRectanglePoint />\n              <XYChartLinearPoint />\n            </>\n          )}\n        </>\n      )}\n      <XYChartSynchronizedCrosshair />\n      <XYChartSelectionAreaRefContext.Provider value={selectionRef}>\n        <XYChartToolbar onMouseEnter={resetTooltip} handlerRef={handlerRef} />\n        <XYChartSelectionArea />\n      </XYChartSelectionAreaRefContext.Provider>\n      {synchronizedSelection.selectedChartId &&\n        synchronizedSelection.selectedChartId !== chartId &&\n        syncedXScale && <SynchronizedSelectionArea scale={syncedXScale} />}\n    </InteractionsOverlay>\n  );\n};\n\nXYChartOverlay['displayName'] = 'XYChartOverlay';\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { every } from 'lodash-es';\nimport { useEffect, useRef, type FocusEvent } from 'react';\n\nimport { XYChartSynchronizedCrosshair } from './XYChartSynchronizedCrosshair.js';\nimport { useGridPlotSize } from '../../../core/components/chart-grid/hooks/useGridPlotSize.js';\nimport { InteractionsOverlay } from '../../../core/components/interactions-overlay/InteractionsOverlay.js';\nimport { useOverlay } from '../../../core/components/overlay-tooltip/contexts/OverlayContext.js';\nimport { reduceExploreCancelHighlight } from '../../store/reducer-explorer.js';\nimport {\n  useInteractionModeState,\n  useSelectState,\n  useSetState,\n  useZoomState,\n} from '../../store/selectors.js';\nimport { XYChartSelectionArea } from '../selection/XYChartSelectionArea.js';\nimport { XYChartToolbar } from '../toolbar/XYChartToolbar.js';\nimport { XYChartOverlayTooltip } from '../tooltip/XYChartOverlayTooltip.js';\nimport { XYChartCrosshair } from './explore/XYChartCrosshair.js';\nimport { XYChartLinearPoint } from './explore/XYChartLinearPoint.js';\nimport { XYChartRectanglePoint } from './explore/XYChartRectanglePoint.js';\nimport { useOverlayEvents } from './hooks/useOverlayEvents.js';\nimport { isOwnEvent } from '../../../core/components/interactions-overlay/utils/is-own-event.js';\nimport {\n  useSelector,\n  useTooltipSnapshot,\n} from '../../../core/components/overlay-tooltip/selectors.js';\nimport type { _SelectionRef } from '../../../core/components/selection-area/types.js';\nimport { SynchronizedSelectionArea } from '../../../core/components/shared-chart-interactions/components/SynchronizedSelectionArea.js';\nimport { useSynchronizedSelection } from '../../../core/components/shared-chart-interactions/hooks/useSynchronizedSelection.js';\nimport { useToolbarHandlerRef } from '../../../core/components/toolbar/hooks/useToolbarHandlerRef.js';\nimport { useEffectOnValueChange } from '../../../core/hooks/useEffectOnValueChange.js';\nimport { zIndicesXYChartAreas } from '../../constants/xy-chart-z-index-areas.js';\nimport { XYChartSelectionAreaRefContext } from '../../context/XYChartSelectionAreaRef.context.js';\nimport { useSelectConfig } from '../../hooks/useSelectConfig.js';\nimport { useSyncedXScaleByPriority } from '../../hooks/useSyncedXScaleByPriority.js';\nimport { useXYChartCrosshairHidden } from '../../hooks/useXYChartCrosshairHidden.js';\nimport { useXYChartData } from '../../hooks/useXYChartData.js';\nimport { useXYChartId } from '../../hooks/useXYChartId.js';\n\nexport const XYChartOverlay = () => {\n  const setState = useSetState();\n  const handlerRef = useToolbarHandlerRef();\n  const overlay = useOverlay();\n  const selectionRef = useRef<_SelectionRef>(null);\n  const { width, height } = useGridPlotSize();\n  useSelector(({ inBounds, pinned }) => `${inBounds}-${pinned}`);\n  const { inBounds, pinned } = useTooltipSnapshot();\n  const {\n    handleModeChange,\n    handleHover,\n    handleTogglePin,\n    handleReset,\n    handleLeave,\n    handlePanChange,\n    handleSelectChange,\n    handleSelectEnd,\n    handleZoomChange,\n    handleSelectStart,\n    resetTooltip,\n  } = useOverlayEvents();\n  const mode = useInteractionModeState();\n  const selectState = useSelectState();\n  const synchronizedSelection = useSynchronizedSelection();\n  const chartId = useXYChartId();\n  const syncedXScale = useSyncedXScaleByPriority();\n  const { axesMetadata } = useXYChartData();\n  const { zoomOutEnabled } = useZoomState();\n  const isZoomDisabled = !axesMetadata.isZoomEnabled;\n  const isPanDisabled = !(axesMetadata.isPanEnabled && zoomOutEnabled);\n  const isSelectDisabled = useSelectConfig()?.disabled === true;\n\n  const { hideHorizontal, hideVertical } = useXYChartCrosshairHidden();\n\n  useEffect(() => {\n    if (\n      every([\n        selectState,\n        !synchronizedSelection.selectedChartId,\n        !synchronizedSelection?.disabled,\n      ])\n    ) {\n      // clear current chart selection if the shared selection was removed\n      setState((s) => ({ ...s, select: undefined }));\n    }\n    // oxlint-disable-next-line react-hooks/exhaustive-deps\n  }, [synchronizedSelection.selectedChartId]);\n\n  useEffect(() => {\n    if (synchronizedSelection.selectedChartId === chartId && !selectState) {\n      // clear shared chart selection if the current selection was removed\n      synchronizedSelection.resetSelectionState?.();\n    }\n    // oxlint-disable-next-line react-hooks/exhaustive-deps\n  }, [!!selectState]);\n\n  useEffectOnValueChange(() => {\n    if (!pinned) {\n      setState(reduceExploreCancelHighlight);\n    }\n  }, [pinned, setState]);\n\n  const showHighlightedData =\n    selectState === undefined || selectState?.variant === 'select';\n  const handleFocus = (event?: FocusEvent) => {\n    if (!event || event.cancelable) {\n      return;\n    }\n    if (isOwnEvent(event)) {\n      handlerRef.current.handleFocus();\n    }\n  };\n  return (\n    <InteractionsOverlay\n      style={{\n        zIndex: zIndicesXYChartAreas.overlays,\n        userSelect: selectState?.finished === false ? 'none' : 'auto',\n        cursor: hideHorizontal && hideVertical ? 'default' : undefined,\n      }}\n      ref={overlay.overlayRef}\n      mode={mode}\n      pinned={pinned}\n      selectionArea={\n        selectState ? [selectState?.start, selectState?.end] : undefined\n      }\n      width={width}\n      height={height}\n      onModeChange={handleModeChange}\n      onReset={handleReset}\n      onLeave={handleLeave}\n      onPanChange={handlePanChange}\n      onHover={handleHover}\n      onFocus={handleFocus}\n      onTogglePin={({ pin, position }) => handleTogglePin(pin, position)}\n      onSelectStart={handleSelectStart}\n      onSelectChange={handleSelectChange}\n      onSelectEnd={(event) => handleSelectEnd(event, selectionRef)}\n      onZoomChange={handleZoomChange}\n      isZoomDisabled={isZoomDisabled}\n      isZoomXDisabled={isZoomDisabled}\n      isPanDisabled={isPanDisabled}\n      isSelectDisabled={isSelectDisabled}\n    >\n      {(inBounds || pinned || selectState) && (\n        <>\n          <XYChartOverlayTooltip />\n          <XYChartCrosshair chartRef={overlay.overlayRef} />\n          {showHighlightedData && (\n            <>\n              <XYChartRectanglePoint />\n              <XYChartLinearPoint />\n            </>\n          )}\n        </>\n      )}\n      <XYChartSynchronizedCrosshair />\n      <XYChartSelectionAreaRefContext.Provider value={selectionRef}>\n        <XYChartToolbar onMouseEnter={resetTooltip} handlerRef={handlerRef} />\n        <XYChartSelectionArea />\n      </XYChartSelectionAreaRefContext.Provider>\n      {synchronizedSelection.selectedChartId &&\n        synchronizedSelection.selectedChartId !== chartId &&\n        syncedXScale && <SynchronizedSelectionArea scale={syncedXScale} />}\n    </InteractionsOverlay>\n  );\n};\n\nXYChartOverlay['displayName'] = 'XYChartOverlay';\n"],
+  "mappings": "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",
   "names": ["inBounds", "pinned"]
 }

package/esm/charts/xy-chart/components/overlay/explore/XYChartCrosshair.css

@@ -1,4 +1,4 @@
-._1bbe5uo0-3-12-2 {
+._1bbe5uo0-3-13-0 {
   overflow: visible;
   cursor: crosshair;
   z-index: 1;

package/esm/charts/xy-chart/components/overlay/explore/XYChartCrosshair.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import clsx from "clsx";
-import { useContext, useMemo } from "react";
+import { useMemo } from "react";
 import { crosshair } from "./XYChartCrosshair.sty.js";
 import { plotLayout } from "../../../../core/components/chart-grid/ChartGrid.sty.js";
 import { useGridPlotSize } from "../../../../core/components/chart-grid/hooks/useGridPlotSize.js";
@@ -11,7 +11,6 @@ import {
   useTooltipSnapshot
 } from "../../../../core/components/overlay-tooltip/selectors.js";
 import { useTooltipReducer } from "../../../../core/components/overlay-tooltip/useTooltipReducer.js";
-import { ChartVariantContext } from "../../../../core/context/ChartVariantContext.js";
 import { useApplyCallbackOnScroll } from "../../../../core/hooks/useApplyCallbackOnScroll.js";
 import { useAxesFormatter } from "../../../hooks/useAxesFormatter.js";
 import { useFormatCategory } from "../../../hooks/useFormatCategory.js";
@@ -40,15 +39,18 @@ function XYChartCrosshairLines({
   height,
   thresholdOffset,
   thresholdYAxes,
+  thresholdXAxes,
   axisIdToScaleDomain,
   seriesToMetadata,
   datapointMetadataMap,
   axisIdToScales,
   hasVisibleSeriesOnThresholdAxis,
+  hasVisibleSeriesOnThresholdXAxis,
   chartBounds,
   isBottomLabelRotated,
   isTopLabelRotated,
   widthWithBaseOffset,
+  heightWithBaseOffset,
   hideHorizontal,
   hideVertical
 }) {
@@ -91,7 +93,6 @@ function XYChartCrosshairLines({
     isHorizontal,
     isStacked
   ]);
-  const { crosshair: crosshairConfig } = useContext(ChartVariantContext);
   const coordinates = calculatedCoordinates ?? position ?? { x: 0, y: 0 };
   if (!position) {
     return null;
@@ -100,9 +101,12 @@ function XYChartCrosshairLines({
   const leftOffset = labels.left && hasVisibleSeriesOnThresholdAxis(thresholdYAxes.left) ? thresholdOffset.left : 0;
   const rightOffset = labels.right && hasVisibleSeriesOnThresholdAxis(thresholdYAxes.right) ? thresholdOffset.right : 0;
   const widthWithOffset = widthWithBaseOffset + leftOffset + rightOffset;
+  const topOffset = labels.top && hasVisibleSeriesOnThresholdXAxis(thresholdXAxes.top) ? thresholdOffset.top : 0;
+  const bottomOffset = labels.bottom && hasVisibleSeriesOnThresholdXAxis(thresholdXAxes.bottom) ? thresholdOffset.bottom : 0;
+  const heightWithOffset = heightWithBaseOffset + topOffset + bottomOffset;
   const isBand = variant === "band";
-  const showHorizontalCrosshair = (!isBand || isHorizontal || !pinned) && !crosshairConfig?.horizontalHidden && !hideHorizontal;
-  const showVerticalCrosshair = (!isBand || !isHorizontal || !pinned) && !crosshairConfig?.verticalHidden && !hideVertical;
+  const showHorizontalCrosshair = (!isBand || isHorizontal || !pinned) && !hideHorizontal;
+  const showVerticalCrosshair = (!isBand || !isHorizontal || !pinned) && !hideVertical;
   return /* @__PURE__ */ jsxs("svg", { className: clsx(plotLayout, crosshair), children: [
     showHorizontalCrosshair && /* @__PURE__ */ jsx(
       HorizontalCrosshair,
@@ -127,8 +131,11 @@ function XYChartCrosshairLines({
         isBottomLabelRotated,
         isTopLabelRotated,
         x: coordinates.x,
-        height,
+        top: -topOffset,
+        height: heightWithOffset,
         width: widthWithOffset,
+        offset: bottomOffset,
+        topOffset,
         chartBounds
       }
     )
@@ -143,7 +150,11 @@ function XYChartCrosshair({
   const axesIdToFormatter = useAxesFormatter();
   const formatCategory = useFormatCategory();
   const { width, height } = useGridPlotSize();
-  const { offset: thresholdOffset, yAxes: thresholdYAxes } = useGetThresholds();
+  const {
+    offset: thresholdOffset,
+    yAxes: thresholdYAxes,
+    xAxes: thresholdXAxes
+  } = useGetThresholds();
   const { axisIdToScaleDomain, seriesToMetadata, datapointMetadataMap } = useXYChartData();
   const axisIdToScales = useXYChartScales();
   const chartBounds = chartRef.current?.getBoundingClientRect();
@@ -153,17 +164,23 @@ function XYChartCrosshair({
   const isBottomLabelRotated = axesConfig["bottom"]?.tickLabelLayout === "vertical";
   const isTopLabelRotated = axesConfig["top"]?.tickLabelLayout === "vertical";
   const { hideHorizontal, hideVertical } = useXYChartCrosshairHidden();
-  const hasVisibleSeriesOnThresholdAxis = (() => {
+  const { hasVisibleSeriesOnThresholdAxis, hasVisibleSeriesOnThresholdXAxis } = (() => {
     if (!filteredSeriesIds) {
-      return (_axisIds) => true;
+      return {
+        hasVisibleSeriesOnThresholdAxis: (_axisIds) => true,
+        hasVisibleSeriesOnThresholdXAxis: (_axisIds) => true
+      };
     }
     const visibleSeriesEntries = [...seriesToMetadata.entries()].filter(
       ([series]) => filteredSeriesIds.has(series.id)
     );
-    return (axisIds) => {
-      return visibleSeriesEntries.some(
+    return {
+      hasVisibleSeriesOnThresholdAxis: (axisIds) => visibleSeriesEntries.some(
         ([, series]) => axisIds.has(series.yAxis?.id ?? "")
-      );
+      ),
+      hasVisibleSeriesOnThresholdXAxis: (axisIds) => visibleSeriesEntries.some(
+        ([, series]) => axisIds.has(series.xAxis?.id ?? "")
+      )
     };
   })();
   const getLabels = chartCrosshairDataTransformer({
@@ -180,15 +197,18 @@ function XYChartCrosshair({
       height,
       thresholdOffset,
       thresholdYAxes,
+      thresholdXAxes,
       axisIdToScaleDomain,
       seriesToMetadata,
       datapointMetadataMap,
       axisIdToScales,
       hasVisibleSeriesOnThresholdAxis,
+      hasVisibleSeriesOnThresholdXAxis,
       chartBounds,
       isBottomLabelRotated,
       isTopLabelRotated,
       widthWithBaseOffset: width,
+      heightWithBaseOffset: height,
       hideHorizontal,
       hideVertical
     }

package/esm/charts/xy-chart/components/overlay/explore/XYChartCrosshair.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/xy-chart/components/overlay/explore/XYChartCrosshair.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport { type RefObject, useContext, useMemo } from 'react';\n\nimport { crosshair } from './XYChartCrosshair.sty.js';\nimport { plotLayout } from '../../../../core/components/chart-grid/ChartGrid.sty.js';\nimport { useGridPlotSize } from '../../../../core/components/chart-grid/hooks/useGridPlotSize.js';\nimport { HorizontalCrosshair } from '../../../../core/components/crosshair/HorizontalCrosshair.js';\nimport { VerticalCrosshair } from '../../../../core/components/crosshair/VerticalCrosshair.js';\nimport {\n  useSelector,\n  useTooltipSnapshot,\n} from '../../../../core/components/overlay-tooltip/selectors.js';\nimport { useTooltipReducer } from '../../../../core/components/overlay-tooltip/useTooltipReducer.js';\nimport { ChartVariantContext } from '../../../../core/context/ChartVariantContext.js';\nimport { useApplyCallbackOnScroll } from '../../../../core/hooks/useApplyCallbackOnScroll.js';\nimport { useAxesFormatter } from '../../../hooks/useAxesFormatter.js';\nimport { useFormatCategory } from '../../../hooks/useFormatCategory.js';\nimport { useGetThresholds } from '../../../hooks/useGetThresholds.js';\nimport { useVisibleAxesConfig } from '../../../hooks/useVisibleAxesConfig.js';\nimport { useVisibleAxesScales } from '../../../hooks/useVisibleAxesScales.js';\nimport { useXYChartCrosshairHidden } from '../../../hooks/useXYChartCrosshairHidden.js';\nimport { useXYChartData } from '../../../hooks/useXYChartData.js';\nimport { useXYChartScales } from '../../../hooks/useXYChartScales.js';\nimport { useFilteredSeriesIdsState } from '../../../store/selectors.js';\nimport {\n  UndefinedContent,\n  type XYChartTooltipMetadata,\n} from '../../../types/state.js';\nimport {\n  isAreaTooltipContent,\n  isDotTooltipContent,\n  isLineTooltipContent,\n} from '../../../utils/type-guards.js';\nimport { relAccessor } from '../../../utils/value-representation.js';\nimport { calculateCrosshairCoordinates } from '../utils/calculate-crosshair-coordinates.js';\nimport {\n  chartCrosshairDataTransformer,\n  type CrosshairLabelsGetter,\n} from '../utils/chartCrosshairDataTransformer.js';\n\ntype XYChartCrosshairLinesProps = Readonly<{\n  getLabels: CrosshairLabelsGetter;\n  height: number;\n  thresholdOffset: ReturnType<typeof useGetThresholds>['offset'];\n  thresholdYAxes: ReturnType<typeof useGetThresholds>['yAxes'];\n  axisIdToScaleDomain: ReturnType<typeof useXYChartData>['axisIdToScaleDomain'];\n  seriesToMetadata: ReturnType<typeof useXYChartData>['seriesToMetadata'];\n  datapointMetadataMap: ReturnType<\n    typeof useXYChartData\n  >['datapointMetadataMap'];\n  axisIdToScales: ReturnType<typeof useXYChartScales>;\n  hasVisibleSeriesOnThresholdAxis: (axisIds: Set<string>) => boolean;\n  chartBounds: DOMRect | undefined;\n  isBottomLabelRotated: boolean;\n  isTopLabelRotated: boolean;\n  widthWithBaseOffset: number;\n  hideHorizontal: boolean;\n  hideVertical: boolean;\n}>;\n\nfunction XYChartCrosshairLines({\n  getLabels,\n  height,\n  thresholdOffset,\n  thresholdYAxes,\n  axisIdToScaleDomain,\n  seriesToMetadata,\n  datapointMetadataMap,\n  axisIdToScales,\n  hasVisibleSeriesOnThresholdAxis,\n  chartBounds,\n  isBottomLabelRotated,\n  isTopLabelRotated,\n  widthWithBaseOffset,\n  hideHorizontal,\n  hideVertical,\n}: XYChartCrosshairLinesProps) {\n  useSelector(({ relativeX, relativeY }) => `${relativeX}-${relativeY}`);\n  const { relativeX, relativeY, pinned, data } = useTooltipSnapshot();\n  const position =\n    relativeX !== null && relativeY !== null\n      ? { x: relativeX, y: relativeY }\n      : undefined;\n\n  const tooltipContent =\n    (data.metadata as XYChartTooltipMetadata | undefined)?.preferred ??\n    UndefinedContent;\n\n  const { xAxis, yAxis, variant, orientation, isStacked } =\n    seriesToMetadata.get(tooltipContent?.series) ?? {};\n\n  const isArea = isAreaTooltipContent(tooltipContent);\n  const isHorizontal = orientation === 'horizontal';\n\n  const calculatedCoordinates = useMemo(() => {\n    const tooltipContentHasCenteredCrosshair =\n      isDotTooltipContent(tooltipContent) ||\n      isLineTooltipContent(tooltipContent) ||\n      isAreaTooltipContent(tooltipContent);\n\n    if (\n      !pinned ||\n      !tooltipContentHasCenteredCrosshair ||\n      !tooltipContent.series ||\n      !tooltipContent.datapoint\n    ) {\n      return null;\n    }\n\n    const xRelAccessor = xAxis\n      ? relAccessor(xAxis, axisIdToScaleDomain)\n      : undefined;\n    const yRelAccessor = yAxis\n      ? relAccessor(yAxis, axisIdToScaleDomain)\n      : undefined;\n\n    return calculateCrosshairCoordinates({\n      pinned,\n      tooltipContentHasCenteredCrosshair,\n      tooltipContentSeries: tooltipContent.series,\n      datapoint: tooltipContent.datapoint,\n      axisIdToScales,\n      datapointMetadataMap,\n      xRelAccessor,\n      yRelAccessor,\n      isArea,\n      isHorizontal,\n      isStacked,\n    });\n  }, [\n    tooltipContent,\n    xAxis,\n    yAxis,\n    axisIdToScaleDomain,\n    pinned,\n    axisIdToScales,\n    datapointMetadataMap,\n    isArea,\n    isHorizontal,\n    isStacked,\n  ]);\n\n  const { crosshair: crosshairConfig } = useContext(ChartVariantContext);\n\n  const coordinates = calculatedCoordinates ?? position ?? { x: 0, y: 0 };\n\n  if (!position) {\n    return null;\n  }\n\n  const labels = getLabels({ position, pinned });\n\n  const leftOffset =\n    labels.left && hasVisibleSeriesOnThresholdAxis(thresholdYAxes.left)\n      ? thresholdOffset.left\n      : 0;\n  const rightOffset =\n    labels.right && hasVisibleSeriesOnThresholdAxis(thresholdYAxes.right)\n      ? thresholdOffset.right\n      : 0;\n  const widthWithOffset = widthWithBaseOffset + leftOffset + rightOffset;\n\n  const isBand = variant === 'band';\n  const showHorizontalCrosshair =\n    (!isBand || isHorizontal || !pinned) &&\n    !crosshairConfig?.horizontalHidden &&\n    !hideHorizontal;\n  const showVerticalCrosshair =\n    (!isBand || !isHorizontal || !pinned) &&\n    !crosshairConfig?.verticalHidden &&\n    !hideVertical;\n\n  return (\n    <svg className={clsx(plotLayout, crosshair)}>\n      {showHorizontalCrosshair && (\n        <HorizontalCrosshair\n          dashed={!pinned}\n          leftLabel={labels.left}\n          rightLabel={labels.right}\n          y={coordinates.y}\n          width={widthWithOffset}\n          height={height}\n          chartBounds={chartBounds}\n          leftOffset={leftOffset}\n          rightOffset={rightOffset}\n        />\n      )}\n      {showVerticalCrosshair && (\n        <VerticalCrosshair\n          dashed={!pinned}\n          bottomLabel={labels.bottom}\n          topLabel={labels.top}\n          isBottomLabelRotated={isBottomLabelRotated}\n          isTopLabelRotated={isTopLabelRotated}\n          x={coordinates.x}\n          height={height}\n          width={widthWithOffset}\n          chartBounds={chartBounds}\n        />\n      )}\n    </svg>\n  );\n}\n\nexport function XYChartCrosshair({\n  chartRef,\n}: Readonly<{\n  chartRef: RefObject<HTMLDivElement | null>;\n}>) {\n  const filteredSeriesIds = useFilteredSeriesIdsState();\n  const axesScale = useVisibleAxesScales();\n  const axesConfig = useVisibleAxesConfig();\n  const axesIdToFormatter = useAxesFormatter();\n  const formatCategory = useFormatCategory();\n  const { width, height } = useGridPlotSize();\n  const { offset: thresholdOffset, yAxes: thresholdYAxes } = useGetThresholds();\n  const { axisIdToScaleDomain, seriesToMetadata, datapointMetadataMap } =\n    useXYChartData();\n  const axisIdToScales = useXYChartScales();\n\n  const chartBounds = chartRef.current?.getBoundingClientRect();\n\n  const dispatch = useTooltipReducer();\n  const pinned = useSelector(({ pinned }) => pinned);\n  useApplyCallbackOnScroll(pinned, dispatch({ type: 'RESET_TOOLTIP' }));\n\n  const isBottomLabelRotated =\n    axesConfig['bottom']?.tickLabelLayout === 'vertical';\n  const isTopLabelRotated = axesConfig['top']?.tickLabelLayout === 'vertical';\n\n  const { hideHorizontal, hideVertical } = useXYChartCrosshairHidden();\n\n  const hasVisibleSeriesOnThresholdAxis = (() => {\n    if (!filteredSeriesIds) {\n      return (_axisIds: Set<string>) => true;\n    }\n    const visibleSeriesEntries = [...seriesToMetadata.entries()].filter(\n      ([series]) => filteredSeriesIds.has(series.id),\n    );\n    return (axisIds: Set<string>) => {\n      return visibleSeriesEntries.some(([, series]) =>\n        axisIds.has(series.yAxis?.id ?? ''),\n      );\n    };\n  })();\n\n  const getLabels = chartCrosshairDataTransformer({\n    axesScale,\n    axesConfig,\n    axesIdToFormatter,\n    width,\n    formatCategory,\n  });\n\n  return (\n    <XYChartCrosshairLines\n      getLabels={getLabels}\n      height={height}\n      thresholdOffset={thresholdOffset}\n      thresholdYAxes={thresholdYAxes}\n      axisIdToScaleDomain={axisIdToScaleDomain}\n      seriesToMetadata={seriesToMetadata}\n      datapointMetadataMap={datapointMetadataMap}\n      axisIdToScales={axisIdToScales}\n      hasVisibleSeriesOnThresholdAxis={hasVisibleSeriesOnThresholdAxis}\n      chartBounds={chartBounds}\n      isBottomLabelRotated={isBottomLabelRotated}\n      isTopLabelRotated={isTopLabelRotated}\n      widthWithBaseOffset={width}\n      hideHorizontal={hideHorizontal}\n      hideVertical={hideVertical}\n    />\n  );\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import clsx from 'clsx';\nimport { type RefObject, useMemo } from 'react';\n\nimport { crosshair } from './XYChartCrosshair.sty.js';\nimport { plotLayout } from '../../../../core/components/chart-grid/ChartGrid.sty.js';\nimport { useGridPlotSize } from '../../../../core/components/chart-grid/hooks/useGridPlotSize.js';\nimport { HorizontalCrosshair } from '../../../../core/components/crosshair/HorizontalCrosshair.js';\nimport { VerticalCrosshair } from '../../../../core/components/crosshair/VerticalCrosshair.js';\nimport {\n  useSelector,\n  useTooltipSnapshot,\n} from '../../../../core/components/overlay-tooltip/selectors.js';\nimport { useTooltipReducer } from '../../../../core/components/overlay-tooltip/useTooltipReducer.js';\nimport { useApplyCallbackOnScroll } from '../../../../core/hooks/useApplyCallbackOnScroll.js';\nimport { useAxesFormatter } from '../../../hooks/useAxesFormatter.js';\nimport { useFormatCategory } from '../../../hooks/useFormatCategory.js';\nimport { useGetThresholds } from '../../../hooks/useGetThresholds.js';\nimport { useVisibleAxesConfig } from '../../../hooks/useVisibleAxesConfig.js';\nimport { useVisibleAxesScales } from '../../../hooks/useVisibleAxesScales.js';\nimport { useXYChartCrosshairHidden } from '../../../hooks/useXYChartCrosshairHidden.js';\nimport { useXYChartData } from '../../../hooks/useXYChartData.js';\nimport { useXYChartScales } from '../../../hooks/useXYChartScales.js';\nimport { useFilteredSeriesIdsState } from '../../../store/selectors.js';\nimport {\n  UndefinedContent,\n  type XYChartTooltipMetadata,\n} from '../../../types/state.js';\nimport {\n  isAreaTooltipContent,\n  isDotTooltipContent,\n  isLineTooltipContent,\n} from '../../../utils/type-guards.js';\nimport { relAccessor } from '../../../utils/value-representation.js';\nimport { calculateCrosshairCoordinates } from '../utils/calculate-crosshair-coordinates.js';\nimport {\n  chartCrosshairDataTransformer,\n  type CrosshairLabelsGetter,\n} from '../utils/chartCrosshairDataTransformer.js';\n\ntype XYChartCrosshairLinesProps = Readonly<{\n  getLabels: CrosshairLabelsGetter;\n  height: number;\n  thresholdOffset: ReturnType<typeof useGetThresholds>['offset'];\n  thresholdYAxes: ReturnType<typeof useGetThresholds>['yAxes'];\n  thresholdXAxes: ReturnType<typeof useGetThresholds>['xAxes'];\n  axisIdToScaleDomain: ReturnType<typeof useXYChartData>['axisIdToScaleDomain'];\n  seriesToMetadata: ReturnType<typeof useXYChartData>['seriesToMetadata'];\n  datapointMetadataMap: ReturnType<\n    typeof useXYChartData\n  >['datapointMetadataMap'];\n  axisIdToScales: ReturnType<typeof useXYChartScales>;\n  hasVisibleSeriesOnThresholdAxis: (axisIds: Set<string>) => boolean;\n  hasVisibleSeriesOnThresholdXAxis: (axisIds: Set<string>) => boolean;\n  chartBounds: DOMRect | undefined;\n  isBottomLabelRotated: boolean;\n  isTopLabelRotated: boolean;\n  widthWithBaseOffset: number;\n  heightWithBaseOffset: number;\n  hideHorizontal: boolean;\n  hideVertical: boolean;\n}>;\n\nfunction XYChartCrosshairLines({\n  getLabels,\n  height,\n  thresholdOffset,\n  thresholdYAxes,\n  thresholdXAxes,\n  axisIdToScaleDomain,\n  seriesToMetadata,\n  datapointMetadataMap,\n  axisIdToScales,\n  hasVisibleSeriesOnThresholdAxis,\n  hasVisibleSeriesOnThresholdXAxis,\n  chartBounds,\n  isBottomLabelRotated,\n  isTopLabelRotated,\n  widthWithBaseOffset,\n  heightWithBaseOffset,\n  hideHorizontal,\n  hideVertical,\n}: XYChartCrosshairLinesProps) {\n  useSelector(({ relativeX, relativeY }) => `${relativeX}-${relativeY}`);\n  const { relativeX, relativeY, pinned, data } = useTooltipSnapshot();\n  const position =\n    relativeX !== null && relativeY !== null\n      ? { x: relativeX, y: relativeY }\n      : undefined;\n\n  const tooltipContent =\n    (data.metadata as XYChartTooltipMetadata | undefined)?.preferred ??\n    UndefinedContent;\n\n  const { xAxis, yAxis, variant, orientation, isStacked } =\n    seriesToMetadata.get(tooltipContent?.series) ?? {};\n\n  const isArea = isAreaTooltipContent(tooltipContent);\n  const isHorizontal = orientation === 'horizontal';\n\n  const calculatedCoordinates = useMemo(() => {\n    const tooltipContentHasCenteredCrosshair =\n      isDotTooltipContent(tooltipContent) ||\n      isLineTooltipContent(tooltipContent) ||\n      isAreaTooltipContent(tooltipContent);\n\n    if (\n      !pinned ||\n      !tooltipContentHasCenteredCrosshair ||\n      !tooltipContent.series ||\n      !tooltipContent.datapoint\n    ) {\n      return null;\n    }\n\n    const xRelAccessor = xAxis\n      ? relAccessor(xAxis, axisIdToScaleDomain)\n      : undefined;\n    const yRelAccessor = yAxis\n      ? relAccessor(yAxis, axisIdToScaleDomain)\n      : undefined;\n\n    return calculateCrosshairCoordinates({\n      pinned,\n      tooltipContentHasCenteredCrosshair,\n      tooltipContentSeries: tooltipContent.series,\n      datapoint: tooltipContent.datapoint,\n      axisIdToScales,\n      datapointMetadataMap,\n      xRelAccessor,\n      yRelAccessor,\n      isArea,\n      isHorizontal,\n      isStacked,\n    });\n  }, [\n    tooltipContent,\n    xAxis,\n    yAxis,\n    axisIdToScaleDomain,\n    pinned,\n    axisIdToScales,\n    datapointMetadataMap,\n    isArea,\n    isHorizontal,\n    isStacked,\n  ]);\n\n  const coordinates = calculatedCoordinates ?? position ?? { x: 0, y: 0 };\n\n  if (!position) {\n    return null;\n  }\n\n  const labels = getLabels({ position, pinned });\n\n  const leftOffset =\n    labels.left && hasVisibleSeriesOnThresholdAxis(thresholdYAxes.left)\n      ? thresholdOffset.left\n      : 0;\n  const rightOffset =\n    labels.right && hasVisibleSeriesOnThresholdAxis(thresholdYAxes.right)\n      ? thresholdOffset.right\n      : 0;\n  const widthWithOffset = widthWithBaseOffset + leftOffset + rightOffset;\n\n  const topOffset =\n    labels.top && hasVisibleSeriesOnThresholdXAxis(thresholdXAxes.top)\n      ? thresholdOffset.top\n      : 0;\n  const bottomOffset =\n    labels.bottom && hasVisibleSeriesOnThresholdXAxis(thresholdXAxes.bottom)\n      ? thresholdOffset.bottom\n      : 0;\n  const heightWithOffset = heightWithBaseOffset + topOffset + bottomOffset;\n\n  const isBand = variant === 'band';\n  const showHorizontalCrosshair =\n    (!isBand || isHorizontal || !pinned) && !hideHorizontal;\n  const showVerticalCrosshair =\n    (!isBand || !isHorizontal || !pinned) && !hideVertical;\n\n  return (\n    <svg className={clsx(plotLayout, crosshair)}>\n      {showHorizontalCrosshair && (\n        <HorizontalCrosshair\n          dashed={!pinned}\n          leftLabel={labels.left}\n          rightLabel={labels.right}\n          y={coordinates.y}\n          width={widthWithOffset}\n          height={height}\n          chartBounds={chartBounds}\n          leftOffset={leftOffset}\n          rightOffset={rightOffset}\n        />\n      )}\n      {showVerticalCrosshair && (\n        <VerticalCrosshair\n          dashed={!pinned}\n          bottomLabel={labels.bottom}\n          topLabel={labels.top}\n          isBottomLabelRotated={isBottomLabelRotated}\n          isTopLabelRotated={isTopLabelRotated}\n          x={coordinates.x}\n          top={-topOffset}\n          height={heightWithOffset}\n          width={widthWithOffset}\n          offset={bottomOffset}\n          topOffset={topOffset}\n          chartBounds={chartBounds}\n        />\n      )}\n    </svg>\n  );\n}\n\nexport function XYChartCrosshair({\n  chartRef,\n}: Readonly<{\n  chartRef: RefObject<HTMLDivElement | null>;\n}>) {\n  const filteredSeriesIds = useFilteredSeriesIdsState();\n  const axesScale = useVisibleAxesScales();\n  const axesConfig = useVisibleAxesConfig();\n  const axesIdToFormatter = useAxesFormatter();\n  const formatCategory = useFormatCategory();\n  const { width, height } = useGridPlotSize();\n  const {\n    offset: thresholdOffset,\n    yAxes: thresholdYAxes,\n    xAxes: thresholdXAxes,\n  } = useGetThresholds();\n  const { axisIdToScaleDomain, seriesToMetadata, datapointMetadataMap } =\n    useXYChartData();\n  const axisIdToScales = useXYChartScales();\n\n  const chartBounds = chartRef.current?.getBoundingClientRect();\n\n  const dispatch = useTooltipReducer();\n  const pinned = useSelector(({ pinned }) => pinned);\n  useApplyCallbackOnScroll(pinned, dispatch({ type: 'RESET_TOOLTIP' }));\n\n  const isBottomLabelRotated =\n    axesConfig['bottom']?.tickLabelLayout === 'vertical';\n  const isTopLabelRotated = axesConfig['top']?.tickLabelLayout === 'vertical';\n\n  const { hideHorizontal, hideVertical } = useXYChartCrosshairHidden();\n\n  const { hasVisibleSeriesOnThresholdAxis, hasVisibleSeriesOnThresholdXAxis } =\n    (() => {\n      if (!filteredSeriesIds) {\n        return {\n          hasVisibleSeriesOnThresholdAxis: (_axisIds: Set<string>) => true,\n          hasVisibleSeriesOnThresholdXAxis: (_axisIds: Set<string>) => true,\n        };\n      }\n      const visibleSeriesEntries = [...seriesToMetadata.entries()].filter(\n        ([series]) => filteredSeriesIds.has(series.id),\n      );\n      return {\n        hasVisibleSeriesOnThresholdAxis: (axisIds: Set<string>) =>\n          visibleSeriesEntries.some(([, series]) =>\n            axisIds.has(series.yAxis?.id ?? ''),\n          ),\n        hasVisibleSeriesOnThresholdXAxis: (axisIds: Set<string>) =>\n          visibleSeriesEntries.some(([, series]) =>\n            axisIds.has(series.xAxis?.id ?? ''),\n          ),\n      };\n    })();\n\n  const getLabels = chartCrosshairDataTransformer({\n    axesScale,\n    axesConfig,\n    axesIdToFormatter,\n    width,\n    formatCategory,\n  });\n\n  return (\n    <XYChartCrosshairLines\n      getLabels={getLabels}\n      height={height}\n      thresholdOffset={thresholdOffset}\n      thresholdYAxes={thresholdYAxes}\n      thresholdXAxes={thresholdXAxes}\n      axisIdToScaleDomain={axisIdToScaleDomain}\n      seriesToMetadata={seriesToMetadata}\n      datapointMetadataMap={datapointMetadataMap}\n      axisIdToScales={axisIdToScales}\n      hasVisibleSeriesOnThresholdAxis={hasVisibleSeriesOnThresholdAxis}\n      hasVisibleSeriesOnThresholdXAxis={hasVisibleSeriesOnThresholdXAxis}\n      chartBounds={chartBounds}\n      isBottomLabelRotated={isBottomLabelRotated}\n      isTopLabelRotated={isTopLabelRotated}\n      widthWithBaseOffset={width}\n      heightWithBaseOffset={height}\n      hideHorizontal={hideHorizontal}\n      hideVertical={hideVertical}\n    />\n  );\n}\n"],
+  "mappings": "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",
   "names": ["relativeX", "relativeY", "pinned"]
 }

package/esm/charts/xy-chart/components/overlay/explore/XYChartCrosshair.sty.js

@@ -1,5 +1,5 @@
 import "./XYChartCrosshair.css";
-var crosshair = "_1bbe5uo0-3-12-2";
+var crosshair = "_1bbe5uo0-3-13-0";
 export {
   crosshair
 };

package/esm/charts/xy-chart/components/overlay/explore/XYChartCrosshair.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/xy-chart/components/overlay/explore/XYChartCrosshair.css.ts"],
-  "sourcesContent": ["import './XYChartCrosshair.css';\nexport var crosshair = '_1bbe5uo0-3-12-2';"],
+  "sourcesContent": ["import './XYChartCrosshair.css';\nexport var crosshair = '_1bbe5uo0-3-13-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,YAAY;",
   "names": []
 }

package/esm/charts/xy-chart/components/overlay/explore/XYChartExplore.css

@@ -1,4 +1,4 @@
-._cd1yys0-3-12-2 {
+._cd1yys0-3-13-0 {
   top: -11px;
   left: -11px;
   width: calc(100% + 22px);
@@ -6,7 +6,7 @@
   z-index: 2;
   pointer-events: none;
 }
-._cd1yys1-3-12-2 {
+._cd1yys1-3-13-0 {
   top: 0px;
   left: 0px;
   width: calc(100% + 1px);

package/esm/charts/xy-chart/components/overlay/explore/XYChartExplore.sty.js

@@ -1,7 +1,7 @@
 import "../../../../core/components/chart-grid/ChartGrid.css";
 import "./XYChartExplore.css";
-var datapointIndicatorLayout = "_cd1yys1-3-12-2 _13lzg4k0-3-12-2";
-var datapointIndicatorShiftedLayout = "_cd1yys0-3-12-2 _13lzg4k0-3-12-2";
+var datapointIndicatorLayout = "_cd1yys1-3-13-0 _13lzg4k0-3-13-0";
+var datapointIndicatorShiftedLayout = "_cd1yys0-3-13-0 _13lzg4k0-3-13-0";
 export {
   datapointIndicatorLayout,
   datapointIndicatorShiftedLayout

package/esm/charts/xy-chart/components/overlay/explore/XYChartExplore.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/xy-chart/components/overlay/explore/XYChartExplore.css.ts"],
-  "sourcesContent": ["import '../../../../core/components/chart-grid/ChartGrid.css';\nimport './XYChartExplore.css';\nexport var datapointIndicatorLayout = '_cd1yys1-3-12-2 _13lzg4k0-3-12-2';\nexport var datapointIndicatorShiftedLayout = '_cd1yys0-3-12-2 _13lzg4k0-3-12-2';"],
+  "sourcesContent": ["import '../../../../core/components/chart-grid/ChartGrid.css';\nimport './XYChartExplore.css';\nexport var datapointIndicatorLayout = '_cd1yys1-3-13-0 _13lzg4k0-3-13-0';\nexport var datapointIndicatorShiftedLayout = '_cd1yys0-3-13-0 _13lzg4k0-3-13-0';"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACA,IAAI,2BAA2B;AAC/B,IAAI,kCAAkC;",
   "names": []
 }

package/esm/charts/xy-chart/components/overlay/hooks/useOverlayEvents.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/xy-chart/components/overlay/hooks/useOverlayEvents.ts"],
-  "sourcesContent": ["import { useEffect, type RefObject } from 'react';\n\nimport { useApplyPanDelta } from './useApplyPanDelta.js';\nimport { useApplyZoomDelta } from './useApplyZoomDelta.js';\nimport { useResetInteractions } from './useResetInteractions.js';\nimport { useZoomToSelection } from './useZoomToSelection.js';\nimport { useGridPlotSize } from '../../../../core/components/chart-grid/hooks/useGridPlotSize.js';\nimport {\n  INTERACTION_MODE,\n  type InteractionMode,\n  type InteractionTriggers,\n  isSelectCancelled,\n  type ZoomBehavior,\n} from '../../../../core/components/interactions-overlay/types.js';\nimport { useDismissChartTooltipSignal } from '../../../../core/components/overlay-tooltip/pinCoordinationSelectors.js';\nimport { usePinCoordinationActions } from '../../../../core/components/overlay-tooltip/usePinCoordinationActions.js';\nimport { useTooltipActions } from '../../../../core/components/overlay-tooltip/useTooltipActions.js';\nimport type {\n  _SelectionRef,\n  SelectionAreaVariant,\n} from '../../../../core/components/selection-area/types.js';\nimport { useSynchronizedCrosshair } from '../../../../core/components/shared-chart-interactions/hooks/useSynchronizedCrosshair.js';\nimport { useSynchronizedSelection } from '../../../../core/components/shared-chart-interactions/hooks/useSynchronizedSelection.js';\nimport type { RelativeAbsolutePosition } from '../../../../core/types/pointer-events.js';\nimport { ZOOM_CHANGE_TYPE } from '../../../../core/types/zoom.js';\nimport { getPercentageFromPixel } from '../../../../core/utils/get-percentage-from-pixel.js';\nimport { isTouchableDevice } from '../../../../core/utils/is-touchable-device.js';\nimport { useAreaData } from '../../../hooks/useAreaData.js';\nimport { useBarData } from '../../../hooks/useBarData.js';\nimport { useDotData } from '../../../hooks/useDotData.js';\nimport { useLineData } from '../../../hooks/useLineData.js';\nimport { useOverlayPerformance } from '../../../hooks/useOverlayPerformance.js';\nimport { useRectData } from '../../../hooks/useRectData.js';\nimport { useSyncedXScaleByPriority } from '../../../hooks/useSyncedXScaleByPriority.js';\nimport { useXYChartData } from '../../../hooks/useXYChartData.js';\nimport { useXYChartId } from '../../../hooks/useXYChartId.js';\nimport { reduceInteractionMode } from '../../../store/reduce-interaction-mode.js';\nimport {\n  reduceExploreCancelAll,\n  reduceExploreCancelHighlight,\n  reduceExploreCancelSelect,\n  reduceExplorePin,\n  reduceExploreReset,\n  reduceExploreSelect,\n  reduceExploreUnPin,\n} from '../../../store/reducer-explorer.js';\nimport {\n  useInteractionModeState,\n  useSetState,\n  useZoomState,\n} from '../../../store/selectors.js';\n\nexport const useOverlayEvents = () => {\n  const { filteredSeriesWithDatapoints: rectSeriesData } = useRectData();\n  const { filteredSeriesWithDatapoints: barSeriesData } = useBarData();\n  const { filteredSeriesWithDatapoints: dotSeriesData } = useDotData();\n  const { filteredSeriesWithDatapoints: lineSeriesData } = useLineData();\n  const { filteredSeriesWithDatapoints: areaSeriesData } = useAreaData();\n  const zoomToSelection = useZoomToSelection();\n  const setState = useSetState();\n  const mode = useInteractionModeState();\n  const applyPanDelta = useApplyPanDelta();\n  const applyReset = useResetInteractions();\n  const applyZoomDelta = useApplyZoomDelta();\n  const zoomState = useZoomState();\n  const { query } = useOverlayPerformance();\n  const { axesMetadata } = useXYChartData();\n  const chartId = useXYChartId();\n  const synchronizedCrosshair = useSynchronizedCrosshair();\n  const { width } = useGridPlotSize();\n  const {\n    updateSelectionState: updateSynchronizedSelection,\n    resetSelectionState: resetSynchronizedSelection,\n  } = useSynchronizedSelection();\n  const syncedXScale = useSyncedXScaleByPriority();\n  const { hover, pin, unpin, reset, outOfBounds } = useTooltipActions();\n  const { dismissAnnotation } = usePinCoordinationActions();\n  const dismissChartAt = useDismissChartTooltipSignal();\n  const {\n    updateHoverState: updateSynchronizedCrosshair,\n    setDisabled: disableSynchronizedCrosshair,\n  } = synchronizedCrosshair ?? {};\n\n  const getDatapoints = (position: RelativeAbsolutePosition) =>\n    query({\n      position,\n      dotSeriesData,\n      lineSeriesData,\n      areaSeriesData,\n      rectSeriesData,\n      barSeriesData,\n    });\n\n  const resetTooltip = () => {\n    setState(reduceExploreCancelHighlight);\n    reset();\n    dismissAnnotation();\n  };\n\n  // The annotations tooltip just took the pin \u2014 release this chart's own\n  // pinned tooltip without re-signaling the annotation (that would just\n  // dismiss the annotation tooltip that triggered this in the first place).\n  useEffect(() => {\n    if (dismissChartAt === 0) {\n      return;\n    }\n    setState(reduceExploreCancelHighlight);\n    unpin();\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [dismissChartAt]);\n\n  const handleModeChange = (event: {\n    mode: InteractionMode;\n    keyboard: boolean;\n  }) => {\n    const canPan = axesMetadata.isPanEnabled && zoomState.zoomOutEnabled;\n    const shouldSwitchToPanMode = event.mode === 'pan' && canPan;\n    const shouldSwitchToZoomMode =\n      event.mode === 'zoom' && axesMetadata.isZoomEnabled;\n\n    if (shouldSwitchToPanMode || shouldSwitchToZoomMode) {\n      resetSynchronizedSelection?.();\n      setState(reduceInteractionMode(event.mode));\n      setState(reduceExploreReset);\n    } else if (event.mode === 'explore') {\n      setState(reduceInteractionMode(INTERACTION_MODE.Explore));\n    }\n  };\n\n  const handleHover = ({\n    position,\n  }: {\n    triggeredBy: InteractionTriggers;\n    position: RelativeAbsolutePosition;\n  }) => {\n    if (isTouchableDevice()) {\n      return;\n    }\n\n    if (syncedXScale) {\n      const hoveredDate = syncedXScale.invert(position.relative.x);\n      disableSynchronizedCrosshair?.(false);\n      updateSynchronizedCrosshair?.(chartId, hoveredDate.valueOf());\n    }\n\n    const metadata = getDatapoints(position);\n\n    const payload = metadata.preferred\n      ? {\n          geometry: metadata.preferred.type,\n          header1: undefined,\n          series: [],\n          metadata,\n        }\n      : undefined;\n\n    hover(\n      { clientX: position.absolute.x, clientY: position.absolute.y },\n      payload,\n    );\n  };\n\n  const handleTogglePin = (\n    shouldPin: boolean,\n    position: RelativeAbsolutePosition | undefined,\n  ) => {\n    if (shouldPin) {\n      handlePin(position);\n      updateSynchronizedCrosshair?.(undefined);\n    } else {\n      handleUnPin(position);\n    }\n  };\n\n  const handleUnPin = (position: RelativeAbsolutePosition | undefined) => {\n    setState(reduceExploreUnPin);\n\n    if (position) {\n      dismissAnnotation();\n      const metadata = getDatapoints(position);\n\n      unpin();\n\n      if (metadata.preferred) {\n        hover(\n          { clientX: position.absolute.x, clientY: position.absolute.y },\n          {\n            geometry: metadata.preferred.type,\n            header1: undefined,\n            series: [],\n            metadata,\n          },\n        );\n      }\n    } else {\n      resetTooltip();\n    }\n  };\n\n  const handlePin = (position: RelativeAbsolutePosition | undefined) => {\n    if (!position) {\n      return;\n    }\n\n    const metadata = getDatapoints(position);\n\n    dismissAnnotation();\n\n    if (metadata.preferred) {\n      setState(reduceExplorePin(metadata.preferred.series.id));\n      pin(\n        { clientX: position.absolute.x, clientY: position.absolute.y },\n        {\n          geometry: metadata.preferred.type,\n          header1: undefined,\n          series: [],\n          metadata,\n        },\n      );\n    }\n  };\n\n  const handleReset = (event: {\n    triggeredBy: InteractionTriggers;\n    mousePosition?: RelativeAbsolutePosition;\n  }) => {\n    const { mousePosition: position } = event;\n    applyReset({ position });\n    disableSynchronizedCrosshair?.(false);\n    resetSynchronizedSelection?.();\n\n    if (!position) {\n      setState(reduceExploreCancelAll);\n\n      return;\n    }\n\n    setState(reduceExploreCancelAll);\n\n    const metadata = getDatapoints(position);\n\n    if (metadata.preferred) {\n      hover(\n        { clientX: position.absolute.x, clientY: position.absolute.y },\n        {\n          geometry: metadata.preferred.type,\n          header1: undefined,\n          series: [],\n          metadata,\n        },\n      );\n    } else {\n      outOfBounds();\n    }\n  };\n\n  const handleLeave = (_: { triggeredBy: InteractionTriggers }) => {\n    updateSynchronizedCrosshair?.(undefined);\n    outOfBounds();\n  };\n\n  const handlePanChange = (event: {\n    triggeredBy: InteractionTriggers;\n    delta: number;\n  }) => {\n    applyPanDelta(event.delta);\n  };\n\n  const handleSelectStart = (event: {\n    triggeredBy: InteractionTriggers;\n    position: RelativeAbsolutePosition;\n  }) => {\n    if (mode === 'explore') {\n      disableSynchronizedCrosshair?.(true);\n      updateSynchronizedSelection?.();\n    }\n    resetTooltip();\n  };\n\n  const handleSelectChange = (event: {\n    triggeredBy: InteractionTriggers;\n    start: RelativeAbsolutePosition;\n    end: RelativeAbsolutePosition;\n    mode: 'explore' | 'zoom';\n  }): void => {\n    const variant: SelectionAreaVariant =\n      event.mode === 'explore' ? 'select' : 'zoom';\n\n    setState(\n      reduceExploreSelect({\n        start: event.start,\n        end: event.end,\n        finished: false,\n        accessible: false,\n        variant,\n        selectionPercentage: getPercentageFromPixel(\n          [event.start, event.end],\n          width,\n        ),\n      }),\n    );\n    if (mode === 'explore' && syncedXScale) {\n      updateSynchronizedSelection?.({\n        selection: [event.start, event.end],\n        chartId,\n        scale: syncedXScale,\n      });\n    }\n  };\n\n  const handleSelectEnd = (\n    event:\n      | {\n          triggeredBy: InteractionTriggers;\n          start: RelativeAbsolutePosition;\n          end: RelativeAbsolutePosition;\n        }\n      | { cancelled: true },\n    ref: RefObject<_SelectionRef | null>,\n  ): void => {\n    if (isSelectCancelled(event)) {\n      setState(reduceExploreCancelSelect);\n      resetSynchronizedSelection?.();\n    } else if (mode === 'explore') {\n      setState(\n        reduceExploreSelect({\n          start: event.start,\n          end: event.end,\n          finished: true,\n          accessible: false,\n          variant: 'select',\n          selectionPercentage: getPercentageFromPixel(\n            [event.start, event.end],\n            width,\n          ),\n        }),\n      );\n      ref.current?.focus();\n      if (syncedXScale) {\n        updateSynchronizedSelection?.({\n          selection: [event.start, event.end],\n          chartId,\n          scale: syncedXScale,\n        });\n      }\n    } else {\n      // in case select is disabled and zoomX is enabled, only zoom to selection interaction is possible\n      zoomToSelection();\n    }\n  };\n\n  const handleZoomChange = (event: {\n    triggeredBy: InteractionTriggers;\n    deltaStart: number;\n    deltaEnd: number;\n    behavior: ZoomBehavior;\n  }) => {\n    const canZoomIn =\n      event.behavior === ZOOM_CHANGE_TYPE.ZoomIn && zoomState?.zoomInEnabled;\n    const canZoomOut =\n      event.behavior === ZOOM_CHANGE_TYPE.ZoomOut && zoomState.zoomOutEnabled;\n    const canZoomX = event.behavior === ZOOM_CHANGE_TYPE.ZoomX;\n\n    const canZoom = canZoomIn || canZoomOut || canZoomX;\n\n    if (canZoom && axesMetadata.isZoomEnabled) {\n      setState(reduceExploreCancelAll);\n\n      applyZoomDelta(event.deltaStart, event.deltaEnd, event.behavior);\n    }\n  };\n\n  return {\n    handleModeChange,\n    handleHover,\n    handleTogglePin,\n    handleReset,\n    handleLeave,\n    handlePanChange,\n    handleSelectChange,\n    handleSelectEnd,\n    handleZoomChange,\n    handleSelectStart,\n    resetTooltip,\n  };\n};\n"],
+  "sourcesContent": ["import { useEffect, type RefObject } from 'react';\n\nimport { useApplyPanDelta } from './useApplyPanDelta.js';\nimport { useApplyZoomDelta } from './useApplyZoomDelta.js';\nimport { useResetInteractions } from './useResetInteractions.js';\nimport { useZoomToSelection } from './useZoomToSelection.js';\nimport { useGridPlotSize } from '../../../../core/components/chart-grid/hooks/useGridPlotSize.js';\nimport {\n  INTERACTION_MODE,\n  type InteractionMode,\n  type InteractionTriggers,\n  isSelectCancelled,\n  type ZoomBehavior,\n} from '../../../../core/components/interactions-overlay/types.js';\nimport { useDismissChartTooltipSignal } from '../../../../core/components/overlay-tooltip/pinCoordinationSelectors.js';\nimport { usePinCoordinationActions } from '../../../../core/components/overlay-tooltip/usePinCoordinationActions.js';\nimport { useTooltipActions } from '../../../../core/components/overlay-tooltip/useTooltipActions.js';\nimport type {\n  _SelectionRef,\n  SelectionAreaVariant,\n} from '../../../../core/components/selection-area/types.js';\nimport { useSynchronizedCrosshair } from '../../../../core/components/shared-chart-interactions/hooks/useSynchronizedCrosshair.js';\nimport { useSynchronizedSelection } from '../../../../core/components/shared-chart-interactions/hooks/useSynchronizedSelection.js';\nimport type { RelativeAbsolutePosition } from '../../../../core/types/pointer-events.js';\nimport { ZOOM_CHANGE_TYPE } from '../../../../core/types/zoom.js';\nimport { getPercentageFromPixel } from '../../../../core/utils/get-percentage-from-pixel.js';\nimport { isTouchableDevice } from '../../../../core/utils/is-touchable-device.js';\nimport { useAreaData } from '../../../hooks/useAreaData.js';\nimport { useBarData } from '../../../hooks/useBarData.js';\nimport { useDotData } from '../../../hooks/useDotData.js';\nimport { useLineData } from '../../../hooks/useLineData.js';\nimport { useOverlayPerformance } from '../../../hooks/useOverlayPerformance.js';\nimport { useRectData } from '../../../hooks/useRectData.js';\nimport { useSyncedXScaleByPriority } from '../../../hooks/useSyncedXScaleByPriority.js';\nimport { useXYChartData } from '../../../hooks/useXYChartData.js';\nimport { useXYChartId } from '../../../hooks/useXYChartId.js';\nimport { reduceInteractionMode } from '../../../store/reduce-interaction-mode.js';\nimport {\n  reduceExploreCancelAll,\n  reduceExploreCancelHighlight,\n  reduceExploreCancelSelect,\n  reduceExplorePin,\n  reduceExploreReset,\n  reduceExploreSelect,\n  reduceExploreUnPin,\n} from '../../../store/reducer-explorer.js';\nimport {\n  useInteractionModeState,\n  useSetState,\n  useZoomState,\n} from '../../../store/selectors.js';\n\nexport const useOverlayEvents = () => {\n  const { filteredSeriesWithDatapoints: rectSeriesData } = useRectData();\n  const { filteredSeriesWithDatapoints: barSeriesData } = useBarData();\n  const { filteredSeriesWithDatapoints: dotSeriesData } = useDotData();\n  const { filteredSeriesWithDatapoints: lineSeriesData } = useLineData();\n  const { filteredSeriesWithDatapoints: areaSeriesData } = useAreaData();\n  const zoomToSelection = useZoomToSelection();\n  const setState = useSetState();\n  const mode = useInteractionModeState();\n  const applyPanDelta = useApplyPanDelta();\n  const applyReset = useResetInteractions();\n  const applyZoomDelta = useApplyZoomDelta();\n  const zoomState = useZoomState();\n  const { query } = useOverlayPerformance();\n  const { axesMetadata } = useXYChartData();\n  const chartId = useXYChartId();\n  const synchronizedCrosshair = useSynchronizedCrosshair();\n  const { width } = useGridPlotSize();\n  const {\n    updateSelectionState: updateSynchronizedSelection,\n    resetSelectionState: resetSynchronizedSelection,\n  } = useSynchronizedSelection();\n  const syncedXScale = useSyncedXScaleByPriority();\n  const { hover, pin, unpin, reset, outOfBounds } = useTooltipActions();\n  const { dismissAnnotation } = usePinCoordinationActions();\n  const dismissChartAt = useDismissChartTooltipSignal();\n  const {\n    updateHoverState: updateSynchronizedCrosshair,\n    setDisabled: disableSynchronizedCrosshair,\n  } = synchronizedCrosshair ?? {};\n\n  const getDatapoints = (position: RelativeAbsolutePosition) =>\n    query({\n      position,\n      dotSeriesData,\n      lineSeriesData,\n      areaSeriesData,\n      rectSeriesData,\n      barSeriesData,\n    });\n\n  const resetTooltip = () => {\n    setState(reduceExploreCancelHighlight);\n    reset();\n    dismissAnnotation();\n  };\n\n  // The annotations tooltip just took the pin \u2014 release this chart's own\n  // pinned tooltip without re-signaling the annotation (that would just\n  // dismiss the annotation tooltip that triggered this in the first place).\n  useEffect(() => {\n    if (dismissChartAt === 0) {\n      return;\n    }\n    setState(reduceExploreCancelHighlight);\n    unpin();\n    // oxlint-disable-next-line react-hooks/exhaustive-deps\n  }, [dismissChartAt]);\n\n  const handleModeChange = (event: {\n    mode: InteractionMode;\n    keyboard: boolean;\n  }) => {\n    const canPan = axesMetadata.isPanEnabled && zoomState.zoomOutEnabled;\n    const shouldSwitchToPanMode = event.mode === 'pan' && canPan;\n    const shouldSwitchToZoomMode =\n      event.mode === 'zoom' && axesMetadata.isZoomEnabled;\n\n    if (shouldSwitchToPanMode || shouldSwitchToZoomMode) {\n      resetSynchronizedSelection?.();\n      setState(reduceInteractionMode(event.mode));\n      setState(reduceExploreReset);\n    } else if (event.mode === 'explore') {\n      setState(reduceInteractionMode(INTERACTION_MODE.Explore));\n    }\n  };\n\n  const handleHover = ({\n    position,\n  }: {\n    triggeredBy: InteractionTriggers;\n    position: RelativeAbsolutePosition;\n  }) => {\n    if (isTouchableDevice()) {\n      return;\n    }\n\n    if (syncedXScale) {\n      const hoveredDate = syncedXScale.invert(position.relative.x);\n      disableSynchronizedCrosshair?.(false);\n      updateSynchronizedCrosshair?.(chartId, hoveredDate.valueOf());\n    }\n\n    const metadata = getDatapoints(position);\n\n    const payload = metadata.preferred\n      ? {\n          geometry: metadata.preferred.type,\n          header1: undefined,\n          series: [],\n          metadata,\n        }\n      : undefined;\n\n    hover(\n      { clientX: position.absolute.x, clientY: position.absolute.y },\n      payload,\n    );\n  };\n\n  const handleTogglePin = (\n    shouldPin: boolean,\n    position: RelativeAbsolutePosition | undefined,\n  ) => {\n    if (shouldPin) {\n      handlePin(position);\n      updateSynchronizedCrosshair?.(undefined);\n    } else {\n      handleUnPin(position);\n    }\n  };\n\n  const handleUnPin = (position: RelativeAbsolutePosition | undefined) => {\n    setState(reduceExploreUnPin);\n\n    if (position) {\n      dismissAnnotation();\n      const metadata = getDatapoints(position);\n\n      unpin();\n\n      if (metadata.preferred) {\n        hover(\n          { clientX: position.absolute.x, clientY: position.absolute.y },\n          {\n            geometry: metadata.preferred.type,\n            header1: undefined,\n            series: [],\n            metadata,\n          },\n        );\n      }\n    } else {\n      resetTooltip();\n    }\n  };\n\n  const handlePin = (position: RelativeAbsolutePosition | undefined) => {\n    if (!position) {\n      return;\n    }\n\n    const metadata = getDatapoints(position);\n\n    dismissAnnotation();\n\n    if (metadata.preferred) {\n      setState(reduceExplorePin(metadata.preferred.series.id));\n      pin(\n        { clientX: position.absolute.x, clientY: position.absolute.y },\n        {\n          geometry: metadata.preferred.type,\n          header1: undefined,\n          series: [],\n          metadata,\n        },\n      );\n    }\n  };\n\n  const handleReset = (event: {\n    triggeredBy: InteractionTriggers;\n    mousePosition?: RelativeAbsolutePosition;\n  }) => {\n    const { mousePosition: position } = event;\n    applyReset({ position });\n    disableSynchronizedCrosshair?.(false);\n    resetSynchronizedSelection?.();\n\n    if (!position) {\n      setState(reduceExploreCancelAll);\n\n      return;\n    }\n\n    setState(reduceExploreCancelAll);\n\n    const metadata = getDatapoints(position);\n\n    if (metadata.preferred) {\n      hover(\n        { clientX: position.absolute.x, clientY: position.absolute.y },\n        {\n          geometry: metadata.preferred.type,\n          header1: undefined,\n          series: [],\n          metadata,\n        },\n      );\n    } else {\n      outOfBounds();\n    }\n  };\n\n  const handleLeave = (_: { triggeredBy: InteractionTriggers }) => {\n    updateSynchronizedCrosshair?.(undefined);\n    outOfBounds();\n  };\n\n  const handlePanChange = (event: {\n    triggeredBy: InteractionTriggers;\n    delta: number;\n  }) => {\n    applyPanDelta(event.delta);\n  };\n\n  const handleSelectStart = (event: {\n    triggeredBy: InteractionTriggers;\n    position: RelativeAbsolutePosition;\n  }) => {\n    if (mode === 'explore') {\n      disableSynchronizedCrosshair?.(true);\n      updateSynchronizedSelection?.();\n    }\n    resetTooltip();\n  };\n\n  const handleSelectChange = (event: {\n    triggeredBy: InteractionTriggers;\n    start: RelativeAbsolutePosition;\n    end: RelativeAbsolutePosition;\n    mode: 'explore' | 'zoom';\n  }): void => {\n    const variant: SelectionAreaVariant =\n      event.mode === 'explore' ? 'select' : 'zoom';\n\n    setState(\n      reduceExploreSelect({\n        start: event.start,\n        end: event.end,\n        finished: false,\n        accessible: false,\n        variant,\n        selectionPercentage: getPercentageFromPixel(\n          [event.start, event.end],\n          width,\n        ),\n      }),\n    );\n    if (mode === 'explore' && syncedXScale) {\n      updateSynchronizedSelection?.({\n        selection: [event.start, event.end],\n        chartId,\n        scale: syncedXScale,\n      });\n    }\n  };\n\n  const handleSelectEnd = (\n    event:\n      | {\n          triggeredBy: InteractionTriggers;\n          start: RelativeAbsolutePosition;\n          end: RelativeAbsolutePosition;\n        }\n      | { cancelled: true },\n    ref: RefObject<_SelectionRef | null>,\n  ): void => {\n    if (isSelectCancelled(event)) {\n      setState(reduceExploreCancelSelect);\n      resetSynchronizedSelection?.();\n    } else if (mode === 'explore') {\n      setState(\n        reduceExploreSelect({\n          start: event.start,\n          end: event.end,\n          finished: true,\n          accessible: false,\n          variant: 'select',\n          selectionPercentage: getPercentageFromPixel(\n            [event.start, event.end],\n            width,\n          ),\n        }),\n      );\n      ref.current?.focus();\n      if (syncedXScale) {\n        updateSynchronizedSelection?.({\n          selection: [event.start, event.end],\n          chartId,\n          scale: syncedXScale,\n        });\n      }\n    } else {\n      // in case select is disabled and zoomX is enabled, only zoom to selection interaction is possible\n      zoomToSelection();\n    }\n  };\n\n  const handleZoomChange = (event: {\n    triggeredBy: InteractionTriggers;\n    deltaStart: number;\n    deltaEnd: number;\n    behavior: ZoomBehavior;\n  }) => {\n    const canZoomIn =\n      event.behavior === ZOOM_CHANGE_TYPE.ZoomIn && zoomState?.zoomInEnabled;\n    const canZoomOut =\n      event.behavior === ZOOM_CHANGE_TYPE.ZoomOut && zoomState.zoomOutEnabled;\n    const canZoomX = event.behavior === ZOOM_CHANGE_TYPE.ZoomX;\n\n    const canZoom = canZoomIn || canZoomOut || canZoomX;\n\n    if (canZoom && axesMetadata.isZoomEnabled) {\n      setState(reduceExploreCancelAll);\n\n      applyZoomDelta(event.deltaStart, event.deltaEnd, event.behavior);\n    }\n  };\n\n  return {\n    handleModeChange,\n    handleHover,\n    handleTogglePin,\n    handleReset,\n    handleLeave,\n    handlePanChange,\n    handleSelectChange,\n    handleSelectEnd,\n    handleZoomChange,\n    handleSelectStart,\n    resetTooltip,\n  };\n};\n"],
   "mappings": "AAAA,SAAS,iBAAiC;AAE1C,SAAS,wBAAwB;AACjC,SAAS,yBAAyB;AAClC,SAAS,4BAA4B;AACrC,SAAS,0BAA0B;AACnC,SAAS,uBAAuB;AAChC;AAAA,EACE;AAAA,EAGA;AAAA,OAEK;AACP,SAAS,oCAAoC;AAC7C,SAAS,iCAAiC;AAC1C,SAAS,yBAAyB;AAKlC,SAAS,gCAAgC;AACzC,SAAS,gCAAgC;AAEzC,SAAS,wBAAwB;AACjC,SAAS,8BAA8B;AACvC,SAAS,yBAAyB;AAClC,SAAS,mBAAmB;AAC5B,SAAS,kBAAkB;AAC3B,SAAS,kBAAkB;AAC3B,SAAS,mBAAmB;AAC5B,SAAS,6BAA6B;AACtC,SAAS,mBAAmB;AAC5B,SAAS,iCAAiC;AAC1C,SAAS,sBAAsB;AAC/B,SAAS,oBAAoB;AAC7B,SAAS,6BAA6B;AACtC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEA,MAAM,mBAAmB,MAAM;AACpC,QAAM,EAAE,8BAA8B,eAAe,IAAI,YAAY;AACrE,QAAM,EAAE,8BAA8B,cAAc,IAAI,WAAW;AACnE,QAAM,EAAE,8BAA8B,cAAc,IAAI,WAAW;AACnE,QAAM,EAAE,8BAA8B,eAAe,IAAI,YAAY;AACrE,QAAM,EAAE,8BAA8B,eAAe,IAAI,YAAY;AACrE,QAAM,kBAAkB,mBAAmB;AAC3C,QAAM,WAAW,YAAY;AAC7B,QAAM,OAAO,wBAAwB;AACrC,QAAM,gBAAgB,iBAAiB;AACvC,QAAM,aAAa,qBAAqB;AACxC,QAAM,iBAAiB,kBAAkB;AACzC,QAAM,YAAY,aAAa;AAC/B,QAAM,EAAE,MAAM,IAAI,sBAAsB;AACxC,QAAM,EAAE,aAAa,IAAI,eAAe;AACxC,QAAM,UAAU,aAAa;AAC7B,QAAM,wBAAwB,yBAAyB;AACvD,QAAM,EAAE,MAAM,IAAI,gBAAgB;AAClC,QAAM;AAAA,IACJ,sBAAsB;AAAA,IACtB,qBAAqB;AAAA,EACvB,IAAI,yBAAyB;AAC7B,QAAM,eAAe,0BAA0B;AAC/C,QAAM,EAAE,OAAO,KAAK,OAAO,OAAO,YAAY,IAAI,kBAAkB;AACpE,QAAM,EAAE,kBAAkB,IAAI,0BAA0B;AACxD,QAAM,iBAAiB,6BAA6B;AACpD,QAAM;AAAA,IACJ,kBAAkB;AAAA,IAClB,aAAa;AAAA,EACf,IAAI,yBAAyB,CAAC;AAE9B,QAAM,gBAAgB,CAAC,aACrB,MAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAEH,QAAM,eAAe,MAAM;AACzB,aAAS,4BAA4B;AACrC,UAAM;AACN,sBAAkB;AAAA,EACpB;AAKA,YAAU,MAAM;AACd,QAAI,mBAAmB,GAAG;AACxB;AAAA,IACF;AACA,aAAS,4BAA4B;AACrC,UAAM;AAAA,EAER,GAAG,CAAC,cAAc,CAAC;AAEnB,QAAM,mBAAmB,CAAC,UAGpB;AACJ,UAAM,SAAS,aAAa,gBAAgB,UAAU;AACtD,UAAM,wBAAwB,MAAM,SAAS,SAAS;AACtD,UAAM,yBACJ,MAAM,SAAS,UAAU,aAAa;AAExC,QAAI,yBAAyB,wBAAwB;AACnD,mCAA6B;AAC7B,eAAS,sBAAsB,MAAM,IAAI,CAAC;AAC1C,eAAS,kBAAkB;AAAA,IAC7B,WAAW,MAAM,SAAS,WAAW;AACnC,eAAS,sBAAsB,iBAAiB,OAAO,CAAC;AAAA,IAC1D;AAAA,EACF;AAEA,QAAM,cAAc,CAAC;AAAA,IACnB;AAAA,EACF,MAGM;AACJ,QAAI,kBAAkB,GAAG;AACvB;AAAA,IACF;AAEA,QAAI,cAAc;AAChB,YAAM,cAAc,aAAa,OAAO,SAAS,SAAS,CAAC;AAC3D,qCAA+B,KAAK;AACpC,oCAA8B,SAAS,YAAY,QAAQ,CAAC;AAAA,IAC9D;AAEA,UAAM,WAAW,cAAc,QAAQ;AAEvC,UAAM,UAAU,SAAS,YACrB;AAAA,MACE,UAAU,SAAS,UAAU;AAAA,MAC7B,SAAS;AAAA,MACT,QAAQ,CAAC;AAAA,MACT;AAAA,IACF,IACA;AAEJ;AAAA,MACE,EAAE,SAAS,SAAS,SAAS,GAAG,SAAS,SAAS,SAAS,EAAE;AAAA,MAC7D;AAAA,IACF;AAAA,EACF;AAEA,QAAM,kBAAkB,CACtB,WACA,aACG;AACH,QAAI,WAAW;AACb,gBAAU,QAAQ;AAClB,oCAA8B,MAAS;AAAA,IACzC,OAAO;AACL,kBAAY,QAAQ;AAAA,IACtB;AAAA,EACF;AAEA,QAAM,cAAc,CAAC,aAAmD;AACtE,aAAS,kBAAkB;AAE3B,QAAI,UAAU;AACZ,wBAAkB;AAClB,YAAM,WAAW,cAAc,QAAQ;AAEvC,YAAM;AAEN,UAAI,SAAS,WAAW;AACtB;AAAA,UACE,EAAE,SAAS,SAAS,SAAS,GAAG,SAAS,SAAS,SAAS,EAAE;AAAA,UAC7D;AAAA,YACE,UAAU,SAAS,UAAU;AAAA,YAC7B,SAAS;AAAA,YACT,QAAQ,CAAC;AAAA,YACT;AAAA,UACF;AAAA,QACF;AAAA,MACF;AAAA,IACF,OAAO;AACL,mBAAa;AAAA,IACf;AAAA,EACF;AAEA,QAAM,YAAY,CAAC,aAAmD;AACpE,QAAI,CAAC,UAAU;AACb;AAAA,IACF;AAEA,UAAM,WAAW,cAAc,QAAQ;AAEvC,sBAAkB;AAElB,QAAI,SAAS,WAAW;AACtB,eAAS,iBAAiB,SAAS,UAAU,OAAO,EAAE,CAAC;AACvD;AAAA,QACE,EAAE,SAAS,SAAS,SAAS,GAAG,SAAS,SAAS,SAAS,EAAE;AAAA,QAC7D;AAAA,UACE,UAAU,SAAS,UAAU;AAAA,UAC7B,SAAS;AAAA,UACT,QAAQ,CAAC;AAAA,UACT;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAEA,QAAM,cAAc,CAAC,UAGf;AACJ,UAAM,EAAE,eAAe,SAAS,IAAI;AACpC,eAAW,EAAE,SAAS,CAAC;AACvB,mCAA+B,KAAK;AACpC,iCAA6B;AAE7B,QAAI,CAAC,UAAU;AACb,eAAS,sBAAsB;AAE/B;AAAA,IACF;AAEA,aAAS,sBAAsB;AAE/B,UAAM,WAAW,cAAc,QAAQ;AAEvC,QAAI,SAAS,WAAW;AACtB;AAAA,QACE,EAAE,SAAS,SAAS,SAAS,GAAG,SAAS,SAAS,SAAS,EAAE;AAAA,QAC7D;AAAA,UACE,UAAU,SAAS,UAAU;AAAA,UAC7B,SAAS;AAAA,UACT,QAAQ,CAAC;AAAA,UACT;AAAA,QACF;AAAA,MACF;AAAA,IACF,OAAO;AACL,kBAAY;AAAA,IACd;AAAA,EACF;AAEA,QAAM,cAAc,CAAC,MAA4C;AAC/D,kCAA8B,MAAS;AACvC,gBAAY;AAAA,EACd;AAEA,QAAM,kBAAkB,CAAC,UAGnB;AACJ,kBAAc,MAAM,KAAK;AAAA,EAC3B;AAEA,QAAM,oBAAoB,CAAC,UAGrB;AACJ,QAAI,SAAS,WAAW;AACtB,qCAA+B,IAAI;AACnC,oCAA8B;AAAA,IAChC;AACA,iBAAa;AAAA,EACf;AAEA,QAAM,qBAAqB,CAAC,UAKhB;AACV,UAAM,UACJ,MAAM,SAAS,YAAY,WAAW;AAExC;AAAA,MACE,oBAAoB;AAAA,QAClB,OAAO,MAAM;AAAA,QACb,KAAK,MAAM;AAAA,QACX,UAAU;AAAA,QACV,YAAY;AAAA,QACZ;AAAA,QACA,qBAAqB;AAAA,UACnB,CAAC,MAAM,OAAO,MAAM,GAAG;AAAA,UACvB;AAAA,QACF;AAAA,MACF,CAAC;AAAA,IACH;AACA,QAAI,SAAS,aAAa,cAAc;AACtC,oCAA8B;AAAA,QAC5B,WAAW,CAAC,MAAM,OAAO,MAAM,GAAG;AAAA,QAClC;AAAA,QACA,OAAO;AAAA,MACT,CAAC;AAAA,IACH;AAAA,EACF;AAEA,QAAM,kBAAkB,CACtB,OAOA,QACS;AACT,QAAI,kBAAkB,KAAK,GAAG;AAC5B,eAAS,yBAAyB;AAClC,mCAA6B;AAAA,IAC/B,WAAW,SAAS,WAAW;AAC7B;AAAA,QACE,oBAAoB;AAAA,UAClB,OAAO,MAAM;AAAA,UACb,KAAK,MAAM;AAAA,UACX,UAAU;AAAA,UACV,YAAY;AAAA,UACZ,SAAS;AAAA,UACT,qBAAqB;AAAA,YACnB,CAAC,MAAM,OAAO,MAAM,GAAG;AAAA,YACvB;AAAA,UACF;AAAA,QACF,CAAC;AAAA,MACH;AACA,UAAI,SAAS,MAAM;AACnB,UAAI,cAAc;AAChB,sCAA8B;AAAA,UAC5B,WAAW,CAAC,MAAM,OAAO,MAAM,GAAG;AAAA,UAClC;AAAA,UACA,OAAO;AAAA,QACT,CAAC;AAAA,MACH;AAAA,IACF,OAAO;AAEL,sBAAgB;AAAA,IAClB;AAAA,EACF;AAEA,QAAM,mBAAmB,CAAC,UAKpB;AACJ,UAAM,YACJ,MAAM,aAAa,iBAAiB,UAAU,WAAW;AAC3D,UAAM,aACJ,MAAM,aAAa,iBAAiB,WAAW,UAAU;AAC3D,UAAM,WAAW,MAAM,aAAa,iBAAiB;AAErD,UAAM,UAAU,aAAa,cAAc;AAE3C,QAAI,WAAW,aAAa,eAAe;AACzC,eAAS,sBAAsB;AAE/B,qBAAe,MAAM,YAAY,MAAM,UAAU,MAAM,QAAQ;AAAA,IACjE;AAAA,EACF;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
   "names": []
 }

package/esm/charts/xy-chart/components/thresholds/XYChartThresholdIndicators.css

@@ -1,3 +1,3 @@
-._1mfu0sw0-3-12-2 {
+._1mfu0sw0-3-13-0 {
   z-index: 2;
 }

package/esm/charts/xy-chart/components/thresholds/XYChartThresholdIndicators.sty.js

@@ -1,6 +1,6 @@
 import "../../../core/components/chart-grid/ChartGrid.css";
 import "./XYChartThresholdIndicators.css";
-var thresholdPlot = "_1mfu0sw0-3-12-2 _13lzg4k0-3-12-2";
+var thresholdPlot = "_1mfu0sw0-3-13-0 _13lzg4k0-3-13-0";
 export {
   thresholdPlot
 };

package/esm/charts/xy-chart/components/thresholds/XYChartThresholdIndicators.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/xy-chart/components/thresholds/XYChartThresholdIndicators.css.ts"],
-  "sourcesContent": ["import '../../../core/components/chart-grid/ChartGrid.css';\nimport './XYChartThresholdIndicators.css';\nexport var thresholdPlot = '_1mfu0sw0-3-12-2 _13lzg4k0-3-12-2';"],
+  "sourcesContent": ["import '../../../core/components/chart-grid/ChartGrid.css';\nimport './XYChartThresholdIndicators.css';\nexport var thresholdPlot = '_1mfu0sw0-3-13-0 _13lzg4k0-3-13-0';"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACA,IAAI,gBAAgB;",
   "names": []
 }

package/esm/charts/xy-chart/components/tooltip/XYChartTooltipContent.js

@@ -12,6 +12,7 @@ import { useAxesFormatter } from "../../hooks/useAxesFormatter.js";
 import { useXYChartColorScales } from "../../hooks/useXYChartColorScales.js";
 import { useXYChartData } from "../../hooks/useXYChartData.js";
 import { useXYChartTooltip } from "../../hooks/useXYChartTooltip.js";
+import { useXYChartTruncationMode } from "../../hooks/useXYChartTruncationMode.js";
 import {
   AREA_VARIANT,
   BAR_VARIANT,
@@ -28,6 +29,7 @@ const XYChartTooltipContent = ({
   const colorScaleMap = useXYChartColorScales();
   const { seriesToMetadata } = useXYChartData();
   const { datapointMetadataMap } = useXYChartData();
+  const { truncationMode } = useXYChartTruncationMode();
   if (customTooltip?.hidden) {
     return null;
   }
@@ -45,7 +47,13 @@ const XYChartTooltipContent = ({
       return null;
     }
     if (customTooltipContent) {
-      return /* @__PURE__ */ jsx(OverlayTooltip, { template: customTooltipContent });
+      return /* @__PURE__ */ jsx(
+        OverlayTooltip,
+        {
+          template: customTooltipContent,
+          truncation: truncationMode
+        }
+      );
     }
   }
   switch (content.type) {

package/esm/charts/xy-chart/components/tooltip/XYChartTooltipContent.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/xy-chart/components/tooltip/XYChartTooltipContent.tsx"],
-  "sourcesContent": ["import { useIntl } from 'react-intl';\n\nimport { AreaSeriesTooltip } from './AreaSeriesTooltip.js';\nimport { BarSeriesTooltip } from './BarSeriesTooltip.js';\nimport { DotSeriesTooltip } from './DotSeriesTooltip.js';\nimport { LineSeriesTooltip } from './LineSeriesTooltip.js';\nimport { RectSeriesTooltip } from './RectSeriesTooltip.js';\nimport { getCustomTooltipPayload } from './utils/get-custom-tooltip-payload.js';\nimport { OverlayTooltip } from '../../../core/components/overlay-tooltip/OverlayTooltip.js';\nimport { safeGet } from '../../../core/utils/safe-get.js';\nimport { useAxesFormatter } from '../../hooks/useAxesFormatter.js';\nimport { useXYChartColorScales } from '../../hooks/useXYChartColorScales.js';\nimport { useXYChartData } from '../../hooks/useXYChartData.js';\nimport { useXYChartTooltip } from '../../hooks/useXYChartTooltip.js';\nimport type { TooltipContent } from '../../types/state.js';\nimport {\n  AREA_VARIANT,\n  BAR_VARIANT,\n  DOT_VARIANT,\n  LINE_VARIANT,\n  RECT_VARIANT,\n} from '../../types/xy-chart-internals.js';\n\nexport const XYChartTooltipContent = ({\n  content,\n}: {\n  content: TooltipContent;\n}) => {\n  const customTooltip = useXYChartTooltip();\n  const axisIdToFormatter = useAxesFormatter();\n  const intl = useIntl();\n  const colorScaleMap = useXYChartColorScales();\n  const { seriesToMetadata } = useXYChartData();\n  const { datapointMetadataMap } = useXYChartData();\n\n  if (customTooltip?.hidden) {\n    return null;\n  }\n\n  if (customTooltip?.template) {\n    const customTooltipPayload = getCustomTooltipPayload(\n      content,\n      safeGet(seriesToMetadata, content.series),\n      axisIdToFormatter,\n      intl,\n      colorScaleMap,\n      safeGet(datapointMetadataMap, content.datapoint).colorOverride,\n    );\n\n    const customTooltipContent = customTooltip.template?.(customTooltipPayload);\n\n    if (customTooltipContent === null) {\n      return null;\n    }\n\n    if (customTooltipContent) {\n      return <OverlayTooltip template={customTooltipContent}></OverlayTooltip>;\n    }\n  }\n\n  switch (content.type) {\n    case RECT_VARIANT:\n      return (\n        <RectSeriesTooltip\n          datapoint={content.datapoint}\n          series={content.series}\n        />\n      );\n    case BAR_VARIANT:\n      return (\n        <BarSeriesTooltip\n          datapoint={content.datapoint}\n          series={content.series}\n        />\n      );\n    case DOT_VARIANT:\n      return (\n        <DotSeriesTooltip\n          datapoint={content.datapoint}\n          series={content.series}\n        />\n      );\n    case LINE_VARIANT:\n      return (\n        <LineSeriesTooltip\n          datapoint={content.datapoint}\n          series={content.series}\n        />\n      );\n    case AREA_VARIANT:\n      return (\n        <AreaSeriesTooltip\n          datapoint={content.datapoint}\n          series={content.series}\n        />\n      );\n\n    default:\n      return null;\n  }\n};\n"],
-  "mappings": "AAwDa;AAxDb,SAAS,eAAe;AAExB,SAAS,yBAAyB;AAClC,SAAS,wBAAwB;AACjC,SAAS,wBAAwB;AACjC,SAAS,yBAAyB;AAClC,SAAS,yBAAyB;AAClC,SAAS,+BAA+B;AACxC,SAAS,sBAAsB;AAC/B,SAAS,eAAe;AACxB,SAAS,wBAAwB;AACjC,SAAS,6BAA6B;AACtC,SAAS,sBAAsB;AAC/B,SAAS,yBAAyB;AAElC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEA,MAAM,wBAAwB,CAAC;AAAA,EACpC;AACF,MAEM;AACJ,QAAM,gBAAgB,kBAAkB;AACxC,QAAM,oBAAoB,iBAAiB;AAC3C,QAAM,OAAO,QAAQ;AACrB,QAAM,gBAAgB,sBAAsB;AAC5C,QAAM,EAAE,iBAAiB,IAAI,eAAe;AAC5C,QAAM,EAAE,qBAAqB,IAAI,eAAe;AAEhD,MAAI,eAAe,QAAQ;AACzB,WAAO;AAAA,EACT;AAEA,MAAI,eAAe,UAAU;AAC3B,UAAM,uBAAuB;AAAA,MAC3B;AAAA,MACA,QAAQ,kBAAkB,QAAQ,MAAM;AAAA,MACxC;AAAA,MACA;AAAA,MACA;AAAA,MACA,QAAQ,sBAAsB,QAAQ,SAAS,EAAE;AAAA,IACnD;AAEA,UAAM,uBAAuB,cAAc,WAAW,oBAAoB;AAE1E,QAAI,yBAAyB,MAAM;AACjC,aAAO;AAAA,IACT;AAEA,QAAI,sBAAsB;AACxB,aAAO,oBAAC,kBAAe,UAAU,sBAAsB;AAAA,IACzD;AAAA,EACF;AAEA,UAAQ,QAAQ,MAAM;AAAA,IACpB,KAAK;AACH,aACE;AAAA,QAAC;AAAA;AAAA,UACC,WAAW,QAAQ;AAAA,UACnB,QAAQ,QAAQ;AAAA;AAAA,MAClB;AAAA,IAEJ,KAAK;AACH,aACE;AAAA,QAAC;AAAA;AAAA,UACC,WAAW,QAAQ;AAAA,UACnB,QAAQ,QAAQ;AAAA;AAAA,MAClB;AAAA,IAEJ,KAAK;AACH,aACE;AAAA,QAAC;AAAA;AAAA,UACC,WAAW,QAAQ;AAAA,UACnB,QAAQ,QAAQ;AAAA;AAAA,MAClB;AAAA,IAEJ,KAAK;AACH,aACE;AAAA,QAAC;AAAA;AAAA,UACC,WAAW,QAAQ;AAAA,UACnB,QAAQ,QAAQ;AAAA;AAAA,MAClB;AAAA,IAEJ,KAAK;AACH,aACE;AAAA,QAAC;AAAA;AAAA,UACC,WAAW,QAAQ;AAAA,UACnB,QAAQ,QAAQ;AAAA;AAAA,MAClB;AAAA,IAGJ;AACE,aAAO;AAAA,EACX;AACF;",
+  "sourcesContent": ["import { useIntl } from 'react-intl';\n\nimport { AreaSeriesTooltip } from './AreaSeriesTooltip.js';\nimport { BarSeriesTooltip } from './BarSeriesTooltip.js';\nimport { DotSeriesTooltip } from './DotSeriesTooltip.js';\nimport { LineSeriesTooltip } from './LineSeriesTooltip.js';\nimport { RectSeriesTooltip } from './RectSeriesTooltip.js';\nimport { getCustomTooltipPayload } from './utils/get-custom-tooltip-payload.js';\nimport { OverlayTooltip } from '../../../core/components/overlay-tooltip/OverlayTooltip.js';\nimport { safeGet } from '../../../core/utils/safe-get.js';\nimport { useAxesFormatter } from '../../hooks/useAxesFormatter.js';\nimport { useXYChartColorScales } from '../../hooks/useXYChartColorScales.js';\nimport { useXYChartData } from '../../hooks/useXYChartData.js';\nimport { useXYChartTooltip } from '../../hooks/useXYChartTooltip.js';\nimport { useXYChartTruncationMode } from '../../hooks/useXYChartTruncationMode.js';\nimport type { TooltipContent } from '../../types/state.js';\nimport {\n  AREA_VARIANT,\n  BAR_VARIANT,\n  DOT_VARIANT,\n  LINE_VARIANT,\n  RECT_VARIANT,\n} from '../../types/xy-chart-internals.js';\n\nexport const XYChartTooltipContent = ({\n  content,\n}: {\n  content: TooltipContent;\n}) => {\n  const customTooltip = useXYChartTooltip();\n  const axisIdToFormatter = useAxesFormatter();\n  const intl = useIntl();\n  const colorScaleMap = useXYChartColorScales();\n  const { seriesToMetadata } = useXYChartData();\n  const { datapointMetadataMap } = useXYChartData();\n  const { truncationMode } = useXYChartTruncationMode();\n\n  if (customTooltip?.hidden) {\n    return null;\n  }\n\n  if (customTooltip?.template) {\n    const customTooltipPayload = getCustomTooltipPayload(\n      content,\n      safeGet(seriesToMetadata, content.series),\n      axisIdToFormatter,\n      intl,\n      colorScaleMap,\n      safeGet(datapointMetadataMap, content.datapoint).colorOverride,\n    );\n\n    const customTooltipContent = customTooltip.template?.(customTooltipPayload);\n\n    if (customTooltipContent === null) {\n      return null;\n    }\n\n    if (customTooltipContent) {\n      return (\n        <OverlayTooltip\n          template={customTooltipContent}\n          truncation={truncationMode}\n        ></OverlayTooltip>\n      );\n    }\n  }\n\n  switch (content.type) {\n    case RECT_VARIANT:\n      return (\n        <RectSeriesTooltip\n          datapoint={content.datapoint}\n          series={content.series}\n        />\n      );\n    case BAR_VARIANT:\n      return (\n        <BarSeriesTooltip\n          datapoint={content.datapoint}\n          series={content.series}\n        />\n      );\n    case DOT_VARIANT:\n      return (\n        <DotSeriesTooltip\n          datapoint={content.datapoint}\n          series={content.series}\n        />\n      );\n    case LINE_VARIANT:\n      return (\n        <LineSeriesTooltip\n          datapoint={content.datapoint}\n          series={content.series}\n        />\n      );\n    case AREA_VARIANT:\n      return (\n        <AreaSeriesTooltip\n          datapoint={content.datapoint}\n          series={content.series}\n        />\n      );\n\n    default:\n      return null;\n  }\n};\n"],
+  "mappings": "AA2DQ;AA3DR,SAAS,eAAe;AAExB,SAAS,yBAAyB;AAClC,SAAS,wBAAwB;AACjC,SAAS,wBAAwB;AACjC,SAAS,yBAAyB;AAClC,SAAS,yBAAyB;AAClC,SAAS,+BAA+B;AACxC,SAAS,sBAAsB;AAC/B,SAAS,eAAe;AACxB,SAAS,wBAAwB;AACjC,SAAS,6BAA6B;AACtC,SAAS,sBAAsB;AAC/B,SAAS,yBAAyB;AAClC,SAAS,gCAAgC;AAEzC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEA,MAAM,wBAAwB,CAAC;AAAA,EACpC;AACF,MAEM;AACJ,QAAM,gBAAgB,kBAAkB;AACxC,QAAM,oBAAoB,iBAAiB;AAC3C,QAAM,OAAO,QAAQ;AACrB,QAAM,gBAAgB,sBAAsB;AAC5C,QAAM,EAAE,iBAAiB,IAAI,eAAe;AAC5C,QAAM,EAAE,qBAAqB,IAAI,eAAe;AAChD,QAAM,EAAE,eAAe,IAAI,yBAAyB;AAEpD,MAAI,eAAe,QAAQ;AACzB,WAAO;AAAA,EACT;AAEA,MAAI,eAAe,UAAU;AAC3B,UAAM,uBAAuB;AAAA,MAC3B;AAAA,MACA,QAAQ,kBAAkB,QAAQ,MAAM;AAAA,MACxC;AAAA,MACA;AAAA,MACA;AAAA,MACA,QAAQ,sBAAsB,QAAQ,SAAS,EAAE;AAAA,IACnD;AAEA,UAAM,uBAAuB,cAAc,WAAW,oBAAoB;AAE1E,QAAI,yBAAyB,MAAM;AACjC,aAAO;AAAA,IACT;AAEA,QAAI,sBAAsB;AACxB,aACE;AAAA,QAAC;AAAA;AAAA,UACC,UAAU;AAAA,UACV,YAAY;AAAA;AAAA,MACb;AAAA,IAEL;AAAA,EACF;AAEA,UAAQ,QAAQ,MAAM;AAAA,IACpB,KAAK;AACH,aACE;AAAA,QAAC;AAAA;AAAA,UACC,WAAW,QAAQ;AAAA,UACnB,QAAQ,QAAQ;AAAA;AAAA,MAClB;AAAA,IAEJ,KAAK;AACH,aACE;AAAA,QAAC;AAAA;AAAA,UACC,WAAW,QAAQ;AAAA,UACnB,QAAQ,QAAQ;AAAA;AAAA,MAClB;AAAA,IAEJ,KAAK;AACH,aACE;AAAA,QAAC;AAAA;AAAA,UACC,WAAW,QAAQ;AAAA,UACnB,QAAQ,QAAQ;AAAA;AAAA,MAClB;AAAA,IAEJ,KAAK;AACH,aACE;AAAA,QAAC;AAAA;AAAA,UACC,WAAW,QAAQ;AAAA,UACnB,QAAQ,QAAQ;AAAA;AAAA,MAClB;AAAA,IAEJ,KAAK;AACH,aACE;AAAA,QAAC;AAAA;AAAA,UACC,WAAW,QAAQ;AAAA,UACnB,QAAQ,QAAQ;AAAA;AAAA,MAClB;AAAA,IAGJ;AACE,aAAO;AAAA,EACX;AACF;",
   "names": []
 }