@dynatrace/strato-components 3.12.1 → 3.13.0

package/esm/charts/core/slots/chart-states/EmptyStateSlot.js

@@ -1,5 +1,8 @@
 import { Fragment, jsx } from "react/jsx-runtime";
-const EmptyStateSlot = ({ children }) => /* @__PURE__ */ jsx(Fragment, { children });
+const EmptyStateSlot = ({ children }) => (
+  // oxlint-disable-next-line react/jsx-no-useless-fragment
+  /* @__PURE__ */ jsx(Fragment, { children })
+);
 export {
   EmptyStateSlot
 };

package/esm/charts/core/slots/chart-states/EmptyStateSlot.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/core/slots/chart-states/EmptyStateSlot.tsx"],
-  "sourcesContent": ["import { type ReactNode } from 'react';\n\n/**\n * @public\n */\nexport interface EmptyStateSlotProps {\n  children: ReactNode;\n}\n\n/**\n * @public\n */\nexport const EmptyStateSlot = ({ children }: EmptyStateSlotProps) => (\n  <>{children}</>\n);\n"],
-  "mappings": "AAaE;AADK,MAAM,iBAAiB,CAAC,EAAE,SAAS,MACxC,gCAAG,UAAS;",
+  "sourcesContent": ["import { type ReactNode } from 'react';\n\n/**\n * @public\n */\nexport interface EmptyStateSlotProps {\n  children: ReactNode;\n}\n\n/**\n * @public\n */\nexport const EmptyStateSlot = ({ children }: EmptyStateSlotProps) => (\n  // oxlint-disable-next-line react/jsx-no-useless-fragment\n  <>{children}</>\n);\n"],
+  "mappings": "AAcE;AAFK,MAAM,iBAAiB,CAAC,EAAE,SAAS;AAAA;AAAA,EAExC,gCAAG,UAAS;AAAA;",
   "names": []
 }

package/esm/charts/core/slots/chart-states/ErrorStateSlot.js

@@ -1,5 +1,8 @@
 import { Fragment, jsx } from "react/jsx-runtime";
-const ErrorStateSlot = ({ children }) => /* @__PURE__ */ jsx(Fragment, { children });
+const ErrorStateSlot = ({ children }) => (
+  // oxlint-disable-next-line react/jsx-no-useless-fragment
+  /* @__PURE__ */ jsx(Fragment, { children })
+);
 export {
   ErrorStateSlot
 };

package/esm/charts/core/slots/chart-states/ErrorStateSlot.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/core/slots/chart-states/ErrorStateSlot.tsx"],
-  "sourcesContent": ["import { type JSX, type ReactNode } from 'react';\n\n/**\n * @public\n */\nexport interface ErrorStateSlotProps {\n  children: ReactNode | ((errorMessage: string) => JSX.Element);\n}\n\n/**\n * @public\n */\nexport const ErrorStateSlot = ({ children }: ErrorStateSlotProps) => (\n  <>{children}</>\n);\n"],
-  "mappings": "AAaE;AADK,MAAM,iBAAiB,CAAC,EAAE,SAAS,MACxC,gCAAG,UAAS;",
+  "sourcesContent": ["import { type JSX, type ReactNode } from 'react';\n\n/**\n * @public\n */\nexport interface ErrorStateSlotProps {\n  children: ReactNode | ((errorMessage: string) => JSX.Element);\n}\n\n/**\n * @public\n */\nexport const ErrorStateSlot = ({ children }: ErrorStateSlotProps) => (\n  // oxlint-disable-next-line react/jsx-no-useless-fragment\n  <>{children}</>\n);\n"],
+  "mappings": "AAcE;AAFK,MAAM,iBAAiB,CAAC,EAAE,SAAS;AAAA;AAAA,EAExC,gCAAG,UAAS;AAAA;",
   "names": []
 }

package/esm/charts/core/slots/toolbar/ChartToolbar.js

@@ -3,7 +3,7 @@ import { DownloadData } from "./DownloadData.js";
 const ChartToolbarRoot = ({
   children
 }) => (
-  // eslint-disable-next-line react/jsx-no-useless-fragment
+  // oxlint-disable-next-line react/jsx-no-useless-fragment
   /* @__PURE__ */ jsx(Fragment, { children })
 );
 ChartToolbarRoot.displayName = "ChartToolbar";
@@ -11,7 +11,7 @@ const ChartToolbar = Object.assign(ChartToolbarRoot, {
   /**
    * @deprecated Use chart specific toolbar item slots instead (e.g. \<CategoricalBarChart.DownloadCSV /\>).
    */
-  // eslint-disable-next-line @typescript-eslint/no-deprecated
+  // oxlint-disable-next-line typescript/no-deprecated
   DownloadData
 });
 export {

package/esm/charts/core/slots/toolbar/ChartToolbar.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/core/slots/toolbar/ChartToolbar.tsx"],
-  "sourcesContent": ["import { type PropsWithChildren } from 'react';\n\nimport { DownloadData } from './DownloadData.js';\nimport type { ChartToolbarProps } from '../../types/toolbar.js';\n\n/**\n * ChartToolbar slot component.\n * TODO APPDEV-15613: Remove deprecated ChartToolbar component\n */\nconst ChartToolbarRoot = ({\n  children,\n}: PropsWithChildren<ChartToolbarProps>) => (\n  // eslint-disable-next-line react/jsx-no-useless-fragment\n  (<>{children}</>)\n);\n\nChartToolbarRoot.displayName = 'ChartToolbar';\n\n/**\n * ChartToolbar Slots\n * @public\n *\n * @deprecated Use chart-specific Toolbar slot instead (e.g. \\<CategoricalBarChart.Toolbar /\\>).\n */\nexport const ChartToolbar = Object.assign(ChartToolbarRoot, {\n  /**\n   * @deprecated Use chart specific toolbar item slots instead (e.g. \\<CategoricalBarChart.DownloadCSV /\\>).\n   */\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  DownloadData,\n});\n"],
-  "mappings": "AAaG;AAXH,SAAS,oBAAoB;AAO7B,MAAM,mBAAmB,CAAC;AAAA,EACxB;AACF;AAAA;AAAA,EAEG,gCAAG,UAAS;AAAA;AAGf,iBAAiB,cAAc;AAQxB,MAAM,eAAe,OAAO,OAAO,kBAAkB;AAAA;AAAA;AAAA;AAAA;AAAA,EAK1D;AACF,CAAC;",
+  "sourcesContent": ["import { type PropsWithChildren } from 'react';\n\nimport { DownloadData } from './DownloadData.js';\nimport type { ChartToolbarProps } from '../../types/toolbar.js';\n\n/**\n * ChartToolbar slot component.\n * TODO APPDEV-15613: Remove deprecated ChartToolbar component\n */\nconst ChartToolbarRoot = ({\n  children,\n}: PropsWithChildren<ChartToolbarProps>) => (\n  // oxlint-disable-next-line react/jsx-no-useless-fragment\n  <>{children}</>\n);\n\nChartToolbarRoot.displayName = 'ChartToolbar';\n\n/**\n * ChartToolbar Slots\n * @public\n *\n * @deprecated Use chart-specific Toolbar slot instead (e.g. \\<CategoricalBarChart.Toolbar /\\>).\n */\nexport const ChartToolbar = Object.assign(ChartToolbarRoot, {\n  /**\n   * @deprecated Use chart specific toolbar item slots instead (e.g. \\<CategoricalBarChart.DownloadCSV /\\>).\n   */\n  // oxlint-disable-next-line typescript/no-deprecated\n  DownloadData,\n});\n"],
+  "mappings": "AAaE;AAXF,SAAS,oBAAoB;AAO7B,MAAM,mBAAmB,CAAC;AAAA,EACxB;AACF;AAAA;AAAA,EAEE,gCAAG,UAAS;AAAA;AAGd,iBAAiB,cAAc;AAQxB,MAAM,eAAe,OAAO,OAAO,kBAAkB;AAAA;AAAA;AAAA;AAAA;AAAA,EAK1D;AACF,CAAC;",
   "names": []
 }

