@dynatrace/strato-components 3.12.1 → 3.13.0

package/esm/charts/histogram/HistogramChartRoot.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/charts/histogram/HistogramChartRoot.tsx"],
-  "sourcesContent": ["import { isEmpty } from 'lodash-es';\nimport {\n  forwardRef,\n  type PropsWithChildren,\n  type ReactElement,\n  useMemo,\n} from 'react';\n\nimport { HistogramChartLegend } from './components/legend/HistogramChartLegend.js';\nimport {\n  DEFAULT_CHART_HEIGHT,\n  DEFAULT_LOADING_STATE,\n} from './constants/defaults.js';\nimport { HistogramChartInternal } from './HistogramChartInternal.js';\nimport { useHistogramChartConfig } from './hooks/useHistogramChartConfig.js';\nimport { HistogramConfigProvider } from './providers/HistogramConfigProvider.js';\nimport { HistogramDataProvider } from './providers/HistogramDataProvider.js';\nimport { HistogramFilteredDataProvider } from './providers/HistogramFilteredDataProvider.js';\nimport { HistogramStateSyncProvider } from './providers/HistogramStateSyncProvider.js';\nimport { StoreProvider } from './providers/StoreProvider.js';\nimport type { HistogramChartProps } from './types/histogram-props.js';\nimport type { HistogramChartRef } from './types/histogram-ref.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport { ChartLayout } from '../core/components/chart-layout/ChartLayout.js';\nimport { useAutoLegendRefresh } from '../core/components/chart-layout/hooks/useAutoLegendRefresh.js';\nimport { getChartStatesTemplates } from '../core/components/chart-states/utils/get-chart-states-template.js';\nimport { OverlayProvider } from '../core/components/overlay-tooltip/contexts/OverlayContext.js';\nimport { TooltipProvider } from '../core/components/overlay-tooltip/contexts/TooltipContext.js';\nimport { ChartSeriesActionContext } from '../core/components/series-action/ChartSeriesActionContext.js';\nimport { AriaLabelingContext } from '../core/context/AriaLabelingContext.js';\nimport { coerceSizeValue } from '../core/utils/coerceSizeValue.js';\n\n/**\n * Component name used for data-dt-component in behavioural tracking\n */\nconst COMPONENT_NAME_BEHAVIOURAL_TRACKING = 'HistogramChart';\n\n/**\n * @public\n */\nexport const HistogramChartRoot = forwardRef<\n  HistogramChartRef,\n  PropsWithChildren<HistogramChartProps>\n>((props, forwardedRef) => {\n  const {\n    children,\n    data,\n    height,\n    width,\n    colorPalette,\n    truncationMode,\n    loading = DEFAULT_LOADING_STATE,\n    seriesActions,\n    initialZoom,\n    currentZoom,\n    onZoomChange,\n    infiniteZoom,\n    className,\n    style,\n    valueRepresentation,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n    'aria-describedby': ariaDescribedBy,\n    'aria-details': ariaDetails,\n  } = props;\n  const [behaviorTrackingProps] = useBehavioralTrackingProps(props);\n  const chartHeight = coerceSizeValue(height ?? DEFAULT_CHART_HEIGHT);\n  const chartConfig = useHistogramChartConfig(children, {\n    colorPalette,\n    truncationMode,\n    valueRepresentation,\n    initialZoom,\n    currentZoom,\n    onZoomChange,\n    infiniteZoom,\n  });\n  const { emptyState, errorState } = getChartStatesTemplates(props.children);\n\n  const {\n    position: legendPosition,\n    onRatioChange,\n    // eslint-disable-next-line @typescript-eslint/no-deprecated\n    ratio,\n    initialRatio,\n    hidden: isLegendHidden,\n  } = chartConfig.legend;\n\n  const legendRatio = initialRatio ?? ratio;\n\n  const chartLayoutRef = useAutoLegendRefresh(data);\n  const ariaLabelingValue = useMemo(\n    () => ({\n      'aria-label': ariaLabel,\n      'aria-labelledby': ariaLabelledBy,\n      'aria-describedby': ariaDescribedBy,\n      'aria-details': ariaDetails,\n    }),\n    [ariaLabel, ariaLabelledBy, ariaDescribedBy, ariaDetails],\n  );\n\n  return (\n    <AriaLabelingContext.Provider value={ariaLabelingValue}>\n      <HistogramConfigProvider config={chartConfig}>\n        <HistogramDataProvider data={data}>\n          <ChartSeriesActionContext.Provider\n            value={{\n              // We need a cast here as the provider expects unknown and the\n              // react context will not be able to carry the generic anyways.\n              chartSeriesActions: seriesActions as (\n                series: unknown,\n              ) => ReactElement<PropsWithChildren>,\n            }}\n          >\n            <StoreProvider>\n              <HistogramFilteredDataProvider>\n                <HistogramStateSyncProvider\n                  currentDomain={chartConfig.currentZoom as [number, number]}\n                  initialDomain={chartConfig.initialZoom as [number, number]}\n                  infiniteZoom={chartConfig.infiniteZoom}\n                >\n                  <OverlayProvider>\n                    <TooltipProvider>\n                      <ChartLayout\n                        ref={chartLayoutRef}\n                        chartHeight={chartHeight}\n                        chartWidth={width}\n                        isEmpty={isEmpty(data)}\n                        emptyState={emptyState}\n                        errorState={errorState}\n                        showLoader={loading}\n                        className={className}\n                        style={style}\n                        {...behaviorTrackingProps}\n                        data-dtrum-mask={dataDtrumMask}\n                        data-dtrum-allow={dataDtrumAllow}\n                        data-dt-component={COMPONENT_NAME_BEHAVIOURAL_TRACKING}\n                      >\n                        <ChartLayout.Graph>\n                          <HistogramChartInternal\n                            ref={forwardedRef}\n                            config={chartConfig}\n                          />\n                        </ChartLayout.Graph>\n                        {!isLegendHidden && (\n                          <ChartLayout.Legend\n                            position={legendPosition}\n                            initialRatio={legendRatio}\n                            onResize={onRatioChange}\n                          >\n                            <HistogramChartLegend />\n                          </ChartLayout.Legend>\n                        )}\n                      </ChartLayout>\n                    </TooltipProvider>\n                  </OverlayProvider>\n                </HistogramStateSyncProvider>\n              </HistogramFilteredDataProvider>\n            </StoreProvider>\n          </ChartSeriesActionContext.Provider>\n        </HistogramDataProvider>\n      </HistogramConfigProvider>\n    </AriaLabelingContext.Provider>\n  );\n});\n\n(\n  HistogramChartRoot as typeof HistogramChartRoot & { displayName: string }\n).displayName = 'HistogramChartRoot';\n"],
+  "sourcesContent": ["import { isEmpty } from 'lodash-es';\nimport {\n  forwardRef,\n  type PropsWithChildren,\n  type ReactElement,\n  useMemo,\n} from 'react';\n\nimport { HistogramChartLegend } from './components/legend/HistogramChartLegend.js';\nimport {\n  DEFAULT_CHART_HEIGHT,\n  DEFAULT_LOADING_STATE,\n} from './constants/defaults.js';\nimport { HistogramChartInternal } from './HistogramChartInternal.js';\nimport { useHistogramChartConfig } from './hooks/useHistogramChartConfig.js';\nimport { HistogramConfigProvider } from './providers/HistogramConfigProvider.js';\nimport { HistogramDataProvider } from './providers/HistogramDataProvider.js';\nimport { HistogramFilteredDataProvider } from './providers/HistogramFilteredDataProvider.js';\nimport { HistogramStateSyncProvider } from './providers/HistogramStateSyncProvider.js';\nimport { StoreProvider } from './providers/StoreProvider.js';\nimport type { HistogramChartProps } from './types/histogram-props.js';\nimport type { HistogramChartRef } from './types/histogram-ref.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport { ChartLayout } from '../core/components/chart-layout/ChartLayout.js';\nimport { useAutoLegendRefresh } from '../core/components/chart-layout/hooks/useAutoLegendRefresh.js';\nimport { getChartStatesTemplates } from '../core/components/chart-states/utils/get-chart-states-template.js';\nimport { OverlayProvider } from '../core/components/overlay-tooltip/contexts/OverlayContext.js';\nimport { TooltipProvider } from '../core/components/overlay-tooltip/contexts/TooltipContext.js';\nimport { ChartSeriesActionContext } from '../core/components/series-action/ChartSeriesActionContext.js';\nimport { AriaLabelingContext } from '../core/context/AriaLabelingContext.js';\nimport { coerceSizeValue } from '../core/utils/coerceSizeValue.js';\n\n/**\n * Component name used for data-dt-component in behavioural tracking\n */\nconst COMPONENT_NAME_BEHAVIOURAL_TRACKING = 'HistogramChart';\n\n/**\n * @public\n */\nexport const HistogramChartRoot = forwardRef<\n  HistogramChartRef,\n  PropsWithChildren<HistogramChartProps>\n>((props, forwardedRef) => {\n  const {\n    children,\n    data,\n    height,\n    width,\n    colorPalette,\n    truncationMode,\n    loading = DEFAULT_LOADING_STATE,\n    seriesActions,\n    initialZoom,\n    currentZoom,\n    onZoomChange,\n    infiniteZoom,\n    className,\n    style,\n    valueRepresentation,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n    'aria-describedby': ariaDescribedBy,\n    'aria-details': ariaDetails,\n  } = props;\n  const [behaviorTrackingProps] = useBehavioralTrackingProps(props);\n  const chartHeight = coerceSizeValue(height ?? DEFAULT_CHART_HEIGHT);\n  const chartConfig = useHistogramChartConfig(children, {\n    colorPalette,\n    truncationMode,\n    valueRepresentation,\n    initialZoom,\n    currentZoom,\n    onZoomChange,\n    infiniteZoom,\n  });\n  const { emptyState, errorState } = getChartStatesTemplates(props.children);\n\n  const {\n    position: legendPosition,\n    onRatioChange,\n    // oxlint-disable-next-line typescript/no-deprecated\n    ratio,\n    initialRatio,\n    hidden: isLegendHidden,\n  } = chartConfig.legend;\n\n  const legendRatio = initialRatio ?? ratio;\n\n  const chartLayoutRef = useAutoLegendRefresh(data);\n  const ariaLabelingValue = useMemo(\n    () => ({\n      'aria-label': ariaLabel,\n      'aria-labelledby': ariaLabelledBy,\n      'aria-describedby': ariaDescribedBy,\n      'aria-details': ariaDetails,\n    }),\n    [ariaLabel, ariaLabelledBy, ariaDescribedBy, ariaDetails],\n  );\n\n  return (\n    <AriaLabelingContext.Provider value={ariaLabelingValue}>\n      <HistogramConfigProvider config={chartConfig}>\n        <HistogramDataProvider data={data}>\n          <ChartSeriesActionContext.Provider\n            value={{\n              // We need a cast here as the provider expects unknown and the\n              // react context will not be able to carry the generic anyways.\n              chartSeriesActions: seriesActions as (\n                series: unknown,\n              ) => ReactElement<PropsWithChildren>,\n            }}\n          >\n            <StoreProvider>\n              <HistogramFilteredDataProvider>\n                <HistogramStateSyncProvider\n                  currentDomain={chartConfig.currentZoom as [number, number]}\n                  initialDomain={chartConfig.initialZoom as [number, number]}\n                  infiniteZoom={chartConfig.infiniteZoom}\n                >\n                  <OverlayProvider>\n                    <TooltipProvider>\n                      <ChartLayout\n                        ref={chartLayoutRef}\n                        chartHeight={chartHeight}\n                        chartWidth={width}\n                        isEmpty={isEmpty(data)}\n                        emptyState={emptyState}\n                        errorState={errorState}\n                        showLoader={loading}\n                        className={className}\n                        style={style}\n                        {...behaviorTrackingProps}\n                        data-dtrum-mask={dataDtrumMask}\n                        data-dtrum-allow={dataDtrumAllow}\n                        data-dt-component={COMPONENT_NAME_BEHAVIOURAL_TRACKING}\n                      >\n                        <ChartLayout.Graph>\n                          <HistogramChartInternal\n                            ref={forwardedRef}\n                            config={chartConfig}\n                          />\n                        </ChartLayout.Graph>\n                        {!isLegendHidden && (\n                          <ChartLayout.Legend\n                            position={legendPosition}\n                            initialRatio={legendRatio}\n                            onResize={onRatioChange}\n                          >\n                            <HistogramChartLegend />\n                          </ChartLayout.Legend>\n                        )}\n                      </ChartLayout>\n                    </TooltipProvider>\n                  </OverlayProvider>\n                </HistogramStateSyncProvider>\n              </HistogramFilteredDataProvider>\n            </StoreProvider>\n          </ChartSeriesActionContext.Provider>\n        </HistogramDataProvider>\n      </HistogramConfigProvider>\n    </AriaLabelingContext.Provider>\n  );\n});\n\n(\n  HistogramChartRoot as typeof HistogramChartRoot & { displayName: string }\n).displayName = 'HistogramChartRoot';\n"],
   "mappings": "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",
   "names": []
 }

package/esm/charts/histogram/components/axes/HistogramValueBottomAxisArea/HistogramValueBottomAxisArea.css

