@dynatrace/strato-components 3.1.3 → 3.2.1

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 { isArray, isEmpty, isNil } from 'lodash-es';\n\nimport { headerContainer, headerSubText, headerText } from './Header.sty.js';\nimport { Divider } from '../../../../../../layouts/divider/Divider.js';\nimport { HeaderData, TooltipValue } from '../../types.js';\nimport { HeaderProps } from './types/header.js';\nimport {\n  isFromTo,\n  isNonEmptyRange,\n  isSingleValue,\n} from './types/type-guards.js';\nimport { getDurationContent } from './utils/get-duration-content.js';\nimport { getShowRangeDuration } from './utils/get-show-range-duration.js';\nimport {\n  defaultLabelFormatterStrategy,\n  formatValueRange,\n} from './utils/value-formatters.js';\nimport { useExternalConfig } from '../../contexts/ExternalConfigContext.js';\nimport { useDefaultConfig } from '../../hooks/useDefaultConfig.js';\nimport { useDefaultLabels } from '../../hooks/useDefaultLabels.js';\nimport { divider } from '../../tooltip.sty.js';\n\nconst getValue = (\n  data?: HeaderData,\n): TooltipValue | [TooltipValue, TooltipValue] | undefined => {\n  if (data === undefined) {\n    return undefined;\n  }\n  if (isSingleValue(data)) {\n    return isArray(data) ? data[0] : data;\n  } else if (isFromTo(data)) {\n    return data;\n  }\n};\n\nconst getNonGeometryHeader = (value: HeaderData) => {\n  if (isNonEmptyRange(value)) {\n    return formatValueRange;\n  }\n\n  return defaultLabelFormatterStrategy;\n};\nexport const Header = (props: HeaderProps) => {\n  const { header1, subheader, label } = props;\n  const labelFor = useDefaultLabels();\n  const defaultConfig = useDefaultConfig();\n  const defaultStrategy =\n    defaultConfig?.headerFormatStrategy ?? defaultLabelFormatterStrategy;\n  const { displayHeaderDivider } = useExternalConfig();\n  if (\n    (isNil(header1) || isEmpty(header1)) &&\n    (isNil(subheader) || isEmpty(subheader))\n  ) {\n    return null;\n  }\n\n  const showRangeDuration = getShowRangeDuration(defaultConfig, props);\n  const value = getValue(header1);\n  const subheaderValue = getValue(subheader);\n\n  const formatStrategy = defaultStrategy ?? getNonGeometryHeader(header1);\n\n  const formattedValue = formatStrategy(value);\n\n  const headerLabel = labelFor?.('headerLabel', label);\n  const headerContent = headerLabel\n    ? `${headerLabel}: ${formattedValue}`\n    : formattedValue;\n\n  const subheaderContent = subheaderValue\n    ? formatStrategy(subheader)\n    : undefined;\n  const durationContent = getDurationContent(showRangeDuration, header1);\n\n  return (\n    <>\n      <div className={headerContainer}>\n        <p className={headerText}>\n          {headerContent}\n          {durationContent && (\n            <span className={headerSubText}>{` (${durationContent})`}</span>\n          )}\n        </p>\n\n        {subheaderContent && (\n          <p className={headerSubText}>{subheaderContent}</p>\n        )}\n      </div>\n      {displayHeaderDivider && (\n        <Divider orientation=\"horizontal\" key=\"divider\" className={divider} />\n      )}\n    </>\n  );\n};\n"],
-  "mappings": "AA2EI,mBAKQ,KAHJ,YAFJ;AA3EJ,SAAS,SAAS,SAAS,aAAa;AAExC,SAAS,iBAAiB,eAAe,kBAAkB;AAC3D,SAAS,eAAe;AAGxB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,0BAA0B;AACnC,SAAS,4BAA4B;AACrC;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,SAAS,yBAAyB;AAClC,SAAS,wBAAwB;AACjC,SAAS,wBAAwB;AACjC,SAAS,eAAe;AAExB,MAAM,WAAW,CACf,SAC4D;AAC5D,MAAI,SAAS,QAAW;AACtB,WAAO;AAAA,EACT;AACA,MAAI,cAAc,IAAI,GAAG;AACvB,WAAO,QAAQ,IAAI,IAAI,KAAK,CAAC,IAAI;AAAA,EACnC,WAAW,SAAS,IAAI,GAAG;AACzB,WAAO;AAAA,EACT;AACF;AAEA,MAAM,uBAAuB,CAAC,UAAsB;AAClD,MAAI,gBAAgB,KAAK,GAAG;AAC1B,WAAO;AAAA,EACT;AAEA,SAAO;AACT;AACO,MAAM,SAAS,CAAC,UAAuB;AAC5C,QAAM,EAAE,SAAS,WAAW,MAAM,IAAI;AACtC,QAAM,WAAW,iBAAiB;AAClC,QAAM,gBAAgB,iBAAiB;AACvC,QAAM,kBACJ,eAAe,wBAAwB;AACzC,QAAM,EAAE,qBAAqB,IAAI,kBAAkB;AACnD,OACG,MAAM,OAAO,KAAK,QAAQ,OAAO,OACjC,MAAM,SAAS,KAAK,QAAQ,SAAS,IACtC;AACA,WAAO;AAAA,EACT;AAEA,QAAM,oBAAoB,qBAAqB,eAAe,KAAK;AACnE,QAAM,QAAQ,SAAS,OAAO;AAC9B,QAAM,iBAAiB,SAAS,SAAS;AAEzC,QAAM,iBAAiB,mBAAmB,qBAAqB,OAAO;AAEtE,QAAM,iBAAiB,eAAe,KAAK;AAE3C,QAAM,cAAc,WAAW,eAAe,KAAK;AACnD,QAAM,gBAAgB,cAClB,GAAG,WAAW,KAAK,cAAc,KACjC;AAEJ,QAAM,mBAAmB,iBACrB,eAAe,SAAS,IACxB;AACJ,QAAM,kBAAkB,mBAAmB,mBAAmB,OAAO;AAErE,SACE,iCACE;AAAA,yBAAC,SAAI,WAAW,iBACd;AAAA,2BAAC,OAAE,WAAW,YACX;AAAA;AAAA,QACA,mBACC,oBAAC,UAAK,WAAW,eAAgB,eAAK,eAAe,KAAI;AAAA,SAE7D;AAAA,MAEC,oBACC,oBAAC,OAAE,WAAW,eAAgB,4BAAiB;AAAA,OAEnD;AAAA,IACC,wBACC,oBAAC,WAAQ,aAAY,cAA2B,WAAW,WAArB,SAA8B;AAAA,KAExE;AAEJ;",
+  "sourcesContent": ["import { assignInlineVars } from '@vanilla-extract/dynamic';\nimport clsx from 'clsx';\nimport { isArray, isEmpty, isNil } from 'lodash-es';\n\nimport {\n  headerContainer,\n  headerSubText,\n  headerText,\n  headerTextMultiLine,\n  headerWidthVar,\n  maxLinesVar,\n} from './Header.sty.js';\nimport { HeaderProps } from './types/header.js';\nimport {\n  isFromTo,\n  isNonEmptyRange,\n  isSingleValue,\n} from './types/type-guards.js';\nimport { getDurationContent } from './utils/get-duration-content.js';\nimport { getShowRangeDuration } from './utils/get-show-range-duration.js';\nimport { getShownHeaderText } from './utils/get-shown-header-text.js';\nimport {\n  defaultLabelFormatterStrategy,\n  formatValueRange,\n} 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_HEADER_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 type { HeaderData, TooltipValue } from '../../types.js';\nimport { getHeaderTruncatedText } from '../../utils/text-truncation-header.js';\nimport { calculateTotalWidth500 } from '../../utils/width-calculation.js';\n\nconst getValue = (\n  data?: HeaderData,\n): TooltipValue | [TooltipValue, TooltipValue] | undefined => {\n  if (data === undefined) {\n    return undefined;\n  }\n  if (isSingleValue(data)) {\n    return isArray(data) ? data[0] : data;\n  } else if (isFromTo(data)) {\n    return data;\n  }\n};\nconst getNonGeometryHeader = (value: HeaderData) => {\n  if (isNonEmptyRange(value)) {\n    return formatValueRange;\n  }\n\n  return defaultLabelFormatterStrategy;\n};\n\nexport const Header = (props: HeaderProps) => {\n  const { header1, subheader, label, maxLines, duration } = props;\n  const labelFor = useDefaultLabels();\n  const defaultConfig = useDefaultConfig();\n  const defaultStrategy =\n    defaultConfig?.headerFormatStrategy ?? defaultLabelFormatterStrategy;\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 showRangeDuration = getShowRangeDuration(defaultConfig, props);\n  const value = getValue(header1);\n  const subheaderValue = getValue(subheader);\n  const formatStrategy = defaultStrategy ?? getNonGeometryHeader(header1);\n  const formattedValue = formatStrategy(value);\n  const headerLabel = labelFor?.('headerLabel', label);\n  const headerContent = headerLabel\n    ? `${headerLabel}: ${formattedValue}`\n    : formattedValue ?? '';\n\n  if (\n    (isNil(header1) || isEmpty(header1)) &&\n    (isNil(subheader) || isEmpty(subheader))\n  ) {\n    return null;\n  }\n\n  const availableWidth = containerWidth - TOOLTIP_HEADER_PADDING * 2;\n  const totalTextWidth = calculateTotalWidth500(headerContent ?? '');\n  const shownText = getShownHeaderText(\n    headerContent,\n    isSingleLine,\n    isTruncationEnd,\n    availableWidth,\n    showedLines,\n    truncationMode,\n  );\n  const isMultiLineCssClamped =\n    !isSingleLine &&\n    isTruncationEnd &&\n    Math.ceil(totalTextWidth / availableWidth) > showedLines;\n  const isTruncated = isMultiLineCssClamped || shownText !== headerContent;\n\n  const subheaderContent = subheaderValue\n    ? formatStrategy(subheaderValue)\n    : undefined;\n  const durationContent =\n    duration ?? getDurationContent(showRangeDuration, header1);\n\n  const shownSubheaderText = subheaderContent\n    ? getHeaderTruncatedText(subheaderContent, availableWidth, truncationMode)\n    : undefined;\n  const isSubheaderTruncated = subheaderContent\n    ? shownSubheaderText !== subheaderContent\n    : false;\n\n  const headerClassName =\n    !isSingleLine && isTruncationEnd\n      ? clsx(headerText, headerTextMultiLine)\n      : headerText;\n\n  const shouldConstrainWidth = totalTextWidth > availableWidth;\n  const headerContainerStyle = shouldConstrainWidth\n    ? assignInlineVars({ [headerWidthVar]: `${availableWidth}px` })\n    : {};\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 && (\n              <span className={headerSubText}>{` (${durationContent})`}</span>\n            )}\n          </p>\n        </Tooltip>\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,10 +1,16 @@
 import "./Header.css";
-var headerContainer = "_1ldhlar0-3-1-3";
-var headerSubText = "_1ldhlar2-3-1-3";
-var headerText = "_1ldhlar1-3-1-3";
+var headerContainer = "_1ldhlar2-3-2-1";
+var headerSubText = "_1ldhlar5-3-2-1";
+var headerText = "_1ldhlar3-3-2-1";
+var headerTextMultiLine = "_1ldhlar4-3-2-1";
+var headerWidthVar = "var(--_1ldhlar1-3-2-1)";
+var maxLinesVar = "var(--_1ldhlar0-3-2-1)";
 export {
   headerContainer,
   headerSubText,
-  headerText
+  headerText,
+  headerTextMultiLine,
+  headerWidthVar,
+  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 = '_1ldhlar0-3-1-3';\nexport var headerSubText = '_1ldhlar2-3-1-3';\nexport var headerText = '_1ldhlar1-3-1-3';"],
-  "mappings": "AAAA,OAAO;AACA,IAAI,kBAAkB;AACtB,IAAI,gBAAgB;AACpB,IAAI,aAAa;",
+  "sourcesContent": ["import './Header.css';\nexport var headerContainer = '_1ldhlar2-3-2-1';\nexport var headerSubText = '_1ldhlar5-3-2-1';\nexport var headerText = '_1ldhlar3-3-2-1';\nexport var headerTextMultiLine = '_1ldhlar4-3-2-1';\nexport var headerWidthVar = 'var(--_1ldhlar1-3-2-1)';\nexport var maxLinesVar = 'var(--_1ldhlar0-3-2-1)';"],
+  "mappings": "AAAA,OAAO;AACA,IAAI,kBAAkB;AACtB,IAAI,gBAAgB;AACpB,IAAI,aAAa;AACjB,IAAI,sBAAsB;AAC1B,IAAI,iBAAiB;AACrB,IAAI,cAAc;",
   "names": []
 }

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

@@ -0,0 +1,15 @@
+import { getHeaderTruncatedText } 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
+  );
+};
+export {
+  getShownHeaderText
+};
+//# sourceMappingURL=get-shown-header-text.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../../../src/charts/core/components/overlay-tooltip/components/header/utils/get-shown-header-text.ts"],
+  "sourcesContent": ["import { TruncationMode } from '../../../../text-ellipsis/ChartTextEllipsis.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;",
+  "names": []
+}

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

@@ -1,51 +1,92 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useVirtualizer } from "@tanstack/react-virtual";
 import clsx from "clsx";
-import { Fragment, useRef } from "react";
+import { Fragment, useRef, useCallback } from "react";
+import {
+  MIN_TOOLTIP_WIDTH,
+  SCROLLBAR_WIDTH,
+  SYMBOL_AND_SPACING_WIDTH,
+  TOOLTIP_CONTENT_PADDING,
+  TOOLTIP_WRAPPER_PADDING
+} from "../../constants.js";
 import { useExternalConfig } from "../../contexts/ExternalConfigContext.js";
+import { useScrollbarDetection } from "../../hooks/use-scrollbar-detection.js";
 import { useSelector } from "../../selectors.js";
 import {
+  seriesGridContainer,
   seriesItemHighlighted,
   seriesOverflowContainer,
   seriesWrapper
 } from "../../tooltip.sty.js";
+import { estimateSeriesItemSize } from "../../utils/estimate-series-item-size.js";
+import { calculateTotalWidth400 } from "../../utils/width-calculation.js";
 const Series = (props) => {
   const { data, seriesItemTemplate, variant, activeItem } = props;
   const config = useExternalConfig();
   if (variant !== "shared" || data.length === 1) {
-    return [
+    return /* @__PURE__ */ jsxs("div", { className: seriesGridContainer, children: [
       /* @__PURE__ */ jsx(Fragment, { children: config.seriesHeader }, "seriesHeader"),
       /* @__PURE__ */ jsx(Fragment, { children: seriesItemTemplate(data[0]) }, "series")
-    ];
+    ] });
   }
+  const maxContentWidthWithinFirstTenValues = Math.max(
+    ...data.slice(0, 10).map((item) => {
+      let nameWidth = 0;
+      if (Array.isArray(item.name)) {
+        nameWidth = calculateTotalWidth400(...item.name);
+      } else {
+        nameWidth = calculateTotalWidth400(item.name);
+      }
+      let valueWidth = 0;
+      if (item.value !== void 0 && item.value !== null) {
+        const valueText = String(item.value);
+        const relativeValueText = item.relativeValue ? String(item.relativeValue) : "";
+        valueWidth = calculateTotalWidth400(valueText, relativeValueText);
+      }
+      return nameWidth + valueWidth;
+    })
+  );
   return /* @__PURE__ */ jsx(
     SeriesWithVirtualizer,
     {
       data,
       activeItem,
-      seriesItemTemplate
+      seriesItemTemplate,
+      maxContentWidth: maxContentWidthWithinFirstTenValues
     }
   );
 };
 const SeriesWithVirtualizer = (props) => {
-  const { data, seriesItemTemplate, activeItem } = props;
+  const { data, seriesItemTemplate, activeItem, maxContentWidth } = props;
   const isItemSelected = useSelector(({ activeSeries }) => !!activeSeries);
   const parentRef = useRef(null);
+  const config = useExternalConfig();
+  const isSeriesHeaderDisabled = config.seriesHeader?.props?.disabled;
+  const scrollbarRefCallback = useScrollbarDetection();
+  const combinedRefCallback = useCallback(
+    (element) => {
+      parentRef.current = element;
+      scrollbarRefCallback(element);
+    },
+    [scrollbarRefCallback]
+  );
   const virtualizer = useVirtualizer({
     count: data.length,
     getScrollElement: () => parentRef.current,
-    estimateSize: () => 24,
-    paddingStart: 24,
+    estimateSize: (index) => estimateSeriesItemSize(data[index], maxContainerWidth),
+    paddingStart: isSeriesHeaderDisabled ? 0 : 24,
     paddingEnd: 0,
     overscan: 3
   });
-  const config = useExternalConfig();
-  return /* @__PURE__ */ jsx("div", { ref: parentRef, className: seriesWrapper, children: /* @__PURE__ */ jsxs(
+  const spacings = TOOLTIP_WRAPPER_PADDING * 2 + SYMBOL_AND_SPACING_WIDTH;
+  const maxContainerWidth = maxContentWidth + spacings + TOOLTIP_CONTENT_PADDING * 2;
+  return /* @__PURE__ */ jsx("div", { ref: combinedRefCallback, className: seriesWrapper, children: /* @__PURE__ */ jsxs(
     "div",
     {
       className: seriesOverflowContainer,
       style: {
-        height: `${virtualizer.getTotalSize()}px`
+        height: `${virtualizer.getTotalSize()}px`,
+        width: `${Math.max(maxContainerWidth, MIN_TOOLTIP_WIDTH)}px`
       },
       children: [
         config.seriesHeader,
@@ -54,13 +95,14 @@ const SeriesWithVirtualizer = (props) => {
             "div",
             {
               className: clsx(
+                seriesGridContainer,
                 item.index === activeItem && !isItemSelected && seriesItemHighlighted
               ),
               style: {
                 position: "absolute",
                 top: 0,
                 left: 0,
-                width: "100%",
+                width: `calc(100% - var(--needs-scrollbar-fix, 0) * ${SCROLLBAR_WIDTH}px)`,
                 height: `${item.size}px`,
                 transform: `translateY(${item.start}px)`
               },

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../src/charts/core/components/overlay-tooltip/components/series/Series.tsx"],
-  "sourcesContent": ["import { useVirtualizer } from '@tanstack/react-virtual';\nimport clsx from 'clsx';\nimport { Fragment, useRef, type JSX } from 'react';\n\nimport { useExternalConfig } from '../../contexts/ExternalConfigContext.js';\nimport { useSelector } from '../../selectors.js';\nimport {\n  seriesItemHighlighted,\n  seriesOverflowContainer,\n  seriesWrapper,\n} from '../../tooltip.sty.js';\n\nexport const Series = <T extends Record<string, unknown>>(props: {\n  data: T[];\n  seriesItemTemplate: (item: T) => JSX.Element;\n  variant?: 'shared' | 'single';\n  activeItem: number;\n}) => {\n  const { data, seriesItemTemplate, variant, activeItem } = props;\n  const config = useExternalConfig();\n  if (variant !== 'shared' || data.length === 1) {\n    return [\n      <Fragment key=\"seriesHeader\">{config.seriesHeader}</Fragment>,\n      <Fragment key=\"series\">{seriesItemTemplate(data[0])}</Fragment>,\n    ];\n  }\n\n  return (\n    <SeriesWithVirtualizer\n      data={data}\n      activeItem={activeItem}\n      seriesItemTemplate={seriesItemTemplate}\n    />\n  );\n};\n\nconst SeriesWithVirtualizer = <T extends Record<string, unknown>>(props: {\n  data: T[];\n  seriesItemTemplate: (item: T) => JSX.Element;\n  activeItem: number;\n}) => {\n  const { data, seriesItemTemplate, activeItem } = props;\n  const isItemSelected = useSelector(({ activeSeries }) => !!activeSeries);\n  const parentRef = useRef(null);\n\n  const virtualizer = useVirtualizer({\n    count: data.length,\n    getScrollElement: () => parentRef.current,\n    estimateSize: () => 24,\n    paddingStart: 24,\n    paddingEnd: 0,\n    overscan: 3,\n  });\n  const config = useExternalConfig();\n\n  return (\n    <div ref={parentRef} className={seriesWrapper}>\n      <div\n        className={seriesOverflowContainer}\n        style={{\n          height: `${virtualizer.getTotalSize()}px`,\n        }}\n      >\n        {config.seriesHeader}\n        {virtualizer.getVirtualItems().map((item) => {\n          return (\n            <div\n              key={item.key}\n              className={clsx(\n                item.index === activeItem &&\n                  !isItemSelected &&\n                  seriesItemHighlighted,\n              )}\n              style={{\n                position: 'absolute',\n                top: 0,\n                left: 0,\n                width: '100%',\n                height: `${item.size}px`,\n                transform: `translateY(${item.start}px)`,\n              }}\n            >\n              {seriesItemTemplate(data[item.index])}\n            </div>\n          );\n        })}\n      </div>\n    </div>\n  );\n};\n"],
-  "mappings": "AAsBM,cAmCA,YAnCA;AAtBN,SAAS,sBAAsB;AAC/B,OAAO,UAAU;AACjB,SAAS,UAAU,cAAwB;AAE3C,SAAS,yBAAyB;AAClC,SAAS,mBAAmB;AAC5B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEA,MAAM,SAAS,CAAoC,UAKpD;AACJ,QAAM,EAAE,MAAM,oBAAoB,SAAS,WAAW,IAAI;AAC1D,QAAM,SAAS,kBAAkB;AACjC,MAAI,YAAY,YAAY,KAAK,WAAW,GAAG;AAC7C,WAAO;AAAA,MACL,oBAAC,YAA6B,iBAAO,gBAAvB,cAAoC;AAAA,MAClD,oBAAC,YAAuB,6BAAmB,KAAK,CAAC,CAAC,KAApC,QAAsC;AAAA,IACtD;AAAA,EACF;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA;AAAA,EACF;AAEJ;AAEA,MAAM,wBAAwB,CAAoC,UAI5D;AACJ,QAAM,EAAE,MAAM,oBAAoB,WAAW,IAAI;AACjD,QAAM,iBAAiB,YAAY,CAAC,EAAE,aAAa,MAAM,CAAC,CAAC,YAAY;AACvE,QAAM,YAAY,OAAO,IAAI;AAE7B,QAAM,cAAc,eAAe;AAAA,IACjC,OAAO,KAAK;AAAA,IACZ,kBAAkB,MAAM,UAAU;AAAA,IAClC,cAAc,MAAM;AAAA,IACpB,cAAc;AAAA,IACd,YAAY;AAAA,IACZ,UAAU;AAAA,EACZ,CAAC;AACD,QAAM,SAAS,kBAAkB;AAEjC,SACE,oBAAC,SAAI,KAAK,WAAW,WAAW,eAC9B;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,MACX,OAAO;AAAA,QACL,QAAQ,GAAG,YAAY,aAAa,CAAC;AAAA,MACvC;AAAA,MAEC;AAAA,eAAO;AAAA,QACP,YAAY,gBAAgB,EAAE,IAAI,CAAC,SAAS;AAC3C,iBACE;AAAA,YAAC;AAAA;AAAA,cAEC,WAAW;AAAA,gBACT,KAAK,UAAU,cACb,CAAC,kBACD;AAAA,cACJ;AAAA,cACA,OAAO;AAAA,gBACL,UAAU;AAAA,gBACV,KAAK;AAAA,gBACL,MAAM;AAAA,gBACN,OAAO;AAAA,gBACP,QAAQ,GAAG,KAAK,IAAI;AAAA,gBACpB,WAAW,cAAc,KAAK,KAAK;AAAA,cACrC;AAAA,cAEC,6BAAmB,KAAK,KAAK,KAAK,CAAC;AAAA;AAAA,YAf/B,KAAK;AAAA,UAgBZ;AAAA,QAEJ,CAAC;AAAA;AAAA;AAAA,EACH,GACF;AAEJ;",
+  "sourcesContent": ["import { useVirtualizer } from '@tanstack/react-virtual';\nimport clsx from 'clsx';\nimport { Fragment, type JSX, useRef, useCallback } from 'react';\n\nimport {\n  MIN_TOOLTIP_WIDTH,\n  SCROLLBAR_WIDTH,\n  SYMBOL_AND_SPACING_WIDTH,\n  TOOLTIP_CONTENT_PADDING,\n  TOOLTIP_WRAPPER_PADDING,\n} from '../../constants.js';\nimport { useExternalConfig } from '../../contexts/ExternalConfigContext.js';\nimport { useScrollbarDetection } from '../../hooks/use-scrollbar-detection.js';\nimport { useSelector } from '../../selectors.js';\nimport {\n  seriesGridContainer,\n  seriesItemHighlighted,\n  seriesOverflowContainer,\n  seriesWrapper,\n} from '../../tooltip.sty.js';\nimport { estimateSeriesItemSize } from '../../utils/estimate-series-item-size.js';\nimport { calculateTotalWidth400 } from '../../utils/width-calculation.js';\n\nexport const Series = <T extends Record<string, unknown>>(props: {\n  data: T[];\n  seriesItemTemplate: (item: T) => JSX.Element;\n  variant?: 'shared' | 'single';\n  activeItem: number;\n}) => {\n  const { data, seriesItemTemplate, variant, activeItem } = props;\n  const config = useExternalConfig();\n\n  if (variant !== 'shared' || data.length === 1) {\n    return (\n      <div className={seriesGridContainer}>\n        <Fragment key=\"seriesHeader\">{config.seriesHeader}</Fragment>\n        <Fragment key=\"series\">{seriesItemTemplate(data[0])}</Fragment>\n      </div>\n    );\n  }\n\n  const maxContentWidthWithinFirstTenValues = Math.max(\n    ...data.slice(0, 10).map((item) => {\n      let nameWidth = 0;\n      if (Array.isArray(item.name)) {\n        nameWidth = calculateTotalWidth400(...item.name);\n      } else {\n        nameWidth = calculateTotalWidth400(item.name as string);\n      }\n\n      let valueWidth = 0;\n      if (item.value !== undefined && item.value !== null) {\n        const valueText = String(item.value);\n        const relativeValueText = item.relativeValue\n          ? String(item.relativeValue)\n          : '';\n        valueWidth = calculateTotalWidth400(valueText, relativeValueText);\n      }\n\n      return nameWidth + valueWidth;\n    }),\n  );\n  return (\n    <SeriesWithVirtualizer\n      data={data}\n      activeItem={activeItem}\n      seriesItemTemplate={seriesItemTemplate}\n      maxContentWidth={maxContentWidthWithinFirstTenValues}\n    />\n  );\n};\n\nconst SeriesWithVirtualizer = <T extends Record<string, unknown>>(props: {\n  data: T[];\n  seriesItemTemplate: (item: T) => JSX.Element;\n  activeItem: number;\n  maxContentWidth: number;\n}) => {\n  const { data, seriesItemTemplate, activeItem, maxContentWidth } = props;\n  const isItemSelected = useSelector(({ activeSeries }) => !!activeSeries);\n  const parentRef = useRef<HTMLElement | null>(null);\n  const config = useExternalConfig();\n  const isSeriesHeaderDisabled = config.seriesHeader?.props?.disabled;\n  const scrollbarRefCallback = useScrollbarDetection();\n\n  const combinedRefCallback = useCallback(\n    (element: HTMLElement | null) => {\n      parentRef.current = element;\n      scrollbarRefCallback(element);\n    },\n    [scrollbarRefCallback],\n  );\n\n  const virtualizer = useVirtualizer({\n    count: data.length,\n    getScrollElement: () => parentRef.current,\n    estimateSize: (index) =>\n      estimateSeriesItemSize(data[index], maxContainerWidth),\n    paddingStart: isSeriesHeaderDisabled ? 0 : 24,\n    paddingEnd: 0,\n    overscan: 3,\n  });\n  const spacings = TOOLTIP_WRAPPER_PADDING * 2 + SYMBOL_AND_SPACING_WIDTH;\n  const maxContainerWidth =\n    maxContentWidth + spacings + TOOLTIP_CONTENT_PADDING * 2;\n\n  return (\n    <div ref={combinedRefCallback} className={seriesWrapper}>\n      <div\n        className={seriesOverflowContainer}\n        style={{\n          height: `${virtualizer.getTotalSize()}px`,\n          width: `${Math.max(maxContainerWidth, MIN_TOOLTIP_WIDTH)}px`,\n        }}\n      >\n        {config.seriesHeader}\n        {virtualizer.getVirtualItems().map((item) => {\n          return (\n            <div\n              key={item.key}\n              className={clsx(\n                seriesGridContainer,\n                item.index === activeItem &&\n                  !isItemSelected &&\n                  seriesItemHighlighted,\n              )}\n              style={{\n                position: 'absolute',\n                top: 0,\n                left: 0,\n                width: `calc(100% - var(--needs-scrollbar-fix, 0) * ${SCROLLBAR_WIDTH}px)`,\n                height: `${item.size}px`,\n                transform: `translateY(${item.start}px)`,\n              }}\n            >\n              {seriesItemTemplate(data[item.index])}\n            </div>\n          );\n        })}\n      </div>\n    </div>\n  );\n};\n"],
+  "mappings": "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",
   "names": []
 }

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

@@ -1,7 +1,31 @@
 import { jsx } from "react/jsx-runtime";
-import { seriesActionHeader } from "../../tooltip.sty.js";
+import { assignInlineVars } from "@vanilla-extract/dynamic";
+import { Tooltip } from "../../../../../../overlays/tooltip/Tooltip.js";
+import { TOOLTIP_HEADER_PADDING } from "../../constants.js";
+import {
+  seriesActionHeader,
+  seriesActionHeaderMultiLine,
+  seriesActionHeaderMaxLinesVar,
+  TOOLTIP_MAX_WIDTH
+} from "../../tooltip.sty.js";
+import { formatSeriesNameForDisplay } from "./utils/format-series-name-for-display.js";
+import { calculateTotalWidth500 } from "../../utils/width-calculation.js";
 const SeriesActionsHeader = (props) => {
-  return /* @__PURE__ */ jsx("div", { className: seriesActionHeader, children: props.text }, "text");
+  const displayText = formatSeriesNameForDisplay(props.text);
+  const maxLines = 3;
+  const availableWidth = TOOLTIP_MAX_WIDTH - TOOLTIP_HEADER_PADDING * 2;
+  const totalTextWidth = calculateTotalWidth500(displayText);
+  const isTruncated = Math.ceil(totalTextWidth / availableWidth) > maxLines;
+  return /* @__PURE__ */ jsx(Tooltip, { text: displayText, disabled: !isTruncated, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: `${seriesActionHeader} ${seriesActionHeaderMultiLine}`,
+      style: assignInlineVars({
+        [seriesActionHeaderMaxLinesVar]: String(maxLines)
+      }),
+      children: displayText
+    }
+  ) });
 };
 export {
   SeriesActionsHeader

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../src/charts/core/components/overlay-tooltip/components/series/SeriesActionsHeader.tsx"],
-  "sourcesContent": ["import { seriesActionHeader } from '../../tooltip.sty.js';\n\nexport const SeriesActionsHeader = (props: { text: string }) => {\n  return (\n    <div key=\"text\" className={seriesActionHeader}>\n      {props.text}\n    </div>\n  );\n};\n"],
-  "mappings": "AAII;AAJJ,SAAS,0BAA0B;AAE5B,MAAM,sBAAsB,CAAC,UAA4B;AAC9D,SACE,oBAAC,SAAe,WAAW,oBACxB,gBAAM,QADA,MAET;AAEJ;",
+  "sourcesContent": ["import { assignInlineVars } from '@vanilla-extract/dynamic';\n\nimport { Tooltip } from '../../../../../../overlays/tooltip/Tooltip.js';\nimport { TOOLTIP_HEADER_PADDING } from '../../constants.js';\nimport {\n  seriesActionHeader,\n  seriesActionHeaderMultiLine,\n  seriesActionHeaderMaxLinesVar,\n  TOOLTIP_MAX_WIDTH,\n} from '../../tooltip.sty.js';\nimport type { SeriesName } from '../../types.js';\nimport { formatSeriesNameForDisplay } from './utils/format-series-name-for-display.js';\nimport { calculateTotalWidth500 } from '../../utils/width-calculation.js';\n\nexport const SeriesActionsHeader = (props: { text: SeriesName }) => {\n  const displayText = formatSeriesNameForDisplay(props.text);\n\n  const maxLines = 3;\n  const availableWidth = TOOLTIP_MAX_WIDTH - TOOLTIP_HEADER_PADDING * 2;\n  const totalTextWidth = calculateTotalWidth500(displayText);\n\n  const isTruncated = Math.ceil(totalTextWidth / availableWidth) > maxLines;\n\n  return (\n    <Tooltip text={displayText} disabled={!isTruncated}>\n      <div\n        className={`${seriesActionHeader} ${seriesActionHeaderMultiLine}`}\n        style={assignInlineVars({\n          [seriesActionHeaderMaxLinesVar]: String(maxLines),\n        })}\n      >\n        {displayText}\n      </div>\n    </Tooltip>\n  );\n};\n"],
+  "mappings": "AAyBM;AAzBN,SAAS,wBAAwB;AAEjC,SAAS,eAAe;AACxB,SAAS,8BAA8B;AACvC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,kCAAkC;AAC3C,SAAS,8BAA8B;AAEhC,MAAM,sBAAsB,CAAC,UAAgC;AAClE,QAAM,cAAc,2BAA2B,MAAM,IAAI;AAEzD,QAAM,WAAW;AACjB,QAAM,iBAAiB,oBAAoB,yBAAyB;AACpE,QAAM,iBAAiB,uBAAuB,WAAW;AAEzD,QAAM,cAAc,KAAK,KAAK,iBAAiB,cAAc,IAAI;AAEjE,SACE,oBAAC,WAAQ,MAAM,aAAa,UAAU,CAAC,aACrC;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,GAAG,kBAAkB,IAAI,2BAA2B;AAAA,MAC/D,OAAO,iBAAiB;AAAA,QACtB,CAAC,6BAA6B,GAAG,OAAO,QAAQ;AAAA,MAClD,CAAC;AAAA,MAEA;AAAA;AAAA,EACH,GACF;AAEJ;",
   "names": []
 }

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

@@ -1,17 +1,53 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Flex } from "../../../../../../layouts/flex/Flex.js";
+import { Tooltip } from "../../../../../../overlays/tooltip/Tooltip.js";
+import { TOOLTIP_CONTENT_PADDING, SCROLLBAR_WIDTH } from "../../constants.js";
+import { useExternalConfig } from "../../contexts/ExternalConfigContext.js";
 import { useDefaultLabels } from "../../hooks/useDefaultLabels.js";
-import { seriesHeader } from "../../tooltip.sty.js";
+import {
+  seriesHeader,
+  seriesHeaderName,
+  seriesHeaderValue,
+  seriesNameText,
+  seriesValueText,
+  TOOLTIP_MAX_WIDTH
+} from "../../tooltip.sty.js";
+import { isValidNumber } from "./utils/is-valid-number.js";
+import { getHeaderTruncatedText } from "../../utils/text-truncation-header.js";
 const SeriesHeader = (props) => {
   const { seriesLabel, valueLabel, disabled } = props;
+  const { truncationMode } = useExternalConfig();
   const labelFor = useDefaultLabels();
-  if (disabled || !labelFor) {
+  const maxWidth = (TOOLTIP_MAX_WIDTH - TOOLTIP_CONTENT_PADDING * 2) / 2;
+  if (disabled || !labelFor || !isValidNumber(maxWidth)) {
     return null;
   }
-  return /* @__PURE__ */ jsxs(Flex, { className: seriesHeader, gap: 0, children: [
-    /* @__PURE__ */ jsx(Flex, { flexItem: true, flexGrow: 10, children: labelFor("seriesLabel", seriesLabel) }),
-    /* @__PURE__ */ jsx(Flex, { flexItem: true, children: labelFor("valueLabel", valueLabel) })
-  ] });
+  const seriesLabelText = labelFor("seriesLabel", seriesLabel) ?? "";
+  const valueLabelText = labelFor("valueLabel", valueLabel) ?? "";
+  const truncatedSeriesLabel = getHeaderTruncatedText(
+    seriesLabelText,
+    maxWidth,
+    truncationMode
+  );
+  const truncatedValueLabel = getHeaderTruncatedText(
+    valueLabelText,
+    maxWidth,
+    truncationMode
+  );
+  const isSeriesLabelTruncated = truncatedSeriesLabel !== seriesLabelText;
+  const isValueLabelTruncated = truncatedValueLabel !== valueLabelText;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: seriesHeader,
+      style: {
+        maxWidth: `calc(100% - var(--needs-scrollbar-fix, 0) * ${SCROLLBAR_WIDTH}px)`
+      },
+      children: [
+        /* @__PURE__ */ jsx("div", { className: seriesHeaderName, children: /* @__PURE__ */ jsx(Tooltip, { text: seriesLabelText, disabled: !isSeriesLabelTruncated, children: /* @__PURE__ */ jsx("span", { className: seriesNameText, children: truncatedSeriesLabel }) }) }),
+        /* @__PURE__ */ jsx("div", { className: seriesHeaderValue, children: /* @__PURE__ */ jsx(Tooltip, { text: valueLabelText, disabled: !isValueLabelTruncated, children: /* @__PURE__ */ jsx("span", { className: seriesValueText, children: truncatedValueLabel }) }) })
+      ]
+    }
+  );
 };
 export {
   SeriesHeader

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../src/charts/core/components/overlay-tooltip/components/series/SeriesHeader.tsx"],
-  "sourcesContent": ["import { Flex } from '../../../../../../layouts/flex/Flex.js';\nimport { useDefaultLabels } from '../../hooks/useDefaultLabels.js';\nimport { seriesHeader } from '../../tooltip.sty.js';\n\nexport const SeriesHeader = (props: {\n  seriesLabel?: string;\n  valueLabel?: string;\n  disabled?: boolean;\n}) => {\n  const { seriesLabel, valueLabel, disabled } = props;\n  const labelFor = useDefaultLabels();\n  if (disabled || !labelFor) {\n    return null;\n  }\n\n  return (\n    <Flex className={seriesHeader} gap={0}>\n      <Flex flexItem flexGrow={10}>\n        {labelFor('seriesLabel', seriesLabel)}\n      </Flex>\n      <Flex flexItem>{labelFor('valueLabel', valueLabel)}</Flex>\n    </Flex>\n  );\n};\n"],
-  "mappings": "AAgBI,SACE,KADF;AAhBJ,SAAS,YAAY;AACrB,SAAS,wBAAwB;AACjC,SAAS,oBAAoB;AAEtB,MAAM,eAAe,CAAC,UAIvB;AACJ,QAAM,EAAE,aAAa,YAAY,SAAS,IAAI;AAC9C,QAAM,WAAW,iBAAiB;AAClC,MAAI,YAAY,CAAC,UAAU;AACzB,WAAO;AAAA,EACT;AAEA,SACE,qBAAC,QAAK,WAAW,cAAc,KAAK,GAClC;AAAA,wBAAC,QAAK,UAAQ,MAAC,UAAU,IACtB,mBAAS,eAAe,WAAW,GACtC;AAAA,IACA,oBAAC,QAAK,UAAQ,MAAE,mBAAS,cAAc,UAAU,GAAE;AAAA,KACrD;AAEJ;",
+  "sourcesContent": ["import { Tooltip } from '../../../../../../overlays/tooltip/Tooltip.js';\nimport { TOOLTIP_CONTENT_PADDING, SCROLLBAR_WIDTH } from '../../constants.js';\nimport { useExternalConfig } from '../../contexts/ExternalConfigContext.js';\nimport { useDefaultLabels } from '../../hooks/useDefaultLabels.js';\nimport {\n  seriesHeader,\n  seriesHeaderName,\n  seriesHeaderValue,\n  seriesNameText,\n  seriesValueText,\n  TOOLTIP_MAX_WIDTH,\n} from '../../tooltip.sty.js';\nimport { SeriesHeaderProps } from '../../types.js';\nimport { isValidNumber } from './utils/is-valid-number.js';\nimport { getHeaderTruncatedText } from '../../utils/text-truncation-header.js';\n\nexport const SeriesHeader = (props: SeriesHeaderProps) => {\n  const { seriesLabel, valueLabel, disabled } = props;\n  const { truncationMode } = useExternalConfig();\n  const labelFor = useDefaultLabels();\n  const maxWidth = (TOOLTIP_MAX_WIDTH - TOOLTIP_CONTENT_PADDING * 2) / 2;\n\n  if (disabled || !labelFor || !isValidNumber(maxWidth)) {\n    return null;\n  }\n\n  const seriesLabelText = labelFor('seriesLabel', seriesLabel) ?? '';\n  const valueLabelText = labelFor('valueLabel', valueLabel) ?? '';\n\n  const truncatedSeriesLabel = getHeaderTruncatedText(\n    seriesLabelText,\n    maxWidth,\n    truncationMode,\n  );\n  const truncatedValueLabel = getHeaderTruncatedText(\n    valueLabelText,\n    maxWidth,\n    truncationMode,\n  );\n\n  const isSeriesLabelTruncated = truncatedSeriesLabel !== seriesLabelText;\n  const isValueLabelTruncated = truncatedValueLabel !== valueLabelText;\n\n  return (\n    <div\n      className={seriesHeader}\n      style={{\n        maxWidth: `calc(100% - var(--needs-scrollbar-fix, 0) * ${SCROLLBAR_WIDTH}px)`,\n      }}\n    >\n      <div className={seriesHeaderName}>\n        <Tooltip text={seriesLabelText} disabled={!isSeriesLabelTruncated}>\n          <span className={seriesNameText}>{truncatedSeriesLabel}</span>\n        </Tooltip>\n      </div>\n      <div className={seriesHeaderValue}>\n        <Tooltip text={valueLabelText} disabled={!isValueLabelTruncated}>\n          <span className={seriesValueText}>{truncatedValueLabel}</span>\n        </Tooltip>\n      </div>\n    </div>\n  );\n};\n"],
+  "mappings": "AA4CI,SAQM,KARN;AA5CJ,SAAS,eAAe;AACxB,SAAS,yBAAyB,uBAAuB;AACzD,SAAS,yBAAyB;AAClC,SAAS,wBAAwB;AACjC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,qBAAqB;AAC9B,SAAS,8BAA8B;AAEhC,MAAM,eAAe,CAAC,UAA6B;AACxD,QAAM,EAAE,aAAa,YAAY,SAAS,IAAI;AAC9C,QAAM,EAAE,eAAe,IAAI,kBAAkB;AAC7C,QAAM,WAAW,iBAAiB;AAClC,QAAM,YAAY,oBAAoB,0BAA0B,KAAK;AAErE,MAAI,YAAY,CAAC,YAAY,CAAC,cAAc,QAAQ,GAAG;AACrD,WAAO;AAAA,EACT;AAEA,QAAM,kBAAkB,SAAS,eAAe,WAAW,KAAK;AAChE,QAAM,iBAAiB,SAAS,cAAc,UAAU,KAAK;AAE7D,QAAM,uBAAuB;AAAA,IAC3B;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACA,QAAM,sBAAsB;AAAA,IAC1B;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,QAAM,yBAAyB,yBAAyB;AACxD,QAAM,wBAAwB,wBAAwB;AAEtD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,MACX,OAAO;AAAA,QACL,UAAU,+CAA+C,eAAe;AAAA,MAC1E;AAAA,MAEA;AAAA,4BAAC,SAAI,WAAW,kBACd,8BAAC,WAAQ,MAAM,iBAAiB,UAAU,CAAC,wBACzC,8BAAC,UAAK,WAAW,gBAAiB,gCAAqB,GACzD,GACF;AAAA,QACA,oBAAC,SAAI,WAAW,mBACd,8BAAC,WAAQ,MAAM,gBAAgB,UAAU,CAAC,uBACxC,8BAAC,UAAK,WAAW,iBAAkB,+BAAoB,GACzD,GACF;AAAA;AAAA;AAAA,EACF;AAEJ;",
   "names": []
 }

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

@@ -1,29 +1,32 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import clsx from "clsx";
-import { isNil, noop } from "lodash-es";
+import { noop } from "lodash-es";
 import { forwardRef, useRef } from "react";
+import { useIntl } from "react-intl";
+import { useSeriesItemDisplayState } from "./hooks/use-series-item-display-state.js";
 import { SeriesActionsHeader } from "./SeriesActionsHeader.js";
-import { SeriesSymbol } from "./SeriesSymbol.js";
-import { Flex } from "../../../../../../layouts/flex/Flex.js";
+import { SeriesItemContent } from "./SeriesItemContent.js";
+import { COPY_TO_CLIPBOARD_MESSAGES } from "../../../copy-to-clipboard/copy-to-clipboard-messages.js";
 import { ChartActionsMenuAsync } from "../../../series-action/ChartActionsMenuAsync.js";
-import { getDefaultAction } from "../../../series-action/hooks/useDefaultAction.js";
+import { TOOLTIP_CONTENT_PADDING } from "../../constants.js";
 import { useExternalConfig } from "../../contexts/ExternalConfigContext.js";
+import { useDefaultLabels } from "../../hooks/useDefaultLabels.js";
 import { useSelector, useTooltipSnapshot } from "../../selectors.js";
 import {
-  relativeValueStyle,
-  seriesItem,
-  seriesItemText,
-  symbolWrapper,
   seriesItemActive,
-  symbolRight
+  seriesItemWrapper,
+  TOOLTIP_MAX_WIDTH
 } from "../../tooltip.sty.js";
 import { useTooltipReducer } from "../../useTooltipReducer.js";
+import { getDefaultAction } from "../../utils/get-copy-action.js";
 const ACTIVE_SERIES_HOVER_DELAY = 500;
 const SeriesItem = (props) => {
+  const intl = useIntl();
+  const { pinned } = useTooltipSnapshot();
+  const labelFor = useDefaultLabels();
   const internalProps = props;
   const { actions, ...restProps } = internalProps;
-  const { symbolPosition = "left" } = useExternalConfig();
-  const actionsMenuRef = useRef(null);
+  const { symbolPosition = "left", defaultActionsConfig } = useExternalConfig();
   const dispatch = useTooltipReducer();
   const isOpen = useSelector(({ activeSeries: activeSeries2 }) => activeSeries2 === props.name);
   const { activeSeries } = useTooltipSnapshot();
@@ -48,12 +51,24 @@ const SeriesItem = (props) => {
       payload: { activeSeries: props.name }
     })();
   };
+  const defaultActions = !pinned ? null : [...defaultActionsConfig.entries()].map(([accessor, config]) => {
+    const message = intl.formatMessage(
+      config.messageLabel ?? COPY_TO_CLIPBOARD_MESSAGES.copyField,
+      {
+        field: labelFor?.(
+          config.field,
+          config.customLabel
+        )?.toLocaleLowerCase()
+      }
+    );
+    return getDefaultAction(props, accessor, message);
+  });
   return /* @__PURE__ */ jsx(
     "div",
     {
       className: clsx(
         activeSeries === props.name && seriesItemActive,
-        seriesItem({ symbolPosition })
+        seriesItemWrapper
       ),
       role: "none",
       onClick: handleClick,
@@ -62,109 +77,53 @@ const SeriesItem = (props) => {
       children: /* @__PURE__ */ jsx(
         ChartActionsMenuAsync,
         {
-          ref: actionsMenuRef,
-          defaultActions: getDefaultAction(props),
+          defaultActions,
           actions: asyncActions,
           isOpen,
           header: /* @__PURE__ */ jsx(SeriesActionsHeader, { text: props.name }),
           onActionSelected: triggerLeftTooltip,
           delay: menuDelayRef.current,
-          children: symbolPosition === "right" ? /* @__PURE__ */ jsx(WithRightSymbol, { ...restProps }) : /* @__PURE__ */ jsx(WithLeftSymbol, { ...restProps })
+          children: /* @__PURE__ */ jsx(WithSymbol, { symbolPosition, ...restProps })
         }
       )
     }
   );
 };
-const WithRightSymbol = forwardRef(
+const WithSymbol = forwardRef(
   (props, ref) => {
+    const containerWidth = TOOLTIP_MAX_WIDTH - TOOLTIP_CONTENT_PADDING;
+    const { color, multiLine = false, name, shape, symbol, icon } = props;
+    const { symbolPosition } = props;
     const {
-      name,
-      value,
-      color,
-      relativeValue,
-      valueUnit,
-      relativeValueUnit,
-      shape,
-      icon,
-      symbol
-    } = props;
-    return /* @__PURE__ */ jsxs(Flex, { gap: 0, ref, children: [
-      /* @__PURE__ */ jsx(Flex, { flexItem: true, flexGrow: 10, gap: 0, className: seriesItemText, children: name }),
-      /* @__PURE__ */ jsx(Flex, { flexItem: true, gap: 0, children: /* @__PURE__ */ jsxs(Flex, { gap: 0, children: [
-        /* @__PURE__ */ jsxs(Flex, { flexItem: true, gap: 0, className: seriesItemText, children: [
-          `${value}`,
-          valueUnit && `${" " + valueUnit}`
-        ] }),
-        isNil(relativeValue) || /* @__PURE__ */ jsxs(
-          Flex,
-          {
-            flexItem: true,
-            gap: 0,
-            className: clsx(relativeValueStyle, seriesItemText),
-            children: [
-              relativeValue,
-              relativeValueUnit
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsx(Flex, { className: clsx(symbolWrapper, symbolRight), gap: 0, children: /* @__PURE__ */ jsx(
-          SeriesSymbol,
-          {
-            color,
-            shape,
-            symbol,
-            icon
-          }
-        ) })
-      ] }) })
-    ] });
-  }
-);
-const WithLeftSymbol = forwardRef(
-  (props, ref) => {
-    const {
-      name,
-      value,
-      color,
-      relativeValue,
-      valueUnit,
-      relativeValueUnit,
-      symbol,
-      shape,
-      icon
-    } = props;
-    return /* @__PURE__ */ jsxs(Flex, { gap: 0, ref, children: [
-      /* @__PURE__ */ jsx(Flex, { flexItem: true, flexGrow: 10, gap: 0, children: /* @__PURE__ */ jsxs(Flex, { gap: 0, children: [
-        /* @__PURE__ */ jsx(Flex, { className: symbolWrapper, gap: 0, children: /* @__PURE__ */ jsx(
-          SeriesSymbol,
-          {
-            color,
-            shape,
-            symbol,
-            icon
-          }
-        ) }),
-        /* @__PURE__ */ jsx(Flex, { flexItem: true, gap: 0, className: seriesItemText, children: name })
-      ] }) }),
-      /* @__PURE__ */ jsx(Flex, { flexItem: true, gap: 0, children: /* @__PURE__ */ jsxs(Flex, { gap: 0, children: [
-        /* @__PURE__ */ jsxs(Flex, { flexItem: true, gap: 0, className: seriesItemText, children: [
-          `${value}`,
-          valueUnit && `${" " + valueUnit}`
-        ] }),
-        isNil(relativeValue) || /* @__PURE__ */ jsxs(
-          Flex,
-          {
-            flexItem: true,
-            gap: 0,
-            className: clsx(relativeValueStyle, seriesItemText),
-            children: [
-              relativeValue,
-              relativeValueUnit
-            ]
-          }
-        )
-      ] }) })
-    ] });
+      nameText,
+      displayValueText,
+      displayRelativeValueText,
+      fullValueText,
+      fullRelativeValueText,
+      nameTextStyle,
+      nameStyle
+    } = useSeriesItemDisplayState({ ...props, maxWidth: containerWidth });
+    return /* @__PURE__ */ jsx(
+      SeriesItemContent,
+      {
+        ref,
+        color,
+        name,
+        nameText,
+        displayValueText,
+        displayRelativeValueText,
+        fullValueText,
+        fullRelativeValueText,
+        nameTextStyle,
+        nameStyle,
+        multiLine,
+        symbolPosition,
+        shape,
+        symbol,
+        icon,
+        maxWidth: containerWidth
+      }
+    );
   }
 );
 export {