package/esm/charts/core/slots/toolbar/DownloadData.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/core/slots/toolbar/DownloadData.tsx"],
-  "sourcesContent": ["/**\n * DownloadData slot component.\n *\n * @deprecated Use chart-specific DownloadCSV slot instead (e.g. \\<CategoricalBarChart.DownloadCSV /\\>).\n */\nexport const DownloadData = () => null;\n\n// eslint-disable-next-line @typescript-eslint/no-deprecated\nDownloadData['displayName'] = 'ChartInteractions.DownloadData';\n"],
+  "sourcesContent": ["/**\n * DownloadData slot component.\n *\n * @deprecated Use chart-specific DownloadCSV slot instead (e.g. \\<CategoricalBarChart.DownloadCSV /\\>).\n */\nexport const DownloadData = () => null;\n\n// oxlint-disable-next-line typescript/no-deprecated\nDownloadData['displayName'] = 'ChartInteractions.DownloadData';\n"],
   "mappings": "AAKO,MAAM,eAAe,MAAM;AAGlC,aAAa,aAAa,IAAI;",
   "names": []
 }

package/esm/charts/core/types/tooltip.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/charts/core/types/tooltip.ts"],
-  "sourcesContent": ["import type { ColorToken } from './color-palette.js';\n\n/**\n * Base tooltip configuration shared across charts.\n * @internal\n */\nexport interface ChartTooltipConfig {\n  hidden: boolean;\n}\n\n/**\n * Base tooltip config props for the chart config provider.\n * Charts can extend this to add chart-specific options.\n * @public\n */\nexport interface ChartTooltipConfigProps {\n  /**\n   * When true, hides the tooltip entirely.\n   * @defaultValue false\n   */\n  hidden?: boolean;\n  _variant?: TooltipVariant;\n}\n\n/**\n * The tooltip display\n * @public\n */\nexport const seriesDisplayModeOptions = ['single-line', 'multi-line'] as const;\n\n/**\n * @public\n */\nexport type SeriesDisplayMode = (typeof seriesDisplayModeOptions)[number];\n\n/**\n * @public\n */\nexport interface TooltipItem extends Record<string, unknown> {\n  id: string;\n  name: string | string[];\n  color?: ColorToken;\n  values?: string[];\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  userData?: Record<string, any>;\n}\n\n/**\n * Whether the tooltip is single (only the closest series is displayed) or shared (all series in a timeframe are displayed)\n * @public\n */\nexport const tooltipVariantOptions = ['single', 'shared'] as const;\n\n/**\n * @public\n */\nexport type TooltipVariant = (typeof tooltipVariantOptions)[number];\n"],
+  "sourcesContent": ["import type { ColorToken } from './color-palette.js';\n\n/**\n * Base tooltip configuration shared across charts.\n * @internal\n */\nexport interface ChartTooltipConfig {\n  hidden: boolean;\n}\n\n/**\n * Base tooltip config props for the chart config provider.\n * Charts can extend this to add chart-specific options.\n * @public\n */\nexport interface ChartTooltipConfigProps {\n  /**\n   * When true, hides the tooltip entirely.\n   * @defaultValue false\n   */\n  hidden?: boolean;\n  _variant?: TooltipVariant;\n}\n\n/**\n * The tooltip display\n * @public\n */\nexport const seriesDisplayModeOptions = ['single-line', 'multi-line'] as const;\n\n/**\n * @public\n */\nexport type SeriesDisplayMode = (typeof seriesDisplayModeOptions)[number];\n\n/**\n * @public\n */\nexport interface TooltipItem extends Record<string, unknown> {\n  id: string;\n  name: string | string[];\n  color?: ColorToken;\n  values?: string[];\n  // oxlint-disable-next-line typescript/no-explicit-any\n  userData?: Record<string, any>;\n}\n\n/**\n * Whether the tooltip is single (only the closest series is displayed) or shared (all series in a timeframe are displayed)\n * @public\n */\nexport const tooltipVariantOptions = ['single', 'shared'] as const;\n\n/**\n * @public\n */\nexport type TooltipVariant = (typeof tooltipVariantOptions)[number];\n"],
   "mappings": "AA4BO,MAAM,2BAA2B,CAAC,eAAe,YAAY;AAuB7D,MAAM,wBAAwB,CAAC,UAAU,QAAQ;",
   "names": []
 }

package/esm/charts/core/typographyStyles.css