@@ -1,3 +1,3 @@
-._9phcbi0-3-12-1 {
+._9phcbi0-3-13-0 {
   position: relative;
 }

package/esm/charts/histogram/components/axes/HistogramValueBottomAxisArea/HistogramValueBottomAxisArea.sty.js

@@ -1,5 +1,5 @@
 import "./HistogramValueBottomAxisArea.css";
-var axisContainerStyle = "_9phcbi0-3-12-1";
+var axisContainerStyle = "_9phcbi0-3-13-0";
 export {
   axisContainerStyle
 };

package/esm/charts/histogram/components/axes/HistogramValueBottomAxisArea/HistogramValueBottomAxisArea.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/histogram/components/axes/HistogramValueBottomAxisArea/HistogramValueBottomAxisArea.css.ts"],
-  "sourcesContent": ["import './HistogramValueBottomAxisArea.css';\nexport var axisContainerStyle = '_9phcbi0-3-12-1';"],
+  "sourcesContent": ["import './HistogramValueBottomAxisArea.css';\nexport var axisContainerStyle = '_9phcbi0-3-13-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,qBAAqB;",
   "names": []
 }

package/esm/charts/histogram/components/overlays/HistogramExplore/HistogramCrosshair.js

@@ -54,7 +54,7 @@ const HistogramCrosshair = () => {
     return null;
   }
   const y = hasPinnedBin ? (
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    // oxlint-disable-next-line typescript/no-non-null-assertion
     closestBinsState.closestBin.y - OVERLAY_PADDING
   ) : relativeMousePosition?.y ?? 0;
   const hasLeftThresholds = leftThreshold && leftThreshold.length > 0;

package/esm/charts/histogram/components/overlays/HistogramExplore/HistogramCrosshair.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/histogram/components/overlays/HistogramExplore/HistogramCrosshair.tsx"],
-  "sourcesContent": ["import { isUndefined } from 'lodash-es';\n\nimport { useGridPlotSize } from '../../../../core/components/chart-grid/hooks/useGridPlotSize.js';\nimport { HorizontalCrosshair } from '../../../../core/components/crosshair/HorizontalCrosshair.js';\nimport { getMagnifierLabel } from '../../../../core/components/crosshair/utils/get-magnifier-label.js';\nimport { OVERLAY_PADDING } from '../../../../core/components/data-point/constants.js';\nimport { reduceResetExploreVisible } from '../../../../core/components/interactions-state-helpers/reducers/reset-reducers.js';\nimport { THRESHOLD_BAR_THICKNESS } from '../../../../core/components/threshold-bar/types/constants.js';\nimport { useApplyCallbackOnScroll } from '../../../../core/hooks/useApplyCallbackOnScroll.js';\nimport {\n  useClosestBinsState,\n  useExploreState,\n} from '../../../hooks/store/selectors.js';\nimport { useSetState } from '../../../hooks/store/state-setters.js';\nimport { useHistogramChartOverlayRef } from '../../../hooks/useHistogramChartOverlayRef.js';\nimport { useHistogramFilteredData } from '../../../hooks/useHistogramFilteredData.js';\nimport { useHistogramThresholds } from '../../../hooks/useHistogramThresholds.js';\nimport { useHistogramYFormatter } from '../../../hooks/useHistogramYFormatter.js';\nimport { useHistogramYScales } from '../../../hooks/useHistogramYScales.js';\nimport { crosshairLayout } from '../HistogramOverlays.sty.js';\n\nexport const HistogramCrosshair = () => {\n  const {\n    units: [leftUnit, rightUnit],\n  } = useHistogramFilteredData();\n  const [leftFormatter, rightFormatter] = useHistogramYFormatter();\n  const { pinned, position } = useExploreState();\n  const setState = useSetState();\n  const onScrollCallback = () => setState(reduceResetExploreVisible);\n\n  useApplyCallbackOnScroll(pinned, onScrollCallback);\n\n  const relativeMousePosition = position?.relative;\n  const [leftScale, rightScale] = useHistogramYScales();\n  const { width } = useGridPlotSize();\n  const { leftThreshold, rightThreshold } = useHistogramThresholds();\n  const closestBinsState = useClosestBinsState();\n\n  const chartRef = useHistogramChartOverlayRef();\n  const chartBounds = chartRef.current?.getBoundingClientRect();\n  const leftLabel = pinned\n    ? undefined\n    : getMagnifierLabel(\n        leftUnit,\n        'y',\n        leftFormatter,\n        relativeMousePosition,\n        leftScale,\n      );\n\n  const rightLabel = pinned\n    ? undefined\n    : getMagnifierLabel(\n        rightUnit,\n        'y',\n        rightFormatter,\n        relativeMousePosition,\n        rightScale,\n      );\n\n  const hasPinnedBin = pinned && !isUndefined(closestBinsState?.closestBin);\n  const canHover = !pinned && !isUndefined(relativeMousePosition);\n\n  if (!hasPinnedBin && !canHover) {\n    return null;\n  }\n\n  const y = hasPinnedBin\n    ? // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n      closestBinsState.closestBin!.y - OVERLAY_PADDING\n    : relativeMousePosition?.y ?? 0;\n\n  const hasLeftThresholds = leftThreshold && leftThreshold.length > 0;\n  const hasRightThresholds = rightThreshold && rightThreshold.length > 0;\n\n  const thresholdLeftSize = hasLeftThresholds ? THRESHOLD_BAR_THICKNESS : 0;\n  const thresholdRightSize = hasRightThresholds ? THRESHOLD_BAR_THICKNESS : 0;\n  const horizontalCrosshairWidth =\n    width + thresholdLeftSize + thresholdRightSize;\n\n  return (\n    <svg className={crosshairLayout}>\n      <HorizontalCrosshair\n        data-testid=\"horizontal-crosshair-histogram\"\n        width={horizontalCrosshairWidth}\n        leftLabel={leftLabel}\n        rightLabel={rightLabel}\n        leftOffset={thresholdLeftSize}\n        rightOffset={thresholdRightSize}\n        y={y}\n        dashed={!pinned}\n        chartBounds={chartBounds}\n      />\n    </svg>\n  );\n};\n"],
-  "mappings": "AAkFM;AAlFN,SAAS,mBAAmB;AAE5B,SAAS,uBAAuB;AAChC,SAAS,2BAA2B;AACpC,SAAS,yBAAyB;AAClC,SAAS,uBAAuB;AAChC,SAAS,iCAAiC;AAC1C,SAAS,+BAA+B;AACxC,SAAS,gCAAgC;AACzC;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,SAAS,mBAAmB;AAC5B,SAAS,mCAAmC;AAC5C,SAAS,gCAAgC;AACzC,SAAS,8BAA8B;AACvC,SAAS,8BAA8B;AACvC,SAAS,2BAA2B;AACpC,SAAS,uBAAuB;AAEzB,MAAM,qBAAqB,MAAM;AACtC,QAAM;AAAA,IACJ,OAAO,CAAC,UAAU,SAAS;AAAA,EAC7B,IAAI,yBAAyB;AAC7B,QAAM,CAAC,eAAe,cAAc,IAAI,uBAAuB;AAC/D,QAAM,EAAE,QAAQ,SAAS,IAAI,gBAAgB;AAC7C,QAAM,WAAW,YAAY;AAC7B,QAAM,mBAAmB,MAAM,SAAS,yBAAyB;AAEjE,2BAAyB,QAAQ,gBAAgB;AAEjD,QAAM,wBAAwB,UAAU;AACxC,QAAM,CAAC,WAAW,UAAU,IAAI,oBAAoB;AACpD,QAAM,EAAE,MAAM,IAAI,gBAAgB;AAClC,QAAM,EAAE,eAAe,eAAe,IAAI,uBAAuB;AACjE,QAAM,mBAAmB,oBAAoB;AAE7C,QAAM,WAAW,4BAA4B;AAC7C,QAAM,cAAc,SAAS,SAAS,sBAAsB;AAC5D,QAAM,YAAY,SACd,SACA;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEJ,QAAM,aAAa,SACf,SACA;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEJ,QAAM,eAAe,UAAU,CAAC,YAAY,kBAAkB,UAAU;AACxE,QAAM,WAAW,CAAC,UAAU,CAAC,YAAY,qBAAqB;AAE9D,MAAI,CAAC,gBAAgB,CAAC,UAAU;AAC9B,WAAO;AAAA,EACT;AAEA,QAAM,IAAI;AAAA;AAAA,IAEN,iBAAiB,WAAY,IAAI;AAAA,MACjC,uBAAuB,KAAK;AAEhC,QAAM,oBAAoB,iBAAiB,cAAc,SAAS;AAClE,QAAM,qBAAqB,kBAAkB,eAAe,SAAS;AAErE,QAAM,oBAAoB,oBAAoB,0BAA0B;AACxE,QAAM,qBAAqB,qBAAqB,0BAA0B;AAC1E,QAAM,2BACJ,QAAQ,oBAAoB;AAE9B,SACE,oBAAC,SAAI,WAAW,iBACd;AAAA,IAAC;AAAA;AAAA,MACC,eAAY;AAAA,MACZ,OAAO;AAAA,MACP;AAAA,MACA;AAAA,MACA,YAAY;AAAA,MACZ,aAAa;AAAA,MACb;AAAA,MACA,QAAQ,CAAC;AAAA,MACT;AAAA;AAAA,EACF,GACF;AAEJ;",
+  "sourcesContent": ["import { isUndefined } from 'lodash-es';\n\nimport { useGridPlotSize } from '../../../../core/components/chart-grid/hooks/useGridPlotSize.js';\nimport { HorizontalCrosshair } from '../../../../core/components/crosshair/HorizontalCrosshair.js';\nimport { getMagnifierLabel } from '../../../../core/components/crosshair/utils/get-magnifier-label.js';\nimport { OVERLAY_PADDING } from '../../../../core/components/data-point/constants.js';\nimport { reduceResetExploreVisible } from '../../../../core/components/interactions-state-helpers/reducers/reset-reducers.js';\nimport { THRESHOLD_BAR_THICKNESS } from '../../../../core/components/threshold-bar/types/constants.js';\nimport { useApplyCallbackOnScroll } from '../../../../core/hooks/useApplyCallbackOnScroll.js';\nimport {\n  useClosestBinsState,\n  useExploreState,\n} from '../../../hooks/store/selectors.js';\nimport { useSetState } from '../../../hooks/store/state-setters.js';\nimport { useHistogramChartOverlayRef } from '../../../hooks/useHistogramChartOverlayRef.js';\nimport { useHistogramFilteredData } from '../../../hooks/useHistogramFilteredData.js';\nimport { useHistogramThresholds } from '../../../hooks/useHistogramThresholds.js';\nimport { useHistogramYFormatter } from '../../../hooks/useHistogramYFormatter.js';\nimport { useHistogramYScales } from '../../../hooks/useHistogramYScales.js';\nimport { crosshairLayout } from '../HistogramOverlays.sty.js';\n\nexport const HistogramCrosshair = () => {\n  const {\n    units: [leftUnit, rightUnit],\n  } = useHistogramFilteredData();\n  const [leftFormatter, rightFormatter] = useHistogramYFormatter();\n  const { pinned, position } = useExploreState();\n  const setState = useSetState();\n  const onScrollCallback = () => setState(reduceResetExploreVisible);\n\n  useApplyCallbackOnScroll(pinned, onScrollCallback);\n\n  const relativeMousePosition = position?.relative;\n  const [leftScale, rightScale] = useHistogramYScales();\n  const { width } = useGridPlotSize();\n  const { leftThreshold, rightThreshold } = useHistogramThresholds();\n  const closestBinsState = useClosestBinsState();\n\n  const chartRef = useHistogramChartOverlayRef();\n  const chartBounds = chartRef.current?.getBoundingClientRect();\n  const leftLabel = pinned\n    ? undefined\n    : getMagnifierLabel(\n        leftUnit,\n        'y',\n        leftFormatter,\n        relativeMousePosition,\n        leftScale,\n      );\n\n  const rightLabel = pinned\n    ? undefined\n    : getMagnifierLabel(\n        rightUnit,\n        'y',\n        rightFormatter,\n        relativeMousePosition,\n        rightScale,\n      );\n\n  const hasPinnedBin = pinned && !isUndefined(closestBinsState?.closestBin);\n  const canHover = !pinned && !isUndefined(relativeMousePosition);\n\n  if (!hasPinnedBin && !canHover) {\n    return null;\n  }\n\n  const y = hasPinnedBin\n    ? // oxlint-disable-next-line typescript/no-non-null-assertion\n      closestBinsState.closestBin!.y - OVERLAY_PADDING\n    : (relativeMousePosition?.y ?? 0);\n\n  const hasLeftThresholds = leftThreshold && leftThreshold.length > 0;\n  const hasRightThresholds = rightThreshold && rightThreshold.length > 0;\n\n  const thresholdLeftSize = hasLeftThresholds ? THRESHOLD_BAR_THICKNESS : 0;\n  const thresholdRightSize = hasRightThresholds ? THRESHOLD_BAR_THICKNESS : 0;\n  const horizontalCrosshairWidth =\n    width + thresholdLeftSize + thresholdRightSize;\n\n  return (\n    <svg className={crosshairLayout}>\n      <HorizontalCrosshair\n        data-testid=\"horizontal-crosshair-histogram\"\n        width={horizontalCrosshairWidth}\n        leftLabel={leftLabel}\n        rightLabel={rightLabel}\n        leftOffset={thresholdLeftSize}\n        rightOffset={thresholdRightSize}\n        y={y}\n        dashed={!pinned}\n        chartBounds={chartBounds}\n      />\n    </svg>\n  );\n};\n"],
+  "mappings": "AAkFM;AAlFN,SAAS,mBAAmB;AAE5B,SAAS,uBAAuB;AAChC,SAAS,2BAA2B;AACpC,SAAS,yBAAyB;AAClC,SAAS,uBAAuB;AAChC,SAAS,iCAAiC;AAC1C,SAAS,+BAA+B;AACxC,SAAS,gCAAgC;AACzC;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,SAAS,mBAAmB;AAC5B,SAAS,mCAAmC;AAC5C,SAAS,gCAAgC;AACzC,SAAS,8BAA8B;AACvC,SAAS,8BAA8B;AACvC,SAAS,2BAA2B;AACpC,SAAS,uBAAuB;AAEzB,MAAM,qBAAqB,MAAM;AACtC,QAAM;AAAA,IACJ,OAAO,CAAC,UAAU,SAAS;AAAA,EAC7B,IAAI,yBAAyB;AAC7B,QAAM,CAAC,eAAe,cAAc,IAAI,uBAAuB;AAC/D,QAAM,EAAE,QAAQ,SAAS,IAAI,gBAAgB;AAC7C,QAAM,WAAW,YAAY;AAC7B,QAAM,mBAAmB,MAAM,SAAS,yBAAyB;AAEjE,2BAAyB,QAAQ,gBAAgB;AAEjD,QAAM,wBAAwB,UAAU;AACxC,QAAM,CAAC,WAAW,UAAU,IAAI,oBAAoB;AACpD,QAAM,EAAE,MAAM,IAAI,gBAAgB;AAClC,QAAM,EAAE,eAAe,eAAe,IAAI,uBAAuB;AACjE,QAAM,mBAAmB,oBAAoB;AAE7C,QAAM,WAAW,4BAA4B;AAC7C,QAAM,cAAc,SAAS,SAAS,sBAAsB;AAC5D,QAAM,YAAY,SACd,SACA;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEJ,QAAM,aAAa,SACf,SACA;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEJ,QAAM,eAAe,UAAU,CAAC,YAAY,kBAAkB,UAAU;AACxE,QAAM,WAAW,CAAC,UAAU,CAAC,YAAY,qBAAqB;AAE9D,MAAI,CAAC,gBAAgB,CAAC,UAAU;AAC9B,WAAO;AAAA,EACT;AAEA,QAAM,IAAI;AAAA;AAAA,IAEN,iBAAiB,WAAY,IAAI;AAAA,MAChC,uBAAuB,KAAK;AAEjC,QAAM,oBAAoB,iBAAiB,cAAc,SAAS;AAClE,QAAM,qBAAqB,kBAAkB,eAAe,SAAS;AAErE,QAAM,oBAAoB,oBAAoB,0BAA0B;AACxE,QAAM,qBAAqB,qBAAqB,0BAA0B;AAC1E,QAAM,2BACJ,QAAQ,oBAAoB;AAE9B,SACE,oBAAC,SAAI,WAAW,iBACd;AAAA,IAAC;AAAA;AAAA,MACC,eAAY;AAAA,MACZ,OAAO;AAAA,MACP;AAAA,MACA;AAAA,MACA,YAAY;AAAA,MACZ,aAAa;AAAA,MACb;AAAA,MACA,QAAQ,CAAC;AAAA,MACT;AAAA;AAAA,EACF,GACF;AAEJ;",
   "names": []
 }

package/esm/charts/histogram/components/overlays/HistogramExplore/HistogramTooltip.css

@@ -1,4 +1,4 @@
-._fzvydv0-3-12-1 {
+._fzvydv0-3-13-0 {
   padding-left: var(--dt-spacings-size-8, 8px);
   padding-right: var(--dt-spacings-size-8, 8px);
 }

package/esm/charts/histogram/components/overlays/HistogramExplore/HistogramTooltip.js

@@ -91,9 +91,9 @@ const HistogramTooltip = ({
               ),
               name: headerLabel,
               item: showHeaderTooltipItem ? {
-                // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+                // oxlint-disable-next-line typescript/no-non-null-assertion
                 ...closestTooltipItem,
-                // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+                // oxlint-disable-next-line typescript/no-non-null-assertion
                 values: closestTooltipItem.asyncValues()
               } : void 0
             }

package/esm/charts/histogram/components/overlays/HistogramExplore/HistogramTooltip.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/histogram/components/overlays/HistogramExplore/HistogramTooltip.tsx"],
-  "sourcesContent": ["/* eslint-disable @typescript-eslint/no-deprecated -- DEPRECATION: [APPDEV-17834] BREAKING-CHANGE: migrate to ChartTooltip before next major. */\nimport { useIntl } from 'react-intl';\n\nimport { wrapper } from './HistogramTooltip.sty.js';\nimport { HistogramTooltipWrapper } from './HistogramTooltipWrapper.js';\nimport { Divider } from '../../../../../layouts/divider/Divider.js';\nimport { ChartActionsMenu } from '../../../../core/components/series-action/ChartActionsMenu.js';\nimport { useChartActionsMenu } from '../../../../core/components/series-action/hooks/useChartActionsMenu.js';\nimport { getDefaultAction } from '../../../../core/components/series-action/hooks/useDefaultAction.js';\nimport { InteractiveChartTooltip } from '../../../../core/components/tooltip/InteractiveChartTooltip/components/InteractiveChartTooltip.js';\nimport { SeriesBasedContent } from '../../../../core/components/tooltip/InteractiveChartTooltip/contents/SeriesBasedContent.js';\nimport { CategoricalTooltipHeader } from '../../../../core/components/tooltip/InteractiveChartTooltip/headers/CategoricalTooltipHeader.js';\nimport { useTooltipSeriesActions } from '../../../../core/components/tooltip/shared/hooks/useTooltipSeriesActions.js';\nimport { Formatter } from '../../../../core/types/formatter.js';\nimport { useHistogramFilteredData } from '../../../hooks/useHistogramFilteredData.js';\nimport { useHistogramTooltip } from '../../../hooks/useHistogramTooltip.js';\nimport { useHistogramTruncationMode } from '../../../hooks/useHistogramTruncationMode.js';\nimport { useHistogramXFormatter } from '../../../hooks/useHistogramXFormatter.js';\nimport { useHistogramYFormatter } from '../../../hooks/useHistogramYFormatter.js';\nimport { useSeriesActionClickHandler } from '../../../hooks/useSeriesActionClickHandler.js';\nimport { useXAxisConfig } from '../../../hooks/useXAxisConfig.js';\nimport { safeGet } from '../../../providers/HistogramDataProvider.js';\nimport {\n  HistogramBin,\n  HistogramSeries,\n  WeakMapBins,\n} from '../../../types/histogram.js';\nimport { PREPOSITION } from '../constants.js';\nimport {\n  type HistogramTooltipDataPoint,\n  toTooltipItems,\n} from '../utils/bins-to-tooltip.js';\nimport { getHeaderLabel } from '../utils/get-header-label-tooltip.js';\n\ninterface HistogramTooltipProps {\n  points: HistogramTooltipDataPoint[];\n  closestPoint?: HistogramTooltipDataPoint;\n}\n\nfunction getHeaderResolution(\n  binsMap: WeakMapBins,\n  bin: HistogramBin,\n  formatter: Formatter,\n) {\n  const { from, to } = safeGet(binsMap, bin);\n  return formatter(to - from);\n}\n\n/**\n * Tooltip specific to the Histogram.\n */\nexport const HistogramTooltip = ({\n  points,\n  closestPoint,\n}: HistogramTooltipProps) => {\n  const { binsMap, series, seriesMap } = useHistogramFilteredData();\n\n  const { unit: xUnit } = useXAxisConfig();\n  const { variant } = useHistogramTooltip();\n  const truncationMode = useHistogramTruncationMode();\n  const bottomFormatter = useHistogramXFormatter();\n  const {\n    onLeave: handleMenuLeave,\n    onScroll: handleMenuScroll,\n    selectedItem,\n    updateSelectedItem,\n    actionsMenuRef,\n    isScrolling,\n  } = useChartActionsMenu();\n  const formatters = useHistogramYFormatter();\n  const { units } = useHistogramFilteredData();\n\n  const isSingle = variant === 'single';\n\n  const { tooltipItems, closestTooltipItem } = toTooltipItems(\n    binsMap,\n    formatters,\n    isSingle,\n    units,\n    points,\n    closestPoint,\n  );\n\n  const actionClickHandler = useSeriesActionClickHandler(\n    tooltipItems.length > 1,\n  );\n\n  const seriesActions = useTooltipSeriesActions<HistogramSeries>(\n    series,\n    (series) => safeGet(seriesMap, series).id,\n    tooltipItems.find((t) => t.id === selectedItem)?.bin,\n  );\n\n  const intl = useIntl();\n\n  const showHeaderTooltipItem = !isSingle && tooltipItems.length > 1;\n\n  const showHeaderDivider = tooltipItems.length > 1 && variant === 'shared';\n\n  const labelFormatter = (value: number) => bottomFormatter(value, xUnit);\n\n  const headerLabel = closestPoint\n    ? getHeaderLabel(\n        binsMap,\n        closestPoint.bin,\n        labelFormatter,\n        intl.formatMessage(PREPOSITION.to),\n      )\n    : '';\n\n  return (\n    <HistogramTooltipWrapper\n      tooltipItems={tooltipItems}\n      onMouseLeave={handleMenuLeave}\n      onScrollContent={handleMenuScroll}\n    >\n      <InteractiveChartTooltip.Header>\n        {closestPoint && (\n          <>\n            <CategoricalTooltipHeader\n              //TODO Add the X axis unit\n              resolution={getHeaderResolution(\n                binsMap,\n                closestPoint.bin,\n                labelFormatter,\n              )}\n              name={headerLabel}\n              item={\n                showHeaderTooltipItem\n                  ? {\n                      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n                      ...closestTooltipItem!,\n                      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n                      values: closestTooltipItem!.asyncValues(),\n                    }\n                  : undefined\n              }\n            />\n            {showHeaderDivider && (\n              <div\n                className={wrapper}\n                key={`divider-${closestTooltipItem?.id}`}\n              >\n                <Divider />\n              </div>\n            )}\n          </>\n        )}\n      </InteractiveChartTooltip.Header>\n\n      {tooltipItems && (\n        <InteractiveChartTooltip.Body>\n          {tooltipItems.map((item) => () => {\n            const isOpen = selectedItem === item.id;\n            return (\n              <ChartActionsMenu\n                key={`${item.id}`}\n                isOpen={isOpen}\n                actions={isOpen ? seriesActions(item) : undefined}\n                defaultActions={getDefaultAction(item)}\n                ref={actionsMenuRef}\n                onActionClick={actionClickHandler}\n              >\n                <SeriesBasedContent\n                  item={{ ...item, values: item.asyncValues() }}\n                  onMouseHover={() => updateSelectedItem(item.id)}\n                  truncationMode={truncationMode}\n                  isScrolling={isScrolling}\n                />\n              </ChartActionsMenu>\n            );\n          })}\n        </InteractiveChartTooltip.Body>\n      )}\n    </HistogramTooltipWrapper>\n  );\n};\n"],
+  "sourcesContent": ["/* oxlint-disable typescript/no-deprecated -- DEPRECATION: [APPDEV-17834] BREAKING-CHANGE: migrate to ChartTooltip before next major. */\nimport { useIntl } from 'react-intl';\n\nimport { wrapper } from './HistogramTooltip.sty.js';\nimport { HistogramTooltipWrapper } from './HistogramTooltipWrapper.js';\nimport { Divider } from '../../../../../layouts/divider/Divider.js';\nimport { ChartActionsMenu } from '../../../../core/components/series-action/ChartActionsMenu.js';\nimport { useChartActionsMenu } from '../../../../core/components/series-action/hooks/useChartActionsMenu.js';\nimport { getDefaultAction } from '../../../../core/components/series-action/hooks/useDefaultAction.js';\nimport { InteractiveChartTooltip } from '../../../../core/components/tooltip/InteractiveChartTooltip/components/InteractiveChartTooltip.js';\nimport { SeriesBasedContent } from '../../../../core/components/tooltip/InteractiveChartTooltip/contents/SeriesBasedContent.js';\nimport { CategoricalTooltipHeader } from '../../../../core/components/tooltip/InteractiveChartTooltip/headers/CategoricalTooltipHeader.js';\nimport { useTooltipSeriesActions } from '../../../../core/components/tooltip/shared/hooks/useTooltipSeriesActions.js';\nimport { Formatter } from '../../../../core/types/formatter.js';\nimport { useHistogramFilteredData } from '../../../hooks/useHistogramFilteredData.js';\nimport { useHistogramTooltip } from '../../../hooks/useHistogramTooltip.js';\nimport { useHistogramTruncationMode } from '../../../hooks/useHistogramTruncationMode.js';\nimport { useHistogramXFormatter } from '../../../hooks/useHistogramXFormatter.js';\nimport { useHistogramYFormatter } from '../../../hooks/useHistogramYFormatter.js';\nimport { useSeriesActionClickHandler } from '../../../hooks/useSeriesActionClickHandler.js';\nimport { useXAxisConfig } from '../../../hooks/useXAxisConfig.js';\nimport { safeGet } from '../../../providers/HistogramDataProvider.js';\nimport {\n  HistogramBin,\n  HistogramSeries,\n  WeakMapBins,\n} from '../../../types/histogram.js';\nimport { PREPOSITION } from '../constants.js';\nimport {\n  type HistogramTooltipDataPoint,\n  toTooltipItems,\n} from '../utils/bins-to-tooltip.js';\nimport { getHeaderLabel } from '../utils/get-header-label-tooltip.js';\n\ninterface HistogramTooltipProps {\n  points: HistogramTooltipDataPoint[];\n  closestPoint?: HistogramTooltipDataPoint;\n}\n\nfunction getHeaderResolution(\n  binsMap: WeakMapBins,\n  bin: HistogramBin,\n  formatter: Formatter,\n) {\n  const { from, to } = safeGet(binsMap, bin);\n  return formatter(to - from);\n}\n\n/**\n * Tooltip specific to the Histogram.\n */\nexport const HistogramTooltip = ({\n  points,\n  closestPoint,\n}: HistogramTooltipProps) => {\n  const { binsMap, series, seriesMap } = useHistogramFilteredData();\n\n  const { unit: xUnit } = useXAxisConfig();\n  const { variant } = useHistogramTooltip();\n  const truncationMode = useHistogramTruncationMode();\n  const bottomFormatter = useHistogramXFormatter();\n  const {\n    onLeave: handleMenuLeave,\n    onScroll: handleMenuScroll,\n    selectedItem,\n    updateSelectedItem,\n    actionsMenuRef,\n    isScrolling,\n  } = useChartActionsMenu();\n  const formatters = useHistogramYFormatter();\n  const { units } = useHistogramFilteredData();\n\n  const isSingle = variant === 'single';\n\n  const { tooltipItems, closestTooltipItem } = toTooltipItems(\n    binsMap,\n    formatters,\n    isSingle,\n    units,\n    points,\n    closestPoint,\n  );\n\n  const actionClickHandler = useSeriesActionClickHandler(\n    tooltipItems.length > 1,\n  );\n\n  const seriesActions = useTooltipSeriesActions<HistogramSeries>(\n    series,\n    (series) => safeGet(seriesMap, series).id,\n    tooltipItems.find((t) => t.id === selectedItem)?.bin,\n  );\n\n  const intl = useIntl();\n\n  const showHeaderTooltipItem = !isSingle && tooltipItems.length > 1;\n\n  const showHeaderDivider = tooltipItems.length > 1 && variant === 'shared';\n\n  const labelFormatter = (value: number) => bottomFormatter(value, xUnit);\n\n  const headerLabel = closestPoint\n    ? getHeaderLabel(\n        binsMap,\n        closestPoint.bin,\n        labelFormatter,\n        intl.formatMessage(PREPOSITION.to),\n      )\n    : '';\n\n  return (\n    <HistogramTooltipWrapper\n      tooltipItems={tooltipItems}\n      onMouseLeave={handleMenuLeave}\n      onScrollContent={handleMenuScroll}\n    >\n      <InteractiveChartTooltip.Header>\n        {closestPoint && (\n          <>\n            <CategoricalTooltipHeader\n              //TODO Add the X axis unit\n              resolution={getHeaderResolution(\n                binsMap,\n                closestPoint.bin,\n                labelFormatter,\n              )}\n              name={headerLabel}\n              item={\n                showHeaderTooltipItem\n                  ? {\n                      // oxlint-disable-next-line typescript/no-non-null-assertion\n                      ...closestTooltipItem!,\n                      // oxlint-disable-next-line typescript/no-non-null-assertion\n                      values: closestTooltipItem!.asyncValues(),\n                    }\n                  : undefined\n              }\n            />\n            {showHeaderDivider && (\n              <div\n                className={wrapper}\n                key={`divider-${closestTooltipItem?.id}`}\n              >\n                <Divider />\n              </div>\n            )}\n          </>\n        )}\n      </InteractiveChartTooltip.Header>\n\n      {tooltipItems && (\n        <InteractiveChartTooltip.Body>\n          {tooltipItems.map((item) => () => {\n            const isOpen = selectedItem === item.id;\n            return (\n              <ChartActionsMenu\n                key={`${item.id}`}\n                isOpen={isOpen}\n                actions={isOpen ? seriesActions(item) : undefined}\n                defaultActions={getDefaultAction(item)}\n                ref={actionsMenuRef}\n                onActionClick={actionClickHandler}\n              >\n                <SeriesBasedContent\n                  item={{ ...item, values: item.asyncValues() }}\n                  onMouseHover={() => updateSelectedItem(item.id)}\n                  truncationMode={truncationMode}\n                  isScrolling={isScrolling}\n                />\n              </ChartActionsMenu>\n            );\n          })}\n        </InteractiveChartTooltip.Body>\n      )}\n    </HistogramTooltipWrapper>\n  );\n};\n"],
   "mappings": "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",
   "names": ["series"]
 }

