@dynatrace/strato-components 3.5.0 → 3.6.0

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

@@ -1,10 +1,10 @@
 import "./Header.css";
-var headerContainer = "_1ldhlar2-3-5-0";
-var headerSubText = "_1ldhlar5-3-5-0";
-var headerText = "_1ldhlar3-3-5-0";
-var headerTextMultiLine = "_1ldhlar4-3-5-0";
-var headerWidthVar = "var(--_1ldhlar1-3-5-0)";
-var maxLinesVar = "var(--_1ldhlar0-3-5-0)";
+var headerContainer = "_1ldhlar2-3-6-0";
+var headerSubText = "_1ldhlar5-3-6-0";
+var headerText = "_1ldhlar3-3-6-0";
+var headerTextMultiLine = "_1ldhlar4-3-6-0";
+var headerWidthVar = "var(--_1ldhlar1-3-6-0)";
+var maxLinesVar = "var(--_1ldhlar0-3-6-0)";
 export {
   headerContainer,
   headerSubText,

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-5-0';\nexport var headerSubText = '_1ldhlar5-3-5-0';\nexport var headerText = '_1ldhlar3-3-5-0';\nexport var headerTextMultiLine = '_1ldhlar4-3-5-0';\nexport var headerWidthVar = 'var(--_1ldhlar1-3-5-0)';\nexport var maxLinesVar = 'var(--_1ldhlar0-3-5-0)';"],
+  "sourcesContent": ["import './Header.css';\nexport var headerContainer = '_1ldhlar2-3-6-0';\nexport var headerSubText = '_1ldhlar5-3-6-0';\nexport var headerText = '_1ldhlar3-3-6-0';\nexport var headerTextMultiLine = '_1ldhlar4-3-6-0';\nexport var headerWidthVar = 'var(--_1ldhlar1-3-6-0)';\nexport var maxLinesVar = 'var(--_1ldhlar0-3-6-0)';"],
   "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/series/SeriesItem.js

@@ -7,6 +7,7 @@ import { ChevronRightSmallIcon } from "@dynatrace/strato-icons";
 import { useSeriesItemDisplayState } from "./hooks/use-series-item-display-state.js";
 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";
@@ -23,18 +24,18 @@ import {
 } from "../../tooltip.sty.js";
 import { useTooltipReducer } from "../../useTooltipReducer.js";
 import { getDefaultAction } from "../../utils/get-copy-action.js";
-const ACTIVE_SERIES_HOVER_DELAY = 500;
+const ACTIVE_SERIES_HOVER_DELAY = 300;
 const CHEVRON_SLOT_WIDTH = 20;
 const SeriesItem = (props) => {
   const intl = useIntl();
   const { pinned } = useTooltipSnapshot();
   const labelFor = useDefaultLabels();
-  const internalProps = props;
-  const { actions, ...restProps } = internalProps;
+  const { actions, ...restProps } = props;
   const { symbolPosition = "left", defaultActionsConfig } = useExternalConfig();
   const hasActions = actions !== void 0 || defaultActionsConfig.size > 0;
   const dispatch = useTooltipReducer();
-  const isOpen = useSelector(({ activeSeries: activeSeries2 }) => activeSeries2 === props.name);
+  const rowId = useId();
+  const isOpen = useSelector(({ activeSeries: activeSeries2 }) => activeSeries2 === rowId);
   const { activeSeries } = useTooltipSnapshot();
   const menuDelayRef = useRef(0);
   const asyncActions = actions ? async () => actions() : void 0;
@@ -47,14 +48,14 @@ const SeriesItem = (props) => {
     menuDelayRef.current = 0;
     dispatch({
       type: "SET_ACTIVE_SERIES",
-      payload: { activeSeries: props.name }
+      payload: { activeSeries: rowId }
     })();
   };
   const handlePointerMove = () => {
     menuDelayRef.current = ACTIVE_SERIES_HOVER_DELAY;
     dispatch({
       type: "SET_ACTIVE_SERIES",
-      payload: { activeSeries: props.name }
+      payload: { activeSeries: rowId }
     })();
   };
   const defaultActions = !pinned ? null : [...defaultActionsConfig.entries()].map(([accessor, config]) => {
@@ -73,12 +74,13 @@ const SeriesItem = (props) => {
     "button",
     {
       className: clsx(
-        activeSeries === props.name && seriesItemActive,
+        activeSeries === rowId && seriesItemActive,
         seriesItemWrapper
       ),
       onClick: handleClick,
       onPointerMove: handlePointerMove,
       onKeyDown: noop,
+      "data-testid": "menu-trigger",
       children: /* @__PURE__ */ jsx(
         ChartActionsMenuAsync,
         {
@@ -105,11 +107,25 @@ const SeriesItem = (props) => {
 const WithSymbol = forwardRef(
   (props, ref) => {
     const containerWidth = TOOLTIP_MAX_WIDTH - TOOLTIP_CONTENT_PADDING;
-    const { color, multiLine = false, name, shape, icon, symbol } = props;
+    const {
+      color,
+      multiLine = false,
+      name,
+      description,
+      shape,
+      iconStyle,
+      icon,
+      symbol
+    } = props;
     const { symbolPosition, hasActions } = props;
     const seriesContentMaxWidth = hasActions ? containerWidth - CHEVRON_SLOT_WIDTH : containerWidth;
     const {
       nameText,
+      descriptionText,
+      fullDescriptionText,
+      isDescriptionTruncated,
+      descriptionShouldUseMultiLineCss,
+      descriptionMultiLineMode,
       displayValueText,
       displayRelativeValueText,
       fullValueText,
@@ -126,7 +142,13 @@ const WithSymbol = forwardRef(
         {
           color,
           name,
+          description,
           nameText,
+          descriptionText,
+          fullDescriptionText,
+          isDescriptionTruncated,
+          descriptionShouldUseMultiLineCss,
+          descriptionMultiLineMode,
           displayValueText,
           displayRelativeValueText,
           fullValueText,
@@ -137,6 +159,7 @@ const WithSymbol = forwardRef(
           symbolPosition,
           shape,
           symbol,
+          iconStyle,
           icon,
           hasChevron: hasActions,
           maxWidth: seriesContentMaxWidth

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 { 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 = 500;\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 internalProps = props as InternalSeriesItemProps;\n  const { actions, ...restProps } = internalProps;\n  const { symbolPosition = 'left', defaultActionsConfig } = useExternalConfig();\n  const hasActions = actions !== undefined || defaultActionsConfig.size > 0;\n  const dispatch = useTooltipReducer();\n  const isOpen = useSelector(({ activeSeries }) => activeSeries === props.name);\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: props.name },\n    })();\n  };\n  const handlePointerMove = () => {\n    menuDelayRef.current = ACTIVE_SERIES_HOVER_DELAY;\n    dispatch({\n      type: 'SET_ACTIVE_SERIES',\n      payload: { activeSeries: props.name },\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 === props.name && seriesItemActive,\n        seriesItemWrapper,\n      )}\n      onClick={handleClick}\n      onPointerMove={handlePointerMove}\n      onKeyDown={noop}\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 { color, multiLine = false, name, shape, icon, symbol } = props;\n    const { symbolPosition, hasActions } = props;\n    const seriesContentMaxWidth = hasActions\n      ? containerWidth - CHEVRON_SLOT_WIDTH\n      : containerWidth;\n    const {\n      nameText,\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          nameText={nameText}\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          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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",
+  "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 = 300;\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;",
   "names": ["activeSeries"]
 }

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

@@ -9,6 +9,9 @@ import { GAP_BETWEEN_COLUMNS } from "../../constants.js";
 import {
   multiLineName,
   relativeValueStyle,
+  seriesDescriptionText,
+  seriesDescriptionTextMultiLine,
+  seriesDescriptionTextMultiLineWrap,
   seriesItem,
   seriesItemMaxWidthVar,
   seriesItemText,
@@ -22,6 +25,11 @@ const SeriesItemContent = forwardRef((props, ref) => {
   const {
     color,
     nameText,
+    descriptionText,
+    fullDescriptionText,
+    isDescriptionTruncated,
+    descriptionShouldUseMultiLineCss,
+    descriptionMultiLineMode = "clamp",
     displayValueText,
     displayRelativeValueText,
     fullValueText,
@@ -67,6 +75,12 @@ const SeriesItemContent = forwardRef((props, ref) => {
       }
     ) });
   };
+  const getDescriptionClassName = () => {
+    if (!descriptionShouldUseMultiLineCss) {
+      return seriesDescriptionText;
+    }
+    return descriptionMultiLineMode === "wrap" ? seriesDescriptionTextMultiLineWrap : seriesDescriptionTextMultiLine;
+  };
   const renderValue = () => {
     const isValueTruncated = displayValueText !== fullValueText;
     const isRelativeValueTruncated = displayRelativeValueText !== fullRelativeValueText;
@@ -93,12 +107,33 @@ const SeriesItemContent = forwardRef((props, ref) => {
       }),
       children: [
         /* @__PURE__ */ jsx("div", { style: { gridArea: "symbol" }, children: hasSymbol ? renderSymbol() : null }),
-        /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsxs(
           "div",
           {
             className: seriesNameCell,
-            style: { gridArea: "name", marginRight: `${GAP_BETWEEN_COLUMNS}px` },
-            children: renderNameContent()
+            style: {
+              gridArea: "name",
+              marginRight: `${GAP_BETWEEN_COLUMNS}px`,
+              flexDirection: "column"
+            },
+            children: [
+              renderNameContent(),
+              descriptionText !== void 0 && /* @__PURE__ */ jsx(
+                Tooltip,
+                {
+                  text: fullDescriptionText ?? "",
+                  disabled: !isDescriptionTruncated,
+                  children: /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: getDescriptionClassName(),
+                      style: descriptionShouldUseMultiLineCss ? nameStyle : void 0,
+                      children: descriptionText
+                    }
+                  )
+                }
+              )
+            ]
           }
         ),
         /* @__PURE__ */ jsx("div", { className: seriesValueCell, style: { gridArea: "value" }, children: renderValue() })

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../src/charts/core/components/overlay-tooltip/components/series/SeriesItemContent.tsx"],
-  "sourcesContent": ["import { assignInlineVars } from '@vanilla-extract/dynamic';\nimport clsx from 'clsx';\nimport { isEmpty } from 'lodash-es';\nimport { CSSProperties, forwardRef } from 'react';\n\nimport { SeriesSymbol } from './SeriesSymbol.js';\nimport { Tooltip } from '../../../../../../overlays/tooltip/Tooltip.js';\nimport { GAP_BETWEEN_COLUMNS } from '../../constants.js';\nimport {\n  multiLineName,\n  relativeValueStyle,\n  seriesItem,\n  seriesItemMaxWidthVar,\n  seriesItemText,\n  seriesNameCell,\n  seriesNameText,\n  seriesValueCell,\n  spaceSavedForSymbolVar,\n  symbolWrapper,\n} from '../../tooltip.sty.js';\nimport { InternalSeriesItemProps } from '../../types/series.js';\n\ninterface SeriesItemContentProps\n  extends Omit<InternalSeriesItemProps, 'value'> {\n  nameText: string | string[];\n  displayValueText: string;\n  displayRelativeValueText?: string;\n  fullValueText: string;\n  fullRelativeValueText?: string;\n  nameTextStyle: string;\n  nameStyle: CSSProperties;\n  multiLine: boolean;\n  symbolPosition: 'left' | 'right';\n  hasChevron?: boolean;\n  maxWidth?: number;\n}\n\nexport const SeriesItemContent = forwardRef<\n  HTMLDivElement,\n  SeriesItemContentProps\n>((props, ref) => {\n  const {\n    color,\n    nameText,\n    displayValueText,\n    displayRelativeValueText,\n    fullValueText,\n    fullRelativeValueText,\n    nameTextStyle,\n    nameStyle,\n    multiLine = false,\n    symbolPosition,\n    shape,\n    symbol,\n    icon,\n    iconStyle,\n    maxWidth,\n    hasChevron = false,\n  } = props;\n  const isRightPosition = symbolPosition === 'right';\n  const hasSymbol =\n    (color !== undefined && !isEmpty(color)) ||\n    icon !== undefined ||\n    symbol !== undefined;\n  const renderNameContent = () => {\n    if (Array.isArray(nameText) && multiLine) {\n      return (\n        <ul className={multiLineName}>\n          {nameText.map((line) => {\n            return (\n              <li\n                key={`${line}`}\n                className={nameTextStyle}\n                style={{ ...nameStyle, padding: 0 }}\n              >\n                <span className={seriesNameText}>{line}</span>\n              </li>\n            );\n          })}\n        </ul>\n      );\n    }\n\n    return (\n      <span className={nameTextStyle} style={nameStyle}>\n        <span className={seriesNameText}>{nameText}</span>\n      </span>\n    );\n  };\n\n  const renderSymbol = () => {\n    return (\n      <span className={symbolWrapper({ isRight: isRightPosition })}>\n        <SeriesSymbol\n          color={color}\n          shape={shape}\n          symbol={symbol}\n          icon={icon}\n          iconStyle={iconStyle}\n        />\n      </span>\n    );\n  };\n\n  const renderValue = () => {\n    const isValueTruncated = displayValueText !== fullValueText;\n    const isRelativeValueTruncated =\n      displayRelativeValueText !== fullRelativeValueText;\n\n    return (\n      <>\n        <Tooltip text={fullValueText} disabled={!isValueTruncated}>\n          <span className={seriesItemText}>{displayValueText}</span>\n        </Tooltip>\n        {displayRelativeValueText && (\n          <Tooltip\n            text={fullRelativeValueText}\n            disabled={!isRelativeValueTruncated}\n          >\n            <span className={clsx(relativeValueStyle, seriesItemText)}>\n              {displayRelativeValueText}\n            </span>\n          </Tooltip>\n        )}\n      </>\n    );\n  };\n\n  return (\n    <div\n      ref={ref}\n      className={seriesItem({ symbolPosition, hasChevron })}\n      style={assignInlineVars({\n        [seriesItemMaxWidthVar]: `${maxWidth}px`,\n        [spaceSavedForSymbolVar]: hasSymbol ? '24px' : '6px',\n      })}\n    >\n      <div style={{ gridArea: 'symbol' }}>\n        {hasSymbol ? renderSymbol() : null}\n      </div>\n      <div\n        className={seriesNameCell}\n        style={{ gridArea: 'name', marginRight: `${GAP_BETWEEN_COLUMNS}px` }}\n      >\n        {renderNameContent()}\n      </div>\n      <div className={seriesValueCell} style={{ gridArea: 'value' }}>\n        {renderValue()}\n      </div>\n    </div>\n  );\n});\n"],
-  "mappings": "AA2EgB,SAmCV,UAnCU,KAmCV,YAnCU;AA3EhB,SAAS,wBAAwB;AACjC,OAAO,UAAU;AACjB,SAAS,eAAe;AACxB,SAAwB,kBAAkB;AAE1C,SAAS,oBAAoB;AAC7B,SAAS,eAAe;AACxB,SAAS,2BAA2B;AACpC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAkBA,MAAM,oBAAoB,WAG/B,CAAC,OAAO,QAAQ;AAChB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,YAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,aAAa;AAAA,EACf,IAAI;AACJ,QAAM,kBAAkB,mBAAmB;AAC3C,QAAM,YACH,UAAU,UAAa,CAAC,QAAQ,KAAK,KACtC,SAAS,UACT,WAAW;AACb,QAAM,oBAAoB,MAAM;AAC9B,QAAI,MAAM,QAAQ,QAAQ,KAAK,WAAW;AACxC,aACE,oBAAC,QAAG,WAAW,eACZ,mBAAS,IAAI,CAAC,SAAS;AACtB,eACE;AAAA,UAAC;AAAA;AAAA,YAEC,WAAW;AAAA,YACX,OAAO,EAAE,GAAG,WAAW,SAAS,EAAE;AAAA,YAElC,8BAAC,UAAK,WAAW,gBAAiB,gBAAK;AAAA;AAAA,UAJlC,GAAG,IAAI;AAAA,QAKd;AAAA,MAEJ,CAAC,GACH;AAAA,IAEJ;AAEA,WACE,oBAAC,UAAK,WAAW,eAAe,OAAO,WACrC,8BAAC,UAAK,WAAW,gBAAiB,oBAAS,GAC7C;AAAA,EAEJ;AAEA,QAAM,eAAe,MAAM;AACzB,WACE,oBAAC,UAAK,WAAW,cAAc,EAAE,SAAS,gBAAgB,CAAC,GACzD;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,IACF,GACF;AAAA,EAEJ;AAEA,QAAM,cAAc,MAAM;AACxB,UAAM,mBAAmB,qBAAqB;AAC9C,UAAM,2BACJ,6BAA6B;AAE/B,WACE,iCACE;AAAA,0BAAC,WAAQ,MAAM,eAAe,UAAU,CAAC,kBACvC,8BAAC,UAAK,WAAW,gBAAiB,4BAAiB,GACrD;AAAA,MACC,4BACC;AAAA,QAAC;AAAA;AAAA,UACC,MAAM;AAAA,UACN,UAAU,CAAC;AAAA,UAEX,8BAAC,UAAK,WAAW,KAAK,oBAAoB,cAAc,GACrD,oCACH;AAAA;AAAA,MACF;AAAA,OAEJ;AAAA,EAEJ;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,WAAW,WAAW,EAAE,gBAAgB,WAAW,CAAC;AAAA,MACpD,OAAO,iBAAiB;AAAA,QACtB,CAAC,qBAAqB,GAAG,GAAG,QAAQ;AAAA,QACpC,CAAC,sBAAsB,GAAG,YAAY,SAAS;AAAA,MACjD,CAAC;AAAA,MAED;AAAA,4BAAC,SAAI,OAAO,EAAE,UAAU,SAAS,GAC9B,sBAAY,aAAa,IAAI,MAChC;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,WAAW;AAAA,YACX,OAAO,EAAE,UAAU,QAAQ,aAAa,GAAG,mBAAmB,KAAK;AAAA,YAElE,4BAAkB;AAAA;AAAA,QACrB;AAAA,QACA,oBAAC,SAAI,WAAW,iBAAiB,OAAO,EAAE,UAAU,QAAQ,GACzD,sBAAY,GACf;AAAA;AAAA;AAAA,EACF;AAEJ,CAAC;",
+  "sourcesContent": ["import { assignInlineVars } from '@vanilla-extract/dynamic';\nimport clsx from 'clsx';\nimport { isEmpty } from 'lodash-es';\nimport { CSSProperties, forwardRef } from 'react';\n\nimport { SeriesSymbol } from './SeriesSymbol.js';\nimport { Tooltip } from '../../../../../../overlays/tooltip/Tooltip.js';\nimport { GAP_BETWEEN_COLUMNS } from '../../constants.js';\nimport {\n  multiLineName,\n  relativeValueStyle,\n  seriesDescriptionText,\n  seriesDescriptionTextMultiLine,\n  seriesDescriptionTextMultiLineWrap,\n  seriesItem,\n  seriesItemMaxWidthVar,\n  seriesItemText,\n  seriesNameCell,\n  seriesNameText,\n  seriesValueCell,\n  spaceSavedForSymbolVar,\n  symbolWrapper,\n} from '../../tooltip.sty.js';\nimport { InternalSeriesItemProps } from '../../types/series.js';\n\ninterface SeriesItemContentProps\n  extends Omit<InternalSeriesItemProps, 'value'> {\n  nameText: string | string[];\n  descriptionText?: string;\n  fullDescriptionText?: string;\n  isDescriptionTruncated?: boolean;\n  descriptionShouldUseMultiLineCss?: boolean;\n  descriptionMultiLineMode?: 'clamp' | 'wrap';\n  displayValueText: string;\n  displayRelativeValueText?: string;\n  fullValueText: string;\n  fullRelativeValueText?: string;\n  nameTextStyle: string;\n  nameStyle: CSSProperties;\n  multiLine: boolean;\n  symbolPosition: 'left' | 'right';\n  hasChevron?: boolean;\n  maxWidth?: number;\n}\n\nexport const SeriesItemContent = forwardRef<\n  HTMLDivElement,\n  SeriesItemContentProps\n>((props, ref) => {\n  const {\n    color,\n    nameText,\n    descriptionText,\n    fullDescriptionText,\n    isDescriptionTruncated,\n    descriptionShouldUseMultiLineCss,\n    descriptionMultiLineMode = 'clamp',\n    displayValueText,\n    displayRelativeValueText,\n    fullValueText,\n    fullRelativeValueText,\n    nameTextStyle,\n    nameStyle,\n    multiLine = false,\n    symbolPosition,\n    shape,\n    symbol,\n    icon,\n    iconStyle,\n    maxWidth,\n    hasChevron = false,\n  } = props;\n  const isRightPosition = symbolPosition === 'right';\n  const hasSymbol =\n    (color !== undefined && !isEmpty(color)) ||\n    icon !== undefined ||\n    symbol !== undefined;\n  const renderNameContent = () => {\n    if (Array.isArray(nameText) && multiLine) {\n      return (\n        <ul className={multiLineName}>\n          {nameText.map((line) => {\n            return (\n              <li\n                key={`${line}`}\n                className={nameTextStyle}\n                style={{ ...nameStyle, padding: 0 }}\n              >\n                <span className={seriesNameText}>{line}</span>\n              </li>\n            );\n          })}\n        </ul>\n      );\n    }\n\n    return (\n      <span className={nameTextStyle} style={nameStyle}>\n        <span className={seriesNameText}>{nameText}</span>\n      </span>\n    );\n  };\n\n  const renderSymbol = () => {\n    return (\n      <span className={symbolWrapper({ isRight: isRightPosition })}>\n        <SeriesSymbol\n          color={color}\n          shape={shape}\n          symbol={symbol}\n          icon={icon}\n          iconStyle={iconStyle}\n        />\n      </span>\n    );\n  };\n\n  const getDescriptionClassName = () => {\n    if (!descriptionShouldUseMultiLineCss) {\n      return seriesDescriptionText;\n    }\n    return descriptionMultiLineMode === 'wrap'\n      ? seriesDescriptionTextMultiLineWrap\n      : seriesDescriptionTextMultiLine;\n  };\n\n  const renderValue = () => {\n    const isValueTruncated = displayValueText !== fullValueText;\n    const isRelativeValueTruncated =\n      displayRelativeValueText !== fullRelativeValueText;\n\n    return (\n      <>\n        <Tooltip text={fullValueText} disabled={!isValueTruncated}>\n          <span className={seriesItemText}>{displayValueText}</span>\n        </Tooltip>\n        {displayRelativeValueText && (\n          <Tooltip\n            text={fullRelativeValueText}\n            disabled={!isRelativeValueTruncated}\n          >\n            <span className={clsx(relativeValueStyle, seriesItemText)}>\n              {displayRelativeValueText}\n            </span>\n          </Tooltip>\n        )}\n      </>\n    );\n  };\n\n  return (\n    <div\n      ref={ref}\n      className={seriesItem({ symbolPosition, hasChevron })}\n      style={assignInlineVars({\n        [seriesItemMaxWidthVar]: `${maxWidth}px`,\n        [spaceSavedForSymbolVar]: hasSymbol ? '24px' : '6px',\n      })}\n    >\n      <div style={{ gridArea: 'symbol' }}>\n        {hasSymbol ? renderSymbol() : null}\n      </div>\n      <div\n        className={seriesNameCell}\n        style={{\n          gridArea: 'name',\n          marginRight: `${GAP_BETWEEN_COLUMNS}px`,\n          flexDirection: 'column',\n        }}\n      >\n        {renderNameContent()}\n        {descriptionText !== undefined && (\n          <Tooltip\n            text={fullDescriptionText ?? ''}\n            disabled={!isDescriptionTruncated}\n          >\n            <span\n              className={getDescriptionClassName()}\n              style={descriptionShouldUseMultiLineCss ? nameStyle : undefined}\n            >\n              {descriptionText}\n            </span>\n          </Tooltip>\n        )}\n      </div>\n      <div className={seriesValueCell} style={{ gridArea: 'value' }}>\n        {renderValue()}\n      </div>\n    </div>\n  );\n});\n"],
+  "mappings": "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",
   "names": []
 }

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

@@ -32,7 +32,7 @@ const SeriesSymbol = (props) => {
   if (!props.color) {
     return null;
   }
-  return /* @__PURE__ */ jsx(ShapeIcon, { color: props.color, shape: props.shape || "circle" });
+  return /* @__PURE__ */ jsx(ShapeIcon, { color: props.color, shape: props.shape || "single" });
 };
 export {
   SeriesSymbol

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../src/charts/core/components/overlay-tooltip/components/series/SeriesSymbol.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport type { JSX } from 'react';\n\nimport { customSymbol, customSymbolLarge } from './seriesSymbol.sty.js';\nimport { ShapeIcon } from '../../../shape/ShapeIcon.js';\nimport { VariantShape } from '../../../shape/type.js';\nimport type { IconStyle } from '../../types/series.js';\n\nexport const SeriesSymbol = (props: {\n  color?: string;\n  shape?: VariantShape;\n  symbol?: string;\n  icon?: JSX.Element;\n  iconStyle?: IconStyle;\n}) => {\n  if (props.icon) {\n    return (\n      <span\n        aria-hidden=\"true\"\n        className={clsx(\n          customSymbol,\n          props.iconStyle === 'large' && customSymbolLarge,\n        )}\n      >\n        {props.icon}\n      </span>\n    );\n  }\n\n  if (props.symbol && props.symbol.trim() !== '') {\n    return (\n      <span\n        className={clsx(\n          customSymbol,\n          props.iconStyle === 'large' && customSymbolLarge,\n        )}\n        aria-hidden=\"true\"\n      >\n        {props.symbol}\n      </span>\n    );\n  }\n\n  if (!props.color) {\n    return null;\n  }\n\n  return <ShapeIcon color={props.color} shape={props.shape || 'circle'} />;\n};\n"],
+  "sourcesContent": ["import clsx from 'clsx';\nimport type { JSX } from 'react';\n\nimport { customSymbol, customSymbolLarge } from './seriesSymbol.sty.js';\nimport { ShapeIcon } from '../../../shape/ShapeIcon.js';\nimport { VariantShape } from '../../../shape/type.js';\nimport type { IconStyle } from '../../types/series.js';\n\nexport const SeriesSymbol = (props: {\n  color?: string;\n  shape?: VariantShape;\n  symbol?: string;\n  icon?: JSX.Element;\n  iconStyle?: IconStyle;\n}) => {\n  if (props.icon) {\n    return (\n      <span\n        aria-hidden=\"true\"\n        className={clsx(\n          customSymbol,\n          props.iconStyle === 'large' && customSymbolLarge,\n        )}\n      >\n        {props.icon}\n      </span>\n    );\n  }\n\n  if (props.symbol && props.symbol.trim() !== '') {\n    return (\n      <span\n        className={clsx(\n          customSymbol,\n          props.iconStyle === 'large' && customSymbolLarge,\n        )}\n        aria-hidden=\"true\"\n      >\n        {props.symbol}\n      </span>\n    );\n  }\n\n  if (!props.color) {\n    return null;\n  }\n\n  return <ShapeIcon color={props.color} shape={props.shape || 'single'} />;\n};\n"],
   "mappings": "AAiBM;AAjBN,OAAO,UAAU;AAGjB,SAAS,cAAc,yBAAyB;AAChD,SAAS,iBAAiB;AAInB,MAAM,eAAe,CAAC,UAMvB;AACJ,MAAI,MAAM,MAAM;AACd,WACE;AAAA,MAAC;AAAA;AAAA,QACC,eAAY;AAAA,QACZ,WAAW;AAAA,UACT;AAAA,UACA,MAAM,cAAc,WAAW;AAAA,QACjC;AAAA,QAEC,gBAAM;AAAA;AAAA,IACT;AAAA,EAEJ;AAEA,MAAI,MAAM,UAAU,MAAM,OAAO,KAAK,MAAM,IAAI;AAC9C,WACE;AAAA,MAAC;AAAA;AAAA,QACC,WAAW;AAAA,UACT;AAAA,UACA,MAAM,cAAc,WAAW;AAAA,QACjC;AAAA,QACA,eAAY;AAAA,QAEX,gBAAM;AAAA;AAAA,IACT;AAAA,EAEJ;AAEA,MAAI,CAAC,MAAM,OAAO;AAChB,WAAO;AAAA,EACT;AAEA,SAAO,oBAAC,aAAU,OAAO,MAAM,OAAO,OAAO,MAAM,SAAS,UAAU;AACxE;",
   "names": []
 }

package/esm/charts/core/components/overlay-tooltip/components/series/hooks/use-series-item-display-state.js

@@ -14,20 +14,50 @@ import { getDisplayNameText } from "../utils/get-display-name-text.js";
 import { getDisplayText } from "../utils/get-display-text.js";
 import { getIsTruncated } from "../utils/get-is-truncated.js";
 import { getNameTextStyle } from "../utils/get-name-text-style.js";
-const calculateNameText = (name, multiLine, shouldUseMultiLineCss, availableNameWidth, truncationMode) => {
+const resolveDisplayText = (text, shouldUseMultiLineCss, availableWidth, validatedMaxLines, truncationMode) => {
+  if (shouldUseMultiLineCss) {
+    if (truncationMode === "end") {
+      return text;
+    }
+    const wrapWidth = availableWidth !== void 0 ? availableWidth * validatedMaxLines : void 0;
+    return getDisplayText(text, wrapWidth, truncationMode) || "";
+  }
+  return getDisplayText(text, availableWidth, truncationMode) || "";
+};
+const calculateAvailableNameWidth = (maxWidth, actualValueWidth) => {
+  if (!maxWidth) {
+    return void 0;
+  }
+  const valueOffset = actualValueWidth > 0 ? actualValueWidth + 6 : 0;
+  return maxWidth - valueOffset - SYMBOL_AND_SPACING_WIDTH;
+};
+const calculateNameText = (name, multiLine, shouldUseMultiLineCss, availableNameWidth, truncationMode, validatedMaxLines) => {
   if (Array.isArray(name)) {
     if (multiLine) {
       return name.map(
-        (item) => shouldUseMultiLineCss ? item : getDisplayText(item, availableNameWidth, truncationMode)
+        (item) => resolveDisplayText(
+          item,
+          shouldUseMultiLineCss,
+          availableNameWidth,
+          validatedMaxLines,
+          truncationMode
+        )
       );
     }
     return formatSeriesNameForDisplay(name);
   }
-  return shouldUseMultiLineCss ? name : getDisplayText(name, availableNameWidth, truncationMode) || "";
+  return resolveDisplayText(
+    name,
+    shouldUseMultiLineCss,
+    availableNameWidth,
+    validatedMaxLines,
+    truncationMode
+  );
 };
 const useSeriesItemDisplayState = (props) => {
   const {
     name,
+    description,
     value,
     valueUnit,
     relativeValue,
@@ -54,15 +84,20 @@ const useSeriesItemDisplayState = (props) => {
     maxWidth,
     truncationMode
   );
-  const availableNameWidth = maxWidth && actualValueWidth > 0 ? maxWidth - actualValueWidth - SYMBOL_AND_SPACING_WIDTH - 6 : void 0;
+  const availableNameWidth = calculateAvailableNameWidth(
+    maxWidth,
+    actualValueWidth
+  );
   const shouldUseMultiLineCss = !isSingleLine;
   const nameText = calculateNameText(
     name,
     multiLine,
     shouldUseMultiLineCss,
     availableNameWidth,
-    truncationMode
+    truncationMode,
+    validatedMaxLines
   );
+  const multiLineMode = shouldUseMultiLineCss && truncationMode !== "end" ? "wrap" : "clamp";
   const displayNameText = getDisplayNameText(name, multiLine);
   const totalTextWidth = useMemo(() => {
     return Array.isArray(displayNameText) ? calculateTotalWidth400(...displayNameText) : calculateTotalWidth400(displayNameText);
@@ -75,11 +110,28 @@ const useSeriesItemDisplayState = (props) => {
     nameText,
     displayNameText
   );
-  const nameTextStyle = getNameTextStyle(isSingleLine, multiLine);
+  const nameTextStyle = getNameTextStyle(
+    isSingleLine,
+    multiLine,
+    multiLineMode
+  );
   const nameStyle = shouldUseMultiLineCss ? assignInlineVars({ [seriesNameMaxLinesVar]: String(validatedMaxLines) }) : {};
+  const descriptionText = typeof description === "string" && description.length > 0 ? resolveDisplayText(
+    description,
+    shouldUseMultiLineCss,
+    availableNameWidth,
+    validatedMaxLines,
+    truncationMode
+  ) : void 0;
+  const isDescriptionTruncated = typeof description === "string" && descriptionText !== description;
   return {
     nameText,
     displayNameText,
+    descriptionText,
+    fullDescriptionText: description,
+    isDescriptionTruncated,
+    descriptionShouldUseMultiLineCss: shouldUseMultiLineCss,
+    descriptionMultiLineMode: multiLineMode,
     displayValueText,
     displayRelativeValueText,
     fullValueText,

package/esm/charts/core/components/overlay-tooltip/components/series/hooks/use-series-item-display-state.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../../src/charts/core/components/overlay-tooltip/components/series/hooks/use-series-item-display-state.ts"],
-  "sourcesContent": ["import { assignInlineVars } from '@vanilla-extract/dynamic';\nimport { useMemo } from 'react';\n\nimport { useValueContainerDisplayText } from './use-value-container-display-state.js';\nimport type { TruncationMode } from '../../../../../../../typography/text-ellipsis/TextEllipsis.js';\nimport {\n  DEFAULT_SERIES_NAME_LINES,\n  MAX_SERIES_NAME_LINES,\n  SYMBOL_AND_SPACING_WIDTH,\n} from '../../../constants.js';\nimport { useExternalConfig } from '../../../contexts/ExternalConfigContext.js';\nimport { seriesNameMaxLinesVar } from '../../../tooltip.sty.js';\nimport { InternalSeriesItemProps } from '../../../types/series.js';\nimport { calculateTotalWidth400 } from '../../../utils/width-calculation.js';\nimport { formatSeriesNameForDisplay } from '../utils/format-series-name-for-display.js';\nimport { getDisplayNameText } from '../utils/get-display-name-text.js';\nimport { getDisplayText } from '../utils/get-display-text.js';\nimport { getIsTruncated } from '../utils/get-is-truncated.js';\nimport { getNameTextStyle } from '../utils/get-name-text-style.js';\n\nconst calculateNameText = (\n  name: string | string[],\n  multiLine: boolean,\n  shouldUseMultiLineCss: boolean,\n  availableNameWidth: number | undefined,\n  truncationMode: TruncationMode,\n): string | string[] => {\n  if (Array.isArray(name)) {\n    if (multiLine) {\n      return name.map((item) =>\n        shouldUseMultiLineCss\n          ? item\n          : getDisplayText(item, availableNameWidth, truncationMode),\n      );\n    }\n    return formatSeriesNameForDisplay(name);\n  }\n\n  return shouldUseMultiLineCss\n    ? name\n    : getDisplayText(name, availableNameWidth, truncationMode) || '';\n};\n\nexport const useSeriesItemDisplayState = (\n  props: InternalSeriesItemProps & { maxWidth: number },\n) => {\n  const {\n    name,\n    value,\n    valueUnit,\n    relativeValue,\n    relativeValueUnit,\n    maxWidth,\n\n    maxLines = DEFAULT_SERIES_NAME_LINES,\n    multiLine = false,\n  } = props;\n  const { truncationMode } = useExternalConfig();\n  const validatedMaxLines = Math.min(maxLines, MAX_SERIES_NAME_LINES);\n  const isSingleLine = validatedMaxLines === 1;\n  const isTruncationEnd = truncationMode === 'end';\n\n  const {\n    displayValueText,\n    displayRelativeValueText,\n    actualValueWidth,\n    fullValueText,\n    fullRelativeValueText,\n  } = useValueContainerDisplayText(\n    value?.toString(),\n    valueUnit,\n    relativeValue,\n    relativeValueUnit,\n    maxWidth,\n    truncationMode,\n  );\n\n  const availableNameWidth =\n    maxWidth && actualValueWidth > 0\n      ? maxWidth - actualValueWidth - SYMBOL_AND_SPACING_WIDTH - 6\n      : undefined;\n\n  const shouldUseMultiLineCss = !isSingleLine;\n\n  const nameText = calculateNameText(\n    name,\n    multiLine,\n    shouldUseMultiLineCss,\n    availableNameWidth,\n    truncationMode,\n  );\n\n  const displayNameText = getDisplayNameText(name, multiLine);\n\n  const totalTextWidth = useMemo(() => {\n    return Array.isArray(displayNameText)\n      ? calculateTotalWidth400(...displayNameText)\n      : calculateTotalWidth400(displayNameText);\n  }, [displayNameText]);\n\n  const isMultiLineCssClamped =\n    isTruncationEnd &&\n    shouldUseMultiLineCss &&\n    !!availableNameWidth &&\n    Math.ceil(totalTextWidth / availableNameWidth) > validatedMaxLines;\n\n  const isTruncated = getIsTruncated(\n    isMultiLineCssClamped,\n    name,\n    multiLine,\n    nameText,\n    displayNameText,\n  );\n\n  const nameTextStyle = getNameTextStyle(isSingleLine, multiLine);\n  const nameStyle = shouldUseMultiLineCss\n    ? assignInlineVars({ [seriesNameMaxLinesVar]: String(validatedMaxLines) })\n    : {};\n\n  return {\n    nameText,\n    displayNameText,\n    displayValueText,\n    displayRelativeValueText,\n    fullValueText,\n    fullRelativeValueText,\n    shouldUseMultiLineCss,\n    nameTextStyle,\n    nameStyle,\n    isTruncated,\n    actualValueWidth,\n  };\n};\n"],
-  "mappings": "AAAA,SAAS,wBAAwB;AACjC,SAAS,eAAe;AAExB,SAAS,oCAAoC;AAE7C;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,yBAAyB;AAClC,SAAS,6BAA6B;AAEtC,SAAS,8BAA8B;AACvC,SAAS,kCAAkC;AAC3C,SAAS,0BAA0B;AACnC,SAAS,sBAAsB;AAC/B,SAAS,sBAAsB;AAC/B,SAAS,wBAAwB;AAEjC,MAAM,oBAAoB,CACxB,MACA,WACA,uBACA,oBACA,mBACsB;AACtB,MAAI,MAAM,QAAQ,IAAI,GAAG;AACvB,QAAI,WAAW;AACb,aAAO,KAAK;AAAA,QAAI,CAAC,SACf,wBACI,OACA,eAAe,MAAM,oBAAoB,cAAc;AAAA,MAC7D;AAAA,IACF;AACA,WAAO,2BAA2B,IAAI;AAAA,EACxC;AAEA,SAAO,wBACH,OACA,eAAe,MAAM,oBAAoB,cAAc,KAAK;AAClE;AAEO,MAAM,4BAA4B,CACvC,UACG;AACH,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IAEA,WAAW;AAAA,IACX,YAAY;AAAA,EACd,IAAI;AACJ,QAAM,EAAE,eAAe,IAAI,kBAAkB;AAC7C,QAAM,oBAAoB,KAAK,IAAI,UAAU,qBAAqB;AAClE,QAAM,eAAe,sBAAsB;AAC3C,QAAM,kBAAkB,mBAAmB;AAE3C,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAAA,IACF,OAAO,SAAS;AAAA,IAChB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,QAAM,qBACJ,YAAY,mBAAmB,IAC3B,WAAW,mBAAmB,2BAA2B,IACzD;AAEN,QAAM,wBAAwB,CAAC;AAE/B,QAAM,WAAW;AAAA,IACf;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,QAAM,kBAAkB,mBAAmB,MAAM,SAAS;AAE1D,QAAM,iBAAiB,QAAQ,MAAM;AACnC,WAAO,MAAM,QAAQ,eAAe,IAChC,uBAAuB,GAAG,eAAe,IACzC,uBAAuB,eAAe;AAAA,EAC5C,GAAG,CAAC,eAAe,CAAC;AAEpB,QAAM,wBACJ,mBACA,yBACA,CAAC,CAAC,sBACF,KAAK,KAAK,iBAAiB,kBAAkB,IAAI;AAEnD,QAAM,cAAc;AAAA,IAClB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,QAAM,gBAAgB,iBAAiB,cAAc,SAAS;AAC9D,QAAM,YAAY,wBACd,iBAAiB,EAAE,CAAC,qBAAqB,GAAG,OAAO,iBAAiB,EAAE,CAAC,IACvE,CAAC;AAEL,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
+  "sourcesContent": ["import { assignInlineVars } from '@vanilla-extract/dynamic';\nimport { useMemo } from 'react';\n\nimport { useValueContainerDisplayText } from './use-value-container-display-state.js';\nimport type { TruncationMode } from '../../../../../../../typography/text-ellipsis/TextEllipsis.js';\nimport {\n  DEFAULT_SERIES_NAME_LINES,\n  MAX_SERIES_NAME_LINES,\n  SYMBOL_AND_SPACING_WIDTH,\n} from '../../../constants.js';\nimport { useExternalConfig } from '../../../contexts/ExternalConfigContext.js';\nimport { seriesNameMaxLinesVar } from '../../../tooltip.sty.js';\nimport { InternalSeriesItemProps } from '../../../types/series.js';\nimport { calculateTotalWidth400 } from '../../../utils/width-calculation.js';\nimport { formatSeriesNameForDisplay } from '../utils/format-series-name-for-display.js';\nimport { getDisplayNameText } from '../utils/get-display-name-text.js';\nimport { getDisplayText } from '../utils/get-display-text.js';\nimport { getIsTruncated } from '../utils/get-is-truncated.js';\nimport { getNameTextStyle } from '../utils/get-name-text-style.js';\n\nconst resolveDisplayText = (\n  text: string,\n  shouldUseMultiLineCss: boolean,\n  availableWidth: number | undefined,\n  validatedMaxLines: number,\n  truncationMode: TruncationMode,\n): string => {\n  if (shouldUseMultiLineCss) {\n    if (truncationMode === 'end') {\n      return text;\n    }\n    const wrapWidth =\n      availableWidth !== undefined\n        ? availableWidth * validatedMaxLines\n        : undefined;\n    return getDisplayText(text, wrapWidth, truncationMode) || '';\n  }\n  return getDisplayText(text, availableWidth, truncationMode) || '';\n};\n\nconst calculateAvailableNameWidth = (\n  maxWidth: number,\n  actualValueWidth: number,\n): number | undefined => {\n  if (!maxWidth) {\n    return undefined;\n  }\n  const valueOffset = actualValueWidth > 0 ? actualValueWidth + 6 : 0;\n  return maxWidth - valueOffset - SYMBOL_AND_SPACING_WIDTH;\n};\n\nconst calculateNameText = (\n  name: string | string[],\n  multiLine: boolean,\n  shouldUseMultiLineCss: boolean,\n  availableNameWidth: number | undefined,\n  truncationMode: TruncationMode,\n  validatedMaxLines: number,\n): string | string[] => {\n  if (Array.isArray(name)) {\n    if (multiLine) {\n      return name.map((item) =>\n        resolveDisplayText(\n          item,\n          shouldUseMultiLineCss,\n          availableNameWidth,\n          validatedMaxLines,\n          truncationMode,\n        ),\n      );\n    }\n    return formatSeriesNameForDisplay(name);\n  }\n\n  return resolveDisplayText(\n    name,\n    shouldUseMultiLineCss,\n    availableNameWidth,\n    validatedMaxLines,\n    truncationMode,\n  );\n};\n\nexport const useSeriesItemDisplayState = (\n  props: InternalSeriesItemProps & { maxWidth: number },\n) => {\n  const {\n    name,\n    description,\n    value,\n    valueUnit,\n    relativeValue,\n    relativeValueUnit,\n    maxWidth,\n\n    maxLines = DEFAULT_SERIES_NAME_LINES,\n    multiLine = false,\n  } = props;\n  const { truncationMode } = useExternalConfig();\n  const validatedMaxLines = Math.min(maxLines, MAX_SERIES_NAME_LINES);\n  const isSingleLine = validatedMaxLines === 1;\n  const isTruncationEnd = truncationMode === 'end';\n\n  const {\n    displayValueText,\n    displayRelativeValueText,\n    actualValueWidth,\n    fullValueText,\n    fullRelativeValueText,\n  } = useValueContainerDisplayText(\n    value?.toString(),\n    valueUnit,\n    relativeValue,\n    relativeValueUnit,\n    maxWidth,\n    truncationMode,\n  );\n\n  const availableNameWidth = calculateAvailableNameWidth(\n    maxWidth,\n    actualValueWidth,\n  );\n\n  const shouldUseMultiLineCss = !isSingleLine;\n\n  const nameText = calculateNameText(\n    name,\n    multiLine,\n    shouldUseMultiLineCss,\n    availableNameWidth,\n    truncationMode,\n    validatedMaxLines,\n  );\n\n  const multiLineMode: 'clamp' | 'wrap' =\n    shouldUseMultiLineCss && truncationMode !== 'end' ? 'wrap' : 'clamp';\n\n  const displayNameText = getDisplayNameText(name, multiLine);\n\n  const totalTextWidth = useMemo(() => {\n    return Array.isArray(displayNameText)\n      ? calculateTotalWidth400(...displayNameText)\n      : calculateTotalWidth400(displayNameText);\n  }, [displayNameText]);\n\n  const isMultiLineCssClamped =\n    isTruncationEnd &&\n    shouldUseMultiLineCss &&\n    !!availableNameWidth &&\n    Math.ceil(totalTextWidth / availableNameWidth) > validatedMaxLines;\n\n  const isTruncated = getIsTruncated(\n    isMultiLineCssClamped,\n    name,\n    multiLine,\n    nameText,\n    displayNameText,\n  );\n\n  const nameTextStyle = getNameTextStyle(\n    isSingleLine,\n    multiLine,\n    multiLineMode,\n  );\n  const nameStyle = shouldUseMultiLineCss\n    ? assignInlineVars({ [seriesNameMaxLinesVar]: String(validatedMaxLines) })\n    : {};\n\n  const descriptionText =\n    typeof description === 'string' && description.length > 0\n      ? resolveDisplayText(\n          description,\n          shouldUseMultiLineCss,\n          availableNameWidth,\n          validatedMaxLines,\n          truncationMode,\n        )\n      : undefined;\n\n  const isDescriptionTruncated =\n    typeof description === 'string' && descriptionText !== description;\n\n  return {\n    nameText,\n    displayNameText,\n    descriptionText,\n    fullDescriptionText: description,\n    isDescriptionTruncated,\n    descriptionShouldUseMultiLineCss: shouldUseMultiLineCss,\n    descriptionMultiLineMode: multiLineMode,\n    displayValueText,\n    displayRelativeValueText,\n    fullValueText,\n    fullRelativeValueText,\n    shouldUseMultiLineCss,\n    nameTextStyle,\n    nameStyle,\n    isTruncated,\n    actualValueWidth,\n  };\n};\n"],
+  "mappings": "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",
   "names": []
 }

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

@@ -1,4 +1,4 @@
-._1ydozsr0-3-5-0 {
+._1ydozsr0-3-6-0 {
   height: var(--dt-spacings-size-12, 12px);
   width: var(--dt-spacings-size-12, 12px);
   font-size: var(--dt-spacings-size-12, 12px);
@@ -10,7 +10,7 @@
   justify-content: center;
   flex-shrink: 0;
 }
-._1ydozsr1-3-5-0 {
+._1ydozsr1-3-6-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-5-0";
-var customSymbolLarge = "_1ydozsr1-3-5-0 _1ydozsr0-3-5-0";
+var customSymbol = "_1ydozsr0-3-6-0";
+var customSymbolLarge = "_1ydozsr1-3-6-0 _1ydozsr0-3-6-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-5-0';\nexport var customSymbolLarge = '_1ydozsr1-3-5-0 _1ydozsr0-3-5-0';"],
+  "sourcesContent": ["import './seriesSymbol.css';\nexport var customSymbol = '_1ydozsr0-3-6-0';\nexport var customSymbolLarge = '_1ydozsr1-3-6-0 _1ydozsr0-3-6-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,eAAe;AACnB,IAAI,oBAAoB;",
   "names": []
 }

package/esm/charts/core/components/overlay-tooltip/components/series/utils/get-name-text-style.js

@@ -1,14 +1,16 @@
 import clsx from "clsx";
 import {
   seriesItemText,
-  seriesNameTextMultiLine
+  seriesNameTextMultiLine,
+  seriesNameTextMultiLineWrap
 } from "../../../tooltip.sty.js";
-const getNameTextStyle = (isSingleLine, multiLine) => {
+const getNameTextStyle = (isSingleLine, multiLine, multiLineMode = "clamp") => {
+  const multiLineClass = multiLineMode === "wrap" ? seriesNameTextMultiLineWrap : seriesNameTextMultiLine;
   if (!isSingleLine) {
-    return clsx(seriesItemText, seriesNameTextMultiLine);
+    return clsx(seriesItemText, multiLineClass);
   }
   if (multiLine) {
-    return seriesNameTextMultiLine;
+    return multiLineClass;
   }
   return seriesItemText;
 };

package/esm/charts/core/components/overlay-tooltip/components/series/utils/get-name-text-style.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../../src/charts/core/components/overlay-tooltip/components/series/utils/get-name-text-style.ts"],
-  "sourcesContent": ["import clsx from 'clsx';\n\nimport {\n  seriesItemText,\n  seriesNameTextMultiLine,\n} from '../../../tooltip.sty.js';\n\nexport const getNameTextStyle = (\n  isSingleLine: boolean,\n  multiLine: boolean,\n): string => {\n  if (!isSingleLine) {\n    return clsx(seriesItemText, seriesNameTextMultiLine);\n  }\n\n  if (multiLine) {\n    return seriesNameTextMultiLine;\n  }\n\n  return seriesItemText;\n};\n"],
-  "mappings": "AAAA,OAAO,UAAU;AAEjB;AAAA,EACE;AAAA,EACA;AAAA,OACK;AAEA,MAAM,mBAAmB,CAC9B,cACA,cACW;AACX,MAAI,CAAC,cAAc;AACjB,WAAO,KAAK,gBAAgB,uBAAuB;AAAA,EACrD;AAEA,MAAI,WAAW;AACb,WAAO;AAAA,EACT;AAEA,SAAO;AACT;",
+  "sourcesContent": ["import clsx from 'clsx';\n\nimport {\n  seriesItemText,\n  seriesNameTextMultiLine,\n  seriesNameTextMultiLineWrap,\n} from '../../../tooltip.sty.js';\n\nexport const getNameTextStyle = (\n  isSingleLine: boolean,\n  multiLine: boolean,\n  multiLineMode: 'clamp' | 'wrap' = 'clamp',\n): string => {\n  const multiLineClass =\n    multiLineMode === 'wrap'\n      ? seriesNameTextMultiLineWrap\n      : seriesNameTextMultiLine;\n\n  if (!isSingleLine) {\n    return clsx(seriesItemText, multiLineClass);\n  }\n\n  if (multiLine) {\n    return multiLineClass;\n  }\n\n  return seriesItemText;\n};\n"],
+  "mappings": "AAAA,OAAO,UAAU;AAEjB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEA,MAAM,mBAAmB,CAC9B,cACA,WACA,gBAAkC,YACvB;AACX,QAAM,iBACJ,kBAAkB,SACd,8BACA;AAEN,MAAI,CAAC,cAAc;AACjB,WAAO,KAAK,gBAAgB,cAAc;AAAA,EAC5C;AAEA,MAAI,WAAW;AACb,WAAO;AAAA,EACT;AAEA,SAAO;AACT;",
   "names": []
 }

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

@@ -1,15 +1,7 @@
-import { useTooltipReducer } from "../useTooltipReducer.js";
-import { emptyData } from "../utils.js";
+import { useTooltipActions } from "../useTooltipActions.js";
 const useTooltipImperativeHandle = () => {
-  const dispatch = useTooltipReducer();
-  return {
-    unpinTooltip: () => {
-      dispatch({
-        type: "SET_PINNED",
-        payload: { pinned: false, data: emptyData() }
-      })();
-    }
-  };
+  const { unpin } = useTooltipActions();
+  return { unpinTooltip: unpin };
 };
 export {
   useTooltipImperativeHandle

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/core/components/overlay-tooltip/hooks/useTooltipImperativeHandle.ts"],
-  "sourcesContent": ["import { useTooltipReducer } from '../useTooltipReducer.js';\nimport { emptyData } from '../utils.js';\n\nexport const useTooltipImperativeHandle = () => {\n  const dispatch = useTooltipReducer();\n\n  return {\n    unpinTooltip: () => {\n      dispatch({\n        type: 'SET_PINNED',\n        payload: { pinned: false, data: emptyData() },\n      })();\n    },\n  };\n};\n"],
-  "mappings": "AAAA,SAAS,yBAAyB;AAClC,SAAS,iBAAiB;AAEnB,MAAM,6BAA6B,MAAM;AAC9C,QAAM,WAAW,kBAAkB;AAEnC,SAAO;AAAA,IACL,cAAc,MAAM;AAClB,eAAS;AAAA,QACP,MAAM;AAAA,QACN,SAAS,EAAE,QAAQ,OAAO,MAAM,UAAU,EAAE;AAAA,MAC9C,CAAC,EAAE;AAAA,IACL;AAAA,EACF;AACF;",
+  "sourcesContent": ["import { useTooltipActions } from '../useTooltipActions.js';\n\nexport const useTooltipImperativeHandle = () => {\n  const { unpin } = useTooltipActions();\n\n  return { unpinTooltip: unpin };\n};\n"],
+  "mappings": "AAAA,SAAS,yBAAyB;AAE3B,MAAM,6BAA6B,MAAM;AAC9C,QAAM,EAAE,MAAM,IAAI,kBAAkB;AAEpC,SAAO,EAAE,cAAc,MAAM;AAC/B;",
   "names": []
 }

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

@@ -12,10 +12,10 @@ function getAdjustedPositionsFromAbsolute(absoluteX, absoluteY) {
     return NullPositions;
   }
   const { left, top, width, height } = bounds;
-  const relativeX = Math.round(absoluteX - left);
-  const relativeY = Math.round(absoluteY - top);
-  const percentX = Math.round(relativeX * 100 / width);
-  const percentY = Math.round(relativeY * 100 / height);
+  const relativeX = absoluteX - left;
+  const relativeY = absoluteY - top;
+  const percentX = relativeX * 100 / width;
+  const percentY = relativeY * 100 / height;
   return {
     absoluteX,
     absoluteY,
@@ -31,8 +31,8 @@ function getAdjustedPositionsFromPercent(percentX, percentY, relativeX, relative
     return NullPositions;
   }
   const { left, top, width, height } = bounds;
-  relativeX ||= Math.round(percentX * width / 100);
-  relativeY ||= Math.round(percentY * height / 100);
+  relativeX ||= percentX * width / 100;
+  relativeY ||= percentY * height / 100;
   const absoluteX = Math.round(left + relativeX);
   const absoluteY = Math.round(top + relativeY);
   return {
@@ -50,8 +50,8 @@ function getAdjustedPositionsFromRelative(relativeX, relativeY) {
     return NullPositions;
   }
   const { left, top, width, height } = bounds;
-  const percentX = Math.round(relativeX * 100 / width);
-  const percentY = Math.round(relativeY * 100 / height);
+  const percentX = relativeX * 100 / width;
+  const percentY = relativeY * 100 / height;
   const absoluteX = Math.round(left + relativeX);
   const absoluteY = Math.round(top + relativeY);
   return {