@@ -1,3 +1,3 @@
-._18u8ey50-3-12-1 {
+._18u8ey50-3-13-0 {
   font-feature-settings: 'ss01';
 }

package/esm/charts/core/typographyStyles.sty.js

@@ -1,5 +1,5 @@
 import "./typographyStyles.css";
-var replaceSlashedZero = "_18u8ey50-3-12-1";
+var replaceSlashedZero = "_18u8ey50-3-13-0";
 export {
   replaceSlashedZero
 };

package/esm/charts/core/typographyStyles.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/charts/core/typographyStyles.css.ts"],
-  "sourcesContent": ["import './typographyStyles.css';\nexport var replaceSlashedZero = '_18u8ey50-3-12-1';"],
+  "sourcesContent": ["import './typographyStyles.css';\nexport var replaceSlashedZero = '_18u8ey50-3-13-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,qBAAqB;",
   "names": []
 }

package/esm/charts/core/utils/build-rgba-color-with-opacity.js

@@ -3,7 +3,7 @@ import { getTokenComputedStyle } from "./getTokenComputedStyle.js";
 import { SCALE_FALLBACK_COLOR } from "../constants.js";
 const buildRgbaColorWithOpacity = (baseColor, opacity = 1) => {
   const nameableColor = getTokenComputedStyle(baseColor);
-  const convertedColor = d3Color(nameableColor) ?? // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  const convertedColor = d3Color(nameableColor) ?? // oxlint-disable-next-line typescript/no-non-null-assertion
   d3Color(getTokenComputedStyle(SCALE_FALLBACK_COLOR));
   convertedColor.opacity = opacity;
   return convertedColor.formatHex8();

package/esm/charts/core/utils/build-rgba-color-with-opacity.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/charts/core/utils/build-rgba-color-with-opacity.ts"],
-  "sourcesContent": ["import { color as d3Color } from 'd3-color';\n\nimport { getTokenComputedStyle } from './getTokenComputedStyle.js';\nimport { SCALE_FALLBACK_COLOR } from '../constants.js';\n\nexport const buildRgbaColorWithOpacity = (\n  baseColor: string,\n  opacity: number = 1,\n) => {\n  const nameableColor = getTokenComputedStyle(baseColor);\n  const convertedColor =\n    d3Color(nameableColor) ??\n    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n    d3Color(getTokenComputedStyle(SCALE_FALLBACK_COLOR))!;\n  convertedColor.opacity = opacity;\n\n  return convertedColor.formatHex8();\n};\n"],
+  "sourcesContent": ["import { color as d3Color } from 'd3-color';\n\nimport { getTokenComputedStyle } from './getTokenComputedStyle.js';\nimport { SCALE_FALLBACK_COLOR } from '../constants.js';\n\nexport const buildRgbaColorWithOpacity = (\n  baseColor: string,\n  opacity: number = 1,\n) => {\n  const nameableColor = getTokenComputedStyle(baseColor);\n  const convertedColor =\n    d3Color(nameableColor) ??\n    // oxlint-disable-next-line typescript/no-non-null-assertion\n    d3Color(getTokenComputedStyle(SCALE_FALLBACK_COLOR))!;\n  convertedColor.opacity = opacity;\n\n  return convertedColor.formatHex8();\n};\n"],
   "mappings": "AAAA,SAAS,SAAS,eAAe;AAEjC,SAAS,6BAA6B;AACtC,SAAS,4BAA4B;AAE9B,MAAM,4BAA4B,CACvC,WACA,UAAkB,MACf;AACH,QAAM,gBAAgB,sBAAsB,SAAS;AACrD,QAAM,iBACJ,QAAQ,aAAa;AAAA,EAErB,QAAQ,sBAAsB,oBAAoB,CAAC;AACrD,iBAAe,UAAU;AAEzB,SAAO,eAAe,WAAW;AACnC;",
   "names": []
 }

package/esm/charts/core/utils/iterate-chart-interactions-slots.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/charts/core/utils/iterate-chart-interactions-slots.ts"],
-  "sourcesContent": ["import { Children, isValidElement, type ReactNode } from 'react';\n\nimport { isSlot } from '../../../core/utils/is-slot.js';\nimport { Pan } from '../slots/chart-interactions/Pan.js';\nimport { Zoom } from '../slots/chart-interactions/Zoom.js';\nimport { ZoomX } from '../slots/chart-interactions/ZoomX.js';\nimport { type ChartInteractionsConfig } from '../types/interactions.js';\n\n/**\n * Generate chart config based on slots\n * @param children - CharInteraction children\n * @returns ChartInteraction slot config\n */\nexport const iterateChartInteractionsSlots = (children: ReactNode) => {\n  let interactions: ChartInteractionsConfig = {};\n\n  Children.forEach(children, (childInteractions) => {\n    if (isValidElement(childInteractions)) {\n      /* eslint-disable-next-line @typescript-eslint/no-deprecated */\n      if (isSlot(childInteractions, Zoom)) {\n        interactions = { ...interactions, zoom: { enabled: true } };\n        /* eslint-disable-next-line @typescript-eslint/no-deprecated */\n      } else if (isSlot(childInteractions, ZoomX)) {\n        interactions = { ...interactions, zoomX: { enabled: true } };\n        /* eslint-disable-next-line @typescript-eslint/no-deprecated */\n      } else if (isSlot(childInteractions, Pan)) {\n        interactions = { ...interactions, pan: { enabled: true } };\n      }\n    }\n  });\n\n  return interactions;\n};\n"],
+  "sourcesContent": ["import { Children, isValidElement, type ReactNode } from 'react';\n\nimport { isSlot } from '../../../core/utils/is-slot.js';\nimport { Pan } from '../slots/chart-interactions/Pan.js';\nimport { Zoom } from '../slots/chart-interactions/Zoom.js';\nimport { ZoomX } from '../slots/chart-interactions/ZoomX.js';\nimport { type ChartInteractionsConfig } from '../types/interactions.js';\n\n/**\n * Generate chart config based on slots\n * @param children - CharInteraction children\n * @returns ChartInteraction slot config\n */\nexport const iterateChartInteractionsSlots = (children: ReactNode) => {\n  let interactions: ChartInteractionsConfig = {};\n\n  Children.forEach(children, (childInteractions) => {\n    if (isValidElement(childInteractions)) {\n      /* oxlint-disable-next-line typescript/no-deprecated */\n      if (isSlot(childInteractions, Zoom)) {\n        interactions = { ...interactions, zoom: { enabled: true } };\n        /* oxlint-disable-next-line typescript/no-deprecated */\n      } else if (isSlot(childInteractions, ZoomX)) {\n        interactions = { ...interactions, zoomX: { enabled: true } };\n        /* oxlint-disable-next-line typescript/no-deprecated */\n      } else if (isSlot(childInteractions, Pan)) {\n        interactions = { ...interactions, pan: { enabled: true } };\n      }\n    }\n  });\n\n  return interactions;\n};\n"],
   "mappings": "AAAA,SAAS,UAAU,sBAAsC;AAEzD,SAAS,cAAc;AACvB,SAAS,WAAW;AACpB,SAAS,YAAY;AACrB,SAAS,aAAa;AAQf,MAAM,gCAAgC,CAAC,aAAwB;AACpE,MAAI,eAAwC,CAAC;AAE7C,WAAS,QAAQ,UAAU,CAAC,sBAAsB;AAChD,QAAI,eAAe,iBAAiB,GAAG;AAErC,UAAI,OAAO,mBAAmB,IAAI,GAAG;AACnC,uBAAe,EAAE,GAAG,cAAc,MAAM,EAAE,SAAS,KAAK,EAAE;AAAA,MAE5D,WAAW,OAAO,mBAAmB,KAAK,GAAG;AAC3C,uBAAe,EAAE,GAAG,cAAc,OAAO,EAAE,SAAS,KAAK,EAAE;AAAA,MAE7D,WAAW,OAAO,mBAAmB,GAAG,GAAG;AACzC,uBAAe,EAAE,GAAG,cAAc,KAAK,EAAE,SAAS,KAAK,EAAE;AAAA,MAC3D;AAAA,IACF;AAAA,EACF,CAAC;AAED,SAAO;AACT;",
   "names": []
 }

package/esm/charts/core/utils/prepare-inverted-color-palette.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/charts/core/utils/prepare-inverted-color-palette.ts"],
-  "sourcesContent": ["import { invertColorPalette } from './invert-color-palette.js';\nimport type {\n  ColorPalette,\n  ColorPaletteDefinition,\n} from '../types/color-palette.js';\n\n/**\n * Maps all the basic color palettes, creating an inverted one for each of them.\n * @param coloringMap - All the basic color palettes without the inverted.\n * @returns - The whole color palette object\n */\nexport const prepareInvertedColorPalette = (\n  coloringMap: Record<\n    ColorPalette,\n    ColorPaletteDefinition | Record<string, string>\n  >,\n) => {\n  return Object.keys(coloringMap).reduce((acc, key) => {\n    acc[key] = coloringMap[key as ColorPalette];\n    acc[`${key}-inverted`] = invertColorPalette(acc[key]);\n\n    return acc;\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  }, {} as any);\n};\n"],
+  "sourcesContent": ["import { invertColorPalette } from './invert-color-palette.js';\nimport type {\n  ColorPalette,\n  ColorPaletteDefinition,\n} from '../types/color-palette.js';\n\n/**\n * Maps all the basic color palettes, creating an inverted one for each of them.\n * @param coloringMap - All the basic color palettes without the inverted.\n * @returns - The whole color palette object\n */\nexport const prepareInvertedColorPalette = (\n  coloringMap: Record<\n    ColorPalette,\n    ColorPaletteDefinition | Record<string, string>\n  >,\n) => {\n  return Object.keys(coloringMap).reduce((acc, key) => {\n    acc[key] = coloringMap[key as ColorPalette];\n    acc[`${key}-inverted`] = invertColorPalette(acc[key]);\n\n    return acc;\n    // oxlint-disable-next-line typescript/no-explicit-any\n  }, {} as any);\n};\n"],
   "mappings": "AAAA,SAAS,0BAA0B;AAW5B,MAAM,8BAA8B,CACzC,gBAIG;AACH,SAAO,OAAO,KAAK,WAAW,EAAE,OAAO,CAAC,KAAK,QAAQ;AACnD,QAAI,GAAG,IAAI,YAAY,GAAmB;AAC1C,QAAI,GAAG,GAAG,WAAW,IAAI,mBAAmB,IAAI,GAAG,CAAC;AAEpD,WAAO;AAAA,EAET,GAAG,CAAC,CAAQ;AACd;",
   "names": []
 }