package/esm/charts/histogram/components/overlays/HistogramExplore/HistogramTooltip.sty.js

@@ -1,5 +1,5 @@
 import "./HistogramTooltip.css";
-var wrapper = "_fzvydv0-3-12-1";
+var wrapper = "_fzvydv0-3-13-0";
 export {
   wrapper
 };

package/esm/charts/histogram/components/overlays/HistogramExplore/HistogramTooltip.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/histogram/components/overlays/HistogramExplore/HistogramTooltip.css.ts"],
-  "sourcesContent": ["import './HistogramTooltip.css';\nexport var wrapper = '_fzvydv0-3-12-1';"],
+  "sourcesContent": ["import './HistogramTooltip.css';\nexport var wrapper = '_fzvydv0-3-13-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,UAAU;",
   "names": []
 }

package/esm/charts/histogram/components/overlays/HistogramExplore/HistogramTooltipWrapper.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/histogram/components/overlays/HistogramExplore/HistogramTooltipWrapper.tsx"],
-  "sourcesContent": ["/* eslint-disable @typescript-eslint/no-deprecated -- DEPRECATION: [APPDEV-17834] BREAKING-CHANGE: migrate to ChartTooltip before next major. */\nimport {\n  type PropsWithChildren,\n  type MouseEvent as ReactMouseEvent,\n} from 'react';\n\nimport { InteractiveChartTooltip } from '../../../../core/components/tooltip/InteractiveChartTooltip/components/InteractiveChartTooltip.js';\nimport { useSeriesBasedItemEstimatedSize } from '../../../../core/components/tooltip/InteractiveChartTooltip/hooks/useSeriesBasedItemEstimatedSize.js';\nimport { useScrollResponsiveChartBounds } from '../../../../core/hooks/useScrollResponsiveChartBounds.js';\nimport { TooltipItem } from '../../../../core/types/tooltip.js';\nimport { calculateAdjustedTooltipPosition } from '../../../../core/utils/calculate-adjusted-tooltip-position.js';\nimport { useExploreState } from '../../../hooks/store/selectors.js';\nimport { useHistogramChartOverlayRef } from '../../../hooks/useHistogramChartOverlayRef.js';\nimport { ADJUSTED_LAYOUT_OFFSET } from '../constants.js';\n\ninterface HistogramTooltipWrapperProps {\n  tooltipItems: TooltipItem[];\n  onMouseLeave: (event?: ReactMouseEvent) => void;\n  onScrollContent: (event?: Event) => void;\n}\n\nexport const HistogramTooltipWrapper = ({\n  tooltipItems,\n  onMouseLeave,\n  onScrollContent,\n  children,\n}: PropsWithChildren<HistogramTooltipWrapperProps>) => {\n  const { pinned, position } = useExploreState();\n  const chartRef = useHistogramChartOverlayRef();\n  const bounds = useScrollResponsiveChartBounds(chartRef, pinned)();\n\n  const estimatedItemSize = useSeriesBasedItemEstimatedSize(\n    tooltipItems,\n    'single-line',\n  );\n\n  const adjustedTooltipPosition = calculateAdjustedTooltipPosition(\n    bounds,\n    position,\n    ADJUSTED_LAYOUT_OFFSET,\n  );\n\n  const showTooltip = tooltipItems.length && adjustedTooltipPosition;\n\n  return showTooltip ? (\n    <InteractiveChartTooltip\n      position={adjustedTooltipPosition}\n      pinned={pinned}\n      itemSize={estimatedItemSize}\n      updatePositionWhenPinned={true}\n      onMouseLeave={onMouseLeave}\n      onScrollContent={onScrollContent}\n    >\n      {children}\n    </InteractiveChartTooltip>\n  ) : null;\n};\n"],
+  "sourcesContent": ["/* oxlint-disable typescript/no-deprecated -- DEPRECATION: [APPDEV-17834] BREAKING-CHANGE: migrate to ChartTooltip before next major. */\nimport {\n  type PropsWithChildren,\n  type MouseEvent as ReactMouseEvent,\n} from 'react';\n\nimport { InteractiveChartTooltip } from '../../../../core/components/tooltip/InteractiveChartTooltip/components/InteractiveChartTooltip.js';\nimport { useSeriesBasedItemEstimatedSize } from '../../../../core/components/tooltip/InteractiveChartTooltip/hooks/useSeriesBasedItemEstimatedSize.js';\nimport { useScrollResponsiveChartBounds } from '../../../../core/hooks/useScrollResponsiveChartBounds.js';\nimport { TooltipItem } from '../../../../core/types/tooltip.js';\nimport { calculateAdjustedTooltipPosition } from '../../../../core/utils/calculate-adjusted-tooltip-position.js';\nimport { useExploreState } from '../../../hooks/store/selectors.js';\nimport { useHistogramChartOverlayRef } from '../../../hooks/useHistogramChartOverlayRef.js';\nimport { ADJUSTED_LAYOUT_OFFSET } from '../constants.js';\n\ninterface HistogramTooltipWrapperProps {\n  tooltipItems: TooltipItem[];\n  onMouseLeave: (event?: ReactMouseEvent) => void;\n  onScrollContent: (event?: Event) => void;\n}\n\nexport const HistogramTooltipWrapper = ({\n  tooltipItems,\n  onMouseLeave,\n  onScrollContent,\n  children,\n}: PropsWithChildren<HistogramTooltipWrapperProps>) => {\n  const { pinned, position } = useExploreState();\n  const chartRef = useHistogramChartOverlayRef();\n  const bounds = useScrollResponsiveChartBounds(chartRef, pinned)();\n\n  const estimatedItemSize = useSeriesBasedItemEstimatedSize(\n    tooltipItems,\n    'single-line',\n  );\n\n  const adjustedTooltipPosition = calculateAdjustedTooltipPosition(\n    bounds,\n    position,\n    ADJUSTED_LAYOUT_OFFSET,\n  );\n\n  const showTooltip = tooltipItems.length && adjustedTooltipPosition;\n\n  return showTooltip ? (\n    <InteractiveChartTooltip\n      position={adjustedTooltipPosition}\n      pinned={pinned}\n      itemSize={estimatedItemSize}\n      updatePositionWhenPinned={true}\n      onMouseLeave={onMouseLeave}\n      onScrollContent={onScrollContent}\n    >\n      {children}\n    </InteractiveChartTooltip>\n  ) : null;\n};\n"],
   "mappings": "AA6CI;AAvCJ,SAAS,+BAA+B;AACxC,SAAS,uCAAuC;AAChD,SAAS,sCAAsC;AAE/C,SAAS,wCAAwC;AACjD,SAAS,uBAAuB;AAChC,SAAS,mCAAmC;AAC5C,SAAS,8BAA8B;AAQhC,MAAM,0BAA0B,CAAC;AAAA,EACtC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAuD;AACrD,QAAM,EAAE,QAAQ,SAAS,IAAI,gBAAgB;AAC7C,QAAM,WAAW,4BAA4B;AAC7C,QAAM,SAAS,+BAA+B,UAAU,MAAM,EAAE;AAEhE,QAAM,oBAAoB;AAAA,IACxB;AAAA,IACA;AAAA,EACF;AAEA,QAAM,0BAA0B;AAAA,IAC9B;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,QAAM,cAAc,aAAa,UAAU;AAE3C,SAAO,cACL;AAAA,IAAC;AAAA;AAAA,MACC,UAAU;AAAA,MACV;AAAA,MACA,UAAU;AAAA,MACV,0BAA0B;AAAA,MAC1B;AAAA,MACA;AAAA,MAEC;AAAA;AAAA,EACH,IACE;AACN;",
   "names": []
 }

package/esm/charts/histogram/components/overlays/HistogramOverlays.css

