@dynatrace/strato-components 3.11.3 → 3.12.1

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

@@ -1,7 +1,7 @@
 import "./PanningControls.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var panningArrow = "_3rbllj7-3-11-3";
-var panningButtons = _7a468({ defaultClassName: "_3rbllj4-3-11-3", variantClassNames: { direction: { toLeft: "_3rbllj5-3-11-3", toRight: "_3rbllj6-3-11-3" } }, defaultVariants: {}, compoundVariants: [] });
+var panningArrow = "_3rbllj7-3-12-1";
+var panningButtons = _7a468({ defaultClassName: "_3rbllj4-3-12-1", variantClassNames: { direction: { toLeft: "_3rbllj5-3-12-1", toRight: "_3rbllj6-3-12-1" } }, defaultVariants: {}, compoundVariants: [] });
 export {
   panningArrow,
   panningButtons

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../src/charts/core/components/axes/components/PanningControls/PanningControls.css.ts"],
-  "sourcesContent": ["import './PanningControls.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var panningArrow = '_3rbllj7-3-11-3';\nexport var panningButtons = _7a468({defaultClassName:'_3rbllj4-3-11-3',variantClassNames:{direction:{toLeft:'_3rbllj5-3-11-3',toRight:'_3rbllj6-3-11-3'}},defaultVariants:{},compoundVariants:[]});"],
+  "sourcesContent": ["import './PanningControls.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var panningArrow = '_3rbllj7-3-12-1';\nexport var panningButtons = _7a468({defaultClassName:'_3rbllj4-3-12-1',variantClassNames:{direction:{toLeft:'_3rbllj5-3-12-1',toRight:'_3rbllj6-3-12-1'}},defaultVariants:{},compoundVariants:[]});"],
   "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,eAAe;AACnB,IAAI,iBAAiB,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,WAAU,EAAC,QAAO,mBAAkB,SAAQ,kBAAiB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;",
   "names": []
 }

package/esm/charts/core/components/chart-grid/ChartGrid.css

