@dynatrace/strato-components 3.3.3 → 3.5.0

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/core/components/chart-layout/context/ChartLayoutOrientation.context.ts"],
-  "sourcesContent": ["import { createContext } from 'react';\n\nimport type { Orientation } from '../../../../../core/types/orientation.js';\nimport { ORIENTATION } from '../types/constants.js';\n\nexport const ChartLayoutOrientationContext = createContext<{\n  orientation: Orientation;\n}>({\n  orientation: ORIENTATION.Vertical,\n});\n\nChartLayoutOrientationContext['displayName'] = 'ChartLayoutOrientationContext';\n"],
+  "sourcesContent": ["import { createContext } from 'react';\n\nimport type { Orientation } from '../../../../../core/types/orientation.js';\nimport { ORIENTATION } from '../../../constants.js';\n\nexport const ChartLayoutOrientationContext = createContext<{\n  orientation: Orientation;\n}>({\n  orientation: ORIENTATION.Vertical,\n});\n\nChartLayoutOrientationContext['displayName'] = 'ChartLayoutOrientationContext';\n"],
   "mappings": "AAAA,SAAS,qBAAqB;AAG9B,SAAS,mBAAmB;AAErB,MAAM,gCAAgC,cAE1C;AAAA,EACD,aAAa,YAAY;AAC3B,CAAC;AAED,8BAA8B,aAAa,IAAI;",
   "names": []
 }

package/esm/charts/core/components/chart-layout/hooks/useAutomaticRatio.js

@@ -1,10 +1,10 @@
 import { useCallback, useEffect, useState } from "react";
+import { ORIENTATION } from "../../../constants.js";
 import {
   CATEGORICAL_LEGEND_CLASS,
   MIN_ITEM_WIDTH
 } from "../../legend/categorical/constants.js";
 import { RANGE_LEGEND_CLASS } from "../../legend/range/constants.js";
-import { ORIENTATION } from "../types/constants.js";
 import {
   getLabelsHeightForRangeBottom,
   getMaxItemSizeForCategoricalHorizontal,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/core/components/chart-layout/hooks/useAutomaticRatio.tsx"],
-  "sourcesContent": ["import { useCallback, useEffect, useState } from 'react';\n\nimport { Dimensions } from '../../../types/dimensions.js';\nimport { ChartLegendOrientation, LegendRatio } from '../../../types/legend.js';\nimport {\n  CATEGORICAL_LEGEND_CLASS,\n  MIN_ITEM_WIDTH,\n} from '../../legend/categorical/constants.js';\nimport { RANGE_LEGEND_CLASS } from '../../legend/range/constants.js';\nimport { ORIENTATION } from '../types/constants.js';\nimport {\n  getLabelsHeightForRangeBottom,\n  getMaxItemSizeForCategoricalHorizontal,\n  getMaxLabelForRangeHorizontal,\n  getSizeForCategoricaVertical,\n} from '../utils/automatic-ratio.js';\n\ninterface AutomaticRatioParams {\n  legendCandidateSize?: number;\n  legendRef: (node: HTMLDivElement) => void;\n  readyForAutoRatio: boolean;\n  refreshAutoRatio: () => void;\n}\n\n/**\n * Hook responsible of determining the best ratio to apply to the chart in order\n * to fully display the content of the legend.\n * @param orientation -\n * @param ratio -\n * @param containerAvailableArea -\n */\nexport const useAutomaticRatio = (\n  orientation: ChartLegendOrientation,\n  ratio: LegendRatio,\n  containerAvailableArea: Dimensions,\n): AutomaticRatioParams => {\n  const [readyForAutoRatio, setReadyForAutoRatio] = useState(false);\n  const [idealLegendSize, setIdealLegendSize] = useState<number | undefined>(\n    undefined,\n  );\n  const resetAutoRatio = () => {\n    setReadyForAutoRatio(false);\n    setIdealLegendSize(undefined);\n  };\n\n  useEffect(() => {\n    resetAutoRatio();\n  }, [orientation]);\n\n  const legendRef = useCallback(\n    (node: HTMLDivElement) => {\n      const { height: containerHeight } = containerAvailableArea;\n      const hasAutoRatioEnabled = !ratio || ratio === 'auto';\n\n      if (!hasAutoRatioEnabled) {\n        setReadyForAutoRatio(true);\n        return;\n      }\n      if (node === null || containerHeight === 0 || readyForAutoRatio) {\n        return;\n      }\n\n      let longestSeries;\n\n      const isCategoricalLegend = Array.from(node.classList).includes(\n        CATEGORICAL_LEGEND_CLASS,\n      );\n      const isRangeLegend = Array.from(node.classList).includes(\n        RANGE_LEGEND_CLASS,\n      );\n\n      if (isCategoricalLegend) {\n        longestSeries =\n          orientation === ORIENTATION.Horizontal\n            ? getMaxItemSizeForCategoricalHorizontal(node, containerHeight)\n            : getSizeForCategoricaVertical();\n      }\n      if (isRangeLegend) {\n        const hasLoadedLabels = node.getElementsByTagName('g').length !== 0;\n        if (!hasLoadedLabels) {\n          return;\n        }\n\n        longestSeries =\n          orientation === ORIENTATION.Horizontal\n            ? getMaxLabelForRangeHorizontal(node)\n            : getLabelsHeightForRangeBottom(node);\n      }\n\n      if (!readyForAutoRatio) {\n        setIdealLegendSize(\n          longestSeries !== undefined && longestSeries > 0\n            ? longestSeries\n            : MIN_ITEM_WIDTH,\n        );\n        setReadyForAutoRatio(true);\n      }\n    },\n    [readyForAutoRatio, containerAvailableArea, ratio, orientation],\n  );\n\n  return {\n    legendCandidateSize: idealLegendSize,\n    legendRef,\n    readyForAutoRatio,\n    refreshAutoRatio: resetAutoRatio,\n  };\n};\n"],
-  "mappings": "AAAA,SAAS,aAAa,WAAW,gBAAgB;AAIjD;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,SAAS,0BAA0B;AACnC,SAAS,mBAAmB;AAC5B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAgBA,MAAM,oBAAoB,CAC/B,aACA,OACA,2BACyB;AACzB,QAAM,CAAC,mBAAmB,oBAAoB,IAAI,SAAS,KAAK;AAChE,QAAM,CAAC,iBAAiB,kBAAkB,IAAI;AAAA,IAC5C;AAAA,EACF;AACA,QAAM,iBAAiB,MAAM;AAC3B,yBAAqB,KAAK;AAC1B,uBAAmB,MAAS;AAAA,EAC9B;AAEA,YAAU,MAAM;AACd,mBAAe;AAAA,EACjB,GAAG,CAAC,WAAW,CAAC;AAEhB,QAAM,YAAY;AAAA,IAChB,CAAC,SAAyB;AACxB,YAAM,EAAE,QAAQ,gBAAgB,IAAI;AACpC,YAAM,sBAAsB,CAAC,SAAS,UAAU;AAEhD,UAAI,CAAC,qBAAqB;AACxB,6BAAqB,IAAI;AACzB;AAAA,MACF;AACA,UAAI,SAAS,QAAQ,oBAAoB,KAAK,mBAAmB;AAC/D;AAAA,MACF;AAEA,UAAI;AAEJ,YAAM,sBAAsB,MAAM,KAAK,KAAK,SAAS,EAAE;AAAA,QACrD;AAAA,MACF;AACA,YAAM,gBAAgB,MAAM,KAAK,KAAK,SAAS,EAAE;AAAA,QAC/C;AAAA,MACF;AAEA,UAAI,qBAAqB;AACvB,wBACE,gBAAgB,YAAY,aACxB,uCAAuC,MAAM,eAAe,IAC5D,6BAA6B;AAAA,MACrC;AACA,UAAI,eAAe;AACjB,cAAM,kBAAkB,KAAK,qBAAqB,GAAG,EAAE,WAAW;AAClE,YAAI,CAAC,iBAAiB;AACpB;AAAA,QACF;AAEA,wBACE,gBAAgB,YAAY,aACxB,8BAA8B,IAAI,IAClC,8BAA8B,IAAI;AAAA,MAC1C;AAEA,UAAI,CAAC,mBAAmB;AACtB;AAAA,UACE,kBAAkB,UAAa,gBAAgB,IAC3C,gBACA;AAAA,QACN;AACA,6BAAqB,IAAI;AAAA,MAC3B;AAAA,IACF;AAAA,IACA,CAAC,mBAAmB,wBAAwB,OAAO,WAAW;AAAA,EAChE;AAEA,SAAO;AAAA,IACL,qBAAqB;AAAA,IACrB;AAAA,IACA;AAAA,IACA,kBAAkB;AAAA,EACpB;AACF;",
+  "sourcesContent": ["import { useCallback, useEffect, useState } from 'react';\n\nimport { ORIENTATION } from '../../../constants.js';\nimport { Dimensions } from '../../../types/dimensions.js';\nimport { ChartLegendOrientation, LegendRatio } from '../../../types/legend.js';\nimport {\n  CATEGORICAL_LEGEND_CLASS,\n  MIN_ITEM_WIDTH,\n} from '../../legend/categorical/constants.js';\nimport { RANGE_LEGEND_CLASS } from '../../legend/range/constants.js';\nimport {\n  getLabelsHeightForRangeBottom,\n  getMaxItemSizeForCategoricalHorizontal,\n  getMaxLabelForRangeHorizontal,\n  getSizeForCategoricaVertical,\n} from '../utils/automatic-ratio.js';\n\ninterface AutomaticRatioParams {\n  legendCandidateSize?: number;\n  legendRef: (node: HTMLDivElement) => void;\n  readyForAutoRatio: boolean;\n  refreshAutoRatio: () => void;\n}\n\n/**\n * Hook responsible of determining the best ratio to apply to the chart in order\n * to fully display the content of the legend.\n * @param orientation -\n * @param ratio -\n * @param containerAvailableArea -\n */\nexport const useAutomaticRatio = (\n  orientation: ChartLegendOrientation,\n  ratio: LegendRatio,\n  containerAvailableArea: Dimensions,\n): AutomaticRatioParams => {\n  const [readyForAutoRatio, setReadyForAutoRatio] = useState(false);\n  const [idealLegendSize, setIdealLegendSize] = useState<number | undefined>(\n    undefined,\n  );\n  const resetAutoRatio = () => {\n    setReadyForAutoRatio(false);\n    setIdealLegendSize(undefined);\n  };\n\n  useEffect(() => {\n    resetAutoRatio();\n  }, [orientation]);\n\n  const legendRef = useCallback(\n    (node: HTMLDivElement) => {\n      const { height: containerHeight } = containerAvailableArea;\n      const hasAutoRatioEnabled = !ratio || ratio === 'auto';\n\n      if (!hasAutoRatioEnabled) {\n        setReadyForAutoRatio(true);\n        return;\n      }\n      if (node === null || containerHeight === 0 || readyForAutoRatio) {\n        return;\n      }\n\n      let longestSeries;\n\n      const isCategoricalLegend = Array.from(node.classList).includes(\n        CATEGORICAL_LEGEND_CLASS,\n      );\n      const isRangeLegend = Array.from(node.classList).includes(\n        RANGE_LEGEND_CLASS,\n      );\n\n      if (isCategoricalLegend) {\n        longestSeries =\n          orientation === ORIENTATION.Horizontal\n            ? getMaxItemSizeForCategoricalHorizontal(node, containerHeight)\n            : getSizeForCategoricaVertical();\n      }\n      if (isRangeLegend) {\n        const hasLoadedLabels = node.getElementsByTagName('g').length !== 0;\n        if (!hasLoadedLabels) {\n          return;\n        }\n\n        longestSeries =\n          orientation === ORIENTATION.Horizontal\n            ? getMaxLabelForRangeHorizontal(node)\n            : getLabelsHeightForRangeBottom(node);\n      }\n\n      if (!readyForAutoRatio) {\n        setIdealLegendSize(\n          longestSeries !== undefined && longestSeries > 0\n            ? longestSeries\n            : MIN_ITEM_WIDTH,\n        );\n        setReadyForAutoRatio(true);\n      }\n    },\n    [readyForAutoRatio, containerAvailableArea, ratio, orientation],\n  );\n\n  return {\n    legendCandidateSize: idealLegendSize,\n    legendRef,\n    readyForAutoRatio,\n    refreshAutoRatio: resetAutoRatio,\n  };\n};\n"],
+  "mappings": "AAAA,SAAS,aAAa,WAAW,gBAAgB;AAEjD,SAAS,mBAAmB;AAG5B;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,SAAS,0BAA0B;AACnC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAgBA,MAAM,oBAAoB,CAC/B,aACA,OACA,2BACyB;AACzB,QAAM,CAAC,mBAAmB,oBAAoB,IAAI,SAAS,KAAK;AAChE,QAAM,CAAC,iBAAiB,kBAAkB,IAAI;AAAA,IAC5C;AAAA,EACF;AACA,QAAM,iBAAiB,MAAM;AAC3B,yBAAqB,KAAK;AAC1B,uBAAmB,MAAS;AAAA,EAC9B;AAEA,YAAU,MAAM;AACd,mBAAe;AAAA,EACjB,GAAG,CAAC,WAAW,CAAC;AAEhB,QAAM,YAAY;AAAA,IAChB,CAAC,SAAyB;AACxB,YAAM,EAAE,QAAQ,gBAAgB,IAAI;AACpC,YAAM,sBAAsB,CAAC,SAAS,UAAU;AAEhD,UAAI,CAAC,qBAAqB;AACxB,6BAAqB,IAAI;AACzB;AAAA,MACF;AACA,UAAI,SAAS,QAAQ,oBAAoB,KAAK,mBAAmB;AAC/D;AAAA,MACF;AAEA,UAAI;AAEJ,YAAM,sBAAsB,MAAM,KAAK,KAAK,SAAS,EAAE;AAAA,QACrD;AAAA,MACF;AACA,YAAM,gBAAgB,MAAM,KAAK,KAAK,SAAS,EAAE;AAAA,QAC/C;AAAA,MACF;AAEA,UAAI,qBAAqB;AACvB,wBACE,gBAAgB,YAAY,aACxB,uCAAuC,MAAM,eAAe,IAC5D,6BAA6B;AAAA,MACrC;AACA,UAAI,eAAe;AACjB,cAAM,kBAAkB,KAAK,qBAAqB,GAAG,EAAE,WAAW;AAClE,YAAI,CAAC,iBAAiB;AACpB;AAAA,QACF;AAEA,wBACE,gBAAgB,YAAY,aACxB,8BAA8B,IAAI,IAClC,8BAA8B,IAAI;AAAA,MAC1C;AAEA,UAAI,CAAC,mBAAmB;AACtB;AAAA,UACE,kBAAkB,UAAa,gBAAgB,IAC3C,gBACA;AAAA,QACN;AACA,6BAAqB,IAAI;AAAA,MAC3B;AAAA,IACF;AAAA,IACA,CAAC,mBAAmB,wBAAwB,OAAO,WAAW;AAAA,EAChE;AAEA,SAAO;AAAA,IACL,qBAAqB;AAAA,IACrB;AAAA,IACA;AAAA,IACA,kBAAkB;AAAA,EACpB;AACF;",
   "names": []
 }