@@ -1,4 +1,4 @@
-._drl8ns0-3-12-1 {
+._drl8ns0-3-13-0 {
   top: -7px;
   left: -7px;
   width: calc(100% + 14px);
@@ -6,7 +6,7 @@
   z-index: 2;
   pointer-events: none;
 }
-._drl8ns1-3-12-1 {
+._drl8ns1-3-13-0 {
   pointer-events: none;
   overflow: visible;
   z-index: 1;

package/esm/charts/histogram/components/overlays/HistogramOverlays.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/histogram/components/overlays/HistogramOverlays.tsx"],
-  "sourcesContent": ["import { useRef, type FocusEvent } from 'react';\n\nimport { HistogramInspect } from './HistogramExplore/HistogramInspect.js';\nimport { useApplyPanDelta } from './hooks/useApplyPanDelta.js';\nimport { useApplyZoomDelta } from './hooks/useApplyZoomDelta.js';\nimport { useGridPlotSize } from '../../../core/components/chart-grid/hooks/useGridPlotSize.js';\nimport { InteractionsOverlay } from '../../../core/components/interactions-overlay/InteractionsOverlay.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 { isOwnEvent } from '../../../core/components/interactions-overlay/utils/is-own-event.js';\nimport {\n  reduceExploreCancelAll,\n  reduceExploreCancelSelect,\n  reduceExploreCancelTooltip,\n  reduceExploreEnd,\n  reduceExplorePin,\n  reduceExplorePosition,\n  reduceExploreReset,\n  reduceExploreSelect,\n  reduceExploreUnPin,\n} from '../../../core/components/interactions-state-helpers/reducers/explore-reducers.js';\nimport { reduceInteractionMode } from '../../../core/components/interactions-state-helpers/reducers/mode-reducers.js';\nimport { useToolbarHandlerRef } from '../../../core/components/toolbar/hooks/useToolbarHandlerRef.js';\nimport type { RelativeAbsolutePosition } from '../../../core/types/pointer-events.js';\nimport { getPercentageFromPixel } from '../../../core/utils/get-percentage-from-pixel.js';\nimport { HistogramChartOverlayRefContext } from '../../contexts/HistogramChartOverlayRefContext.js';\nimport { HistogramSelectionAreaRef } from '../../contexts/HistogramSelectionAreaRef.context.js';\nimport {\n  useExploreState,\n  useInteractionModeState,\n  useSelectState,\n  useZoomState,\n} from '../../hooks/store/selectors.js';\nimport { useSetState } from '../../hooks/store/state-setters.js';\nimport { useHistogramInteractions } from '../../hooks/useHistogramInteractions.js';\nimport { useHistogramToolbar } from '../../hooks/useHistogramToolbar.js';\nimport { useResetInteractions } from '../../hooks/useResetInteractions.js';\nimport { useResetOnResize } from '../../hooks/useResetOnResize.js';\nimport { useZoomToSelection } from '../../hooks/useZoomToSelection.js';\nimport { HistogramToolbar } from '../toolbar/HistogramToolbar.js';\nimport { HistogramCrosshair } from './HistogramExplore/HistogramCrosshair.js';\nimport { HistogramSelectionArea } from './HistogramSelectionArea/HistogramSelectionArea.js';\nimport type {\n  _SelectionRef,\n  SelectionAreaVariant,\n} from '../../../core/components/selection-area/types.js';\nimport { useSetClosestBins } from '../../hooks/useSetClosestBins.js';\n\nexport const HistogramOverlays = () => {\n  const handlerRef = useToolbarHandlerRef();\n  /* eslint-disable-next-line @typescript-eslint/no-deprecated */\n  const { zoomX, pan, zoom } = useHistogramInteractions();\n  const selectionRef = useRef<_SelectionRef>(null);\n\n  const { width, height } = useGridPlotSize();\n  const toolbar = useHistogramToolbar();\n  const setState = useSetState();\n  const mode = useInteractionModeState();\n  const exploreState = useExploreState();\n  const selectState = useSelectState();\n  const zoomState = useZoomState();\n  const overlayRef = useRef<HTMLDivElement>(null);\n\n  const applyPanDelta = useApplyPanDelta();\n  const applyZoomDelta = useApplyZoomDelta();\n  const zoomToSelection = useZoomToSelection();\n  const resetInteractions = useResetInteractions();\n  const setClosestBins = useSetClosestBins();\n\n  useResetOnResize();\n\n  const handleModeChange = (event: {\n    mode: InteractionMode;\n    keyboard: boolean;\n  }) => {\n    const canPan = zoomState.zoomOutEnabled;\n    const shouldSwitchToPanMode =\n      event.mode === 'pan' && pan?.enabled && canPan;\n    const shouldSwitchToZoomMode =\n      event.mode === 'zoom' && (zoomX?.enabled || zoom?.enabled);\n\n    if (shouldSwitchToPanMode || shouldSwitchToZoomMode) {\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 handleFocus = (event?: FocusEvent) => {\n    if (!event || event.cancelable) {\n      return;\n    }\n    if (isOwnEvent(event)) {\n      handlerRef.current.handleFocus();\n    }\n  };\n\n  const handleHover = (event: {\n    triggeredBy: InteractionTriggers;\n    position: RelativeAbsolutePosition;\n  }) => {\n    if (mode === 'explore') {\n      setClosestBins(event.position);\n\n      setState(reduceExplorePosition(event.position));\n    }\n  };\n\n  const handleLeave = (_: { triggeredBy: InteractionTriggers }) => {\n    if (mode === 'explore') {\n      setState(reduceExploreEnd);\n    }\n  };\n\n  const handlePanChange = (event: {\n    triggeredBy: InteractionTriggers;\n    delta: number;\n  }) => {\n    if (pan?.enabled) {\n      applyPanDelta(event.delta);\n    }\n  };\n\n  const handleTogglePin = (event: {\n    triggeredBy: InteractionTriggers;\n    position: RelativeAbsolutePosition | undefined;\n    pin: boolean;\n  }) => {\n    if (event.pin) {\n      const highlightedSeriesId = setClosestBins(event.position);\n\n      setState(reduceExplorePin(event.position, highlightedSeriesId));\n    } else {\n      setState(reduceExploreUnPin(event.position));\n    }\n  };\n\n  const handleReset = (event: {\n    triggeredBy: InteractionTriggers;\n    mousePosition?: RelativeAbsolutePosition;\n  }) => {\n    resetInteractions(event.mousePosition);\n  };\n\n  const handleSelectStart = (event: {\n    triggeredBy: InteractionTriggers;\n    position: RelativeAbsolutePosition;\n  }) => {\n    if (!zoomX?.enabled) {\n      handleTogglePin({\n        triggeredBy: event.triggeredBy,\n        position: event.position,\n        pin: !exploreState.pinned,\n      });\n    }\n  };\n\n  const handleSelectChange = (event: {\n    triggeredBy: InteractionTriggers;\n    start: RelativeAbsolutePosition;\n    end: RelativeAbsolutePosition;\n    mode: 'zoom' | 'explore';\n  }): void => {\n    if (zoomX?.enabled || mode === 'explore') {\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    }\n  };\n\n  const handleSelectEnd = (\n    event:\n      | {\n          triggeredBy: InteractionTriggers;\n          start: RelativeAbsolutePosition;\n          end: RelativeAbsolutePosition;\n        }\n      | { cancelled: true },\n  ): void => {\n    if (isSelectCancelled(event)) {\n      setState(reduceExploreCancelSelect);\n    } else if (mode === 'explore') {\n      setState(\n        reduceExploreSelect({\n          start: event.start,\n          end: event.end,\n          finished: true,\n          accessible: false,\n          selectionPercentage: getPercentageFromPixel(\n            [event.start, event.end],\n            width,\n          ),\n        }),\n      );\n      selectionRef.current?.focus();\n    } else if (zoomX?.enabled) {\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    applyZoomDelta(event.deltaStart, event.deltaEnd, event.behavior);\n    setState(reduceExploreCancelAll);\n  };\n\n  const handleToolbarMouseEnter = () => {\n    setState(reduceExploreCancelTooltip);\n  };\n\n  return (\n    <InteractionsOverlay\n      ref={overlayRef}\n      mode={mode}\n      pinned={exploreState.pinned}\n      selectionArea={\n        selectState ? [selectState?.start, selectState?.end] : undefined\n      }\n      width={width}\n      height={height}\n      isZoomDisabled={!zoom?.enabled}\n      isZoomXDisabled={!zoomX?.enabled}\n      isPanDisabled={!(pan?.enabled && zoomState.zoomOutEnabled)}\n      onModeChange={handleModeChange}\n      onFocus={handleFocus}\n      onHover={handleHover}\n      onLeave={handleLeave}\n      onPanChange={handlePanChange}\n      onTogglePin={handleTogglePin}\n      onReset={handleReset}\n      onSelectStart={handleSelectStart}\n      onSelectChange={handleSelectChange}\n      onSelectEnd={handleSelectEnd}\n      onZoomChange={handleZoomChange}\n      data-testid=\"histogram-chart-overlay\"\n      style={{ userSelect: selectState?.finished === false ? 'none' : 'auto' }}\n    >\n      <HistogramChartOverlayRefContext.Provider value={overlayRef}>\n        {exploreState.visible ? (\n          <>\n            <HistogramCrosshair />\n            <HistogramInspect />\n          </>\n        ) : null}\n        <HistogramSelectionAreaRef.Provider value={selectionRef}>\n          {toolbar.enabled ? (\n            <HistogramToolbar\n              onMouseEnter={handleToolbarMouseEnter}\n              handlerRef={handlerRef}\n            />\n          ) : null}\n          <HistogramSelectionArea />\n        </HistogramSelectionAreaRef.Provider>\n      </HistogramChartOverlayRefContext.Provider>\n    </InteractionsOverlay>\n  );\n};\n"],
+  "sourcesContent": ["import { useRef, type FocusEvent } from 'react';\n\nimport { HistogramInspect } from './HistogramExplore/HistogramInspect.js';\nimport { useApplyPanDelta } from './hooks/useApplyPanDelta.js';\nimport { useApplyZoomDelta } from './hooks/useApplyZoomDelta.js';\nimport { useGridPlotSize } from '../../../core/components/chart-grid/hooks/useGridPlotSize.js';\nimport { InteractionsOverlay } from '../../../core/components/interactions-overlay/InteractionsOverlay.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 { isOwnEvent } from '../../../core/components/interactions-overlay/utils/is-own-event.js';\nimport {\n  reduceExploreCancelAll,\n  reduceExploreCancelSelect,\n  reduceExploreCancelTooltip,\n  reduceExploreEnd,\n  reduceExplorePin,\n  reduceExplorePosition,\n  reduceExploreReset,\n  reduceExploreSelect,\n  reduceExploreUnPin,\n} from '../../../core/components/interactions-state-helpers/reducers/explore-reducers.js';\nimport { reduceInteractionMode } from '../../../core/components/interactions-state-helpers/reducers/mode-reducers.js';\nimport { useToolbarHandlerRef } from '../../../core/components/toolbar/hooks/useToolbarHandlerRef.js';\nimport type { RelativeAbsolutePosition } from '../../../core/types/pointer-events.js';\nimport { getPercentageFromPixel } from '../../../core/utils/get-percentage-from-pixel.js';\nimport { HistogramChartOverlayRefContext } from '../../contexts/HistogramChartOverlayRefContext.js';\nimport { HistogramSelectionAreaRef } from '../../contexts/HistogramSelectionAreaRef.context.js';\nimport {\n  useExploreState,\n  useInteractionModeState,\n  useSelectState,\n  useZoomState,\n} from '../../hooks/store/selectors.js';\nimport { useSetState } from '../../hooks/store/state-setters.js';\nimport { useHistogramInteractions } from '../../hooks/useHistogramInteractions.js';\nimport { useHistogramToolbar } from '../../hooks/useHistogramToolbar.js';\nimport { useResetInteractions } from '../../hooks/useResetInteractions.js';\nimport { useResetOnResize } from '../../hooks/useResetOnResize.js';\nimport { useZoomToSelection } from '../../hooks/useZoomToSelection.js';\nimport { HistogramToolbar } from '../toolbar/HistogramToolbar.js';\nimport { HistogramCrosshair } from './HistogramExplore/HistogramCrosshair.js';\nimport { HistogramSelectionArea } from './HistogramSelectionArea/HistogramSelectionArea.js';\nimport type {\n  _SelectionRef,\n  SelectionAreaVariant,\n} from '../../../core/components/selection-area/types.js';\nimport { useSetClosestBins } from '../../hooks/useSetClosestBins.js';\n\nexport const HistogramOverlays = () => {\n  const handlerRef = useToolbarHandlerRef();\n  /* oxlint-disable-next-line typescript/no-deprecated */\n  const { zoomX, pan, zoom } = useHistogramInteractions();\n  const selectionRef = useRef<_SelectionRef>(null);\n\n  const { width, height } = useGridPlotSize();\n  const toolbar = useHistogramToolbar();\n  const setState = useSetState();\n  const mode = useInteractionModeState();\n  const exploreState = useExploreState();\n  const selectState = useSelectState();\n  const zoomState = useZoomState();\n  const overlayRef = useRef<HTMLDivElement>(null);\n\n  const applyPanDelta = useApplyPanDelta();\n  const applyZoomDelta = useApplyZoomDelta();\n  const zoomToSelection = useZoomToSelection();\n  const resetInteractions = useResetInteractions();\n  const setClosestBins = useSetClosestBins();\n\n  useResetOnResize();\n\n  const handleModeChange = (event: {\n    mode: InteractionMode;\n    keyboard: boolean;\n  }) => {\n    const canPan = zoomState.zoomOutEnabled;\n    const shouldSwitchToPanMode =\n      event.mode === 'pan' && pan?.enabled && canPan;\n    const shouldSwitchToZoomMode =\n      event.mode === 'zoom' && (zoomX?.enabled || zoom?.enabled);\n\n    if (shouldSwitchToPanMode || shouldSwitchToZoomMode) {\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 handleFocus = (event?: FocusEvent) => {\n    if (!event || event.cancelable) {\n      return;\n    }\n    if (isOwnEvent(event)) {\n      handlerRef.current.handleFocus();\n    }\n  };\n\n  const handleHover = (event: {\n    triggeredBy: InteractionTriggers;\n    position: RelativeAbsolutePosition;\n  }) => {\n    if (mode === 'explore') {\n      setClosestBins(event.position);\n\n      setState(reduceExplorePosition(event.position));\n    }\n  };\n\n  const handleLeave = (_: { triggeredBy: InteractionTriggers }) => {\n    if (mode === 'explore') {\n      setState(reduceExploreEnd);\n    }\n  };\n\n  const handlePanChange = (event: {\n    triggeredBy: InteractionTriggers;\n    delta: number;\n  }) => {\n    if (pan?.enabled) {\n      applyPanDelta(event.delta);\n    }\n  };\n\n  const handleTogglePin = (event: {\n    triggeredBy: InteractionTriggers;\n    position: RelativeAbsolutePosition | undefined;\n    pin: boolean;\n  }) => {\n    if (event.pin) {\n      const highlightedSeriesId = setClosestBins(event.position);\n\n      setState(reduceExplorePin(event.position, highlightedSeriesId));\n    } else {\n      setState(reduceExploreUnPin(event.position));\n    }\n  };\n\n  const handleReset = (event: {\n    triggeredBy: InteractionTriggers;\n    mousePosition?: RelativeAbsolutePosition;\n  }) => {\n    resetInteractions(event.mousePosition);\n  };\n\n  const handleSelectStart = (event: {\n    triggeredBy: InteractionTriggers;\n    position: RelativeAbsolutePosition;\n  }) => {\n    if (!zoomX?.enabled) {\n      handleTogglePin({\n        triggeredBy: event.triggeredBy,\n        position: event.position,\n        pin: !exploreState.pinned,\n      });\n    }\n  };\n\n  const handleSelectChange = (event: {\n    triggeredBy: InteractionTriggers;\n    start: RelativeAbsolutePosition;\n    end: RelativeAbsolutePosition;\n    mode: 'zoom' | 'explore';\n  }): void => {\n    if (zoomX?.enabled || mode === 'explore') {\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    }\n  };\n\n  const handleSelectEnd = (\n    event:\n      | {\n          triggeredBy: InteractionTriggers;\n          start: RelativeAbsolutePosition;\n          end: RelativeAbsolutePosition;\n        }\n      | { cancelled: true },\n  ): void => {\n    if (isSelectCancelled(event)) {\n      setState(reduceExploreCancelSelect);\n    } else if (mode === 'explore') {\n      setState(\n        reduceExploreSelect({\n          start: event.start,\n          end: event.end,\n          finished: true,\n          accessible: false,\n          selectionPercentage: getPercentageFromPixel(\n            [event.start, event.end],\n            width,\n          ),\n        }),\n      );\n      selectionRef.current?.focus();\n    } else if (zoomX?.enabled) {\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    applyZoomDelta(event.deltaStart, event.deltaEnd, event.behavior);\n    setState(reduceExploreCancelAll);\n  };\n\n  const handleToolbarMouseEnter = () => {\n    setState(reduceExploreCancelTooltip);\n  };\n\n  return (\n    <InteractionsOverlay\n      ref={overlayRef}\n      mode={mode}\n      pinned={exploreState.pinned}\n      selectionArea={\n        selectState ? [selectState?.start, selectState?.end] : undefined\n      }\n      width={width}\n      height={height}\n      isZoomDisabled={!zoom?.enabled}\n      isZoomXDisabled={!zoomX?.enabled}\n      isPanDisabled={!(pan?.enabled && zoomState.zoomOutEnabled)}\n      onModeChange={handleModeChange}\n      onFocus={handleFocus}\n      onHover={handleHover}\n      onLeave={handleLeave}\n      onPanChange={handlePanChange}\n      onTogglePin={handleTogglePin}\n      onReset={handleReset}\n      onSelectStart={handleSelectStart}\n      onSelectChange={handleSelectChange}\n      onSelectEnd={handleSelectEnd}\n      onZoomChange={handleZoomChange}\n      data-testid=\"histogram-chart-overlay\"\n      style={{ userSelect: selectState?.finished === false ? 'none' : 'auto' }}\n    >\n      <HistogramChartOverlayRefContext.Provider value={overlayRef}>\n        {exploreState.visible ? (\n          <>\n            <HistogramCrosshair />\n            <HistogramInspect />\n          </>\n        ) : null}\n        <HistogramSelectionAreaRef.Provider value={selectionRef}>\n          {toolbar.enabled ? (\n            <HistogramToolbar\n              onMouseEnter={handleToolbarMouseEnter}\n              handlerRef={handlerRef}\n            />\n          ) : null}\n          <HistogramSelectionArea />\n        </HistogramSelectionAreaRef.Provider>\n      </HistogramChartOverlayRefContext.Provider>\n    </InteractionsOverlay>\n  );\n};\n"],
   "mappings": "AAuQU,mBACE,KADF;AAvQV,SAAS,cAA+B;AAExC,SAAS,wBAAwB;AACjC,SAAS,wBAAwB;AACjC,SAAS,yBAAyB;AAClC,SAAS,uBAAuB;AAChC,SAAS,2BAA2B;AACpC;AAAA,EACE;AAAA,EAGA;AAAA,OAEK;AACP,SAAS,kBAAkB;AAC3B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,6BAA6B;AACtC,SAAS,4BAA4B;AAErC,SAAS,8BAA8B;AACvC,SAAS,uCAAuC;AAChD,SAAS,iCAAiC;AAC1C;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,mBAAmB;AAC5B,SAAS,gCAAgC;AACzC,SAAS,2BAA2B;AACpC,SAAS,4BAA4B;AACrC,SAAS,wBAAwB;AACjC,SAAS,0BAA0B;AACnC,SAAS,wBAAwB;AACjC,SAAS,0BAA0B;AACnC,SAAS,8BAA8B;AAKvC,SAAS,yBAAyB;AAE3B,MAAM,oBAAoB,MAAM;AACrC,QAAM,aAAa,qBAAqB;AAExC,QAAM,EAAE,OAAO,KAAK,KAAK,IAAI,yBAAyB;AACtD,QAAM,eAAe,OAAsB,IAAI;AAE/C,QAAM,EAAE,OAAO,OAAO,IAAI,gBAAgB;AAC1C,QAAM,UAAU,oBAAoB;AACpC,QAAM,WAAW,YAAY;AAC7B,QAAM,OAAO,wBAAwB;AACrC,QAAM,eAAe,gBAAgB;AACrC,QAAM,cAAc,eAAe;AACnC,QAAM,YAAY,aAAa;AAC/B,QAAM,aAAa,OAAuB,IAAI;AAE9C,QAAM,gBAAgB,iBAAiB;AACvC,QAAM,iBAAiB,kBAAkB;AACzC,QAAM,kBAAkB,mBAAmB;AAC3C,QAAM,oBAAoB,qBAAqB;AAC/C,QAAM,iBAAiB,kBAAkB;AAEzC,mBAAiB;AAEjB,QAAM,mBAAmB,CAAC,UAGpB;AACJ,UAAM,SAAS,UAAU;AACzB,UAAM,wBACJ,MAAM,SAAS,SAAS,KAAK,WAAW;AAC1C,UAAM,yBACJ,MAAM,SAAS,WAAW,OAAO,WAAW,MAAM;AAEpD,QAAI,yBAAyB,wBAAwB;AACnD,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,UAAuB;AAC1C,QAAI,CAAC,SAAS,MAAM,YAAY;AAC9B;AAAA,IACF;AACA,QAAI,WAAW,KAAK,GAAG;AACrB,iBAAW,QAAQ,YAAY;AAAA,IACjC;AAAA,EACF;AAEA,QAAM,cAAc,CAAC,UAGf;AACJ,QAAI,SAAS,WAAW;AACtB,qBAAe,MAAM,QAAQ;AAE7B,eAAS,sBAAsB,MAAM,QAAQ,CAAC;AAAA,IAChD;AAAA,EACF;AAEA,QAAM,cAAc,CAAC,MAA4C;AAC/D,QAAI,SAAS,WAAW;AACtB,eAAS,gBAAgB;AAAA,IAC3B;AAAA,EACF;AAEA,QAAM,kBAAkB,CAAC,UAGnB;AACJ,QAAI,KAAK,SAAS;AAChB,oBAAc,MAAM,KAAK;AAAA,IAC3B;AAAA,EACF;AAEA,QAAM,kBAAkB,CAAC,UAInB;AACJ,QAAI,MAAM,KAAK;AACb,YAAM,sBAAsB,eAAe,MAAM,QAAQ;AAEzD,eAAS,iBAAiB,MAAM,UAAU,mBAAmB,CAAC;AAAA,IAChE,OAAO;AACL,eAAS,mBAAmB,MAAM,QAAQ,CAAC;AAAA,IAC7C;AAAA,EACF;AAEA,QAAM,cAAc,CAAC,UAGf;AACJ,sBAAkB,MAAM,aAAa;AAAA,EACvC;AAEA,QAAM,oBAAoB,CAAC,UAGrB;AACJ,QAAI,CAAC,OAAO,SAAS;AACnB,sBAAgB;AAAA,QACd,aAAa,MAAM;AAAA,QACnB,UAAU,MAAM;AAAA,QAChB,KAAK,CAAC,aAAa;AAAA,MACrB,CAAC;AAAA,IACH;AAAA,EACF;AAEA,QAAM,qBAAqB,CAAC,UAKhB;AACV,QAAI,OAAO,WAAW,SAAS,WAAW;AACxC,YAAM,UACJ,MAAM,SAAS,YAAY,WAAW;AAExC;AAAA,QACE,oBAAoB;AAAA,UAClB,OAAO,MAAM;AAAA,UACb,KAAK,MAAM;AAAA,UACX,UAAU;AAAA,UACV,YAAY;AAAA,UACZ;AAAA,UACA,qBAAqB;AAAA,YACnB,CAAC,MAAM,OAAO,MAAM,GAAG;AAAA,YACvB;AAAA,UACF;AAAA,QACF,CAAC;AAAA,MACH;AAAA,IACF;AAAA,EACF;AAEA,QAAM,kBAAkB,CACtB,UAOS;AACT,QAAI,kBAAkB,KAAK,GAAG;AAC5B,eAAS,yBAAyB;AAAA,IACpC,WAAW,SAAS,WAAW;AAC7B;AAAA,QACE,oBAAoB;AAAA,UAClB,OAAO,MAAM;AAAA,UACb,KAAK,MAAM;AAAA,UACX,UAAU;AAAA,UACV,YAAY;AAAA,UACZ,qBAAqB;AAAA,YACnB,CAAC,MAAM,OAAO,MAAM,GAAG;AAAA,YACvB;AAAA,UACF;AAAA,QACF,CAAC;AAAA,MACH;AACA,mBAAa,SAAS,MAAM;AAAA,IAC9B,WAAW,OAAO,SAAS;AAEzB,sBAAgB;AAAA,IAClB;AAAA,EACF;AAEA,QAAM,mBAAmB,CAAC,UAKpB;AACJ,mBAAe,MAAM,YAAY,MAAM,UAAU,MAAM,QAAQ;AAC/D,aAAS,sBAAsB;AAAA,EACjC;AAEA,QAAM,0BAA0B,MAAM;AACpC,aAAS,0BAA0B;AAAA,EACrC;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL;AAAA,MACA,QAAQ,aAAa;AAAA,MACrB,eACE,cAAc,CAAC,aAAa,OAAO,aAAa,GAAG,IAAI;AAAA,MAEzD;AAAA,MACA;AAAA,MACA,gBAAgB,CAAC,MAAM;AAAA,MACvB,iBAAiB,CAAC,OAAO;AAAA,MACzB,eAAe,EAAE,KAAK,WAAW,UAAU;AAAA,MAC3C,cAAc;AAAA,MACd,SAAS;AAAA,MACT,SAAS;AAAA,MACT,SAAS;AAAA,MACT,aAAa;AAAA,MACb,aAAa;AAAA,MACb,SAAS;AAAA,MACT,eAAe;AAAA,MACf,gBAAgB;AAAA,MAChB,aAAa;AAAA,MACb,cAAc;AAAA,MACd,eAAY;AAAA,MACZ,OAAO,EAAE,YAAY,aAAa,aAAa,QAAQ,SAAS,OAAO;AAAA,MAEvE,+BAAC,gCAAgC,UAAhC,EAAyC,OAAO,YAC9C;AAAA,qBAAa,UACZ,iCACE;AAAA,8BAAC,sBAAmB;AAAA,UACpB,oBAAC,oBAAiB;AAAA,WACpB,IACE;AAAA,QACJ,qBAAC,0BAA0B,UAA1B,EAAmC,OAAO,cACxC;AAAA,kBAAQ,UACP;AAAA,YAAC;AAAA;AAAA,cACC,cAAc;AAAA,cACd;AAAA;AAAA,UACF,IACE;AAAA,UACJ,oBAAC,0BAAuB;AAAA,WAC1B;AAAA,SACF;AAAA;AAAA,EACF;AAEJ;",
   "names": []
 }

package/esm/charts/histogram/components/overlays/HistogramOverlays.sty.js

@@ -1,7 +1,7 @@
 import "../../../core/components/chart-grid/ChartGrid.css";
 import "./HistogramOverlays.css";
-var crosshairLayout = "_drl8ns1-3-12-1 _13lzg4k0-3-12-1";
-var datapointLayout = "_drl8ns0-3-12-1 _13lzg4k0-3-12-1";
+var crosshairLayout = "_drl8ns1-3-13-0 _13lzg4k0-3-13-0";
+var datapointLayout = "_drl8ns0-3-13-0 _13lzg4k0-3-13-0";
 export {
   crosshairLayout,
   datapointLayout

package/esm/charts/histogram/components/overlays/HistogramOverlays.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/histogram/components/overlays/HistogramOverlays.css.ts"],
-  "sourcesContent": ["import '../../../core/components/chart-grid/ChartGrid.css';\nimport './HistogramOverlays.css';\nexport var crosshairLayout = '_drl8ns1-3-12-1 _13lzg4k0-3-12-1';\nexport var datapointLayout = '_drl8ns0-3-12-1 _13lzg4k0-3-12-1';"],
+  "sourcesContent": ["import '../../../core/components/chart-grid/ChartGrid.css';\nimport './HistogramOverlays.css';\nexport var crosshairLayout = '_drl8ns1-3-13-0 _13lzg4k0-3-13-0';\nexport var datapointLayout = '_drl8ns0-3-13-0 _13lzg4k0-3-13-0';"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACA,IAAI,kBAAkB;AACtB,IAAI,kBAAkB;",
   "names": []
 }

package/esm/charts/histogram/components/overlays/HistogramSelectionArea/HistogramSelectionArea.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/histogram/components/overlays/HistogramSelectionArea/HistogramSelectionArea.tsx"],
-  "sourcesContent": ["import { isUndefined } from 'lodash-es';\nimport { type KeyboardEvent } from 'react';\n\nimport { HistogramSelectionAreaTooltip } from './HistogramSelectionAreaTooltip.js';\nimport { HistogramSelectionDatapoints } from './HistogramSelectionDatapoints.js';\nimport { useGridPlotSize } from '../../../../core/components/chart-grid/hooks/useGridPlotSize.js';\nimport { reduceExploreSelect } from '../../../../core/components/interactions-state-helpers/reducers/explore-reducers.js';\nimport { DynamicSelectionArea } from '../../../../core/components/selection-area/DynamicSelectionArea.js';\nimport type { RelativeAbsolutePosition } from '../../../../core/types/pointer-events.js';\nimport { getPercentageFromPixel } from '../../../../core/utils/get-percentage-from-pixel.js';\nimport { getSelectionPixels } from '../../../../core/utils/get-selection-pixels.js';\nimport { useSelectState } from '../../../hooks/store/selectors.js';\nimport { useSetState } from '../../../hooks/store/state-setters.js';\nimport { useHistogramChartOverlayRef } from '../../../hooks/useHistogramChartOverlayRef.js';\nimport { useHistogramInteractions } from '../../../hooks/useHistogramInteractions.js';\nimport { useHistogramSelectionAreaRef } from '../../../hooks/useHistogramSelectionAreaRef.js';\nimport { useHistogramXFormatter } from '../../../hooks/useHistogramXFormatter.js';\nimport { useHistogramXScale } from '../../../hooks/useHistogramXScale.js';\nimport { useXAxisConfig } from '../../../hooks/useXAxisConfig.js';\n\nexport const HistogramSelectionArea = () => {\n  const bottomFormatter = useHistogramXFormatter();\n  const selectionAreaRef = useHistogramSelectionAreaRef();\n  const { unit: xUnit } = useXAxisConfig();\n  const { xScale } = useHistogramXScale();\n  const chartRef = useHistogramChartOverlayRef();\n  const setState = useSetState();\n  const selectState = useSelectState();\n  const { width } = useGridPlotSize();\n  /* eslint-disable-next-line @typescript-eslint/no-deprecated */\n  const { zoomX } = useHistogramInteractions();\n\n  const hasMagnifiers = !isUndefined(bottomFormatter);\n\n  if (isUndefined(selectState) || !chartRef.current) {\n    return null;\n  }\n\n  const { start, end, selectionPercentage, finished, accessible, variant } =\n    selectState;\n\n  const handleWrapperKeyDown = (event: KeyboardEvent) => {\n    const canZoom = zoomX?.enabled;\n    if (event.key === 'Enter' && canZoom) {\n      chartRef.current?.focus();\n    }\n  };\n\n  const handleSelectionChange = ({\n    selection,\n    accessible,\n  }: {\n    selection: [RelativeAbsolutePosition, RelativeAbsolutePosition];\n    accessible: boolean;\n  }) => {\n    setState(\n      reduceExploreSelect({\n        start: selection[0],\n        end: selection[1],\n        finished: true,\n        accessible,\n        variant,\n        selectionPercentage: getPercentageFromPixel(selection, width),\n      }),\n    );\n  };\n\n  const selectionPosition: [\n    RelativeAbsolutePosition,\n    RelativeAbsolutePosition,\n  ] = finished\n    ? getSelectionPixels(selectionPercentage, width, [start, end])\n    : [start, end];\n\n  return (\n    <>\n      {variant === 'select' ? (\n        <>\n          <HistogramSelectionDatapoints />\n          <HistogramSelectionAreaTooltip />\n        </>\n      ) : null}\n      <DynamicSelectionArea\n        chartRef={chartRef}\n        selection={selectionPosition}\n        hasMagnifiers={hasMagnifiers}\n        variant={variant}\n        focusable={accessible}\n        interactable={finished}\n        bottomFormatter={(value) =>\n          bottomFormatter(xScale.invert(value), xUnit)\n        }\n        onKeyDown={handleWrapperKeyDown}\n        onSelectionChange={handleSelectionChange}\n        selectionAreaRef={selectionAreaRef}\n      />\n    </>\n  );\n};\n"],
+  "sourcesContent": ["import { isUndefined } from 'lodash-es';\nimport { type KeyboardEvent } from 'react';\n\nimport { HistogramSelectionAreaTooltip } from './HistogramSelectionAreaTooltip.js';\nimport { HistogramSelectionDatapoints } from './HistogramSelectionDatapoints.js';\nimport { useGridPlotSize } from '../../../../core/components/chart-grid/hooks/useGridPlotSize.js';\nimport { reduceExploreSelect } from '../../../../core/components/interactions-state-helpers/reducers/explore-reducers.js';\nimport { DynamicSelectionArea } from '../../../../core/components/selection-area/DynamicSelectionArea.js';\nimport type { RelativeAbsolutePosition } from '../../../../core/types/pointer-events.js';\nimport { getPercentageFromPixel } from '../../../../core/utils/get-percentage-from-pixel.js';\nimport { getSelectionPixels } from '../../../../core/utils/get-selection-pixels.js';\nimport { useSelectState } from '../../../hooks/store/selectors.js';\nimport { useSetState } from '../../../hooks/store/state-setters.js';\nimport { useHistogramChartOverlayRef } from '../../../hooks/useHistogramChartOverlayRef.js';\nimport { useHistogramInteractions } from '../../../hooks/useHistogramInteractions.js';\nimport { useHistogramSelectionAreaRef } from '../../../hooks/useHistogramSelectionAreaRef.js';\nimport { useHistogramXFormatter } from '../../../hooks/useHistogramXFormatter.js';\nimport { useHistogramXScale } from '../../../hooks/useHistogramXScale.js';\nimport { useXAxisConfig } from '../../../hooks/useXAxisConfig.js';\n\nexport const HistogramSelectionArea = () => {\n  const bottomFormatter = useHistogramXFormatter();\n  const selectionAreaRef = useHistogramSelectionAreaRef();\n  const { unit: xUnit } = useXAxisConfig();\n  const { xScale } = useHistogramXScale();\n  const chartRef = useHistogramChartOverlayRef();\n  const setState = useSetState();\n  const selectState = useSelectState();\n  const { width } = useGridPlotSize();\n  /* oxlint-disable-next-line typescript/no-deprecated */\n  const { zoomX } = useHistogramInteractions();\n\n  const hasMagnifiers = !isUndefined(bottomFormatter);\n\n  if (isUndefined(selectState) || !chartRef.current) {\n    return null;\n  }\n\n  const { start, end, selectionPercentage, finished, accessible, variant } =\n    selectState;\n\n  const handleWrapperKeyDown = (event: KeyboardEvent) => {\n    const canZoom = zoomX?.enabled;\n    if (event.key === 'Enter' && canZoom) {\n      chartRef.current?.focus();\n    }\n  };\n\n  const handleSelectionChange = ({\n    selection,\n    accessible,\n  }: {\n    selection: [RelativeAbsolutePosition, RelativeAbsolutePosition];\n    accessible: boolean;\n  }) => {\n    setState(\n      reduceExploreSelect({\n        start: selection[0],\n        end: selection[1],\n        finished: true,\n        accessible,\n        variant,\n        selectionPercentage: getPercentageFromPixel(selection, width),\n      }),\n    );\n  };\n\n  const selectionPosition: [\n    RelativeAbsolutePosition,\n    RelativeAbsolutePosition,\n  ] = finished\n    ? getSelectionPixels(selectionPercentage, width, [start, end])\n    : [start, end];\n\n  return (\n    <>\n      {variant === 'select' ? (\n        <>\n          <HistogramSelectionDatapoints />\n          <HistogramSelectionAreaTooltip />\n        </>\n      ) : null}\n      <DynamicSelectionArea\n        chartRef={chartRef}\n        selection={selectionPosition}\n        hasMagnifiers={hasMagnifiers}\n        variant={variant}\n        focusable={accessible}\n        interactable={finished}\n        bottomFormatter={(value) =>\n          bottomFormatter(xScale.invert(value), xUnit)\n        }\n        onKeyDown={handleWrapperKeyDown}\n        onSelectionChange={handleSelectionChange}\n        selectionAreaRef={selectionAreaRef}\n      />\n    </>\n  );\n};\n"],
   "mappings": "AA6EQ,mBACE,KADF;AA7ER,SAAS,mBAAmB;AAG5B,SAAS,qCAAqC;AAC9C,SAAS,oCAAoC;AAC7C,SAAS,uBAAuB;AAChC,SAAS,2BAA2B;AACpC,SAAS,4BAA4B;AAErC,SAAS,8BAA8B;AACvC,SAAS,0BAA0B;AACnC,SAAS,sBAAsB;AAC/B,SAAS,mBAAmB;AAC5B,SAAS,mCAAmC;AAC5C,SAAS,gCAAgC;AACzC,SAAS,oCAAoC;AAC7C,SAAS,8BAA8B;AACvC,SAAS,0BAA0B;AACnC,SAAS,sBAAsB;AAExB,MAAM,yBAAyB,MAAM;AAC1C,QAAM,kBAAkB,uBAAuB;AAC/C,QAAM,mBAAmB,6BAA6B;AACtD,QAAM,EAAE,MAAM,MAAM,IAAI,eAAe;AACvC,QAAM,EAAE,OAAO,IAAI,mBAAmB;AACtC,QAAM,WAAW,4BAA4B;AAC7C,QAAM,WAAW,YAAY;AAC7B,QAAM,cAAc,eAAe;AACnC,QAAM,EAAE,MAAM,IAAI,gBAAgB;AAElC,QAAM,EAAE,MAAM,IAAI,yBAAyB;AAE3C,QAAM,gBAAgB,CAAC,YAAY,eAAe;AAElD,MAAI,YAAY,WAAW,KAAK,CAAC,SAAS,SAAS;AACjD,WAAO;AAAA,EACT;AAEA,QAAM,EAAE,OAAO,KAAK,qBAAqB,UAAU,YAAY,QAAQ,IACrE;AAEF,QAAM,uBAAuB,CAAC,UAAyB;AACrD,UAAM,UAAU,OAAO;AACvB,QAAI,MAAM,QAAQ,WAAW,SAAS;AACpC,eAAS,SAAS,MAAM;AAAA,IAC1B;AAAA,EACF;AAEA,QAAM,wBAAwB,CAAC;AAAA,IAC7B;AAAA,IACA,YAAAA;AAAA,EACF,MAGM;AACJ;AAAA,MACE,oBAAoB;AAAA,QAClB,OAAO,UAAU,CAAC;AAAA,QAClB,KAAK,UAAU,CAAC;AAAA,QAChB,UAAU;AAAA,QACV,YAAAA;AAAA,QACA;AAAA,QACA,qBAAqB,uBAAuB,WAAW,KAAK;AAAA,MAC9D,CAAC;AAAA,IACH;AAAA,EACF;AAEA,QAAM,oBAGF,WACA,mBAAmB,qBAAqB,OAAO,CAAC,OAAO,GAAG,CAAC,IAC3D,CAAC,OAAO,GAAG;AAEf,SACE,iCACG;AAAA,gBAAY,WACX,iCACE;AAAA,0BAAC,gCAA6B;AAAA,MAC9B,oBAAC,iCAA8B;AAAA,OACjC,IACE;AAAA,IACJ;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW;AAAA,QACX;AAAA,QACA;AAAA,QACA,WAAW;AAAA,QACX,cAAc;AAAA,QACd,iBAAiB,CAAC,UAChB,gBAAgB,OAAO,OAAO,KAAK,GAAG,KAAK;AAAA,QAE7C,WAAW;AAAA,QACX,mBAAmB;AAAA,QACnB;AAAA;AAAA,IACF;AAAA,KACF;AAEJ;",
   "names": ["accessible"]
 }

package/esm/charts/histogram/components/overlays/HistogramSelectionArea/HistogramSelectionAreaTooltip.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/histogram/components/overlays/HistogramSelectionArea/HistogramSelectionAreaTooltip.tsx"],
-  "sourcesContent": ["import { useIntl } from 'react-intl';\n\nimport { ZoomToSelectionIcon } from '@dynatrace/strato-icons';\n\nimport { useGridPlotSize } from '../../../../core/components/chart-grid/hooks/useGridPlotSize.js';\nimport { getCustomContextMenuItems } from '../../../../core/components/interactions-overlay/utils/get-custom-context-menu-items.js';\nimport { OverlayTooltip } from '../../../../core/components/overlay-tooltip/OverlayTooltip.js';\nimport { SelectionTooltipWithAsyncActions } from '../../../../core/components/selection-area/SelectionTooltipWithAsyncActions.js';\nimport { getSelectionTooltipPosition } from '../../../../core/components/selection-area/tooltip/get-selection-tooltip-position.js';\nimport { usePointerAndScrollResponsiveChartBounds } from '../../../../core/hooks/usePointerAndScrollResponsiveChartBounds.js';\nimport { useSelectState } from '../../../hooks/store/selectors.js';\nimport { useHistogramChartOverlayRef } from '../../../hooks/useHistogramChartOverlayRef.js';\nimport { useHistogramFilteredData } from '../../../hooks/useHistogramFilteredData.js';\nimport { useHistogramInteractions } from '../../../hooks/useHistogramInteractions.js';\nimport { useHistogramSelectConfig } from '../../../hooks/useHistogramSelectConfig.js';\nimport { useHistogramXFormatter } from '../../../hooks/useHistogramXFormatter.js';\nimport { useHistogramXScale } from '../../../hooks/useHistogramXScale.js';\nimport { useZoomToSelection } from '../../../hooks/useZoomToSelection.js';\nimport { HISTOGRAM_MESSAGES } from '../../../messages/tooltip-text.js';\nimport {\n  type HistogramBin,\n  HistogramSeries,\n} from '../../../types/histogram.js';\nimport { isBinWithinRange } from '../utils/is-bin-within-range.js';\n\nexport const HistogramSelectionAreaTooltip = () => {\n  const selectState = useSelectState();\n  const zoomToSelection = useZoomToSelection();\n  /* eslint-disable-next-line @typescript-eslint/no-deprecated */\n  const { zoomX } = useHistogramInteractions();\n  const filteredData = useHistogramFilteredData();\n  const { xScale } = useHistogramXScale();\n  const formatter = useHistogramXFormatter();\n  const selectConfig = useHistogramSelectConfig();\n  const { width } = useGridPlotSize();\n  const intl = useIntl();\n  const chartRef = useHistogramChartOverlayRef();\n  const chartBounds = usePointerAndScrollResponsiveChartBounds(\n    chartRef,\n    true,\n  )();\n\n  if (!selectState || !chartBounds) {\n    return null;\n  }\n\n  const selectionStart = selectState.selectionPercentage\n    ? (width * selectState.selectionPercentage[0]) / 100\n    : selectState.start.relative.x;\n  const selectionEnd = selectState.selectionPercentage\n    ? (width * selectState.selectionPercentage[1]) / 100\n    : selectState.end.relative.x;\n\n  const range: [number, number] = [\n    xScale.invert(selectionStart),\n    xScale.invert(selectionEnd),\n  ];\n\n  const selectedSeries: HistogramSeries[] = [];\n  let totalBins = 0;\n  const [from, to] = range;\n  for (const series of filteredData.series) {\n    let isSeriesPresent = false;\n    const seriesBins: HistogramBin[] = [];\n\n    for (const bin of series.bins) {\n      if (isBinWithinRange(bin, from, to)) {\n        totalBins++;\n        seriesBins.push(bin);\n        isSeriesPresent = true;\n      }\n    }\n\n    if (isSeriesPresent) {\n      selectedSeries.push({ ...series, bins: seriesBins });\n    }\n  }\n\n  const tooltipPosition = getSelectionTooltipPosition(selectState, chartBounds);\n\n  return (\n    <SelectionTooltipWithAsyncActions\n      actions={() => {\n        const actions = selectConfig?.actions;\n        return (\n          actions &&\n          (async () => actions(selectedSeries, range))().then(\n            getCustomContextMenuItems,\n          )\n        );\n      }}\n      selectFinished={selectState.finished}\n      header={\n        <OverlayTooltip.Header\n          header1={[formatter(from), formatter(to)]}\n          duration1={formatter(Math.abs(to - from))}\n          subheader={`${totalBins} bins across ${selectedSeries.length} series`}\n        />\n      }\n      position={tooltipPosition}\n      zoomEnabled={!!zoomX?.enabled}\n      range={range}\n    >\n      {zoomX?.enabled ? (\n        <OverlayTooltip.Action\n          label={intl.formatMessage(HISTOGRAM_MESSAGES.zoomToSelection)}\n          icon={<ZoomToSelectionIcon />}\n          onSelect={zoomToSelection}\n          trailingIcon=\"\u23CE\"\n        />\n      ) : null}\n    </SelectionTooltipWithAsyncActions>\n  );\n};\n"],
+  "sourcesContent": ["import { useIntl } from 'react-intl';\n\nimport { ZoomToSelectionIcon } from '@dynatrace/strato-icons';\n\nimport { useGridPlotSize } from '../../../../core/components/chart-grid/hooks/useGridPlotSize.js';\nimport { getCustomContextMenuItems } from '../../../../core/components/interactions-overlay/utils/get-custom-context-menu-items.js';\nimport { OverlayTooltip } from '../../../../core/components/overlay-tooltip/OverlayTooltip.js';\nimport { SelectionTooltipWithAsyncActions } from '../../../../core/components/selection-area/SelectionTooltipWithAsyncActions.js';\nimport { getSelectionTooltipPosition } from '../../../../core/components/selection-area/tooltip/get-selection-tooltip-position.js';\nimport { usePointerAndScrollResponsiveChartBounds } from '../../../../core/hooks/usePointerAndScrollResponsiveChartBounds.js';\nimport { useSelectState } from '../../../hooks/store/selectors.js';\nimport { useHistogramChartOverlayRef } from '../../../hooks/useHistogramChartOverlayRef.js';\nimport { useHistogramFilteredData } from '../../../hooks/useHistogramFilteredData.js';\nimport { useHistogramInteractions } from '../../../hooks/useHistogramInteractions.js';\nimport { useHistogramSelectConfig } from '../../../hooks/useHistogramSelectConfig.js';\nimport { useHistogramXFormatter } from '../../../hooks/useHistogramXFormatter.js';\nimport { useHistogramXScale } from '../../../hooks/useHistogramXScale.js';\nimport { useZoomToSelection } from '../../../hooks/useZoomToSelection.js';\nimport { HISTOGRAM_MESSAGES } from '../../../messages/tooltip-text.js';\nimport {\n  type HistogramBin,\n  HistogramSeries,\n} from '../../../types/histogram.js';\nimport { isBinWithinRange } from '../utils/is-bin-within-range.js';\n\nexport const HistogramSelectionAreaTooltip = () => {\n  const selectState = useSelectState();\n  const zoomToSelection = useZoomToSelection();\n  /* oxlint-disable-next-line typescript/no-deprecated */\n  const { zoomX } = useHistogramInteractions();\n  const filteredData = useHistogramFilteredData();\n  const { xScale } = useHistogramXScale();\n  const formatter = useHistogramXFormatter();\n  const selectConfig = useHistogramSelectConfig();\n  const { width } = useGridPlotSize();\n  const intl = useIntl();\n  const chartRef = useHistogramChartOverlayRef();\n  const chartBounds = usePointerAndScrollResponsiveChartBounds(\n    chartRef,\n    true,\n  )();\n\n  if (!selectState || !chartBounds) {\n    return null;\n  }\n\n  const selectionStart = selectState.selectionPercentage\n    ? (width * selectState.selectionPercentage[0]) / 100\n    : selectState.start.relative.x;\n  const selectionEnd = selectState.selectionPercentage\n    ? (width * selectState.selectionPercentage[1]) / 100\n    : selectState.end.relative.x;\n\n  const range: [number, number] = [\n    xScale.invert(selectionStart),\n    xScale.invert(selectionEnd),\n  ];\n\n  const selectedSeries: HistogramSeries[] = [];\n  let totalBins = 0;\n  const [from, to] = range;\n  for (const series of filteredData.series) {\n    let isSeriesPresent = false;\n    const seriesBins: HistogramBin[] = [];\n\n    for (const bin of series.bins) {\n      if (isBinWithinRange(bin, from, to)) {\n        totalBins++;\n        seriesBins.push(bin);\n        isSeriesPresent = true;\n      }\n    }\n\n    if (isSeriesPresent) {\n      selectedSeries.push({ ...series, bins: seriesBins });\n    }\n  }\n\n  const tooltipPosition = getSelectionTooltipPosition(selectState, chartBounds);\n\n  return (\n    <SelectionTooltipWithAsyncActions\n      actions={() => {\n        const actions = selectConfig?.actions;\n        return (\n          actions &&\n          (async () => actions(selectedSeries, range))().then(\n            getCustomContextMenuItems,\n          )\n        );\n      }}\n      selectFinished={selectState.finished}\n      header={\n        <OverlayTooltip.Header\n          header1={[formatter(from), formatter(to)]}\n          duration1={formatter(Math.abs(to - from))}\n          subheader={`${totalBins} bins across ${selectedSeries.length} series`}\n        />\n      }\n      position={tooltipPosition}\n      zoomEnabled={!!zoomX?.enabled}\n      range={range}\n    >\n      {zoomX?.enabled ? (\n        <OverlayTooltip.Action\n          label={intl.formatMessage(HISTOGRAM_MESSAGES.zoomToSelection)}\n          icon={<ZoomToSelectionIcon />}\n          onSelect={zoomToSelection}\n          trailingIcon=\"\u23CE\"\n        />\n      ) : null}\n    </SelectionTooltipWithAsyncActions>\n  );\n};\n"],
   "mappings": "AA6FQ;AA7FR,SAAS,eAAe;AAExB,SAAS,2BAA2B;AAEpC,SAAS,uBAAuB;AAChC,SAAS,iCAAiC;AAC1C,SAAS,sBAAsB;AAC/B,SAAS,wCAAwC;AACjD,SAAS,mCAAmC;AAC5C,SAAS,gDAAgD;AACzD,SAAS,sBAAsB;AAC/B,SAAS,mCAAmC;AAC5C,SAAS,gCAAgC;AACzC,SAAS,gCAAgC;AACzC,SAAS,gCAAgC;AACzC,SAAS,8BAA8B;AACvC,SAAS,0BAA0B;AACnC,SAAS,0BAA0B;AACnC,SAAS,0BAA0B;AAKnC,SAAS,wBAAwB;AAE1B,MAAM,gCAAgC,MAAM;AACjD,QAAM,cAAc,eAAe;AACnC,QAAM,kBAAkB,mBAAmB;AAE3C,QAAM,EAAE,MAAM,IAAI,yBAAyB;AAC3C,QAAM,eAAe,yBAAyB;AAC9C,QAAM,EAAE,OAAO,IAAI,mBAAmB;AACtC,QAAM,YAAY,uBAAuB;AACzC,QAAM,eAAe,yBAAyB;AAC9C,QAAM,EAAE,MAAM,IAAI,gBAAgB;AAClC,QAAM,OAAO,QAAQ;AACrB,QAAM,WAAW,4BAA4B;AAC7C,QAAM,cAAc;AAAA,IAClB;AAAA,IACA;AAAA,EACF,EAAE;AAEF,MAAI,CAAC,eAAe,CAAC,aAAa;AAChC,WAAO;AAAA,EACT;AAEA,QAAM,iBAAiB,YAAY,sBAC9B,QAAQ,YAAY,oBAAoB,CAAC,IAAK,MAC/C,YAAY,MAAM,SAAS;AAC/B,QAAM,eAAe,YAAY,sBAC5B,QAAQ,YAAY,oBAAoB,CAAC,IAAK,MAC/C,YAAY,IAAI,SAAS;AAE7B,QAAM,QAA0B;AAAA,IAC9B,OAAO,OAAO,cAAc;AAAA,IAC5B,OAAO,OAAO,YAAY;AAAA,EAC5B;AAEA,QAAM,iBAAoC,CAAC;AAC3C,MAAI,YAAY;AAChB,QAAM,CAAC,MAAM,EAAE,IAAI;AACnB,aAAW,UAAU,aAAa,QAAQ;AACxC,QAAI,kBAAkB;AACtB,UAAM,aAA6B,CAAC;AAEpC,eAAW,OAAO,OAAO,MAAM;AAC7B,UAAI,iBAAiB,KAAK,MAAM,EAAE,GAAG;AACnC;AACA,mBAAW,KAAK,GAAG;AACnB,0BAAkB;AAAA,MACpB;AAAA,IACF;AAEA,QAAI,iBAAiB;AACnB,qBAAe,KAAK,EAAE,GAAG,QAAQ,MAAM,WAAW,CAAC;AAAA,IACrD;AAAA,EACF;AAEA,QAAM,kBAAkB,4BAA4B,aAAa,WAAW;AAE5E,SACE;AAAA,IAAC;AAAA;AAAA,MACC,SAAS,MAAM;AACb,cAAM,UAAU,cAAc;AAC9B,eACE,YACC,YAAY,QAAQ,gBAAgB,KAAK,GAAG,EAAE;AAAA,UAC7C;AAAA,QACF;AAAA,MAEJ;AAAA,MACA,gBAAgB,YAAY;AAAA,MAC5B,QACE;AAAA,QAAC,eAAe;AAAA,QAAf;AAAA,UACC,SAAS,CAAC,UAAU,IAAI,GAAG,UAAU,EAAE,CAAC;AAAA,UACxC,WAAW,UAAU,KAAK,IAAI,KAAK,IAAI,CAAC;AAAA,UACxC,WAAW,GAAG,SAAS,gBAAgB,eAAe,MAAM;AAAA;AAAA,MAC9D;AAAA,MAEF,UAAU;AAAA,MACV,aAAa,CAAC,CAAC,OAAO;AAAA,MACtB;AAAA,MAEC,iBAAO,UACN;AAAA,QAAC,eAAe;AAAA,QAAf;AAAA,UACC,OAAO,KAAK,cAAc,mBAAmB,eAAe;AAAA,UAC5D,MAAM,oBAAC,uBAAoB;AAAA,UAC3B,UAAU;AAAA,UACV,cAAa;AAAA;AAAA,MACf,IACE;AAAA;AAAA,EACN;AAEJ;",
   "names": []
 }

package/esm/charts/histogram/components/toolbar/HistogramToolbar.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/histogram/components/toolbar/HistogramToolbar.tsx"],
-  "sourcesContent": ["import type { MouseEvent as ReactMouseEvent } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { DownloadDataButton } from './DownloadDataButton.js';\nimport { ExploreButton } from './ExploreButton.js';\nimport { PanButton } from './PanButton.js';\nimport { ResetButton } from './ResetButton.js';\nimport { ZoomInOutButtons } from './ZoomInOutButtons.js';\nimport { ZoomModeButton } from './ZoomModeButton.js';\nimport { useBehavioralTrackingProps as _useBehavioralTrackingProps } from '../../../../core/hooks/useBehavioralTrackingProps.js';\nimport { ChartToolbarRenderer } from '../../../core/components/toolbar/ChartToolbarRenderer.js';\nimport type { ChartToolbarRendererProps } from '../../../core/components/toolbar/types.js';\nimport { getMenuTriggerDisplayMode } from '../../../core/components/toolbar/utils/get-menu-trigger-display-mode.js';\nimport { getMenuTriggerIcon } from '../../../core/components/toolbar/utils/get-menu-trigger-icon.js';\nimport { ChartOverlaysElevation } from '../../../core/constants.js';\nimport { getA11yToolbarConfig } from '../../../core/utils/zoom.js';\nimport { defaultToolbarPlacement } from '../../constants/defaults.js';\nimport { useInteractionModeState } from '../../hooks/store/selectors.js';\nimport { useHistogramFilteredData } from '../../hooks/useHistogramFilteredData.js';\nimport { useHistogramInteractions } from '../../hooks/useHistogramInteractions.js';\nimport { useHistogramSelectionAreaRef } from '../../hooks/useHistogramSelectionAreaRef.js';\nimport { useHistogramToolbar } from '../../hooks/useHistogramToolbar.js';\nimport { HISTOGRAM_MESSAGES } from '../../messages/tooltip-text.js';\nimport { buildAndDownloadCsv } from '../../utils/build-and-download-csv.js';\n\ntype HistogramToolbarProps = {\n  onMouseEnter?: (event?: ReactMouseEvent<HTMLDivElement, MouseEvent>) => void;\n  onMouseLeave?: (event?: ReactMouseEvent<HTMLDivElement, MouseEvent>) => void;\n  handlerRef?: ChartToolbarRendererProps['handlerRef'];\n};\n\nexport const HistogramToolbar = ({\n  onMouseEnter,\n  onMouseLeave,\n  handlerRef,\n}: HistogramToolbarProps) => {\n  const toolbarContext = useHistogramToolbar();\n  const { placement, collapsed, downloadData, intents } = toolbarContext;\n  const interactionMode = useInteractionModeState();\n  /* eslint-disable-next-line @typescript-eslint/no-deprecated */\n  const { zoom, zoomX, pan } = useHistogramInteractions();\n  const intl = useIntl();\n  const selectionAreaRef = useHistogramSelectionAreaRef();\n\n  const isZoomEnabled = zoom?.enabled;\n  const isPanEnabled = pan?.enabled;\n  const isDownloadEnabled = downloadData?.enabled ?? false;\n\n  const anyInteractionEnabled =\n    isZoomEnabled ||\n    zoomX?.enabled ||\n    isPanEnabled ||\n    isDownloadEnabled ||\n    intents;\n\n  const menuIcon = getMenuTriggerIcon(interactionMode, isZoomEnabled);\n\n  const menuLabel =\n    !isPanEnabled && !isZoomEnabled\n      ? intl.formatMessage(HISTOGRAM_MESSAGES.zoomModeExplore)\n      : undefined;\n\n  const menuDisplayMode = getMenuTriggerDisplayMode({\n    isPanEnabled,\n    isZoomEnabled,\n    isDownloadEnabled,\n  });\n\n  const onClose = () =>\n    selectionAreaRef ? selectionAreaRef.current?.focus() : undefined;\n\n  const { series } = useHistogramFilteredData();\n\n  /** Handles the download button when clicked. */\n  const handleDownloadDataToolbar = () => buildAndDownloadCsv(series);\n\n  const showDefaultToolbarDownloadButton = isDownloadEnabled && !intents;\n  const showMenuToolbarButton = isDownloadEnabled && !!intents?.length;\n\n  const behaviorTrackingProps = _useBehavioralTrackingProps(toolbarContext)[0];\n\n  return anyInteractionEnabled ? (\n    <ChartToolbarRenderer\n      visibleWhenMouseInBounds\n      handlerRef={handlerRef}\n      placement={placement || defaultToolbarPlacement}\n      collapsed={collapsed}\n      draggable={true}\n      initialA11yState={getA11yToolbarConfig({\n        zoomX,\n        pan,\n        zoom,\n        download: downloadData,\n        intent: !!intents,\n      })}\n      zIndex={ChartOverlaysElevation.toolbar}\n      onMouseEnter={onMouseEnter}\n      onMouseLeave={onMouseLeave}\n      menuIcon={menuIcon}\n      menuTriggerLabel={menuLabel}\n      menuDisplayMode={menuDisplayMode}\n      onClose={onClose}\n      isDownloadEnabled={showMenuToolbarButton}\n      intents={intents}\n      handleDownloadDataToolbar={handleDownloadDataToolbar}\n      {...behaviorTrackingProps}\n    >\n      <>\n        <ExploreButton />\n        {isZoomEnabled && <ZoomModeButton />}\n        {isPanEnabled && <PanButton />}\n      </>\n      {isZoomEnabled && <ZoomInOutButtons />}\n      <ResetButton />\n      {showDefaultToolbarDownloadButton && <DownloadDataButton />}\n    </ChartToolbarRenderer>\n  ) : null;\n};\n"],
+  "sourcesContent": ["import type { MouseEvent as ReactMouseEvent } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { DownloadDataButton } from './DownloadDataButton.js';\nimport { ExploreButton } from './ExploreButton.js';\nimport { PanButton } from './PanButton.js';\nimport { ResetButton } from './ResetButton.js';\nimport { ZoomInOutButtons } from './ZoomInOutButtons.js';\nimport { ZoomModeButton } from './ZoomModeButton.js';\nimport { useBehavioralTrackingProps as _useBehavioralTrackingProps } from '../../../../core/hooks/useBehavioralTrackingProps.js';\nimport { ChartToolbarRenderer } from '../../../core/components/toolbar/ChartToolbarRenderer.js';\nimport type { ChartToolbarRendererProps } from '../../../core/components/toolbar/types.js';\nimport { getMenuTriggerDisplayMode } from '../../../core/components/toolbar/utils/get-menu-trigger-display-mode.js';\nimport { getMenuTriggerIcon } from '../../../core/components/toolbar/utils/get-menu-trigger-icon.js';\nimport { ChartOverlaysElevation } from '../../../core/constants.js';\nimport { getA11yToolbarConfig } from '../../../core/utils/zoom.js';\nimport { defaultToolbarPlacement } from '../../constants/defaults.js';\nimport { useInteractionModeState } from '../../hooks/store/selectors.js';\nimport { useHistogramFilteredData } from '../../hooks/useHistogramFilteredData.js';\nimport { useHistogramInteractions } from '../../hooks/useHistogramInteractions.js';\nimport { useHistogramSelectionAreaRef } from '../../hooks/useHistogramSelectionAreaRef.js';\nimport { useHistogramToolbar } from '../../hooks/useHistogramToolbar.js';\nimport { HISTOGRAM_MESSAGES } from '../../messages/tooltip-text.js';\nimport { buildAndDownloadCsv } from '../../utils/build-and-download-csv.js';\n\ntype HistogramToolbarProps = {\n  onMouseEnter?: (event?: ReactMouseEvent<HTMLDivElement, MouseEvent>) => void;\n  onMouseLeave?: (event?: ReactMouseEvent<HTMLDivElement, MouseEvent>) => void;\n  handlerRef?: ChartToolbarRendererProps['handlerRef'];\n};\n\nexport const HistogramToolbar = ({\n  onMouseEnter,\n  onMouseLeave,\n  handlerRef,\n}: HistogramToolbarProps) => {\n  const toolbarContext = useHistogramToolbar();\n  const { placement, collapsed, downloadData, intents } = toolbarContext;\n  const interactionMode = useInteractionModeState();\n  /* oxlint-disable-next-line typescript/no-deprecated */\n  const { zoom, zoomX, pan } = useHistogramInteractions();\n  const intl = useIntl();\n  const selectionAreaRef = useHistogramSelectionAreaRef();\n\n  const isZoomEnabled = zoom?.enabled;\n  const isPanEnabled = pan?.enabled;\n  const isDownloadEnabled = downloadData?.enabled ?? false;\n\n  const anyInteractionEnabled =\n    isZoomEnabled ||\n    zoomX?.enabled ||\n    isPanEnabled ||\n    isDownloadEnabled ||\n    intents;\n\n  const menuIcon = getMenuTriggerIcon(interactionMode, isZoomEnabled);\n\n  const menuLabel =\n    !isPanEnabled && !isZoomEnabled\n      ? intl.formatMessage(HISTOGRAM_MESSAGES.zoomModeExplore)\n      : undefined;\n\n  const menuDisplayMode = getMenuTriggerDisplayMode({\n    isPanEnabled,\n    isZoomEnabled,\n    isDownloadEnabled,\n  });\n\n  const onClose = () =>\n    selectionAreaRef ? selectionAreaRef.current?.focus() : undefined;\n\n  const { series } = useHistogramFilteredData();\n\n  /** Handles the download button when clicked. */\n  const handleDownloadDataToolbar = () => buildAndDownloadCsv(series);\n\n  const showDefaultToolbarDownloadButton = isDownloadEnabled && !intents;\n  const showMenuToolbarButton = isDownloadEnabled && !!intents?.length;\n\n  const behaviorTrackingProps = _useBehavioralTrackingProps(toolbarContext)[0];\n\n  return anyInteractionEnabled ? (\n    <ChartToolbarRenderer\n      visibleWhenMouseInBounds\n      handlerRef={handlerRef}\n      placement={placement || defaultToolbarPlacement}\n      collapsed={collapsed}\n      draggable={true}\n      initialA11yState={getA11yToolbarConfig({\n        zoomX,\n        pan,\n        zoom,\n        download: downloadData,\n        intent: !!intents,\n      })}\n      zIndex={ChartOverlaysElevation.toolbar}\n      onMouseEnter={onMouseEnter}\n      onMouseLeave={onMouseLeave}\n      menuIcon={menuIcon}\n      menuTriggerLabel={menuLabel}\n      menuDisplayMode={menuDisplayMode}\n      onClose={onClose}\n      isDownloadEnabled={showMenuToolbarButton}\n      intents={intents}\n      handleDownloadDataToolbar={handleDownloadDataToolbar}\n      {...behaviorTrackingProps}\n    >\n      <>\n        <ExploreButton />\n        {isZoomEnabled && <ZoomModeButton />}\n        {isPanEnabled && <PanButton />}\n      </>\n      {isZoomEnabled && <ZoomInOutButtons />}\n      <ResetButton />\n      {showDefaultToolbarDownloadButton && <DownloadDataButton />}\n    </ChartToolbarRenderer>\n  ) : null;\n};\n"],
   "mappings": "AA2GM,mBACE,KADF;AA1GN,SAAS,eAAe;AAExB,SAAS,0BAA0B;AACnC,SAAS,qBAAqB;AAC9B,SAAS,iBAAiB;AAC1B,SAAS,mBAAmB;AAC5B,SAAS,wBAAwB;AACjC,SAAS,sBAAsB;AAC/B,SAAS,8BAA8B,mCAAmC;AAC1E,SAAS,4BAA4B;AAErC,SAAS,iCAAiC;AAC1C,SAAS,0BAA0B;AACnC,SAAS,8BAA8B;AACvC,SAAS,4BAA4B;AACrC,SAAS,+BAA+B;AACxC,SAAS,+BAA+B;AACxC,SAAS,gCAAgC;AACzC,SAAS,gCAAgC;AACzC,SAAS,oCAAoC;AAC7C,SAAS,2BAA2B;AACpC,SAAS,0BAA0B;AACnC,SAAS,2BAA2B;AAQ7B,MAAM,mBAAmB,CAAC;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AACF,MAA6B;AAC3B,QAAM,iBAAiB,oBAAoB;AAC3C,QAAM,EAAE,WAAW,WAAW,cAAc,QAAQ,IAAI;AACxD,QAAM,kBAAkB,wBAAwB;AAEhD,QAAM,EAAE,MAAM,OAAO,IAAI,IAAI,yBAAyB;AACtD,QAAM,OAAO,QAAQ;AACrB,QAAM,mBAAmB,6BAA6B;AAEtD,QAAM,gBAAgB,MAAM;AAC5B,QAAM,eAAe,KAAK;AAC1B,QAAM,oBAAoB,cAAc,WAAW;AAEnD,QAAM,wBACJ,iBACA,OAAO,WACP,gBACA,qBACA;AAEF,QAAM,WAAW,mBAAmB,iBAAiB,aAAa;AAElE,QAAM,YACJ,CAAC,gBAAgB,CAAC,gBACd,KAAK,cAAc,mBAAmB,eAAe,IACrD;AAEN,QAAM,kBAAkB,0BAA0B;AAAA,IAChD;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,UAAU,MACd,mBAAmB,iBAAiB,SAAS,MAAM,IAAI;AAEzD,QAAM,EAAE,OAAO,IAAI,yBAAyB;AAG5C,QAAM,4BAA4B,MAAM,oBAAoB,MAAM;AAElE,QAAM,mCAAmC,qBAAqB,CAAC;AAC/D,QAAM,wBAAwB,qBAAqB,CAAC,CAAC,SAAS;AAE9D,QAAM,wBAAwB,4BAA4B,cAAc,EAAE,CAAC;AAE3E,SAAO,wBACL;AAAA,IAAC;AAAA;AAAA,MACC,0BAAwB;AAAA,MACxB;AAAA,MACA,WAAW,aAAa;AAAA,MACxB;AAAA,MACA,WAAW;AAAA,MACX,kBAAkB,qBAAqB;AAAA,QACrC;AAAA,QACA;AAAA,QACA;AAAA,QACA,UAAU;AAAA,QACV,QAAQ,CAAC,CAAC;AAAA,MACZ,CAAC;AAAA,MACD,QAAQ,uBAAuB;AAAA,MAC/B;AAAA,MACA;AAAA,MACA;AAAA,MACA,kBAAkB;AAAA,MAClB;AAAA,MACA;AAAA,MACA,mBAAmB;AAAA,MACnB;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MAEJ;AAAA,yCACE;AAAA,8BAAC,iBAAc;AAAA,UACd,iBAAiB,oBAAC,kBAAe;AAAA,UACjC,gBAAgB,oBAAC,aAAU;AAAA,WAC9B;AAAA,QACC,iBAAiB,oBAAC,oBAAiB;AAAA,QACpC,oBAAC,eAAY;AAAA,QACZ,oCAAoC,oBAAC,sBAAmB;AAAA;AAAA;AAAA,EAC3D,IACE;AACN;",
   "names": []
 }

