@dynatrace/strato-components 3.12.2 → 3.13.0

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

@@ -1,7 +1,7 @@
 import "./ChartGrid.css";
-var area = "_13lzg4k1-3-12-2";
-var plot = "_13lzg4k2-3-12-2";
-var plotLayout = "_13lzg4k0-3-12-2";
+var area = "_13lzg4k1-3-13-0";
+var plot = "_13lzg4k2-3-13-0";
+var plotLayout = "_13lzg4k0-3-13-0";
 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-12-2';\nexport var plot = '_13lzg4k2-3-12-2';\nexport var plotLayout = '_13lzg4k0-3-12-2';"],
+  "sourcesContent": ["import './ChartGrid.css';\nexport var area = '_13lzg4k1-3-13-0';\nexport var plot = '_13lzg4k2-3-13-0';\nexport var plotLayout = '_13lzg4k0-3-13-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,OAAO;AACX,IAAI,OAAO;AACX,IAAI,aAAa;",
   "names": []
 }

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

@@ -1,46 +1,46 @@
-._l1klj80-3-12-2 {
+._l1klj80-3-13-0 {
   min-width: 0;
   grid-area: graphArea;
 }
-._l1klj81-3-12-2 {
+._l1klj81-3-13-0 {
   filter: opacity(40%);
   pointer-events: none;
 }
-._l1klj83-3-12-2 {
+._l1klj83-3-13-0 {
   height: inherit;
   grid-area: horizontalResize;
 }
-._l1klj84-3-12-2 {
+._l1klj84-3-13-0 {
   width: 100%;
   grid-area: verticalResize;
 }
-._l1klj85-3-12-2 {
+._l1klj85-3-13-0 {
   filter: opacity(40%);
   pointer-events: none;
 }
-._l1klj86-3-12-2 {
+._l1klj86-3-13-0 {
   height: 100%;
 }
-._l1klj87-3-12-2 {
+._l1klj87-3-13-0 {
   grid-area: verticalLegend;
 }
-._l1klj88-3-12-2 {
+._l1klj88-3-13-0 {
   grid-area: horizontalLegend;
 }
-._l1klj89-3-12-2 {
+._l1klj89-3-13-0 {
   filter: opacity(40%);
   pointer-events: none;
 }
-._l1klj8a-3-12-2 {
+._l1klj8a-3-13-0 {
   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-12-2:hover {
+._l1klj8a-3-13-0:hover {
   background: var(--dt-colors-border-primary-accent, #464cce);
 }
-._l1klj8b-3-12-2 {
+._l1klj8b-3-13-0 {
   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-12-2:hover {
+._l1klj8b-3-13-0:hover {
   height: var(--dt-spacings-size-48, 48px);
   background-color: var(--dt-colors-border-neutral-accent-hover, #434465);
 }
-._l1klj8c-3-12-2 {
+._l1klj8c-3-13-0 {
   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-12-2:hover {
+._l1klj8c-3-13-0: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-12-2", variantClassNames: { loading: { true: "_l1klj81-3-12-2" } }, defaultVariants: {}, compoundVariants: [] });
-var legendContainer = _7a468({ defaultClassName: "_l1klj86-3-12-2", variantClassNames: { orientation: { horizontal: "_l1klj87-3-12-2", vertical: "_l1klj88-3-12-2" }, loading: { true: "_l1klj89-3-12-2" } }, defaultVariants: {}, compoundVariants: [] });
-var legendResizeLine = _7a468({ defaultClassName: "_l1klj8a-3-12-2", variantClassNames: { orientation: { horizontal: "_l1klj8b-3-12-2", vertical: "_l1klj8c-3-12-2" } }, defaultVariants: {}, compoundVariants: [] });
-var resizeContainer = _7a468({ defaultClassName: "_l1klj82-3-12-2", variantClassNames: { orientation: { horizontal: "_l1klj83-3-12-2", vertical: "_l1klj84-3-12-2" }, loading: { true: "_l1klj85-3-12-2" } }, defaultVariants: {}, compoundVariants: [] });
+var graphContainer = _7a468({ defaultClassName: "_l1klj80-3-13-0", variantClassNames: { loading: { true: "_l1klj81-3-13-0" } }, defaultVariants: {}, compoundVariants: [] });
+var legendContainer = _7a468({ defaultClassName: "_l1klj86-3-13-0", variantClassNames: { orientation: { horizontal: "_l1klj87-3-13-0", vertical: "_l1klj88-3-13-0" }, loading: { true: "_l1klj89-3-13-0" } }, defaultVariants: {}, compoundVariants: [] });
+var legendResizeLine = _7a468({ defaultClassName: "_l1klj8a-3-13-0", variantClassNames: { orientation: { horizontal: "_l1klj8b-3-13-0", vertical: "_l1klj8c-3-13-0" } }, defaultVariants: {}, compoundVariants: [] });
+var resizeContainer = _7a468({ defaultClassName: "_l1klj82-3-13-0", variantClassNames: { orientation: { horizontal: "_l1klj83-3-13-0", vertical: "_l1klj84-3-13-0" }, loading: { true: "_l1klj85-3-13-0" } }, 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-12-2',variantClassNames:{loading:{true:'_l1klj81-3-12-2'}},defaultVariants:{},compoundVariants:[]});\nexport var legendContainer = _7a468({defaultClassName:'_l1klj86-3-12-2',variantClassNames:{orientation:{horizontal:'_l1klj87-3-12-2',vertical:'_l1klj88-3-12-2'},loading:{true:'_l1klj89-3-12-2'}},defaultVariants:{},compoundVariants:[]});\nexport var legendResizeLine = _7a468({defaultClassName:'_l1klj8a-3-12-2',variantClassNames:{orientation:{horizontal:'_l1klj8b-3-12-2',vertical:'_l1klj8c-3-12-2'}},defaultVariants:{},compoundVariants:[]});\nexport var resizeContainer = _7a468({defaultClassName:'_l1klj82-3-12-2',variantClassNames:{orientation:{horizontal:'_l1klj83-3-12-2',vertical:'_l1klj84-3-12-2'},loading:{true:'_l1klj85-3-12-2'}},defaultVariants:{},compoundVariants:[]});"],
+  "sourcesContent": ["import './styles.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var graphContainer = _7a468({defaultClassName:'_l1klj80-3-13-0',variantClassNames:{loading:{true:'_l1klj81-3-13-0'}},defaultVariants:{},compoundVariants:[]});\nexport var legendContainer = _7a468({defaultClassName:'_l1klj86-3-13-0',variantClassNames:{orientation:{horizontal:'_l1klj87-3-13-0',vertical:'_l1klj88-3-13-0'},loading:{true:'_l1klj89-3-13-0'}},defaultVariants:{},compoundVariants:[]});\nexport var legendResizeLine = _7a468({defaultClassName:'_l1klj8a-3-13-0',variantClassNames:{orientation:{horizontal:'_l1klj8b-3-13-0',vertical:'_l1klj8c-3-13-0'}},defaultVariants:{},compoundVariants:[]});\nexport var resizeContainer = _7a468({defaultClassName:'_l1klj82-3-13-0',variantClassNames:{orientation:{horizontal:'_l1klj83-3-13-0',vertical:'_l1klj84-3-13-0'},loading:{true:'_l1klj85-3-13-0'}},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/slots/Graph.js

@@ -1,6 +1,6 @@
 import { Fragment, jsx } from "react/jsx-runtime";
 const Graph = ({ children }) => (
-  // eslint-disable-next-line react/jsx-no-useless-fragment
+  // oxlint-disable-next-line react/jsx-no-useless-fragment
   /* @__PURE__ */ jsx(Fragment, { children })
 );
 Graph["displayName"] = "ChartLayout.Graph";

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/core/components/chart-layout/slots/Graph.tsx"],
-  "sourcesContent": ["import { type PropsWithChildren } from 'react';\n\n/**\n * Chart Layout graph-area component.\n */\nexport const Graph = ({ children }: PropsWithChildren) => (\n  // eslint-disable-next-line react/jsx-no-useless-fragment\n  (<>{children}</>)\n);\n\nGraph['displayName'] = 'ChartLayout.Graph';\n"],
-  "mappings": "AAOG;AAFI,MAAM,QAAQ,CAAC,EAAE,SAAS;AAAA;AAAA,EAE9B,gCAAG,UAAS;AAAA;AAGf,MAAM,aAAa,IAAI;",
+  "sourcesContent": ["import { type PropsWithChildren } from 'react';\n\n/**\n * Chart Layout graph-area component.\n */\nexport const Graph = ({ children }: PropsWithChildren) => (\n  // oxlint-disable-next-line react/jsx-no-useless-fragment\n  <>{children}</>\n);\n\nGraph['displayName'] = 'ChartLayout.Graph';\n"],
+  "mappings": "AAOE;AAFK,MAAM,QAAQ,CAAC,EAAE,SAAS;AAAA;AAAA,EAE/B,gCAAG,UAAS;AAAA;AAGd,MAAM,aAAa,IAAI;",
   "names": []
 }

package/esm/charts/core/components/chart-layout/slots/Legend.js

@@ -1,6 +1,6 @@
 import { Fragment, jsx } from "react/jsx-runtime";
 const Legend = ({ children }) => (
-  // eslint-disable-next-line react/jsx-no-useless-fragment
+  // oxlint-disable-next-line react/jsx-no-useless-fragment
   /* @__PURE__ */ jsx(Fragment, { children })
 );
 Legend["displayName"] = "LegendWrapper.Legend";

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/core/components/chart-layout/slots/Legend.tsx"],
-  "sourcesContent": ["import { type PropsWithChildren } from 'react';\n\nimport type { LegendProps } from '../types/chart-layout.js';\n\n/**\n * Legend wrapper legend-area component.\n */\nexport const Legend = ({ children }: PropsWithChildren<LegendProps>) => (\n  // eslint-disable-next-line react/jsx-no-useless-fragment\n  (<>{children}</>)\n);\n\nLegend['displayName'] = 'LegendWrapper.Legend';\n"],
-  "mappings": "AASG;AAFI,MAAM,SAAS,CAAC,EAAE,SAAS;AAAA;AAAA,EAE/B,gCAAG,UAAS;AAAA;AAGf,OAAO,aAAa,IAAI;",
+  "sourcesContent": ["import { type PropsWithChildren } from 'react';\n\nimport type { LegendProps } from '../types/chart-layout.js';\n\n/**\n * Legend wrapper legend-area component.\n */\nexport const Legend = ({ children }: PropsWithChildren<LegendProps>) => (\n  // oxlint-disable-next-line react/jsx-no-useless-fragment\n  <>{children}</>\n);\n\nLegend['displayName'] = 'LegendWrapper.Legend';\n"],
+  "mappings": "AASE;AAFK,MAAM,SAAS,CAAC,EAAE,SAAS;AAAA;AAAA,EAEhC,gCAAG,UAAS;AAAA;AAGd,OAAO,aAAa,IAAI;",
   "names": []
 }

package/esm/charts/core/components/chart-layout/utils/extract-layout-slots.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/core/components/chart-layout/utils/extract-layout-slots.ts"],
-  "sourcesContent": ["import {\n  Children,\n  Fragment,\n  type ExoticComponent,\n  type PropsWithChildren,\n  type ReactNode,\n} from 'react';\n\nimport { isSlot } from '../../../../../core/utils/is-slot.js';\nimport { Graph } from '../slots/Graph.js';\nimport { Legend } from '../slots/Legend.js';\nimport { Provider } from '../slots/Provider.js';\nimport {\n  type LegendProps,\n  type ProviderSlotProp,\n} from '../types/chart-layout.js';\n\n/**\n * Function that selects legend and graph from children, and returns them identified.\n * @param children - Children for the ChartLayout. One should have the Graph area, and the other one the Legend area.\n * @returns An object with each children identified.\n */\nexport function extractLayoutSlots(children?: ReactNode) {\n  let areas: {\n    provider: ExoticComponent<PropsWithChildren> | ProviderSlotProp;\n    legendArea?: ReactNode;\n    legendProps?: LegendProps;\n    graphArea?: ReactNode;\n  } = {\n    provider: Fragment,\n  };\n\n  Children.forEach(children, (child) => {\n    if (isSlot(child, Graph)) {\n      areas.graphArea = child.props.children;\n    } else if (isSlot(child, Legend)) {\n      // TODO: Remove ratio prop from Legend and use only initialRatio APPDEV-12761\n      // eslint-disable-next-line @typescript-eslint/no-deprecated\n      const { ratio, initialRatio, ...rest } = child.props;\n      areas.legendProps = {\n        ...rest,\n        ratio: initialRatio ?? ratio,\n        initialRatio,\n      };\n      areas.legendArea = child.props.children;\n    } else if (isSlot(child, Provider)) {\n      areas = {\n        ...extractLayoutSlots(child.props.children),\n        provider: child.props.provider,\n      };\n    }\n  });\n\n  return areas;\n}\n"],
+  "sourcesContent": ["import {\n  Children,\n  Fragment,\n  type ExoticComponent,\n  type PropsWithChildren,\n  type ReactNode,\n} from 'react';\n\nimport { isSlot } from '../../../../../core/utils/is-slot.js';\nimport { Graph } from '../slots/Graph.js';\nimport { Legend } from '../slots/Legend.js';\nimport { Provider } from '../slots/Provider.js';\nimport {\n  type LegendProps,\n  type ProviderSlotProp,\n} from '../types/chart-layout.js';\n\n/**\n * Function that selects legend and graph from children, and returns them identified.\n * @param children - Children for the ChartLayout. One should have the Graph area, and the other one the Legend area.\n * @returns An object with each children identified.\n */\nexport function extractLayoutSlots(children?: ReactNode) {\n  let areas: {\n    provider: ExoticComponent<PropsWithChildren> | ProviderSlotProp;\n    legendArea?: ReactNode;\n    legendProps?: LegendProps;\n    graphArea?: ReactNode;\n  } = {\n    provider: Fragment,\n  };\n\n  Children.forEach(children, (child) => {\n    if (isSlot(child, Graph)) {\n      areas.graphArea = child.props.children;\n    } else if (isSlot(child, Legend)) {\n      // TODO: Remove ratio prop from Legend and use only initialRatio APPDEV-12761\n      // oxlint-disable-next-line typescript/no-deprecated\n      const { ratio, initialRatio, ...rest } = child.props;\n      areas.legendProps = {\n        ...rest,\n        ratio: initialRatio ?? ratio,\n        initialRatio,\n      };\n      areas.legendArea = child.props.children;\n    } else if (isSlot(child, Provider)) {\n      areas = {\n        ...extractLayoutSlots(child.props.children),\n        provider: child.props.provider,\n      };\n    }\n  });\n\n  return areas;\n}\n"],
   "mappings": "AAAA;AAAA,EACE;AAAA,EACA;AAAA,OAIK;AAEP,SAAS,cAAc;AACvB,SAAS,aAAa;AACtB,SAAS,cAAc;AACvB,SAAS,gBAAgB;AAWlB,SAAS,mBAAmB,UAAsB;AACvD,MAAI,QAKA;AAAA,IACF,UAAU;AAAA,EACZ;AAEA,WAAS,QAAQ,UAAU,CAAC,UAAU;AACpC,QAAI,OAAO,OAAO,KAAK,GAAG;AACxB,YAAM,YAAY,MAAM,MAAM;AAAA,IAChC,WAAW,OAAO,OAAO,MAAM,GAAG;AAGhC,YAAM,EAAE,OAAO,cAAc,GAAG,KAAK,IAAI,MAAM;AAC/C,YAAM,cAAc;AAAA,QAClB,GAAG;AAAA,QACH,OAAO,gBAAgB;AAAA,QACvB;AAAA,MACF;AACA,YAAM,aAAa,MAAM,MAAM;AAAA,IACjC,WAAW,OAAO,OAAO,QAAQ,GAAG;AAClC,cAAQ;AAAA,QACN,GAAG,mBAAmB,MAAM,MAAM,QAAQ;AAAA,QAC1C,UAAU,MAAM,MAAM;AAAA,MACxB;AAAA,IACF;AAAA,EACF,CAAC;AAED,SAAO;AACT;",
   "names": []
 }

package/esm/charts/core/components/chart-layout/utils/get-chart-layout-settings.js

@@ -29,7 +29,7 @@ const getChartLayoutSettings = (containerSizes, children, isEmpty) => {
   }
   const {
     position,
-    // eslint-disable-next-line @typescript-eslint/no-deprecated
+    // oxlint-disable-next-line typescript/no-deprecated
     ratio = defaultRatio,
     initialRatio,
     onResize,

package/esm/charts/core/components/chart-layout/utils/get-chart-layout-settings.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/core/components/chart-layout/utils/get-chart-layout-settings.ts"],
-  "sourcesContent": ["import { isUndefined } from 'lodash-es';\nimport { type ReactNode } from 'react';\n\nimport { extractLayoutSlots } from './extract-layout-slots.js';\nimport { getOrientation } from './orientation.js';\nimport { sanitizeLegendRatio } from './sanitize-legend-ratio.js';\nimport { defaultRatio, ORIENTATION } from '../../../constants.js';\nimport {\n  ChartLayoutDimensions,\n  ChartLayoutSettings,\n} from '../types/chart-layout.js';\nimport {\n  DEFAULT_LEGEND_CONFIG,\n  DEFAULT_RATIO_BOUNDARIES,\n} from '../types/constants.js';\n\n/**\n * Function responsible to calculate the setup params for the chart layout (\n * e.g. orientation, resizable state, ratio etc.)\n * @param containerSizes -\n * @param children -\n * @param isEmpty -\n */\nexport const getChartLayoutSettings = (\n  containerSizes: ChartLayoutDimensions,\n  children: ReactNode,\n  isEmpty: boolean,\n): ChartLayoutSettings => {\n  const { provider, graphArea, legendArea, legendProps } =\n    extractLayoutSlots(children);\n\n  const containerAvailableArea = {\n    width: containerSizes.width,\n    height: containerSizes.height,\n  };\n\n  if (!legendArea) {\n    return {\n      graphArea,\n      containerAvailableArea,\n      legendSettings: {\n        orientation: ORIENTATION.Vertical,\n        showResizer: false,\n        hidden: true,\n        ratio: 0,\n        ratioBoundaries: DEFAULT_RATIO_BOUNDARIES,\n      },\n      provider,\n    };\n  }\n  const {\n    position,\n    // eslint-disable-next-line @typescript-eslint/no-deprecated\n    ratio = defaultRatio,\n    initialRatio,\n    onResize,\n    overrideRatio,\n    ratioBoundaries = DEFAULT_RATIO_BOUNDARIES,\n  } = legendProps ?? DEFAULT_LEGEND_CONFIG;\n\n  const orientation = getOrientation(\n    containerAvailableArea.width,\n    containerAvailableArea.height,\n    position,\n  );\n\n  return {\n    graphArea,\n    legendArea,\n    containerAvailableArea,\n    legendSettings: {\n      orientation,\n      showResizer: !isEmpty,\n      hidden: isUndefined(legendArea),\n      ratio: sanitizeLegendRatio(ratio, ratioBoundaries, orientation),\n      initialRatio: initialRatio\n        ? sanitizeLegendRatio(initialRatio, ratioBoundaries, orientation)\n        : undefined,\n      overrideRatio,\n      ratioBoundaries,\n      onResize,\n    },\n    provider,\n  };\n};\n"],
+  "sourcesContent": ["import { isUndefined } from 'lodash-es';\nimport { type ReactNode } from 'react';\n\nimport { extractLayoutSlots } from './extract-layout-slots.js';\nimport { getOrientation } from './orientation.js';\nimport { sanitizeLegendRatio } from './sanitize-legend-ratio.js';\nimport { defaultRatio, ORIENTATION } from '../../../constants.js';\nimport {\n  ChartLayoutDimensions,\n  ChartLayoutSettings,\n} from '../types/chart-layout.js';\nimport {\n  DEFAULT_LEGEND_CONFIG,\n  DEFAULT_RATIO_BOUNDARIES,\n} from '../types/constants.js';\n\n/**\n * Function responsible to calculate the setup params for the chart layout (\n * e.g. orientation, resizable state, ratio etc.)\n * @param containerSizes -\n * @param children -\n * @param isEmpty -\n */\nexport const getChartLayoutSettings = (\n  containerSizes: ChartLayoutDimensions,\n  children: ReactNode,\n  isEmpty: boolean,\n): ChartLayoutSettings => {\n  const { provider, graphArea, legendArea, legendProps } =\n    extractLayoutSlots(children);\n\n  const containerAvailableArea = {\n    width: containerSizes.width,\n    height: containerSizes.height,\n  };\n\n  if (!legendArea) {\n    return {\n      graphArea,\n      containerAvailableArea,\n      legendSettings: {\n        orientation: ORIENTATION.Vertical,\n        showResizer: false,\n        hidden: true,\n        ratio: 0,\n        ratioBoundaries: DEFAULT_RATIO_BOUNDARIES,\n      },\n      provider,\n    };\n  }\n  const {\n    position,\n    // oxlint-disable-next-line typescript/no-deprecated\n    ratio = defaultRatio,\n    initialRatio,\n    onResize,\n    overrideRatio,\n    ratioBoundaries = DEFAULT_RATIO_BOUNDARIES,\n  } = legendProps ?? DEFAULT_LEGEND_CONFIG;\n\n  const orientation = getOrientation(\n    containerAvailableArea.width,\n    containerAvailableArea.height,\n    position,\n  );\n\n  return {\n    graphArea,\n    legendArea,\n    containerAvailableArea,\n    legendSettings: {\n      orientation,\n      showResizer: !isEmpty,\n      hidden: isUndefined(legendArea),\n      ratio: sanitizeLegendRatio(ratio, ratioBoundaries, orientation),\n      initialRatio: initialRatio\n        ? sanitizeLegendRatio(initialRatio, ratioBoundaries, orientation)\n        : undefined,\n      overrideRatio,\n      ratioBoundaries,\n      onResize,\n    },\n    provider,\n  };\n};\n"],
   "mappings": "AAAA,SAAS,mBAAmB;AAG5B,SAAS,0BAA0B;AACnC,SAAS,sBAAsB;AAC/B,SAAS,2BAA2B;AACpC,SAAS,cAAc,mBAAmB;AAK1C;AAAA,EACE;AAAA,EACA;AAAA,OACK;AASA,MAAM,yBAAyB,CACpC,gBACA,UACA,YACwB;AACxB,QAAM,EAAE,UAAU,WAAW,YAAY,YAAY,IACnD,mBAAmB,QAAQ;AAE7B,QAAM,yBAAyB;AAAA,IAC7B,OAAO,eAAe;AAAA,IACtB,QAAQ,eAAe;AAAA,EACzB;AAEA,MAAI,CAAC,YAAY;AACf,WAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA,gBAAgB;AAAA,QACd,aAAa,YAAY;AAAA,QACzB,aAAa;AAAA,QACb,QAAQ;AAAA,QACR,OAAO;AAAA,QACP,iBAAiB;AAAA,MACnB;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACA,QAAM;AAAA,IACJ;AAAA;AAAA,IAEA,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA;AAAA,IACA,kBAAkB;AAAA,EACpB,IAAI,eAAe;AAEnB,QAAM,cAAc;AAAA,IAClB,uBAAuB;AAAA,IACvB,uBAAuB;AAAA,IACvB;AAAA,EACF;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA,gBAAgB;AAAA,MACd;AAAA,MACA,aAAa,CAAC;AAAA,MACd,QAAQ,YAAY,UAAU;AAAA,MAC9B,OAAO,oBAAoB,OAAO,iBAAiB,WAAW;AAAA,MAC9D,cAAc,eACV,oBAAoB,cAAc,iBAAiB,WAAW,IAC9D;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA;AAAA,EACF;AACF;",
   "names": []
 }

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

@@ -1,16 +1,16 @@
-._4pqs4v0-3-12-2 {
+._4pqs4v0-3-13-0 {
   color: var(--dt-colors-text-critical-default, #bb0731);
   font-size: var(--dt-typography-text-small-default-size, 12px);
 }
-._4pqs4v1-3-12-2 {
+._4pqs4v1-3-13-0 {
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
   font-size: var(--dt-typography-text-small-default-size, 12px);
 }
-._4pqs4v2-3-12-2 {
+._4pqs4v2-3-13-0 {
   align-items: center;
   justify-content: center;
 }
-._4pqs4v3-3-12-2 {
+._4pqs4v3-3-13-0 {
   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-12-2";
-var emptyText = "_4pqs4v1-3-12-2";
-var errorText = "_4pqs4v0-3-12-2";
-var wrapper = "_4pqs4v2-3-12-2";
+var container = "_4pqs4v3-3-13-0";
+var emptyText = "_4pqs4v1-3-13-0";
+var errorText = "_4pqs4v0-3-13-0";
+var wrapper = "_4pqs4v2-3-13-0";
 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-12-2';\nexport var emptyText = '_4pqs4v1-3-12-2';\nexport var errorText = '_4pqs4v0-3-12-2';\nexport var wrapper = '_4pqs4v2-3-12-2';"],
+  "sourcesContent": ["import './ChartState.css';\nexport var container = '_4pqs4v3-3-13-0';\nexport var emptyText = '_4pqs4v1-3-13-0';\nexport var errorText = '_4pqs4v0-3-13-0';\nexport var wrapper = '_4pqs4v2-3-13-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,YAAY;AAChB,IAAI,YAAY;AAChB,IAAI,YAAY;AAChB,IAAI,UAAU;",
   "names": []
 }

package/esm/charts/core/components/crosshair/VerticalCrosshair.js

@@ -12,6 +12,7 @@ const VerticalCrosshair = forwardRef((props, ref) => {
     width = Infinity,
     top = 0,
     offset = 0,
+    topOffset = 0,
     dashed = true,
     focusable,
     chartBounds,
@@ -68,7 +69,7 @@ const VerticalCrosshair = forwardRef((props, ref) => {
       {
         label: topLabel,
         mouseX: x,
-        offset,
+        offset: topOffset,
         color,
         chartBounds,
         isRotated: isTopLabelRotated

package/esm/charts/core/components/crosshair/VerticalCrosshair.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/core/components/crosshair/VerticalCrosshair.tsx"],
-  "sourcesContent": ["import { inRange } from 'lodash-es';\nimport { forwardRef, type KeyboardEventHandler } from 'react';\n\nimport Colors from '@dynatrace/strato-design-tokens/colors';\n\nimport { BottomMagnifier } from './components/BottomMagnifier.js';\nimport { TopMagnifier } from './components/TopMagnifier.js';\nimport type { MagnifierVariant } from './types.js';\nimport { WithChildren } from '../../../../core/types/with-children.js';\nimport { usePoliteContainer } from '../../../../overlays/hooks/usePoliteContainer.js';\n\ntype VerticalCrosshairProps = {\n  /** Coordinate x for crosshair */\n  x: number;\n  /** Height for crosshair line */\n  height: number;\n  /** Width for crosshair line */\n  width?: number;\n  /** Top margin for crosshair line */\n  top?: number;\n  /** Vertical offset */\n  offset?: number;\n  /** Indicates wether the line needs to be dashed */\n  dashed?: boolean;\n  /** Makes the element accessible through keyboard */\n  focusable?: boolean;\n  /** Chart bounds to calculate magnifier position */\n  chartBounds?: DOMRect;\n  /** bottom label rotation boolean */\n  isBottomLabelRotated?: boolean;\n  /** top label rotation boolean */\n  isTopLabelRotated?: boolean;\n  /** Bottom label for crosshair */\n  bottomLabel?: string;\n  /** Top label for the crosshair */\n  topLabel?: string;\n  /** Triggers on key down */\n  onKeyDown?: KeyboardEventHandler;\n  /** The magnifier variant */\n  variant?: MagnifierVariant;\n};\n\nexport const VerticalCrosshair = forwardRef<\n  SVGLineElement,\n  VerticalCrosshairProps & WithChildren\n>((props: VerticalCrosshairProps, ref) => {\n  const {\n    x,\n    height,\n    width = Infinity,\n    top = 0,\n    offset = 0,\n    dashed = true,\n    focusable,\n    chartBounds,\n    isBottomLabelRotated,\n    isTopLabelRotated,\n    topLabel,\n    bottomLabel,\n    onKeyDown,\n    variant = 'default',\n  } = props;\n  const Portal = usePoliteContainer();\n\n  const lineStrokeDasharray = dashed ? '3,2' : '0,0';\n  const from = { x, y: top };\n  const to = { x, y: top + height };\n  const strokeWidth = 1;\n  const isInRange = inRange(x, 0, width + 1);\n\n  let color = Colors.Background.Field.Neutral.Accent;\n\n  if (variant === 'select') {\n    color = Colors.Border.Primary.Accent;\n  }\n\n  return (\n    <>\n      {isInRange && (\n        <line\n          role=\"graphics-symbol\"\n          aria-label=\"crosshair\"\n          ref={ref}\n          x1={from.x}\n          y1={from.y}\n          x2={to.x}\n          y2={to.y}\n          stroke={color}\n          strokeWidth={strokeWidth}\n          strokeDasharray={lineStrokeDasharray}\n          shapeRendering=\"crispEdges\"\n          pointerEvents=\"none\"\n          tabIndex={focusable ? 0 : -1}\n          onKeyDown={onKeyDown}\n        />\n      )}\n      {bottomLabel && (\n        <Portal>\n          <BottomMagnifier\n            label={bottomLabel}\n            mouseX={x}\n            offset={offset}\n            color={color}\n            chartBounds={chartBounds}\n            isRotated={isBottomLabelRotated}\n          />\n        </Portal>\n      )}\n      {topLabel && (\n        <Portal>\n          <TopMagnifier\n            label={topLabel}\n            mouseX={x}\n            offset={offset}\n            color={color}\n            chartBounds={chartBounds}\n            isRotated={isTopLabelRotated}\n          />\n        </Portal>\n      )}\n    </>\n  );\n});\n\n(\n  VerticalCrosshair as typeof VerticalCrosshair & { displayName: string }\n).displayName = 'VerticalCrosshair';\n"],
-  "mappings": "AA6EI,mBAEI,KAFJ;AA7EJ,SAAS,eAAe;AACxB,SAAS,kBAA6C;AAEtD,OAAO,YAAY;AAEnB,SAAS,uBAAuB;AAChC,SAAS,oBAAoB;AAG7B,SAAS,0BAA0B;AAiC5B,MAAM,oBAAoB,WAG/B,CAAC,OAA+B,QAAQ;AACxC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,SAAS;AAAA,IACT,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAU;AAAA,EACZ,IAAI;AACJ,QAAM,SAAS,mBAAmB;AAElC,QAAM,sBAAsB,SAAS,QAAQ;AAC7C,QAAM,OAAO,EAAE,GAAG,GAAG,IAAI;AACzB,QAAM,KAAK,EAAE,GAAG,GAAG,MAAM,OAAO;AAChC,QAAM,cAAc;AACpB,QAAM,YAAY,QAAQ,GAAG,GAAG,QAAQ,CAAC;AAEzC,MAAI,QAAQ,OAAO,WAAW,MAAM,QAAQ;AAE5C,MAAI,YAAY,UAAU;AACxB,YAAQ,OAAO,OAAO,QAAQ;AAAA,EAChC;AAEA,SACE,iCACG;AAAA,iBACC;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,cAAW;AAAA,QACX;AAAA,QACA,IAAI,KAAK;AAAA,QACT,IAAI,KAAK;AAAA,QACT,IAAI,GAAG;AAAA,QACP,IAAI,GAAG;AAAA,QACP,QAAQ;AAAA,QACR;AAAA,QACA,iBAAiB;AAAA,QACjB,gBAAe;AAAA,QACf,eAAc;AAAA,QACd,UAAU,YAAY,IAAI;AAAA,QAC1B;AAAA;AAAA,IACF;AAAA,IAED,eACC,oBAAC,UACC;AAAA,MAAC;AAAA;AAAA,QACC,OAAO;AAAA,QACP,QAAQ;AAAA,QACR;AAAA,QACA;AAAA,QACA;AAAA,QACA,WAAW;AAAA;AAAA,IACb,GACF;AAAA,IAED,YACC,oBAAC,UACC;AAAA,MAAC;AAAA;AAAA,QACC,OAAO;AAAA,QACP,QAAQ;AAAA,QACR;AAAA,QACA;AAAA,QACA;AAAA,QACA,WAAW;AAAA;AAAA,IACb,GACF;AAAA,KAEJ;AAEJ,CAAC;AAGC,kBACA,cAAc;",
+  "sourcesContent": ["import { inRange } from 'lodash-es';\nimport { forwardRef, type KeyboardEventHandler } from 'react';\n\nimport Colors from '@dynatrace/strato-design-tokens/colors';\n\nimport { BottomMagnifier } from './components/BottomMagnifier.js';\nimport { TopMagnifier } from './components/TopMagnifier.js';\nimport type { MagnifierVariant } from './types.js';\nimport { WithChildren } from '../../../../core/types/with-children.js';\nimport { usePoliteContainer } from '../../../../overlays/hooks/usePoliteContainer.js';\n\ntype VerticalCrosshairProps = {\n  /** Coordinate x for crosshair */\n  x: number;\n  /** Height for crosshair line */\n  height: number;\n  /** Width for crosshair line */\n  width?: number;\n  /** Top margin for crosshair line */\n  top?: number;\n  /** Vertical offset for the bottom magnifier */\n  offset?: number;\n  /** Vertical offset for the top magnifier */\n  topOffset?: number;\n  /** Indicates wether the line needs to be dashed */\n  dashed?: boolean;\n  /** Makes the element accessible through keyboard */\n  focusable?: boolean;\n  /** Chart bounds to calculate magnifier position */\n  chartBounds?: DOMRect;\n  /** bottom label rotation boolean */\n  isBottomLabelRotated?: boolean;\n  /** top label rotation boolean */\n  isTopLabelRotated?: boolean;\n  /** Bottom label for crosshair */\n  bottomLabel?: string;\n  /** Top label for the crosshair */\n  topLabel?: string;\n  /** Triggers on key down */\n  onKeyDown?: KeyboardEventHandler;\n  /** The magnifier variant */\n  variant?: MagnifierVariant;\n};\n\nexport const VerticalCrosshair = forwardRef<\n  SVGLineElement,\n  VerticalCrosshairProps & WithChildren\n>((props: VerticalCrosshairProps, ref) => {\n  const {\n    x,\n    height,\n    width = Infinity,\n    top = 0,\n    offset = 0,\n    topOffset = 0,\n    dashed = true,\n    focusable,\n    chartBounds,\n    isBottomLabelRotated,\n    isTopLabelRotated,\n    topLabel,\n    bottomLabel,\n    onKeyDown,\n    variant = 'default',\n  } = props;\n  const Portal = usePoliteContainer();\n\n  const lineStrokeDasharray = dashed ? '3,2' : '0,0';\n  const from = { x, y: top };\n  const to = { x, y: top + height };\n  const strokeWidth = 1;\n  const isInRange = inRange(x, 0, width + 1);\n\n  let color = Colors.Background.Field.Neutral.Accent;\n\n  if (variant === 'select') {\n    color = Colors.Border.Primary.Accent;\n  }\n\n  return (\n    <>\n      {isInRange && (\n        <line\n          role=\"graphics-symbol\"\n          aria-label=\"crosshair\"\n          ref={ref}\n          x1={from.x}\n          y1={from.y}\n          x2={to.x}\n          y2={to.y}\n          stroke={color}\n          strokeWidth={strokeWidth}\n          strokeDasharray={lineStrokeDasharray}\n          shapeRendering=\"crispEdges\"\n          pointerEvents=\"none\"\n          tabIndex={focusable ? 0 : -1}\n          onKeyDown={onKeyDown}\n        />\n      )}\n      {bottomLabel && (\n        <Portal>\n          <BottomMagnifier\n            label={bottomLabel}\n            mouseX={x}\n            offset={offset}\n            color={color}\n            chartBounds={chartBounds}\n            isRotated={isBottomLabelRotated}\n          />\n        </Portal>\n      )}\n      {topLabel && (\n        <Portal>\n          <TopMagnifier\n            label={topLabel}\n            mouseX={x}\n            offset={topOffset}\n            color={color}\n            chartBounds={chartBounds}\n            isRotated={isTopLabelRotated}\n          />\n        </Portal>\n      )}\n    </>\n  );\n});\n\n(\n  VerticalCrosshair as typeof VerticalCrosshair & { displayName: string }\n).displayName = 'VerticalCrosshair';\n"],
+  "mappings": "AAgFI,mBAEI,KAFJ;AAhFJ,SAAS,eAAe;AACxB,SAAS,kBAA6C;AAEtD,OAAO,YAAY;AAEnB,SAAS,uBAAuB;AAChC,SAAS,oBAAoB;AAG7B,SAAS,0BAA0B;AAmC5B,MAAM,oBAAoB,WAG/B,CAAC,OAA+B,QAAQ;AACxC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAU;AAAA,EACZ,IAAI;AACJ,QAAM,SAAS,mBAAmB;AAElC,QAAM,sBAAsB,SAAS,QAAQ;AAC7C,QAAM,OAAO,EAAE,GAAG,GAAG,IAAI;AACzB,QAAM,KAAK,EAAE,GAAG,GAAG,MAAM,OAAO;AAChC,QAAM,cAAc;AACpB,QAAM,YAAY,QAAQ,GAAG,GAAG,QAAQ,CAAC;AAEzC,MAAI,QAAQ,OAAO,WAAW,MAAM,QAAQ;AAE5C,MAAI,YAAY,UAAU;AACxB,YAAQ,OAAO,OAAO,QAAQ;AAAA,EAChC;AAEA,SACE,iCACG;AAAA,iBACC;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,cAAW;AAAA,QACX;AAAA,QACA,IAAI,KAAK;AAAA,QACT,IAAI,KAAK;AAAA,QACT,IAAI,GAAG;AAAA,QACP,IAAI,GAAG;AAAA,QACP,QAAQ;AAAA,QACR;AAAA,QACA,iBAAiB;AAAA,QACjB,gBAAe;AAAA,QACf,eAAc;AAAA,QACd,UAAU,YAAY,IAAI;AAAA,QAC1B;AAAA;AAAA,IACF;AAAA,IAED,eACC,oBAAC,UACC;AAAA,MAAC;AAAA;AAAA,QACC,OAAO;AAAA,QACP,QAAQ;AAAA,QACR;AAAA,QACA;AAAA,QACA;AAAA,QACA,WAAW;AAAA;AAAA,IACb,GACF;AAAA,IAED,YACC,oBAAC,UACC;AAAA,MAAC;AAAA;AAAA,QACC,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,QAAQ;AAAA,QACR;AAAA,QACA;AAAA,QACA,WAAW;AAAA;AAAA,IACb,GACF;AAAA,KAEJ;AAEJ,CAAC;AAGC,kBACA,cAAc;",
   "names": []
 }

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

@@ -1,4 +1,4 @@
-._nm3s3e0-3-12-2 {
+._nm3s3e0-3-13-0 {
   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-12-2 {
+._nm3s3e1-3-13-0 {
   margin-left: -2px;
 }
-._nm3s3e2-3-12-2 {
+._nm3s3e2-3-13-0 {
   margin-left: var(--dt-spacings-size-2, 2px);
 }
-._nm3s3e3-3-12-2 {
+._nm3s3e3-3-13-0 {
   margin-top: var(--dt-spacings-size-2, 2px);
 }
-._nm3s3e4-3-12-2 {
+._nm3s3e4-3-13-0 {
   margin-top: -2px;
 }
-._nm3s3e5-3-12-2 {
+._nm3s3e5-3-13-0 {
   transform: rotate(-90deg);
   transform-origin: left bottom;
   margin-top: -2px;
 }
-._nm3s3e6-3-12-2 {
+._nm3s3e6-3-13-0 {
   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-12-2";
-var left = "_nm3s3e1-3-12-2";
-var magnifier = "_nm3s3e0-3-12-2";
+var bottom = "_nm3s3e3-3-13-0";
+var left = "_nm3s3e1-3-13-0";
+var magnifier = "_nm3s3e0-3-13-0";
 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-12-2";
-var rotatedBottomStyle = "_nm3s3e6-3-12-2";
-var rotatedTopStyle = "_nm3s3e5-3-12-2";
-var top = "_nm3s3e4-3-12-2";
+var right = "_nm3s3e2-3-13-0";
+var rotatedBottomStyle = "_nm3s3e6-3-13-0";
+var rotatedTopStyle = "_nm3s3e5-3-13-0";
+var top = "_nm3s3e4-3-13-0";
 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-12-2';\nexport var left = '_nm3s3e1-3-12-2';\nexport var magnifier = '_nm3s3e0-3-12-2';\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-2';\nexport var rotatedBottomStyle = '_nm3s3e6-3-12-2';\nexport var rotatedTopStyle = '_nm3s3e5-3-12-2';\nexport var top = '_nm3s3e4-3-12-2';"],
+  "sourcesContent": ["import './Magnifier.css';\nexport var bottom = '_nm3s3e3-3-13-0';\nexport var left = '_nm3s3e1-3-13-0';\nexport var magnifier = '_nm3s3e0-3-13-0';\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-13-0';\nexport var rotatedBottomStyle = '_nm3s3e6-3-13-0';\nexport var rotatedTopStyle = '_nm3s3e5-3-13-0';\nexport var top = '_nm3s3e4-3-13-0';"],
   "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/crosshair/components/TopMagnifier.js

@@ -8,7 +8,7 @@ import {
 import { Magnifier } from "./Magnifier.js";
 import { useMagnifierPosition } from "../hooks/useMagnifierPosition.js";
 function TopMagnifier(props) {
-  const { label, mouseX, color, chartBounds, isRotated } = props;
+  const { label, mouseX, offset, color, chartBounds, isRotated } = props;
   const { magnifierPosition: left, magnifierRef } = useMagnifierPosition(
     mouseX,
     chartBounds?.left ?? 0,
@@ -16,7 +16,7 @@ function TopMagnifier(props) {
     "horizontal",
     isRotated
   );
-  const top = (chartBounds?.top || 0) - (magnifierRef.current?.clientHeight || 0);
+  const top = (chartBounds?.top || 0) - (magnifierRef.current?.clientHeight || 0) - offset;
   return /* @__PURE__ */ jsx(
     Magnifier,
     {

package/esm/charts/core/components/crosshair/components/TopMagnifier.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/core/components/crosshair/components/TopMagnifier.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\n\nimport {\n  top as topStyle,\n  magnifier,\n  rotatedTopStyle,\n} from './Magnifier.sty.js';\nimport { Magnifier } from './Magnifier.js';\nimport { useMagnifierPosition } from '../hooks/useMagnifierPosition.js';\n\nexport function TopMagnifier(\n  props: Readonly<{\n    label: string;\n    mouseX: number;\n    offset: number;\n    color: string;\n    chartBounds?: DOMRect;\n    isRotated?: boolean;\n  }>,\n) {\n  const { label, mouseX, color, chartBounds, isRotated } = props;\n\n  const { magnifierPosition: left, magnifierRef } = useMagnifierPosition(\n    mouseX,\n    chartBounds?.left ?? 0,\n    chartBounds?.right ?? 0,\n    'horizontal',\n    isRotated,\n  );\n  const top =\n    (chartBounds?.top || 0) - (magnifierRef.current?.clientHeight || 0);\n\n  return (\n    <Magnifier\n      aria-label=\"top axis magnifier\"\n      ref={magnifierRef}\n      className={clsx(magnifier, isRotated ? rotatedTopStyle : topStyle)}\n      style={{ top, left, backgroundColor: color }}\n    >\n      {label}\n    </Magnifier>\n  );\n}\n"],
-  "mappings": "AAiCI;AAjCJ,OAAO,UAAU;AAEjB;AAAA,EACE,OAAO;AAAA,EACP;AAAA,EACA;AAAA,OACK;AACP,SAAS,iBAAiB;AAC1B,SAAS,4BAA4B;AAE9B,SAAS,aACd,OAQA;AACA,QAAM,EAAE,OAAO,QAAQ,OAAO,aAAa,UAAU,IAAI;AAEzD,QAAM,EAAE,mBAAmB,MAAM,aAAa,IAAI;AAAA,IAChD;AAAA,IACA,aAAa,QAAQ;AAAA,IACrB,aAAa,SAAS;AAAA,IACtB;AAAA,IACA;AAAA,EACF;AACA,QAAM,OACH,aAAa,OAAO,MAAM,aAAa,SAAS,gBAAgB;AAEnE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,cAAW;AAAA,MACX,KAAK;AAAA,MACL,WAAW,KAAK,WAAW,YAAY,kBAAkB,QAAQ;AAAA,MACjE,OAAO,EAAE,KAAK,MAAM,iBAAiB,MAAM;AAAA,MAE1C;AAAA;AAAA,EACH;AAEJ;",
+  "sourcesContent": ["import clsx from 'clsx';\n\nimport {\n  top as topStyle,\n  magnifier,\n  rotatedTopStyle,\n} from './Magnifier.sty.js';\nimport { Magnifier } from './Magnifier.js';\nimport { useMagnifierPosition } from '../hooks/useMagnifierPosition.js';\n\nexport function TopMagnifier(\n  props: Readonly<{\n    label: string;\n    mouseX: number;\n    offset: number;\n    color: string;\n    chartBounds?: DOMRect;\n    isRotated?: boolean;\n  }>,\n) {\n  const { label, mouseX, offset, color, chartBounds, isRotated } = props;\n\n  const { magnifierPosition: left, magnifierRef } = useMagnifierPosition(\n    mouseX,\n    chartBounds?.left ?? 0,\n    chartBounds?.right ?? 0,\n    'horizontal',\n    isRotated,\n  );\n  const top =\n    (chartBounds?.top || 0) -\n    (magnifierRef.current?.clientHeight || 0) -\n    offset;\n\n  return (\n    <Magnifier\n      aria-label=\"top axis magnifier\"\n      ref={magnifierRef}\n      className={clsx(magnifier, isRotated ? rotatedTopStyle : topStyle)}\n      style={{ top, left, backgroundColor: color }}\n    >\n      {label}\n    </Magnifier>\n  );\n}\n"],
+  "mappings": "AAmCI;AAnCJ,OAAO,UAAU;AAEjB;AAAA,EACE,OAAO;AAAA,EACP;AAAA,EACA;AAAA,OACK;AACP,SAAS,iBAAiB;AAC1B,SAAS,4BAA4B;AAE9B,SAAS,aACd,OAQA;AACA,QAAM,EAAE,OAAO,QAAQ,QAAQ,OAAO,aAAa,UAAU,IAAI;AAEjE,QAAM,EAAE,mBAAmB,MAAM,aAAa,IAAI;AAAA,IAChD;AAAA,IACA,aAAa,QAAQ;AAAA,IACrB,aAAa,SAAS;AAAA,IACtB;AAAA,IACA;AAAA,EACF;AACA,QAAM,OACH,aAAa,OAAO,MACpB,aAAa,SAAS,gBAAgB,KACvC;AAEF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,cAAW;AAAA,MACX,KAAK;AAAA,MACL,WAAW,KAAK,WAAW,YAAY,kBAAkB,QAAQ;AAAA,MACjE,OAAO,EAAE,KAAK,MAAM,iBAAiB,MAAM;AAAA,MAE1C;AAAA;AAAA,EACH;AAEJ;",
   "names": []
 }

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

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

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

@@ -74,6 +74,7 @@ const InteractionsOverlay = forwardRef((props, forwardedRef) => {
   const overlappingInteractionsProps = {
     selectionArea,
     eventCancelled,
+    isPointerDownRef,
     onSelectEnd,
     lastMousePositionRef,
     pinned,
@@ -116,6 +117,7 @@ const InteractionsOverlay = forwardRef((props, forwardedRef) => {
     panDeltaRef,
     selectionArea,
     eventCancelled,
+    isPointerDownRef,
     onSelectEnd,
     onModeChange,
     interaction: interactions[getActiveMode(mode, event, zoomDisabled, isPanDisabled)]

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  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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",
+  "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    isPointerDownRef,\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      isPointerDownRef,\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-12-2", variantClassNames: { mode: { explore: "_nfahiq1-3-12-2", pan: "_nfahiq2-3-12-2", zoom: "_nfahiq3-3-12-2", zoomOut: "_nfahiq4-3-12-2" } }, defaultVariants: {}, compoundVariants: [] });
-var interactionsOverlay = "_nfahiq5-3-12-2";
+var chartEventsWrapper = _7a468({ defaultClassName: "_nfahiq0-3-13-0", variantClassNames: { mode: { explore: "_nfahiq1-3-13-0", pan: "_nfahiq2-3-13-0", zoom: "_nfahiq3-3-13-0", zoomOut: "_nfahiq4-3-13-0" } }, defaultVariants: {}, compoundVariants: [] });
+var interactionsOverlay = "_nfahiq5-3-13-0";
 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-12-2',variantClassNames:{mode:{explore:'_nfahiq1-3-12-2',pan:'_nfahiq2-3-12-2',zoom:'_nfahiq3-3-12-2',zoomOut:'_nfahiq4-3-12-2'}},defaultVariants:{},compoundVariants:[]});\nexport var interactionsOverlay = '_nfahiq5-3-12-2';"],
+  "sourcesContent": ["import './InteractionsOverlay.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var chartEventsWrapper = _7a468({defaultClassName:'_nfahiq0-3-13-0',variantClassNames:{mode:{explore:'_nfahiq1-3-13-0',pan:'_nfahiq2-3-13-0',zoom:'_nfahiq3-3-13-0',zoomOut:'_nfahiq4-3-13-0'}},defaultVariants:{},compoundVariants:[]});\nexport var interactionsOverlay = '_nfahiq5-3-13-0';"],
   "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": []
 }

package/esm/charts/core/components/interactions-overlay/interactions/explore/keyboardInteractions.js

@@ -2,6 +2,7 @@ import { isUndefined } from "lodash-es";
 const exploreKeyboardEscape = ({
   selectionArea,
   eventCancelled,
+  isPointerDownRef,
   onSelectEnd,
   lastMousePositionRef,
   pinned,
@@ -10,7 +11,9 @@ const exploreKeyboardEscape = ({
   onModeChange
 }) => {
   if (!isUndefined(selectionArea)) {
-    eventCancelled.current = true;
+    if (isPointerDownRef.current) {
+      eventCancelled.current = true;
+    }
     onSelectEnd?.({ cancelled: true });
     if (lastMousePositionRef.current) {
       onHover?.({