@dynatrace/strato-components 3.12.2 → 3.13.0

package/esm/charts/core/components/overlay-tooltip/components/header/Header.css

@@ -1,10 +1,11 @@
-._1ldhlar2-3-12-2 {
+._1ldhlar1-3-13-0 {
+  box-sizing: border-box;
   padding: var(--dt-spacings-size-4, 4px) var(--dt-spacings-size-6, 6px);
-  width: var(--_1ldhlar1-3-12-2, calc(100% - 8px));
+  width: 100%;
   height: 100%;
   display: inline-block;
 }
-._1ldhlar3-3-12-2 {
+._1ldhlar2-3-13-0 {
   font-family: var(--dt-typography-text-small-emphasized-family, DynatraceFlow,Roboto,Helvetica,sans-serif);
   font-size: var(--dt-typography-text-small-emphasized-size, 12px);
   line-height: var(--dt-typography-text-small-emphasized-line-height, 1.333333333);
@@ -13,15 +14,22 @@
   margin: 0;
   padding: 0;
 }
-._1ldhlar4-3-12-2 {
+._1ldhlar3-3-13-0 {
   display: -webkit-box;
   -webkit-box-orient: vertical;
-  -webkit-line-clamp: var(--_1ldhlar0-3-12-2);
+  -webkit-line-clamp: var(--_1ldhlar0-3-13-0);
+  word-break: break-word;
+  white-space: pre-line;
+}
+._1ldhlar4-3-13-0 {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: var(--_1ldhlar0-3-13-0);
   overflow: hidden;
   text-overflow: ellipsis;
   word-break: break-word;
 }
-._1ldhlar5-3-12-2 {
+._1ldhlar5-3-13-0 {
   font-family: var(--dt-typography-text-small-default-family, DynatraceFlow,Roboto,Helvetica,sans-serif);
   font-size: var(--dt-typography-text-small-default-size, 12px);
   line-height: var(--dt-typography-text-small-default-line-height, 1.333333333);

package/esm/charts/core/components/overlay-tooltip/components/header/Header.js

@@ -6,7 +6,7 @@ import {
   headerSubText,
   headerText,
   headerTextMultiLine,
-  headerWidthVar,
+  headerTextMultiLineContained,
   maxLinesVar
 } from "./Header.sty.js";
 import { getShowRangeDuration } from "./utils/get-show-range-duration.js";
@@ -18,10 +18,9 @@ import {
   DEFAULT_HEADER_LINES,
   DEFAULT_TRUNCATION_MODE,
   MAX_HEADER_LINES,
-  TOOLTIP_WRAPPER_PADDING
+  TOOLTIP_CONTENT_PADDING
 } from "../../constants.js";
 import { useExternalConfig } from "../../contexts/ExternalConfigContext.js";
-import { useTooltipDimensions } from "../../contexts/TooltipDimensionsContext.js";
 import { useDefaultConfig } from "../../hooks/useDefaultConfig.js";
 import { useDefaultLabels } from "../../hooks/useDefaultLabels.js";
 import { divider, TOOLTIP_MAX_WIDTH } from "../../tooltip.sty.js";
@@ -44,7 +43,6 @@ const Header = (props) => {
   const defaultConfig = useDefaultConfig();
   const defaultStrategy = defaultConfig?.headerFormatStrategy ?? defaultLabelFormatterStrategy;
   const { displayHeaderDivider, truncationMode = DEFAULT_TRUNCATION_MODE } = useExternalConfig();
-  const containerWidth = useTooltipDimensions()?.width || TOOLTIP_MAX_WIDTH;
   const showedLines = Math.min(
     maxLines ?? DEFAULT_HEADER_LINES,
     MAX_HEADER_LINES
@@ -58,7 +56,7 @@ const Header = (props) => {
   const computedShowDuration2 = showRangeDuration2 ?? false;
   const formatStrategy = defaultStrategy ?? getNonGeometryHeader(header1);
   const header2FormatStrategy = getNonGeometryHeader(header2);
-  const availableWidth = containerWidth - TOOLTIP_WRAPPER_PADDING * 2;
+  const availableWidth = TOOLTIP_MAX_WIDTH - TOOLTIP_CONTENT_PADDING * 2;
   if (isHeaderEmpty(header1, header2, subheader)) {
     return null;
   }
@@ -73,7 +71,6 @@ const Header = (props) => {
   };
   const {
     content: headerContent,
-    totalTextWidth,
     shownText,
     isTruncated,
     durationContent,
@@ -87,7 +84,6 @@ const Header = (props) => {
   });
   const {
     content: header2Content,
-    totalTextWidth: header2TotalTextWidth,
     shownText: shownHeader2Text,
     isTruncated: isHeader2Truncated,
     durationContent: duration2Content,
@@ -106,12 +102,20 @@ const Header = (props) => {
     availableWidth,
     truncationMode
   });
-  const headerClassName = !isSingleLine && isTruncationEnd ? clsx(headerText, headerTextMultiLine) : headerText;
-  const shouldConstrainWidth = totalTextWidth > availableWidth || header2TotalTextWidth > availableWidth;
-  const headerContainerStyle = shouldConstrainWidth ? assignInlineVars({ [headerWidthVar]: `${availableWidth}px` }) : {};
+  const isJsTruncated = shownText !== headerContent || shownHeader2Text !== header2Content;
+  const getMultiLineModifierClass = () => {
+    if (isTruncationEnd) {
+      return headerTextMultiLine;
+    }
+    if (isJsTruncated) {
+      return headerTextMultiLineContained;
+    }
+    return void 0;
+  };
+  const headerClassName = !isSingleLine ? clsx(headerText, getMultiLineModifierClass()) : headerText;
   const isHeader2Unique = header2Content + duration2Suffix !== headerContent + durationSuffix;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs("div", { className: headerContainer, style: headerContainerStyle, children: [
+    /* @__PURE__ */ jsxs("div", { className: headerContainer, children: [
       /* @__PURE__ */ jsx(Tooltip, { text: headerContent, disabled: !isTruncated, children: /* @__PURE__ */ jsxs(
         "p",
         {

package/esm/charts/core/components/overlay-tooltip/components/header/Header.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../src/charts/core/components/overlay-tooltip/components/header/Header.tsx"],
-  "sourcesContent": ["import { assignInlineVars } from '@vanilla-extract/dynamic';\nimport clsx from 'clsx';\n\nimport {\n  headerContainer,\n  headerSubText,\n  headerText,\n  headerTextMultiLine,\n  headerWidthVar,\n  maxLinesVar,\n} from './Header.sty.js';\nimport { HeaderProps, HeaderValueFormatter } from './types/header.js';\nimport { getShowRangeDuration } from './utils/get-show-range-duration.js';\nimport { isHeaderEmpty } from './utils/type-guards.js';\nimport { defaultLabelFormatterStrategy } from './utils/value-formatters.js';\nimport { Divider } from '../../../../../../layouts/divider/Divider.js';\nimport { Tooltip } from '../../../../../../overlays/tooltip/Tooltip.js';\nimport {\n  DEFAULT_HEADER_LINES,\n  DEFAULT_TRUNCATION_MODE,\n  MAX_HEADER_LINES,\n  TOOLTIP_WRAPPER_PADDING,\n} from '../../constants.js';\nimport { useExternalConfig } from '../../contexts/ExternalConfigContext.js';\nimport { useTooltipDimensions } from '../../contexts/TooltipDimensionsContext.js';\nimport { useDefaultConfig } from '../../hooks/useDefaultConfig.js';\nimport { useDefaultLabels } from '../../hooks/useDefaultLabels.js';\nimport { divider, TOOLTIP_MAX_WIDTH } from '../../tooltip.sty.js';\nimport { computeHeaderDisplay } from './utils/compute-header-display.js';\nimport { computeSubheaderDisplay } from './utils/compute-subheader-display.js';\nimport { getNonGeometryHeader } from './utils/get-non-geometry-header.js';\n\n/** @public */\nexport const Header = (props: HeaderProps) => {\n  const {\n    header1,\n    header2,\n    subheader,\n    label,\n    label2,\n    maxLines,\n    duration1,\n    duration2,\n    showRangeDuration2,\n  } = props;\n  const labelFor = useDefaultLabels();\n  const defaultConfig = useDefaultConfig();\n  const defaultStrategy = (defaultConfig?.headerFormatStrategy ??\n    defaultLabelFormatterStrategy) as HeaderValueFormatter;\n  const { displayHeaderDivider, truncationMode = DEFAULT_TRUNCATION_MODE } =\n    useExternalConfig();\n  const containerWidth = useTooltipDimensions()?.width || TOOLTIP_MAX_WIDTH;\n  const showedLines = Math.min(\n    maxLines ?? DEFAULT_HEADER_LINES,\n    MAX_HEADER_LINES,\n  );\n  const isSingleLine = showedLines === 1;\n  const isTruncationEnd = truncationMode === 'end';\n\n  const showRangeDuration1 = getShowRangeDuration(\n    defaultConfig,\n    props.showRangeDuration1,\n  );\n  const computedShowDuration2 = showRangeDuration2 ?? false;\n  const formatStrategy = defaultStrategy ?? getNonGeometryHeader(header1);\n  const header2FormatStrategy = getNonGeometryHeader(header2);\n  const availableWidth = containerWidth - TOOLTIP_WRAPPER_PADDING * 2;\n\n  if (isHeaderEmpty(header1, header2, subheader)) {\n    return null;\n  }\n\n  const sharedDisplayParams = {\n    labelFor,\n    isSingleLine,\n    isTruncationEnd,\n    availableWidth,\n    showedLines,\n    truncationMode,\n    showRangeDuration: showRangeDuration1,\n  };\n\n  const {\n    content: headerContent,\n    totalTextWidth,\n    shownText,\n    isTruncated,\n    durationContent,\n    durationSuffix,\n  } = computeHeaderDisplay({\n    header: header1,\n    label,\n    duration: duration1,\n    formatStrategy,\n    ...sharedDisplayParams,\n  });\n\n  const {\n    content: header2Content,\n    totalTextWidth: header2TotalTextWidth,\n    shownText: shownHeader2Text,\n    isTruncated: isHeader2Truncated,\n    durationContent: duration2Content,\n    durationSuffix: duration2Suffix,\n  } = computeHeaderDisplay({\n    header: header2,\n    label: label2,\n    duration: duration2,\n    formatStrategy: header2FormatStrategy,\n    ...sharedDisplayParams,\n    showRangeDuration: computedShowDuration2,\n  });\n\n  const { subheaderContent, shownSubheaderText, isSubheaderTruncated } =\n    computeSubheaderDisplay({\n      subheader,\n      formatStrategy,\n      availableWidth,\n      truncationMode,\n    });\n\n  const headerClassName =\n    !isSingleLine && isTruncationEnd\n      ? clsx(headerText, headerTextMultiLine)\n      : headerText;\n\n  const shouldConstrainWidth =\n    totalTextWidth > availableWidth || header2TotalTextWidth > availableWidth;\n  const headerContainerStyle = shouldConstrainWidth\n    ? assignInlineVars({ [headerWidthVar]: `${availableWidth}px` })\n    : {};\n  const isHeader2Unique =\n    header2Content + duration2Suffix !== headerContent + durationSuffix;\n\n  return (\n    <>\n      <div className={headerContainer} style={headerContainerStyle}>\n        <Tooltip text={headerContent} disabled={!isTruncated}>\n          <p\n            className={headerClassName}\n            style={assignInlineVars({ [maxLinesVar]: String(showedLines) })}\n          >\n            {shownText}\n            {durationContent && durationContent !== '0' && (\n              <span className={headerSubText}>{durationSuffix}</span>\n            )}\n          </p>\n        </Tooltip>\n        {shownHeader2Text && isHeader2Unique && (\n          <div>\n            <Tooltip text={header2Content} disabled={!isHeader2Truncated}>\n              <p\n                className={headerClassName}\n                style={assignInlineVars({\n                  [maxLinesVar]: String(showedLines),\n                })}\n              >\n                {shownHeader2Text}\n                {duration2Content && duration2Content !== '0' && (\n                  <span className={headerSubText}>{duration2Suffix}</span>\n                )}\n              </p>\n            </Tooltip>\n          </div>\n        )}\n        {shownSubheaderText && (\n          <div>\n            <Tooltip text={subheaderContent} disabled={!isSubheaderTruncated}>\n              <p className={headerSubText}>{shownSubheaderText}</p>\n            </Tooltip>\n          </div>\n        )}\n      </div>\n      {displayHeaderDivider && (\n        <Divider orientation=\"horizontal\" key=\"divider\" className={divider} />\n      )}\n    </>\n  );\n};\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { assignInlineVars } from '@vanilla-extract/dynamic';\nimport clsx from 'clsx';\n\nimport {\n  headerContainer,\n  headerSubText,\n  headerText,\n  headerTextMultiLine,\n  headerTextMultiLineContained,\n  maxLinesVar,\n} from './Header.sty.js';\nimport { HeaderProps, HeaderValueFormatter } from './types/header.js';\nimport { getShowRangeDuration } from './utils/get-show-range-duration.js';\nimport { isHeaderEmpty } from './utils/type-guards.js';\nimport { defaultLabelFormatterStrategy } from './utils/value-formatters.js';\nimport { Divider } from '../../../../../../layouts/divider/Divider.js';\nimport { Tooltip } from '../../../../../../overlays/tooltip/Tooltip.js';\nimport {\n  DEFAULT_HEADER_LINES,\n  DEFAULT_TRUNCATION_MODE,\n  MAX_HEADER_LINES,\n  TOOLTIP_CONTENT_PADDING,\n} from '../../constants.js';\nimport { useExternalConfig } from '../../contexts/ExternalConfigContext.js';\nimport { useDefaultConfig } from '../../hooks/useDefaultConfig.js';\nimport { useDefaultLabels } from '../../hooks/useDefaultLabels.js';\nimport { divider, TOOLTIP_MAX_WIDTH } from '../../tooltip.sty.js';\nimport { computeHeaderDisplay } from './utils/compute-header-display.js';\nimport { computeSubheaderDisplay } from './utils/compute-subheader-display.js';\nimport { getNonGeometryHeader } from './utils/get-non-geometry-header.js';\n\n/** @public */\nexport const Header = (props: HeaderProps) => {\n  const {\n    header1,\n    header2,\n    subheader,\n    label,\n    label2,\n    maxLines,\n    duration1,\n    duration2,\n    showRangeDuration2,\n  } = props;\n  const labelFor = useDefaultLabels();\n  const defaultConfig = useDefaultConfig();\n  const defaultStrategy = (defaultConfig?.headerFormatStrategy ??\n    defaultLabelFormatterStrategy) as HeaderValueFormatter;\n  const { displayHeaderDivider, truncationMode = DEFAULT_TRUNCATION_MODE } =\n    useExternalConfig();\n  const showedLines = Math.min(\n    maxLines ?? DEFAULT_HEADER_LINES,\n    MAX_HEADER_LINES,\n  );\n  const isSingleLine = showedLines === 1;\n  const isTruncationEnd = truncationMode === 'end';\n\n  const showRangeDuration1 = getShowRangeDuration(\n    defaultConfig,\n    props.showRangeDuration1,\n  );\n  const computedShowDuration2 = showRangeDuration2 ?? false;\n  const formatStrategy = defaultStrategy ?? getNonGeometryHeader(header1);\n  const header2FormatStrategy = getNonGeometryHeader(header2);\n  const availableWidth = TOOLTIP_MAX_WIDTH - TOOLTIP_CONTENT_PADDING * 2;\n\n  if (isHeaderEmpty(header1, header2, subheader)) {\n    return null;\n  }\n\n  const sharedDisplayParams = {\n    labelFor,\n    isSingleLine,\n    isTruncationEnd,\n    availableWidth,\n    showedLines,\n    truncationMode,\n    showRangeDuration: showRangeDuration1,\n  };\n\n  const {\n    content: headerContent,\n    shownText,\n    isTruncated,\n    durationContent,\n    durationSuffix,\n  } = computeHeaderDisplay({\n    header: header1,\n    label,\n    duration: duration1,\n    formatStrategy,\n    ...sharedDisplayParams,\n  });\n\n  const {\n    content: header2Content,\n    shownText: shownHeader2Text,\n    isTruncated: isHeader2Truncated,\n    durationContent: duration2Content,\n    durationSuffix: duration2Suffix,\n  } = computeHeaderDisplay({\n    header: header2,\n    label: label2,\n    duration: duration2,\n    formatStrategy: header2FormatStrategy,\n    ...sharedDisplayParams,\n    showRangeDuration: computedShowDuration2,\n  });\n\n  const { subheaderContent, shownSubheaderText, isSubheaderTruncated } =\n    computeSubheaderDisplay({\n      subheader,\n      formatStrategy,\n      availableWidth,\n      truncationMode,\n    });\n\n  const isJsTruncated =\n    shownText !== headerContent || shownHeader2Text !== header2Content;\n\n  const getMultiLineModifierClass = () => {\n    if (isTruncationEnd) {\n      return headerTextMultiLine;\n    }\n    if (isJsTruncated) {\n      return headerTextMultiLineContained;\n    }\n    return undefined;\n  };\n\n  const headerClassName = !isSingleLine\n    ? clsx(headerText, getMultiLineModifierClass())\n    : headerText;\n\n  const isHeader2Unique =\n    header2Content + duration2Suffix !== headerContent + durationSuffix;\n\n  return (\n    <>\n      <div className={headerContainer}>\n        <Tooltip text={headerContent} disabled={!isTruncated}>\n          <p\n            className={headerClassName}\n            style={assignInlineVars({ [maxLinesVar]: String(showedLines) })}\n          >\n            {shownText}\n            {durationContent && durationContent !== '0' && (\n              <span className={headerSubText}>{durationSuffix}</span>\n            )}\n          </p>\n        </Tooltip>\n        {shownHeader2Text && isHeader2Unique && (\n          <div>\n            <Tooltip text={header2Content} disabled={!isHeader2Truncated}>\n              <p\n                className={headerClassName}\n                style={assignInlineVars({\n                  [maxLinesVar]: String(showedLines),\n                })}\n              >\n                {shownHeader2Text}\n                {duration2Content && duration2Content !== '0' && (\n                  <span className={headerSubText}>{duration2Suffix}</span>\n                )}\n              </p>\n            </Tooltip>\n          </div>\n        )}\n        {shownSubheaderText && (\n          <div>\n            <Tooltip text={subheaderContent} disabled={!isSubheaderTruncated}>\n              <p className={headerSubText}>{shownSubheaderText}</p>\n            </Tooltip>\n          </div>\n        )}\n      </div>\n      {displayHeaderDivider && (\n        <Divider orientation=\"horizontal\" key=\"divider\" className={divider} />\n      )}\n    </>\n  );\n};\n"],
+  "mappings": "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",
   "names": []
 }

package/esm/charts/core/components/overlay-tooltip/components/header/Header.sty.js

@@ -1,16 +1,16 @@
 import "./Header.css";
-var headerContainer = "_1ldhlar2-3-12-2";
-var headerSubText = "_1ldhlar5-3-12-2";
-var headerText = "_1ldhlar3-3-12-2";
-var headerTextMultiLine = "_1ldhlar4-3-12-2";
-var headerWidthVar = "var(--_1ldhlar1-3-12-2)";
-var maxLinesVar = "var(--_1ldhlar0-3-12-2)";
+var headerContainer = "_1ldhlar1-3-13-0";
+var headerSubText = "_1ldhlar5-3-13-0";
+var headerText = "_1ldhlar2-3-13-0";
+var headerTextMultiLine = "_1ldhlar4-3-13-0";
+var headerTextMultiLineContained = "_1ldhlar3-3-13-0";
+var maxLinesVar = "var(--_1ldhlar0-3-13-0)";
 export {
   headerContainer,
   headerSubText,
   headerText,
   headerTextMultiLine,
-  headerWidthVar,
+  headerTextMultiLineContained,
   maxLinesVar
 };
 //# sourceMappingURL=Header.sty.js.map

package/esm/charts/core/components/overlay-tooltip/components/header/Header.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../src/charts/core/components/overlay-tooltip/components/header/Header.css.ts"],
-  "sourcesContent": ["import './Header.css';\nexport var headerContainer = '_1ldhlar2-3-12-2';\nexport var headerSubText = '_1ldhlar5-3-12-2';\nexport var headerText = '_1ldhlar3-3-12-2';\nexport var headerTextMultiLine = '_1ldhlar4-3-12-2';\nexport var headerWidthVar = 'var(--_1ldhlar1-3-12-2)';\nexport var maxLinesVar = 'var(--_1ldhlar0-3-12-2)';"],
-  "mappings": "AAAA,OAAO;AACA,IAAI,kBAAkB;AACtB,IAAI,gBAAgB;AACpB,IAAI,aAAa;AACjB,IAAI,sBAAsB;AAC1B,IAAI,iBAAiB;AACrB,IAAI,cAAc;",
+  "sourcesContent": ["import './Header.css';\nexport var headerContainer = '_1ldhlar1-3-13-0';\nexport var headerSubText = '_1ldhlar5-3-13-0';\nexport var headerText = '_1ldhlar2-3-13-0';\nexport var headerTextMultiLine = '_1ldhlar4-3-13-0';\nexport var headerTextMultiLineContained = '_1ldhlar3-3-13-0';\nexport var maxLinesVar = 'var(--_1ldhlar0-3-13-0)';"],
+  "mappings": "AAAA,OAAO;AACA,IAAI,kBAAkB;AACtB,IAAI,gBAAgB;AACpB,IAAI,aAAa;AACjB,IAAI,sBAAsB;AAC1B,IAAI,+BAA+B;AACnC,IAAI,cAAc;",
   "names": []
 }

package/esm/charts/core/components/overlay-tooltip/components/header/utils/get-shown-header-text.js

@@ -1,13 +1,20 @@
-import { getHeaderTruncatedText } from "../../../utils/text-truncation-header.js";
+import {
+  getHeaderTruncatedText,
+  getHeaderTruncatedTextMultiLine
+} from "../../../utils/text-truncation-header.js";
 const getShownHeaderText = (headerContent, isSingleLine, isTruncationEnd, availableWidth, showedLines, truncationMode) => {
   if (!isSingleLine && isTruncationEnd) {
     return headerContent;
   }
-  return getHeaderTruncatedText(
-    headerContent,
-    isSingleLine ? availableWidth : availableWidth * showedLines,
-    truncationMode
-  );
+  if (!isSingleLine) {
+    return getHeaderTruncatedTextMultiLine(
+      headerContent,
+      availableWidth,
+      showedLines,
+      truncationMode
+    );
+  }
+  return getHeaderTruncatedText(headerContent, availableWidth, truncationMode);
 };
 export {
   getShownHeaderText

package/esm/charts/core/components/overlay-tooltip/components/header/utils/get-shown-header-text.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../../src/charts/core/components/overlay-tooltip/components/header/utils/get-shown-header-text.ts"],
-  "sourcesContent": ["import type { TruncationMode } from '../../../../../../../typography/text-ellipsis/TextEllipsis.js';\nimport { getHeaderTruncatedText } from '../../../utils/text-truncation-header.js';\n\nexport const getShownHeaderText = (\n  headerContent: string,\n  isSingleLine: boolean,\n  isTruncationEnd: boolean,\n  availableWidth: number,\n  showedLines: number,\n  truncationMode: TruncationMode,\n): string => {\n  if (!isSingleLine && isTruncationEnd) {\n    return headerContent;\n  }\n\n  return getHeaderTruncatedText(\n    headerContent,\n    isSingleLine ? availableWidth : availableWidth * showedLines,\n    truncationMode,\n  );\n};\n"],
-  "mappings": "AACA,SAAS,8BAA8B;AAEhC,MAAM,qBAAqB,CAChC,eACA,cACA,iBACA,gBACA,aACA,mBACW;AACX,MAAI,CAAC,gBAAgB,iBAAiB;AACpC,WAAO;AAAA,EACT;AAEA,SAAO;AAAA,IACL;AAAA,IACA,eAAe,iBAAiB,iBAAiB;AAAA,IACjD;AAAA,EACF;AACF;",
+  "sourcesContent": ["import type { TruncationMode } from '../../../../../../../typography/text-ellipsis/TextEllipsis.js';\nimport {\n  getHeaderTruncatedText,\n  getHeaderTruncatedTextMultiLine,\n} from '../../../utils/text-truncation-header.js';\n\nexport const getShownHeaderText = (\n  headerContent: string,\n  isSingleLine: boolean,\n  isTruncationEnd: boolean,\n  availableWidth: number,\n  showedLines: number,\n  truncationMode: TruncationMode,\n): string => {\n  if (!isSingleLine && isTruncationEnd) {\n    return headerContent;\n  }\n\n  if (!isSingleLine) {\n    return getHeaderTruncatedTextMultiLine(\n      headerContent,\n      availableWidth,\n      showedLines,\n      truncationMode,\n    );\n  }\n\n  return getHeaderTruncatedText(headerContent, availableWidth, truncationMode);\n};\n"],
+  "mappings": "AACA;AAAA,EACE;AAAA,EACA;AAAA,OACK;AAEA,MAAM,qBAAqB,CAChC,eACA,cACA,iBACA,gBACA,aACA,mBACW;AACX,MAAI,CAAC,gBAAgB,iBAAiB;AACpC,WAAO;AAAA,EACT;AAEA,MAAI,CAAC,cAAc;AACjB,WAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,SAAO,uBAAuB,eAAe,gBAAgB,cAAc;AAC7E;",
   "names": []
 }

package/esm/charts/core/components/overlay-tooltip/components/series/SeriesItem.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import clsx from "clsx";
 import { noop } from "lodash-es";
-import { forwardRef, useRef } from "react";
+import { forwardRef, useEffect, useRef } from "react";
 import { useIntl } from "react-intl";
 import { ChevronRightSmallIcon } from "@dynatrace/strato-icons";
 import { useSeriesItemDisplayState } from "./hooks/use-series-item-display-state.js";
@@ -9,8 +9,8 @@ import { SeriesActionsHeader } from "./SeriesActionsHeader.js";
 import { SeriesItemContent } from "./SeriesItemContent.js";
 import { useId } from "../../../../../../core/hooks/useId.js";
 import { COPY_TO_CLIPBOARD_MESSAGES } from "../../../copy-to-clipboard/copy-to-clipboard-messages.js";
-import { ChartActionsMenuAsync } from "../../../series-action/ChartActionsMenuAsync.js";
 import { TOOLTIP_CONTENT_PADDING } from "../../constants.js";
+import { useActiveSeriesMenu } from "../../contexts/ActiveSeriesMenuContext.js";
 import { useExternalConfig } from "../../contexts/ExternalConfigContext.js";
 import { useDefaultLabels } from "../../hooks/useDefaultLabels.js";
 import { useSelector, useTooltipSnapshot } from "../../selectors.js";
@@ -35,14 +35,14 @@ const SeriesItem = (props) => {
   const hasActions = actions !== void 0 || defaultActionsConfig.size > 0;
   const dispatch = useTooltipReducer();
   const rowId = useId();
-  const isOpen = useSelector(({ activeSeries: activeSeries2 }) => activeSeries2 === rowId);
+  const isOpen = useSelector(({ activeSeries: activeSeries2 }) => {
+    return activeSeries2 === rowId;
+  });
   const { activeSeries } = useTooltipSnapshot();
   const menuDelayRef = useRef(0);
+  const buttonRef = useRef(null);
   const asyncActions = actions ? async () => actions() : void 0;
-  const triggerLeftTooltip = (event) => {
-    event.stopPropagation();
-    dispatch({ type: "TOOLTIP_MOUSE_LEAVE" })();
-  };
+  const { setMenuProps } = useActiveSeriesMenu();
   const handleClick = (event) => {
     event.stopPropagation();
     menuDelayRef.current = 0;
@@ -70,9 +70,26 @@ const SeriesItem = (props) => {
     );
     return getDefaultAction(props, accessor, message);
   });
+  useEffect(() => {
+    if (!isOpen || !hasActions) {
+      return;
+    }
+    const button = buttonRef.current;
+    const tooltipEl = button?.closest('[aria-label="OverlayTooltip"]');
+    const alignOffset = button && tooltipEl ? button.getBoundingClientRect().top - tooltipEl.getBoundingClientRect().top : 0;
+    setMenuProps({
+      actions: asyncActions,
+      defaultActions,
+      header: /* @__PURE__ */ jsx(SeriesActionsHeader, { text: props.name }),
+      delay: menuDelayRef.current,
+      alignOffset
+    });
+    return () => isOpen && setMenuProps(null);
+  }, [isOpen, hasActions, setMenuProps]);
   return /* @__PURE__ */ jsx(
     "button",
     {
+      ref: buttonRef,
       className: clsx(
         activeSeries === rowId && seriesItemActive,
         seriesItemWrapper
@@ -80,25 +97,13 @@ const SeriesItem = (props) => {
       onClick: handleClick,
       onPointerMove: handlePointerMove,
       onKeyDown: noop,
-      "data-testid": "menu-trigger",
+      "data-testid": "series-item",
       children: /* @__PURE__ */ jsx(
-        ChartActionsMenuAsync,
+        WithSymbol,
         {
+          symbolPosition,
           hasActions,
-          defaultActions,
-          actions: asyncActions,
-          isOpen,
-          header: /* @__PURE__ */ jsx(SeriesActionsHeader, { text: props.name }),
-          onActionSelected: triggerLeftTooltip,
-          delay: menuDelayRef.current,
-          children: /* @__PURE__ */ jsx(
-            WithSymbol,
-            {
-              symbolPosition,
-              hasActions,
-              ...restProps
-            }
-          )
+          ...restProps
         }
       )
     }

package/esm/charts/core/components/overlay-tooltip/components/series/SeriesItem.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../src/charts/core/components/overlay-tooltip/components/series/SeriesItem.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport { noop } from 'lodash-es';\nimport { forwardRef, useRef, type MouseEventHandler } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { ChevronRightSmallIcon } from '@dynatrace/strato-icons';\n\nimport { useSeriesItemDisplayState } from './hooks/use-series-item-display-state.js';\nimport { SeriesActionsHeader } from './SeriesActionsHeader.js';\nimport { SeriesItemContent } from './SeriesItemContent.js';\nimport { useId } from '../../../../../../core/hooks/useId.js';\nimport { COPY_TO_CLIPBOARD_MESSAGES } from '../../../copy-to-clipboard/copy-to-clipboard-messages.js';\nimport { ChartActionsMenuAsync } from '../../../series-action/ChartActionsMenuAsync.js';\nimport { TOOLTIP_CONTENT_PADDING } from '../../constants.js';\nimport { useExternalConfig } from '../../contexts/ExternalConfigContext.js';\nimport { useDefaultLabels } from '../../hooks/useDefaultLabels.js';\nimport { useSelector, useTooltipSnapshot } from '../../selectors.js';\nimport {\n  chevron,\n  chevronRightAligned,\n  seriesItemActive,\n  seriesItemWithChevron,\n  seriesItemWrapper,\n  TOOLTIP_MAX_WIDTH,\n} from '../../tooltip.sty.js';\nimport type { SeriesItemProps } from '../../types/series.js';\nimport { InternalSeriesItemProps } from '../../types/series.js';\nimport { useTooltipReducer } from '../../useTooltipReducer.js';\nimport { getDefaultAction } from '../../utils/get-copy-action.js';\n\nconst ACTIVE_SERIES_HOVER_DELAY = 150;\nconst CHEVRON_SLOT_WIDTH = 20;\n\nexport const SeriesItem = (props: SeriesItemProps) => {\n  const intl = useIntl();\n  const { pinned } = useTooltipSnapshot();\n  const labelFor = useDefaultLabels();\n  const { actions, ...restProps } = props as InternalSeriesItemProps;\n  const { symbolPosition = 'left', defaultActionsConfig } = useExternalConfig();\n  const hasActions = actions !== undefined || defaultActionsConfig.size > 0;\n  const dispatch = useTooltipReducer();\n  const rowId = useId();\n  const isOpen = useSelector(({ activeSeries }) => activeSeries === rowId);\n  const { activeSeries } = useTooltipSnapshot();\n  const menuDelayRef = useRef(0);\n  const asyncActions = actions ? async () => actions() : undefined;\n\n  const triggerLeftTooltip: MouseEventHandler<HTMLDivElement> = (event) => {\n    event.stopPropagation();\n    dispatch({ type: 'TOOLTIP_MOUSE_LEAVE' })();\n  };\n  const handleClick: MouseEventHandler<HTMLButtonElement> = (event) => {\n    event.stopPropagation();\n    menuDelayRef.current = 0;\n    dispatch({\n      type: 'SET_ACTIVE_SERIES',\n      payload: { activeSeries: rowId },\n    })();\n  };\n  const handlePointerMove = () => {\n    menuDelayRef.current = ACTIVE_SERIES_HOVER_DELAY;\n    dispatch({\n      type: 'SET_ACTIVE_SERIES',\n      payload: { activeSeries: rowId },\n    })();\n  };\n  const defaultActions = !pinned\n    ? null\n    : [...defaultActionsConfig.entries()].map(([accessor, config]) => {\n        const message = intl.formatMessage(\n          config.messageLabel ?? COPY_TO_CLIPBOARD_MESSAGES.copyField,\n          {\n            field: labelFor?.(\n              config.field,\n              config.customLabel,\n            )?.toLocaleLowerCase(),\n          },\n        );\n        return getDefaultAction(props, accessor, message);\n      });\n\n  return (\n    <button\n      className={clsx(\n        activeSeries === rowId && seriesItemActive,\n        seriesItemWrapper,\n      )}\n      onClick={handleClick}\n      onPointerMove={handlePointerMove}\n      onKeyDown={noop}\n      data-testid=\"menu-trigger\"\n    >\n      <ChartActionsMenuAsync\n        hasActions={hasActions}\n        defaultActions={defaultActions}\n        actions={asyncActions}\n        isOpen={isOpen}\n        header={<SeriesActionsHeader text={props.name} />}\n        onActionSelected={triggerLeftTooltip}\n        delay={menuDelayRef.current}\n      >\n        <WithSymbol\n          symbolPosition={symbolPosition}\n          hasActions={hasActions}\n          {...restProps}\n        />\n      </ChartActionsMenuAsync>\n    </button>\n  );\n};\n\ntype SeriesWithSymbolProps = Omit<InternalSeriesItemProps, 'actions'> & {\n  symbolPosition: 'left' | 'right';\n  hasActions: boolean;\n};\n\nconst WithSymbol = forwardRef<HTMLDivElement, SeriesWithSymbolProps>(\n  (props, ref) => {\n    const containerWidth = TOOLTIP_MAX_WIDTH - TOOLTIP_CONTENT_PADDING;\n    const {\n      color,\n      multiLine = false,\n      name,\n      description,\n      shape,\n      iconStyle,\n      icon,\n      symbol,\n    } = props;\n    const { symbolPosition, hasActions } = props;\n    const seriesContentMaxWidth = hasActions\n      ? containerWidth - CHEVRON_SLOT_WIDTH\n      : containerWidth;\n    const {\n      nameText,\n      descriptionText,\n      fullDescriptionText,\n      isDescriptionTruncated,\n      descriptionShouldUseMultiLineCss,\n      descriptionMultiLineMode,\n      displayValueText,\n      displayRelativeValueText,\n      fullValueText,\n      fullRelativeValueText,\n      nameTextStyle,\n      nameStyle,\n    } = useSeriesItemDisplayState({\n      ...props,\n      maxWidth: seriesContentMaxWidth,\n    });\n    return (\n      <div ref={ref} className={seriesItemWithChevron}>\n        <SeriesItemContent\n          color={color}\n          name={name}\n          description={description}\n          nameText={nameText}\n          descriptionText={descriptionText}\n          fullDescriptionText={fullDescriptionText}\n          isDescriptionTruncated={isDescriptionTruncated}\n          descriptionShouldUseMultiLineCss={descriptionShouldUseMultiLineCss}\n          descriptionMultiLineMode={descriptionMultiLineMode}\n          displayValueText={displayValueText}\n          displayRelativeValueText={displayRelativeValueText}\n          fullValueText={fullValueText}\n          fullRelativeValueText={fullRelativeValueText}\n          nameTextStyle={nameTextStyle}\n          nameStyle={nameStyle}\n          multiLine={multiLine}\n          symbolPosition={symbolPosition}\n          shape={shape}\n          symbol={symbol}\n          iconStyle={iconStyle}\n          icon={icon}\n          hasChevron={hasActions}\n          maxWidth={seriesContentMaxWidth}\n        />\n        {hasActions && (\n          <span\n            className={clsx(\n              chevron,\n              symbolPosition === 'right' && chevronRightAligned,\n            )}\n            aria-hidden\n          >\n            <ChevronRightSmallIcon size={16} />\n          </span>\n        )}\n      </div>\n    );\n  },\n);\n"],
-  "mappings": "AAiGgB,cAsDV,YAtDU;AAjGhB,OAAO,UAAU;AACjB,SAAS,YAAY;AACrB,SAAS,YAAY,cAAsC;AAC3D,SAAS,eAAe;AAExB,SAAS,6BAA6B;AAEtC,SAAS,iCAAiC;AAC1C,SAAS,2BAA2B;AACpC,SAAS,yBAAyB;AAClC,SAAS,aAAa;AACtB,SAAS,kCAAkC;AAC3C,SAAS,6BAA6B;AACtC,SAAS,+BAA+B;AACxC,SAAS,yBAAyB;AAClC,SAAS,wBAAwB;AACjC,SAAS,aAAa,0BAA0B;AAChD;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAGP,SAAS,yBAAyB;AAClC,SAAS,wBAAwB;AAEjC,MAAM,4BAA4B;AAClC,MAAM,qBAAqB;AAEpB,MAAM,aAAa,CAAC,UAA2B;AACpD,QAAM,OAAO,QAAQ;AACrB,QAAM,EAAE,OAAO,IAAI,mBAAmB;AACtC,QAAM,WAAW,iBAAiB;AAClC,QAAM,EAAE,SAAS,GAAG,UAAU,IAAI;AAClC,QAAM,EAAE,iBAAiB,QAAQ,qBAAqB,IAAI,kBAAkB;AAC5E,QAAM,aAAa,YAAY,UAAa,qBAAqB,OAAO;AACxE,QAAM,WAAW,kBAAkB;AACnC,QAAM,QAAQ,MAAM;AACpB,QAAM,SAAS,YAAY,CAAC,EAAE,cAAAA,cAAa,MAAMA,kBAAiB,KAAK;AACvE,QAAM,EAAE,aAAa,IAAI,mBAAmB;AAC5C,QAAM,eAAe,OAAO,CAAC;AAC7B,QAAM,eAAe,UAAU,YAAY,QAAQ,IAAI;AAEvD,QAAM,qBAAwD,CAAC,UAAU;AACvE,UAAM,gBAAgB;AACtB,aAAS,EAAE,MAAM,sBAAsB,CAAC,EAAE;AAAA,EAC5C;AACA,QAAM,cAAoD,CAAC,UAAU;AACnE,UAAM,gBAAgB;AACtB,iBAAa,UAAU;AACvB,aAAS;AAAA,MACP,MAAM;AAAA,MACN,SAAS,EAAE,cAAc,MAAM;AAAA,IACjC,CAAC,EAAE;AAAA,EACL;AACA,QAAM,oBAAoB,MAAM;AAC9B,iBAAa,UAAU;AACvB,aAAS;AAAA,MACP,MAAM;AAAA,MACN,SAAS,EAAE,cAAc,MAAM;AAAA,IACjC,CAAC,EAAE;AAAA,EACL;AACA,QAAM,iBAAiB,CAAC,SACpB,OACA,CAAC,GAAG,qBAAqB,QAAQ,CAAC,EAAE,IAAI,CAAC,CAAC,UAAU,MAAM,MAAM;AAC9D,UAAM,UAAU,KAAK;AAAA,MACnB,OAAO,gBAAgB,2BAA2B;AAAA,MAClD;AAAA,QACE,OAAO;AAAA,UACL,OAAO;AAAA,UACP,OAAO;AAAA,QACT,GAAG,kBAAkB;AAAA,MACvB;AAAA,IACF;AACA,WAAO,iBAAiB,OAAO,UAAU,OAAO;AAAA,EAClD,CAAC;AAEL,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT,iBAAiB,SAAS;AAAA,QAC1B;AAAA,MACF;AAAA,MACA,SAAS;AAAA,MACT,eAAe;AAAA,MACf,WAAW;AAAA,MACX,eAAY;AAAA,MAEZ;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA;AAAA,UACA,SAAS;AAAA,UACT;AAAA,UACA,QAAQ,oBAAC,uBAAoB,MAAM,MAAM,MAAM;AAAA,UAC/C,kBAAkB;AAAA,UAClB,OAAO,aAAa;AAAA,UAEpB;AAAA,YAAC;AAAA;AAAA,cACC;AAAA,cACA;AAAA,cACC,GAAG;AAAA;AAAA,UACN;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;AAOA,MAAM,aAAa;AAAA,EACjB,CAAC,OAAO,QAAQ;AACd,UAAM,iBAAiB,oBAAoB;AAC3C,UAAM;AAAA,MACJ;AAAA,MACA,YAAY;AAAA,MACZ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF,IAAI;AACJ,UAAM,EAAE,gBAAgB,WAAW,IAAI;AACvC,UAAM,wBAAwB,aAC1B,iBAAiB,qBACjB;AACJ,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF,IAAI,0BAA0B;AAAA,MAC5B,GAAG;AAAA,MACH,UAAU;AAAA,IACZ,CAAC;AACD,WACE,qBAAC,SAAI,KAAU,WAAW,uBACxB;AAAA;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA,YAAY;AAAA,UACZ,UAAU;AAAA;AAAA,MACZ;AAAA,MACC,cACC;AAAA,QAAC;AAAA;AAAA,UACC,WAAW;AAAA,YACT;AAAA,YACA,mBAAmB,WAAW;AAAA,UAChC;AAAA,UACA,eAAW;AAAA,UAEX,8BAAC,yBAAsB,MAAM,IAAI;AAAA;AAAA,MACnC;AAAA,OAEJ;AAAA,EAEJ;AACF;",
+  "sourcesContent": ["import clsx from 'clsx';\nimport { noop } from 'lodash-es';\nimport { forwardRef, useEffect, useRef, type MouseEventHandler } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { ChevronRightSmallIcon } from '@dynatrace/strato-icons';\n\nimport { useSeriesItemDisplayState } from './hooks/use-series-item-display-state.js';\nimport { SeriesActionsHeader } from './SeriesActionsHeader.js';\nimport { SeriesItemContent } from './SeriesItemContent.js';\nimport { useId } from '../../../../../../core/hooks/useId.js';\nimport { COPY_TO_CLIPBOARD_MESSAGES } from '../../../copy-to-clipboard/copy-to-clipboard-messages.js';\nimport { TOOLTIP_CONTENT_PADDING } from '../../constants.js';\nimport { useActiveSeriesMenu } from '../../contexts/ActiveSeriesMenuContext.js';\nimport { useExternalConfig } from '../../contexts/ExternalConfigContext.js';\nimport { useDefaultLabels } from '../../hooks/useDefaultLabels.js';\nimport { useSelector, useTooltipSnapshot } from '../../selectors.js';\nimport {\n  chevron,\n  chevronRightAligned,\n  seriesItemActive,\n  seriesItemWithChevron,\n  seriesItemWrapper,\n  TOOLTIP_MAX_WIDTH,\n} from '../../tooltip.sty.js';\nimport type { SeriesItemProps } from '../../types/series.js';\nimport { InternalSeriesItemProps } from '../../types/series.js';\nimport { useTooltipReducer } from '../../useTooltipReducer.js';\nimport { getDefaultAction } from '../../utils/get-copy-action.js';\n\nconst ACTIVE_SERIES_HOVER_DELAY = 150;\nconst CHEVRON_SLOT_WIDTH = 20;\n\nexport const SeriesItem = (props: SeriesItemProps) => {\n  const intl = useIntl();\n  const { pinned } = useTooltipSnapshot();\n  const labelFor = useDefaultLabels();\n  const { actions, ...restProps } = props as InternalSeriesItemProps;\n  const { symbolPosition = 'left', defaultActionsConfig } = useExternalConfig();\n  const hasActions = actions !== undefined || defaultActionsConfig.size > 0;\n  const dispatch = useTooltipReducer();\n  const rowId = useId();\n  const isOpen = useSelector(({ activeSeries }) => {\n    return activeSeries === rowId;\n  });\n  const { activeSeries } = useTooltipSnapshot();\n  const menuDelayRef = useRef(0);\n  const buttonRef = useRef<HTMLButtonElement>(null);\n  const asyncActions = actions ? async () => actions() : undefined;\n  const { setMenuProps } = useActiveSeriesMenu();\n\n  const handleClick: MouseEventHandler<HTMLButtonElement> = (event) => {\n    event.stopPropagation();\n    menuDelayRef.current = 0;\n    dispatch({\n      type: 'SET_ACTIVE_SERIES',\n      payload: { activeSeries: rowId },\n    })();\n  };\n  const handlePointerMove = () => {\n    menuDelayRef.current = ACTIVE_SERIES_HOVER_DELAY;\n    dispatch({\n      type: 'SET_ACTIVE_SERIES',\n      payload: { activeSeries: rowId },\n    })();\n  };\n  const defaultActions = !pinned\n    ? null\n    : [...defaultActionsConfig.entries()].map(([accessor, config]) => {\n        const message = intl.formatMessage(\n          config.messageLabel ?? COPY_TO_CLIPBOARD_MESSAGES.copyField,\n          {\n            field: labelFor?.(\n              config.field,\n              config.customLabel,\n            )?.toLocaleLowerCase(),\n          },\n        );\n        return getDefaultAction(props, accessor, message);\n      });\n\n  useEffect(() => {\n    if (!isOpen || !hasActions) {\n      return;\n    }\n    const button = buttonRef.current;\n    const tooltipEl = button?.closest('[aria-label=\"OverlayTooltip\"]');\n    const alignOffset =\n      button && tooltipEl\n        ? button.getBoundingClientRect().top -\n          tooltipEl.getBoundingClientRect().top\n        : 0;\n    setMenuProps({\n      actions: asyncActions,\n      defaultActions,\n      header: <SeriesActionsHeader text={props.name} />,\n      delay: menuDelayRef.current,\n      alignOffset,\n    });\n    return () => isOpen && setMenuProps(null);\n    // oxlint-disable-next-line react-hooks/exhaustive-deps\n  }, [isOpen, hasActions, setMenuProps]);\n\n  return (\n    <button\n      ref={buttonRef}\n      className={clsx(\n        activeSeries === rowId && seriesItemActive,\n        seriesItemWrapper,\n      )}\n      onClick={handleClick}\n      onPointerMove={handlePointerMove}\n      onKeyDown={noop}\n      data-testid=\"series-item\"\n    >\n      <WithSymbol\n        symbolPosition={symbolPosition}\n        hasActions={hasActions}\n        {...restProps}\n      />\n    </button>\n  );\n};\n\ntype SeriesWithSymbolProps = Omit<InternalSeriesItemProps, 'actions'> & {\n  symbolPosition: 'left' | 'right';\n  hasActions: boolean;\n};\n\nconst WithSymbol = forwardRef<HTMLDivElement, SeriesWithSymbolProps>(\n  (props, ref) => {\n    const containerWidth = TOOLTIP_MAX_WIDTH - TOOLTIP_CONTENT_PADDING;\n    const {\n      color,\n      multiLine = false,\n      name,\n      description,\n      shape,\n      iconStyle,\n      icon,\n      symbol,\n    } = props;\n    const { symbolPosition, hasActions } = props;\n    const seriesContentMaxWidth = hasActions\n      ? containerWidth - CHEVRON_SLOT_WIDTH\n      : containerWidth;\n    const {\n      nameText,\n      descriptionText,\n      fullDescriptionText,\n      isDescriptionTruncated,\n      descriptionShouldUseMultiLineCss,\n      descriptionMultiLineMode,\n      displayValueText,\n      displayRelativeValueText,\n      fullValueText,\n      fullRelativeValueText,\n      nameTextStyle,\n      nameStyle,\n    } = useSeriesItemDisplayState({\n      ...props,\n      maxWidth: seriesContentMaxWidth,\n    });\n    return (\n      <div ref={ref} className={seriesItemWithChevron}>\n        <SeriesItemContent\n          color={color}\n          name={name}\n          description={description}\n          nameText={nameText}\n          descriptionText={descriptionText}\n          fullDescriptionText={fullDescriptionText}\n          isDescriptionTruncated={isDescriptionTruncated}\n          descriptionShouldUseMultiLineCss={descriptionShouldUseMultiLineCss}\n          descriptionMultiLineMode={descriptionMultiLineMode}\n          displayValueText={displayValueText}\n          displayRelativeValueText={displayRelativeValueText}\n          fullValueText={fullValueText}\n          fullRelativeValueText={fullRelativeValueText}\n          nameTextStyle={nameTextStyle}\n          nameStyle={nameStyle}\n          multiLine={multiLine}\n          symbolPosition={symbolPosition}\n          shape={shape}\n          symbol={symbol}\n          iconStyle={iconStyle}\n          icon={icon}\n          hasChevron={hasActions}\n          maxWidth={seriesContentMaxWidth}\n        />\n        {hasActions && (\n          <span\n            className={clsx(\n              chevron,\n              symbolPosition === 'right' && chevronRightAligned,\n            )}\n            aria-hidden\n          >\n            <ChevronRightSmallIcon size={16} />\n          </span>\n        )}\n      </div>\n    );\n  },\n);\n"],
+  "mappings": "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",
   "names": ["activeSeries"]
 }

package/esm/charts/core/components/overlay-tooltip/components/series/seriesSymbol.css

@@ -1,4 +1,4 @@
-._1ydozsr0-3-12-2 {
+._1ydozsr0-3-13-0 {
   height: var(--dt-spacings-size-16, 16px);
   width: var(--dt-spacings-size-16, 16px);
   font-size: var(--dt-spacings-size-16, 16px);
@@ -10,7 +10,7 @@
   justify-content: center;
   flex-shrink: 0;
 }
-._1ydozsr1-3-12-2 {
+._1ydozsr1-3-13-0 {
   height: var(--dt-spacings-size-24, 24px);
   width: var(--dt-spacings-size-24, 24px);
   font-size: var(--dt-spacings-size-24, 24px);

package/esm/charts/core/components/overlay-tooltip/components/series/seriesSymbol.sty.js

@@ -1,6 +1,6 @@
 import "./seriesSymbol.css";
-var customSymbol = "_1ydozsr0-3-12-2";
-var customSymbolLarge = "_1ydozsr1-3-12-2 _1ydozsr0-3-12-2";
+var customSymbol = "_1ydozsr0-3-13-0";
+var customSymbolLarge = "_1ydozsr1-3-13-0 _1ydozsr0-3-13-0";
 export {
   customSymbol,
   customSymbolLarge

package/esm/charts/core/components/overlay-tooltip/components/series/seriesSymbol.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../src/charts/core/components/overlay-tooltip/components/series/seriesSymbol.css.ts"],
-  "sourcesContent": ["import './seriesSymbol.css';\nexport var customSymbol = '_1ydozsr0-3-12-2';\nexport var customSymbolLarge = '_1ydozsr1-3-12-2 _1ydozsr0-3-12-2';"],
+  "sourcesContent": ["import './seriesSymbol.css';\nexport var customSymbol = '_1ydozsr0-3-13-0';\nexport var customSymbolLarge = '_1ydozsr1-3-13-0 _1ydozsr0-3-13-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,eAAe;AACnB,IAAI,oBAAoB;",
   "names": []
 }

package/esm/charts/core/components/overlay-tooltip/contexts/ActiveSeriesMenuContext.js

@@ -0,0 +1,29 @@
+import { jsx } from "react/jsx-runtime";
+import {
+  createContext,
+  useContext,
+  useMemo,
+  useState
+} from "react";
+const ActiveSeriesMenuContext = createContext(null);
+const useActiveSeriesMenu = () => {
+  const ctx = useContext(ActiveSeriesMenuContext);
+  if (!ctx) {
+    throw new Error(
+      "useActiveSeriesMenu must be used within ActiveSeriesMenuProvider"
+    );
+  }
+  return ctx;
+};
+const ActiveSeriesMenuProvider = ({ children }) => {
+  const [menuProps, setMenuProps] = useState(
+    null
+  );
+  const value = useMemo(() => ({ menuProps, setMenuProps }), [menuProps]);
+  return /* @__PURE__ */ jsx(ActiveSeriesMenuContext.Provider, { value, children });
+};
+export {
+  ActiveSeriesMenuProvider,
+  useActiveSeriesMenu
+};
+//# sourceMappingURL=ActiveSeriesMenuContext.js.map

package/esm/charts/core/components/overlay-tooltip/contexts/ActiveSeriesMenuContext.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../src/charts/core/components/overlay-tooltip/contexts/ActiveSeriesMenuContext.tsx"],
+  "sourcesContent": ["import {\n  createContext,\n  type Dispatch,\n  type PropsWithChildren,\n  type ReactElement,\n  type ReactNode,\n  type SetStateAction,\n  useContext,\n  useMemo,\n  useState,\n} from 'react';\n\nexport type ActiveSeriesMenuProps = {\n  actions: (() => Promise<ReactElement>) | undefined;\n  defaultActions: ReactNode;\n  header: ReactElement;\n  delay: number;\n  /**\n   * Vertical offset, in pixels, of the active series item's top edge relative\n   * to the tooltip wrapper. Used to align the menu with the hovered series item\n   * when the menu opens to the right or left of the tooltip.\n   */\n  alignOffset: number;\n};\n\ntype ContextValue = {\n  menuProps: ActiveSeriesMenuProps | null;\n  setMenuProps: Dispatch<SetStateAction<ActiveSeriesMenuProps | null>>;\n};\n\nconst ActiveSeriesMenuContext = createContext<ContextValue | null>(null);\n\nexport const useActiveSeriesMenu = (): ContextValue => {\n  const ctx = useContext(ActiveSeriesMenuContext);\n  if (!ctx) {\n    throw new Error(\n      'useActiveSeriesMenu must be used within ActiveSeriesMenuProvider',\n    );\n  }\n  return ctx;\n};\n\nexport const ActiveSeriesMenuProvider = ({ children }: PropsWithChildren) => {\n  const [menuProps, setMenuProps] = useState<ActiveSeriesMenuProps | null>(\n    null,\n  );\n  const value = useMemo(() => ({ menuProps, setMenuProps }), [menuProps]);\n  return (\n    <ActiveSeriesMenuContext.Provider value={value}>\n      {children}\n    </ActiveSeriesMenuContext.Provider>\n  );\n};\n"],
+  "mappings": "AAgDI;AAhDJ;AAAA,EACE;AAAA,EAMA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAoBP,MAAM,0BAA0B,cAAmC,IAAI;AAEhE,MAAM,sBAAsB,MAAoB;AACrD,QAAM,MAAM,WAAW,uBAAuB;AAC9C,MAAI,CAAC,KAAK;AACR,UAAM,IAAI;AAAA,MACR;AAAA,IACF;AAAA,EACF;AACA,SAAO;AACT;AAEO,MAAM,2BAA2B,CAAC,EAAE,SAAS,MAAyB;AAC3E,QAAM,CAAC,WAAW,YAAY,IAAI;AAAA,IAChC;AAAA,EACF;AACA,QAAM,QAAQ,QAAQ,OAAO,EAAE,WAAW,aAAa,IAAI,CAAC,SAAS,CAAC;AACtE,SACE,oBAAC,wBAAwB,UAAxB,EAAiC,OAC/B,UACH;AAEJ;",
+  "names": []
+}

package/esm/charts/core/components/overlay-tooltip/hooks/useSvgAriaDescribedBy.js

@@ -0,0 +1,36 @@
+import { useEffect } from "react";
+const useSvgAriaDescribedBy = (overlayRef, tooltipId, active) => {
+  useEffect(() => {
+    if (!active || !overlayRef.current) {
+      return;
+    }
+    const container = overlayRef.current;
+    const applyToSvgs = () => {
+      container.querySelectorAll("[data-dt-chart-svg]").forEach((svg) => {
+        const ids = svg.getAttribute("aria-describedby")?.split(/\s+/).filter(Boolean) ?? [];
+        if (!ids.includes(tooltipId)) {
+          svg.setAttribute("aria-describedby", [...ids, tooltipId].join(" "));
+        }
+      });
+    };
+    applyToSvgs();
+    const observer = new MutationObserver(applyToSvgs);
+    observer.observe(container, { childList: true, subtree: true });
+    return () => {
+      observer.disconnect();
+      container.querySelectorAll("[data-dt-chart-svg]").forEach((svg) => {
+        const ids = svg.getAttribute("aria-describedby")?.split(/\s+/).filter(Boolean) ?? [];
+        const remaining = ids.filter((id) => id !== tooltipId);
+        if (remaining.length > 0) {
+          svg.setAttribute("aria-describedby", remaining.join(" "));
+        } else {
+          svg.removeAttribute("aria-describedby");
+        }
+      });
+    };
+  }, [active, tooltipId]);
+};
+export {
+  useSvgAriaDescribedBy
+};
+//# sourceMappingURL=useSvgAriaDescribedBy.js.map

package/esm/charts/core/components/overlay-tooltip/hooks/useSvgAriaDescribedBy.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../src/charts/core/components/overlay-tooltip/hooks/useSvgAriaDescribedBy.ts"],
+  "sourcesContent": ["import { type RefObject, useEffect } from 'react';\n\n/** @internal */\nexport const useSvgAriaDescribedBy = (\n  overlayRef: RefObject<HTMLDivElement | undefined>,\n  tooltipId: string,\n  active: boolean,\n) => {\n  useEffect(() => {\n    if (!active || !overlayRef.current) {\n      return;\n    }\n\n    const container = overlayRef.current;\n\n    const applyToSvgs = () => {\n      container\n        .querySelectorAll<SVGSVGElement>('[data-dt-chart-svg]')\n        .forEach((svg) => {\n          const ids =\n            svg\n              .getAttribute('aria-describedby')\n              ?.split(/\\s+/)\n              .filter(Boolean) ?? [];\n          if (!ids.includes(tooltipId)) {\n            svg.setAttribute('aria-describedby', [...ids, tooltipId].join(' '));\n          }\n        });\n    };\n\n    applyToSvgs();\n    const observer = new MutationObserver(applyToSvgs);\n    observer.observe(container, { childList: true, subtree: true });\n\n    return () => {\n      observer.disconnect();\n      container\n        .querySelectorAll<SVGSVGElement>('[data-dt-chart-svg]')\n        .forEach((svg) => {\n          const ids =\n            svg\n              .getAttribute('aria-describedby')\n              ?.split(/\\s+/)\n              .filter(Boolean) ?? [];\n          const remaining = ids.filter((id) => id !== tooltipId);\n          if (remaining.length > 0) {\n            svg.setAttribute('aria-describedby', remaining.join(' '));\n          } else {\n            svg.removeAttribute('aria-describedby');\n          }\n        });\n    };\n  }, [active, tooltipId]);\n};\n"],
+  "mappings": "AAAA,SAAyB,iBAAiB;AAGnC,MAAM,wBAAwB,CACnC,YACA,WACA,WACG;AACH,YAAU,MAAM;AACd,QAAI,CAAC,UAAU,CAAC,WAAW,SAAS;AAClC;AAAA,IACF;AAEA,UAAM,YAAY,WAAW;AAE7B,UAAM,cAAc,MAAM;AACxB,gBACG,iBAAgC,qBAAqB,EACrD,QAAQ,CAAC,QAAQ;AAChB,cAAM,MACJ,IACG,aAAa,kBAAkB,GAC9B,MAAM,KAAK,EACZ,OAAO,OAAO,KAAK,CAAC;AACzB,YAAI,CAAC,IAAI,SAAS,SAAS,GAAG;AAC5B,cAAI,aAAa,oBAAoB,CAAC,GAAG,KAAK,SAAS,EAAE,KAAK,GAAG,CAAC;AAAA,QACpE;AAAA,MACF,CAAC;AAAA,IACL;AAEA,gBAAY;AACZ,UAAM,WAAW,IAAI,iBAAiB,WAAW;AACjD,aAAS,QAAQ,WAAW,EAAE,WAAW,MAAM,SAAS,KAAK,CAAC;AAE9D,WAAO,MAAM;AACX,eAAS,WAAW;AACpB,gBACG,iBAAgC,qBAAqB,EACrD,QAAQ,CAAC,QAAQ;AAChB,cAAM,MACJ,IACG,aAAa,kBAAkB,GAC9B,MAAM,KAAK,EACZ,OAAO,OAAO,KAAK,CAAC;AACzB,cAAM,YAAY,IAAI,OAAO,CAAC,OAAO,OAAO,SAAS;AACrD,YAAI,UAAU,SAAS,GAAG;AACxB,cAAI,aAAa,oBAAoB,UAAU,KAAK,GAAG,CAAC;AAAA,QAC1D,OAAO;AACL,cAAI,gBAAgB,kBAAkB;AAAA,QACxC;AAAA,MACF,CAAC;AAAA,IACL;AAAA,EACF,GAAG,CAAC,QAAQ,SAAS,CAAC;AACxB;",
+  "names": []
+}