package/esm/charts/histogram/components/toolbar/ResetButton.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/histogram/components/toolbar/ResetButton.tsx"],
-  "sourcesContent": ["import { useMemo, type KeyboardEvent as ReactKeyboardEvent } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { ResetIcon } from '@dynatrace/strato-icons';\n\nimport { reduceExploreCancelSelect } from '../../../core/components/interactions-state-helpers/reducers/explore-reducers.js';\nimport { ChartToolbarRenderer } from '../../../core/components/toolbar/ChartToolbarRenderer.js';\nimport { useA11yToolbarTabIndex } from '../../../core/hooks/useA11yToolbarTabIndex.js';\nimport { isSameDomain } from '../../../core/utils/zoom.js';\nimport { useCurrentDomainState } from '../../hooks/store/selectors.js';\nimport { useSetState } from '../../hooks/store/state-setters.js';\nimport { useHistogramInteractions } from '../../hooks/useHistogramInteractions.js';\nimport { useHistogramXScale } from '../../hooks/useHistogramXScale.js';\nimport { useResetInteractions } from '../../hooks/useResetInteractions.js';\nimport { HISTOGRAM_MESSAGES } from '../../messages/tooltip-text.js';\n\nexport const ResetButton = () => {\n  const tabIndex = useA11yToolbarTabIndex('reset');\n  const intl = useIntl();\n  const { initialXScale } = useHistogramXScale();\n  const setState = useSetState();\n\n  const currentDomain = useCurrentDomainState();\n  /* eslint-disable-next-line @typescript-eslint/no-deprecated */\n  const { zoom, zoomX } = useHistogramInteractions();\n  const hasZoomInteractions = zoom?.enabled || zoomX?.enabled;\n\n  const resetInteractions = useResetInteractions();\n\n  const handleKeyDown = (event: ReactKeyboardEvent) => {\n    if (event.code === 'Enter') {\n      resetInteractions();\n    }\n  };\n\n  const handleClick = () => {\n    setState(reduceExploreCancelSelect);\n    resetInteractions();\n  };\n\n  const isResettable = useMemo(\n    () => !isSameDomain(currentDomain, initialXScale.domain()),\n    [currentDomain, initialXScale],\n  );\n\n  const onlyXZoomIsEnabled = zoomX?.enabled && !zoom?.enabled;\n\n  return hasZoomInteractions ? (\n    <ChartToolbarRenderer.Control\n      prefixIcon={<ResetIcon />}\n      tooltipText={intl.formatMessage(HISTOGRAM_MESSAGES.resetMode)}\n      tooltipKeyShortcut=\"R\"\n      onKeyDown={handleKeyDown}\n      onClick={handleClick}\n      tabIndex={tabIndex}\n      disabled={!isResettable}\n      placement=\"toolbar\"\n      divider={onlyXZoomIsEnabled ? 'left' : undefined}\n      showWhenCollapsed={isResettable}\n    />\n  ) : null;\n};\n\nResetButton['displayName'] = 'ResetButton';\n"],
+  "sourcesContent": ["import { useMemo, type KeyboardEvent as ReactKeyboardEvent } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { ResetIcon } from '@dynatrace/strato-icons';\n\nimport { reduceExploreCancelSelect } from '../../../core/components/interactions-state-helpers/reducers/explore-reducers.js';\nimport { ChartToolbarRenderer } from '../../../core/components/toolbar/ChartToolbarRenderer.js';\nimport { useA11yToolbarTabIndex } from '../../../core/hooks/useA11yToolbarTabIndex.js';\nimport { isSameDomain } from '../../../core/utils/zoom.js';\nimport { useCurrentDomainState } from '../../hooks/store/selectors.js';\nimport { useSetState } from '../../hooks/store/state-setters.js';\nimport { useHistogramInteractions } from '../../hooks/useHistogramInteractions.js';\nimport { useHistogramXScale } from '../../hooks/useHistogramXScale.js';\nimport { useResetInteractions } from '../../hooks/useResetInteractions.js';\nimport { HISTOGRAM_MESSAGES } from '../../messages/tooltip-text.js';\n\nexport const ResetButton = () => {\n  const tabIndex = useA11yToolbarTabIndex('reset');\n  const intl = useIntl();\n  const { initialXScale } = useHistogramXScale();\n  const setState = useSetState();\n\n  const currentDomain = useCurrentDomainState();\n  /* oxlint-disable-next-line typescript/no-deprecated */\n  const { zoom, zoomX } = useHistogramInteractions();\n  const hasZoomInteractions = zoom?.enabled || zoomX?.enabled;\n\n  const resetInteractions = useResetInteractions();\n\n  const handleKeyDown = (event: ReactKeyboardEvent) => {\n    if (event.code === 'Enter') {\n      resetInteractions();\n    }\n  };\n\n  const handleClick = () => {\n    setState(reduceExploreCancelSelect);\n    resetInteractions();\n  };\n\n  const isResettable = useMemo(\n    () => !isSameDomain(currentDomain, initialXScale.domain()),\n    [currentDomain, initialXScale],\n  );\n\n  const onlyXZoomIsEnabled = zoomX?.enabled && !zoom?.enabled;\n\n  return hasZoomInteractions ? (\n    <ChartToolbarRenderer.Control\n      prefixIcon={<ResetIcon />}\n      tooltipText={intl.formatMessage(HISTOGRAM_MESSAGES.resetMode)}\n      tooltipKeyShortcut=\"R\"\n      onKeyDown={handleKeyDown}\n      onClick={handleClick}\n      tabIndex={tabIndex}\n      disabled={!isResettable}\n      placement=\"toolbar\"\n      divider={onlyXZoomIsEnabled ? 'left' : undefined}\n      showWhenCollapsed={isResettable}\n    />\n  ) : null;\n};\n\nResetButton['displayName'] = 'ResetButton';\n"],
   "mappings": "AAiDkB;AAjDlB,SAAS,eAAyD;AAClE,SAAS,eAAe;AAExB,SAAS,iBAAiB;AAE1B,SAAS,iCAAiC;AAC1C,SAAS,4BAA4B;AACrC,SAAS,8BAA8B;AACvC,SAAS,oBAAoB;AAC7B,SAAS,6BAA6B;AACtC,SAAS,mBAAmB;AAC5B,SAAS,gCAAgC;AACzC,SAAS,0BAA0B;AACnC,SAAS,4BAA4B;AACrC,SAAS,0BAA0B;AAE5B,MAAM,cAAc,MAAM;AAC/B,QAAM,WAAW,uBAAuB,OAAO;AAC/C,QAAM,OAAO,QAAQ;AACrB,QAAM,EAAE,cAAc,IAAI,mBAAmB;AAC7C,QAAM,WAAW,YAAY;AAE7B,QAAM,gBAAgB,sBAAsB;AAE5C,QAAM,EAAE,MAAM,MAAM,IAAI,yBAAyB;AACjD,QAAM,sBAAsB,MAAM,WAAW,OAAO;AAEpD,QAAM,oBAAoB,qBAAqB;AAE/C,QAAM,gBAAgB,CAAC,UAA8B;AACnD,QAAI,MAAM,SAAS,SAAS;AAC1B,wBAAkB;AAAA,IACpB;AAAA,EACF;AAEA,QAAM,cAAc,MAAM;AACxB,aAAS,yBAAyB;AAClC,sBAAkB;AAAA,EACpB;AAEA,QAAM,eAAe;AAAA,IACnB,MAAM,CAAC,aAAa,eAAe,cAAc,OAAO,CAAC;AAAA,IACzD,CAAC,eAAe,aAAa;AAAA,EAC/B;AAEA,QAAM,qBAAqB,OAAO,WAAW,CAAC,MAAM;AAEpD,SAAO,sBACL;AAAA,IAAC,qBAAqB;AAAA,IAArB;AAAA,MACC,YAAY,oBAAC,aAAU;AAAA,MACvB,aAAa,KAAK,cAAc,mBAAmB,SAAS;AAAA,MAC5D,oBAAmB;AAAA,MACnB,WAAW;AAAA,MACX,SAAS;AAAA,MACT;AAAA,MACA,UAAU,CAAC;AAAA,MACX,WAAU;AAAA,MACV,SAAS,qBAAqB,SAAS;AAAA,MACvC,mBAAmB;AAAA;AAAA,EACrB,IACE;AACN;AAEA,YAAY,aAAa,IAAI;",
   "names": []
 }