package/esm/charts/core/utils/text-truncation.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/charts/core/utils/text-truncation.ts"],
-  "sourcesContent": ["/* eslint-disable @typescript-eslint/no-deprecated */\nimport type { TruncationMode } from '../../../typography/text-ellipsis/TextEllipsis.js';\n\n/**\n * @deprecated Use `truncateString` from `core/components/text-ellipsis/truncate-string` instead.\n * can be removed APPDEV-15421\n * @internal\n */\nexport const truncateText = (\n  text: string,\n  truncationMode: TruncationMode,\n  stopTruncation: (text: string) => boolean,\n) => {\n  let truncatedText = text;\n\n  while (!stopTruncation(truncatedText)) {\n    const filteredText = truncatedText.replace(/\\.\\.\\./, '');\n\n    if (!filteredText.length) {\n      break;\n    }\n\n    truncatedText = TRUNCATE_LABEL[truncationMode](filteredText);\n  }\n\n  return truncatedText;\n};\n\n/**\n * @deprecated Use the ellipsis character from `typography/utils` instead.\n * can be removed APPDEV-15421\n * @internal\n */\nexport const ELLIPSIS = '...';\n\n/**\n * @deprecated Use `truncateString` from `core/components/text-ellipsis/truncate-string` instead.\n * can be removed APPDEV-15421\n * @internal\n */\nexport const middleTruncation = (text: string) => {\n  const middle = Math.floor(text.length / 2);\n  const firstHalf = text.slice(0, middle);\n  const secondHalf = text.slice(middle + 1);\n\n  const hasEllipsis = firstHalf.length || secondHalf.length;\n\n  const newText = `${firstHalf}${hasEllipsis ? ELLIPSIS : ''}${secondHalf}`;\n\n  return newText;\n};\n\n/**\n * @deprecated Use `truncateString` from `core/components/text-ellipsis/truncate-string` instead.\n * can be removed APPDEV-15421\n * @internal\n */\nexport const startTruncation = (text: string) => {\n  const slicedText = text.slice(1);\n  const hasEllipsis = slicedText.length;\n\n  const newText = `${hasEllipsis ? ELLIPSIS : ''}${slicedText}`;\n\n  return newText;\n};\n\n/**\n * @deprecated Use `truncateString` from `core/components/text-ellipsis/truncate-string` instead.\n * can be removed APPDEV-15421\n * @internal\n */\nexport const endTruncation = (text: string) => {\n  const slicedText = text.slice(0, -1);\n  const hasEllipsis = slicedText.length;\n\n  const newText = `${text.slice(0, -1)}${hasEllipsis ? ELLIPSIS : ''}`;\n\n  return newText;\n};\n\n/**\n * @deprecated Use `truncateString` from `core/components/text-ellipsis/truncate-string` instead.\n * can be removed APPDEV-15421\n * @internal\n */\nexport const TRUNCATE_LABEL: Record<TruncationMode, (text: string) => string> =\n  {\n    start: startTruncation,\n    end: endTruncation,\n    middle: middleTruncation,\n  };\n"],
+  "sourcesContent": ["/* oxlint-disable typescript/no-deprecated */\nimport type { TruncationMode } from '../../../typography/text-ellipsis/TextEllipsis.js';\n\n/**\n * @deprecated Use `truncateString` from `core/components/text-ellipsis/truncate-string` instead.\n * can be removed APPDEV-15421\n * @internal\n */\nexport const truncateText = (\n  text: string,\n  truncationMode: TruncationMode,\n  stopTruncation: (text: string) => boolean,\n) => {\n  let truncatedText = text;\n\n  while (!stopTruncation(truncatedText)) {\n    const filteredText = truncatedText.replace(/\\.\\.\\./, '');\n\n    if (!filteredText.length) {\n      break;\n    }\n\n    truncatedText = TRUNCATE_LABEL[truncationMode](filteredText);\n  }\n\n  return truncatedText;\n};\n\n/**\n * @deprecated Use the ellipsis character from `typography/utils` instead.\n * can be removed APPDEV-15421\n * @internal\n */\nexport const ELLIPSIS = '...';\n\n/**\n * @deprecated Use `truncateString` from `core/components/text-ellipsis/truncate-string` instead.\n * can be removed APPDEV-15421\n * @internal\n */\nexport const middleTruncation = (text: string) => {\n  const middle = Math.floor(text.length / 2);\n  const firstHalf = text.slice(0, middle);\n  const secondHalf = text.slice(middle + 1);\n\n  const hasEllipsis = firstHalf.length || secondHalf.length;\n\n  const newText = `${firstHalf}${hasEllipsis ? ELLIPSIS : ''}${secondHalf}`;\n\n  return newText;\n};\n\n/**\n * @deprecated Use `truncateString` from `core/components/text-ellipsis/truncate-string` instead.\n * can be removed APPDEV-15421\n * @internal\n */\nexport const startTruncation = (text: string) => {\n  const slicedText = text.slice(1);\n  const hasEllipsis = slicedText.length;\n\n  const newText = `${hasEllipsis ? ELLIPSIS : ''}${slicedText}`;\n\n  return newText;\n};\n\n/**\n * @deprecated Use `truncateString` from `core/components/text-ellipsis/truncate-string` instead.\n * can be removed APPDEV-15421\n * @internal\n */\nexport const endTruncation = (text: string) => {\n  const slicedText = text.slice(0, -1);\n  const hasEllipsis = slicedText.length;\n\n  const newText = `${text.slice(0, -1)}${hasEllipsis ? ELLIPSIS : ''}`;\n\n  return newText;\n};\n\n/**\n * @deprecated Use `truncateString` from `core/components/text-ellipsis/truncate-string` instead.\n * can be removed APPDEV-15421\n * @internal\n */\nexport const TRUNCATE_LABEL: Record<TruncationMode, (text: string) => string> =\n  {\n    start: startTruncation,\n    end: endTruncation,\n    middle: middleTruncation,\n  };\n"],
   "mappings": "AAQO,MAAM,eAAe,CAC1B,MACA,gBACA,mBACG;AACH,MAAI,gBAAgB;AAEpB,SAAO,CAAC,eAAe,aAAa,GAAG;AACrC,UAAM,eAAe,cAAc,QAAQ,UAAU,EAAE;AAEvD,QAAI,CAAC,aAAa,QAAQ;AACxB;AAAA,IACF;AAEA,oBAAgB,eAAe,cAAc,EAAE,YAAY;AAAA,EAC7D;AAEA,SAAO;AACT;AAOO,MAAM,WAAW;AAOjB,MAAM,mBAAmB,CAAC,SAAiB;AAChD,QAAM,SAAS,KAAK,MAAM,KAAK,SAAS,CAAC;AACzC,QAAM,YAAY,KAAK,MAAM,GAAG,MAAM;AACtC,QAAM,aAAa,KAAK,MAAM,SAAS,CAAC;AAExC,QAAM,cAAc,UAAU,UAAU,WAAW;AAEnD,QAAM,UAAU,GAAG,SAAS,GAAG,cAAc,WAAW,EAAE,GAAG,UAAU;AAEvE,SAAO;AACT;AAOO,MAAM,kBAAkB,CAAC,SAAiB;AAC/C,QAAM,aAAa,KAAK,MAAM,CAAC;AAC/B,QAAM,cAAc,WAAW;AAE/B,QAAM,UAAU,GAAG,cAAc,WAAW,EAAE,GAAG,UAAU;AAE3D,SAAO;AACT;AAOO,MAAM,gBAAgB,CAAC,SAAiB;AAC7C,QAAM,aAAa,KAAK,MAAM,GAAG,EAAE;AACnC,QAAM,cAAc,WAAW;AAE/B,QAAM,UAAU,GAAG,KAAK,MAAM,GAAG,EAAE,CAAC,GAAG,cAAc,WAAW,EAAE;AAElE,SAAO;AACT;AAOO,MAAM,iBACX;AAAA,EACE,OAAO;AAAA,EACP,KAAK;AAAA,EACL,QAAQ;AACV;",
   "names": []
 }