package/esm/charts/core/components/chart-layout/hooks/useChartLayoutLoading.js

@@ -0,0 +1,7 @@
+import { useContext } from "react";
+import { LoadingContext } from "../context/Loading.context.js";
+const useChartLayoutLoading = () => useContext(LoadingContext);
+export {
+  useChartLayoutLoading
+};
+//# sourceMappingURL=useChartLayoutLoading.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../src/charts/core/components/chart-layout/hooks/useChartLayoutLoading.ts"],
+  "sourcesContent": ["import { useContext } from 'react';\n\nimport { LoadingContext } from '../context/Loading.context.js';\n\n/**\n * @internal\n */\nexport const useChartLayoutLoading = () => useContext(LoadingContext);\n"],
+  "mappings": "AAAA,SAAS,kBAAkB;AAE3B,SAAS,sBAAsB;AAKxB,MAAM,wBAAwB,MAAM,WAAW,cAAc;",
+  "names": []
+}

package/esm/charts/core/components/chart-layout/types/constants.js

@@ -20,10 +20,6 @@ const MAX_AUTO_RATIO_SIZE = 0.3;
 const MIN_LEGEND_HEIGHT = 30;
 const MIN_LEGEND_WIDTH = 70;
 const MIN_PLOT_SIZE = 100;
-const ORIENTATION = {
-  Horizontal: "horizontal",
-  Vertical: "vertical"
-};
 const TEMPLATE_AREA_FOR_GRAPH = '"graphArea"';
 const TEMPLATE_AREA_FOR_RESIZABLE_CHART_LAYOUT = '"graphArea horizontalResize verticalLegend" "verticalResize . ." "horizontalLegend horizontalLegend horizontalLegend"';
 const TEMPLATE_AREA_FOR_FIXED_CHART_LAYOUT = '"graphArea verticalLegend" "horizontalLegend horizontalLegend"';