package/esm/charts/histogram/hooks/useSetClosestBins.js

@@ -28,7 +28,7 @@ const useSetClosestBins = () => {
       );
       const { closestBin, closestBinsGrouped, closestBinsByClosestOne } = getClosestBins(position.relative.y, closestBinsX);
       const closestBinsByVariant = variant === "grouped" ? (
-        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        // oxlint-disable-next-line typescript/no-non-null-assertion
         closestBinsGrouped.find(
           (innerArray) => innerArray.some((item) => item.id === closestBin?.id)
         )

package/esm/charts/histogram/hooks/useSetClosestBins.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/charts/histogram/hooks/useSetClosestBins.ts"],
-  "sourcesContent": ["import { isUndefined } from 'lodash-es';\n\nimport { reduceClosestBins } from './store/reducers.js';\nimport { useSetState } from './store/state-setters.js';\nimport { useHistogramFilteredData } from './useHistogramFilteredData.js';\nimport { useHistogramTooltip } from './useHistogramTooltip.js';\nimport { useHistogramXScale } from './useHistogramXScale.js';\nimport { useHistogramYScales } from './useHistogramYScales.js';\nimport type { RelativeAbsolutePosition } from '../../core/types/pointer-events.js';\nimport {\n  findClosestBinX,\n  getClosestBins,\n} from '../components/overlays/utils/find-closest-bins.js';\n\n/**\n * Returns a function to calculate the closest bins at a given position to reflect it on the state,\n * which also returns the highlighted series id.\n */\nexport const useSetClosestBins = () => {\n  const setState = useSetState();\n  const { xScale } = useHistogramXScale();\n  const yScales = useHistogramYScales();\n  const { series, binsMap, seriesMap } = useHistogramFilteredData();\n  const { variant } = useHistogramTooltip();\n\n  return (position?: RelativeAbsolutePosition) => {\n    if (!isUndefined(position)) {\n      const mouseX = xScale.invert(position.relative.x);\n\n      const closestBinsX = findClosestBinX(\n        mouseX,\n        series,\n        yScales,\n        xScale,\n        seriesMap,\n        binsMap,\n      );\n\n      const { closestBin, closestBinsGrouped, closestBinsByClosestOne } =\n        getClosestBins(position.relative.y, closestBinsX);\n\n      const closestBinsByVariant =\n        variant === 'grouped'\n          ? // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n            closestBinsGrouped.find((innerArray) =>\n              innerArray.some((item) => item.id === closestBin?.id),\n            )!\n          : closestBinsByClosestOne;\n\n      setState((prev) =>\n        reduceClosestBins(prev, {\n          closestBin,\n          closestBinsGrouped,\n          closestBinsByVariant,\n        }),\n      );\n\n      return closestBin?.id;\n    }\n\n    setState((prev) => reduceClosestBins(prev, undefined));\n\n    return undefined;\n  };\n};\n"],
+  "sourcesContent": ["import { isUndefined } from 'lodash-es';\n\nimport { reduceClosestBins } from './store/reducers.js';\nimport { useSetState } from './store/state-setters.js';\nimport { useHistogramFilteredData } from './useHistogramFilteredData.js';\nimport { useHistogramTooltip } from './useHistogramTooltip.js';\nimport { useHistogramXScale } from './useHistogramXScale.js';\nimport { useHistogramYScales } from './useHistogramYScales.js';\nimport type { RelativeAbsolutePosition } from '../../core/types/pointer-events.js';\nimport {\n  findClosestBinX,\n  getClosestBins,\n} from '../components/overlays/utils/find-closest-bins.js';\n\n/**\n * Returns a function to calculate the closest bins at a given position to reflect it on the state,\n * which also returns the highlighted series id.\n */\nexport const useSetClosestBins = () => {\n  const setState = useSetState();\n  const { xScale } = useHistogramXScale();\n  const yScales = useHistogramYScales();\n  const { series, binsMap, seriesMap } = useHistogramFilteredData();\n  const { variant } = useHistogramTooltip();\n\n  return (position?: RelativeAbsolutePosition) => {\n    if (!isUndefined(position)) {\n      const mouseX = xScale.invert(position.relative.x);\n\n      const closestBinsX = findClosestBinX(\n        mouseX,\n        series,\n        yScales,\n        xScale,\n        seriesMap,\n        binsMap,\n      );\n\n      const { closestBin, closestBinsGrouped, closestBinsByClosestOne } =\n        getClosestBins(position.relative.y, closestBinsX);\n\n      const closestBinsByVariant =\n        variant === 'grouped'\n          ? // oxlint-disable-next-line typescript/no-non-null-assertion\n            closestBinsGrouped.find((innerArray) =>\n              innerArray.some((item) => item.id === closestBin?.id),\n            )!\n          : closestBinsByClosestOne;\n\n      setState((prev) =>\n        reduceClosestBins(prev, {\n          closestBin,\n          closestBinsGrouped,\n          closestBinsByVariant,\n        }),\n      );\n\n      return closestBin?.id;\n    }\n\n    setState((prev) => reduceClosestBins(prev, undefined));\n\n    return undefined;\n  };\n};\n"],
   "mappings": "AAAA,SAAS,mBAAmB;AAE5B,SAAS,yBAAyB;AAClC,SAAS,mBAAmB;AAC5B,SAAS,gCAAgC;AACzC,SAAS,2BAA2B;AACpC,SAAS,0BAA0B;AACnC,SAAS,2BAA2B;AAEpC;AAAA,EACE;AAAA,EACA;AAAA,OACK;AAMA,MAAM,oBAAoB,MAAM;AACrC,QAAM,WAAW,YAAY;AAC7B,QAAM,EAAE,OAAO,IAAI,mBAAmB;AACtC,QAAM,UAAU,oBAAoB;AACpC,QAAM,EAAE,QAAQ,SAAS,UAAU,IAAI,yBAAyB;AAChE,QAAM,EAAE,QAAQ,IAAI,oBAAoB;AAExC,SAAO,CAAC,aAAwC;AAC9C,QAAI,CAAC,YAAY,QAAQ,GAAG;AAC1B,YAAM,SAAS,OAAO,OAAO,SAAS,SAAS,CAAC;AAEhD,YAAM,eAAe;AAAA,QACnB;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAEA,YAAM,EAAE,YAAY,oBAAoB,wBAAwB,IAC9D,eAAe,SAAS,SAAS,GAAG,YAAY;AAElD,YAAM,uBACJ,YAAY;AAAA;AAAA,QAER,mBAAmB;AAAA,UAAK,CAAC,eACvB,WAAW,KAAK,CAAC,SAAS,KAAK,OAAO,YAAY,EAAE;AAAA,QACtD;AAAA,UACA;AAEN;AAAA,QAAS,CAAC,SACR,kBAAkB,MAAM;AAAA,UACtB;AAAA,UACA;AAAA,UACA;AAAA,QACF,CAAC;AAAA,MACH;AAEA,aAAO,YAAY;AAAA,IACrB;AAEA,aAAS,CAAC,SAAS,kBAAkB,MAAM,MAAS,CAAC;AAErD,WAAO;AAAA,EACT;AACF;",
   "names": []
 }

