@dynatrace/strato-components 3.11.2 → 3.12.0

package/esm/charts/categorical-bar/CategoricalBarChartRoot.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/charts/categorical-bar/CategoricalBarChartRoot.tsx"],
-  "sourcesContent": ["import { isEmpty } from 'lodash-es';\nimport {\n  forwardRef,\n  type PropsWithChildren,\n  type ReactElement,\n  useEffect,\n  useImperativeHandle,\n  useRef,\n} from 'react';\n\nimport { CategoricalBarChartLayout } from './CategoricalBarChartLayout.js';\nimport { DISPLAY_NAME } from './constants.js';\nimport { CategoricalBarChartBaseConfigContext } from './contexts/CategoricalBarChartBaseConfig.context.js';\nimport { CategoricalBarChartRawDataContext } from './contexts/CategoricalBarChartRawData.context.js';\nimport { useSetState } from './hooks/store/selectors.js';\nimport { useCategoricalBarChartConfig } from './hooks/useCategoricalBarChartConfig.js';\nimport { CategoricalBarChartProviders } from './providers/CategoricalBarChartProviders.js';\nimport { CategoricalBarDataProvider } from './providers/CategoricalBarDataProvider.js';\nimport { CategoricalBarFilteredDataProvider } from './providers/CategoricalBarFilteredDataProvider.js';\nimport { StoreProvider } from './providers/StoreProvider.js';\nimport type {\n  CategoricalBarChartProps,\n  CategoricalBarChartRef,\n} from './types/categorical-bar-chart.js';\nimport { DEFAULT_CHART_HEIGHT } from './types/defaults.js';\nimport { initialState } from './types/state.js';\nimport { buildAndDownloadCsv } from './utils/build-and-download-csv.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport { useMergeRefs } from '../../core/hooks/useMergeRefs.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 { ColorRuleContext } from '../core/context/ColorRuleContext.js';\nimport { ChartType } from '../core/types/chart-types.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 = 'CategoricalBarChart';\n\n/**\n * @public\n */\nexport const CategoricalBarChartRoot = /* @__PURE__ */ forwardRef<\n  CategoricalBarChartRef,\n  PropsWithChildren<CategoricalBarChartProps>\n>((props, forwardedRef) => {\n  const {\n    data,\n    height: heightProp,\n    width: widthProp,\n    seriesActions,\n    loading = false,\n    className,\n    style,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n  } = props;\n\n  const [behaviorTrackingProps] = useBehavioralTrackingProps(props);\n\n  const chartHeight = coerceSizeValue(heightProp ?? DEFAULT_CHART_HEIGHT);\n  const chartConfig = useCategoricalBarChartConfig(props);\n  const { emptyState, errorState } = getChartStatesTemplates(props.children);\n\n  const containerRef = useRef<HTMLDivElement>(null);\n  const rootRef = useMergeRefs<CategoricalBarChartRef | HTMLDivElement>([\n    forwardedRef,\n    containerRef,\n  ]);\n\n  useImperativeHandle(forwardedRef, () => ({\n    element: containerRef.current,\n    getConfig: () =>\n      JSON.stringify({\n        type: ChartType.CategoricalBar,\n        ...chartConfig,\n      }),\n    downloadData: () => {\n      buildAndDownloadCsv(data);\n    },\n  }));\n\n  const baseConfig = {\n    valueRepresentation: chartConfig.valueRepresentation,\n    colorPalette: chartConfig.colorPalette,\n    layout: chartConfig.layout,\n    groupMode: chartConfig.groupMode,\n    colorPaletteMode: chartConfig.colorPaletteMode,\n    toolbar: chartConfig.toolbar,\n    intents: chartConfig.intents,\n  };\n\n  const setState = useSetState();\n  useEffect(() => {\n    setState(() => initialState);\n  }, [chartConfig]);\n  const chartLayoutRef = useAutoLegendRefresh(data);\n\n  return (\n    <CategoricalBarChartBaseConfigContext.Provider value={baseConfig}>\n      <ColorRuleContext.Provider value={chartConfig.colorRules}>\n        <CategoricalBarChartRawDataContext.Provider value={data}>\n          <CategoricalBarDataProvider data={data}>\n            <StoreProvider>\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                <CategoricalBarChartProviders config={chartConfig}>\n                  <CategoricalBarFilteredDataProvider>\n                    <OverlayProvider>\n                      <TooltipProvider>\n                        <CategoricalBarChartLayout\n                          chartLayoutRef={chartLayoutRef}\n                          ref={rootRef}\n                          height={chartHeight}\n                          width={widthProp}\n                          emptyState={emptyState}\n                          errorState={errorState}\n                          isEmpty={isEmpty(data)}\n                          loading={loading}\n                          legend={chartConfig.legend}\n                          className={className}\n                          style={style}\n                          {...behaviorTrackingProps}\n                          data-dtrum-mask={dataDtrumMask}\n                          data-dtrum-allow={dataDtrumAllow}\n                          data-dt-component={\n                            COMPONENT_NAME_BEHAVIOURAL_TRACKING\n                          }\n                        />\n                      </TooltipProvider>\n                    </OverlayProvider>\n                  </CategoricalBarFilteredDataProvider>\n                </CategoricalBarChartProviders>\n              </ChartSeriesActionContext.Provider>\n            </StoreProvider>\n          </CategoricalBarDataProvider>\n        </CategoricalBarChartRawDataContext.Provider>\n      </ColorRuleContext.Provider>\n    </CategoricalBarChartBaseConfigContext.Provider>\n  );\n});\n\n(\n  CategoricalBarChartRoot as typeof CategoricalBarChartRoot & {\n    displayName: string;\n  }\n).displayName = DISPLAY_NAME;\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { isEmpty } from 'lodash-es';\nimport {\n  forwardRef,\n  type PropsWithChildren,\n  type ReactElement,\n  useEffect,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n} from 'react';\n\nimport { CategoricalBarChartLayout } from './CategoricalBarChartLayout.js';\nimport { DISPLAY_NAME } from './constants.js';\nimport { CategoricalBarChartBaseConfigContext } from './contexts/CategoricalBarChartBaseConfig.context.js';\nimport { CategoricalBarChartRawDataContext } from './contexts/CategoricalBarChartRawData.context.js';\nimport { useSetState } from './hooks/store/selectors.js';\nimport { useCategoricalBarChartConfig } from './hooks/useCategoricalBarChartConfig.js';\nimport { CategoricalBarChartProviders } from './providers/CategoricalBarChartProviders.js';\nimport { CategoricalBarDataProvider } from './providers/CategoricalBarDataProvider.js';\nimport { CategoricalBarFilteredDataProvider } from './providers/CategoricalBarFilteredDataProvider.js';\nimport { StoreProvider } from './providers/StoreProvider.js';\nimport type {\n  CategoricalBarChartProps,\n  CategoricalBarChartRef,\n} from './types/categorical-bar-chart.js';\nimport { DEFAULT_CHART_HEIGHT } from './types/defaults.js';\nimport { initialState } from './types/state.js';\nimport { buildAndDownloadCsv } from './utils/build-and-download-csv.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport { useMergeRefs } from '../../core/hooks/useMergeRefs.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 { ColorRuleContext } from '../core/context/ColorRuleContext.js';\nimport { ChartType } from '../core/types/chart-types.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 = 'CategoricalBarChart';\n\n/**\n * @public\n */\nexport const CategoricalBarChartRoot = /* @__PURE__ */ forwardRef<\n  CategoricalBarChartRef,\n  PropsWithChildren<CategoricalBarChartProps>\n>((props, forwardedRef) => {\n  const {\n    data,\n    height: heightProp,\n    width: widthProp,\n    seriesActions,\n    loading = false,\n    className,\n    style,\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\n  const [behaviorTrackingProps] = useBehavioralTrackingProps(props);\n\n  const chartHeight = coerceSizeValue(heightProp ?? DEFAULT_CHART_HEIGHT);\n  const chartConfig = useCategoricalBarChartConfig(props);\n  const { emptyState, errorState } = getChartStatesTemplates(props.children);\n\n  const containerRef = useRef<HTMLDivElement>(null);\n  const rootRef = useMergeRefs<CategoricalBarChartRef | HTMLDivElement>([\n    forwardedRef,\n    containerRef,\n  ]);\n\n  useImperativeHandle(forwardedRef, () => ({\n    element: containerRef.current,\n    getConfig: () =>\n      JSON.stringify({\n        type: ChartType.CategoricalBar,\n        ...chartConfig,\n      }),\n    downloadData: () => {\n      buildAndDownloadCsv(data);\n    },\n  }));\n\n  const baseConfig = {\n    valueRepresentation: chartConfig.valueRepresentation,\n    colorPalette: chartConfig.colorPalette,\n    layout: chartConfig.layout,\n    groupMode: chartConfig.groupMode,\n    colorPaletteMode: chartConfig.colorPaletteMode,\n    toolbar: chartConfig.toolbar,\n    intents: chartConfig.intents,\n  };\n\n  const setState = useSetState();\n  useEffect(() => {\n    setState(() => initialState);\n  }, [chartConfig]);\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      <CategoricalBarChartBaseConfigContext.Provider value={baseConfig}>\n        <ColorRuleContext.Provider value={chartConfig.colorRules}>\n          <CategoricalBarChartRawDataContext.Provider value={data}>\n            <CategoricalBarDataProvider data={data}>\n              <StoreProvider>\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                  <CategoricalBarChartProviders config={chartConfig}>\n                    <CategoricalBarFilteredDataProvider>\n                      <OverlayProvider>\n                        <TooltipProvider>\n                          <CategoricalBarChartLayout\n                            chartLayoutRef={chartLayoutRef}\n                            ref={rootRef}\n                            height={chartHeight}\n                            width={widthProp}\n                            emptyState={emptyState}\n                            errorState={errorState}\n                            isEmpty={isEmpty(data)}\n                            loading={loading}\n                            legend={chartConfig.legend}\n                            className={className}\n                            style={style}\n                            {...behaviorTrackingProps}\n                            data-dtrum-mask={dataDtrumMask}\n                            data-dtrum-allow={dataDtrumAllow}\n                            data-dt-component={\n                              COMPONENT_NAME_BEHAVIOURAL_TRACKING\n                            }\n                          />\n                        </TooltipProvider>\n                      </OverlayProvider>\n                    </CategoricalBarFilteredDataProvider>\n                  </CategoricalBarChartProviders>\n                </ChartSeriesActionContext.Provider>\n              </StoreProvider>\n            </CategoricalBarDataProvider>\n          </CategoricalBarChartRawDataContext.Provider>\n        </ColorRuleContext.Provider>\n      </CategoricalBarChartBaseConfigContext.Provider>\n    </AriaLabelingContext.Provider>\n  );\n});\n\n(\n  CategoricalBarChartRoot as typeof CategoricalBarChartRoot & {\n    displayName: string;\n  }\n).displayName = DISPLAY_NAME;\n"],
+  "mappings": "AAyI0B;AAzI1B,SAAS,eAAe;AACxB;AAAA,EACE;AAAA,EAGA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,iCAAiC;AAC1C,SAAS,oBAAoB;AAC7B,SAAS,4CAA4C;AACrD,SAAS,yCAAyC;AAClD,SAAS,mBAAmB;AAC5B,SAAS,oCAAoC;AAC7C,SAAS,oCAAoC;AAC7C,SAAS,kCAAkC;AAC3C,SAAS,0CAA0C;AACnD,SAAS,qBAAqB;AAK9B,SAAS,4BAA4B;AACrC,SAAS,oBAAoB;AAC7B,SAAS,2BAA2B;AACpC,SAAS,kCAAkC;AAC3C,SAAS,oBAAoB;AAC7B,SAAS,4BAA4B;AACrC,SAAS,+BAA+B;AACxC,SAAS,uBAAuB;AAChC,SAAS,uBAAuB;AAChC,SAAS,gCAAgC;AACzC,SAAS,2BAA2B;AACpC,SAAS,wBAAwB;AACjC,SAAS,iBAAiB;AAC1B,SAAS,uBAAuB;AAKhC,MAAM,sCAAsC;AAKrC,MAAM,0BAA0C,2BAGrD,CAAC,OAAO,iBAAiB;AACzB,QAAM;AAAA,IACJ;AAAA,IACA,QAAQ;AAAA,IACR,OAAO;AAAA,IACP;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA,mBAAmB;AAAA,IACnB,oBAAoB;AAAA,IACpB,cAAc;AAAA,IACd,mBAAmB;AAAA,IACnB,oBAAoB;AAAA,IACpB,gBAAgB;AAAA,EAClB,IAAI;AAEJ,QAAM,CAAC,qBAAqB,IAAI,2BAA2B,KAAK;AAEhE,QAAM,cAAc,gBAAgB,cAAc,oBAAoB;AACtE,QAAM,cAAc,6BAA6B,KAAK;AACtD,QAAM,EAAE,YAAY,WAAW,IAAI,wBAAwB,MAAM,QAAQ;AAEzE,QAAM,eAAe,OAAuB,IAAI;AAChD,QAAM,UAAU,aAAsD;AAAA,IACpE;AAAA,IACA;AAAA,EACF,CAAC;AAED,sBAAoB,cAAc,OAAO;AAAA,IACvC,SAAS,aAAa;AAAA,IACtB,WAAW,MACT,KAAK,UAAU;AAAA,MACb,MAAM,UAAU;AAAA,MAChB,GAAG;AAAA,IACL,CAAC;AAAA,IACH,cAAc,MAAM;AAClB,0BAAoB,IAAI;AAAA,IAC1B;AAAA,EACF,EAAE;AAEF,QAAM,aAAa;AAAA,IACjB,qBAAqB,YAAY;AAAA,IACjC,cAAc,YAAY;AAAA,IAC1B,QAAQ,YAAY;AAAA,IACpB,WAAW,YAAY;AAAA,IACvB,kBAAkB,YAAY;AAAA,IAC9B,SAAS,YAAY;AAAA,IACrB,SAAS,YAAY;AAAA,EACvB;AAEA,QAAM,WAAW,YAAY;AAC7B,YAAU,MAAM;AACd,aAAS,MAAM,YAAY;AAAA,EAC7B,GAAG,CAAC,WAAW,CAAC;AAChB,QAAM,iBAAiB,qBAAqB,IAAI;AAChD,QAAM,oBAAoB;AAAA,IACxB,OAAO;AAAA,MACL,cAAc;AAAA,MACd,mBAAmB;AAAA,MACnB,oBAAoB;AAAA,MACpB,gBAAgB;AAAA,IAClB;AAAA,IACA,CAAC,WAAW,gBAAgB,iBAAiB,WAAW;AAAA,EAC1D;AAEA,SACE,oBAAC,oBAAoB,UAApB,EAA6B,OAAO,mBACnC,8BAAC,qCAAqC,UAArC,EAA8C,OAAO,YACpD,8BAAC,iBAAiB,UAAjB,EAA0B,OAAO,YAAY,YAC5C,8BAAC,kCAAkC,UAAlC,EAA2C,OAAO,MACjD,8BAAC,8BAA2B,MAC1B,8BAAC,iBACC;AAAA,IAAC,yBAAyB;AAAA,IAAzB;AAAA,MACC,OAAO;AAAA;AAAA;AAAA,QAGL,oBAAoB;AAAA,MAGtB;AAAA,MAEA,8BAAC,gCAA6B,QAAQ,aACpC,8BAAC,sCACC,8BAAC,mBACC,8BAAC,mBACC;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA,KAAK;AAAA,UACL,QAAQ;AAAA,UACR,OAAO;AAAA,UACP;AAAA,UACA;AAAA,UACA,SAAS,QAAQ,IAAI;AAAA,UACrB;AAAA,UACA,QAAQ,YAAY;AAAA,UACpB;AAAA,UACA;AAAA,UACC,GAAG;AAAA,UACJ,mBAAiB;AAAA,UACjB,oBAAkB;AAAA,UAClB,qBACE;AAAA;AAAA,MAEJ,GACF,GACF,GACF,GACF;AAAA;AAAA,EACF,GACF,GACF,GACF,GACF,GACF,GACF;AAEJ,CAAC;AAGC,wBAGA,cAAc;",
   "names": []
 }