@@ -1,13 +1,13 @@
-._13lzg4k0-3-11-3 {
+._13lzg4k0-3-12-1 {
   position: absolute;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
 }
-._13lzg4k1-3-11-3 {
+._13lzg4k1-3-12-1 {
   box-sizing: content-box;
 }
-._13lzg4k2-3-11-3 {
+._13lzg4k2-3-12-1 {
   position: relative;
 }

package/esm/charts/core/components/chart-grid/ChartGrid.sty.js

@@ -1,7 +1,7 @@
 import "./ChartGrid.css";
-var area = "_13lzg4k1-3-11-3";
-var plot = "_13lzg4k2-3-11-3";
-var plotLayout = "_13lzg4k0-3-11-3";
+var area = "_13lzg4k1-3-12-1";
+var plot = "_13lzg4k2-3-12-1";
+var plotLayout = "_13lzg4k0-3-12-1";
 export {
   area,
   plot,

package/esm/charts/core/components/chart-grid/ChartGrid.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/core/components/chart-grid/ChartGrid.css.ts"],
-  "sourcesContent": ["import './ChartGrid.css';\nexport var area = '_13lzg4k1-3-11-3';\nexport var plot = '_13lzg4k2-3-11-3';\nexport var plotLayout = '_13lzg4k0-3-11-3';"],
+  "sourcesContent": ["import './ChartGrid.css';\nexport var area = '_13lzg4k1-3-12-1';\nexport var plot = '_13lzg4k2-3-12-1';\nexport var plotLayout = '_13lzg4k0-3-12-1';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,OAAO;AACX,IAAI,OAAO;AACX,IAAI,aAAa;",
   "names": []
 }

package/esm/charts/core/components/chart-layout/ChartLayout.js

@@ -1,6 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import {
   forwardRef,
+  useCallback,
   useImperativeHandle,
   useRef
 } from "react";
@@ -75,6 +76,13 @@ const ChartLayoutRoot = forwardRef((props, forwardedRef) => {
     internalRatioRef.current = initialRatio ?? ratio;
   }
   const legendRatio = internalRatioRef.current ?? ratio;
+  const handleRatioChange = useCallback(
+    (newRatio) => {
+      internalRatioRef.current = newRatio;
+      onResize?.(newRatio);
+    },
+    [onResize]
+  );
   const {
     legendCandidateSize,
     readyForAutoRatio,
@@ -147,7 +155,7 @@ const ChartLayoutRoot = forwardRef((props, forwardedRef) => {
                   children: /* @__PURE__ */ jsx(Provider2, { children: /* @__PURE__ */ jsx(
                     ResizableChartLayout,
                     {
-                      onResize,
+                      onResize: handleRatioChange,
                       showResizer,
                       showLegend: !hidden
                     }

package/esm/charts/core/components/chart-layout/ChartLayout.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/core/components/chart-layout/ChartLayout.tsx"],
-  "sourcesContent": ["import {\n  forwardRef,\n  type PropsWithChildren,\n  useImperativeHandle,\n  useRef,\n} from 'react';\n\nimport { LayoutStateHandler } from './components/LayoutStateHandler.js';\nimport { ResizableChartLayout } from './components/ResizableChartLayout.js';\nimport { ChartLayoutOrientationContext } from './context/ChartLayoutOrientation.context.js';\nimport { ChartLayoutRatioContext } from './context/ChartLayoutRatio.context.js';\nimport { ChartLayoutSizeContext } from './context/ChartLayoutSize.context.js';\nimport { ChartLayoutTemplateContext } from './context/ChartLayoutTemplate.context.js';\nimport { useAutomaticRatio } from './hooks/useAutomaticRatio.js';\nimport { Graph } from './slots/Graph.js';\nimport { Legend } from './slots/Legend.js';\nimport { Provider } from './slots/Provider.js';\nimport type { ChartLayoutProps } from './types/chart-layout.js';\nimport { ChartLayoutRef } from './types/chart-layout.js';\nimport { getChartLayoutSettings } from './utils/get-chart-layout-settings.js';\nimport { getLayoutGridSettings } from './utils/get-layout-grid-settings.js';\nimport { useBehavioralTrackingProps } from '../../../../core/hooks/useBehavioralTrackingProps.js';\nimport { useMergeRefs } from '../../../../core/hooks/useMergeRefs.js';\nimport { Grid } from '../../../../layouts/grid/Grid.js';\nimport { DataDtrumContext } from '../../context/DataDtrumContext.js';\nimport { useObserveContainerSize } from '../../hooks/useObserveContainerSize.js';\nimport type { LegendRatio } from '../../types/legend.js';\n\nexport const ChartLayoutRoot = forwardRef<\n  ChartLayoutRef | null,\n  PropsWithChildren<ChartLayoutProps>\n>((props, forwardedRef) => {\n  const {\n    chartHeight,\n    chartWidth,\n    children,\n    isEmpty = false,\n    emptyState,\n    errorState,\n    showLoader = false,\n    className,\n    style,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    'data-testid': dataTestId = 'chart-layout',\n    'data-dt-component': dataDtComponent,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n    'aria-describedby': ariaDescribedBy,\n    'aria-details': ariaDetails,\n    role,\n  } = props;\n  const [behavioralTrackingProps] = useBehavioralTrackingProps(props);\n  const [containerSizes, gridContainer] = useObserveContainerSize();\n\n  const containerAvailableArea = {\n    width: containerSizes.width,\n    height: containerSizes.height,\n    wrapperHeight: containerSizes.wrapperHeight,\n  };\n\n  const chartLayoutRef = useRef<HTMLDivElement>(null);\n  const mergedRefs = useMergeRefs<HTMLDivElement>([\n    gridContainer,\n    chartLayoutRef,\n  ]);\n\n  const {\n    graphArea,\n    legendArea,\n    legendSettings,\n    provider: Provider,\n  } = getChartLayoutSettings(containerSizes, children, isEmpty);\n\n  const {\n    hidden,\n    orientation,\n    ratio,\n    initialRatio,\n    overrideRatio,\n    onResize,\n    showResizer,\n    ratioBoundaries,\n  } = legendSettings;\n\n  const internalRatioRef = useRef<LegendRatio | undefined>(undefined);\n\n  if (internalRatioRef.current === undefined && legendArea !== undefined) {\n    internalRatioRef.current = initialRatio ?? ratio;\n  }\n\n  const legendRatio = internalRatioRef.current ?? ratio;\n\n  const {\n    legendCandidateSize,\n    readyForAutoRatio,\n    legendRef,\n    refreshAutoRatio,\n  } = useAutomaticRatio(orientation, legendRatio, containerAvailableArea);\n\n  const { layoutWidth, layoutHeight, templateAreas, gridTemplate } =\n    getLayoutGridSettings(\n      chartWidth,\n      chartHeight,\n      containerSizes,\n      !hidden,\n      showResizer,\n    );\n\n  useImperativeHandle(\n    forwardedRef,\n    (): ChartLayoutRef => ({\n      element: chartLayoutRef?.current,\n      refreshLegendSize: refreshAutoRatio,\n    }),\n  );\n\n  return (\n    <ChartLayoutTemplateContext.Provider value={{ graphArea, legendArea }}>\n      <ChartLayoutOrientationContext.Provider value={{ orientation }}>\n        <ChartLayoutRatioContext.Provider\n          value={{\n            legendRef,\n            ratio: legendRatio,\n            ratioBoundaries,\n            overrideRatio,\n            readyForAutoRatio,\n            legendCandidateSize,\n          }}\n        >\n          <ChartLayoutSizeContext.Provider value={containerAvailableArea}>\n            <DataDtrumContext.Provider\n              value={{ dataDtrumAllow, dataDtrumMask }}\n            >\n              <Grid\n                {...behavioralTrackingProps}\n                data-testid={dataTestId}\n                data-dtrum-mask={dataDtrumMask}\n                data-dtrum-allow={dataDtrumAllow}\n                data-dt-component={dataDtComponent}\n                className={className}\n                width={layoutWidth}\n                height={layoutHeight}\n                ref={mergedRefs}\n                gridTemplateColumns={gridTemplate}\n                gridTemplateRows={gridTemplate}\n                gridTemplateAreas={templateAreas}\n                gap={0}\n                aria-label={ariaLabel}\n                aria-labelledby={ariaLabelledBy}\n                aria-describedby={ariaDescribedBy}\n                aria-details={ariaDetails}\n                role={role}\n                style={{\n                  position: 'relative',\n                  overflow: 'hidden',\n                  ...style,\n                }}\n              >\n                <LayoutStateHandler\n                  empty={isEmpty}\n                  height={layoutHeight}\n                  emptyState={emptyState}\n                  errorState={errorState}\n                  showLoader={showLoader}\n                >\n                  <Provider>\n                    <ResizableChartLayout\n                      onResize={onResize}\n                      showResizer={showResizer}\n                      showLegend={!hidden}\n                    />\n                  </Provider>\n                </LayoutStateHandler>\n              </Grid>\n            </DataDtrumContext.Provider>\n          </ChartLayoutSizeContext.Provider>\n        </ChartLayoutRatioContext.Provider>\n      </ChartLayoutOrientationContext.Provider>\n    </ChartLayoutTemplateContext.Provider>\n  );\n});\n\n(\n  ChartLayoutRoot as typeof ChartLayoutRoot & { displayName: string }\n).displayName = 'ChartLayoutRoot';\n\n/**\n * Slot component for Chart Layout\n * @internal\n */\nexport const ChartLayout = Object.assign(ChartLayoutRoot, {\n  Graph,\n  Legend,\n  Provider,\n});\n"],
-  "mappings": "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",
+  "sourcesContent": ["import {\n  forwardRef,\n  type PropsWithChildren,\n  useCallback,\n  useImperativeHandle,\n  useRef,\n} from 'react';\n\nimport { LayoutStateHandler } from './components/LayoutStateHandler.js';\nimport { ResizableChartLayout } from './components/ResizableChartLayout.js';\nimport { ChartLayoutOrientationContext } from './context/ChartLayoutOrientation.context.js';\nimport { ChartLayoutRatioContext } from './context/ChartLayoutRatio.context.js';\nimport { ChartLayoutSizeContext } from './context/ChartLayoutSize.context.js';\nimport { ChartLayoutTemplateContext } from './context/ChartLayoutTemplate.context.js';\nimport { useAutomaticRatio } from './hooks/useAutomaticRatio.js';\nimport { Graph } from './slots/Graph.js';\nimport { Legend } from './slots/Legend.js';\nimport { Provider } from './slots/Provider.js';\nimport type { ChartLayoutProps } from './types/chart-layout.js';\nimport { ChartLayoutRef } from './types/chart-layout.js';\nimport { getChartLayoutSettings } from './utils/get-chart-layout-settings.js';\nimport { getLayoutGridSettings } from './utils/get-layout-grid-settings.js';\nimport { useBehavioralTrackingProps } from '../../../../core/hooks/useBehavioralTrackingProps.js';\nimport { useMergeRefs } from '../../../../core/hooks/useMergeRefs.js';\nimport { Grid } from '../../../../layouts/grid/Grid.js';\nimport { DataDtrumContext } from '../../context/DataDtrumContext.js';\nimport { useObserveContainerSize } from '../../hooks/useObserveContainerSize.js';\nimport type { LegendRatio } from '../../types/legend.js';\n\nexport const ChartLayoutRoot = forwardRef<\n  ChartLayoutRef | null,\n  PropsWithChildren<ChartLayoutProps>\n>((props, forwardedRef) => {\n  const {\n    chartHeight,\n    chartWidth,\n    children,\n    isEmpty = false,\n    emptyState,\n    errorState,\n    showLoader = false,\n    className,\n    style,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    'data-testid': dataTestId = 'chart-layout',\n    'data-dt-component': dataDtComponent,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n    'aria-describedby': ariaDescribedBy,\n    'aria-details': ariaDetails,\n    role,\n  } = props;\n  const [behavioralTrackingProps] = useBehavioralTrackingProps(props);\n  const [containerSizes, gridContainer] = useObserveContainerSize();\n\n  const containerAvailableArea = {\n    width: containerSizes.width,\n    height: containerSizes.height,\n    wrapperHeight: containerSizes.wrapperHeight,\n  };\n\n  const chartLayoutRef = useRef<HTMLDivElement>(null);\n  const mergedRefs = useMergeRefs<HTMLDivElement>([\n    gridContainer,\n    chartLayoutRef,\n  ]);\n\n  const {\n    graphArea,\n    legendArea,\n    legendSettings,\n    provider: Provider,\n  } = getChartLayoutSettings(containerSizes, children, isEmpty);\n\n  const {\n    hidden,\n    orientation,\n    ratio,\n    initialRatio,\n    overrideRatio,\n    onResize,\n    showResizer,\n    ratioBoundaries,\n  } = legendSettings;\n\n  const internalRatioRef = useRef<LegendRatio | undefined>(undefined);\n\n  if (internalRatioRef.current === undefined && legendArea !== undefined) {\n    internalRatioRef.current = initialRatio ?? ratio;\n  }\n\n  const legendRatio = internalRatioRef.current ?? ratio;\n\n  const handleRatioChange = useCallback(\n    (newRatio: number) => {\n      internalRatioRef.current = newRatio;\n      onResize?.(newRatio);\n    },\n    [onResize],\n  );\n\n  const {\n    legendCandidateSize,\n    readyForAutoRatio,\n    legendRef,\n    refreshAutoRatio,\n  } = useAutomaticRatio(orientation, legendRatio, containerAvailableArea);\n\n  const { layoutWidth, layoutHeight, templateAreas, gridTemplate } =\n    getLayoutGridSettings(\n      chartWidth,\n      chartHeight,\n      containerSizes,\n      !hidden,\n      showResizer,\n    );\n\n  useImperativeHandle(\n    forwardedRef,\n    (): ChartLayoutRef => ({\n      element: chartLayoutRef?.current,\n      refreshLegendSize: refreshAutoRatio,\n    }),\n  );\n\n  return (\n    <ChartLayoutTemplateContext.Provider value={{ graphArea, legendArea }}>\n      <ChartLayoutOrientationContext.Provider value={{ orientation }}>\n        <ChartLayoutRatioContext.Provider\n          value={{\n            legendRef,\n            ratio: legendRatio,\n            ratioBoundaries,\n            overrideRatio,\n            readyForAutoRatio,\n            legendCandidateSize,\n          }}\n        >\n          <ChartLayoutSizeContext.Provider value={containerAvailableArea}>\n            <DataDtrumContext.Provider\n              value={{ dataDtrumAllow, dataDtrumMask }}\n            >\n              <Grid\n                {...behavioralTrackingProps}\n                data-testid={dataTestId}\n                data-dtrum-mask={dataDtrumMask}\n                data-dtrum-allow={dataDtrumAllow}\n                data-dt-component={dataDtComponent}\n                className={className}\n                width={layoutWidth}\n                height={layoutHeight}\n                ref={mergedRefs}\n                gridTemplateColumns={gridTemplate}\n                gridTemplateRows={gridTemplate}\n                gridTemplateAreas={templateAreas}\n                gap={0}\n                aria-label={ariaLabel}\n                aria-labelledby={ariaLabelledBy}\n                aria-describedby={ariaDescribedBy}\n                aria-details={ariaDetails}\n                role={role}\n                style={{\n                  position: 'relative',\n                  overflow: 'hidden',\n                  ...style,\n                }}\n              >\n                <LayoutStateHandler\n                  empty={isEmpty}\n                  height={layoutHeight}\n                  emptyState={emptyState}\n                  errorState={errorState}\n                  showLoader={showLoader}\n                >\n                  <Provider>\n                    <ResizableChartLayout\n                      onResize={handleRatioChange}\n                      showResizer={showResizer}\n                      showLegend={!hidden}\n                    />\n                  </Provider>\n                </LayoutStateHandler>\n              </Grid>\n            </DataDtrumContext.Provider>\n          </ChartLayoutSizeContext.Provider>\n        </ChartLayoutRatioContext.Provider>\n      </ChartLayoutOrientationContext.Provider>\n    </ChartLayoutTemplateContext.Provider>\n  );\n});\n\n(\n  ChartLayoutRoot as typeof ChartLayoutRoot & { displayName: string }\n).displayName = 'ChartLayoutRoot';\n\n/**\n * Slot component for Chart Layout\n * @internal\n */\nexport const ChartLayout = Object.assign(ChartLayoutRoot, {\n  Graph,\n  Legend,\n  Provider,\n});\n"],
+  "mappings": "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",
   "names": ["Provider"]
 }

package/esm/charts/core/components/chart-layout/components/styles.css

@@ -1,46 +1,46 @@
-._l1klj80-3-11-3 {
+._l1klj80-3-12-1 {
   min-width: 0;
   grid-area: graphArea;
 }
-._l1klj81-3-11-3 {
+._l1klj81-3-12-1 {
   filter: opacity(40%);
   pointer-events: none;
 }
-._l1klj83-3-11-3 {
+._l1klj83-3-12-1 {
   height: inherit;
   grid-area: horizontalResize;
 }
-._l1klj84-3-11-3 {
+._l1klj84-3-12-1 {
   width: 100%;
   grid-area: verticalResize;
 }
-._l1klj85-3-11-3 {
+._l1klj85-3-12-1 {
   filter: opacity(40%);
   pointer-events: none;
 }
-._l1klj86-3-11-3 {
+._l1klj86-3-12-1 {
   height: 100%;
 }
-._l1klj87-3-11-3 {
+._l1klj87-3-12-1 {
   grid-area: verticalLegend;
 }
-._l1klj88-3-11-3 {
+._l1klj88-3-12-1 {
   grid-area: horizontalLegend;
 }
-._l1klj89-3-11-3 {
+._l1klj89-3-12-1 {
   filter: opacity(40%);
   pointer-events: none;
 }
-._l1klj8a-3-11-3 {
+._l1klj8a-3-12-1 {
   background: var(--dt-colors-border-neutral-default, #dadbe4);
   background-color: var(--dt-colors-border-neutral-accent, #595a7d);
   border-radius: var(--dt-spacings-size-8, 8px);
   touch-action: none;
 }
-._l1klj8a-3-11-3:hover {
+._l1klj8a-3-12-1:hover {
   background: var(--dt-colors-border-primary-accent, #464cce);
 }
-._l1klj8b-3-11-3 {
+._l1klj8b-3-12-1 {
   transition: height var(--dt-timings-base-default, 300ms) var(--dt-easings-fast-in-slow-out, cubic-bezier(0.4, 0, 0.2, 1));
   height: 36px;
   width: 2px;
@@ -49,11 +49,11 @@
   grid-area: horizontalResize;
   align-self: center;
 }
-._l1klj8b-3-11-3:hover {
+._l1klj8b-3-12-1:hover {
   height: var(--dt-spacings-size-48, 48px);
   background-color: var(--dt-colors-border-neutral-accent-hover, #434465);
 }
-._l1klj8c-3-11-3 {
+._l1klj8c-3-12-1 {
   transition: width var(--dt-timings-base-default, 300ms) var(--dt-easings-fast-in-slow-out, cubic-bezier(0.4, 0, 0.2, 1));
   height: 2px;
   width: 36px;
@@ -62,7 +62,7 @@
   grid-area: verticalResize;
   align-self: flex-end;
 }
-._l1klj8c-3-11-3:hover {
+._l1klj8c-3-12-1:hover {
   width: var(--dt-spacings-size-48, 48px);
   background-color: var(--dt-colors-border-neutral-accent-hover, #434465);
 }

package/esm/charts/core/components/chart-layout/components/styles.sty.js

@@ -1,9 +1,9 @@
 import "./styles.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var graphContainer = _7a468({ defaultClassName: "_l1klj80-3-11-3", variantClassNames: { loading: { true: "_l1klj81-3-11-3" } }, defaultVariants: {}, compoundVariants: [] });
-var legendContainer = _7a468({ defaultClassName: "_l1klj86-3-11-3", variantClassNames: { orientation: { horizontal: "_l1klj87-3-11-3", vertical: "_l1klj88-3-11-3" }, loading: { true: "_l1klj89-3-11-3" } }, defaultVariants: {}, compoundVariants: [] });
-var legendResizeLine = _7a468({ defaultClassName: "_l1klj8a-3-11-3", variantClassNames: { orientation: { horizontal: "_l1klj8b-3-11-3", vertical: "_l1klj8c-3-11-3" } }, defaultVariants: {}, compoundVariants: [] });
-var resizeContainer = _7a468({ defaultClassName: "_l1klj82-3-11-3", variantClassNames: { orientation: { horizontal: "_l1klj83-3-11-3", vertical: "_l1klj84-3-11-3" }, loading: { true: "_l1klj85-3-11-3" } }, defaultVariants: {}, compoundVariants: [] });
+var graphContainer = _7a468({ defaultClassName: "_l1klj80-3-12-1", variantClassNames: { loading: { true: "_l1klj81-3-12-1" } }, defaultVariants: {}, compoundVariants: [] });
+var legendContainer = _7a468({ defaultClassName: "_l1klj86-3-12-1", variantClassNames: { orientation: { horizontal: "_l1klj87-3-12-1", vertical: "_l1klj88-3-12-1" }, loading: { true: "_l1klj89-3-12-1" } }, defaultVariants: {}, compoundVariants: [] });
+var legendResizeLine = _7a468({ defaultClassName: "_l1klj8a-3-12-1", variantClassNames: { orientation: { horizontal: "_l1klj8b-3-12-1", vertical: "_l1klj8c-3-12-1" } }, defaultVariants: {}, compoundVariants: [] });
+var resizeContainer = _7a468({ defaultClassName: "_l1klj82-3-12-1", variantClassNames: { orientation: { horizontal: "_l1klj83-3-12-1", vertical: "_l1klj84-3-12-1" }, loading: { true: "_l1klj85-3-12-1" } }, defaultVariants: {}, compoundVariants: [] });
 export {
   graphContainer,
   legendContainer,

package/esm/charts/core/components/chart-layout/components/styles.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/core/components/chart-layout/components/styles.css.ts"],
-  "sourcesContent": ["import './styles.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var graphContainer = _7a468({defaultClassName:'_l1klj80-3-11-3',variantClassNames:{loading:{true:'_l1klj81-3-11-3'}},defaultVariants:{},compoundVariants:[]});\nexport var legendContainer = _7a468({defaultClassName:'_l1klj86-3-11-3',variantClassNames:{orientation:{horizontal:'_l1klj87-3-11-3',vertical:'_l1klj88-3-11-3'},loading:{true:'_l1klj89-3-11-3'}},defaultVariants:{},compoundVariants:[]});\nexport var legendResizeLine = _7a468({defaultClassName:'_l1klj8a-3-11-3',variantClassNames:{orientation:{horizontal:'_l1klj8b-3-11-3',vertical:'_l1klj8c-3-11-3'}},defaultVariants:{},compoundVariants:[]});\nexport var resizeContainer = _7a468({defaultClassName:'_l1klj82-3-11-3',variantClassNames:{orientation:{horizontal:'_l1klj83-3-11-3',vertical:'_l1klj84-3-11-3'},loading:{true:'_l1klj85-3-11-3'}},defaultVariants:{},compoundVariants:[]});"],
+  "sourcesContent": ["import './styles.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var graphContainer = _7a468({defaultClassName:'_l1klj80-3-12-1',variantClassNames:{loading:{true:'_l1klj81-3-12-1'}},defaultVariants:{},compoundVariants:[]});\nexport var legendContainer = _7a468({defaultClassName:'_l1klj86-3-12-1',variantClassNames:{orientation:{horizontal:'_l1klj87-3-12-1',vertical:'_l1klj88-3-12-1'},loading:{true:'_l1klj89-3-12-1'}},defaultVariants:{},compoundVariants:[]});\nexport var legendResizeLine = _7a468({defaultClassName:'_l1klj8a-3-12-1',variantClassNames:{orientation:{horizontal:'_l1klj8b-3-12-1',vertical:'_l1klj8c-3-12-1'}},defaultVariants:{},compoundVariants:[]});\nexport var resizeContainer = _7a468({defaultClassName:'_l1klj82-3-12-1',variantClassNames:{orientation:{horizontal:'_l1klj83-3-12-1',vertical:'_l1klj84-3-12-1'},loading:{true:'_l1klj85-3-12-1'}},defaultVariants:{},compoundVariants:[]});"],
   "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,iBAAiB,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,SAAQ,EAAC,MAAK,kBAAiB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AAC5J,IAAI,kBAAkB,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,aAAY,EAAC,YAAW,mBAAkB,UAAS,kBAAiB,GAAE,SAAQ,EAAC,MAAK,kBAAiB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AACnO,IAAI,mBAAmB,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,aAAY,EAAC,YAAW,mBAAkB,UAAS,kBAAiB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AACnM,IAAI,kBAAkB,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,aAAY,EAAC,YAAW,mBAAkB,UAAS,kBAAiB,GAAE,SAAQ,EAAC,MAAK,kBAAiB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;",
   "names": []
 }

package/esm/charts/core/components/chart-layout/utils/calculate-graph-size.js

@@ -1,4 +1,4 @@
-const calculateGraphSize = (containerSize, legendSize, resizerWrapperSize) => containerSize - resizerWrapperSize - legendSize;
+const calculateGraphSize = (containerSize, legendSize, resizerWrapperSize) => Math.max(0, containerSize - resizerWrapperSize - legendSize);
 export {
   calculateGraphSize
 };

package/esm/charts/core/components/chart-layout/utils/calculate-graph-size.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/core/components/chart-layout/utils/calculate-graph-size.ts"],
-  "sourcesContent": ["export const calculateGraphSize = (\n  containerSize: number,\n  legendSize: number,\n  resizerWrapperSize: number,\n) => containerSize - resizerWrapperSize - legendSize;\n"],
-  "mappings": "AAAO,MAAM,qBAAqB,CAChC,eACA,YACA,uBACG,gBAAgB,qBAAqB;",
+  "sourcesContent": ["export const calculateGraphSize = (\n  containerSize: number,\n  legendSize: number,\n  resizerWrapperSize: number,\n) => Math.max(0, containerSize - resizerWrapperSize - legendSize);\n"],
+  "mappings": "AAAO,MAAM,qBAAqB,CAChC,eACA,YACA,uBACG,KAAK,IAAI,GAAG,gBAAgB,qBAAqB,UAAU;",
   "names": []
 }

package/esm/charts/core/components/chart-states/ChartState.css

@@ -1,16 +1,16 @@
-._4pqs4v0-3-11-3 {
+._4pqs4v0-3-12-1 {
   color: var(--dt-colors-text-critical-default, #bb0731);
   font-size: var(--dt-typography-text-small-default-size, 12px);
 }
-._4pqs4v1-3-11-3 {
+._4pqs4v1-3-12-1 {
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
   font-size: var(--dt-typography-text-small-default-size, 12px);
 }
-._4pqs4v2-3-11-3 {
+._4pqs4v2-3-12-1 {
   align-items: center;
   justify-content: center;
 }
-._4pqs4v3-3-11-3 {
+._4pqs4v3-3-12-1 {
   position: relative;
   width: 100%;
 }

package/esm/charts/core/components/chart-states/ChartState.sty.js

@@ -1,8 +1,8 @@
 import "./ChartState.css";
-var container = "_4pqs4v3-3-11-3";
-var emptyText = "_4pqs4v1-3-11-3";
-var errorText = "_4pqs4v0-3-11-3";
-var wrapper = "_4pqs4v2-3-11-3";
+var container = "_4pqs4v3-3-12-1";
+var emptyText = "_4pqs4v1-3-12-1";
+var errorText = "_4pqs4v0-3-12-1";
+var wrapper = "_4pqs4v2-3-12-1";
 export {
   container,
   emptyText,

package/esm/charts/core/components/chart-states/ChartState.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/core/components/chart-states/ChartState.css.ts"],
-  "sourcesContent": ["import './ChartState.css';\nexport var container = '_4pqs4v3-3-11-3';\nexport var emptyText = '_4pqs4v1-3-11-3';\nexport var errorText = '_4pqs4v0-3-11-3';\nexport var wrapper = '_4pqs4v2-3-11-3';"],
+  "sourcesContent": ["import './ChartState.css';\nexport var container = '_4pqs4v3-3-12-1';\nexport var emptyText = '_4pqs4v1-3-12-1';\nexport var errorText = '_4pqs4v0-3-12-1';\nexport var wrapper = '_4pqs4v2-3-12-1';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,YAAY;AAChB,IAAI,YAAY;AAChB,IAAI,YAAY;AAChB,IAAI,UAAU;",
   "names": []
 }

package/esm/charts/core/components/crosshair/components/Magnifier.css

@@ -1,4 +1,4 @@
-._nm3s3e0-3-11-3 {
+._nm3s3e0-3-12-1 {
   font-family: var(--dt-typography-text-small-default-family, DynatraceFlow,Roboto,Helvetica,sans-serif);
   font-size: var(--dt-typography-text-small-default-size, 12px);
   font-weight: var(--dt-typography-text-small-default-weight, 400);
@@ -13,24 +13,24 @@
   z-index: var(--dt-elevations-sticky, 10);
   padding: var(--dt-spacings-size-2, 2px) var(--dt-spacings-size-4, 4px);
 }
-._nm3s3e1-3-11-3 {
+._nm3s3e1-3-12-1 {
   margin-left: -2px;
 }
-._nm3s3e2-3-11-3 {
+._nm3s3e2-3-12-1 {
   margin-left: var(--dt-spacings-size-2, 2px);
 }
-._nm3s3e3-3-11-3 {
+._nm3s3e3-3-12-1 {
   margin-top: var(--dt-spacings-size-2, 2px);
 }
-._nm3s3e4-3-11-3 {
+._nm3s3e4-3-12-1 {
   margin-top: -2px;
 }
-._nm3s3e5-3-11-3 {
+._nm3s3e5-3-12-1 {
   transform: rotate(-90deg);
   transform-origin: left bottom;
   margin-top: -2px;
 }
-._nm3s3e6-3-11-3 {
+._nm3s3e6-3-12-1 {
   transform: rotate(90deg) scaleX(-1) scaleY(-1) translateX(-100%) translateY(-100%);
   transform-origin: left top;
   margin-top: var(--dt-spacings-size-2, 2px);

package/esm/charts/core/components/crosshair/components/Magnifier.sty.js

@@ -1,12 +1,12 @@
 import "./Magnifier.css";
-var bottom = "_nm3s3e3-3-11-3";
-var left = "_nm3s3e1-3-11-3";
-var magnifier = "_nm3s3e0-3-11-3";
+var bottom = "_nm3s3e3-3-12-1";
+var left = "_nm3s3e1-3-12-1";
+var magnifier = "_nm3s3e0-3-12-1";
 var magnifierFontStyles = { fontFamily: "var(--dt-typography-text-small-default-family, DynatraceFlow,Roboto,Helvetica,sans-serif)", fontSize: "var(--dt-typography-text-small-default-size, 12px)", fontWeight: "var(--dt-typography-text-small-default-weight, 400)", lineHeight: "var(--dt-typography-text-small-default-line-height, 1.333333333)" };
-var right = "_nm3s3e2-3-11-3";
-var rotatedBottomStyle = "_nm3s3e6-3-11-3";
-var rotatedTopStyle = "_nm3s3e5-3-11-3";
-var top = "_nm3s3e4-3-11-3";
+var right = "_nm3s3e2-3-12-1";
+var rotatedBottomStyle = "_nm3s3e6-3-12-1";
+var rotatedTopStyle = "_nm3s3e5-3-12-1";
+var top = "_nm3s3e4-3-12-1";
 export {
   bottom,
   left,

package/esm/charts/core/components/crosshair/components/Magnifier.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/core/components/crosshair/components/Magnifier.css.ts"],
-  "sourcesContent": ["import './Magnifier.css';\nexport var bottom = '_nm3s3e3-3-11-3';\nexport var left = '_nm3s3e1-3-11-3';\nexport var magnifier = '_nm3s3e0-3-11-3';\nexport var magnifierFontStyles = {fontFamily:'var(--dt-typography-text-small-default-family, DynatraceFlow,Roboto,Helvetica,sans-serif)',fontSize:'var(--dt-typography-text-small-default-size, 12px)',fontWeight:'var(--dt-typography-text-small-default-weight, 400)',lineHeight:'var(--dt-typography-text-small-default-line-height, 1.333333333)'};\nexport var right = '_nm3s3e2-3-11-3';\nexport var rotatedBottomStyle = '_nm3s3e6-3-11-3';\nexport var rotatedTopStyle = '_nm3s3e5-3-11-3';\nexport var top = '_nm3s3e4-3-11-3';"],
+  "sourcesContent": ["import './Magnifier.css';\nexport var bottom = '_nm3s3e3-3-12-1';\nexport var left = '_nm3s3e1-3-12-1';\nexport var magnifier = '_nm3s3e0-3-12-1';\nexport var magnifierFontStyles = {fontFamily:'var(--dt-typography-text-small-default-family, DynatraceFlow,Roboto,Helvetica,sans-serif)',fontSize:'var(--dt-typography-text-small-default-size, 12px)',fontWeight:'var(--dt-typography-text-small-default-weight, 400)',lineHeight:'var(--dt-typography-text-small-default-line-height, 1.333333333)'};\nexport var right = '_nm3s3e2-3-12-1';\nexport var rotatedBottomStyle = '_nm3s3e6-3-12-1';\nexport var rotatedTopStyle = '_nm3s3e5-3-12-1';\nexport var top = '_nm3s3e4-3-12-1';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,SAAS;AACb,IAAI,OAAO;AACX,IAAI,YAAY;AAChB,IAAI,sBAAsB,EAAC,YAAW,6FAA4F,UAAS,sDAAqD,YAAW,uDAAsD,YAAW,mEAAkE;AAC9U,IAAI,QAAQ;AACZ,IAAI,qBAAqB;AACzB,IAAI,kBAAkB;AACtB,IAAI,MAAM;",
   "names": []
 }

package/esm/charts/core/components/interactions-overlay/InteractionsOverlay.css

@@ -1,4 +1,4 @@
-._nfahiq0-3-11-3 {
+._nfahiq0-3-12-1 {
   position: absolute;
   width: 100%;
   height: 100%;
@@ -6,15 +6,15 @@
   left: 0;
   touch-action: none;
 }
-._nfahiq1-3-11-3 {
+._nfahiq1-3-12-1 {
   cursor: crosshair;
 }
-._nfahiq2-3-11-3 {
+._nfahiq2-3-12-1 {
   cursor: ew-resize;
 }
-._nfahiq3-3-11-3 {
+._nfahiq3-3-12-1 {
   cursor: zoom-in;
 }
-._nfahiq4-3-11-3 {
+._nfahiq4-3-12-1 {
   cursor: zoom-out;
 }

package/esm/charts/core/components/interactions-overlay/InteractionsOverlay.js

@@ -2,11 +2,11 @@ import { jsx } from "react/jsx-runtime";
 import classNames from "clsx";
 import {
   forwardRef,
-  useContext,
   useRef,
   useState
 } from "react";
 import { chartEventsWrapper } from "./InteractionsOverlay.sty.js";
+import { MIDDLE_BUTTON_ID } from "../../constants.js";
 import { getActiveMode } from "./utils/get-active-mode.js";
 import { getExploreInteractions } from "./utils/get-explore-interations.js";
 import { getGestures } from "./utils/get-gestures.js";
@@ -16,9 +16,17 @@ import { getZoomInteractions } from "./utils/get-zoom-interactions.js";
 import { handleKeyDown } from "./utils/handle-keydown.js";
 import { isOwnEvent } from "./utils/is-own-event.js";
 import { useMergeRefs } from "../../../../core/hooks/useMergeRefs.js";
-import { ChartVariantContext } from "../../context/ChartVariantContext.js";
 import { usePointerEvents } from "../../hooks/usePointerEvents.js";
 import { usePreventScrollOnWheel } from "../../hooks/usePreventScrollOnWheel.js";
+const isDragDisabled = (effectiveMode, panDisabled, zoomDisabled, isSelectDisabled) => {
+  if (effectiveMode === "pan") {
+    return panDisabled;
+  }
+  if (effectiveMode === "zoom") {
+    return zoomDisabled;
+  }
+  return isSelectDisabled;
+};
 const InteractionsOverlay = forwardRef((props, forwardedRef) => {
   const {
     style,
@@ -45,6 +53,7 @@ const InteractionsOverlay = forwardRef((props, forwardedRef) => {
     onZoomEnd,
     isZoomDisabled,
     isPanDisabled,
+    isSelectDisabled,
     isZoomXDisabled,
     children,
     ...restProps
@@ -59,7 +68,6 @@ const InteractionsOverlay = forwardRef((props, forwardedRef) => {
   const [cursorMode, setCursorMode] = useState(
     mode
   );
-  const { crosshair: crosshairConfig } = useContext(ChartVariantContext);
   const htmlRef = useRef(null);
   usePreventScrollOnWheel(htmlRef);
   const rootRef = useMergeRefs([htmlRef, forwardedRef]);
@@ -204,10 +212,27 @@ const InteractionsOverlay = forwardRef((props, forwardedRef) => {
       ),
       style: {
         ...style,
-        cursor: cursorMode === "explore" ? crosshairConfig?.cursor : void 0
+        cursor: cursorMode === "explore" ? style?.cursor : void 0
       },
       onMouseDown: (event) => {
         if (isOwnEvent(event)) {
+          const isMiddleButton = event.buttons === MIDDLE_BUTTON_ID;
+          if (!isMiddleButton) {
+            const effectiveMode = getActiveMode(
+              mode,
+              event,
+              zoomDisabled,
+              panDisabled
+            );
+            if (isDragDisabled(
+              effectiveMode,
+              panDisabled,
+              zoomDisabled,
+              isSelectDisabled
+            )) {
+              return;
+            }
+          }
           isPointerDownRef.current = true;
           handleMouseDown(event);
         }
@@ -232,7 +257,20 @@ const InteractionsOverlay = forwardRef((props, forwardedRef) => {
       },
       onTouchStart: (event) => {
         if (isOwnEvent(event)) {
-          handleTouchStart(event);
+          const effectiveMode = getActiveMode(
+            mode,
+            event,
+            zoomDisabled,
+            panDisabled
+          );
+          if (!isDragDisabled(
+            effectiveMode,
+            panDisabled,
+            zoomDisabled,
+            isSelectDisabled
+          )) {
+            handleTouchStart(event);
+          }
         }
       },
       onTouchMove: (event) => {

package/esm/charts/core/components/interactions-overlay/InteractionsOverlay.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/core/components/interactions-overlay/InteractionsOverlay.tsx"],
-  "sourcesContent": ["import classNames from 'clsx';\nimport {\n  type FocusEvent,\n  forwardRef,\n  type KeyboardEvent,\n  type MouseEvent as ReactMouseEvent,\n  type PropsWithChildren,\n  useContext,\n  useRef,\n  useState,\n  type WheelEvent,\n} from 'react';\n\nimport { chartEventsWrapper } from './InteractionsOverlay.sty.js';\nimport type {\n  InteractionMode,\n  Interactions,\n  InteractionsOverlayProps,\n  OverlappingInteractionsProps,\n} from './types.js';\nimport { getActiveMode } from './utils/get-active-mode.js';\nimport { getExploreInteractions } from './utils/get-explore-interations.js';\nimport { getGestures } from './utils/get-gestures.js';\nimport { getInterfaceInteractions } from './utils/get-interface-interactions.js';\nimport { getPanInteractions } from './utils/get-pan-interactions.js';\nimport { getZoomInteractions } from './utils/get-zoom-interactions.js';\nimport { handleKeyDown } from './utils/handle-keydown.js';\nimport { isOwnEvent } from './utils/is-own-event.js';\nimport { useMergeRefs } from '../../../../core/hooks/useMergeRefs.js';\nimport { ChartVariantContext } from '../../context/ChartVariantContext.js';\nimport { usePointerEvents } from '../../hooks/usePointerEvents.js';\nimport { usePreventScrollOnWheel } from '../../hooks/usePreventScrollOnWheel.js';\nimport type { RelativeAbsolutePosition } from '../../types/pointer-events.js';\n\n/**\n * @internal\n * @param props -\n */\nexport const InteractionsOverlay = forwardRef<\n  HTMLDivElement,\n  PropsWithChildren<InteractionsOverlayProps>\n>((props, forwardedRef) => {\n  const {\n    style,\n    className,\n    mode,\n    pinned,\n    selectionArea,\n    width,\n    height,\n    onModeChange,\n    onFocus,\n    onHover,\n    onLeave,\n    onPanStart,\n    onPanChange,\n    onPanEnd,\n    onTogglePin,\n    onReset,\n    onSelectStart,\n    onSelectChange,\n    onSelectEnd,\n    onZoomStart,\n    onZoomChange,\n    onZoomEnd,\n    isZoomDisabled,\n    isPanDisabled,\n    isZoomXDisabled,\n    children,\n    ...restProps\n  } = props;\n\n  const zoomDisabled = selectionArea ? true : props.isZoomDisabled;\n  const panDisabled = selectionArea ? true : props.isPanDisabled;\n\n  //#region Internal state\n  /**\n   * Keeps track of full pan delta interaction in pixels\n   */\n  const panDeltaRef = useRef<number>(undefined);\n  /**\n   * Keeps track of mouse position\n   */\n  const lastMousePositionRef = useRef<RelativeAbsolutePosition>(undefined);\n\n  const isPointerDownRef = useRef(false);\n\n  const eventCancelled = useRef(false);\n\n  const handlerRef = useRef<null | (() => void)>(null);\n\n  //#endregion\n\n  const [cursorMode, setCursorMode] = useState<InteractionMode | 'zoomOut'>(\n    mode,\n  );\n\n  const { crosshair: crosshairConfig } = useContext(ChartVariantContext);\n\n  const htmlRef = useRef<HTMLDivElement>(null);\n\n  usePreventScrollOnWheel(htmlRef);\n\n  const rootRef = useMergeRefs([htmlRef, forwardedRef]);\n\n  const overlappingInteractionsProps: OverlappingInteractionsProps = {\n    selectionArea,\n    eventCancelled,\n    onSelectEnd,\n    lastMousePositionRef,\n    pinned,\n    onHover,\n    onTogglePin,\n    setCursorMode,\n    height,\n    onReset,\n    width,\n    onZoomChange,\n    onPanChange,\n    panDeltaRef,\n    onPanStart,\n    onPanEnd,\n  };\n\n  //#region Native HTML events\n  const handleMouseLeave = () => {\n    onLeave?.({ triggeredBy: 'pointer' });\n    isPointerDownRef.current = false;\n    lastMousePositionRef.current = undefined;\n  };\n\n  const handleFocus = (event?: FocusEvent) => {\n    if (handlerRef.current) {\n      handlerRef.current();\n      handlerRef.current = null;\n    }\n    onFocus?.(event);\n  };\n\n  const handleBlur = (event: FocusEvent) => {\n    const nextFocusElement = event.relatedTarget;\n\n    if (!event.target?.contains(nextFocusElement)) {\n      onLeave?.({ triggeredBy: 'keyboard' });\n    }\n  };\n\n  const handleWheel = (event: WheelEvent) => {\n    interactions[getActiveMode(mode, event, zoomDisabled)].onWheel(event);\n  };\n\n  const handleKeyboard = (event: KeyboardEvent) =>\n    handleKeyDown({\n      event,\n      lastMousePositionRef,\n      panDeltaRef,\n      selectionArea,\n      eventCancelled,\n      onSelectEnd,\n      onModeChange,\n      interaction:\n        interactions[getActiveMode(mode, event, zoomDisabled, isPanDisabled)],\n    });\n  //#endregion\n\n  //#region Interactions strategy\n  const interactions: Interactions = {\n    explore: getExploreInteractions({\n      ...overlappingInteractionsProps,\n      onModeChange,\n      onSelectChange,\n      onSelectStart,\n      isZoomXDisabled,\n    }),\n    zoom: getZoomInteractions({\n      ...overlappingInteractionsProps,\n      cursorMode,\n      onSelectChange,\n      onSelectStart,\n    }),\n    pan: getPanInteractions({\n      ...overlappingInteractionsProps,\n      onModeChange,\n      cursorMode,\n    }),\n  };\n  //#endregion\n\n  const {\n    handleMouseDown,\n    handleMouseMove,\n    handleMouseUp,\n    handleTouchStart,\n    handleTouchMove,\n    handleTouchEnd,\n  } = usePointerEvents({\n    ...getInterfaceInteractions(\n      interactions,\n      mode,\n      zoomDisabled,\n      isZoomXDisabled,\n      panDisabled,\n    ),\n    ...getGestures({\n      lastMousePositionRef,\n      panDeltaRef,\n      onZoomStart,\n      onZoomChange,\n      onZoomEnd,\n      onPanStart,\n      onPanChange,\n      onPanEnd,\n    }),\n    eventCancelled,\n  });\n\n  const handleDocumentMouseUp = (e: MouseEvent) => {\n    const { clientX, clientY } = e;\n    if (htmlRef?.current) {\n      handleMouseUp({\n        ...(e as unknown as ReactMouseEvent<HTMLDivElement>),\n        currentTarget: htmlRef.current,\n        clientX,\n        clientY,\n      });\n\n      isPointerDownRef.current = false;\n      lastMousePositionRef.current = undefined;\n    }\n  };\n\n  const handleDocumentMouseMove = (e: MouseEvent) => {\n    const { clientX, clientY } = e;\n    if (htmlRef?.current) {\n      handleMouseMove({\n        ...(e as unknown as ReactMouseEvent<HTMLDivElement>),\n        currentTarget: htmlRef.current,\n        clientX: clientX,\n        clientY,\n      });\n    }\n  };\n\n  const registerDocumentListeners = () => {\n    if (!handlerRef.current) {\n      document.addEventListener('mouseup', handleDocumentMouseUp);\n      document.addEventListener('pointermove', handleDocumentMouseMove);\n      handlerRef.current = () => {\n        document.removeEventListener('mouseup', handleDocumentMouseUp);\n        document.removeEventListener('pointermove', handleDocumentMouseMove);\n      };\n    }\n  };\n\n  return (\n    <div\n      ref={rootRef}\n      tabIndex={0}\n      className={classNames(\n        chartEventsWrapper({ mode: cursorMode }),\n        className,\n      )}\n      style={{\n        ...style,\n        cursor: cursorMode === 'explore' ? crosshairConfig?.cursor : undefined,\n      }}\n      onMouseDown={(event) => {\n        if (isOwnEvent(event)) {\n          isPointerDownRef.current = true;\n          handleMouseDown(event);\n        }\n      }}\n      onMouseMove={(event) => {\n        if (isOwnEvent(event)) {\n          handleMouseMove(event);\n        }\n      }}\n      onMouseUp={(event) => {\n        if (isOwnEvent(event)) {\n          handleMouseUp(event);\n          isPointerDownRef.current = false;\n        }\n      }}\n      onMouseLeave={(e) => {\n        if (\n          isPointerDownRef.current &&\n          lastMousePositionRef.current &&\n          htmlRef.current\n        ) {\n          registerDocumentListeners();\n        } else {\n          handleMouseLeave();\n        }\n      }}\n      onTouchStart={(event) => {\n        if (isOwnEvent(event)) {\n          handleTouchStart(event);\n        }\n      }}\n      onTouchMove={(event) => {\n        if (isOwnEvent(event)) {\n          handleTouchMove(event);\n        }\n      }}\n      onTouchEnd={(event) => {\n        if (isOwnEvent(event)) {\n          handleTouchEnd(event);\n        }\n      }}\n      onMouseEnter={() => handleFocus()}\n      onFocus={handleFocus}\n      onBlur={handleBlur}\n      onKeyDown={handleKeyboard}\n      onWheel={handleWheel}\n      {...restProps}\n    >\n      {children}\n    </div>\n  );\n});\n\n(InteractionsOverlay as typeof InteractionsOverlay & { displayName: string })[\n  'displayName'\n] = 'InteractionsOverlay';\n"],
-  "mappings": "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",
+  "sourcesContent": ["import classNames from 'clsx';\nimport {\n  type FocusEvent,\n  forwardRef,\n  type KeyboardEvent,\n  type MouseEvent as ReactMouseEvent,\n  type PropsWithChildren,\n  useRef,\n  useState,\n  type WheelEvent,\n} from 'react';\n\nimport { chartEventsWrapper } from './InteractionsOverlay.sty.js';\nimport type {\n  InteractionMode,\n  Interactions,\n  InteractionsOverlayProps,\n  OverlappingInteractionsProps,\n} from './types.js';\nimport { MIDDLE_BUTTON_ID } from '../../constants.js';\nimport { getActiveMode } from './utils/get-active-mode.js';\nimport { getExploreInteractions } from './utils/get-explore-interations.js';\nimport { getGestures } from './utils/get-gestures.js';\nimport { getInterfaceInteractions } from './utils/get-interface-interactions.js';\nimport { getPanInteractions } from './utils/get-pan-interactions.js';\nimport { getZoomInteractions } from './utils/get-zoom-interactions.js';\nimport { handleKeyDown } from './utils/handle-keydown.js';\nimport { isOwnEvent } from './utils/is-own-event.js';\nimport { useMergeRefs } from '../../../../core/hooks/useMergeRefs.js';\nimport { usePointerEvents } from '../../hooks/usePointerEvents.js';\nimport { usePreventScrollOnWheel } from '../../hooks/usePreventScrollOnWheel.js';\nimport type { RelativeAbsolutePosition } from '../../types/pointer-events.js';\n\nconst isDragDisabled = (\n  effectiveMode: InteractionMode,\n  panDisabled: boolean | undefined,\n  zoomDisabled: boolean | undefined,\n  isSelectDisabled: boolean | undefined,\n): boolean | undefined => {\n  if (effectiveMode === 'pan') {\n    return panDisabled;\n  }\n  if (effectiveMode === 'zoom') {\n    return zoomDisabled;\n  }\n  return isSelectDisabled;\n};\n\n/**\n * @internal\n * @param props -\n */\nexport const InteractionsOverlay = forwardRef<\n  HTMLDivElement,\n  PropsWithChildren<InteractionsOverlayProps>\n>((props, forwardedRef) => {\n  const {\n    style,\n    className,\n    mode,\n    pinned,\n    selectionArea,\n    width,\n    height,\n    onModeChange,\n    onFocus,\n    onHover,\n    onLeave,\n    onPanStart,\n    onPanChange,\n    onPanEnd,\n    onTogglePin,\n    onReset,\n    onSelectStart,\n    onSelectChange,\n    onSelectEnd,\n    onZoomStart,\n    onZoomChange,\n    onZoomEnd,\n    isZoomDisabled,\n    isPanDisabled,\n    isSelectDisabled,\n    isZoomXDisabled,\n    children,\n    ...restProps\n  } = props;\n\n  const zoomDisabled = selectionArea ? true : props.isZoomDisabled;\n  const panDisabled = selectionArea ? true : props.isPanDisabled;\n\n  //#region Internal state\n  /**\n   * Keeps track of full pan delta interaction in pixels\n   */\n  const panDeltaRef = useRef<number>(undefined);\n  /**\n   * Keeps track of mouse position\n   */\n  const lastMousePositionRef = useRef<RelativeAbsolutePosition>(undefined);\n\n  const isPointerDownRef = useRef(false);\n\n  const eventCancelled = useRef(false);\n\n  const handlerRef = useRef<null | (() => void)>(null);\n\n  //#endregion\n\n  const [cursorMode, setCursorMode] = useState<InteractionMode | 'zoomOut'>(\n    mode,\n  );\n\n  const htmlRef = useRef<HTMLDivElement>(null);\n\n  usePreventScrollOnWheel(htmlRef);\n\n  const rootRef = useMergeRefs([htmlRef, forwardedRef]);\n\n  const overlappingInteractionsProps: OverlappingInteractionsProps = {\n    selectionArea,\n    eventCancelled,\n    onSelectEnd,\n    lastMousePositionRef,\n    pinned,\n    onHover,\n    onTogglePin,\n    setCursorMode,\n    height,\n    onReset,\n    width,\n    onZoomChange,\n    onPanChange,\n    panDeltaRef,\n    onPanStart,\n    onPanEnd,\n  };\n\n  //#region Native HTML events\n  const handleMouseLeave = () => {\n    onLeave?.({ triggeredBy: 'pointer' });\n    isPointerDownRef.current = false;\n    lastMousePositionRef.current = undefined;\n  };\n\n  const handleFocus = (event?: FocusEvent) => {\n    if (handlerRef.current) {\n      handlerRef.current();\n      handlerRef.current = null;\n    }\n    onFocus?.(event);\n  };\n\n  const handleBlur = (event: FocusEvent) => {\n    const nextFocusElement = event.relatedTarget;\n\n    if (!event.target?.contains(nextFocusElement)) {\n      onLeave?.({ triggeredBy: 'keyboard' });\n    }\n  };\n\n  const handleWheel = (event: WheelEvent) => {\n    interactions[getActiveMode(mode, event, zoomDisabled)].onWheel(event);\n  };\n\n  const handleKeyboard = (event: KeyboardEvent) =>\n    handleKeyDown({\n      event,\n      lastMousePositionRef,\n      panDeltaRef,\n      selectionArea,\n      eventCancelled,\n      onSelectEnd,\n      onModeChange,\n      interaction:\n        interactions[getActiveMode(mode, event, zoomDisabled, isPanDisabled)],\n    });\n  //#endregion\n\n  //#region Interactions strategy\n  const interactions: Interactions = {\n    explore: getExploreInteractions({\n      ...overlappingInteractionsProps,\n      onModeChange,\n      onSelectChange,\n      onSelectStart,\n      isZoomXDisabled,\n    }),\n    zoom: getZoomInteractions({\n      ...overlappingInteractionsProps,\n      cursorMode,\n      onSelectChange,\n      onSelectStart,\n    }),\n    pan: getPanInteractions({\n      ...overlappingInteractionsProps,\n      onModeChange,\n      cursorMode,\n    }),\n  };\n  //#endregion\n\n  const {\n    handleMouseDown,\n    handleMouseMove,\n    handleMouseUp,\n    handleTouchStart,\n    handleTouchMove,\n    handleTouchEnd,\n  } = usePointerEvents({\n    ...getInterfaceInteractions(\n      interactions,\n      mode,\n      zoomDisabled,\n      isZoomXDisabled,\n      panDisabled,\n    ),\n    ...getGestures({\n      lastMousePositionRef,\n      panDeltaRef,\n      onZoomStart,\n      onZoomChange,\n      onZoomEnd,\n      onPanStart,\n      onPanChange,\n      onPanEnd,\n    }),\n    eventCancelled,\n  });\n\n  const handleDocumentMouseUp = (e: MouseEvent) => {\n    const { clientX, clientY } = e;\n    if (htmlRef?.current) {\n      handleMouseUp({\n        ...(e as unknown as ReactMouseEvent<HTMLDivElement>),\n        currentTarget: htmlRef.current,\n        clientX,\n        clientY,\n      });\n\n      isPointerDownRef.current = false;\n      lastMousePositionRef.current = undefined;\n    }\n  };\n\n  const handleDocumentMouseMove = (e: MouseEvent) => {\n    const { clientX, clientY } = e;\n    if (htmlRef?.current) {\n      handleMouseMove({\n        ...(e as unknown as ReactMouseEvent<HTMLDivElement>),\n        currentTarget: htmlRef.current,\n        clientX: clientX,\n        clientY,\n      });\n    }\n  };\n\n  const registerDocumentListeners = () => {\n    if (!handlerRef.current) {\n      document.addEventListener('mouseup', handleDocumentMouseUp);\n      document.addEventListener('pointermove', handleDocumentMouseMove);\n      handlerRef.current = () => {\n        document.removeEventListener('mouseup', handleDocumentMouseUp);\n        document.removeEventListener('pointermove', handleDocumentMouseMove);\n      };\n    }\n  };\n\n  return (\n    <div\n      ref={rootRef}\n      tabIndex={0}\n      className={classNames(\n        chartEventsWrapper({ mode: cursorMode }),\n        className,\n      )}\n      style={{\n        ...style,\n        cursor: cursorMode === 'explore' ? style?.cursor : undefined,\n      }}\n      onMouseDown={(event) => {\n        if (isOwnEvent(event)) {\n          const isMiddleButton = event.buttons === MIDDLE_BUTTON_ID;\n\n          if (!isMiddleButton) {\n            const effectiveMode = getActiveMode(\n              mode,\n              event,\n              zoomDisabled,\n              panDisabled,\n            );\n\n            if (\n              isDragDisabled(\n                effectiveMode,\n                panDisabled,\n                zoomDisabled,\n                isSelectDisabled,\n              )\n            ) {\n              return;\n            }\n          }\n\n          isPointerDownRef.current = true;\n          handleMouseDown(event);\n        }\n      }}\n      onMouseMove={(event) => {\n        if (isOwnEvent(event)) {\n          handleMouseMove(event);\n        }\n      }}\n      onMouseUp={(event) => {\n        if (isOwnEvent(event)) {\n          handleMouseUp(event);\n          isPointerDownRef.current = false;\n        }\n      }}\n      onMouseLeave={(e) => {\n        if (\n          isPointerDownRef.current &&\n          lastMousePositionRef.current &&\n          htmlRef.current\n        ) {\n          registerDocumentListeners();\n        } else {\n          handleMouseLeave();\n        }\n      }}\n      onTouchStart={(event) => {\n        if (isOwnEvent(event)) {\n          const effectiveMode = getActiveMode(\n            mode,\n            event,\n            zoomDisabled,\n            panDisabled,\n          );\n\n          if (\n            !isDragDisabled(\n              effectiveMode,\n              panDisabled,\n              zoomDisabled,\n              isSelectDisabled,\n            )\n          ) {\n            handleTouchStart(event);\n          }\n        }\n      }}\n      onTouchMove={(event) => {\n        if (isOwnEvent(event)) {\n          handleTouchMove(event);\n        }\n      }}\n      onTouchEnd={(event) => {\n        if (isOwnEvent(event)) {\n          handleTouchEnd(event);\n        }\n      }}\n      onMouseEnter={() => handleFocus()}\n      onFocus={handleFocus}\n      onBlur={handleBlur}\n      onKeyDown={handleKeyboard}\n      onWheel={handleWheel}\n      {...restProps}\n    >\n      {children}\n    </div>\n  );\n});\n\n(InteractionsOverlay as typeof InteractionsOverlay & { displayName: string })[\n  'displayName'\n] = 'InteractionsOverlay';\n"],
+  "mappings": "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",
   "names": []
 }

package/esm/charts/core/components/interactions-overlay/InteractionsOverlay.sty.js

@@ -1,7 +1,7 @@
 import "./InteractionsOverlay.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var chartEventsWrapper = _7a468({ defaultClassName: "_nfahiq0-3-11-3", variantClassNames: { mode: { explore: "_nfahiq1-3-11-3", pan: "_nfahiq2-3-11-3", zoom: "_nfahiq3-3-11-3", zoomOut: "_nfahiq4-3-11-3" } }, defaultVariants: {}, compoundVariants: [] });
-var interactionsOverlay = "_nfahiq5-3-11-3";
+var chartEventsWrapper = _7a468({ defaultClassName: "_nfahiq0-3-12-1", variantClassNames: { mode: { explore: "_nfahiq1-3-12-1", pan: "_nfahiq2-3-12-1", zoom: "_nfahiq3-3-12-1", zoomOut: "_nfahiq4-3-12-1" } }, defaultVariants: {}, compoundVariants: [] });
+var interactionsOverlay = "_nfahiq5-3-12-1";
 export {
   chartEventsWrapper,
   interactionsOverlay

package/esm/charts/core/components/interactions-overlay/InteractionsOverlay.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/core/components/interactions-overlay/InteractionsOverlay.css.ts"],
-  "sourcesContent": ["import './InteractionsOverlay.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var chartEventsWrapper = _7a468({defaultClassName:'_nfahiq0-3-11-3',variantClassNames:{mode:{explore:'_nfahiq1-3-11-3',pan:'_nfahiq2-3-11-3',zoom:'_nfahiq3-3-11-3',zoomOut:'_nfahiq4-3-11-3'}},defaultVariants:{},compoundVariants:[]});\nexport var interactionsOverlay = '_nfahiq5-3-11-3';"],
+  "sourcesContent": ["import './InteractionsOverlay.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var chartEventsWrapper = _7a468({defaultClassName:'_nfahiq0-3-12-1',variantClassNames:{mode:{explore:'_nfahiq1-3-12-1',pan:'_nfahiq2-3-12-1',zoom:'_nfahiq3-3-12-1',zoomOut:'_nfahiq4-3-12-1'}},defaultVariants:{},compoundVariants:[]});\nexport var interactionsOverlay = '_nfahiq5-3-12-1';"],
   "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,qBAAqB,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,MAAK,EAAC,SAAQ,mBAAkB,KAAI,mBAAkB,MAAK,mBAAkB,SAAQ,kBAAiB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AACvO,IAAI,sBAAsB;",
   "names": []
 }