package/esm/charts/histogram/providers/HistogramDataProvider.js

@@ -11,7 +11,7 @@ function useBuildInitialMetadata(data) {
   const ruleColor = useColorRule(data, "histogram");
   for (let i = 0; i < data.length; i++) {
     const series = data[i];
-    const id = crypto.randomUUID();
+    const id = `series-${i}`;
     const color = ruleColor.for(series) || (series.color ? { Default: series.color } : getColorPalette(series.name, i, colorPalette));
     allUnits.add(series.unit);
     const metadata = {

package/esm/charts/histogram/providers/HistogramDataProvider.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/charts/histogram/providers/HistogramDataProvider.tsx"],
-  "sourcesContent": ["import { type ReactNode } from 'react';\n\nimport { useColorRule } from '../../core/color-rule/useColorRule.js';\nimport { getColorPalette } from '../../core/utils/get-color-palette.js';\nimport { HistogramDataContext } from '../contexts/HistogramData.context.js';\nimport { useHistogramColorPalette } from '../hooks/useHistogramColorPalette.js';\nimport {\n  HistogramSeries,\n  SeriesMetadata,\n  WeakMapSeries,\n} from '../types/histogram.js';\n\ninterface HistogramChartDataProviderProps {\n  children: ReactNode;\n  data: HistogramSeries[];\n}\n\nconst LEFT_SCALE_INDEX = 0;\n\nexport function useBuildInitialMetadata(data: HistogramSeries[]) {\n  const allUnits = new Set<HistogramSeries['unit']>();\n  const colorPalette = useHistogramColorPalette();\n  const seriesMap: WeakMapSeries = new WeakMap();\n\n  const ruleColor = useColorRule(data, 'histogram');\n\n  for (let i = 0; i < data.length; i++) {\n    const series = data[i];\n    const id = crypto.randomUUID();\n\n    const color =\n      ruleColor.for(series) ||\n      (series.color\n        ? { Default: series.color }\n        : getColorPalette(series.name, i, colorPalette));\n\n    allUnits.add(series.unit);\n\n    const metadata: SeriesMetadata = {\n      id,\n      color,\n      scaleIndex: LEFT_SCALE_INDEX,\n    };\n\n    seriesMap.set(series, metadata);\n  }\n\n  return {\n    yUnits: [...allUnits],\n    seriesMap,\n  };\n}\n\nexport function safeGet<Y, T extends object>(map: WeakMap<T, Y>, key: T): Y {\n  const metadata = map.get(key);\n\n  if (!metadata) {\n    throw new Error(`Metadata not found for: ${JSON.stringify(key)}`);\n  }\n\n  return metadata;\n}\n\nexport const HistogramDataProvider = ({\n  children,\n  data,\n}: HistogramChartDataProviderProps) => {\n  const { yUnits, seriesMap } = useBuildInitialMetadata(data);\n  return (\n    <HistogramDataContext.Provider\n      value={{\n        series: data,\n        seriesMap,\n        yUnits,\n      }}\n    >\n      {children}\n    </HistogramDataContext.Provider>\n  );\n};\n\nHistogramDataProvider['displayName'] = 'HistogramDataProvider';\n"],
-  "mappings": "AAqEI;AAnEJ,SAAS,oBAAoB;AAC7B,SAAS,uBAAuB;AAChC,SAAS,4BAA4B;AACrC,SAAS,gCAAgC;AAYzC,MAAM,mBAAmB;AAElB,SAAS,wBAAwB,MAAyB;AAC/D,QAAM,WAAW,oBAAI,IAA6B;AAClD,QAAM,eAAe,yBAAyB;AAC9C,QAAM,YAA2B,oBAAI,QAAQ;AAE7C,QAAM,YAAY,aAAa,MAAM,WAAW;AAEhD,WAAS,IAAI,GAAG,IAAI,KAAK,QAAQ,KAAK;AACpC,UAAM,SAAS,KAAK,CAAC;AACrB,UAAM,KAAK,OAAO,WAAW;AAE7B,UAAM,QACJ,UAAU,IAAI,MAAM,MACnB,OAAO,QACJ,EAAE,SAAS,OAAO,MAAM,IACxB,gBAAgB,OAAO,MAAM,GAAG,YAAY;AAElD,aAAS,IAAI,OAAO,IAAI;AAExB,UAAM,WAA2B;AAAA,MAC/B;AAAA,MACA;AAAA,MACA,YAAY;AAAA,IACd;AAEA,cAAU,IAAI,QAAQ,QAAQ;AAAA,EAChC;AAEA,SAAO;AAAA,IACL,QAAQ,CAAC,GAAG,QAAQ;AAAA,IACpB;AAAA,EACF;AACF;AAEO,SAAS,QAA6B,KAAoB,KAAW;AAC1E,QAAM,WAAW,IAAI,IAAI,GAAG;AAE5B,MAAI,CAAC,UAAU;AACb,UAAM,IAAI,MAAM,2BAA2B,KAAK,UAAU,GAAG,CAAC,EAAE;AAAA,EAClE;AAEA,SAAO;AACT;AAEO,MAAM,wBAAwB,CAAC;AAAA,EACpC;AAAA,EACA;AACF,MAAuC;AACrC,QAAM,EAAE,QAAQ,UAAU,IAAI,wBAAwB,IAAI;AAC1D,SACE;AAAA,IAAC,qBAAqB;AAAA,IAArB;AAAA,MACC,OAAO;AAAA,QACL,QAAQ;AAAA,QACR;AAAA,QACA;AAAA,MACF;AAAA,MAEC;AAAA;AAAA,EACH;AAEJ;AAEA,sBAAsB,aAAa,IAAI;",
+  "sourcesContent": ["import { type ReactNode } from 'react';\n\nimport { useColorRule } from '../../core/color-rule/useColorRule.js';\nimport { getColorPalette } from '../../core/utils/get-color-palette.js';\nimport { HistogramDataContext } from '../contexts/HistogramData.context.js';\nimport { useHistogramColorPalette } from '../hooks/useHistogramColorPalette.js';\nimport {\n  HistogramSeries,\n  SeriesMetadata,\n  WeakMapSeries,\n} from '../types/histogram.js';\n\ninterface HistogramChartDataProviderProps {\n  children: ReactNode;\n  data: HistogramSeries[];\n}\n\nconst LEFT_SCALE_INDEX = 0;\n\nexport function useBuildInitialMetadata(data: HistogramSeries[]) {\n  const allUnits = new Set<HistogramSeries['unit']>();\n  const colorPalette = useHistogramColorPalette();\n  const seriesMap: WeakMapSeries = new WeakMap();\n\n  const ruleColor = useColorRule(data, 'histogram');\n\n  for (let i = 0; i < data.length; i++) {\n    const series = data[i];\n    const id = `series-${i}`;\n\n    const color =\n      ruleColor.for(series) ||\n      (series.color\n        ? { Default: series.color }\n        : getColorPalette(series.name, i, colorPalette));\n\n    allUnits.add(series.unit);\n\n    const metadata: SeriesMetadata = {\n      id,\n      color,\n      scaleIndex: LEFT_SCALE_INDEX,\n    };\n\n    seriesMap.set(series, metadata);\n  }\n\n  return {\n    yUnits: [...allUnits],\n    seriesMap,\n  };\n}\n\nexport function safeGet<Y, T extends object>(map: WeakMap<T, Y>, key: T): Y {\n  const metadata = map.get(key);\n\n  if (!metadata) {\n    throw new Error(`Metadata not found for: ${JSON.stringify(key)}`);\n  }\n\n  return metadata;\n}\n\nexport const HistogramDataProvider = ({\n  children,\n  data,\n}: HistogramChartDataProviderProps) => {\n  const { yUnits, seriesMap } = useBuildInitialMetadata(data);\n  return (\n    <HistogramDataContext.Provider\n      value={{\n        series: data,\n        seriesMap,\n        yUnits,\n      }}\n    >\n      {children}\n    </HistogramDataContext.Provider>\n  );\n};\n\nHistogramDataProvider['displayName'] = 'HistogramDataProvider';\n"],
+  "mappings": "AAqEI;AAnEJ,SAAS,oBAAoB;AAC7B,SAAS,uBAAuB;AAChC,SAAS,4BAA4B;AACrC,SAAS,gCAAgC;AAYzC,MAAM,mBAAmB;AAElB,SAAS,wBAAwB,MAAyB;AAC/D,QAAM,WAAW,oBAAI,IAA6B;AAClD,QAAM,eAAe,yBAAyB;AAC9C,QAAM,YAA2B,oBAAI,QAAQ;AAE7C,QAAM,YAAY,aAAa,MAAM,WAAW;AAEhD,WAAS,IAAI,GAAG,IAAI,KAAK,QAAQ,KAAK;AACpC,UAAM,SAAS,KAAK,CAAC;AACrB,UAAM,KAAK,UAAU,CAAC;AAEtB,UAAM,QACJ,UAAU,IAAI,MAAM,MACnB,OAAO,QACJ,EAAE,SAAS,OAAO,MAAM,IACxB,gBAAgB,OAAO,MAAM,GAAG,YAAY;AAElD,aAAS,IAAI,OAAO,IAAI;AAExB,UAAM,WAA2B;AAAA,MAC/B;AAAA,MACA;AAAA,MACA,YAAY;AAAA,IACd;AAEA,cAAU,IAAI,QAAQ,QAAQ;AAAA,EAChC;AAEA,SAAO;AAAA,IACL,QAAQ,CAAC,GAAG,QAAQ;AAAA,IACpB;AAAA,EACF;AACF;AAEO,SAAS,QAA6B,KAAoB,KAAW;AAC1E,QAAM,WAAW,IAAI,IAAI,GAAG;AAE5B,MAAI,CAAC,UAAU;AACb,UAAM,IAAI,MAAM,2BAA2B,KAAK,UAAU,GAAG,CAAC,EAAE;AAAA,EAClE;AAEA,SAAO;AACT;AAEO,MAAM,wBAAwB,CAAC;AAAA,EACpC;AAAA,EACA;AACF,MAAuC;AACrC,QAAM,EAAE,QAAQ,UAAU,IAAI,wBAAwB,IAAI;AAC1D,SACE;AAAA,IAAC,qBAAqB;AAAA,IAArB;AAAA,MACC,OAAO;AAAA,QACL,QAAQ;AAAA,QACR;AAAA,QACA;AAAA,MACF;AAAA,MAEC;AAAA;AAAA,EACH;AAEJ;AAEA,sBAAsB,aAAa,IAAI;",
   "names": []
 }

package/esm/charts/histogram/providers/HistogramStateSyncProvider.js

@@ -1,4 +1,3 @@
-import { Fragment, jsx } from "react/jsx-runtime";
 import { reduceZoomDomain } from "../../core/components/interactions-state-helpers/reducers/zoom-reducers.js";
 import { getInitialZoomOut } from "../../core/components/zoom/utils/get-initial-zoom-out.js";
 import { useSetState } from "../hooks/store/state-setters.js";
@@ -20,7 +19,7 @@ const HistogramStateSyncProvider = ({
       infiniteZoom || getInitialZoomOut(currentDomain, initialDomainRange)
     )
   );
-  return /* @__PURE__ */ jsx(Fragment, { children });
+  return children;
 };
 HistogramStateSyncProvider["displayName"] = "HistogramStateSyncProvider";
 export {

package/esm/charts/histogram/providers/HistogramStateSyncProvider.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/charts/histogram/providers/HistogramStateSyncProvider.tsx"],
-  "sourcesContent": ["import { type PropsWithChildren } from 'react';\n\nimport { reduceZoomDomain } from '../../core/components/interactions-state-helpers/reducers/zoom-reducers.js';\nimport { getInitialZoomOut } from '../../core/components/zoom/utils/get-initial-zoom-out.js';\nimport { useSetState } from '../hooks/store/state-setters.js';\nimport { useHistogramFilteredData } from '../hooks/useHistogramFilteredData.js';\n\ninterface HistogramStateSyncProviderProps extends PropsWithChildren {\n  currentDomain?: [number, number];\n  initialDomain?: [number, number];\n  infiniteZoom?: boolean;\n}\n\nexport const HistogramStateSyncProvider = ({\n  currentDomain,\n  initialDomain,\n  infiniteZoom,\n  children,\n}: HistogramStateSyncProviderProps) => {\n  const { minMaxXValue } = useHistogramFilteredData();\n  const { min: minFromData, max: maxFromData } = minMaxXValue;\n  const initialDomainRange = initialDomain ?? [minFromData, maxFromData];\n\n  const setState = useSetState();\n\n  setState(\n    reduceZoomDomain(\n      currentDomain,\n      true,\n      infiniteZoom || getInitialZoomOut(currentDomain, initialDomainRange),\n    ),\n  );\n\n  return <>{children}</>;\n};\n\nHistogramStateSyncProvider['displayName'] = 'HistogramStateSyncProvider';\n"],
-  "mappings": "AAiCS;AA/BT,SAAS,wBAAwB;AACjC,SAAS,yBAAyB;AAClC,SAAS,mBAAmB;AAC5B,SAAS,gCAAgC;AAQlC,MAAM,6BAA6B,CAAC;AAAA,EACzC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAuC;AACrC,QAAM,EAAE,aAAa,IAAI,yBAAyB;AAClD,QAAM,EAAE,KAAK,aAAa,KAAK,YAAY,IAAI;AAC/C,QAAM,qBAAqB,iBAAiB,CAAC,aAAa,WAAW;AAErE,QAAM,WAAW,YAAY;AAE7B;AAAA,IACE;AAAA,MACE;AAAA,MACA;AAAA,MACA,gBAAgB,kBAAkB,eAAe,kBAAkB;AAAA,IACrE;AAAA,EACF;AAEA,SAAO,gCAAG,UAAS;AACrB;AAEA,2BAA2B,aAAa,IAAI;",
+  "sourcesContent": ["import { type PropsWithChildren, type ReactNode } from 'react';\n\nimport { reduceZoomDomain } from '../../core/components/interactions-state-helpers/reducers/zoom-reducers.js';\nimport { getInitialZoomOut } from '../../core/components/zoom/utils/get-initial-zoom-out.js';\nimport { useSetState } from '../hooks/store/state-setters.js';\nimport { useHistogramFilteredData } from '../hooks/useHistogramFilteredData.js';\n\ninterface HistogramStateSyncProviderProps extends PropsWithChildren {\n  currentDomain?: [number, number];\n  initialDomain?: [number, number];\n  infiniteZoom?: boolean;\n}\n\nexport const HistogramStateSyncProvider = ({\n  currentDomain,\n  initialDomain,\n  infiniteZoom,\n  children,\n}: HistogramStateSyncProviderProps): ReactNode => {\n  const { minMaxXValue } = useHistogramFilteredData();\n  const { min: minFromData, max: maxFromData } = minMaxXValue;\n  const initialDomainRange = initialDomain ?? [minFromData, maxFromData];\n\n  const setState = useSetState();\n\n  setState(\n    reduceZoomDomain(\n      currentDomain,\n      true,\n      infiniteZoom || getInitialZoomOut(currentDomain, initialDomainRange),\n    ),\n  );\n\n  return children;\n};\n\nHistogramStateSyncProvider['displayName'] = 'HistogramStateSyncProvider';\n"],
+  "mappings": "AAEA,SAAS,wBAAwB;AACjC,SAAS,yBAAyB;AAClC,SAAS,mBAAmB;AAC5B,SAAS,gCAAgC;AAQlC,MAAM,6BAA6B,CAAC;AAAA,EACzC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAkD;AAChD,QAAM,EAAE,aAAa,IAAI,yBAAyB;AAClD,QAAM,EAAE,KAAK,aAAa,KAAK,YAAY,IAAI;AAC/C,QAAM,qBAAqB,iBAAiB,CAAC,aAAa,WAAW;AAErE,QAAM,WAAW,YAAY;AAE7B;AAAA,IACE;AAAA,MACE;AAAA,MACA;AAAA,MACA,gBAAgB,kBAAkB,eAAe,kBAAkB;AAAA,IACrE;AAAA,EACF;AAEA,SAAO;AACT;AAEA,2BAA2B,aAAa,IAAI;",
   "names": []
 }

package/esm/charts/histogram/providers/StoreProvider.js

@@ -5,10 +5,10 @@ import { initialState } from "../constants/chart-state.js";
 import { HistogramChartStateContext } from "../contexts/HistogramChartState.context.js";
 const StoreProvider = ({ children }) => {
   const storeRef = useRef(null);
-  const lastInteractionMode = storeRef?.current?.getState().interactionMode;
+  const previousState = storeRef.current?.getState();
   storeRef.current = createStore({
     ...initialState,
-    interactionMode: lastInteractionMode ?? initialState.interactionMode
+    ...previousState
   });
   return /* @__PURE__ */ jsx(HistogramChartStateContext.Provider, { value: storeRef.current, children });
 };