package/esm/charts/categorical-bar/components/interactions/overlays/CategoricalBarChartInspectOverlay.css

@@ -1,9 +1,9 @@
-._1wi8enr0-3-11-2 {
+._1wi8enr0-3-12-0 {
   cursor: crosshair;
   overflow: visible;
   z-index: 1;
 }
-._1wi8enr1-3-11-2 {
+._1wi8enr1-3-12-0 {
   top: -7px;
   left: -7px;
   width: calc(100% + 14px);

package/esm/charts/categorical-bar/components/interactions/overlays/CategoricalBarChartInspectOverlay.sty.js

@@ -1,7 +1,7 @@
 import "../../../../core/components/chart-grid/ChartGrid.css";
 import "./CategoricalBarChartInspectOverlay.css";
-var crosshairLayout = "_1wi8enr0-3-11-2 _13lzg4k0-3-11-2";
-var dataPointLayout = "_1wi8enr1-3-11-2 _13lzg4k0-3-11-2";
+var crosshairLayout = "_1wi8enr0-3-12-0 _13lzg4k0-3-12-0";
+var dataPointLayout = "_1wi8enr1-3-12-0 _13lzg4k0-3-12-0";
 export {
   crosshairLayout,
   dataPointLayout

package/esm/charts/categorical-bar/components/interactions/overlays/CategoricalBarChartInspectOverlay.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/categorical-bar/components/interactions/overlays/CategoricalBarChartInspectOverlay.css.ts"],
-  "sourcesContent": ["import '../../../../core/components/chart-grid/ChartGrid.css';\nimport './CategoricalBarChartInspectOverlay.css';\nexport var crosshairLayout = '_1wi8enr0-3-11-2 _13lzg4k0-3-11-2';\nexport var dataPointLayout = '_1wi8enr1-3-11-2 _13lzg4k0-3-11-2';"],
+  "sourcesContent": ["import '../../../../core/components/chart-grid/ChartGrid.css';\nimport './CategoricalBarChartInspectOverlay.css';\nexport var crosshairLayout = '_1wi8enr0-3-12-0 _13lzg4k0-3-12-0';\nexport var dataPointLayout = '_1wi8enr1-3-12-0 _13lzg4k0-3-12-0';"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACA,IAAI,kBAAkB;AACtB,IAAI,kBAAkB;",
   "names": []
 }

package/esm/charts/categorical-bar/types/categorical-bar-chart.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/charts/categorical-bar/types/categorical-bar-chart.ts"],
-  "sourcesContent": ["import type { ScaleLinear, ScaleSymLog } from 'd3-scale';\n\nimport type {\n  ConvertibleUnit,\n  FormatOptions,\n  Unit,\n} from '@dynatrace-sdk/units';\n\nimport type { IntentProps } from '../../../core/slots/Intent/Intent.js';\nimport type { BehaviorTrackingProps } from '../../../core/types/behavior-tracking-props.js';\nimport { MaskingProps } from '../../../core/types/masking-props.js';\nimport { StylingProps } from '../../../core/types/styling-props.js';\nimport type { TruncationMode } from '../../../typography/text-ellipsis/TextEllipsis.js';\nimport type {\n  ColorPalette,\n  ColorPaletteMode,\n  CustomColorPalette,\n} from '../../core/types/color-palette.js';\nimport { ColorRuleProps } from '../../core/types/color-rule.js';\nimport type { Formatter } from '../../core/types/formatter.js';\nimport type { LegendPosition, LegendProps } from '../../core/types/legend.js';\nimport type {\n  AxisScaleType,\n  ValueRepresentation,\n} from '../../core/types/scales.js';\nimport type { SeriesActionsTemplate } from '../../core/types/series-actions-template.js';\nimport {\n  ChartToolbarConfig,\n  InternalChartToolbarConfigured,\n} from '../../core/types/toolbar.js';\nimport type { WithId } from '../../core/types/with-id.js';\nimport type { CategoricalBarChartThresholdIndicatorProps } from '../slots/ThresholdIndicator.js';\n\n//region Common\n/**\n * Defines whether the item is displayed horizontally or vertically.\n * @public\n */\nexport const layoutOptions = ['horizontal', 'vertical'] as const;\n/**\n * @public\n */\nexport type Layout = (typeof layoutOptions)[number];\n\n/**\n * Strategy used for grouping the bars in a bar chart.\n * @public\n */\nexport const groupModeOptions = ['grouped', 'stacked'] as const;\n/**\n * @public\n */\nexport type GroupMode = (typeof groupModeOptions)[number];\n\n/**\n * Tooltip variant. 'single' displays only the closest category, and 'grouped' all the categories within a category.\n * @public\n */\nexport const categoricalChartTooltipVariantOptions = [\n  'single',\n  'grouped',\n] as const;\n/**\n * @public\n */\nexport type CategoricalChartTooltipVariant =\n  (typeof categoricalChartTooltipVariantOptions)[number];\n\n//endregion\n\n//region Slots\n/**\n * @internal\n */\nexport interface CategoricalBarChartSlots {\n  legend: {\n    position?: LegendPosition;\n    hidden?: boolean;\n  };\n  tooltip: {\n    variant?: CategoricalChartTooltipVariant;\n  };\n  valueAxis: {\n    label?: string;\n    min?: number;\n    max?: number;\n    /**\n     * Handler that is called for every tick value to be formatted.\n     */\n    formatter?: Formatter | FormatOptions<Unit, ConvertibleUnit>;\n    /** The scale of the value axis. */\n    scale?: AxisScaleType;\n  };\n  categoryAxis: {\n    tickLabelLayout?: Layout;\n    label?: string;\n  };\n  thresholds: CategoricalBarChartThresholdIndicatorProps[];\n  toolbar: Partial<CategoricalBarChartToolbarInternalConfigured>;\n  colorRules: ColorRuleProps[];\n  intents: InternalCategoricalBarChartConfig['intents'];\n}\n\n//endregion\n\n//region Configuration\n/**\n * @public\n */\nexport interface CategoricalBarChartConfiguration {\n  /**\n   * Whether the bars are displayed in a 'vertical' or 'horizontal' layout.\n   * @defaultValue 'vertical'\n   */\n  layout?: Layout;\n  /**\n   * Strategy used for grouping the bars within a category. \"stacked\" will mount one on top of each other, and \"grouped\" will place one next to the other\n   * @defaultValue 'stacked'\n   */\n  groupMode?: GroupMode;\n  /**\n   * Color palette to be used for the bar category.\n   * @defaultValue \"categorical\"\n   */\n  colorPalette?: ColorPalette | CustomColorPalette;\n  /**\n   * The way values are represented. \"absolute\" will display the value as it is, and \"relative\" displays a percentage value considering the other dimensions values within a categories.\n   * @defaultValue \"absolute\"\n   */\n  valueRepresentation?: ValueRepresentation;\n  /**\n   * Tooltip config for the chart\n   */\n  tooltip?: {\n    /**\n     * Tooltip variant. 'single' displays only the closest category, and 'grouped' all the categories within a category.\n     */\n    variant?: CategoricalChartTooltipVariant;\n  };\n  /**\n   * Config for the axis holding the category\n   */\n  categoryAxis?: {\n    /**\n     * Whether the tick labels are displayed in a 'vertical' or 'horizontal' layout.\n     * @defaultValue 'horizontal'\n     */\n    tickLabelLayout?: Layout;\n    // Optional axis label\n    label?: string;\n  };\n  /**\n   * Config for the axis holding the category values\n   */\n  valueAxis?: {\n    // Optional axis label\n    label?: string;\n    // Min value to be represented on a value axis\n    min?: number;\n    // Max value to be represented on a value axis\n    max?: number;\n    /**\n     * Handler that is called for every tick value to be formatted.\n     */\n    formatter?: Formatter | FormatOptions<Unit, ConvertibleUnit>;\n    /** The scale of the value axis. */\n    scale?: AxisScaleType;\n  };\n  // Config for the chart legend config.\n  legend?: {\n    /**\n     * Defines the position where to show the chart legend.\n     * @defaultValue \"auto\"\n     */\n    position?: LegendPosition;\n    /**\n     * Whether the legend is hidden or shown\n     * @defaultValue \"false\" - the legend is shown\n     */\n    hidden?: boolean;\n  };\n  /**\n   * Truncation mode to use (start, middle, end)\n   * @defaultValue 'middle'\n   */\n  truncationMode?: TruncationMode;\n  /**\n   * Mode in which bars are colored when single dimension data is shown\n   * @defaultValue \"multi-colored\" - each bar gets a color in the palette sequentially\n   */\n  colorPaletteMode?: ColorPaletteMode;\n  /**\n   * ThresholdIndicator configuration for the categorical bar chart value axis.\n   */\n  thresholdIndicators?: CategoricalBarChartThresholdConfiguration[];\n  /**\n   * Config for the chart toolbar\n   */\n  toolbar?: CategoricalBarChartToolbarConfiguration;\n  /**\n   * Color rules to apply to the bars\n   */\n  colorRules?: ColorRuleProps[];\n}\n\n/**\n * Config type holding all the required config used in the categorical bar chart. Considers that the defaults have already been applied.\n * @public\n */\nexport type RequiredCategoricalBarChartConfiguration =\n  Required<CategoricalBarChartConfiguration> & {\n    tooltip: CategoricalBarChartTooltipConfiguration;\n    legend: CategoricalBarChartLegendConfiguration;\n    categoryAxis: CategoricalBarChartCategoryAxisConfiguration;\n    thresholdIndicators: InternalCategoricalBarChartThresholdConfiguration[];\n    toolbar?: CategoricalBarChartToolbarConfiguration;\n  };\n\n/**\n * @internal\n */\nexport type InternalCategoricalBarChartConfig = Omit<\n  RequiredCategoricalBarChartConfiguration,\n  'toolbar'\n> & {\n  intents: IntentProps[];\n  toolbar: CategoricalBarChartToolbarInternalConfigured &\n    Required<\n      Pick<\n        CategoricalBarChartToolbarInternalConfigured,\n        'placement' | 'hidden' | 'downloadData'\n      >\n    >;\n};\n\n/**\n * @public\n */\nexport interface CategoricalBarChartTooltipConfiguration {\n  variant: CategoricalChartTooltipVariant;\n}\n\n/**\n * @public\n */\nexport type CategoricalBarChartLegendConfiguration = LegendProps;\n\n/**\n * @public\n */\nexport interface CategoricalBarChartValueAxisConfiguration {\n  label?: string;\n  min?: number;\n  max?: number;\n  /**\n   * Handler that is called for every tick value to be formatted.\n   */\n  formatter?: Formatter | FormatOptions<Unit, ConvertibleUnit>;\n  /** The scale of the value axis. */\n  scale?: AxisScaleType;\n}\n\n/**\n * @public\n */\nexport type CategoricalBarChartToolbarConfiguration = ChartToolbarConfig & {\n  hidden?: boolean;\n};\n\n/**\n * @internal\n */\nexport interface CategoricalBarChartToolbarInternalConfigured\n  extends InternalChartToolbarConfigured {\n  hidden?: boolean;\n}\n\n/**\n * @public\n */\nexport interface CategoricalBarChartCategoryAxisConfiguration {\n  label?: string;\n  tickLabelLayout: Layout;\n  /** Max size in pixels for the category axis. Size depends on the position this axis is assigned to \u2013 left axis will use width, bottom axis will use height.\n   *  If there's no enough space for this maxSize, category axis will only take the available space for it.\n   */\n  maxSize?: number;\n}\n\n/**\n * @public\n */\nexport type CategoricalBarChartThresholdConfiguration =\n  CategoricalBarChartThresholdIndicatorProps;\n\n/**\n * @public\n */\nexport type InternalCategoricalBarChartThresholdConfiguration =\n  WithId<CategoricalBarChartThresholdConfiguration>;\n//endregion\n\n//region Props\n// TODO: ADES-5109 we need to support Unit in the categoricalBarChart\n/**\n * @public\n * @deprecated CategoricalUnit is deprecated, use string | Unit instead.\n */\nexport type CategoricalUnit = string;\n\n/**\n * @public\n */\nexport interface CategoricalBarChartData extends Record<string, unknown> {\n  category: string;\n  value: number | Record<string, number>;\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  unit?: CategoricalUnit | string | Unit;\n  /* @deprecated - use color rules instead. This key will be removed in a future release */\n  color?: string;\n}\n\n/**\n * Ref of the Categorical bar chart\n * @public\n */\nexport interface CategoricalBarChartRef {\n  /** Chart div element */\n  element: HTMLDivElement | null;\n  /** Returns the current serialized config of the categorical bar chart .*/\n  getConfig: () => string;\n  /** Downloads map raw data .*/\n  downloadData: () => void;\n}\n\n/**\n * @public\n */\nexport interface CategoricalBarChartProps\n  extends StylingProps,\n    MaskingProps,\n    BehaviorTrackingProps {\n  /**\n   * Data object for the categorical bar chart\n   */\n  data: CategoricalBarChartData[];\n  /**\n   * Chart height. When a number is specified, is considered as pixels, otherwise a valid height string is expected.\n   * @defaultValue 300px\n   */\n  height?: number | string;\n  /**\n   * Chart width. When a number is specified, it's treated as pixels,\n   * otherwise a valid width string is expected.\n   * @defaultValue 100%\n   */\n  width?: number | string;\n  /**\n   * Whether the bars are displayed in a 'vertical' or 'horizontal' layout.\n   * @defaultValue 'vertical'\n   */\n  layout?: Layout;\n  /**\n   * Strategy used for grouping the bars within a category. \"stacked\" will mount one on top of each other, and \"grouped\" will place one next to the other\n   *@defaultValue 'stacked'\n   */\n  groupMode?: GroupMode;\n  /**\n   * Color palette to be used for the bar category.\n   * @defaultValue \"categorical\"\n   */\n  colorPalette?: ColorPalette | CustomColorPalette;\n  /**\n   * The way values are represented. \"absolute\" will display the value as it is, and \"relative\" displays a percentage value considering the other dimensions values within a category.\n   * @defaultValue \"absolute\"\n   */\n  valueRepresentation?: ValueRepresentation;\n  /**\n   * Category actions to be shown in the legend and tooltip actions\n   */\n  seriesActions?: (series: Record<string, unknown>) => SeriesActionsTemplate;\n  /**\n   * Truncation mode to use (start, middle, end)\n   * Applied to all the parts that truncate text.\n   * @defaultValue 'middle'\n   */\n  truncationMode?: TruncationMode;\n  /**\n   * Mode in which bars are colored when single dimension data is shown\n   * @defaultValue \"single-color\" - each bar gets the same color\n   */\n  colorPaletteMode?: ColorPaletteMode;\n  /** Show the loading indicator when truthy.\n   * @defaultValue false\n   */\n  loading?: boolean;\n}\n\n/**\n * @public\n */\nexport interface CategoricalBarChartTooltipProps {\n  /**\n   * Tooltip variant. 'single' displays only the closest category, and 'grouped' all the category within a category.\n   */\n  variant: CategoricalChartTooltipVariant;\n}\n\n/**\n * @public\n */\nexport interface CategoricalBarChartCategoryAxisProps {\n  /**\n   * Whether the tick labels are displayed in a 'vertical' or 'horizontal' layout.\n   * @defaultValue 'horizontal'\n   */\n  tickLabelLayout?: Layout;\n  // Optional axis label\n  label?: string;\n  /** Max size in pixels for the category axis. Size depends on the position this axis is assigned to \u2013 left axis will use width, bottom axis will use height.\n   *  If there's no enough space for this maxSize, category axis will only take the available space for it.\n   */\n  maxSize?: number;\n}\n\n/**\n * @public\n */\nexport interface CategoricalBarChartValueAxisProps {\n  // Optional axis label\n  label?: string;\n  // Min value to be represented on a value axis\n  min?: number;\n  // Max value to be represented on a value axis\n  max?: number;\n  /**\n   * Handler that is called for every tick value to be formatted.\n   */\n  formatter?: Formatter | FormatOptions<Unit, ConvertibleUnit>;\n  /** The scale of the value axis. */\n  scale?: AxisScaleType;\n}\n\n/**\n * @public\n */\nexport type CategoricalBarChartLegendProps = LegendProps;\n\n/**\n * @internal\n */\nexport type CategoricalValueScales =\n  | ScaleLinear<number, number>\n  | ScaleSymLog<number, number>;\n"],
-  "mappings": "AAsCO,MAAM,gBAAgB,CAAC,cAAc,UAAU;AAU/C,MAAM,mBAAmB,CAAC,WAAW,SAAS;AAU9C,MAAM,wCAAwC;AAAA,EACnD;AAAA,EACA;AACF;",
+  "sourcesContent": ["import type { ScaleLinear, ScaleSymLog } from 'd3-scale';\n\nimport type {\n  ConvertibleUnit,\n  FormatOptions,\n  Unit,\n} from '@dynatrace-sdk/units';\n\nimport type { IntentProps } from '../../../core/slots/Intent/Intent.js';\nimport type { AriaLabelingProps } from '../../../core/types/a11y-props.js';\nimport type { BehaviorTrackingProps } from '../../../core/types/behavior-tracking-props.js';\nimport { MaskingProps } from '../../../core/types/masking-props.js';\nimport { StylingProps } from '../../../core/types/styling-props.js';\nimport type { TruncationMode } from '../../../typography/text-ellipsis/TextEllipsis.js';\nimport type {\n  ColorPalette,\n  ColorPaletteMode,\n  CustomColorPalette,\n} from '../../core/types/color-palette.js';\nimport { ColorRuleProps } from '../../core/types/color-rule.js';\nimport type { Formatter } from '../../core/types/formatter.js';\nimport type { LegendPosition, LegendProps } from '../../core/types/legend.js';\nimport type {\n  AxisScaleType,\n  ValueRepresentation,\n} from '../../core/types/scales.js';\nimport type { SeriesActionsTemplate } from '../../core/types/series-actions-template.js';\nimport {\n  ChartToolbarConfig,\n  InternalChartToolbarConfigured,\n} from '../../core/types/toolbar.js';\nimport type { WithId } from '../../core/types/with-id.js';\nimport type { CategoricalBarChartThresholdIndicatorProps } from '../slots/ThresholdIndicator.js';\n\n//region Common\n/**\n * Defines whether the item is displayed horizontally or vertically.\n * @public\n */\nexport const layoutOptions = ['horizontal', 'vertical'] as const;\n/**\n * @public\n */\nexport type Layout = (typeof layoutOptions)[number];\n\n/**\n * Strategy used for grouping the bars in a bar chart.\n * @public\n */\nexport const groupModeOptions = ['grouped', 'stacked'] as const;\n/**\n * @public\n */\nexport type GroupMode = (typeof groupModeOptions)[number];\n\n/**\n * Tooltip variant. 'single' displays only the closest category, and 'grouped' all the categories within a category.\n * @public\n */\nexport const categoricalChartTooltipVariantOptions = [\n  'single',\n  'grouped',\n] as const;\n/**\n * @public\n */\nexport type CategoricalChartTooltipVariant =\n  (typeof categoricalChartTooltipVariantOptions)[number];\n\n//endregion\n\n//region Slots\n/**\n * @internal\n */\nexport interface CategoricalBarChartSlots {\n  legend: {\n    position?: LegendPosition;\n    hidden?: boolean;\n  };\n  tooltip: {\n    variant?: CategoricalChartTooltipVariant;\n  };\n  valueAxis: {\n    label?: string;\n    min?: number;\n    max?: number;\n    /**\n     * Handler that is called for every tick value to be formatted.\n     */\n    formatter?: Formatter | FormatOptions<Unit, ConvertibleUnit>;\n    /** The scale of the value axis. */\n    scale?: AxisScaleType;\n  };\n  categoryAxis: {\n    tickLabelLayout?: Layout;\n    label?: string;\n  };\n  thresholds: CategoricalBarChartThresholdIndicatorProps[];\n  toolbar: Partial<CategoricalBarChartToolbarInternalConfigured>;\n  colorRules: ColorRuleProps[];\n  intents: InternalCategoricalBarChartConfig['intents'];\n}\n\n//endregion\n\n//region Configuration\n/**\n * @public\n */\nexport interface CategoricalBarChartConfiguration {\n  /**\n   * Whether the bars are displayed in a 'vertical' or 'horizontal' layout.\n   * @defaultValue 'vertical'\n   */\n  layout?: Layout;\n  /**\n   * Strategy used for grouping the bars within a category. \"stacked\" will mount one on top of each other, and \"grouped\" will place one next to the other\n   * @defaultValue 'stacked'\n   */\n  groupMode?: GroupMode;\n  /**\n   * Color palette to be used for the bar category.\n   * @defaultValue \"categorical\"\n   */\n  colorPalette?: ColorPalette | CustomColorPalette;\n  /**\n   * The way values are represented. \"absolute\" will display the value as it is, and \"relative\" displays a percentage value considering the other dimensions values within a categories.\n   * @defaultValue \"absolute\"\n   */\n  valueRepresentation?: ValueRepresentation;\n  /**\n   * Tooltip config for the chart\n   */\n  tooltip?: {\n    /**\n     * Tooltip variant. 'single' displays only the closest category, and 'grouped' all the categories within a category.\n     */\n    variant?: CategoricalChartTooltipVariant;\n  };\n  /**\n   * Config for the axis holding the category\n   */\n  categoryAxis?: {\n    /**\n     * Whether the tick labels are displayed in a 'vertical' or 'horizontal' layout.\n     * @defaultValue 'horizontal'\n     */\n    tickLabelLayout?: Layout;\n    // Optional axis label\n    label?: string;\n  };\n  /**\n   * Config for the axis holding the category values\n   */\n  valueAxis?: {\n    // Optional axis label\n    label?: string;\n    // Min value to be represented on a value axis\n    min?: number;\n    // Max value to be represented on a value axis\n    max?: number;\n    /**\n     * Handler that is called for every tick value to be formatted.\n     */\n    formatter?: Formatter | FormatOptions<Unit, ConvertibleUnit>;\n    /** The scale of the value axis. */\n    scale?: AxisScaleType;\n  };\n  // Config for the chart legend config.\n  legend?: {\n    /**\n     * Defines the position where to show the chart legend.\n     * @defaultValue \"auto\"\n     */\n    position?: LegendPosition;\n    /**\n     * Whether the legend is hidden or shown\n     * @defaultValue \"false\" - the legend is shown\n     */\n    hidden?: boolean;\n  };\n  /**\n   * Truncation mode to use (start, middle, end)\n   * @defaultValue 'middle'\n   */\n  truncationMode?: TruncationMode;\n  /**\n   * Mode in which bars are colored when single dimension data is shown\n   * @defaultValue \"multi-colored\" - each bar gets a color in the palette sequentially\n   */\n  colorPaletteMode?: ColorPaletteMode;\n  /**\n   * ThresholdIndicator configuration for the categorical bar chart value axis.\n   */\n  thresholdIndicators?: CategoricalBarChartThresholdConfiguration[];\n  /**\n   * Config for the chart toolbar\n   */\n  toolbar?: CategoricalBarChartToolbarConfiguration;\n  /**\n   * Color rules to apply to the bars\n   */\n  colorRules?: ColorRuleProps[];\n}\n\n/**\n * Config type holding all the required config used in the categorical bar chart. Considers that the defaults have already been applied.\n * @public\n */\nexport type RequiredCategoricalBarChartConfiguration =\n  Required<CategoricalBarChartConfiguration> & {\n    tooltip: CategoricalBarChartTooltipConfiguration;\n    legend: CategoricalBarChartLegendConfiguration;\n    categoryAxis: CategoricalBarChartCategoryAxisConfiguration;\n    thresholdIndicators: InternalCategoricalBarChartThresholdConfiguration[];\n    toolbar?: CategoricalBarChartToolbarConfiguration;\n  };\n\n/**\n * @internal\n */\nexport type InternalCategoricalBarChartConfig = Omit<\n  RequiredCategoricalBarChartConfiguration,\n  'toolbar'\n> & {\n  intents: IntentProps[];\n  toolbar: CategoricalBarChartToolbarInternalConfigured &\n    Required<\n      Pick<\n        CategoricalBarChartToolbarInternalConfigured,\n        'placement' | 'hidden' | 'downloadData'\n      >\n    >;\n};\n\n/**\n * @public\n */\nexport interface CategoricalBarChartTooltipConfiguration {\n  variant: CategoricalChartTooltipVariant;\n}\n\n/**\n * @public\n */\nexport type CategoricalBarChartLegendConfiguration = LegendProps;\n\n/**\n * @public\n */\nexport interface CategoricalBarChartValueAxisConfiguration {\n  label?: string;\n  min?: number;\n  max?: number;\n  /**\n   * Handler that is called for every tick value to be formatted.\n   */\n  formatter?: Formatter | FormatOptions<Unit, ConvertibleUnit>;\n  /** The scale of the value axis. */\n  scale?: AxisScaleType;\n}\n\n/**\n * @public\n */\nexport type CategoricalBarChartToolbarConfiguration = ChartToolbarConfig & {\n  hidden?: boolean;\n};\n\n/**\n * @internal\n */\nexport interface CategoricalBarChartToolbarInternalConfigured\n  extends InternalChartToolbarConfigured {\n  hidden?: boolean;\n}\n\n/**\n * @public\n */\nexport interface CategoricalBarChartCategoryAxisConfiguration {\n  label?: string;\n  tickLabelLayout: Layout;\n  /** Max size in pixels for the category axis. Size depends on the position this axis is assigned to \u2013 left axis will use width, bottom axis will use height.\n   *  If there's no enough space for this maxSize, category axis will only take the available space for it.\n   */\n  maxSize?: number;\n}\n\n/**\n * @public\n */\nexport type CategoricalBarChartThresholdConfiguration =\n  CategoricalBarChartThresholdIndicatorProps;\n\n/**\n * @public\n */\nexport type InternalCategoricalBarChartThresholdConfiguration =\n  WithId<CategoricalBarChartThresholdConfiguration>;\n//endregion\n\n//region Props\n// TODO: ADES-5109 we need to support Unit in the categoricalBarChart\n/**\n * @public\n * @deprecated CategoricalUnit is deprecated, use string | Unit instead.\n */\nexport type CategoricalUnit = string;\n\n/**\n * @public\n */\nexport interface CategoricalBarChartData extends Record<string, unknown> {\n  category: string;\n  value: number | Record<string, number>;\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  unit?: CategoricalUnit | string | Unit;\n  /* @deprecated - use color rules instead. This key will be removed in a future release */\n  color?: string;\n}\n\n/**\n * Ref of the Categorical bar chart\n * @public\n */\nexport interface CategoricalBarChartRef {\n  /** Chart div element */\n  element: HTMLDivElement | null;\n  /** Returns the current serialized config of the categorical bar chart .*/\n  getConfig: () => string;\n  /** Downloads map raw data .*/\n  downloadData: () => void;\n}\n\n/**\n * @public\n */\nexport interface CategoricalBarChartProps\n  extends StylingProps,\n    MaskingProps,\n    AriaLabelingProps,\n    BehaviorTrackingProps {\n  /**\n   * Data object for the categorical bar chart\n   */\n  data: CategoricalBarChartData[];\n  /**\n   * Chart height. When a number is specified, is considered as pixels, otherwise a valid height string is expected.\n   * @defaultValue 300px\n   */\n  height?: number | string;\n  /**\n   * Chart width. When a number is specified, it's treated as pixels,\n   * otherwise a valid width string is expected.\n   * @defaultValue 100%\n   */\n  width?: number | string;\n  /**\n   * Whether the bars are displayed in a 'vertical' or 'horizontal' layout.\n   * @defaultValue 'vertical'\n   */\n  layout?: Layout;\n  /**\n   * Strategy used for grouping the bars within a category. \"stacked\" will mount one on top of each other, and \"grouped\" will place one next to the other\n   *@defaultValue 'stacked'\n   */\n  groupMode?: GroupMode;\n  /**\n   * Color palette to be used for the bar category.\n   * @defaultValue \"categorical\"\n   */\n  colorPalette?: ColorPalette | CustomColorPalette;\n  /**\n   * The way values are represented. \"absolute\" will display the value as it is, and \"relative\" displays a percentage value considering the other dimensions values within a category.\n   * @defaultValue \"absolute\"\n   */\n  valueRepresentation?: ValueRepresentation;\n  /**\n   * Category actions to be shown in the legend and tooltip actions\n   */\n  seriesActions?: (series: Record<string, unknown>) => SeriesActionsTemplate;\n  /**\n   * Truncation mode to use (start, middle, end)\n   * Applied to all the parts that truncate text.\n   * @defaultValue 'middle'\n   */\n  truncationMode?: TruncationMode;\n  /**\n   * Mode in which bars are colored when single dimension data is shown\n   * @defaultValue \"single-color\" - each bar gets the same color\n   */\n  colorPaletteMode?: ColorPaletteMode;\n  /** Show the loading indicator when truthy.\n   * @defaultValue false\n   */\n  loading?: boolean;\n}\n\n/**\n * @public\n */\nexport interface CategoricalBarChartTooltipProps {\n  /**\n   * Tooltip variant. 'single' displays only the closest category, and 'grouped' all the category within a category.\n   */\n  variant: CategoricalChartTooltipVariant;\n}\n\n/**\n * @public\n */\nexport interface CategoricalBarChartCategoryAxisProps {\n  /**\n   * Whether the tick labels are displayed in a 'vertical' or 'horizontal' layout.\n   * @defaultValue 'horizontal'\n   */\n  tickLabelLayout?: Layout;\n  // Optional axis label\n  label?: string;\n  /** Max size in pixels for the category axis. Size depends on the position this axis is assigned to \u2013 left axis will use width, bottom axis will use height.\n   *  If there's no enough space for this maxSize, category axis will only take the available space for it.\n   */\n  maxSize?: number;\n}\n\n/**\n * @public\n */\nexport interface CategoricalBarChartValueAxisProps {\n  // Optional axis label\n  label?: string;\n  // Min value to be represented on a value axis\n  min?: number;\n  // Max value to be represented on a value axis\n  max?: number;\n  /**\n   * Handler that is called for every tick value to be formatted.\n   */\n  formatter?: Formatter | FormatOptions<Unit, ConvertibleUnit>;\n  /** The scale of the value axis. */\n  scale?: AxisScaleType;\n}\n\n/**\n * @public\n */\nexport type CategoricalBarChartLegendProps = LegendProps;\n\n/**\n * @internal\n */\nexport type CategoricalValueScales =\n  | ScaleLinear<number, number>\n  | ScaleSymLog<number, number>;\n"],
+  "mappings": "AAuCO,MAAM,gBAAgB,CAAC,cAAc,UAAU;AAU/C,MAAM,mBAAmB,CAAC,WAAW,SAAS;AAU9C,MAAM,wCAAwC;AAAA,EACnD;AAAA,EACA;AACF;",
   "names": []
 }

package/esm/charts/core/components/annotations/AnnotationsAtom.css

@@ -1,3 +1,3 @@
-._145zb630-3-11-2 {
+._145zb630-3-12-0 {
   position: relative;
 }

package/esm/charts/core/components/annotations/AnnotationsAtom.sty.js

@@ -1,5 +1,5 @@
 import "./AnnotationsAtom.css";
-var wrapper = "_145zb630-3-11-2";
+var wrapper = "_145zb630-3-12-0";
 export {
   wrapper
 };

package/esm/charts/core/components/annotations/AnnotationsAtom.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/core/components/annotations/AnnotationsAtom.css.ts"],
-  "sourcesContent": ["import './AnnotationsAtom.css';\nexport var wrapper = '_145zb630-3-11-2';"],
+  "sourcesContent": ["import './AnnotationsAtom.css';\nexport var wrapper = '_145zb630-3-12-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,UAAU;",
   "names": []
 }

package/esm/charts/core/components/annotations/components/canvas/AnnotationsCanvasLayout.css

@@ -1,4 +1,4 @@
-._1yc349j0-3-11-2 {
+._1yc349j0-3-12-0 {
   position: absolute;
   top: 0;
   left: 0;

package/esm/charts/core/components/annotations/components/canvas/AnnotationsCanvasLayout.sty.js

@@ -1,5 +1,5 @@
 import "./AnnotationsCanvasLayout.css";
-var canvasContainer = "_1yc349j0-3-11-2";
+var canvasContainer = "_1yc349j0-3-12-0";
 export {
   canvasContainer
 };

package/esm/charts/core/components/annotations/components/canvas/AnnotationsCanvasLayout.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../src/charts/core/components/annotations/components/canvas/AnnotationsCanvasLayout.css.ts"],
-  "sourcesContent": ["import './AnnotationsCanvasLayout.css';\nexport var canvasContainer = '_1yc349j0-3-11-2';"],
+  "sourcesContent": ["import './AnnotationsCanvasLayout.css';\nexport var canvasContainer = '_1yc349j0-3-12-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,kBAAkB;",
   "names": []
 }

package/esm/charts/core/components/annotations/components/overlays/AnnotationsOverlays.css

@@ -1,4 +1,4 @@
-._107efci0-3-11-2 {
+._107efci0-3-12-0 {
   position: absolute;
   top: 0;
 }

package/esm/charts/core/components/annotations/components/overlays/AnnotationsOverlays.sty.js

@@ -1,5 +1,5 @@
 import "./AnnotationsOverlays.css";
-var annotationsOverlay = "_107efci0-3-11-2";
+var annotationsOverlay = "_107efci0-3-12-0";
 export {
   annotationsOverlay
 };

package/esm/charts/core/components/annotations/components/overlays/AnnotationsOverlays.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../src/charts/core/components/annotations/components/overlays/AnnotationsOverlays.css.ts"],
-  "sourcesContent": ["import './AnnotationsOverlays.css';\nexport var annotationsOverlay = '_107efci0-3-11-2';"],
+  "sourcesContent": ["import './AnnotationsOverlays.css';\nexport var annotationsOverlay = '_107efci0-3-12-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,qBAAqB;",
   "names": []
 }

package/esm/charts/core/components/annotations/components/overlays/AnnotationsScrollWrapper.css

@@ -1,4 +1,4 @@
-._uzgvu30-3-11-2 {
+._uzgvu30-3-12-0 {
   position: relative;
   overflow-x: hidden;
   overflow-y: auto;

package/esm/charts/core/components/annotations/components/overlays/AnnotationsScrollWrapper.sty.js

@@ -1,5 +1,5 @@
 import "./AnnotationsScrollWrapper.css";
-var scrollWrapper = "_uzgvu30-3-11-2";
+var scrollWrapper = "_uzgvu30-3-12-0";
 export {
   scrollWrapper
 };

package/esm/charts/core/components/annotations/components/overlays/AnnotationsScrollWrapper.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../src/charts/core/components/annotations/components/overlays/AnnotationsScrollWrapper.css.ts"],
-  "sourcesContent": ["import './AnnotationsScrollWrapper.css';\nexport var scrollWrapper = '_uzgvu30-3-11-2';"],
+  "sourcesContent": ["import './AnnotationsScrollWrapper.css';\nexport var scrollWrapper = '_uzgvu30-3-12-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,gBAAgB;",
   "names": []
 }

package/esm/charts/core/components/annotations/components/tooltip/AnnotationsOverlayTooltip.js

@@ -4,6 +4,8 @@ import { AnnotationsCustomizedTooltip } from "./AnnotationsCustomizedTooltip.js"
 import { AnnotationsDefaultTooltipContent } from "./AnnotationsDefaultTooltipContent.js";
 import { useAnnotationsTooltipConfig } from "./hooks/useAnnotationsTooltipConfig.js";
 import { OverlayTooltip } from "../../../overlay-tooltip/OverlayTooltip.js";
+import { useDismissAnnotationSignal } from "../../../overlay-tooltip/pinCoordinationSelectors.js";
+import { usePinCoordinationActions } from "../../../overlay-tooltip/usePinCoordinationActions.js";
 import { useTooltipReducer } from "../../../overlay-tooltip/useTooltipReducer.js";
 import { emptyData } from "../../../overlay-tooltip/utils.js";
 import { useAnnotationsTooltipState } from "../../hooks/store/selectors.js";
@@ -35,9 +37,22 @@ const AnnotationsOverlayTooltip = (props) => {
   const hidden = config?.hidden === true;
   const hasData = !!data && data.length > 0 && visibility;
   const prevPinnedRef = useRef(false);
+  const { dismissChartTooltip } = usePinCoordinationActions();
+  const dismissAnnotationAt = useDismissAnnotationSignal();
+  useEffect(() => {
+    if (dismissAnnotationAt === 0) {
+      return;
+    }
+    updateAnnotationsTooltipState(initialState.tooltip);
+    updateAnnotationsSelectionState(initialState.selection);
+    onMarkersInteraction?.(initialState.selection);
+  }, [dismissAnnotationAt]);
   useEffect(() => {
     const wasPinned = prevPinnedRef.current;
     prevPinnedRef.current = pinned;
+    if (!wasPinned && pinned) {
+      dismissChartTooltip();
+    }
     if (wasPinned && !pinned) {
       dispatch({
         type: "SET_PINNED",

package/esm/charts/core/components/annotations/components/tooltip/AnnotationsOverlayTooltip.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../src/charts/core/components/annotations/components/tooltip/AnnotationsOverlayTooltip.tsx"],
-  "sourcesContent": ["import { useEffect, useRef } from 'react';\n\nimport { AnnotationsCustomizedTooltip } from './AnnotationsCustomizedTooltip.js';\nimport { AnnotationsDefaultTooltipContent } from './AnnotationsDefaultTooltipContent.js';\nimport { useAnnotationsTooltipConfig } from './hooks/useAnnotationsTooltipConfig.js';\nimport type { TruncationMode } from '../../../../../../typography/text-ellipsis/TextEllipsis.js';\nimport { OverlayTooltip } from '../../../overlay-tooltip/OverlayTooltip.js';\nimport type { Data } from '../../../overlay-tooltip/types.js';\nimport { useTooltipReducer } from '../../../overlay-tooltip/useTooltipReducer.js';\nimport { emptyData } from '../../../overlay-tooltip/utils.js';\nimport { useAnnotationsTooltipState } from '../../hooks/store/selectors.js';\nimport {\n  useSetStateSelection,\n  useSetStateTooltip,\n} from '../../hooks/store/state-setters.js';\nimport { useMarkersInteractions } from '../../hooks/useMarkersInteractions.js';\nimport { initialState } from '../../providers/AnnotationsDataInitialState.js';\n\ninterface AnnotationsOverlayTooltipProps {\n  tooltipType: 'time' | 'numerical';\n  truncationMode?: TruncationMode;\n  maxLines?: number;\n}\n\n// Sentinel payload used to keep the OverlayTooltip store data non-empty while\n// the annotations tooltip is visible. The actual content is rendered through\n// `template`, so this value is never read by the default tooltip\n// rendering pipeline \u2014 it only has to pass `isTooltipDataEmpty` (geometry !==\n// 'none') so that DynamicTooltipRenderer mounts the portal.\nconst buildSentinelData = (): Data => ({\n  geometry: 'rect',\n  series: [\n    {\n      name: '',\n      value: '',\n      color: '',\n    },\n  ],\n});\n\n/**\n * AnnotationsChart tooltip driven by the shared OverlayTooltip\n * (`TooltipProvider`) store. Bridges the legacy annotations store into the\n * shared store so that positioning, pinning and out-of-bounds handling are\n * identical to XYChart and MeterBar tooltips.\n *\n * The actual UI is rendered via `<OverlayTooltip template={...}/>` so\n * we can keep AnnotationsChart's bespoke layout (multiple Header+Series pairs\n * for collided marker groups, custom user templates, etc.) while reusing the\n * shared portal / pin / dismissal behaviour.\n *\n * @internal\n */\nexport const AnnotationsOverlayTooltip = (\n  props: AnnotationsOverlayTooltipProps,\n) => {\n  const { tooltipType, truncationMode = 'end', maxLines = 1 } = props;\n  const annotationsState = useAnnotationsTooltipState();\n  const { pinned, data, visibility, position } = annotationsState;\n  const dispatch = useTooltipReducer();\n  const updateAnnotationsTooltipState = useSetStateTooltip();\n  const updateAnnotationsSelectionState = useSetStateSelection();\n  const onMarkersInteraction = useMarkersInteractions();\n\n  const config = useAnnotationsTooltipConfig();\n  const hidden = config?.hidden === true;\n  const hasData = !!data && data.length > 0 && visibility;\n\n  // Track the previous pinned state so we can explicitly dispatch\n  // SET_PINNED(false) on a true -> false transition (the reducer's\n  // SET_POSITION/SET_OUT_BOUNDS branches short-circuit while pinned is true).\n  const prevPinnedRef = useRef(false);\n\n  // Sync annotations store into the OverlayTooltip store on changes so that\n  // the shared tooltip portal reflects the current hover/pin state.\n  useEffect(() => {\n    const wasPinned = prevPinnedRef.current;\n    prevPinnedRef.current = pinned;\n\n    if (wasPinned && !pinned) {\n      // Explicit unpin first \u2014 otherwise SET_POSITION / SET_OUT_BOUNDS below\n      // will no-op because the reducer treats `pinned=true` as sticky.\n      dispatch({\n        type: 'SET_PINNED',\n        payload: {\n          pinned: false,\n          data: emptyData(),\n        },\n      })();\n    }\n\n    if (hidden || !hasData || !position) {\n      dispatch({ type: 'SET_OUT_BOUNDS' })();\n      return;\n    }\n\n    if (pinned) {\n      dispatch({\n        type: 'SET_PINNED',\n        payload: {\n          pinned: true,\n          absoluteX: position.x,\n          absoluteY: position.y,\n          data: buildSentinelData(),\n        },\n      })();\n    } else {\n      dispatch({\n        type: 'SET_POSITION',\n        payload: {\n          absoluteX: position.x,\n          absoluteY: position.y,\n          data: buildSentinelData(),\n        },\n      })();\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [hidden, hasData, pinned, position?.x, position?.y]);\n\n  // Reset both the OverlayTooltip and annotations stores on unmount.\n  useEffect(() => {\n    return () => {\n      dispatch({ type: 'RESET_TOOLTIP' })();\n      updateAnnotationsTooltipState(initialState.tooltip);\n      updateAnnotationsSelectionState(initialState.selection);\n      onMarkersInteraction?.(initialState.selection);\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  useEffect(() => {\n    const handleEscape = (event: KeyboardEvent) => {\n      if (event.key !== 'Escape') {\n        return;\n      }\n      updateAnnotationsTooltipState(initialState.tooltip);\n      updateAnnotationsSelectionState(initialState.selection);\n      onMarkersInteraction?.(initialState.selection);\n    };\n    window.addEventListener('keyup', handleEscape);\n    return () => {\n      window.removeEventListener('keyup', handleEscape);\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  if (hidden || !hasData) {\n    return null;\n  }\n\n  const legacyTemplate = config?.template ? (\n    <AnnotationsCustomizedTooltip\n      tooltipTemplate={config.template}\n      data={data}\n    />\n  ) : (\n    <AnnotationsDefaultTooltipContent\n      data={data}\n      tooltipType={tooltipType}\n      truncationMode={truncationMode}\n      maxLines={maxLines}\n    />\n  );\n\n  return <OverlayTooltip template={legacyTemplate} />;\n};\n\nAnnotationsOverlayTooltip.displayName = 'AnnotationsOverlayTooltip';\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { useEffect, useRef } from 'react';\n\nimport { AnnotationsCustomizedTooltip } from './AnnotationsCustomizedTooltip.js';\nimport { AnnotationsDefaultTooltipContent } from './AnnotationsDefaultTooltipContent.js';\nimport { useAnnotationsTooltipConfig } from './hooks/useAnnotationsTooltipConfig.js';\nimport type { TruncationMode } from '../../../../../../typography/text-ellipsis/TextEllipsis.js';\nimport { OverlayTooltip } from '../../../overlay-tooltip/OverlayTooltip.js';\nimport { useDismissAnnotationSignal } from '../../../overlay-tooltip/pinCoordinationSelectors.js';\nimport type { Data } from '../../../overlay-tooltip/types.js';\nimport { usePinCoordinationActions } from '../../../overlay-tooltip/usePinCoordinationActions.js';\nimport { useTooltipReducer } from '../../../overlay-tooltip/useTooltipReducer.js';\nimport { emptyData } from '../../../overlay-tooltip/utils.js';\nimport { useAnnotationsTooltipState } from '../../hooks/store/selectors.js';\nimport {\n  useSetStateSelection,\n  useSetStateTooltip,\n} from '../../hooks/store/state-setters.js';\nimport { useMarkersInteractions } from '../../hooks/useMarkersInteractions.js';\nimport { initialState } from '../../providers/AnnotationsDataInitialState.js';\n\ninterface AnnotationsOverlayTooltipProps {\n  tooltipType: 'time' | 'numerical';\n  truncationMode?: TruncationMode;\n  maxLines?: number;\n}\n\n// Sentinel payload used to keep the OverlayTooltip store data non-empty while\n// the annotations tooltip is visible. The actual content is rendered through\n// `template`, so this value is never read by the default tooltip\n// rendering pipeline \u2014 it only has to pass `isTooltipDataEmpty` (geometry !==\n// 'none') so that DynamicTooltipRenderer mounts the portal.\nconst buildSentinelData = (): Data => ({\n  geometry: 'rect',\n  series: [\n    {\n      name: '',\n      value: '',\n      color: '',\n    },\n  ],\n});\n\n/**\n * AnnotationsChart tooltip driven by the shared OverlayTooltip\n * (`TooltipProvider`) store. Bridges the legacy annotations store into the\n * shared store so that positioning, pinning and out-of-bounds handling are\n * identical to XYChart and MeterBar tooltips.\n *\n * The actual UI is rendered via `<OverlayTooltip template={...}/>` so\n * we can keep AnnotationsChart's bespoke layout (multiple Header+Series pairs\n * for collided marker groups, custom user templates, etc.) while reusing the\n * shared portal / pin / dismissal behaviour.\n *\n * @internal\n */\nexport const AnnotationsOverlayTooltip = (\n  props: AnnotationsOverlayTooltipProps,\n) => {\n  const { tooltipType, truncationMode = 'end', maxLines = 1 } = props;\n  const annotationsState = useAnnotationsTooltipState();\n  const { pinned, data, visibility, position } = annotationsState;\n  const dispatch = useTooltipReducer();\n  const updateAnnotationsTooltipState = useSetStateTooltip();\n  const updateAnnotationsSelectionState = useSetStateSelection();\n  const onMarkersInteraction = useMarkersInteractions();\n\n  const config = useAnnotationsTooltipConfig();\n  const hidden = config?.hidden === true;\n  const hasData = !!data && data.length > 0 && visibility;\n\n  // Track the previous pinned state so we can explicitly dispatch\n  // SET_PINNED(false) on a true -> false transition (the reducer's\n  // SET_POSITION/SET_OUT_BOUNDS branches short-circuit while pinned is true).\n  const prevPinnedRef = useRef(false);\n\n  const { dismissChartTooltip } = usePinCoordinationActions();\n\n  // Subscribe to the chart-level \"dismiss annotation\" signal.\n  const dismissAnnotationAt = useDismissAnnotationSignal();\n\n  useEffect(() => {\n    if (dismissAnnotationAt === 0) {\n      return;\n    }\n    updateAnnotationsTooltipState(initialState.tooltip);\n    updateAnnotationsSelectionState(initialState.selection);\n    onMarkersInteraction?.(initialState.selection);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [dismissAnnotationAt]);\n\n  // Sync annotations store into the OverlayTooltip store on changes so that\n  // the shared tooltip portal reflects the current hover/pin state.\n  useEffect(() => {\n    const wasPinned = prevPinnedRef.current;\n    prevPinnedRef.current = pinned;\n\n    if (!wasPinned && pinned) {\n      // Annotation just took the pin \u2014 tell the chart's own tooltip to\n      // release its pin, if any.\n      dismissChartTooltip();\n    }\n\n    if (wasPinned && !pinned) {\n      // Explicit unpin first \u2014 otherwise SET_POSITION / SET_OUT_BOUNDS below\n      // will no-op because the reducer treats `pinned=true` as sticky.\n      dispatch({\n        type: 'SET_PINNED',\n        payload: {\n          pinned: false,\n          data: emptyData(),\n        },\n      })();\n    }\n\n    if (hidden || !hasData || !position) {\n      dispatch({ type: 'SET_OUT_BOUNDS' })();\n      return;\n    }\n\n    if (pinned) {\n      dispatch({\n        type: 'SET_PINNED',\n        payload: {\n          pinned: true,\n          absoluteX: position.x,\n          absoluteY: position.y,\n          data: buildSentinelData(),\n        },\n      })();\n    } else {\n      dispatch({\n        type: 'SET_POSITION',\n        payload: {\n          absoluteX: position.x,\n          absoluteY: position.y,\n          data: buildSentinelData(),\n        },\n      })();\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [hidden, hasData, pinned, position?.x, position?.y]);\n\n  // Reset both the OverlayTooltip and annotations stores on unmount.\n  useEffect(() => {\n    return () => {\n      dispatch({ type: 'RESET_TOOLTIP' })();\n      updateAnnotationsTooltipState(initialState.tooltip);\n      updateAnnotationsSelectionState(initialState.selection);\n      onMarkersInteraction?.(initialState.selection);\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  useEffect(() => {\n    const handleEscape = (event: KeyboardEvent) => {\n      if (event.key !== 'Escape') {\n        return;\n      }\n      updateAnnotationsTooltipState(initialState.tooltip);\n      updateAnnotationsSelectionState(initialState.selection);\n      onMarkersInteraction?.(initialState.selection);\n    };\n    window.addEventListener('keyup', handleEscape);\n    return () => {\n      window.removeEventListener('keyup', handleEscape);\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  if (hidden || !hasData) {\n    return null;\n  }\n\n  const legacyTemplate = config?.template ? (\n    <AnnotationsCustomizedTooltip\n      tooltipTemplate={config.template}\n      data={data}\n    />\n  ) : (\n    <AnnotationsDefaultTooltipContent\n      data={data}\n      tooltipType={tooltipType}\n      truncationMode={truncationMode}\n      maxLines={maxLines}\n    />\n  );\n\n  return <OverlayTooltip template={legacyTemplate} />;\n};\n\nAnnotationsOverlayTooltip.displayName = 'AnnotationsOverlayTooltip';\n"],
+  "mappings": "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",
   "names": []
 }

package/esm/charts/core/components/annotations/hooks/useMarkerEventHandlers.js

@@ -54,22 +54,24 @@ const useMarkerEventHandlers = (annotationsContainerRef) => {
     onMarkersInteraction?.(selectionState);
   };
   const applyPinToggle = (clientX, clientY, groupId, annotationsGroup) => {
-    if (isTooltipPinned && isTouchableDevice()) {
+    const isSameAnnotationPinned = pinnedGroup === groupId;
+    if (isSameAnnotationPinned && isTouchableDevice()) {
       updateTooltipState(initialState.tooltip);
       updateTooltipSelection(initialState.selection);
       onMarkersInteraction?.(initialState.selection);
       return;
     }
+    const shouldPin = !isSameAnnotationPinned;
     const newSelection = {
       hoveredGroup: groupId,
       data: annotationsGroup,
-      pinnedGroup: isTooltipPinned ? void 0 : groupId
+      pinnedGroup: shouldPin ? groupId : void 0
     };
     updateTooltipState({
       position: calculateTooltipPosition(clientX, clientY),
       data: annotationsGroup,
       visibility: true,
-      pinned: !isTooltipPinned
+      pinned: shouldPin
     });
     updateTooltipSelection(newSelection);
     onMarkersInteraction?.(newSelection);

package/esm/charts/core/components/annotations/hooks/useMarkerEventHandlers.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/core/components/annotations/hooks/useMarkerEventHandlers.ts"],
-  "sourcesContent": ["import { isUndefined } from 'lodash-es';\nimport type { MouseEvent as ReactMouseEvent, RefObject } from 'react';\n\nimport { useAnnotationsSelectionState } from './store/selectors.js';\nimport {\n  useSetStateSelection,\n  useSetStateTooltip,\n} from './store/state-setters.js';\nimport { useMarkersInteractions } from './useMarkersInteractions.js';\nimport { isTouchableDevice } from '../../../utils/is-touchable-device.js';\nimport { initialState } from '../providers/AnnotationsDataInitialState.js';\nimport type { AnnotationsMarkerGroup } from '../types/annotations.js';\nimport type { MarkerClickCoords } from '../types/marker.js';\nimport type { SelectionState } from '../types/state.js';\nimport { calculateTooltipPosition } from '../utils/calculate-tooltip-position.js';\n\nexport const useMarkerEventHandlers = (\n  annotationsContainerRef: RefObject<HTMLDivElement | null> | undefined,\n) => {\n  const updateTooltipState = useSetStateTooltip();\n  const updateTooltipSelection = useSetStateSelection();\n\n  const { pinnedGroup } = useAnnotationsSelectionState();\n  const onMarkersInteraction = useMarkersInteractions();\n\n  const isTooltipPinned = !isUndefined(pinnedGroup);\n  const handleMouseMove = (event: ReactMouseEvent) => {\n    if (isTooltipPinned || !annotationsContainerRef?.current) {\n      return;\n    }\n\n    const { clientX, clientY } = event;\n    const absolutePosition = calculateTooltipPosition(clientX, clientY);\n    const annotationsContainerRect =\n      annotationsContainerRef.current.getBoundingClientRect();\n    updateTooltipState({\n      position: absolutePosition,\n      relativePosition: {\n        x: absolutePosition.x - annotationsContainerRect.left,\n        y: absolutePosition.y - annotationsContainerRect.top,\n      },\n    });\n  };\n\n  const handleMouseEnter =\n    (\n      markerId: string,\n      groupId: string,\n      annotationsGroup: AnnotationsMarkerGroup[],\n    ) =>\n    (event: ReactMouseEvent) => {\n      if (isTooltipPinned || !annotationsContainerRef?.current) {\n        return;\n      }\n\n      const { clientX, clientY } = event;\n      const absolutePosition = calculateTooltipPosition(clientX, clientY);\n      const annotationsContainerRect =\n        annotationsContainerRef.current.getBoundingClientRect();\n      updateTooltipState({\n        position: absolutePosition,\n        relativePosition: {\n          x: absolutePosition.x - annotationsContainerRect.left,\n          y: absolutePosition.y - annotationsContainerRect.top,\n        },\n        data: annotationsGroup,\n        visibility: true,\n      });\n\n      const selectionState: SelectionState = {\n        hoveredItem: markerId,\n        hoveredGroup: groupId,\n        data: annotationsGroup,\n      };\n\n      updateTooltipSelection(selectionState);\n      onMarkersInteraction?.(selectionState);\n    };\n\n  const applyPinToggle = (\n    clientX: number,\n    clientY: number,\n    groupId: string,\n    annotationsGroup: AnnotationsMarkerGroup[],\n  ) => {\n    if (isTooltipPinned && isTouchableDevice()) {\n      updateTooltipState(initialState.tooltip);\n      updateTooltipSelection(initialState.selection);\n      onMarkersInteraction?.(initialState.selection);\n      return;\n    }\n\n    const newSelection = {\n      hoveredGroup: groupId,\n      data: annotationsGroup,\n      pinnedGroup: isTooltipPinned ? undefined : groupId,\n    };\n    updateTooltipState({\n      position: calculateTooltipPosition(clientX, clientY),\n      data: annotationsGroup,\n      visibility: true,\n      pinned: !isTooltipPinned,\n    });\n    updateTooltipSelection(newSelection);\n    onMarkersInteraction?.(newSelection);\n  };\n\n  const handleClick =\n    (groupId: string, annotationsGroup: AnnotationsMarkerGroup[]) =>\n    (event: MarkerClickCoords) => {\n      event.stopPropagation();\n      applyPinToggle(event.clientX, event.clientY, groupId, annotationsGroup);\n    };\n\n  const handleMouseLeave = () => {\n    if (isTooltipPinned) {\n      return;\n    }\n\n    updateTooltipState(initialState.tooltip);\n    updateTooltipSelection(initialState.selection);\n    onMarkersInteraction?.(initialState.selection);\n  };\n\n  return {\n    handleMouseEnter,\n    handleMouseMove,\n    handleMouseLeave,\n    handleClick,\n  };\n};\n"],
-  "mappings": "AAAA,SAAS,mBAAmB;AAG5B,SAAS,oCAAoC;AAC7C;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,SAAS,8BAA8B;AACvC,SAAS,yBAAyB;AAClC,SAAS,oBAAoB;AAI7B,SAAS,gCAAgC;AAElC,MAAM,yBAAyB,CACpC,4BACG;AACH,QAAM,qBAAqB,mBAAmB;AAC9C,QAAM,yBAAyB,qBAAqB;AAEpD,QAAM,EAAE,YAAY,IAAI,6BAA6B;AACrD,QAAM,uBAAuB,uBAAuB;AAEpD,QAAM,kBAAkB,CAAC,YAAY,WAAW;AAChD,QAAM,kBAAkB,CAAC,UAA2B;AAClD,QAAI,mBAAmB,CAAC,yBAAyB,SAAS;AACxD;AAAA,IACF;AAEA,UAAM,EAAE,SAAS,QAAQ,IAAI;AAC7B,UAAM,mBAAmB,yBAAyB,SAAS,OAAO;AAClE,UAAM,2BACJ,wBAAwB,QAAQ,sBAAsB;AACxD,uBAAmB;AAAA,MACjB,UAAU;AAAA,MACV,kBAAkB;AAAA,QAChB,GAAG,iBAAiB,IAAI,yBAAyB;AAAA,QACjD,GAAG,iBAAiB,IAAI,yBAAyB;AAAA,MACnD;AAAA,IACF,CAAC;AAAA,EACH;AAEA,QAAM,mBACJ,CACE,UACA,SACA,qBAEF,CAAC,UAA2B;AAC1B,QAAI,mBAAmB,CAAC,yBAAyB,SAAS;AACxD;AAAA,IACF;AAEA,UAAM,EAAE,SAAS,QAAQ,IAAI;AAC7B,UAAM,mBAAmB,yBAAyB,SAAS,OAAO;AAClE,UAAM,2BACJ,wBAAwB,QAAQ,sBAAsB;AACxD,uBAAmB;AAAA,MACjB,UAAU;AAAA,MACV,kBAAkB;AAAA,QAChB,GAAG,iBAAiB,IAAI,yBAAyB;AAAA,QACjD,GAAG,iBAAiB,IAAI,yBAAyB;AAAA,MACnD;AAAA,MACA,MAAM;AAAA,MACN,YAAY;AAAA,IACd,CAAC;AAED,UAAM,iBAAiC;AAAA,MACrC,aAAa;AAAA,MACb,cAAc;AAAA,MACd,MAAM;AAAA,IACR;AAEA,2BAAuB,cAAc;AACrC,2BAAuB,cAAc;AAAA,EACvC;AAEF,QAAM,iBAAiB,CACrB,SACA,SACA,SACA,qBACG;AACH,QAAI,mBAAmB,kBAAkB,GAAG;AAC1C,yBAAmB,aAAa,OAAO;AACvC,6BAAuB,aAAa,SAAS;AAC7C,6BAAuB,aAAa,SAAS;AAC7C;AAAA,IACF;AAEA,UAAM,eAAe;AAAA,MACnB,cAAc;AAAA,MACd,MAAM;AAAA,MACN,aAAa,kBAAkB,SAAY;AAAA,IAC7C;AACA,uBAAmB;AAAA,MACjB,UAAU,yBAAyB,SAAS,OAAO;AAAA,MACnD,MAAM;AAAA,MACN,YAAY;AAAA,MACZ,QAAQ,CAAC;AAAA,IACX,CAAC;AACD,2BAAuB,YAAY;AACnC,2BAAuB,YAAY;AAAA,EACrC;AAEA,QAAM,cACJ,CAAC,SAAiB,qBAClB,CAAC,UAA6B;AAC5B,UAAM,gBAAgB;AACtB,mBAAe,MAAM,SAAS,MAAM,SAAS,SAAS,gBAAgB;AAAA,EACxE;AAEF,QAAM,mBAAmB,MAAM;AAC7B,QAAI,iBAAiB;AACnB;AAAA,IACF;AAEA,uBAAmB,aAAa,OAAO;AACvC,2BAAuB,aAAa,SAAS;AAC7C,2BAAuB,aAAa,SAAS;AAAA,EAC/C;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
+  "sourcesContent": ["import { isUndefined } from 'lodash-es';\nimport type { MouseEvent as ReactMouseEvent, RefObject } from 'react';\n\nimport { useAnnotationsSelectionState } from './store/selectors.js';\nimport {\n  useSetStateSelection,\n  useSetStateTooltip,\n} from './store/state-setters.js';\nimport { useMarkersInteractions } from './useMarkersInteractions.js';\nimport { isTouchableDevice } from '../../../utils/is-touchable-device.js';\nimport { initialState } from '../providers/AnnotationsDataInitialState.js';\nimport type { AnnotationsMarkerGroup } from '../types/annotations.js';\nimport type { MarkerClickCoords } from '../types/marker.js';\nimport type { SelectionState } from '../types/state.js';\nimport { calculateTooltipPosition } from '../utils/calculate-tooltip-position.js';\n\nexport const useMarkerEventHandlers = (\n  annotationsContainerRef: RefObject<HTMLDivElement | null> | undefined,\n) => {\n  const updateTooltipState = useSetStateTooltip();\n  const updateTooltipSelection = useSetStateSelection();\n\n  const { pinnedGroup } = useAnnotationsSelectionState();\n  const onMarkersInteraction = useMarkersInteractions();\n\n  const isTooltipPinned = !isUndefined(pinnedGroup);\n  const handleMouseMove = (event: ReactMouseEvent) => {\n    if (isTooltipPinned || !annotationsContainerRef?.current) {\n      return;\n    }\n\n    const { clientX, clientY } = event;\n    const absolutePosition = calculateTooltipPosition(clientX, clientY);\n    const annotationsContainerRect =\n      annotationsContainerRef.current.getBoundingClientRect();\n    updateTooltipState({\n      position: absolutePosition,\n      relativePosition: {\n        x: absolutePosition.x - annotationsContainerRect.left,\n        y: absolutePosition.y - annotationsContainerRect.top,\n      },\n    });\n  };\n\n  const handleMouseEnter =\n    (\n      markerId: string,\n      groupId: string,\n      annotationsGroup: AnnotationsMarkerGroup[],\n    ) =>\n    (event: ReactMouseEvent) => {\n      if (isTooltipPinned || !annotationsContainerRef?.current) {\n        return;\n      }\n\n      const { clientX, clientY } = event;\n      const absolutePosition = calculateTooltipPosition(clientX, clientY);\n      const annotationsContainerRect =\n        annotationsContainerRef.current.getBoundingClientRect();\n      updateTooltipState({\n        position: absolutePosition,\n        relativePosition: {\n          x: absolutePosition.x - annotationsContainerRect.left,\n          y: absolutePosition.y - annotationsContainerRect.top,\n        },\n        data: annotationsGroup,\n        visibility: true,\n      });\n\n      const selectionState: SelectionState = {\n        hoveredItem: markerId,\n        hoveredGroup: groupId,\n        data: annotationsGroup,\n      };\n\n      updateTooltipSelection(selectionState);\n      onMarkersInteraction?.(selectionState);\n    };\n\n  const applyPinToggle = (\n    clientX: number,\n    clientY: number,\n    groupId: string,\n    annotationsGroup: AnnotationsMarkerGroup[],\n  ) => {\n    // Clicking the same pinned annotation toggles it off; clicking a different\n    // annotation while one is pinned pins the new one and releases the old.\n    const isSameAnnotationPinned = pinnedGroup === groupId;\n\n    if (isSameAnnotationPinned && isTouchableDevice()) {\n      updateTooltipState(initialState.tooltip);\n      updateTooltipSelection(initialState.selection);\n      onMarkersInteraction?.(initialState.selection);\n      return;\n    }\n\n    const shouldPin = !isSameAnnotationPinned;\n    const newSelection = {\n      hoveredGroup: groupId,\n      data: annotationsGroup,\n      pinnedGroup: shouldPin ? groupId : undefined,\n    };\n    updateTooltipState({\n      position: calculateTooltipPosition(clientX, clientY),\n      data: annotationsGroup,\n      visibility: true,\n      pinned: shouldPin,\n    });\n    updateTooltipSelection(newSelection);\n    onMarkersInteraction?.(newSelection);\n  };\n\n  const handleClick =\n    (groupId: string, annotationsGroup: AnnotationsMarkerGroup[]) =>\n    (event: MarkerClickCoords) => {\n      event.stopPropagation();\n      applyPinToggle(event.clientX, event.clientY, groupId, annotationsGroup);\n    };\n\n  const handleMouseLeave = () => {\n    if (isTooltipPinned) {\n      return;\n    }\n\n    updateTooltipState(initialState.tooltip);\n    updateTooltipSelection(initialState.selection);\n    onMarkersInteraction?.(initialState.selection);\n  };\n\n  return {\n    handleMouseEnter,\n    handleMouseMove,\n    handleMouseLeave,\n    handleClick,\n  };\n};\n"],
+  "mappings": "AAAA,SAAS,mBAAmB;AAG5B,SAAS,oCAAoC;AAC7C;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,SAAS,8BAA8B;AACvC,SAAS,yBAAyB;AAClC,SAAS,oBAAoB;AAI7B,SAAS,gCAAgC;AAElC,MAAM,yBAAyB,CACpC,4BACG;AACH,QAAM,qBAAqB,mBAAmB;AAC9C,QAAM,yBAAyB,qBAAqB;AAEpD,QAAM,EAAE,YAAY,IAAI,6BAA6B;AACrD,QAAM,uBAAuB,uBAAuB;AAEpD,QAAM,kBAAkB,CAAC,YAAY,WAAW;AAChD,QAAM,kBAAkB,CAAC,UAA2B;AAClD,QAAI,mBAAmB,CAAC,yBAAyB,SAAS;AACxD;AAAA,IACF;AAEA,UAAM,EAAE,SAAS,QAAQ,IAAI;AAC7B,UAAM,mBAAmB,yBAAyB,SAAS,OAAO;AAClE,UAAM,2BACJ,wBAAwB,QAAQ,sBAAsB;AACxD,uBAAmB;AAAA,MACjB,UAAU;AAAA,MACV,kBAAkB;AAAA,QAChB,GAAG,iBAAiB,IAAI,yBAAyB;AAAA,QACjD,GAAG,iBAAiB,IAAI,yBAAyB;AAAA,MACnD;AAAA,IACF,CAAC;AAAA,EACH;AAEA,QAAM,mBACJ,CACE,UACA,SACA,qBAEF,CAAC,UAA2B;AAC1B,QAAI,mBAAmB,CAAC,yBAAyB,SAAS;AACxD;AAAA,IACF;AAEA,UAAM,EAAE,SAAS,QAAQ,IAAI;AAC7B,UAAM,mBAAmB,yBAAyB,SAAS,OAAO;AAClE,UAAM,2BACJ,wBAAwB,QAAQ,sBAAsB;AACxD,uBAAmB;AAAA,MACjB,UAAU;AAAA,MACV,kBAAkB;AAAA,QAChB,GAAG,iBAAiB,IAAI,yBAAyB;AAAA,QACjD,GAAG,iBAAiB,IAAI,yBAAyB;AAAA,MACnD;AAAA,MACA,MAAM;AAAA,MACN,YAAY;AAAA,IACd,CAAC;AAED,UAAM,iBAAiC;AAAA,MACrC,aAAa;AAAA,MACb,cAAc;AAAA,MACd,MAAM;AAAA,IACR;AAEA,2BAAuB,cAAc;AACrC,2BAAuB,cAAc;AAAA,EACvC;AAEF,QAAM,iBAAiB,CACrB,SACA,SACA,SACA,qBACG;AAGH,UAAM,yBAAyB,gBAAgB;AAE/C,QAAI,0BAA0B,kBAAkB,GAAG;AACjD,yBAAmB,aAAa,OAAO;AACvC,6BAAuB,aAAa,SAAS;AAC7C,6BAAuB,aAAa,SAAS;AAC7C;AAAA,IACF;AAEA,UAAM,YAAY,CAAC;AACnB,UAAM,eAAe;AAAA,MACnB,cAAc;AAAA,MACd,MAAM;AAAA,MACN,aAAa,YAAY,UAAU;AAAA,IACrC;AACA,uBAAmB;AAAA,MACjB,UAAU,yBAAyB,SAAS,OAAO;AAAA,MACnD,MAAM;AAAA,MACN,YAAY;AAAA,MACZ,QAAQ;AAAA,IACV,CAAC;AACD,2BAAuB,YAAY;AACnC,2BAAuB,YAAY;AAAA,EACrC;AAEA,QAAM,cACJ,CAAC,SAAiB,qBAClB,CAAC,UAA6B;AAC5B,UAAM,gBAAgB;AACtB,mBAAe,MAAM,SAAS,MAAM,SAAS,SAAS,gBAAgB;AAAA,EACxE;AAEF,QAAM,mBAAmB,MAAM;AAC7B,QAAI,iBAAiB;AACnB;AAAA,IACF;AAEA,uBAAmB,aAAa,OAAO;AACvC,2BAAuB,aAAa,SAAS;AAC7C,2BAAuB,aAAa,SAAS;AAAA,EAC/C;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
   "names": []
 }

package/esm/charts/core/components/annotations/hooks/useOverlayEvents.js

@@ -1,10 +1,17 @@
-import { noop } from "lodash-es";
+import { isUndefined, noop } from "lodash-es";
 import {
   useContext
 } from "react";
+import { useAnnotationsSelectionState } from "./store/selectors.js";
+import {
+  useSetStateSelection,
+  useSetStateTooltip
+} from "./store/state-setters.js";
 import { useAnnotationsHandlers } from "./useAnnotationsHandlers.js";
+import { useMarkersInteractions } from "./useMarkersInteractions.js";
 import { TRACK_HEIGHT } from "../constants.js";
 import { MarkerCoordinatesContext } from "../contexts/MarkerCoordinates.context.js";
+import { initialState } from "../providers/AnnotationsDataInitialState.js";
 import { inMarkerBounds } from "../utils/in-marker-bounds.js";
 const useOverlayEvents = () => {
   const markerCoordsPerTrack = useContext(MarkerCoordinatesContext);
@@ -18,6 +25,10 @@ const useOverlayEvents = () => {
     currentHoveredTrack,
     currentHoveredMarker
   } = useAnnotationsHandlers();
+  const { pinnedGroup } = useAnnotationsSelectionState();
+  const updateTooltipState = useSetStateTooltip();
+  const updateTooltipSelection = useSetStateSelection();
+  const onMarkersInteraction = useMarkersInteractions();
   const handleMouseMove = (e) => {
     const { clientX, clientY, currentTarget } = e;
     const { top, left } = currentTarget.getBoundingClientRect();
@@ -53,6 +64,12 @@ const useOverlayEvents = () => {
   const handleClick = (e) => {
     if (currentHoveredMarker.current !== void 0) {
       clickMarker(e, currentHoveredMarker.current);
+      return;
+    }
+    if (!isUndefined(pinnedGroup)) {
+      updateTooltipState(initialState.tooltip);
+      updateTooltipSelection(initialState.selection);
+      onMarkersInteraction?.(initialState.selection);
     }
   };
   const handleTouchEnd = (e) => {

package/esm/charts/core/components/annotations/hooks/useOverlayEvents.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/core/components/annotations/hooks/useOverlayEvents.ts"],
-  "sourcesContent": ["import { noop } from 'lodash-es';\nimport {\n  useContext,\n  type MouseEvent as ReactMouseEvent,\n  type PointerEvent as ReactPointerEvent,\n  type TouchEvent as ReactTouchEvent,\n} from 'react';\n\nimport { useAnnotationsHandlers } from './useAnnotationsHandlers.js';\nimport { TRACK_HEIGHT } from '../constants.js';\nimport { MarkerCoordinatesContext } from '../contexts/MarkerCoordinates.context.js';\nimport { inMarkerBounds } from '../utils/in-marker-bounds.js';\n\nexport const useOverlayEvents = () => {\n  const markerCoordsPerTrack = useContext(MarkerCoordinatesContext);\n\n  const {\n    hoverTrack,\n    blurTrack,\n    hoverMarker,\n    blurMarker,\n    clickMarker,\n    clearHovered,\n    currentHoveredTrack,\n    currentHoveredMarker,\n  } = useAnnotationsHandlers();\n\n  const handleMouseMove = (e: ReactMouseEvent) => {\n    const { clientX, clientY, currentTarget } = e;\n    const { top, left } = (currentTarget as Element).getBoundingClientRect();\n\n    const mousePosition = {\n      x: clientX - left,\n      y: clientY - top,\n    };\n\n    let trackIndex = Math.max(0, Math.floor(mousePosition.y / TRACK_HEIGHT));\n\n    if (trackIndex !== currentHoveredTrack.current) {\n      hoverTrack(e, trackIndex);\n    }\n\n    if (markerCoordsPerTrack !== undefined && markerCoordsPerTrack.length > 0) {\n      let isHoveringMarker = false;\n\n      if (trackIndex >= markerCoordsPerTrack.length) {\n        trackIndex = markerCoordsPerTrack.length - 1;\n      }\n\n      const markerCoords = markerCoordsPerTrack[trackIndex];\n\n      // start from the end of the array to look first for the markers that are rendered on top\n      for (\n        let markerIndex = markerCoords.length - 1;\n        markerIndex >= 0;\n        markerIndex--\n      ) {\n        const marker = markerCoords[markerIndex];\n\n        if (inMarkerBounds(mousePosition, trackIndex, marker)) {\n          const markerId = `${trackIndex}_${marker.join('_')}`;\n\n          hoverMarker(e, markerId);\n\n          isHoveringMarker = true;\n          break;\n        }\n      }\n\n      // no marker found at the given mouse position\n      if (!isHoveringMarker && currentHoveredMarker.current !== undefined) {\n        blurMarker(currentHoveredMarker.current);\n        // hover the track back when leaving the marker\n        hoverTrack(e, trackIndex);\n      }\n    }\n  };\n\n  const handleClick = (e: ReactMouseEvent) => {\n    if (currentHoveredMarker.current !== undefined) {\n      clickMarker(e, currentHoveredMarker.current);\n    }\n  };\n\n  // On iOS, touchstart causes the toolbar to appear and the browser suppresses the\n  // subsequent synthetic click. touchend fires before synthetic mousemove so\n  // currentHoveredMarker is not yet set \u2014 hit detection is required here.\n  // preventDefault() suppresses the synthetic click on subsequent taps to prevent\n  // double-toggling the pin.\n  const handleTouchEnd = (e: ReactTouchEvent<HTMLDivElement>) => {\n    const touch = e.changedTouches[0];\n    if (!touch || !markerCoordsPerTrack || markerCoordsPerTrack.length === 0) {\n      return;\n    }\n\n    const { clientX, clientY } = touch;\n    const { top, left } = (e.currentTarget as Element).getBoundingClientRect();\n    const mousePosition = { x: clientX - left, y: clientY - top };\n\n    let trackIndex = Math.max(0, Math.floor(mousePosition.y / TRACK_HEIGHT));\n    if (trackIndex >= markerCoordsPerTrack.length) {\n      trackIndex = markerCoordsPerTrack.length - 1;\n    }\n\n    const markerCoords = markerCoordsPerTrack[trackIndex];\n    for (\n      let markerIndex = markerCoords.length - 1;\n      markerIndex >= 0;\n      markerIndex--\n    ) {\n      const marker = markerCoords[markerIndex];\n      if (inMarkerBounds(mousePosition, trackIndex, marker)) {\n        if (e.cancelable) {\n          e.preventDefault();\n        }\n        // stopPropagation is a no-op here: preventDefault() above already suppresses the synthetic click.\n        clickMarker(\n          { clientX, clientY, stopPropagation: noop },\n          `${trackIndex}_${marker.join('_')}`,\n        );\n        return;\n      }\n    }\n  };\n\n  // Without this guard, pointerleave on finger-lift fires blurMarker before React\n  // re-renders, hiding the tooltip that handleTouchEnd just pinned.\n  // clearHovered() resets the tracked state so a subsequent mouse hover over the\n  // same marker triggers onMouseEnter (visibility) rather than onMouseMove (position only).\n  const handlePointerLeave = (e: ReactPointerEvent<HTMLDivElement>) => {\n    if (e.pointerType === 'touch') {\n      clearHovered();\n      return;\n    }\n\n    if (currentHoveredTrack.current !== undefined) {\n      blurTrack();\n    }\n\n    if (currentHoveredMarker.current !== undefined) {\n      blurMarker(currentHoveredMarker.current);\n    }\n  };\n\n  return {\n    handleMouseMove,\n    handleClick,\n    handleTouchEnd,\n    handlePointerLeave,\n  };\n};\n"],
-  "mappings": "AAAA,SAAS,YAAY;AACrB;AAAA,EACE;AAAA,OAIK;AAEP,SAAS,8BAA8B;AACvC,SAAS,oBAAoB;AAC7B,SAAS,gCAAgC;AACzC,SAAS,sBAAsB;AAExB,MAAM,mBAAmB,MAAM;AACpC,QAAM,uBAAuB,WAAW,wBAAwB;AAEhE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,uBAAuB;AAE3B,QAAM,kBAAkB,CAAC,MAAuB;AAC9C,UAAM,EAAE,SAAS,SAAS,cAAc,IAAI;AAC5C,UAAM,EAAE,KAAK,KAAK,IAAK,cAA0B,sBAAsB;AAEvE,UAAM,gBAAgB;AAAA,MACpB,GAAG,UAAU;AAAA,MACb,GAAG,UAAU;AAAA,IACf;AAEA,QAAI,aAAa,KAAK,IAAI,GAAG,KAAK,MAAM,cAAc,IAAI,YAAY,CAAC;AAEvE,QAAI,eAAe,oBAAoB,SAAS;AAC9C,iBAAW,GAAG,UAAU;AAAA,IAC1B;AAEA,QAAI,yBAAyB,UAAa,qBAAqB,SAAS,GAAG;AACzE,UAAI,mBAAmB;AAEvB,UAAI,cAAc,qBAAqB,QAAQ;AAC7C,qBAAa,qBAAqB,SAAS;AAAA,MAC7C;AAEA,YAAM,eAAe,qBAAqB,UAAU;AAGpD,eACM,cAAc,aAAa,SAAS,GACxC,eAAe,GACf,eACA;AACA,cAAM,SAAS,aAAa,WAAW;AAEvC,YAAI,eAAe,eAAe,YAAY,MAAM,GAAG;AACrD,gBAAM,WAAW,GAAG,UAAU,IAAI,OAAO,KAAK,GAAG,CAAC;AAElD,sBAAY,GAAG,QAAQ;AAEvB,6BAAmB;AACnB;AAAA,QACF;AAAA,MACF;AAGA,UAAI,CAAC,oBAAoB,qBAAqB,YAAY,QAAW;AACnE,mBAAW,qBAAqB,OAAO;AAEvC,mBAAW,GAAG,UAAU;AAAA,MAC1B;AAAA,IACF;AAAA,EACF;AAEA,QAAM,cAAc,CAAC,MAAuB;AAC1C,QAAI,qBAAqB,YAAY,QAAW;AAC9C,kBAAY,GAAG,qBAAqB,OAAO;AAAA,IAC7C;AAAA,EACF;AAOA,QAAM,iBAAiB,CAAC,MAAuC;AAC7D,UAAM,QAAQ,EAAE,eAAe,CAAC;AAChC,QAAI,CAAC,SAAS,CAAC,wBAAwB,qBAAqB,WAAW,GAAG;AACxE;AAAA,IACF;AAEA,UAAM,EAAE,SAAS,QAAQ,IAAI;AAC7B,UAAM,EAAE,KAAK,KAAK,IAAK,EAAE,cAA0B,sBAAsB;AACzE,UAAM,gBAAgB,EAAE,GAAG,UAAU,MAAM,GAAG,UAAU,IAAI;AAE5D,QAAI,aAAa,KAAK,IAAI,GAAG,KAAK,MAAM,cAAc,IAAI,YAAY,CAAC;AACvE,QAAI,cAAc,qBAAqB,QAAQ;AAC7C,mBAAa,qBAAqB,SAAS;AAAA,IAC7C;AAEA,UAAM,eAAe,qBAAqB,UAAU;AACpD,aACM,cAAc,aAAa,SAAS,GACxC,eAAe,GACf,eACA;AACA,YAAM,SAAS,aAAa,WAAW;AACvC,UAAI,eAAe,eAAe,YAAY,MAAM,GAAG;AACrD,YAAI,EAAE,YAAY;AAChB,YAAE,eAAe;AAAA,QACnB;AAEA;AAAA,UACE,EAAE,SAAS,SAAS,iBAAiB,KAAK;AAAA,UAC1C,GAAG,UAAU,IAAI,OAAO,KAAK,GAAG,CAAC;AAAA,QACnC;AACA;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAMA,QAAM,qBAAqB,CAAC,MAAyC;AACnE,QAAI,EAAE,gBAAgB,SAAS;AAC7B,mBAAa;AACb;AAAA,IACF;AAEA,QAAI,oBAAoB,YAAY,QAAW;AAC7C,gBAAU;AAAA,IACZ;AAEA,QAAI,qBAAqB,YAAY,QAAW;AAC9C,iBAAW,qBAAqB,OAAO;AAAA,IACzC;AAAA,EACF;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
+  "sourcesContent": ["import { isUndefined, noop } from 'lodash-es';\nimport {\n  useContext,\n  type MouseEvent as ReactMouseEvent,\n  type PointerEvent as ReactPointerEvent,\n  type TouchEvent as ReactTouchEvent,\n} from 'react';\n\nimport { useAnnotationsSelectionState } from './store/selectors.js';\nimport {\n  useSetStateSelection,\n  useSetStateTooltip,\n} from './store/state-setters.js';\nimport { useAnnotationsHandlers } from './useAnnotationsHandlers.js';\nimport { useMarkersInteractions } from './useMarkersInteractions.js';\nimport { TRACK_HEIGHT } from '../constants.js';\nimport { MarkerCoordinatesContext } from '../contexts/MarkerCoordinates.context.js';\nimport { initialState } from '../providers/AnnotationsDataInitialState.js';\nimport { inMarkerBounds } from '../utils/in-marker-bounds.js';\n\nexport const useOverlayEvents = () => {\n  const markerCoordsPerTrack = useContext(MarkerCoordinatesContext);\n\n  const {\n    hoverTrack,\n    blurTrack,\n    hoverMarker,\n    blurMarker,\n    clickMarker,\n    clearHovered,\n    currentHoveredTrack,\n    currentHoveredMarker,\n  } = useAnnotationsHandlers();\n\n  const { pinnedGroup } = useAnnotationsSelectionState();\n  const updateTooltipState = useSetStateTooltip();\n  const updateTooltipSelection = useSetStateSelection();\n  const onMarkersInteraction = useMarkersInteractions();\n\n  const handleMouseMove = (e: ReactMouseEvent) => {\n    const { clientX, clientY, currentTarget } = e;\n    const { top, left } = (currentTarget as Element).getBoundingClientRect();\n\n    const mousePosition = {\n      x: clientX - left,\n      y: clientY - top,\n    };\n\n    let trackIndex = Math.max(0, Math.floor(mousePosition.y / TRACK_HEIGHT));\n\n    if (trackIndex !== currentHoveredTrack.current) {\n      hoverTrack(e, trackIndex);\n    }\n\n    if (markerCoordsPerTrack !== undefined && markerCoordsPerTrack.length > 0) {\n      let isHoveringMarker = false;\n\n      if (trackIndex >= markerCoordsPerTrack.length) {\n        trackIndex = markerCoordsPerTrack.length - 1;\n      }\n\n      const markerCoords = markerCoordsPerTrack[trackIndex];\n\n      // start from the end of the array to look first for the markers that are rendered on top\n      for (\n        let markerIndex = markerCoords.length - 1;\n        markerIndex >= 0;\n        markerIndex--\n      ) {\n        const marker = markerCoords[markerIndex];\n\n        if (inMarkerBounds(mousePosition, trackIndex, marker)) {\n          const markerId = `${trackIndex}_${marker.join('_')}`;\n\n          hoverMarker(e, markerId);\n\n          isHoveringMarker = true;\n          break;\n        }\n      }\n\n      // no marker found at the given mouse position\n      if (!isHoveringMarker && currentHoveredMarker.current !== undefined) {\n        blurMarker(currentHoveredMarker.current);\n        // hover the track back when leaving the marker\n        hoverTrack(e, trackIndex);\n      }\n    }\n  };\n\n  const handleClick = (e: ReactMouseEvent) => {\n    if (currentHoveredMarker.current !== undefined) {\n      clickMarker(e, currentHoveredMarker.current);\n      return;\n    }\n\n    // Click landed inside the annotations track but not on a marker \u2014\n    // dismiss any pinned annotation tooltip.\n    if (!isUndefined(pinnedGroup)) {\n      updateTooltipState(initialState.tooltip);\n      updateTooltipSelection(initialState.selection);\n      onMarkersInteraction?.(initialState.selection);\n    }\n  };\n\n  // On iOS, touchstart causes the toolbar to appear and the browser suppresses the\n  // subsequent synthetic click. touchend fires before synthetic mousemove so\n  // currentHoveredMarker is not yet set \u2014 hit detection is required here.\n  // preventDefault() suppresses the synthetic click on subsequent taps to prevent\n  // double-toggling the pin.\n  const handleTouchEnd = (e: ReactTouchEvent<HTMLDivElement>) => {\n    const touch = e.changedTouches[0];\n    if (!touch || !markerCoordsPerTrack || markerCoordsPerTrack.length === 0) {\n      return;\n    }\n\n    const { clientX, clientY } = touch;\n    const { top, left } = (e.currentTarget as Element).getBoundingClientRect();\n    const mousePosition = { x: clientX - left, y: clientY - top };\n\n    let trackIndex = Math.max(0, Math.floor(mousePosition.y / TRACK_HEIGHT));\n    if (trackIndex >= markerCoordsPerTrack.length) {\n      trackIndex = markerCoordsPerTrack.length - 1;\n    }\n\n    const markerCoords = markerCoordsPerTrack[trackIndex];\n    for (\n      let markerIndex = markerCoords.length - 1;\n      markerIndex >= 0;\n      markerIndex--\n    ) {\n      const marker = markerCoords[markerIndex];\n      if (inMarkerBounds(mousePosition, trackIndex, marker)) {\n        if (e.cancelable) {\n          e.preventDefault();\n        }\n        // stopPropagation is a no-op here: preventDefault() above already suppresses the synthetic click.\n        clickMarker(\n          { clientX, clientY, stopPropagation: noop },\n          `${trackIndex}_${marker.join('_')}`,\n        );\n        return;\n      }\n    }\n  };\n\n  // Without this guard, pointerleave on finger-lift fires blurMarker before React\n  // re-renders, hiding the tooltip that handleTouchEnd just pinned.\n  // clearHovered() resets the tracked state so a subsequent mouse hover over the\n  // same marker triggers onMouseEnter (visibility) rather than onMouseMove (position only).\n  const handlePointerLeave = (e: ReactPointerEvent<HTMLDivElement>) => {\n    if (e.pointerType === 'touch') {\n      clearHovered();\n      return;\n    }\n\n    if (currentHoveredTrack.current !== undefined) {\n      blurTrack();\n    }\n\n    if (currentHoveredMarker.current !== undefined) {\n      blurMarker(currentHoveredMarker.current);\n    }\n  };\n\n  return {\n    handleMouseMove,\n    handleClick,\n    handleTouchEnd,\n    handlePointerLeave,\n  };\n};\n"],
+  "mappings": "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",
   "names": []
 }

package/esm/charts/core/components/axes/Axis.css

@@ -1,4 +1,4 @@
-._90oaxp0-3-11-2 {
+._90oaxp0-3-12-0 {
   display: block;
   overflow: visible;
 }

package/esm/charts/core/components/axes/Axis.sty.js

@@ -1,5 +1,5 @@
 import "./Axis.css";
-var axis = "_90oaxp0-3-11-2";
+var axis = "_90oaxp0-3-12-0";
 export {
   axis
 };

package/esm/charts/core/components/axes/Axis.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/core/components/axes/Axis.css.ts"],
-  "sourcesContent": ["import './Axis.css';\nexport var axis = '_90oaxp0-3-11-2';"],
+  "sourcesContent": ["import './Axis.css';\nexport var axis = '_90oaxp0-3-12-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,OAAO;",
   "names": []
 }

package/esm/charts/core/components/axes/components/PanningControls/PanningControls.css

@@ -1,4 +1,4 @@
-@keyframes _3rbllj2-3-11-2 {
+@keyframes _3rbllj2-3-12-0 {
   0% {
     transform: translateX(-4px);
     opacity: 0.2;
@@ -8,7 +8,7 @@
     opacity: 1;
   }
 }
-@keyframes _3rbllj3-3-11-2 {
+@keyframes _3rbllj3-3-12-0 {
   0% {
     transform: translateX(4px);
     opacity: 0.2;
@@ -18,7 +18,7 @@
     opacity: 1;
   }
 }
-._3rbllj4-3-11-2 {
+._3rbllj4-3-12-0 {
   opacity: 0;
   height: 100%;
   position: absolute;
@@ -34,29 +34,29 @@
   animation-delay: 0.2s;
   animation-fill-mode: forwards;
 }
-._3rbllj5-3-11-2 {
+._3rbllj5-3-12-0 {
   left: 0;
-  animation-name: _3rbllj2-3-11-2;
+  animation-name: _3rbllj2-3-12-0;
 }
-._3rbllj6-3-11-2 {
+._3rbllj6-3-12-0 {
   right: 0;
-  animation-name: _3rbllj3-3-11-2;
+  animation-name: _3rbllj3-3-12-0;
 }
-._3rbllj7-3-11-2 {
+._3rbllj7-3-12-0 {
   color: var(--dt-colors-icon-neutral-subdued, #595a7d);
 }
-._3rbllj7-3-11-2:hover {
+._3rbllj7-3-12-0:hover {
   color: var(--dt-colors-icon-neutral-subdued-hover, #434465);
 }
-._3rbllj7-3-11-2:active {
+._3rbllj7-3-12-0:active {
   color: var(--dt-colors-icon-neutral-subdued-active, #2f2f4f);
 }
-._3rbllj5-3-11-2 ~ div {
-  --_3rbllj0-3-11-2: rgba(0, 0, 0, 0) 12px, rgba(0, 0, 0, 1) 40px;
+._3rbllj5-3-12-0 ~ div {
+  --_3rbllj0-3-12-0: rgba(0, 0, 0, 0) 12px, rgba(0, 0, 0, 1) 40px;
 }
-._3rbllj6-3-11-2 ~ div {
-  --_3rbllj1-3-11-2: rgba(0, 0, 0, 1) calc(100% - 40px), rgba(0, 0, 0, 0) calc(100% - 12px);
+._3rbllj6-3-12-0 ~ div {
+  --_3rbllj1-3-12-0: rgba(0, 0, 0, 1) calc(100% - 40px), rgba(0, 0, 0, 0) calc(100% - 12px);
 }
-._3rbllj4-3-11-2 ~ div {
-  mask: linear-gradient(90deg, var(--_3rbllj0-3-11-2, rgba(0,0,0,1) 0%), var(--_3rbllj1-3-11-2, rgba(0,0,0,1) 0%));
+._3rbllj4-3-12-0 ~ div {
+  mask: linear-gradient(90deg, var(--_3rbllj0-3-12-0, rgba(0,0,0,1) 0%), var(--_3rbllj1-3-12-0, rgba(0,0,0,1) 0%));
 }