@@ -39,7 +35,6 @@ export {
   MIN_LEGEND_HEIGHT,
   MIN_LEGEND_WIDTH,
   MIN_PLOT_SIZE,
-  ORIENTATION,
   TEMPLATE_AREA_FOR_FIXED_CHART_LAYOUT,
   TEMPLATE_AREA_FOR_GRAPH,
   TEMPLATE_AREA_FOR_RESIZABLE_CHART_LAYOUT

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/core/components/chart-layout/types/constants.ts"],
-  "sourcesContent": ["import { ChartLayoutLegendSizes, LegendProps } from './chart-layout.js';\nimport type { Orientation } from '../../../../../core/types/orientation.js';\nimport { defaultRatio } from '../../../constants.js';\nimport type { MappedObject } from '../../../types/helpers/mapped-object.js';\nimport { LegendPosition } from '../../../types/legend.js';\n\nexport const DEFAULT_POSITION: LegendPosition = 'auto';\nexport const DEFAULT_RATIO_BOUNDARIES: ChartLayoutLegendSizes = {\n  minWidth: 0.1,\n  minHeight: 0.1,\n  maxWidth: 0.8,\n  maxHeight: 0.7,\n};\nexport const DEFAULT_LAYOUT_HEIGHT = '300';\nexport const DEFAULT_LAYOUT_WIDTH = '100%';\nexport const DEFAULT_LEGEND_CONFIG: LegendProps = {\n  position: DEFAULT_POSITION,\n  ratioBoundaries: DEFAULT_RATIO_BOUNDARIES,\n  ratio: defaultRatio,\n  overrideRatio: undefined,\n};\nexport const LOADING_STATE_OPACITY = 40;\nexport const DEFAULT_RESIZER_SIZE = 15;\nexport const MAX_AUTO_RATIO_SIZE = 0.3;\nexport const MIN_LEGEND_HEIGHT = 30; // px\nexport const MIN_LEGEND_WIDTH = 70; // px\nexport const MIN_PLOT_SIZE = 100; // px\nexport const ORIENTATION: MappedObject<Orientation> = {\n  Horizontal: 'horizontal',\n  Vertical: 'vertical',\n};\nexport const TEMPLATE_AREA_FOR_GRAPH = '\"graphArea\"';\nexport const TEMPLATE_AREA_FOR_RESIZABLE_CHART_LAYOUT =\n  '\"graphArea horizontalResize verticalLegend\" \"verticalResize . .\" \"horizontalLegend horizontalLegend horizontalLegend\"';\nexport const TEMPLATE_AREA_FOR_FIXED_CHART_LAYOUT =\n  '\"graphArea verticalLegend\" \"horizontalLegend horizontalLegend\"';\n"],
-  "mappings": "AAEA,SAAS,oBAAoB;AAItB,MAAM,mBAAmC;AACzC,MAAM,2BAAmD;AAAA,EAC9D,UAAU;AAAA,EACV,WAAW;AAAA,EACX,UAAU;AAAA,EACV,WAAW;AACb;AACO,MAAM,wBAAwB;AAC9B,MAAM,uBAAuB;AAC7B,MAAM,wBAAqC;AAAA,EAChD,UAAU;AAAA,EACV,iBAAiB;AAAA,EACjB,OAAO;AAAA,EACP,eAAe;AACjB;AACO,MAAM,wBAAwB;AAC9B,MAAM,uBAAuB;AAC7B,MAAM,sBAAsB;AAC5B,MAAM,oBAAoB;AAC1B,MAAM,mBAAmB;AACzB,MAAM,gBAAgB;AACtB,MAAM,cAAyC;AAAA,EACpD,YAAY;AAAA,EACZ,UAAU;AACZ;AACO,MAAM,0BAA0B;AAChC,MAAM,2CACX;AACK,MAAM,uCACX;",
+  "sourcesContent": ["import { ChartLayoutLegendSizes, LegendProps } from './chart-layout.js';\nimport { defaultRatio } from '../../../constants.js';\nimport { LegendPosition } from '../../../types/legend.js';\n\nexport const DEFAULT_POSITION: LegendPosition = 'auto';\nexport const DEFAULT_RATIO_BOUNDARIES: ChartLayoutLegendSizes = {\n  minWidth: 0.1,\n  minHeight: 0.1,\n  maxWidth: 0.8,\n  maxHeight: 0.7,\n};\nexport const DEFAULT_LAYOUT_HEIGHT = '300';\nexport const DEFAULT_LAYOUT_WIDTH = '100%';\nexport const DEFAULT_LEGEND_CONFIG: LegendProps = {\n  position: DEFAULT_POSITION,\n  ratioBoundaries: DEFAULT_RATIO_BOUNDARIES,\n  ratio: defaultRatio,\n  overrideRatio: undefined,\n};\nexport const LOADING_STATE_OPACITY = 40;\nexport const DEFAULT_RESIZER_SIZE = 15;\nexport const MAX_AUTO_RATIO_SIZE = 0.3;\nexport const MIN_LEGEND_HEIGHT = 30; // px\nexport const MIN_LEGEND_WIDTH = 70; // px\nexport const MIN_PLOT_SIZE = 100; // px\nexport const TEMPLATE_AREA_FOR_GRAPH = '\"graphArea\"';\nexport const TEMPLATE_AREA_FOR_RESIZABLE_CHART_LAYOUT =\n  '\"graphArea horizontalResize verticalLegend\" \"verticalResize . .\" \"horizontalLegend horizontalLegend horizontalLegend\"';\nexport const TEMPLATE_AREA_FOR_FIXED_CHART_LAYOUT =\n  '\"graphArea verticalLegend\" \"horizontalLegend horizontalLegend\"';\n"],
+  "mappings": "AACA,SAAS,oBAAoB;AAGtB,MAAM,mBAAmC;AACzC,MAAM,2BAAmD;AAAA,EAC9D,UAAU;AAAA,EACV,WAAW;AAAA,EACX,UAAU;AAAA,EACV,WAAW;AACb;AACO,MAAM,wBAAwB;AAC9B,MAAM,uBAAuB;AAC7B,MAAM,wBAAqC;AAAA,EAChD,UAAU;AAAA,EACV,iBAAiB;AAAA,EACjB,OAAO;AAAA,EACP,eAAe;AACjB;AACO,MAAM,wBAAwB;AAC9B,MAAM,uBAAuB;AAC7B,MAAM,sBAAsB;AAC5B,MAAM,oBAAoB;AAC1B,MAAM,mBAAmB;AACzB,MAAM,gBAAgB;AACtB,MAAM,0BAA0B;AAChC,MAAM,2CACX;AACK,MAAM,uCACX;",
   "names": []
 }

package/esm/charts/core/components/chart-layout/utils/get-areas-size-on-drag.js

@@ -1,9 +1,9 @@
 import { calculateGraphSize } from "./calculate-graph-size.js";