package/esm/charts/flame/flame-chart/FlameChart.js

@@ -1,10 +1,9 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useMemo } from "react";
+import { useCallback, useMemo, useState } from "react";
 import { units } from "@dynatrace-sdk/units";
-import { ChartVariantContext } from "../../core/context/ChartVariantContext.js";
+import { iterateSlots } from "./utils/iterate-slots.js";
 import { ColorRule } from "../../core/slots/ColorRule.js";
 import { XYChart } from "../../xy-chart/XYChartRoot.js";
-import { FlameTooltip } from "../shared/components/tooltip/FlameTooltip.js";
 import {
   DEPTH_FIELD,
   DISPLAY_NAME_FLAME_CHART,
@@ -14,12 +13,10 @@ import {
   VALUE_FIELD,
   XY_DEFAULTS
 } from "../shared/constants.js";
-import { iterateSlots } from "./utils/iterate-slots.js";
+import { DefaultTooltip } from "./components/tooltip/DefaultTooltip.js";
 import { FlameChartTooltipSlot as Tooltip } from "../shared/slots/Tooltip.js";
 import { orderSpansHierarchically } from "../shared/utils/order-spans-hierarchically.js";
-const CROSSHAIR_VARIANT = {
-  crosshair: { horizontalHidden: true, cursor: "default" }
-};
+import { resolveFlameTooltipContent } from "../shared/utils/resolve-flame-tooltip-content.js";
 const FlameChartRoot = ({
   data,
   idAccessor,
@@ -36,6 +33,7 @@ const FlameChartRoot = ({
   currentZoom,
   seriesActions,
   height,
+  __globalActions,
   children
 }) => {
   const orderedData = useMemo(() => {
@@ -71,8 +69,13 @@ const FlameChartRoot = ({
     const offset = minTime ?? 0;
     return [currentZoom[0] - offset, currentZoom[1] - offset];
   }, [currentZoom, minTime]);
+  const [internalZoom, setInternalZoom] = useState(void 0);
+  const effectiveZoom = normalizedZoom ?? internalZoom;
+  const handleIsolate = useCallback((zoom) => {
+    setInternalZoom(zoom);
+  }, []);
   const { customTooltipTemplate, colorRules } = iterateSlots(children);
-  return /* @__PURE__ */ jsx(ChartVariantContext.Provider, { value: CROSSHAIR_VARIANT, children: /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsxs(
     XYChart,
     {
       data: orderedData,
@@ -99,8 +102,7 @@ const FlameChartRoot = ({
             type: "numerical",
             position: orientation === "bottom-up" ? "bottom" : "top",
             formatter: { input: units.time.millisecond },
-            currentZoom: normalizedZoom,
-            infiniteZoom: true
+            currentZoom: effectiveZoom
           }
         ),
         /* @__PURE__ */ jsx(
@@ -110,42 +112,33 @@ const FlameChartRoot = ({
             type: "categorical",
             position: "left",
             hidden: true,
-            reversed: orientation === "bottom-up"
+            reversed: orientation === "bottom-up",
+            hideCrosshair: true
           }
         ),
         /* @__PURE__ */ jsx(XYChart.Legend, { hidden: true }),
         /* @__PURE__ */ jsx(XYChart.Toolbar, { hidden: true }),
         colorRules,
-        /* @__PURE__ */ jsx(XYChart.Tooltip, { children: (payload) => {
-          const datapoint = payload.rectPayload?.datapoint;
-          if (!datapoint) {
-            return;
-          }
-          if (customTooltipTemplate) {
-            const template = customTooltipTemplate(datapoint);
-            if (template === null) {
-              return null;
-            }
-            if (template) {
-              return template;
-            }
-          }
-          return /* @__PURE__ */ jsx(
-            FlameTooltip,
+        /* @__PURE__ */ jsx(XYChart.Tooltip, { children: (payload) => resolveFlameTooltipContent(
+          payload,
+          data,
+          customTooltipTemplate,
+          () => /* @__PURE__ */ jsx(
+            DefaultTooltip,
             {
               payload,
               data,
               labelAccessor,
-              valueField: VALUE_FIELD,
               selfValueAccessor,
               valueFormatter,
-              seriesActions
+              seriesActions,
+              onIsolate: __globalActions ? handleIsolate : void 0
             }
-          );
-        } })
+          )
+        ) })
       ]
     }
-  ) });
+  );
 };
 const FlameChart = Object.assign(FlameChartRoot, {
   Tooltip,

package/esm/charts/flame/flame-chart/FlameChart.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/charts/flame/flame-chart/FlameChart.tsx"],
-  "sourcesContent": ["import { type PropsWithChildren, useMemo } from 'react';\n\nimport { units } from '@dynatrace-sdk/units';\n\nimport { ChartVariantContext } from '../../core/context/ChartVariantContext.js';\nimport { ColorRule } from '../../core/slots/ColorRule.js';\nimport type { ChartDatapoint } from '../../core/types/chart-data.js';\nimport { XYChart } from '../../xy-chart/XYChartRoot.js';\nimport { FlameTooltip } from '../shared/components/tooltip/FlameTooltip.js';\nimport {\n  DEPTH_FIELD,\n  DISPLAY_NAME_FLAME_CHART,\n  END_FIELD,\n  FLAME_ORIGINAL_IDX,\n  START_FIELD,\n  VALUE_FIELD,\n  XY_DEFAULTS,\n} from '../shared/constants.js';\nimport { iterateSlots } from './utils/iterate-slots.js';\nimport { FlameChartTooltipSlot as Tooltip } from '../shared/slots/Tooltip.js';\nimport type { FlameChartProps } from '../shared/types/flame-chart.js';\nimport { orderSpansHierarchically } from '../shared/utils/order-spans-hierarchically.js';\n\nconst CROSSHAIR_VARIANT = {\n  crosshair: { horizontalHidden: true, cursor: 'default' as const },\n};\n\n/**\n * @internal\n */\nexport const FlameChartRoot = /* @__PURE__ */ <\n  TData extends ChartDatapoint = ChartDatapoint,\n>({\n  data,\n  idAccessor,\n  parentIdAccessor,\n  startAccessor,\n  endAccessor,\n  selfValueAccessor,\n  labelAccessor,\n  colorPalette,\n  orientation = 'bottom-up',\n  truncationMode,\n  valueFormatter,\n  minTime,\n  currentZoom,\n  seriesActions,\n  height,\n  children,\n}: PropsWithChildren<FlameChartProps<TData>>) => {\n  const orderedData = useMemo(() => {\n    const withIndex = data.map((datum, index) => ({\n      ...datum,\n      [FLAME_ORIGINAL_IDX]: index,\n    }));\n    const ordered = orderSpansHierarchically(withIndex, {\n      spanIdAccessor: idAccessor,\n      parentIdAccessor,\n      x0Accessor: startAccessor,\n      x1Accessor: endAccessor,\n    });\n\n    const offset = minTime ?? 0;\n    const output: ChartDatapoint[] = new Array(ordered.length);\n    for (let i = 0; i < ordered.length; i++) {\n      const span = ordered[i];\n      const start = Number(span[startAccessor] ?? 0);\n      const end = Number(span[endAccessor] ?? 0);\n      output[i] = {\n        ...span,\n        [START_FIELD]: start - offset,\n        [END_FIELD]: end - offset,\n        [VALUE_FIELD]: end - start,\n      };\n    }\n    return output;\n  }, [data, idAccessor, parentIdAccessor, startAccessor, endAccessor, minTime]);\n\n  const normalizedZoom = useMemo<[number, number] | undefined>(() => {\n    if (!currentZoom) {\n      return undefined;\n    }\n    const offset = minTime ?? 0;\n    return [currentZoom[0] - offset, currentZoom[1] - offset];\n  }, [currentZoom, minTime]);\n\n  const { customTooltipTemplate, colorRules } = iterateSlots<TData>(children);\n\n  return (\n    <ChartVariantContext.Provider value={CROSSHAIR_VARIANT}>\n      <XYChart\n        data={orderedData}\n        truncationMode={truncationMode}\n        height={height}\n      >\n        <XYChart.RectSeries\n          x0Accessor={START_FIELD}\n          x1Accessor={END_FIELD}\n          y0Accessor={DEPTH_FIELD}\n          valueAccessor={VALUE_FIELD}\n          colorPalette={colorPalette}\n          _labelAccessor={labelAccessor}\n          xAxisId={XY_DEFAULTS.xAxisId}\n          yAxisId={XY_DEFAULTS.yAxisId}\n        />\n        <XYChart.XAxis\n          id={XY_DEFAULTS.xAxisId}\n          type=\"numerical\"\n          position={orientation === 'bottom-up' ? 'bottom' : 'top'}\n          formatter={{ input: units.time.millisecond }}\n          currentZoom={normalizedZoom}\n          infiniteZoom\n        />\n        <XYChart.YAxis\n          id={XY_DEFAULTS.yAxisId}\n          type=\"categorical\"\n          position=\"left\"\n          hidden\n          reversed={orientation === 'bottom-up'}\n        />\n        <XYChart.Legend hidden />\n        <XYChart.Toolbar hidden />\n        {colorRules}\n        <XYChart.Tooltip>\n          {(payload) => {\n            const datapoint = payload.rectPayload?.datapoint as\n              | TData\n              | undefined;\n\n            if (!datapoint) {\n              return;\n            }\n\n            if (customTooltipTemplate) {\n              const template = customTooltipTemplate(datapoint);\n\n              if (template === null) {\n                return null;\n              }\n              if (template) {\n                return template;\n              }\n            }\n\n            return (\n              <FlameTooltip\n                payload={payload}\n                data={data}\n                labelAccessor={labelAccessor}\n                valueField={VALUE_FIELD}\n                selfValueAccessor={selfValueAccessor}\n                valueFormatter={valueFormatter}\n                seriesActions={seriesActions}\n              />\n            );\n          }}\n        </XYChart.Tooltip>\n      </XYChart>\n    </ChartVariantContext.Provider>\n  );\n};\n\n/** @internal */\nexport const FlameChart = Object.assign(FlameChartRoot, {\n  Tooltip,\n  ColorRule,\n});\n\n(FlameChart as typeof FlameChart & { displayName: string }).displayName =\n  DISPLAY_NAME_FLAME_CHART;\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { type PropsWithChildren, useCallback, useMemo, useState } from 'react';\n\nimport { units } from '@dynatrace-sdk/units';\n\nimport { iterateSlots } from './utils/iterate-slots.js';\nimport { ColorRule } from '../../core/slots/ColorRule.js';\nimport type { ChartDatapoint } from '../../core/types/chart-data.js';\nimport { XYChart } from '../../xy-chart/XYChartRoot.js';\nimport {\n  DEPTH_FIELD,\n  DISPLAY_NAME_FLAME_CHART,\n  END_FIELD,\n  FLAME_ORIGINAL_IDX,\n  START_FIELD,\n  VALUE_FIELD,\n  XY_DEFAULTS,\n} from '../shared/constants.js';\nimport { DefaultTooltip } from './components/tooltip/DefaultTooltip.js';\nimport { FlameChartTooltipSlot as Tooltip } from '../shared/slots/Tooltip.js';\nimport type { FlameChartProps } from '../shared/types/flame-chart.js';\nimport { orderSpansHierarchically } from '../shared/utils/order-spans-hierarchically.js';\nimport { resolveFlameTooltipContent } from '../shared/utils/resolve-flame-tooltip-content.js';\n\n/**\n * @internal\n */\nexport const FlameChartRoot = /* @__PURE__ */ <\n  TData extends ChartDatapoint = ChartDatapoint,\n>({\n  data,\n  idAccessor,\n  parentIdAccessor,\n  startAccessor,\n  endAccessor,\n  selfValueAccessor,\n  labelAccessor,\n  colorPalette,\n  orientation = 'bottom-up',\n  truncationMode,\n  valueFormatter,\n  minTime,\n  currentZoom,\n  seriesActions,\n  height,\n  __globalActions,\n  children,\n}: PropsWithChildren<FlameChartProps<TData>>) => {\n  const orderedData = useMemo(() => {\n    const withIndex = data.map((datum, index) => ({\n      ...datum,\n      [FLAME_ORIGINAL_IDX]: index,\n    }));\n    const ordered = orderSpansHierarchically(withIndex, {\n      spanIdAccessor: idAccessor,\n      parentIdAccessor,\n      x0Accessor: startAccessor,\n      x1Accessor: endAccessor,\n    });\n\n    const offset = minTime ?? 0;\n    const output: ChartDatapoint[] = new Array(ordered.length);\n    for (let i = 0; i < ordered.length; i++) {\n      const span = ordered[i];\n      const start = Number(span[startAccessor] ?? 0);\n      const end = Number(span[endAccessor] ?? 0);\n      output[i] = {\n        ...span,\n        [START_FIELD]: start - offset,\n        [END_FIELD]: end - offset,\n        [VALUE_FIELD]: end - start,\n      };\n    }\n    return output;\n  }, [data, idAccessor, parentIdAccessor, startAccessor, endAccessor, minTime]);\n\n  const normalizedZoom = useMemo<[number, number] | undefined>(() => {\n    if (!currentZoom) {\n      return undefined;\n    }\n    const offset = minTime ?? 0;\n    return [currentZoom[0] - offset, currentZoom[1] - offset];\n  }, [currentZoom, minTime]);\n\n  const [internalZoom, setInternalZoom] = useState<\n    [number, number] | undefined\n  >(undefined);\n\n  const effectiveZoom = normalizedZoom ?? internalZoom;\n\n  //TODO: Remove the internal isolate logic in APPDEV-19294\n  const handleIsolate = useCallback((zoom: [number, number]) => {\n    setInternalZoom(zoom);\n  }, []);\n\n  const { customTooltipTemplate, colorRules } = iterateSlots<TData>(children);\n\n  return (\n    <XYChart\n      data={orderedData}\n      truncationMode={truncationMode}\n      height={height}\n    >\n      <XYChart.RectSeries\n        x0Accessor={START_FIELD}\n        x1Accessor={END_FIELD}\n        y0Accessor={DEPTH_FIELD}\n        valueAccessor={VALUE_FIELD}\n        colorPalette={colorPalette}\n        _labelAccessor={labelAccessor}\n        xAxisId={XY_DEFAULTS.xAxisId}\n        yAxisId={XY_DEFAULTS.yAxisId}\n      />\n      <XYChart.XAxis\n        id={XY_DEFAULTS.xAxisId}\n        type=\"numerical\"\n        position={orientation === 'bottom-up' ? 'bottom' : 'top'}\n        formatter={{ input: units.time.millisecond }}\n        currentZoom={effectiveZoom}\n      />\n      <XYChart.YAxis\n        id={XY_DEFAULTS.yAxisId}\n        type=\"categorical\"\n        position=\"left\"\n        hidden\n        reversed={orientation === 'bottom-up'}\n        hideCrosshair\n      />\n      <XYChart.Legend hidden />\n      <XYChart.Toolbar hidden />\n      {colorRules}\n      <XYChart.Tooltip>\n        {(payload) =>\n          resolveFlameTooltipContent(\n            payload,\n            data,\n            customTooltipTemplate,\n            () => (\n              <DefaultTooltip\n                payload={payload}\n                data={data}\n                labelAccessor={labelAccessor}\n                selfValueAccessor={selfValueAccessor}\n                valueFormatter={valueFormatter}\n                seriesActions={seriesActions}\n                onIsolate={__globalActions ? handleIsolate : undefined}\n              />\n            ),\n          )\n        }\n      </XYChart.Tooltip>\n    </XYChart>\n  );\n};\n\n/** @internal */\nexport const FlameChart = Object.assign(FlameChartRoot, {\n  Tooltip,\n  ColorRule,\n});\n\n(FlameChart as typeof FlameChart & { displayName: string }).displayName =\n  DISPLAY_NAME_FLAME_CHART;\n"],
+  "mappings": "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",
   "names": []
 }

package/esm/charts/flame/flame-chart/components/tooltip/DefaultTooltip.js

@@ -0,0 +1,51 @@
+import { jsx } from "react/jsx-runtime";
+import { useIntl } from "react-intl";
+import { FLAME_CHART_TOOLTIP_MESSAGES } from "./messages.js";
+import { FlameTooltip } from "../../../shared/components/tooltip/FlameTooltip.js";
+import {
+  END_FIELD,
+  START_FIELD,
+  VALUE_FIELD
+} from "../../../shared/constants.js";
+import { buildFlameTooltipBaseData } from "../../../shared/utils/build-tooltip-base-data.js";
+import { formatFlameValue } from "../../../shared/utils/format-flame-value.js";
+function DefaultTooltip({
+  payload,
+  data,
+  labelAccessor,
+  selfValueAccessor,
+  valueFormatter,
+  seriesActions,
+  onIsolate
+}) {
+  const intl = useIntl();
+  const { datapoint, color, label, subheader, actions, selfValue } = buildFlameTooltipBaseData({
+    payload,
+    data,
+    labelAccessor,
+    selfValueAccessor,
+    valueFormatter,
+    seriesActions,
+    intl
+  });
+  const start = Number(datapoint?.[START_FIELD] ?? 0);
+  const end = Number(datapoint?.[END_FIELD] ?? 0);
+  const handleIsolate = onIsolate !== void 0 && datapoint !== void 0 ? () => onIsolate([start, end]) : void 0;
+  return /* @__PURE__ */ jsx(
+    FlameTooltip,
+    {
+      label,
+      subheader,
+      color,
+      valueLabel: intl.formatMessage(FLAME_CHART_TOOLTIP_MESSAGES.duration),
+      totalValue: formatFlameValue(datapoint?.[VALUE_FIELD], valueFormatter),
+      selfValue,
+      actions,
+      onIsolate: handleIsolate
+    }
+  );
+}
+export {
+  DefaultTooltip
+};
+//# sourceMappingURL=DefaultTooltip.js.map

package/esm/charts/flame/flame-chart/components/tooltip/DefaultTooltip.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../src/charts/flame/flame-chart/components/tooltip/DefaultTooltip.tsx"],
+  "sourcesContent": ["import { type ReactNode } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { FLAME_CHART_TOOLTIP_MESSAGES } from './messages.js';\nimport type { ChartDatapoint } from '../../../../core/types/chart-data.js';\nimport type { Formatter } from '../../../../core/types/formatter.js';\nimport type { SeriesActionsTemplate } from '../../../../core/types/series-actions-template.js';\nimport type { XYChartTooltipPayload } from '../../../../xy-chart/types/xy-chart.js';\nimport { FlameTooltip } from '../../../shared/components/tooltip/FlameTooltip.js';\nimport {\n  END_FIELD,\n  START_FIELD,\n  VALUE_FIELD,\n} from '../../../shared/constants.js';\nimport { buildFlameTooltipBaseData } from '../../../shared/utils/build-tooltip-base-data.js';\nimport { formatFlameValue } from '../../../shared/utils/format-flame-value.js';\n\ninterface DefaultTooltipProps<TData extends ChartDatapoint> {\n  payload: XYChartTooltipPayload;\n  data: readonly TData[];\n  labelAccessor: string;\n  selfValueAccessor?: string;\n  valueFormatter?: Formatter;\n  seriesActions?: (datapoint: TData) => SeriesActionsTemplate;\n  onIsolate?: (zoom: [number, number]) => void;\n}\n\nexport function DefaultTooltip<TData extends ChartDatapoint>({\n  payload,\n  data,\n  labelAccessor,\n  selfValueAccessor,\n  valueFormatter,\n  seriesActions,\n  onIsolate,\n}: Readonly<DefaultTooltipProps<TData>>): ReactNode {\n  const intl = useIntl();\n  const { datapoint, color, label, subheader, actions, selfValue } =\n    buildFlameTooltipBaseData({\n      payload,\n      data,\n      labelAccessor,\n      selfValueAccessor,\n      valueFormatter,\n      seriesActions,\n      intl,\n    });\n\n  const start = Number(datapoint?.[START_FIELD] ?? 0);\n  const end = Number(datapoint?.[END_FIELD] ?? 0);\n  const handleIsolate =\n    onIsolate !== undefined && datapoint !== undefined\n      ? () => onIsolate([start, end])\n      : undefined;\n\n  return (\n    <FlameTooltip\n      label={label}\n      subheader={subheader}\n      color={color}\n      valueLabel={intl.formatMessage(FLAME_CHART_TOOLTIP_MESSAGES.duration)}\n      totalValue={formatFlameValue(datapoint?.[VALUE_FIELD], valueFormatter)}\n      selfValue={selfValue}\n      actions={actions}\n      onIsolate={handleIsolate}\n    />\n  );\n}\n"],
+  "mappings": "AAwDI;AAvDJ,SAAS,eAAe;AAExB,SAAS,oCAAoC;AAK7C,SAAS,oBAAoB;AAC7B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,iCAAiC;AAC1C,SAAS,wBAAwB;AAY1B,SAAS,eAA6C;AAAA,EAC3D;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAoD;AAClD,QAAM,OAAO,QAAQ;AACrB,QAAM,EAAE,WAAW,OAAO,OAAO,WAAW,SAAS,UAAU,IAC7D,0BAA0B;AAAA,IACxB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAEH,QAAM,QAAQ,OAAO,YAAY,WAAW,KAAK,CAAC;AAClD,QAAM,MAAM,OAAO,YAAY,SAAS,KAAK,CAAC;AAC9C,QAAM,gBACJ,cAAc,UAAa,cAAc,SACrC,MAAM,UAAU,CAAC,OAAO,GAAG,CAAC,IAC5B;AAEN,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA,YAAY,KAAK,cAAc,6BAA6B,QAAQ;AAAA,MACpE,YAAY,iBAAiB,YAAY,WAAW,GAAG,cAAc;AAAA,MACrE;AAAA,MACA;AAAA,MACA,WAAW;AAAA;AAAA,EACb;AAEJ;",
+  "names": []
+}

package/esm/charts/flame/flame-chart/components/tooltip/messages.js

@@ -0,0 +1,12 @@
+import { defineMessages } from "react-intl";
+const FLAME_CHART_TOOLTIP_MESSAGES = defineMessages({
+  duration: {
+    id: "PvxiDAHj1Za2svSx",
+    defaultMessage: "Duration",
+    description: "Value column header in the flame chart tooltip, labelling the duration of each segment."
+  }
+});
+export {
+  FLAME_CHART_TOOLTIP_MESSAGES
+};
+//# sourceMappingURL=messages.js.map

package/esm/charts/flame/flame-chart/components/tooltip/messages.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../src/charts/flame/flame-chart/components/tooltip/messages.ts"],
+  "sourcesContent": ["import { defineMessages } from 'react-intl';\n\nexport const FLAME_CHART_TOOLTIP_MESSAGES = defineMessages({\n  duration: {\n    id: 'PvxiDAHj1Za2svSx',\n    defaultMessage: 'Duration',\n    description:\n      'Value column header in the flame chart tooltip, labelling the duration of each segment.',\n  },\n});\n"],
+  "mappings": "AAAA,SAAS,sBAAsB;AAExB,MAAM,+BAA+B,eAAe;AAAA,EACzD,UAAU;AAAA,IACR,IAAI;AAAA,IACJ,gBAAgB;AAAA,IAChB,aACE;AAAA,EACJ;AACF,CAAC;",
+  "names": []
+}

package/esm/charts/flame/flame-chart/utils/iterate-slots.js

@@ -1,18 +1,6 @@
-import { Children } from "react";
-import { isSlot } from "../../../../core/utils/is-slot.js";
-import { ColorRule, isValidColorRule } from "../../../core/slots/ColorRule.js";
 import { FlameChartTooltipSlot } from "../../shared/slots/Tooltip.js";
-const iterateSlots = (children) => {
-  const slots = { customTooltipTemplate: void 0, colorRules: [] };
-  Children.forEach(children, (child) => {
-    if (isSlot(child, FlameChartTooltipSlot)) {
-      slots.customTooltipTemplate = child.props.children;
-    } else if (isSlot(child, ColorRule) && isValidColorRule(child.props)) {
-      slots.colorRules.push(child);
-    }
-  });
-  return slots;
-};
+import { makeIterateSlots } from "../../shared/utils/make-iterate-slots.js";
+const iterateSlots = makeIterateSlots(FlameChartTooltipSlot);
 export {
   iterateSlots
 };

package/esm/charts/flame/flame-chart/utils/iterate-slots.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/flame/flame-chart/utils/iterate-slots.ts"],
-  "sourcesContent": ["import { Children, type ReactNode } from 'react';\n\nimport { isSlot } from '../../../../core/utils/is-slot.js';\nimport { ColorRule, isValidColorRule } from '../../../core/slots/ColorRule.js';\nimport type { ChartDatapoint } from '../../../core/types/chart-data.js';\nimport { FlameChartTooltipSlot } from '../../shared/slots/Tooltip.js';\nimport type {\n  CustomTooltipTemplate,\n  Slots,\n} from '../../shared/types/flame-internal.js';\n\nexport const iterateSlots = <TData extends ChartDatapoint = ChartDatapoint>(\n  children: ReactNode,\n): Slots<TData> => {\n  const slots: Slots<TData> = { customTooltipTemplate: undefined, colorRules: [] };\n\n  Children.forEach(children, (child) => {\n    if (isSlot(child, FlameChartTooltipSlot)) {\n      slots.customTooltipTemplate = child.props\n        .children as CustomTooltipTemplate<TData>;\n    } else if (isSlot(child, ColorRule) && isValidColorRule(child.props)) {\n      slots.colorRules.push(child);\n    }\n  });\n\n  return slots;\n};\n"],
-  "mappings": "AAAA,SAAS,gBAAgC;AAEzC,SAAS,cAAc;AACvB,SAAS,WAAW,wBAAwB;AAE5C,SAAS,6BAA6B;AAM/B,MAAM,eAAe,CAC1B,aACiB;AACjB,QAAM,QAAsB,EAAE,uBAAuB,QAAW,YAAY,CAAC,EAAE;AAE/E,WAAS,QAAQ,UAAU,CAAC,UAAU;AACpC,QAAI,OAAO,OAAO,qBAAqB,GAAG;AACxC,YAAM,wBAAwB,MAAM,MACjC;AAAA,IACL,WAAW,OAAO,OAAO,SAAS,KAAK,iBAAiB,MAAM,KAAK,GAAG;AACpE,YAAM,WAAW,KAAK,KAAK;AAAA,IAC7B;AAAA,EACF,CAAC;AAED,SAAO;AACT;",
+  "sourcesContent": ["import { FlameChartTooltipSlot } from '../../shared/slots/Tooltip.js';\nimport { makeIterateSlots } from '../../shared/utils/make-iterate-slots.js';\n\nexport const iterateSlots = makeIterateSlots(FlameChartTooltipSlot);\n"],
+  "mappings": "AAAA,SAAS,6BAA6B;AACtC,SAAS,wBAAwB;AAE1B,MAAM,eAAe,iBAAiB,qBAAqB;",
   "names": []
 }