+import { ORIENTATION } from "../../../constants.js";
 import {
   MIN_LEGEND_HEIGHT,
   MIN_LEGEND_WIDTH,
-  MIN_PLOT_SIZE,
-  ORIENTATION
+  MIN_PLOT_SIZE
 } from "../types/constants.js";
 const getAreasWidthSize = (containerHeight, containerWidth, minWidth, maxWidth, resizerWrapperSize, draggedAmount, legendContainer) => {
   const minLegendWidth = Math.min(containerWidth * minWidth, MIN_LEGEND_WIDTH);

package/esm/charts/core/components/chart-layout/utils/get-areas-size-on-drag.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/core/components/chart-layout/utils/get-areas-size-on-drag.ts"],
-  "sourcesContent": ["import { calculateGraphSize } from './calculate-graph-size.js';\nimport type { Orientation } from '../../../../../core/types/orientation.js';\nimport type { Dimensions } from '../../../types/dimensions.js';\nimport type { AreasSizes } from '../types/chart-layout-internal.js';\nimport {\n  MIN_LEGEND_HEIGHT,\n  MIN_LEGEND_WIDTH,\n  MIN_PLOT_SIZE,\n  ORIENTATION,\n} from '../types/constants.js';\n\ntype GetAreasSizeHandlerProps = (\n  containerHeight: number,\n  containerWidth: number,\n  minWidth: number,\n  maxWidth: number,\n  resizerWrapperSize: number,\n  draggedAmount: number,\n  legendContainer: HTMLDivElement,\n) => AreasSizes | undefined;\n\nconst getAreasWidthSize: GetAreasSizeHandlerProps = (\n  containerHeight,\n  containerWidth,\n  minWidth,\n  maxWidth,\n  resizerWrapperSize,\n  draggedAmount,\n  legendContainer,\n) => {\n  const minLegendWidth = Math.min(containerWidth * minWidth, MIN_LEGEND_WIDTH);\n\n  if (legendContainer.clientWidth - draggedAmount <= minLegendWidth) {\n    const legend: Dimensions = {\n      height: containerHeight,\n      width: minLegendWidth,\n    };\n\n    const graph: Dimensions = {\n      width: calculateGraphSize(\n        containerWidth,\n        minLegendWidth,\n        resizerWrapperSize,\n      ),\n      height: containerHeight,\n    };\n\n    return { legend, graph };\n  }\n\n  const availableWidth = containerWidth - resizerWrapperSize;\n  const maxWidthAllowed = Math.max(\n    availableWidth * maxWidth,\n    availableWidth - MIN_PLOT_SIZE,\n  );\n\n  if (legendContainer.clientWidth - draggedAmount >= maxWidthAllowed) {\n    const legend: Dimensions = {\n      height: containerHeight,\n      width: maxWidthAllowed,\n    };\n\n    const graph: Dimensions = {\n      width: calculateGraphSize(\n        containerWidth,\n        maxWidthAllowed,\n        resizerWrapperSize,\n      ),\n      height: containerHeight,\n    };\n\n    return { legend, graph };\n  }\n};\n\nconst getAreasHeightSize: GetAreasSizeHandlerProps = (\n  containerHeight,\n  containerWidth,\n  minHeight,\n  maxHeight,\n  resizerWrapperSize,\n  draggedAmount,\n  legendContainer,\n) => {\n  const minLegendHeight = Math.min(\n    containerHeight * minHeight,\n    MIN_LEGEND_HEIGHT,\n  );\n\n  if (legendContainer.clientHeight - draggedAmount <= minLegendHeight) {\n    const legend: Dimensions = {\n      height: minLegendHeight,\n      width: containerWidth,\n    };\n\n    const graph: Dimensions = {\n      height: calculateGraphSize(\n        containerHeight,\n        minLegendHeight,\n        resizerWrapperSize,\n      ),\n      width: containerWidth,\n    };\n\n    return { legend, graph };\n  }\n\n  const availableHeight = containerHeight - resizerWrapperSize;\n  const maxHeightAllowed = Math.max(\n    availableHeight * maxHeight,\n    availableHeight - MIN_PLOT_SIZE,\n  );\n\n  if (legendContainer.clientHeight - draggedAmount >= maxHeightAllowed) {\n    const legend: Dimensions = {\n      height: maxHeightAllowed,\n      width: containerWidth,\n    };\n\n    const graph: Dimensions = {\n      height: calculateGraphSize(\n        containerHeight,\n        maxHeightAllowed,\n        resizerWrapperSize,\n      ),\n      width: containerWidth,\n    };\n\n    return { legend, graph };\n  }\n};\n\nexport const getDefaultAreasSize = (\n  areasSizes: AreasSizes,\n  draggedAmount: number,\n  containerSize: number,\n  resizerWrapperSize: number,\n  orientation: Orientation,\n) => {\n  const { graph, legend } = areasSizes;\n\n  const isVertical = orientation === ORIENTATION.Vertical;\n\n  const legendHeight = isVertical\n    ? legend.height - draggedAmount\n    : legend.height;\n  const legendWidth = isVertical ? legend.width : legend.width - draggedAmount;\n\n  const graphHeight = isVertical\n    ? calculateGraphSize(containerSize, legendHeight, resizerWrapperSize)\n    : graph.height;\n  const graphWidth = isVertical\n    ? graph.width\n    : calculateGraphSize(containerSize, legendWidth, resizerWrapperSize);\n\n  return {\n    legend: { height: legendHeight, width: legendWidth },\n    graph: { height: graphHeight, width: graphWidth },\n  };\n};\n\nexport const getAreasSizeOnDragHandlers = (\n  containerHeight: number,\n  containerWidth: number,\n  legendContainer: HTMLDivElement,\n  resizerWrapperSize: number,\n) => ({\n  getAreasHeightSizeOnDrag: (\n    minHeight: number,\n    maxHeight: number,\n    verticalDraggedAmount = 0,\n  ) =>\n    getAreasHeightSize(\n      containerHeight,\n      containerWidth,\n      minHeight,\n      maxHeight,\n      resizerWrapperSize,\n      verticalDraggedAmount,\n      legendContainer,\n    ),\n  getAreasWidthSizeOnDrag: (\n    minWidth: number,\n    maxWidth: number,\n    horizontalDraggedAmount = 0,\n  ) =>\n    getAreasWidthSize(\n      containerHeight,\n      containerWidth,\n      minWidth,\n      maxWidth,\n      resizerWrapperSize,\n      horizontalDraggedAmount,\n      legendContainer,\n    ),\n});\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { calculateGraphSize } from './calculate-graph-size.js';\nimport type { Orientation } from '../../../../../core/types/orientation.js';\nimport { ORIENTATION } from '../../../constants.js';\nimport type { Dimensions } from '../../../types/dimensions.js';\nimport type { AreasSizes } from '../types/chart-layout-internal.js';\nimport {\n  MIN_LEGEND_HEIGHT,\n  MIN_LEGEND_WIDTH,\n  MIN_PLOT_SIZE,\n} from '../types/constants.js';\n\ntype GetAreasSizeHandlerProps = (\n  containerHeight: number,\n  containerWidth: number,\n  minWidth: number,\n  maxWidth: number,\n  resizerWrapperSize: number,\n  draggedAmount: number,\n  legendContainer: HTMLDivElement,\n) => AreasSizes | undefined;\n\nconst getAreasWidthSize: GetAreasSizeHandlerProps = (\n  containerHeight,\n  containerWidth,\n  minWidth,\n  maxWidth,\n  resizerWrapperSize,\n  draggedAmount,\n  legendContainer,\n) => {\n  const minLegendWidth = Math.min(containerWidth * minWidth, MIN_LEGEND_WIDTH);\n\n  if (legendContainer.clientWidth - draggedAmount <= minLegendWidth) {\n    const legend: Dimensions = {\n      height: containerHeight,\n      width: minLegendWidth,\n    };\n\n    const graph: Dimensions = {\n      width: calculateGraphSize(\n        containerWidth,\n        minLegendWidth,\n        resizerWrapperSize,\n      ),\n      height: containerHeight,\n    };\n\n    return { legend, graph };\n  }\n\n  const availableWidth = containerWidth - resizerWrapperSize;\n  const maxWidthAllowed = Math.max(\n    availableWidth * maxWidth,\n    availableWidth - MIN_PLOT_SIZE,\n  );\n\n  if (legendContainer.clientWidth - draggedAmount >= maxWidthAllowed) {\n    const legend: Dimensions = {\n      height: containerHeight,\n      width: maxWidthAllowed,\n    };\n\n    const graph: Dimensions = {\n      width: calculateGraphSize(\n        containerWidth,\n        maxWidthAllowed,\n        resizerWrapperSize,\n      ),\n      height: containerHeight,\n    };\n\n    return { legend, graph };\n  }\n};\n\nconst getAreasHeightSize: GetAreasSizeHandlerProps = (\n  containerHeight,\n  containerWidth,\n  minHeight,\n  maxHeight,\n  resizerWrapperSize,\n  draggedAmount,\n  legendContainer,\n) => {\n  const minLegendHeight = Math.min(\n    containerHeight * minHeight,\n    MIN_LEGEND_HEIGHT,\n  );\n\n  if (legendContainer.clientHeight - draggedAmount <= minLegendHeight) {\n    const legend: Dimensions = {\n      height: minLegendHeight,\n      width: containerWidth,\n    };\n\n    const graph: Dimensions = {\n      height: calculateGraphSize(\n        containerHeight,\n        minLegendHeight,\n        resizerWrapperSize,\n      ),\n      width: containerWidth,\n    };\n\n    return { legend, graph };\n  }\n\n  const availableHeight = containerHeight - resizerWrapperSize;\n  const maxHeightAllowed = Math.max(\n    availableHeight * maxHeight,\n    availableHeight - MIN_PLOT_SIZE,\n  );\n\n  if (legendContainer.clientHeight - draggedAmount >= maxHeightAllowed) {\n    const legend: Dimensions = {\n      height: maxHeightAllowed,\n      width: containerWidth,\n    };\n\n    const graph: Dimensions = {\n      height: calculateGraphSize(\n        containerHeight,\n        maxHeightAllowed,\n        resizerWrapperSize,\n      ),\n      width: containerWidth,\n    };\n\n    return { legend, graph };\n  }\n};\n\nexport const getDefaultAreasSize = (\n  areasSizes: AreasSizes,\n  draggedAmount: number,\n  containerSize: number,\n  resizerWrapperSize: number,\n  orientation: Orientation,\n) => {\n  const { graph, legend } = areasSizes;\n\n  const isVertical = orientation === ORIENTATION.Vertical;\n\n  const legendHeight = isVertical\n    ? legend.height - draggedAmount\n    : legend.height;\n  const legendWidth = isVertical ? legend.width : legend.width - draggedAmount;\n\n  const graphHeight = isVertical\n    ? calculateGraphSize(containerSize, legendHeight, resizerWrapperSize)\n    : graph.height;\n  const graphWidth = isVertical\n    ? graph.width\n    : calculateGraphSize(containerSize, legendWidth, resizerWrapperSize);\n\n  return {\n    legend: { height: legendHeight, width: legendWidth },\n    graph: { height: graphHeight, width: graphWidth },\n  };\n};\n\nexport const getAreasSizeOnDragHandlers = (\n  containerHeight: number,\n  containerWidth: number,\n  legendContainer: HTMLDivElement,\n  resizerWrapperSize: number,\n) => ({\n  getAreasHeightSizeOnDrag: (\n    minHeight: number,\n    maxHeight: number,\n    verticalDraggedAmount = 0,\n  ) =>\n    getAreasHeightSize(\n      containerHeight,\n      containerWidth,\n      minHeight,\n      maxHeight,\n      resizerWrapperSize,\n      verticalDraggedAmount,\n      legendContainer,\n    ),\n  getAreasWidthSizeOnDrag: (\n    minWidth: number,\n    maxWidth: number,\n    horizontalDraggedAmount = 0,\n  ) =>\n    getAreasWidthSize(\n      containerHeight,\n      containerWidth,\n      minWidth,\n      maxWidth,\n      resizerWrapperSize,\n      horizontalDraggedAmount,\n      legendContainer,\n    ),\n});\n"],
+  "mappings": "AAAA,SAAS,0BAA0B;AAEnC,SAAS,mBAAmB;AAG5B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAYP,MAAM,oBAA8C,CAClD,iBACA,gBACA,UACA,UACA,oBACA,eACA,oBACG;AACH,QAAM,iBAAiB,KAAK,IAAI,iBAAiB,UAAU,gBAAgB;AAE3E,MAAI,gBAAgB,cAAc,iBAAiB,gBAAgB;AACjE,UAAM,SAAqB;AAAA,MACzB,QAAQ;AAAA,MACR,OAAO;AAAA,IACT;AAEA,UAAM,QAAoB;AAAA,MACxB,OAAO;AAAA,QACL;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,MACA,QAAQ;AAAA,IACV;AAEA,WAAO,EAAE,QAAQ,MAAM;AAAA,EACzB;AAEA,QAAM,iBAAiB,iBAAiB;AACxC,QAAM,kBAAkB,KAAK;AAAA,IAC3B,iBAAiB;AAAA,IACjB,iBAAiB;AAAA,EACnB;AAEA,MAAI,gBAAgB,cAAc,iBAAiB,iBAAiB;AAClE,UAAM,SAAqB;AAAA,MACzB,QAAQ;AAAA,MACR,OAAO;AAAA,IACT;AAEA,UAAM,QAAoB;AAAA,MACxB,OAAO;AAAA,QACL;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,MACA,QAAQ;AAAA,IACV;AAEA,WAAO,EAAE,QAAQ,MAAM;AAAA,EACzB;AACF;AAEA,MAAM,qBAA+C,CACnD,iBACA,gBACA,WACA,WACA,oBACA,eACA,oBACG;AACH,QAAM,kBAAkB,KAAK;AAAA,IAC3B,kBAAkB;AAAA,IAClB;AAAA,EACF;AAEA,MAAI,gBAAgB,eAAe,iBAAiB,iBAAiB;AACnE,UAAM,SAAqB;AAAA,MACzB,QAAQ;AAAA,MACR,OAAO;AAAA,IACT;AAEA,UAAM,QAAoB;AAAA,MACxB,QAAQ;AAAA,QACN;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,MACA,OAAO;AAAA,IACT;AAEA,WAAO,EAAE,QAAQ,MAAM;AAAA,EACzB;AAEA,QAAM,kBAAkB,kBAAkB;AAC1C,QAAM,mBAAmB,KAAK;AAAA,IAC5B,kBAAkB;AAAA,IAClB,kBAAkB;AAAA,EACpB;AAEA,MAAI,gBAAgB,eAAe,iBAAiB,kBAAkB;AACpE,UAAM,SAAqB;AAAA,MACzB,QAAQ;AAAA,MACR,OAAO;AAAA,IACT;AAEA,UAAM,QAAoB;AAAA,MACxB,QAAQ;AAAA,QACN;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,MACA,OAAO;AAAA,IACT;AAEA,WAAO,EAAE,QAAQ,MAAM;AAAA,EACzB;AACF;AAEO,MAAM,sBAAsB,CACjC,YACA,eACA,eACA,oBACA,gBACG;AACH,QAAM,EAAE,OAAO,OAAO,IAAI;AAE1B,QAAM,aAAa,gBAAgB,YAAY;AAE/C,QAAM,eAAe,aACjB,OAAO,SAAS,gBAChB,OAAO;AACX,QAAM,cAAc,aAAa,OAAO,QAAQ,OAAO,QAAQ;AAE/D,QAAM,cAAc,aAChB,mBAAmB,eAAe,cAAc,kBAAkB,IAClE,MAAM;AACV,QAAM,aAAa,aACf,MAAM,QACN,mBAAmB,eAAe,aAAa,kBAAkB;AAErE,SAAO;AAAA,IACL,QAAQ,EAAE,QAAQ,cAAc,OAAO,YAAY;AAAA,IACnD,OAAO,EAAE,QAAQ,aAAa,OAAO,WAAW;AAAA,EAClD;AACF;AAEO,MAAM,6BAA6B,CACxC,iBACA,gBACA,iBACA,wBACI;AAAA,EACJ,0BAA0B,CACxB,WACA,WACA,wBAAwB,MAExB;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAAA,EACF,yBAAyB,CACvB,UACA,UACA,0BAA0B,MAE1B;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACJ;",
   "names": []
 }

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

@@ -2,11 +2,10 @@ import { isUndefined } from "lodash-es";
 import { extractLayoutSlots } from "./extract-layout-slots.js";
 import { getOrientation } from "./orientation.js";
 import { sanitizeLegendRatio } from "./sanitize-legend-ratio.js";
-import { defaultRatio } from "../../../constants.js";
+import { defaultRatio, ORIENTATION } from "../../../constants.js";
 import {
   DEFAULT_LEGEND_CONFIG,
-  DEFAULT_RATIO_BOUNDARIES,
-  ORIENTATION
+  DEFAULT_RATIO_BOUNDARIES
 } from "../types/constants.js";
 const getChartLayoutSettings = (containerSizes, children, isEmpty) => {
   const { provider, graphArea, legendArea, legendProps } = extractLayoutSlots(children);

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 } from '../../../constants.js';\nimport {\n  ChartLayoutDimensions,\n  ChartLayoutSettings,\n} from '../types/chart-layout.js';\nimport {\n  DEFAULT_LEGEND_CONFIG,\n  DEFAULT_RATIO_BOUNDARIES,\n  ORIENTATION,\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"],
-  "mappings": "AAAA,SAAS,mBAAmB;AAG5B,SAAS,0BAA0B;AACnC,SAAS,sBAAsB;AAC/B,SAAS,2BAA2B;AACpC,SAAS,oBAAoB;AAK7B;AAAA,EACE;AAAA,EACA;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;",
+  "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"],
+  "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-layout/utils/orientation.js

@@ -1,5 +1,4 @@
-import { LEGEND_POSITION } from "../../../constants.js";
-import { ORIENTATION } from "../types/constants.js";
+import { LEGEND_POSITION, ORIENTATION } from "../../../constants.js";
 const LEGEND_MIN_WIDTH = 225;
 const calculateAutoOrientation = (width, height) => {
   if (width > height + LEGEND_MIN_WIDTH) {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/core/components/chart-layout/utils/orientation.ts"],
-  "sourcesContent": ["import type { Orientation } from '../../../../../core/types/orientation.js';\nimport { LEGEND_POSITION } from '../../../constants.js';\nimport type { LegendPosition } from '../../../types/legend.js';\nimport { ORIENTATION } from '../types/constants.js';\n\nconst LEGEND_MIN_WIDTH = 225;\n\n/**\n * Calculates the legend orientation if its position its auto\n * @param width - Represents the parent container width\n * @param height - Represents the parent container height\n * @returns - The legend orientation\n */\nconst calculateAutoOrientation = (width: number, height: number) => {\n  if (width > height + LEGEND_MIN_WIDTH) {\n    return ORIENTATION.Horizontal;\n  }\n\n  return ORIENTATION.Vertical;\n};\n\n/**\n * Calculates the legend orientation depending of its position\n * @param position - The place the customer wants to put the legend could be one of those: bottom, right, or auto\n * @param width - Represents the parent container width\n * @param height - Represents the parent container height\n * @returns - The legend orientation\n */\nexport const getOrientation = (\n  width: number,\n  height: number,\n  position?: LegendPosition,\n) => {\n  if (position === LEGEND_POSITION.Bottom) {\n    return ORIENTATION.Vertical;\n  }\n\n  if (position === LEGEND_POSITION.Right) {\n    return ORIENTATION.Horizontal;\n  }\n\n  return calculateAutoOrientation(width, height);\n};\n\nexport const isVertical = (orientation: Orientation) =>\n  orientation === ORIENTATION.Vertical;\n\n/**\n * Returns the orientation of the legend based in the orientation of the layout.\n * @internal\n */\nexport const getLegendOrientation = (layoutOrientation: Orientation) =>\n  isVertical(layoutOrientation) ? ORIENTATION.Horizontal : ORIENTATION.Vertical;\n"],
-  "mappings": "AACA,SAAS,uBAAuB;AAEhC,SAAS,mBAAmB;AAE5B,MAAM,mBAAmB;AAQzB,MAAM,2BAA2B,CAAC,OAAe,WAAmB;AAClE,MAAI,QAAQ,SAAS,kBAAkB;AACrC,WAAO,YAAY;AAAA,EACrB;AAEA,SAAO,YAAY;AACrB;AASO,MAAM,iBAAiB,CAC5B,OACA,QACA,aACG;AACH,MAAI,aAAa,gBAAgB,QAAQ;AACvC,WAAO,YAAY;AAAA,EACrB;AAEA,MAAI,aAAa,gBAAgB,OAAO;AACtC,WAAO,YAAY;AAAA,EACrB;AAEA,SAAO,yBAAyB,OAAO,MAAM;AAC/C;AAEO,MAAM,aAAa,CAAC,gBACzB,gBAAgB,YAAY;AAMvB,MAAM,uBAAuB,CAAC,sBACnC,WAAW,iBAAiB,IAAI,YAAY,aAAa,YAAY;",
+  "sourcesContent": ["import type { Orientation } from '../../../../../core/types/orientation.js';\nimport { LEGEND_POSITION, ORIENTATION } from '../../../constants.js';\nimport type { LegendPosition } from '../../../types/legend.js';\n\nconst LEGEND_MIN_WIDTH = 225;\n\n/**\n * Calculates the legend orientation if its position its auto\n * @param width - Represents the parent container width\n * @param height - Represents the parent container height\n * @returns - The legend orientation\n */\nconst calculateAutoOrientation = (width: number, height: number) => {\n  if (width > height + LEGEND_MIN_WIDTH) {\n    return ORIENTATION.Horizontal;\n  }\n\n  return ORIENTATION.Vertical;\n};\n\n/**\n * Calculates the legend orientation depending of its position\n * @param position - The place the customer wants to put the legend could be one of those: bottom, right, or auto\n * @param width - Represents the parent container width\n * @param height - Represents the parent container height\n * @returns - The legend orientation\n */\nexport const getOrientation = (\n  width: number,\n  height: number,\n  position?: LegendPosition,\n) => {\n  if (position === LEGEND_POSITION.Bottom) {\n    return ORIENTATION.Vertical;\n  }\n\n  if (position === LEGEND_POSITION.Right) {\n    return ORIENTATION.Horizontal;\n  }\n\n  return calculateAutoOrientation(width, height);\n};\n\nexport const isVertical = (orientation: Orientation) =>\n  orientation === ORIENTATION.Vertical;\n\n/**\n * Returns the orientation of the legend based in the orientation of the layout.\n * @internal\n */\nexport const getLegendOrientation = (layoutOrientation: Orientation) =>\n  isVertical(layoutOrientation) ? ORIENTATION.Horizontal : ORIENTATION.Vertical;\n"],
+  "mappings": "AACA,SAAS,iBAAiB,mBAAmB;AAG7C,MAAM,mBAAmB;AAQzB,MAAM,2BAA2B,CAAC,OAAe,WAAmB;AAClE,MAAI,QAAQ,SAAS,kBAAkB;AACrC,WAAO,YAAY;AAAA,EACrB;AAEA,SAAO,YAAY;AACrB;AASO,MAAM,iBAAiB,CAC5B,OACA,QACA,aACG;AACH,MAAI,aAAa,gBAAgB,QAAQ;AACvC,WAAO,YAAY;AAAA,EACrB;AAEA,MAAI,aAAa,gBAAgB,OAAO;AACtC,WAAO,YAAY;AAAA,EACrB;AAEA,SAAO,yBAAyB,OAAO,MAAM;AAC/C;AAEO,MAAM,aAAa,CAAC,gBACzB,gBAAgB,YAAY;AAMvB,MAAM,uBAAuB,CAAC,sBACnC,WAAW,iBAAiB,IAAI,YAAY,aAAa,YAAY;",
   "names": []
 }

package/esm/charts/core/components/chart-layout/utils/sanitize-legend-ratio.js

@@ -1,6 +1,5 @@
 import { isNumber } from "lodash-es";
-import { defaultRatio } from "../../../constants.js";
-import { ORIENTATION } from "../types/constants.js";
+import { defaultRatio, ORIENTATION } from "../../../constants.js";
 const isInTheRange = (value, min, max) => value >= min && value <= max;
 const sanitizeLegendRatio = (legendRatio, ratioBoundaries, orientation) => {
   if (isNumber(legendRatio)) {

package/esm/charts/core/components/chart-layout/utils/sanitize-legend-ratio.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/core/components/chart-layout/utils/sanitize-legend-ratio.ts"],
-  "sourcesContent": ["import { isNumber } from 'lodash-es';\n\nimport { defaultRatio } from '../../../constants.js';\nimport { LegendRatio, ChartLegendOrientation } from '../../../types/legend.js';\nimport { ChartLayoutLegendSizes } from '../types/chart-layout.js';\nimport { ORIENTATION } from '../types/constants.js';\n\nconst isInTheRange = (value: number, min: number, max: number) =>\n  value >= min && value <= max;\n/**\n * Returns the value of the ratio sanitized.\n * @param legendRatio -\n * @param ratioBoundaries -\n * @param orientation -\n */\nexport const sanitizeLegendRatio = (\n  legendRatio: LegendRatio,\n  ratioBoundaries: ChartLayoutLegendSizes,\n  orientation: ChartLegendOrientation,\n): LegendRatio => {\n  if (isNumber(legendRatio)) {\n    const isHorizontal = orientation === ORIENTATION.Horizontal;\n    const ratioInFraction = legendRatio / 100;\n\n    const min = isHorizontal\n      ? ratioBoundaries.minWidth\n      : ratioBoundaries.minHeight;\n    const max = isHorizontal\n      ? ratioBoundaries.maxWidth\n      : ratioBoundaries.maxHeight;\n\n    return isInTheRange(ratioInFraction, min, max) ? legendRatio : defaultRatio;\n  }\n  return defaultRatio;\n};\n"],
-  "mappings": "AAAA,SAAS,gBAAgB;AAEzB,SAAS,oBAAoB;AAG7B,SAAS,mBAAmB;AAE5B,MAAM,eAAe,CAAC,OAAe,KAAa,QAChD,SAAS,OAAO,SAAS;AAOpB,MAAM,sBAAsB,CACjC,aACA,iBACA,gBACgB;AAChB,MAAI,SAAS,WAAW,GAAG;AACzB,UAAM,eAAe,gBAAgB,YAAY;AACjD,UAAM,kBAAkB,cAAc;AAEtC,UAAM,MAAM,eACR,gBAAgB,WAChB,gBAAgB;AACpB,UAAM,MAAM,eACR,gBAAgB,WAChB,gBAAgB;AAEpB,WAAO,aAAa,iBAAiB,KAAK,GAAG,IAAI,cAAc;AAAA,EACjE;AACA,SAAO;AACT;",
+  "sourcesContent": ["import { isNumber } from 'lodash-es';\n\nimport { defaultRatio, ORIENTATION } from '../../../constants.js';\nimport { LegendRatio, ChartLegendOrientation } from '../../../types/legend.js';\nimport { ChartLayoutLegendSizes } from '../types/chart-layout.js';\n\nconst isInTheRange = (value: number, min: number, max: number) =>\n  value >= min && value <= max;\n/**\n * Returns the value of the ratio sanitized.\n * @param legendRatio -\n * @param ratioBoundaries -\n * @param orientation -\n */\nexport const sanitizeLegendRatio = (\n  legendRatio: LegendRatio,\n  ratioBoundaries: ChartLayoutLegendSizes,\n  orientation: ChartLegendOrientation,\n): LegendRatio => {\n  if (isNumber(legendRatio)) {\n    const isHorizontal = orientation === ORIENTATION.Horizontal;\n    const ratioInFraction = legendRatio / 100;\n\n    const min = isHorizontal\n      ? ratioBoundaries.minWidth\n      : ratioBoundaries.minHeight;\n    const max = isHorizontal\n      ? ratioBoundaries.maxWidth\n      : ratioBoundaries.maxHeight;\n\n    return isInTheRange(ratioInFraction, min, max) ? legendRatio : defaultRatio;\n  }\n  return defaultRatio;\n};\n"],
+  "mappings": "AAAA,SAAS,gBAAgB;AAEzB,SAAS,cAAc,mBAAmB;AAI1C,MAAM,eAAe,CAAC,OAAe,KAAa,QAChD,SAAS,OAAO,SAAS;AAOpB,MAAM,sBAAsB,CACjC,aACA,iBACA,gBACgB;AAChB,MAAI,SAAS,WAAW,GAAG;AACzB,UAAM,eAAe,gBAAgB,YAAY;AACjD,UAAM,kBAAkB,cAAc;AAEtC,UAAM,MAAM,eACR,gBAAgB,WAChB,gBAAgB;AACpB,UAAM,MAAM,eACR,gBAAgB,WAChB,gBAAgB;AAEpB,WAAO,aAAa,iBAAiB,KAAK,GAAG,IAAI,cAAc;AAAA,EACjE;AACA,SAAO;AACT;",
   "names": []
 }

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

@@ -1,16 +1,16 @@
-._4pqs4v0-3-3-3 {
+._4pqs4v0-3-5-0 {
   color: var(--dt-colors-text-critical-default, #bb0731);
   font-size: var(--dt-typography-text-small-default-size, 12px);
 }
-._4pqs4v1-3-3-3 {
+._4pqs4v1-3-5-0 {
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
   font-size: var(--dt-typography-text-small-default-size, 12px);
 }
-._4pqs4v2-3-3-3 {
+._4pqs4v2-3-5-0 {
   align-items: center;
   justify-content: center;
 }
-._4pqs4v3-3-3-3 {
+._4pqs4v3-3-5-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-3-3";
-var emptyText = "_4pqs4v1-3-3-3";
-var errorText = "_4pqs4v0-3-3-3";
-var wrapper = "_4pqs4v2-3-3-3";
+var container = "_4pqs4v3-3-5-0";
+var emptyText = "_4pqs4v1-3-5-0";
+var errorText = "_4pqs4v0-3-5-0";
+var wrapper = "_4pqs4v2-3-5-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-3-3';\nexport var emptyText = '_4pqs4v1-3-3-3';\nexport var errorText = '_4pqs4v0-3-3-3';\nexport var wrapper = '_4pqs4v2-3-3-3';"],
+  "sourcesContent": ["import './ChartState.css';\nexport var container = '_4pqs4v3-3-5-0';\nexport var emptyText = '_4pqs4v1-3-5-0';\nexport var errorText = '_4pqs4v0-3-5-0';\nexport var wrapper = '_4pqs4v2-3-5-0';"],
   "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-3-3 {
+._nm3s3e0-3-5-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-3-3 {
+._nm3s3e1-3-5-0 {
   margin-left: -2px;
 }
-._nm3s3e2-3-3-3 {
+._nm3s3e2-3-5-0 {
   margin-left: var(--dt-spacings-size-2, 2px);
 }
-._nm3s3e3-3-3-3 {
+._nm3s3e3-3-5-0 {
   margin-top: var(--dt-spacings-size-2, 2px);
 }
-._nm3s3e4-3-3-3 {
+._nm3s3e4-3-5-0 {
   margin-top: -2px;
 }
-._nm3s3e5-3-3-3 {
+._nm3s3e5-3-5-0 {
   transform: rotate(-90deg);
   transform-origin: left bottom;
   margin-top: -2px;
 }
-._nm3s3e6-3-3-3 {
+._nm3s3e6-3-5-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-3-3";
-var left = "_nm3s3e1-3-3-3";
-var magnifier = "_nm3s3e0-3-3-3";
+var bottom = "_nm3s3e3-3-5-0";
+var left = "_nm3s3e1-3-5-0";
+var magnifier = "_nm3s3e0-3-5-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-3-3";
-var rotatedBottomStyle = "_nm3s3e6-3-3-3";
-var rotatedTopStyle = "_nm3s3e5-3-3-3";
-var top = "_nm3s3e4-3-3-3";
+var right = "_nm3s3e2-3-5-0";
+var rotatedBottomStyle = "_nm3s3e6-3-5-0";
+var rotatedTopStyle = "_nm3s3e5-3-5-0";
+var top = "_nm3s3e4-3-5-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-3-3';\nexport var left = '_nm3s3e1-3-3-3';\nexport var magnifier = '_nm3s3e0-3-3-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-3-3';\nexport var rotatedBottomStyle = '_nm3s3e6-3-3-3';\nexport var rotatedTopStyle = '_nm3s3e5-3-3-3';\nexport var top = '_nm3s3e4-3-3-3';"],
+  "sourcesContent": ["import './Magnifier.css';\nexport var bottom = '_nm3s3e3-3-5-0';\nexport var left = '_nm3s3e1-3-5-0';\nexport var magnifier = '_nm3s3e0-3-5-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-5-0';\nexport var rotatedBottomStyle = '_nm3s3e6-3-5-0';\nexport var rotatedTopStyle = '_nm3s3e5-3-5-0';\nexport var top = '_nm3s3e4-3-5-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/grid/Grid.js

@@ -6,6 +6,7 @@ import {
   getVerticalNumTicks,
   getHorizontalNumTicks
 } from "../../../core/utils/ticks.js";
+import { isBandScale } from "../../utils/detect-scale.js";
 const DEFAULTS = {
   HIGHLIGHT_ZERO_LINE: {
     horizontal: true,
@@ -19,10 +20,14 @@ function Grid({
   yScale,
   highlightZeroLine = DEFAULTS.HIGHLIGHT_ZERO_LINE,
   xTicks,
-  yTicks
+  yTicks,
+  xCategoryOffset,
+  yCategoryOffset
 }) {
   const numTicksRows = getVerticalNumTicks(height);
   const autoNumTicks = getHorizontalNumTicks(width);
+  const xNumTicks = xCategoryOffset !== void 0 && isBandScale(xScale) ? xScale.domain().length : autoNumTicks;
+  const yNumTicks = yCategoryOffset !== void 0 && isBandScale(yScale) ? yScale.domain().length : numTicksRows;
   return /* @__PURE__ */ jsxs(Group, { children: [
     /* @__PURE__ */ jsx(
       GridColumns,
@@ -30,9 +35,10 @@ function Grid({
         width,
         height,
         scale: xScale,
-        numTicks: autoNumTicks,
+        numTicks: xNumTicks,
         highlightZeroLine: highlightZeroLine.vertical,
-        ticks: xTicks
+        ticks: xTicks,
+        offset: xCategoryOffset
       }
     ),
     /* @__PURE__ */ jsx(
@@ -41,9 +47,10 @@ function Grid({
         width,
         height,
         scale: yScale,
-        numTicks: numTicksRows,
+        numTicks: yNumTicks,
         highlightZeroLine: highlightZeroLine.horizontal,
-        ticks: yTicks
+        ticks: yTicks,
+        offset: yCategoryOffset
       }
     )
   ] });

package/esm/charts/core/components/grid/Grid.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/core/components/grid/Grid.tsx"],
-  "sourcesContent": ["import { GridProps as VisxGridProps } from '@visx/grid/lib/grids/Grid';\nimport { Group } from '@visx/group';\n\nimport { GridColumns } from '../../../core/components/grid/GridColumns.js';\nimport { GridRows } from '../../../core/components/grid/GridRows.js';\nimport {\n  getVerticalNumTicks,\n  getHorizontalNumTicks,\n} from '../../../core/utils/ticks.js';\nimport type { AnyScale } from '../../types/scales.js';\n\nexport type GridProps = VisxGridProps<AnyScale, AnyScale> & {\n  highlightZeroLine?: {\n    horizontal?: boolean;\n    vertical?: boolean;\n  };\n  xTicks?: number[];\n  yTicks?: number[];\n};\nconst DEFAULTS = {\n  HIGHLIGHT_ZERO_LINE: {\n    horizontal: true,\n    vertical: true,\n  },\n};\n/**\n * The grid columns component for charts\n */\nexport function Grid({\n  width,\n  height,\n  xScale,\n  yScale,\n  highlightZeroLine = DEFAULTS.HIGHLIGHT_ZERO_LINE,\n  xTicks,\n  yTicks,\n}: GridProps) {\n  const numTicksRows = getVerticalNumTicks(height);\n  const autoNumTicks = getHorizontalNumTicks(width);\n\n  return (\n    <Group>\n      <GridColumns\n        width={width}\n        height={height}\n        scale={xScale}\n        numTicks={autoNumTicks}\n        highlightZeroLine={highlightZeroLine.vertical}\n        ticks={xTicks}\n      />\n      <GridRows\n        width={width}\n        height={height}\n        scale={yScale}\n        numTicks={numTicksRows}\n        highlightZeroLine={highlightZeroLine.horizontal}\n        ticks={yTicks}\n      />\n    </Group>\n  );\n}\n"],
-  "mappings": "AAyCI,SACE,KADF;AAxCJ,SAAS,aAAa;AAEtB,SAAS,mBAAmB;AAC5B,SAAS,gBAAgB;AACzB;AAAA,EACE;AAAA,EACA;AAAA,OACK;AAWP,MAAM,WAAW;AAAA,EACf,qBAAqB;AAAA,IACnB,YAAY;AAAA,IACZ,UAAU;AAAA,EACZ;AACF;AAIO,SAAS,KAAK;AAAA,EACnB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,oBAAoB,SAAS;AAAA,EAC7B;AAAA,EACA;AACF,GAAc;AACZ,QAAM,eAAe,oBAAoB,MAAM;AAC/C,QAAM,eAAe,sBAAsB,KAAK;AAEhD,SACE,qBAAC,SACC;AAAA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA,OAAO;AAAA,QACP,UAAU;AAAA,QACV,mBAAmB,kBAAkB;AAAA,QACrC,OAAO;AAAA;AAAA,IACT;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA,OAAO;AAAA,QACP,UAAU;AAAA,QACV,mBAAmB,kBAAkB;AAAA,QACrC,OAAO;AAAA;AAAA,IACT;AAAA,KACF;AAEJ;",
+  "sourcesContent": ["import { GridProps as VisxGridProps } from '@visx/grid/lib/grids/Grid';\nimport { Group } from '@visx/group';\n\nimport { GridColumns } from '../../../core/components/grid/GridColumns.js';\nimport { GridRows } from '../../../core/components/grid/GridRows.js';\nimport {\n  getVerticalNumTicks,\n  getHorizontalNumTicks,\n} from '../../../core/utils/ticks.js';\nimport type { AnyScale } from '../../types/scales.js';\nimport { isBandScale } from '../../utils/detect-scale.js';\n\nexport type GridProps = VisxGridProps<AnyScale, AnyScale> & {\n  highlightZeroLine?: {\n    horizontal?: boolean;\n    vertical?: boolean;\n  };\n  xTicks?: number[];\n  yTicks?: number[];\n  xCategoryOffset?: number;\n  yCategoryOffset?: number;\n};\nconst DEFAULTS = {\n  HIGHLIGHT_ZERO_LINE: {\n    horizontal: true,\n    vertical: true,\n  },\n};\n/**\n * The grid columns component for charts\n */\nexport function Grid({\n  width,\n  height,\n  xScale,\n  yScale,\n  highlightZeroLine = DEFAULTS.HIGHLIGHT_ZERO_LINE,\n  xTicks,\n  yTicks,\n  xCategoryOffset,\n  yCategoryOffset,\n}: GridProps) {\n  const numTicksRows = getVerticalNumTicks(height);\n  const autoNumTicks = getHorizontalNumTicks(width);\n\n  const xNumTicks =\n    xCategoryOffset !== undefined && isBandScale(xScale)\n      ? xScale.domain().length\n      : autoNumTicks;\n\n  const yNumTicks =\n    yCategoryOffset !== undefined && isBandScale(yScale)\n      ? yScale.domain().length\n      : numTicksRows;\n\n  return (\n    <Group>\n      <GridColumns\n        width={width}\n        height={height}\n        scale={xScale}\n        numTicks={xNumTicks}\n        highlightZeroLine={highlightZeroLine.vertical}\n        ticks={xTicks}\n        offset={xCategoryOffset}\n      />\n      <GridRows\n        width={width}\n        height={height}\n        scale={yScale}\n        numTicks={yNumTicks}\n        highlightZeroLine={highlightZeroLine.horizontal}\n        ticks={yTicks}\n        offset={yCategoryOffset}\n      />\n    </Group>\n  );\n}\n"],
+  "mappings": "AAwDI,SACE,KADF;AAvDJ,SAAS,aAAa;AAEtB,SAAS,mBAAmB;AAC5B,SAAS,gBAAgB;AACzB;AAAA,EACE;AAAA,EACA;AAAA,OACK;AAEP,SAAS,mBAAmB;AAY5B,MAAM,WAAW;AAAA,EACf,qBAAqB;AAAA,IACnB,YAAY;AAAA,IACZ,UAAU;AAAA,EACZ;AACF;AAIO,SAAS,KAAK;AAAA,EACnB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,oBAAoB,SAAS;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAc;AACZ,QAAM,eAAe,oBAAoB,MAAM;AAC/C,QAAM,eAAe,sBAAsB,KAAK;AAEhD,QAAM,YACJ,oBAAoB,UAAa,YAAY,MAAM,IAC/C,OAAO,OAAO,EAAE,SAChB;AAEN,QAAM,YACJ,oBAAoB,UAAa,YAAY,MAAM,IAC/C,OAAO,OAAO,EAAE,SAChB;AAEN,SACE,qBAAC,SACC;AAAA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA,OAAO;AAAA,QACP,UAAU;AAAA,QACV,mBAAmB,kBAAkB;AAAA,QACrC,OAAO;AAAA,QACP,QAAQ;AAAA;AAAA,IACV;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA,OAAO;AAAA,QACP,UAAU;AAAA,QACV,mBAAmB,kBAAkB;AAAA,QACrC,OAAO;AAAA,QACP,QAAQ;AAAA;AAAA,IACV;AAAA,KACF;AAEJ;",
   "names": []
 }

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

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

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-3-3", variantClassNames: { mode: { explore: "_nfahiq1-3-3-3", pan: "_nfahiq2-3-3-3", zoom: "_nfahiq3-3-3-3", zoomOut: "_nfahiq4-3-3-3" } }, defaultVariants: {}, compoundVariants: [] });
-var interactionsOverlay = "_nfahiq5-3-3-3";
+var chartEventsWrapper = _7a468({ defaultClassName: "_nfahiq0-3-5-0", variantClassNames: { mode: { explore: "_nfahiq1-3-5-0", pan: "_nfahiq2-3-5-0", zoom: "_nfahiq3-3-5-0", zoomOut: "_nfahiq4-3-5-0" } }, defaultVariants: {}, compoundVariants: [] });
+var interactionsOverlay = "_nfahiq5-3-5-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-3-3',variantClassNames:{mode:{explore:'_nfahiq1-3-3-3',pan:'_nfahiq2-3-3-3',zoom:'_nfahiq3-3-3-3',zoomOut:'_nfahiq4-3-3-3'}},defaultVariants:{},compoundVariants:[]});\nexport var interactionsOverlay = '_nfahiq5-3-3-3';"],
+  "sourcesContent": ["import './InteractionsOverlay.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var chartEventsWrapper = _7a468({defaultClassName:'_nfahiq0-3-5-0',variantClassNames:{mode:{explore:'_nfahiq1-3-5-0',pan:'_nfahiq2-3-5-0',zoom:'_nfahiq3-3-5-0',zoomOut:'_nfahiq4-3-5-0'}},defaultVariants:{},compoundVariants:[]});\nexport var interactionsOverlay = '_nfahiq5-3-5-0';"],
   "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,qBAAqB,OAAO,EAAC,kBAAiB,kBAAiB,mBAAkB,EAAC,MAAK,EAAC,SAAQ,kBAAiB,KAAI,kBAAiB,MAAK,kBAAiB,SAAQ,iBAAgB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AAClO,IAAI,sBAAsB;",
   "names": []
 }

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

@@ -30,11 +30,9 @@ const exploreKeyboardEscape = ({
 };
 const exploreKeyboardEnter = ({
   selectionArea,
-  lastMousePositionRef,
   width,
   onSelectEnd,
   onZoomChange,
-  onHover,
   isZoomXDisabled
 }) => {
   if (!isZoomXDisabled && selectionArea) {
@@ -47,12 +45,6 @@ const exploreKeyboardEnter = ({
       deltaEnd,
       behavior: "zoom-x"
     });
-    if (lastMousePositionRef.current) {
-      onHover?.({
-        triggeredBy: "pointer",
-        position: lastMousePositionRef.current
-      });
-    }
   }
 };
 export {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../src/charts/core/components/interactions-overlay/interactions/explore/keyboardInteractions.tsx"],
-  "sourcesContent": ["import { isUndefined } from 'lodash-es';\nimport type { MutableRefObject } from 'react';\n\nimport type { RelativeAbsolutePosition } from '../../../../types/pointer-events.js';\nimport type {\n  InteractionMode,\n  InteractionTriggers,\n  ZoomBehavior,\n} from '../../types.js';\n\nexport const exploreKeyboardEscape = ({\n  selectionArea,\n  eventCancelled,\n  onSelectEnd,\n  lastMousePositionRef,\n  pinned,\n  onHover,\n  onTogglePin,\n  onModeChange,\n}: {\n  pinned: boolean;\n  eventCancelled: MutableRefObject<boolean>;\n  lastMousePositionRef: MutableRefObject<RelativeAbsolutePosition | undefined>;\n  selectionArea?: [RelativeAbsolutePosition, RelativeAbsolutePosition];\n  onHover?: (event: {\n    triggeredBy: InteractionTriggers;\n    position: RelativeAbsolutePosition;\n  }) => void;\n  onTogglePin?: (event: {\n    triggeredBy: InteractionTriggers;\n    position: RelativeAbsolutePosition | undefined;\n    pin: boolean;\n  }) => void;\n  onSelectEnd?: (\n    event:\n      | {\n          triggeredBy: InteractionTriggers;\n          start: RelativeAbsolutePosition;\n          end: RelativeAbsolutePosition;\n        }\n      | { cancelled: true },\n  ) => void;\n  onModeChange?: (event: { mode: InteractionMode; keyboard: boolean }) => void;\n}) => {\n  if (!isUndefined(selectionArea)) {\n    eventCancelled.current = true;\n    onSelectEnd?.({ cancelled: true });\n\n    if (lastMousePositionRef.current) {\n      onHover?.({\n        triggeredBy: 'pointer',\n        position: lastMousePositionRef.current,\n      });\n    }\n  }\n\n  if (pinned) {\n    onTogglePin?.({\n      triggeredBy: 'keyboard',\n      pin: false,\n      position: lastMousePositionRef.current,\n    });\n  }\n\n  onModeChange?.({ mode: 'explore', keyboard: false });\n};\n\nexport const exploreKeyboardEnter = ({\n  selectionArea,\n  lastMousePositionRef,\n  width,\n  onSelectEnd,\n  onZoomChange,\n  onHover,\n  isZoomXDisabled,\n}: {\n  lastMousePositionRef: MutableRefObject<RelativeAbsolutePosition | undefined>;\n  width: number;\n  selectionArea?: [RelativeAbsolutePosition, RelativeAbsolutePosition];\n\n  onSelectEnd?: (\n    event:\n      | {\n          triggeredBy: InteractionTriggers;\n          start: RelativeAbsolutePosition;\n          end: RelativeAbsolutePosition;\n        }\n      | { cancelled: true },\n  ) => void;\n  onZoomChange?: (event: {\n    triggeredBy: InteractionTriggers;\n    deltaStart: number;\n    deltaEnd: number;\n    behavior: ZoomBehavior;\n  }) => void;\n  onHover?: (event: {\n    triggeredBy: InteractionTriggers;\n    position: RelativeAbsolutePosition;\n  }) => void;\n  isZoomXDisabled?: boolean;\n}) => {\n  if (!isZoomXDisabled && selectionArea) {\n    const deltaStart = selectionArea[0].relative.x;\n    const deltaEnd = selectionArea[1].relative.x - width;\n\n    onSelectEnd?.({ cancelled: true });\n    onZoomChange?.({\n      triggeredBy: 'keyboard',\n      deltaStart,\n      deltaEnd,\n      behavior: 'zoom-x',\n    });\n\n    if (lastMousePositionRef.current) {\n      onHover?.({\n        triggeredBy: 'pointer',\n        position: lastMousePositionRef.current,\n      });\n    }\n  }\n};\n"],
-  "mappings": "AAAA,SAAS,mBAAmB;AAUrB,MAAM,wBAAwB,CAAC;AAAA,EACpC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAwBM;AACJ,MAAI,CAAC,YAAY,aAAa,GAAG;AAC/B,mBAAe,UAAU;AACzB,kBAAc,EAAE,WAAW,KAAK,CAAC;AAEjC,QAAI,qBAAqB,SAAS;AAChC,gBAAU;AAAA,QACR,aAAa;AAAA,QACb,UAAU,qBAAqB;AAAA,MACjC,CAAC;AAAA,IACH;AAAA,EACF;AAEA,MAAI,QAAQ;AACV,kBAAc;AAAA,MACZ,aAAa;AAAA,MACb,KAAK;AAAA,MACL,UAAU,qBAAqB;AAAA,IACjC,CAAC;AAAA,EACH;AAEA,iBAAe,EAAE,MAAM,WAAW,UAAU,MAAM,CAAC;AACrD;AAEO,MAAM,uBAAuB,CAAC;AAAA,EACnC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAyBM;AACJ,MAAI,CAAC,mBAAmB,eAAe;AACrC,UAAM,aAAa,cAAc,CAAC,EAAE,SAAS;AAC7C,UAAM,WAAW,cAAc,CAAC,EAAE,SAAS,IAAI;AAE/C,kBAAc,EAAE,WAAW,KAAK,CAAC;AACjC,mBAAe;AAAA,MACb,aAAa;AAAA,MACb;AAAA,MACA;AAAA,MACA,UAAU;AAAA,IACZ,CAAC;AAED,QAAI,qBAAqB,SAAS;AAChC,gBAAU;AAAA,QACR,aAAa;AAAA,QACb,UAAU,qBAAqB;AAAA,MACjC,CAAC;AAAA,IACH;AAAA,EACF;AACF;",
+  "sourcesContent": ["import { isUndefined } from 'lodash-es';\nimport type { MutableRefObject } from 'react';\n\nimport type { RelativeAbsolutePosition } from '../../../../types/pointer-events.js';\nimport type {\n  InteractionMode,\n  InteractionTriggers,\n  ZoomBehavior,\n} from '../../types.js';\n\nexport const exploreKeyboardEscape = ({\n  selectionArea,\n  eventCancelled,\n  onSelectEnd,\n  lastMousePositionRef,\n  pinned,\n  onHover,\n  onTogglePin,\n  onModeChange,\n}: {\n  pinned: boolean;\n  eventCancelled: MutableRefObject<boolean>;\n  lastMousePositionRef: MutableRefObject<RelativeAbsolutePosition | undefined>;\n  selectionArea?: [RelativeAbsolutePosition, RelativeAbsolutePosition];\n  onHover?: (event: {\n    triggeredBy: InteractionTriggers;\n    position: RelativeAbsolutePosition;\n  }) => void;\n  onTogglePin?: (event: {\n    triggeredBy: InteractionTriggers;\n    position: RelativeAbsolutePosition | undefined;\n    pin: boolean;\n  }) => void;\n  onSelectEnd?: (\n    event:\n      | {\n          triggeredBy: InteractionTriggers;\n          start: RelativeAbsolutePosition;\n          end: RelativeAbsolutePosition;\n        }\n      | { cancelled: true },\n  ) => void;\n  onModeChange?: (event: { mode: InteractionMode; keyboard: boolean }) => void;\n}) => {\n  if (!isUndefined(selectionArea)) {\n    eventCancelled.current = true;\n    onSelectEnd?.({ cancelled: true });\n\n    if (lastMousePositionRef.current) {\n      onHover?.({\n        triggeredBy: 'pointer',\n        position: lastMousePositionRef.current,\n      });\n    }\n  }\n\n  if (pinned) {\n    onTogglePin?.({\n      triggeredBy: 'keyboard',\n      pin: false,\n      position: lastMousePositionRef.current,\n    });\n  }\n\n  onModeChange?.({ mode: 'explore', keyboard: false });\n};\n\nexport const exploreKeyboardEnter = ({\n  selectionArea,\n  width,\n  onSelectEnd,\n  onZoomChange,\n  isZoomXDisabled,\n}: {\n  lastMousePositionRef: MutableRefObject<RelativeAbsolutePosition | undefined>;\n  width: number;\n  selectionArea?: [RelativeAbsolutePosition, RelativeAbsolutePosition];\n\n  onSelectEnd?: (\n    event:\n      | {\n          triggeredBy: InteractionTriggers;\n          start: RelativeAbsolutePosition;\n          end: RelativeAbsolutePosition;\n        }\n      | { cancelled: true },\n  ) => void;\n  onZoomChange?: (event: {\n    triggeredBy: InteractionTriggers;\n    deltaStart: number;\n    deltaEnd: number;\n    behavior: ZoomBehavior;\n  }) => void;\n  onHover?: (event: {\n    triggeredBy: InteractionTriggers;\n    position: RelativeAbsolutePosition;\n  }) => void;\n  isZoomXDisabled?: boolean;\n}) => {\n  if (!isZoomXDisabled && selectionArea) {\n    const deltaStart = selectionArea[0].relative.x;\n    const deltaEnd = selectionArea[1].relative.x - width;\n\n    onSelectEnd?.({ cancelled: true });\n    onZoomChange?.({\n      triggeredBy: 'keyboard',\n      deltaStart,\n      deltaEnd,\n      behavior: 'zoom-x',\n    });\n  }\n};\n"],
+  "mappings": "AAAA,SAAS,mBAAmB;AAUrB,MAAM,wBAAwB,CAAC;AAAA,EACpC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAwBM;AACJ,MAAI,CAAC,YAAY,aAAa,GAAG;AAC/B,mBAAe,UAAU;AACzB,kBAAc,EAAE,WAAW,KAAK,CAAC;AAEjC,QAAI,qBAAqB,SAAS;AAChC,gBAAU;AAAA,QACR,aAAa;AAAA,QACb,UAAU,qBAAqB;AAAA,MACjC,CAAC;AAAA,IACH;AAAA,EACF;AAEA,MAAI,QAAQ;AACV,kBAAc;AAAA,MACZ,aAAa;AAAA,MACb,KAAK;AAAA,MACL,UAAU,qBAAqB;AAAA,IACjC,CAAC;AAAA,EACH;AAEA,iBAAe,EAAE,MAAM,WAAW,UAAU,MAAM,CAAC;AACrD;AAEO,MAAM,uBAAuB,CAAC;AAAA,EACnC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAyBM;AACJ,MAAI,CAAC,mBAAmB,eAAe;AACrC,UAAM,aAAa,cAAc,CAAC,EAAE,SAAS;AAC7C,UAAM,WAAW,cAAc,CAAC,EAAE,SAAS,IAAI;AAE/C,kBAAc,EAAE,WAAW,KAAK,CAAC;AACjC,mBAAe;AAAA,MACb,aAAa;AAAA,MACb;AAAA,MACA;AAAA,MACA,UAAU;AAAA,IACZ,CAAC;AAAA,EACH;AACF;",
   "names": []
 }

package/esm/charts/core/components/interactions-overlay/utils/get-custom-context-menu-items.js

@@ -3,25 +3,31 @@ import {
   Children
 } from "react";
 import { isSlot } from "../../../../../core/utils/is-slot.js";
+import { OverlayTooltip } from "../../overlay-tooltip/OverlayTooltip.js";
 import { ChartSeriesAction } from "../../series-action/ChartSeriesAction.js";
-import {
-  ActionItem
-} from "../../tooltip/ChartTooltip/components/ActionItem/ActionItem.js";
 const renderActionItem = (item) => {
   const itemProps = {
     disabled: item.props.disabled,
-    onMouseUp: item.props.onSelect,
-    text: "",
+    onSelect: item.props.onSelect,
+    label: "",
     icon: ""
   };
   Children.forEach(item.props.children, (itemPart) => {
     if (isSlot(itemPart, ChartSeriesAction.ItemIcon)) {
       itemProps.icon = itemPart.props.children;
     } else {
-      itemProps.text = itemPart;
+      itemProps.label = itemPart;
     }
   });
-  return /* @__PURE__ */ jsx(ActionItem, { ...itemProps });
+  return /* @__PURE__ */ jsx(
+    OverlayTooltip.Action,
+    {
+      label: itemProps.label,
+      icon: itemProps.icon,
+      onSelect: itemProps.onSelect,
+      disabled: itemProps.disabled
+    }
+  );
 };
 const getCustomContextMenuItems = (customItem) => {
   let actions = [];