@dynatrace/strato-components 3.4.1 → 3.5.2

package/esm/charts/core/components/overlay-tooltip/components/header/utils/value-formatters.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../../src/charts/core/components/overlay-tooltip/components/header/utils/value-formatters.ts"],
-  "sourcesContent": ["import { isUndefined } from 'lodash-es';\n\nimport { formatDateRange } from './format-date-range.js';\nimport type { HeaderData } from '../../../types.js';\nimport {\n  isDateRange,\n  isNonEmptyRange,\n  isSingleValue,\n} from '../types/type-guards.js';\n\nexport const getSingleValue = (value: HeaderData): string => {\n  const rawValue = Array.isArray(value) ? value[0] : value;\n  return isUndefined(rawValue) ? '' : rawValue.toString();\n};\n\nexport const defaultLabelFormatterStrategy = (\n  value: HeaderData,\n  label?: string,\n): string => {\n  if (isSingleValue(value)) {\n    const returnValue = getSingleValue(value);\n    return label ? `${label}: ${returnValue}` : returnValue.toString();\n  }\n  return formatValueRange(value);\n};\n\nexport const emptyHeaderFormatter = (_: HeaderData): null => {\n  return null;\n};\n\nexport const formatValueRange = (values: HeaderData): string => {\n  if (isNonEmptyRange(values)) {\n    let base = `${values[0]} - ${values[1]}`;\n\n    if (isDateRange(values)) {\n      base = formatDateRange(values[0], values[1]);\n    }\n\n    return base;\n  }\n\n  if (!Array.isArray(values)) {\n    return !isUndefined(values) ? defaultLabelFormatterStrategy(values) : '';\n  }\n\n  if (values.some((i) => !isUndefined(i))) {\n    return defaultLabelFormatterStrategy(values[0] ?? values[1]);\n  }\n\n  return '';\n};\n"],
-  "mappings": "AAAA,SAAS,mBAAmB;AAE5B,SAAS,uBAAuB;AAEhC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEA,MAAM,iBAAiB,CAAC,UAA8B;AAC3D,QAAM,WAAW,MAAM,QAAQ,KAAK,IAAI,MAAM,CAAC,IAAI;AACnD,SAAO,YAAY,QAAQ,IAAI,KAAK,SAAS,SAAS;AACxD;AAEO,MAAM,gCAAgC,CAC3C,OACA,UACW;AACX,MAAI,cAAc,KAAK,GAAG;AACxB,UAAM,cAAc,eAAe,KAAK;AACxC,WAAO,QAAQ,GAAG,KAAK,KAAK,WAAW,KAAK,YAAY,SAAS;AAAA,EACnE;AACA,SAAO,iBAAiB,KAAK;AAC/B;AAEO,MAAM,uBAAuB,CAAC,MAAwB;AAC3D,SAAO;AACT;AAEO,MAAM,mBAAmB,CAAC,WAA+B;AAC9D,MAAI,gBAAgB,MAAM,GAAG;AAC3B,QAAI,OAAO,GAAG,OAAO,CAAC,CAAC,MAAM,OAAO,CAAC,CAAC;AAEtC,QAAI,YAAY,MAAM,GAAG;AACvB,aAAO,gBAAgB,OAAO,CAAC,GAAG,OAAO,CAAC,CAAC;AAAA,IAC7C;AAEA,WAAO;AAAA,EACT;AAEA,MAAI,CAAC,MAAM,QAAQ,MAAM,GAAG;AAC1B,WAAO,CAAC,YAAY,MAAM,IAAI,8BAA8B,MAAM,IAAI;AAAA,EACxE;AAEA,MAAI,OAAO,KAAK,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC,GAAG;AACvC,WAAO,8BAA8B,OAAO,CAAC,KAAK,OAAO,CAAC,CAAC;AAAA,EAC7D;AAEA,SAAO;AACT;",
+  "sourcesContent": ["import { isUndefined } from 'lodash-es';\n\nimport { formatDateRange } from './format-date-range.js';\nimport { isDateRange, isNonEmptyRange, isSingleValue } from './type-guards.js';\nimport type { HeaderData } from '../../../types.js';\n\nexport const getSingleValue = (value: HeaderData): string => {\n  const rawValue = Array.isArray(value) ? value[0] : value;\n  return isUndefined(rawValue) ? '' : rawValue.toString();\n};\n\nexport const defaultLabelFormatterStrategy = (\n  value: HeaderData,\n  label?: string,\n): string => {\n  if (isSingleValue(value)) {\n    const returnValue = getSingleValue(value);\n    return label ? `${label}: ${returnValue}` : returnValue.toString();\n  }\n  return formatValueRange(value);\n};\n\nexport const emptyHeaderFormatter = (_: HeaderData): null => {\n  return null;\n};\n\nexport const formatValueRange = (values: HeaderData): string => {\n  if (isNonEmptyRange(values)) {\n    let base = `${values[0]} - ${values[1]}`;\n\n    if (isDateRange(values)) {\n      base = formatDateRange(values[0], values[1]);\n    }\n\n    return base;\n  }\n\n  if (!Array.isArray(values)) {\n    return !isUndefined(values) ? defaultLabelFormatterStrategy(values) : '';\n  }\n\n  if (values.some((i) => !isUndefined(i))) {\n    return defaultLabelFormatterStrategy(values[0] ?? values[1]);\n  }\n\n  return '';\n};\n"],
+  "mappings": "AAAA,SAAS,mBAAmB;AAE5B,SAAS,uBAAuB;AAChC,SAAS,aAAa,iBAAiB,qBAAqB;AAGrD,MAAM,iBAAiB,CAAC,UAA8B;AAC3D,QAAM,WAAW,MAAM,QAAQ,KAAK,IAAI,MAAM,CAAC,IAAI;AACnD,SAAO,YAAY,QAAQ,IAAI,KAAK,SAAS,SAAS;AACxD;AAEO,MAAM,gCAAgC,CAC3C,OACA,UACW;AACX,MAAI,cAAc,KAAK,GAAG;AACxB,UAAM,cAAc,eAAe,KAAK;AACxC,WAAO,QAAQ,GAAG,KAAK,KAAK,WAAW,KAAK,YAAY,SAAS;AAAA,EACnE;AACA,SAAO,iBAAiB,KAAK;AAC/B;AAEO,MAAM,uBAAuB,CAAC,MAAwB;AAC3D,SAAO;AACT;AAEO,MAAM,mBAAmB,CAAC,WAA+B;AAC9D,MAAI,gBAAgB,MAAM,GAAG;AAC3B,QAAI,OAAO,GAAG,OAAO,CAAC,CAAC,MAAM,OAAO,CAAC,CAAC;AAEtC,QAAI,YAAY,MAAM,GAAG;AACvB,aAAO,gBAAgB,OAAO,CAAC,GAAG,OAAO,CAAC,CAAC;AAAA,IAC7C;AAEA,WAAO;AAAA,EACT;AAEA,MAAI,CAAC,MAAM,QAAQ,MAAM,GAAG;AAC1B,WAAO,CAAC,YAAY,MAAM,IAAI,8BAA8B,MAAM,IAAI;AAAA,EACxE;AAEA,MAAI,OAAO,KAAK,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC,GAAG;AACvC,WAAO,8BAA8B,OAAO,CAAC,KAAK,OAAO,CAAC,CAAC;AAAA,EAC7D;AAEA,SAAO;AACT;",
   "names": []
 }

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

@@ -70,19 +70,19 @@ const SeriesItem = (props) => {
     return getDefaultAction(props, accessor, message);
   });
   return /* @__PURE__ */ jsx(
-    "div",
+    "button",
     {
       className: clsx(
         activeSeries === props.name && seriesItemActive,
         seriesItemWrapper
       ),
-      role: "none",
       onClick: handleClick,
       onPointerMove: handlePointerMove,
       onKeyDown: noop,
       children: /* @__PURE__ */ jsx(
         ChartActionsMenuAsync,
         {
+          hasActions,
           defaultActions,
           actions: asyncActions,
           isOpen,

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<HTMLDivElement> = (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    <div\n      className={clsx(\n        activeSeries === props.name && seriesItemActive,\n        seriesItemWrapper,\n      )}\n      role=\"none\"\n      onClick={handleClick}\n      onPointerMove={handlePointerMove}\n      onKeyDown={noop}\n    >\n      <ChartActionsMenuAsync\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    </div>\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 { 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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",
   "names": ["activeSeries"]
 }

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 { TruncationMode } from '../../../../text-ellipsis/ChartTextEllipsis.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"],
+  "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;",
   "names": []
 }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../../src/charts/core/components/overlay-tooltip/components/series/hooks/use-value-container-display-state.ts"],
-  "sourcesContent": ["import { useMemo } from 'react';\n\nimport { TruncationMode } from '../../../../text-ellipsis/ChartTextEllipsis.js';\nimport {\n  GAP_BETWEEN_COLUMNS,\n  SPACE_CHARACTER_WIDTH,\n} from '../../../constants.js';\nimport { calculateTotalWidth400 } from '../../../utils/width-calculation.js';\nimport { buildRelativeValueText } from '../utils/build-relative-value-text.js';\nimport { getDisplayText } from '../utils/get-display-text.js';\n\nexport const useValueContainerDisplayText = (\n  value: string,\n  valueUnit: string | undefined,\n  relativeValue: string | number | undefined,\n  relativeValueUnit: string | undefined,\n  availableContainerWidth: number | undefined,\n  truncationMode: TruncationMode,\n): {\n  displayValueText: string;\n  displayRelativeValueText: string | undefined;\n  actualValueWidth: number;\n  fullValueText: string;\n  fullRelativeValueText: string | undefined;\n} => {\n  return useMemo(() => {\n    const relativeValueText = buildRelativeValueText(\n      relativeValue,\n      relativeValueUnit,\n    );\n\n    const valueUnitWithSpace = ` ${valueUnit}`;\n    const fullValueText = `${value}${valueUnit ? valueUnitWithSpace : ''}`;\n\n    if (!availableContainerWidth || availableContainerWidth <= 0) {\n      const valueWidth = relativeValueText\n        ? calculateTotalWidth400(fullValueText, relativeValueText)\n        : calculateTotalWidth400(fullValueText);\n\n      return {\n        displayValueText: fullValueText,\n        displayRelativeValueText: relativeValueText,\n        actualValueWidth: valueWidth,\n        fullValueText,\n        fullRelativeValueText: relativeValueText,\n      };\n    }\n\n    const maxValueContainerWidth =\n      availableContainerWidth / 2 - GAP_BETWEEN_COLUMNS;\n\n    if (!relativeValueText) {\n      const truncatedValueText = getDisplayText(\n        fullValueText,\n        maxValueContainerWidth,\n        truncationMode,\n      );\n      const actualValueWidth = calculateTotalWidth400(truncatedValueText);\n\n      return {\n        displayValueText: truncatedValueText,\n        displayRelativeValueText: undefined,\n        actualValueWidth,\n        fullValueText,\n        fullRelativeValueText: undefined,\n      };\n    }\n\n    const relativeValueWidth = calculateTotalWidth400(relativeValueText);\n    const valueWidth = calculateTotalWidth400(fullValueText);\n\n    const totalValueContainerWidth = calculateTotalWidth400(\n      relativeValueText,\n      fullValueText,\n      ' ',\n    );\n\n    if (totalValueContainerWidth <= maxValueContainerWidth) {\n      return {\n        displayValueText: fullValueText,\n        displayRelativeValueText: relativeValueText,\n        actualValueWidth: totalValueContainerWidth,\n        fullValueText,\n        fullRelativeValueText: relativeValueText,\n      };\n    }\n\n    const maxRelativeValueWidth = Math.min(\n      maxValueContainerWidth * 0.6,\n      maxValueContainerWidth - SPACE_CHARACTER_WIDTH,\n    );\n    if (relativeValueWidth + SPACE_CHARACTER_WIDTH >= maxRelativeValueWidth) {\n      const truncatedRelativeValue = getDisplayText(\n        relativeValueText,\n        maxRelativeValueWidth,\n        truncationMode,\n      );\n      const actualRelativeValueWidth = calculateTotalWidth400(\n        truncatedRelativeValue,\n      );\n\n      const remainingSpaceForValue =\n        maxValueContainerWidth -\n        actualRelativeValueWidth -\n        SPACE_CHARACTER_WIDTH;\n      const doesFitInAvailableSpace = valueWidth <= remainingSpaceForValue;\n      const displayValueText = doesFitInAvailableSpace\n        ? fullValueText\n        : getDisplayText(fullValueText, remainingSpaceForValue, truncationMode);\n\n      return {\n        displayValueText,\n        displayRelativeValueText: truncatedRelativeValue,\n        actualValueWidth: calculateTotalWidth400(\n          displayValueText,\n          truncatedRelativeValue,\n          ' ',\n        ),\n        fullValueText,\n        fullRelativeValueText: relativeValueText,\n      };\n    } else {\n      const actualRelativeValueWidth =\n        calculateTotalWidth400(relativeValueText);\n      const remainingSpaceForValue =\n        maxValueContainerWidth -\n        actualRelativeValueWidth -\n        SPACE_CHARACTER_WIDTH;\n      const doesFitInAvailableSpace = valueWidth <= remainingSpaceForValue;\n      const displayValueText = doesFitInAvailableSpace\n        ? fullValueText\n        : getDisplayText(fullValueText, remainingSpaceForValue, truncationMode);\n\n      return {\n        displayValueText,\n        displayRelativeValueText: relativeValueText,\n        actualValueWidth: calculateTotalWidth400(\n          displayValueText,\n          relativeValueText,\n          ' ',\n        ),\n        fullValueText,\n        fullRelativeValueText: relativeValueText,\n      };\n    }\n  }, [\n    value,\n    valueUnit,\n    relativeValue,\n    relativeValueUnit,\n    availableContainerWidth,\n    truncationMode,\n  ]);\n};\n"],
+  "sourcesContent": ["import { useMemo } from 'react';\n\nimport type { TruncationMode } from '../../../../../../../typography/text-ellipsis/TextEllipsis.js';\nimport {\n  GAP_BETWEEN_COLUMNS,\n  SPACE_CHARACTER_WIDTH,\n} from '../../../constants.js';\nimport { calculateTotalWidth400 } from '../../../utils/width-calculation.js';\nimport { buildRelativeValueText } from '../utils/build-relative-value-text.js';\nimport { getDisplayText } from '../utils/get-display-text.js';\n\nexport const useValueContainerDisplayText = (\n  value: string,\n  valueUnit: string | undefined,\n  relativeValue: string | number | undefined,\n  relativeValueUnit: string | undefined,\n  availableContainerWidth: number | undefined,\n  truncationMode: TruncationMode,\n): {\n  displayValueText: string;\n  displayRelativeValueText: string | undefined;\n  actualValueWidth: number;\n  fullValueText: string;\n  fullRelativeValueText: string | undefined;\n} => {\n  return useMemo(() => {\n    const relativeValueText = buildRelativeValueText(\n      relativeValue,\n      relativeValueUnit,\n    );\n\n    const valueUnitWithSpace = ` ${valueUnit}`;\n    const fullValueText = `${value}${valueUnit ? valueUnitWithSpace : ''}`;\n\n    if (!availableContainerWidth || availableContainerWidth <= 0) {\n      const valueWidth = relativeValueText\n        ? calculateTotalWidth400(fullValueText, relativeValueText)\n        : calculateTotalWidth400(fullValueText);\n\n      return {\n        displayValueText: fullValueText,\n        displayRelativeValueText: relativeValueText,\n        actualValueWidth: valueWidth,\n        fullValueText,\n        fullRelativeValueText: relativeValueText,\n      };\n    }\n\n    const maxValueContainerWidth =\n      availableContainerWidth / 2 - GAP_BETWEEN_COLUMNS;\n\n    if (!relativeValueText) {\n      const truncatedValueText = getDisplayText(\n        fullValueText,\n        maxValueContainerWidth,\n        truncationMode,\n      );\n      const actualValueWidth = calculateTotalWidth400(truncatedValueText);\n\n      return {\n        displayValueText: truncatedValueText,\n        displayRelativeValueText: undefined,\n        actualValueWidth,\n        fullValueText,\n        fullRelativeValueText: undefined,\n      };\n    }\n\n    const relativeValueWidth = calculateTotalWidth400(relativeValueText);\n    const valueWidth = calculateTotalWidth400(fullValueText);\n\n    const totalValueContainerWidth = calculateTotalWidth400(\n      relativeValueText,\n      fullValueText,\n      ' ',\n    );\n\n    if (totalValueContainerWidth <= maxValueContainerWidth) {\n      return {\n        displayValueText: fullValueText,\n        displayRelativeValueText: relativeValueText,\n        actualValueWidth: totalValueContainerWidth,\n        fullValueText,\n        fullRelativeValueText: relativeValueText,\n      };\n    }\n\n    const maxRelativeValueWidth = Math.min(\n      maxValueContainerWidth * 0.6,\n      maxValueContainerWidth - SPACE_CHARACTER_WIDTH,\n    );\n    if (relativeValueWidth + SPACE_CHARACTER_WIDTH >= maxRelativeValueWidth) {\n      const truncatedRelativeValue = getDisplayText(\n        relativeValueText,\n        maxRelativeValueWidth,\n        truncationMode,\n      );\n      const actualRelativeValueWidth = calculateTotalWidth400(\n        truncatedRelativeValue,\n      );\n\n      const remainingSpaceForValue =\n        maxValueContainerWidth -\n        actualRelativeValueWidth -\n        SPACE_CHARACTER_WIDTH;\n      const doesFitInAvailableSpace = valueWidth <= remainingSpaceForValue;\n      const displayValueText = doesFitInAvailableSpace\n        ? fullValueText\n        : getDisplayText(fullValueText, remainingSpaceForValue, truncationMode);\n\n      return {\n        displayValueText,\n        displayRelativeValueText: truncatedRelativeValue,\n        actualValueWidth: calculateTotalWidth400(\n          displayValueText,\n          truncatedRelativeValue,\n          ' ',\n        ),\n        fullValueText,\n        fullRelativeValueText: relativeValueText,\n      };\n    } else {\n      const actualRelativeValueWidth =\n        calculateTotalWidth400(relativeValueText);\n      const remainingSpaceForValue =\n        maxValueContainerWidth -\n        actualRelativeValueWidth -\n        SPACE_CHARACTER_WIDTH;\n      const doesFitInAvailableSpace = valueWidth <= remainingSpaceForValue;\n      const displayValueText = doesFitInAvailableSpace\n        ? fullValueText\n        : getDisplayText(fullValueText, remainingSpaceForValue, truncationMode);\n\n      return {\n        displayValueText,\n        displayRelativeValueText: relativeValueText,\n        actualValueWidth: calculateTotalWidth400(\n          displayValueText,\n          relativeValueText,\n          ' ',\n        ),\n        fullValueText,\n        fullRelativeValueText: relativeValueText,\n      };\n    }\n  }, [\n    value,\n    valueUnit,\n    relativeValue,\n    relativeValueUnit,\n    availableContainerWidth,\n    truncationMode,\n  ]);\n};\n"],
   "mappings": "AAAA,SAAS,eAAe;AAGxB;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,SAAS,8BAA8B;AACvC,SAAS,8BAA8B;AACvC,SAAS,sBAAsB;AAExB,MAAM,+BAA+B,CAC1C,OACA,WACA,eACA,mBACA,yBACA,mBAOG;AACH,SAAO,QAAQ,MAAM;AACnB,UAAM,oBAAoB;AAAA,MACxB;AAAA,MACA;AAAA,IACF;AAEA,UAAM,qBAAqB,IAAI,SAAS;AACxC,UAAM,gBAAgB,GAAG,KAAK,GAAG,YAAY,qBAAqB,EAAE;AAEpE,QAAI,CAAC,2BAA2B,2BAA2B,GAAG;AAC5D,YAAMA,cAAa,oBACf,uBAAuB,eAAe,iBAAiB,IACvD,uBAAuB,aAAa;AAExC,aAAO;AAAA,QACL,kBAAkB;AAAA,QAClB,0BAA0B;AAAA,QAC1B,kBAAkBA;AAAA,QAClB;AAAA,QACA,uBAAuB;AAAA,MACzB;AAAA,IACF;AAEA,UAAM,yBACJ,0BAA0B,IAAI;AAEhC,QAAI,CAAC,mBAAmB;AACtB,YAAM,qBAAqB;AAAA,QACzB;AAAA,QACA;AAAA,QACA;AAAA,MACF;AACA,YAAM,mBAAmB,uBAAuB,kBAAkB;AAElE,aAAO;AAAA,QACL,kBAAkB;AAAA,QAClB,0BAA0B;AAAA,QAC1B;AAAA,QACA;AAAA,QACA,uBAAuB;AAAA,MACzB;AAAA,IACF;AAEA,UAAM,qBAAqB,uBAAuB,iBAAiB;AACnE,UAAM,aAAa,uBAAuB,aAAa;AAEvD,UAAM,2BAA2B;AAAA,MAC/B;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAEA,QAAI,4BAA4B,wBAAwB;AACtD,aAAO;AAAA,QACL,kBAAkB;AAAA,QAClB,0BAA0B;AAAA,QAC1B,kBAAkB;AAAA,QAClB;AAAA,QACA,uBAAuB;AAAA,MACzB;AAAA,IACF;AAEA,UAAM,wBAAwB,KAAK;AAAA,MACjC,yBAAyB;AAAA,MACzB,yBAAyB;AAAA,IAC3B;AACA,QAAI,qBAAqB,yBAAyB,uBAAuB;AACvE,YAAM,yBAAyB;AAAA,QAC7B;AAAA,QACA;AAAA,QACA;AAAA,MACF;AACA,YAAM,2BAA2B;AAAA,QAC/B;AAAA,MACF;AAEA,YAAM,yBACJ,yBACA,2BACA;AACF,YAAM,0BAA0B,cAAc;AAC9C,YAAM,mBAAmB,0BACrB,gBACA,eAAe,eAAe,wBAAwB,cAAc;AAExE,aAAO;AAAA,QACL;AAAA,QACA,0BAA0B;AAAA,QAC1B,kBAAkB;AAAA,UAChB;AAAA,UACA;AAAA,UACA;AAAA,QACF;AAAA,QACA;AAAA,QACA,uBAAuB;AAAA,MACzB;AAAA,IACF,OAAO;AACL,YAAM,2BACJ,uBAAuB,iBAAiB;AAC1C,YAAM,yBACJ,yBACA,2BACA;AACF,YAAM,0BAA0B,cAAc;AAC9C,YAAM,mBAAmB,0BACrB,gBACA,eAAe,eAAe,wBAAwB,cAAc;AAExE,aAAO;AAAA,QACL;AAAA,QACA,0BAA0B;AAAA,QAC1B,kBAAkB;AAAA,UAChB;AAAA,UACA;AAAA,UACA;AAAA,QACF;AAAA,QACA;AAAA,QACA,uBAAuB;AAAA,MACzB;AAAA,IACF;AAAA,EACF,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AACH;",
   "names": ["valueWidth"]
 }

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

@@ -1,4 +1,4 @@
-._1ydozsr0-3-4-1 {
+._1ydozsr0-3-5-2 {
   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-4-1 {
+._1ydozsr1-3-5-2 {
   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-4-1";
-var customSymbolLarge = "_1ydozsr1-3-4-1 _1ydozsr0-3-4-1";
+var customSymbol = "_1ydozsr0-3-5-2";
+var customSymbolLarge = "_1ydozsr1-3-5-2 _1ydozsr0-3-5-2";
 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-4-1';\nexport var customSymbolLarge = '_1ydozsr1-3-4-1 _1ydozsr0-3-4-1';"],
+  "sourcesContent": ["import './seriesSymbol.css';\nexport var customSymbol = '_1ydozsr0-3-5-2';\nexport var customSymbolLarge = '_1ydozsr1-3-5-2 _1ydozsr0-3-5-2';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,eAAe;AACnB,IAAI,oBAAoB;",
   "names": []
 }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../../src/charts/core/components/overlay-tooltip/components/series/utils/get-display-text.ts"],
-  "sourcesContent": ["import { isValidNumber } from './is-valid-number.js';\nimport { charsFontWidth12pixelsSize400Map } from '../../../../text-ellipsis/chars-font-width-map.js';\nimport { TruncationMode } from '../../../../text-ellipsis/ChartTextEllipsis.js';\nimport { truncateString } from '../../../../text-ellipsis/truncate-string.js';\nimport { calculateTotalWidth400 } from '../../../utils/width-calculation.js';\n\n/**\n * @param text - The text to display\n * @param availableWidth - Maximum available width in pixels\n * @param truncationMode - The truncation mode to use\n * @returns The truncated text if necessary, or original text if it fits\n */\nexport const getDisplayText = (\n  text: string,\n  availableWidth: number | undefined,\n  truncationMode: TruncationMode,\n): string => {\n  if (!text || text.trim() === '') {\n    return text;\n  }\n\n  if (!isValidNumber(availableWidth)) {\n    return text;\n  }\n\n  const textWidth = calculateTotalWidth400(text);\n  if (textWidth <= availableWidth) {\n    return text;\n  }\n\n  return truncateString(\n    text,\n    availableWidth,\n    charsFontWidth12pixelsSize400Map,\n    truncationMode,\n  );\n};\n"],
-  "mappings": "AAAA,SAAS,qBAAqB;AAC9B,SAAS,wCAAwC;AAEjD,SAAS,sBAAsB;AAC/B,SAAS,8BAA8B;AAQhC,MAAM,iBAAiB,CAC5B,MACA,gBACA,mBACW;AACX,MAAI,CAAC,QAAQ,KAAK,KAAK,MAAM,IAAI;AAC/B,WAAO;AAAA,EACT;AAEA,MAAI,CAAC,cAAc,cAAc,GAAG;AAClC,WAAO;AAAA,EACT;AAEA,QAAM,YAAY,uBAAuB,IAAI;AAC7C,MAAI,aAAa,gBAAgB;AAC/B,WAAO;AAAA,EACT;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
+  "sourcesContent": ["import { isValidNumber } from './is-valid-number.js';\nimport type { TruncationMode } from '../../../../../../../typography/text-ellipsis/TextEllipsis.js';\nimport { charsFontWidth12pixelsSize400Map } from '../../../../text-ellipsis/chars-font-width-map.js';\nimport { truncateString } from '../../../../text-ellipsis/truncate-string.js';\nimport { calculateTotalWidth400 } from '../../../utils/width-calculation.js';\n\n/**\n * @param text - The text to display\n * @param availableWidth - Maximum available width in pixels\n * @param truncationMode - The truncation mode to use\n * @returns The truncated text if necessary, or original text if it fits\n */\nexport const getDisplayText = (\n  text: string,\n  availableWidth: number | undefined,\n  truncationMode: TruncationMode,\n): string => {\n  if (!text || text.trim() === '') {\n    return text;\n  }\n\n  if (!isValidNumber(availableWidth)) {\n    return text;\n  }\n\n  const textWidth = calculateTotalWidth400(text);\n  if (textWidth <= availableWidth) {\n    return text;\n  }\n\n  return truncateString(\n    text,\n    availableWidth,\n    charsFontWidth12pixelsSize400Map,\n    truncationMode,\n  );\n};\n"],
+  "mappings": "AAAA,SAAS,qBAAqB;AAE9B,SAAS,wCAAwC;AACjD,SAAS,sBAAsB;AAC/B,SAAS,8BAA8B;AAQhC,MAAM,iBAAiB,CAC5B,MACA,gBACA,mBACW;AACX,MAAI,CAAC,QAAQ,KAAK,KAAK,MAAM,IAAI;AAC/B,WAAO;AAAA,EACT;AAEA,MAAI,CAAC,cAAc,cAAc,GAAG;AAClC,WAAO;AAAA,EACT;AAEA,QAAM,YAAY,uBAAuB,IAAI;AAC7C,MAAI,aAAa,gBAAgB;AAC/B,WAAO;AAAA,EACT;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
   "names": []
 }

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

@@ -10,7 +10,6 @@ const SPACE_CHARACTER_WIDTH = 4;
 const SYMBOL_CONTAINER_WIDTH = 24;
 const GAP_BETWEEN_COLUMNS = 12;
 const SYMBOL_AND_SPACING_WIDTH = SYMBOL_CONTAINER_WIDTH + GAP_BETWEEN_COLUMNS;
-const OVERLAY_TOOLTIP_ELEVATION = 15;
 const MIN_TOOLTIP_WIDTH = 200;
 const MAX_TOOLTIP_WIDTH = 480;
 const SCROLLBAR_WIDTH = 14;
@@ -23,7 +22,6 @@ export {
   MAX_SERIES_NAME_LINES,
   MAX_TOOLTIP_WIDTH,
   MIN_TOOLTIP_WIDTH,
-  OVERLAY_TOOLTIP_ELEVATION,
   SCROLLBAR_WIDTH,
   SPACE_CHARACTER_WIDTH,
   SYMBOL_AND_SPACING_WIDTH,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/core/components/overlay-tooltip/constants.ts"],
-  "sourcesContent": ["export const TOOLTIP_HEADER_PADDING = 6;\nexport const TOOLTIP_WRAPPER_PADDING = 4;\nexport const TOOLTIP_CONTENT_PADDING =\n  TOOLTIP_HEADER_PADDING + TOOLTIP_WRAPPER_PADDING;\n\nexport const DEFAULT_HEADER_LINES = 3;\nexport const MAX_HEADER_LINES = 5;\nexport const DEFAULT_SERIES_NAME_LINES = 1;\nexport const MAX_SERIES_NAME_LINES = 2;\nexport const DEFAULT_TRUNCATION_MODE = 'end';\n\nexport const SPACE_CHARACTER_WIDTH = 4;\nconst SYMBOL_CONTAINER_WIDTH = 24;\nexport const GAP_BETWEEN_COLUMNS = 12;\nexport const SYMBOL_AND_SPACING_WIDTH =\n  SYMBOL_CONTAINER_WIDTH + GAP_BETWEEN_COLUMNS;\n\nexport const OVERLAY_TOOLTIP_ELEVATION = 15;\n\nexport const MIN_TOOLTIP_WIDTH = 200;\nexport const MAX_TOOLTIP_WIDTH = 480;\n\nexport const SCROLLBAR_WIDTH = 14;\n"],
-  "mappings": "AAAO,MAAM,yBAAyB;AAC/B,MAAM,0BAA0B;AAChC,MAAM,0BACX,yBAAyB;AAEpB,MAAM,uBAAuB;AAC7B,MAAM,mBAAmB;AACzB,MAAM,4BAA4B;AAClC,MAAM,wBAAwB;AAC9B,MAAM,0BAA0B;AAEhC,MAAM,wBAAwB;AACrC,MAAM,yBAAyB;AACxB,MAAM,sBAAsB;AAC5B,MAAM,2BACX,yBAAyB;AAEpB,MAAM,4BAA4B;AAElC,MAAM,oBAAoB;AAC1B,MAAM,oBAAoB;AAE1B,MAAM,kBAAkB;",
+  "sourcesContent": ["export const TOOLTIP_HEADER_PADDING = 6;\nexport const TOOLTIP_WRAPPER_PADDING = 4;\nexport const TOOLTIP_CONTENT_PADDING =\n  TOOLTIP_HEADER_PADDING + TOOLTIP_WRAPPER_PADDING;\n\nexport const DEFAULT_HEADER_LINES = 3;\nexport const MAX_HEADER_LINES = 5;\nexport const DEFAULT_SERIES_NAME_LINES = 1;\nexport const MAX_SERIES_NAME_LINES = 2;\nexport const DEFAULT_TRUNCATION_MODE = 'end';\n\nexport const SPACE_CHARACTER_WIDTH = 4;\nconst SYMBOL_CONTAINER_WIDTH = 24;\nexport const GAP_BETWEEN_COLUMNS = 12;\nexport const SYMBOL_AND_SPACING_WIDTH =\n  SYMBOL_CONTAINER_WIDTH + GAP_BETWEEN_COLUMNS;\n\nexport const MIN_TOOLTIP_WIDTH = 200;\nexport const MAX_TOOLTIP_WIDTH = 480;\n\nexport const SCROLLBAR_WIDTH = 14;\n"],
+  "mappings": "AAAO,MAAM,yBAAyB;AAC/B,MAAM,0BAA0B;AAChC,MAAM,0BACX,yBAAyB;AAEpB,MAAM,uBAAuB;AAC7B,MAAM,mBAAmB;AACzB,MAAM,4BAA4B;AAClC,MAAM,wBAAwB;AAC9B,MAAM,0BAA0B;AAEhC,MAAM,wBAAwB;AACrC,MAAM,yBAAyB;AACxB,MAAM,sBAAsB;AAC5B,MAAM,2BACX,yBAAyB;AAEpB,MAAM,oBAAoB;AAC1B,MAAM,oBAAoB;AAE1B,MAAM,kBAAkB;",
   "names": []
 }

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

@@ -36,7 +36,7 @@ const useDynamicTooltip = (args) => {
     y: -1,
     getBoundingClientRect: createDOMRect({ x: -1, y: -1 })
   });
-  const overlayStacking = useOverlayStacking(0, "dropdown");
+  const overlayStacking = useOverlayStacking(0, "overlay");
   if (x !== virtualElement.current.x || y !== virtualElement.current.y) {
     virtualElement.current = {
       x,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/core/components/overlay-tooltip/hooks/useDynamicTooltip.ts"],
-  "sourcesContent": ["import { StrictModifiers } from '@popperjs/core';\nimport { type CSSProperties, useRef } from 'react';\nimport { usePopper } from 'react-popper';\n\nimport { useOverlayStacking } from '../../../../../core/hooks/useOverlayStacking.js';\nimport { createDOMRect } from '../../../../../core/utils/create-dom-rect.js';\n\nconst OPTIONS: {\n  strategy: 'fixed';\n  placement: 'right-start';\n  modifiers: StrictModifiers[];\n} = {\n  strategy: 'fixed',\n  placement: 'right-start',\n  modifiers: [\n    {\n      name: 'arrow',\n      enabled: false,\n    },\n    {\n      name: 'offset',\n      options: {\n        offset: [-10, 10],\n      },\n    },\n    {\n      name: 'eventListeners',\n      enabled: false,\n    },\n    {\n      name: 'flip',\n      options: {\n        padding: 10,\n        flipVariations: false,\n      },\n    },\n  ],\n};\n\nexport const useDynamicTooltip = (args: {\n  template: HTMLDivElement | null;\n  x: number;\n  y: number;\n}): {\n  style: CSSProperties;\n} => {\n  const { template, x, y } = args;\n  const virtualElement = useRef({\n    x: -1,\n    y: -1,\n    getBoundingClientRect: createDOMRect({ x: -1, y: -1 }),\n  });\n  const overlayStacking = useOverlayStacking(0, 'dropdown');\n\n  if (x !== virtualElement.current.x || y !== virtualElement.current.y) {\n    virtualElement.current = {\n      x,\n      y,\n      getBoundingClientRect: createDOMRect({ x, y }),\n    };\n  }\n  const { styles, attributes } = usePopper(\n    virtualElement.current,\n    template,\n    OPTIONS,\n  );\n\n  return {\n    style: {\n      ...styles.popper,\n      zIndex: `${overlayStacking.style.zIndex}`,\n    },\n    ...attributes.popper,\n  };\n};\n"],
-  "mappings": "AACA,SAA6B,cAAc;AAC3C,SAAS,iBAAiB;AAE1B,SAAS,0BAA0B;AACnC,SAAS,qBAAqB;AAE9B,MAAM,UAIF;AAAA,EACF,UAAU;AAAA,EACV,WAAW;AAAA,EACX,WAAW;AAAA,IACT;AAAA,MACE,MAAM;AAAA,MACN,SAAS;AAAA,IACX;AAAA,IACA;AAAA,MACE,MAAM;AAAA,MACN,SAAS;AAAA,QACP,QAAQ,CAAC,KAAK,EAAE;AAAA,MAClB;AAAA,IACF;AAAA,IACA;AAAA,MACE,MAAM;AAAA,MACN,SAAS;AAAA,IACX;AAAA,IACA;AAAA,MACE,MAAM;AAAA,MACN,SAAS;AAAA,QACP,SAAS;AAAA,QACT,gBAAgB;AAAA,MAClB;AAAA,IACF;AAAA,EACF;AACF;AAEO,MAAM,oBAAoB,CAAC,SAM7B;AACH,QAAM,EAAE,UAAU,GAAG,EAAE,IAAI;AAC3B,QAAM,iBAAiB,OAAO;AAAA,IAC5B,GAAG;AAAA,IACH,GAAG;AAAA,IACH,uBAAuB,cAAc,EAAE,GAAG,IAAI,GAAG,GAAG,CAAC;AAAA,EACvD,CAAC;AACD,QAAM,kBAAkB,mBAAmB,GAAG,UAAU;AAExD,MAAI,MAAM,eAAe,QAAQ,KAAK,MAAM,eAAe,QAAQ,GAAG;AACpE,mBAAe,UAAU;AAAA,MACvB;AAAA,MACA;AAAA,MACA,uBAAuB,cAAc,EAAE,GAAG,EAAE,CAAC;AAAA,IAC/C;AAAA,EACF;AACA,QAAM,EAAE,QAAQ,WAAW,IAAI;AAAA,IAC7B,eAAe;AAAA,IACf;AAAA,IACA;AAAA,EACF;AAEA,SAAO;AAAA,IACL,OAAO;AAAA,MACL,GAAG,OAAO;AAAA,MACV,QAAQ,GAAG,gBAAgB,MAAM,MAAM;AAAA,IACzC;AAAA,IACA,GAAG,WAAW;AAAA,EAChB;AACF;",
+  "sourcesContent": ["import { StrictModifiers } from '@popperjs/core';\nimport { type CSSProperties, useRef } from 'react';\nimport { usePopper } from 'react-popper';\n\nimport { useOverlayStacking } from '../../../../../core/hooks/useOverlayStacking.js';\nimport { createDOMRect } from '../../../../../core/utils/create-dom-rect.js';\n\nconst OPTIONS: {\n  strategy: 'fixed';\n  placement: 'right-start';\n  modifiers: StrictModifiers[];\n} = {\n  strategy: 'fixed',\n  placement: 'right-start',\n  modifiers: [\n    {\n      name: 'arrow',\n      enabled: false,\n    },\n    {\n      name: 'offset',\n      options: {\n        offset: [-10, 10],\n      },\n    },\n    {\n      name: 'eventListeners',\n      enabled: false,\n    },\n    {\n      name: 'flip',\n      options: {\n        padding: 10,\n        flipVariations: false,\n      },\n    },\n  ],\n};\n\nexport const useDynamicTooltip = (args: {\n  template: HTMLDivElement | null;\n  x: number;\n  y: number;\n}): {\n  style: CSSProperties;\n} => {\n  const { template, x, y } = args;\n  const virtualElement = useRef({\n    x: -1,\n    y: -1,\n    getBoundingClientRect: createDOMRect({ x: -1, y: -1 }),\n  });\n  const overlayStacking = useOverlayStacking(0, 'overlay');\n\n  if (x !== virtualElement.current.x || y !== virtualElement.current.y) {\n    virtualElement.current = {\n      x,\n      y,\n      getBoundingClientRect: createDOMRect({ x, y }),\n    };\n  }\n  const { styles, attributes } = usePopper(\n    virtualElement.current,\n    template,\n    OPTIONS,\n  );\n\n  return {\n    style: {\n      ...styles.popper,\n      zIndex: `${overlayStacking.style.zIndex}`,\n    },\n    ...attributes.popper,\n  };\n};\n"],
+  "mappings": "AACA,SAA6B,cAAc;AAC3C,SAAS,iBAAiB;AAE1B,SAAS,0BAA0B;AACnC,SAAS,qBAAqB;AAE9B,MAAM,UAIF;AAAA,EACF,UAAU;AAAA,EACV,WAAW;AAAA,EACX,WAAW;AAAA,IACT;AAAA,MACE,MAAM;AAAA,MACN,SAAS;AAAA,IACX;AAAA,IACA;AAAA,MACE,MAAM;AAAA,MACN,SAAS;AAAA,QACP,QAAQ,CAAC,KAAK,EAAE;AAAA,MAClB;AAAA,IACF;AAAA,IACA;AAAA,MACE,MAAM;AAAA,MACN,SAAS;AAAA,IACX;AAAA,IACA;AAAA,MACE,MAAM;AAAA,MACN,SAAS;AAAA,QACP,SAAS;AAAA,QACT,gBAAgB;AAAA,MAClB;AAAA,IACF;AAAA,EACF;AACF;AAEO,MAAM,oBAAoB,CAAC,SAM7B;AACH,QAAM,EAAE,UAAU,GAAG,EAAE,IAAI;AAC3B,QAAM,iBAAiB,OAAO;AAAA,IAC5B,GAAG;AAAA,IACH,GAAG;AAAA,IACH,uBAAuB,cAAc,EAAE,GAAG,IAAI,GAAG,GAAG,CAAC;AAAA,EACvD,CAAC;AACD,QAAM,kBAAkB,mBAAmB,GAAG,SAAS;AAEvD,MAAI,MAAM,eAAe,QAAQ,KAAK,MAAM,eAAe,QAAQ,GAAG;AACpE,mBAAe,UAAU;AAAA,MACvB;AAAA,MACA;AAAA,MACA,uBAAuB,cAAc,EAAE,GAAG,EAAE,CAAC;AAAA,IAC/C;AAAA,EACF;AACA,QAAM,EAAE,QAAQ,WAAW,IAAI;AAAA,IAC7B,eAAe;AAAA,IACf;AAAA,IACA;AAAA,EACF;AAEA,SAAO;AAAA,IACL,OAAO;AAAA,MACL,GAAG,OAAO;AAAA,MACV,QAAQ,GAAG,gBAAgB,MAAM,MAAM;AAAA,IACzC;AAAA,IACA,GAAG,WAAW;AAAA,EAChB;AACF;",
   "names": []
 }

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

@@ -1,4 +1,4 @@
-._1j1seex4-3-4-1 {
+._1j1seex4-3-5-2 {
   box-sizing: border-box;
   padding: var(--dt-spacings-size-4, 4px);
   border-radius: var(--dt-borders-radius-surface-subdued, 9px);
@@ -8,29 +8,28 @@
   overflow: hidden;
   top: 0;
   left: 0;
-  z-index: 15;
   color: currentColor;
   min-width: 200px;
   max-width: 480px;
 }
-._1j1seex4-3-4-1[data-placement="right"] {
+._1j1seex4-3-5-2[data-placement="right"] {
   transform-origin: 0 calc(1rem + 18px);
 }
-._1j1seex4-3-4-1[data-placement="left"] {
+._1j1seex4-3-5-2[data-placement="left"] {
   transform-origin: 100% calc(1rem + 18px);
 }
-._1j1seex5-3-4-1 {
+._1j1seex5-3-5-2 {
   pointer-events: all;
 }
-._1j1seex5-3-4-1[data-popper-reference-hidden=true] {
+._1j1seex5-3-5-2[data-popper-reference-hidden=true] {
   visibility: hidden;
   pointer-events: none;
 }
-._1j1seex6-3-4-1 {
+._1j1seex6-3-5-2 {
   pointer-events: none;
   user-select: none;
 }
-._1j1seex7-3-4-1 {
+._1j1seex7-3-5-2 {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
   font-family: var(--dt-typography-text-small-emphasized-family, DynatraceFlow,Roboto,Helvetica,sans-serif);
   font-size: var(--dt-typography-text-small-emphasized-size, 12px);
@@ -43,33 +42,33 @@
   box-sizing: border-box;
   padding: var(--dt-spacings-size-4, 4px) var(--dt-spacings-size-6, 6px);
 }
-._1j1seex8-3-4-1 {
+._1j1seex8-3-5-2 {
   min-width: 0;
 }
-._1j1seex9-3-4-1 {
+._1j1seex9-3-5-2 {
   min-width: 0;
   text-align: right;
 }
-._1j1seexa-3-4-1 {
+._1j1seexa-3-5-2 {
   min-height: 24px;
   max-height: 192px;
   overflow-y: auto;
   overflow-x: hidden;
 }
-._1j1seexb-3-4-1 {
+._1j1seexb-3-5-2 {
   width: 100%;
 }
-._1j1seexc-3-4-1 {
+._1j1seexc-3-5-2 {
   display: grid;
   width: 100%;
   position: relative;
   gap: 2px 16px;
 }
-._1j1seexd-3-4-1 {
+._1j1seexd-3-5-2 {
   width: 100%;
   position: relative;
 }
-._1j1seexe-3-4-1 {
+._1j1seexe-3-5-2 {
   display: grid;
   align-items: flex-start;
   box-sizing: border-box;
@@ -81,20 +80,22 @@
   width: 100%;
   min-width: fit-content;
 }
-._1j1seexf-3-4-1 {
+._1j1seexf-3-5-2 {
   grid-template-areas: "symbol name value";
-  grid-template-columns: var(--_1j1seex3-3-4-1) 1fr auto;
+  grid-template-columns: var(--_1j1seex3-3-5-2) 1fr auto;
   padding-right: var(--dt-spacings-size-6, 6px);
 }
-._1j1seexg-3-4-1 {
+._1j1seexg-3-5-2 {
   grid-template-areas: "name value symbol";
-  grid-template-columns: 1fr auto var(--_1j1seex3-3-4-1);
+  grid-template-columns: 1fr auto var(--_1j1seex3-3-5-2);
   padding-left: var(--dt-spacings-size-6, 6px);
 }
-._1j1seexh-3-4-1 {
+._1j1seexh-3-5-2 {
   padding-right: var(--dt-spacings-size-0, 0);
 }
-._1j1seexi-3-4-1 {
+._1j1seexi-3-5-2 {
+  all: unset;
+  display: block;
   width: 100%;
   box-sizing: border-box;
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
@@ -103,12 +104,12 @@
   line-height: var(--dt-typography-text-small-default-line-height, 1.333333333);
   cursor: pointer;
 }
-._1j1seexj-3-4-1 {
+._1j1seexj-3-5-2 {
   display: flex;
   align-items: flex-start;
   width: 100%;
 }
-._1j1seexk-3-4-1 {
+._1j1seexk-3-5-2 {
   display: flex;
   align-items: center;
   justify-content: flex-end;
@@ -120,30 +121,30 @@
   flex-shrink: 0;
   color: currentColor;
 }
-._1j1seexl-3-4-1 {
+._1j1seexl-3-5-2 {
   margin-left: calc(var(--dt-spacings-size-2, 2px) - var(--dt-spacings-size-6, 6px));
 }
-._1j1seexm-3-4-1 {
+._1j1seexm-3-5-2 {
   border-radius: var(--dt-borders-radius-container-subdued, 6px);
   background-color: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
 }
-._1j1seexn-3-4-1 {
+._1j1seexn-3-5-2 {
   padding-top: var(--dt-spacings-size-4, 4px);
   padding-bottom: var(--dt-spacings-size-4, 4px);
 }
-._1j1seexo-3-4-1 {
+._1j1seexo-3-5-2 {
   display: -webkit-box;
-  -webkit-line-clamp: var(--_1j1seex0-3-4-1);
+  -webkit-line-clamp: var(--_1j1seex0-3-5-2);
   -webkit-box-orient: vertical;
   overflow: hidden;
   word-break: break-word;
 }
-._1j1seexp-3-4-1 {
+._1j1seexp-3-5-2 {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
   font-size: var(--dt-typography-text-small-default-size, 12px);
   padding-left: var(--dt-spacings-size-6, 6px);
 }
-._1j1seexq-3-4-1 {
+._1j1seexq-3-5-2 {
   height: var(--dt-spacings-size-24, 24px);
   line-height: var(--dt-spacings-size-24, 24px);
   width: var(--dt-spacings-size-24, 24px);
@@ -152,10 +153,10 @@
   min-width: var(--dt-spacings-size-24, 24px);
   align-items: center;
 }
-._1j1seexr-3-4-1 {
+._1j1seexr-3-5-2 {
   margin-right: -6px;
 }
-._1j1seexs-3-4-1 {
+._1j1seexs-3-5-2 {
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
   font-family: var(--dt-typography-text-small-emphasized-family, DynatraceFlow,Roboto,Helvetica,sans-serif);
   font-size: var(--dt-typography-text-small-emphasized-size, 12px);
@@ -164,25 +165,25 @@
   box-sizing: border-box;
   padding: var(--dt-spacings-size-4, 4px) var(--dt-spacings-size-6, 6px);
 }
-._1j1seext-3-4-1 {
+._1j1seext-3-5-2 {
   min-width: 0;
   flex: 1;
 }
-._1j1seexu-3-4-1 {
+._1j1seexu-3-5-2 {
   flex-shrink: 0;
   text-align: right;
 }
-._1j1seexv-3-4-1 {
+._1j1seexv-3-5-2 {
   display: flex;
   align-items: flex-start;
   min-width: 0;
 }
-._1j1seexw-3-4-1 {
+._1j1seexw-3-5-2 {
   display: flex;
   justify-content: flex-end;
   align-items: center;
 }
-._1j1seexx-3-4-1 {
+._1j1seexx-3-5-2 {
   display: flex;
   flex-direction: column;
   list-style: none;
@@ -190,15 +191,15 @@
   margin-block: var(--dt-spacings-size-0, 0);
   padding-block: var(--dt-spacings-size-4, 4px);
 }
-._1j1seexy-3-4-1 {
+._1j1seexy-3-5-2 {
   margin-top: var(--dt-spacings-size-4, 4px);
   margin-bottom: var(--dt-spacings-size-4, 4px);
 }
-._1j1seexz-3-4-1 {
+._1j1seexz-3-5-2 {
   margin-left: -6px;
   padding-left: var(--dt-spacings-size-6, 6px);
 }
-._1j1seex10-3-4-1 {
+._1j1seex10-3-5-2 {
   font-family: var(--dt-typography-text-small-default-family, DynatraceFlow,Roboto,Helvetica,sans-serif);
   font-weight: var(--dt-typography-text-small-default-weight, 400);
   font-size: var(--dt-typography-text-small-default-size, 12px);
@@ -208,19 +209,19 @@
   max-width: 480px;
   box-sizing: border-box;
 }
-._1j1seex11-3-4-1 {
+._1j1seex11-3-5-2 {
   display: -webkit-box;
   -webkit-box-orient: vertical;
-  -webkit-line-clamp: var(--_1j1seex2-3-4-1);
+  -webkit-line-clamp: var(--_1j1seex2-3-5-2);
   overflow: hidden;
   text-overflow: ellipsis;
   word-break: break-word;
 }
-._1j1seex12-3-4-1 {
+._1j1seex12-3-5-2 {
   display: flex;
   flex-direction: column;
 }
-._1j1seex4-3-4-1:not(:has(._1j1seex12-3-4-1:hover)) ._1j1seex13-3-4-1 {
+._1j1seex4-3-5-2:not(:has(._1j1seex12-3-5-2:hover)) ._1j1seex13-3-5-2 {
   border-radius: var(--dt-borders-radius-container-subdued, 6px);
   background-color: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
 }

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

@@ -1,40 +1,40 @@
 import "./tooltip.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
 var TOOLTIP_MAX_WIDTH = 480;
-var actionsContainer = "_1j1seex12-3-4-1";
-var chevron = "_1j1seexk-3-4-1";
-var chevronRightAligned = "_1j1seexl-3-4-1";
-var divider = "_1j1seexy-3-4-1";
-var headerText = "_1j1seexs-3-4-1";
-var multiLineName = "_1j1seexx-3-4-1";
-var relativeValueStyle = "_1j1seexp-3-4-1";
-var seriesActionHeader = "_1j1seex10-3-4-1";
-var seriesActionHeaderMaxLinesVar = "var(--_1j1seex2-3-4-1)";
-var seriesActionHeaderMultiLine = "_1j1seex11-3-4-1";
-var seriesGridContainer = "_1j1seexb-3-4-1";
-var seriesHeader = "_1j1seex7-3-4-1";
-var seriesHeaderName = "_1j1seex8-3-4-1";
-var seriesHeaderValue = "_1j1seex9-3-4-1";
-var seriesItem = _7a468({ defaultClassName: "_1j1seexe-3-4-1", variantClassNames: { symbolPosition: { left: "_1j1seexf-3-4-1", right: "_1j1seexg-3-4-1" }, hasChevron: { true: "_1j1seexh-3-4-1" } }, defaultVariants: { symbolPosition: "left", hasChevron: false }, compoundVariants: [] });
-var seriesItemActive = "_1j1seexm-3-4-1";
-var seriesItemHighlighted = "_1j1seex13-3-4-1";
-var seriesItemMaxWidthVar = "var(--_1j1seex1-3-4-1)";
-var seriesItemText = "_1j1seexn-3-4-1";
-var seriesItemWithChevron = "_1j1seexj-3-4-1";
-var seriesItemWrapper = "_1j1seexi-3-4-1";
-var seriesNameCell = "_1j1seexv-3-4-1";
-var seriesNameMaxLinesVar = "var(--_1j1seex0-3-4-1)";
-var seriesNameText = "_1j1seext-3-4-1";
-var seriesNameTextMultiLine = "_1j1seexo-3-4-1";
-var seriesOverflowContainer = "_1j1seexd-3-4-1";
-var seriesOverflowContainerBase = "_1j1seexc-3-4-1";
-var seriesValueCell = "_1j1seexw-3-4-1";
-var seriesValueText = "_1j1seexu-3-4-1";
-var seriesWrapper = "_1j1seexa-3-4-1";
-var spaceSavedForSymbolVar = "var(--_1j1seex3-3-4-1)";
-var symbolRight = "_1j1seexz-3-4-1";
-var symbolWrapper = _7a468({ defaultClassName: "_1j1seexq-3-4-1", variantClassNames: { isRight: { true: "_1j1seexr-3-4-1" } }, defaultVariants: {}, compoundVariants: [] });
-var wrapper = _7a468({ defaultClassName: "_1j1seex4-3-4-1", variantClassNames: { isInteractive: { true: "_1j1seex5-3-4-1", false: "_1j1seex6-3-4-1" } }, defaultVariants: {}, compoundVariants: [] });
+var actionsContainer = "_1j1seex12-3-5-2";
+var chevron = "_1j1seexk-3-5-2";
+var chevronRightAligned = "_1j1seexl-3-5-2";
+var divider = "_1j1seexy-3-5-2";
+var headerText = "_1j1seexs-3-5-2";
+var multiLineName = "_1j1seexx-3-5-2";
+var relativeValueStyle = "_1j1seexp-3-5-2";
+var seriesActionHeader = "_1j1seex10-3-5-2";
+var seriesActionHeaderMaxLinesVar = "var(--_1j1seex2-3-5-2)";
+var seriesActionHeaderMultiLine = "_1j1seex11-3-5-2";
+var seriesGridContainer = "_1j1seexb-3-5-2";
+var seriesHeader = "_1j1seex7-3-5-2";
+var seriesHeaderName = "_1j1seex8-3-5-2";
+var seriesHeaderValue = "_1j1seex9-3-5-2";
+var seriesItem = _7a468({ defaultClassName: "_1j1seexe-3-5-2", variantClassNames: { symbolPosition: { left: "_1j1seexf-3-5-2", right: "_1j1seexg-3-5-2" }, hasChevron: { true: "_1j1seexh-3-5-2" } }, defaultVariants: { symbolPosition: "left", hasChevron: false }, compoundVariants: [] });
+var seriesItemActive = "_1j1seexm-3-5-2";
+var seriesItemHighlighted = "_1j1seex13-3-5-2";
+var seriesItemMaxWidthVar = "var(--_1j1seex1-3-5-2)";
+var seriesItemText = "_1j1seexn-3-5-2";
+var seriesItemWithChevron = "_1j1seexj-3-5-2";
+var seriesItemWrapper = "_1j1seexi-3-5-2";
+var seriesNameCell = "_1j1seexv-3-5-2";
+var seriesNameMaxLinesVar = "var(--_1j1seex0-3-5-2)";
+var seriesNameText = "_1j1seext-3-5-2";
+var seriesNameTextMultiLine = "_1j1seexo-3-5-2";
+var seriesOverflowContainer = "_1j1seexd-3-5-2";
+var seriesOverflowContainerBase = "_1j1seexc-3-5-2";
+var seriesValueCell = "_1j1seexw-3-5-2";
+var seriesValueText = "_1j1seexu-3-5-2";
+var seriesWrapper = "_1j1seexa-3-5-2";
+var spaceSavedForSymbolVar = "var(--_1j1seex3-3-5-2)";
+var symbolRight = "_1j1seexz-3-5-2";
+var symbolWrapper = _7a468({ defaultClassName: "_1j1seexq-3-5-2", variantClassNames: { isRight: { true: "_1j1seexr-3-5-2" } }, defaultVariants: {}, compoundVariants: [] });
+var wrapper = _7a468({ defaultClassName: "_1j1seex4-3-5-2", variantClassNames: { isInteractive: { true: "_1j1seex5-3-5-2", false: "_1j1seex6-3-5-2" } }, defaultVariants: {}, compoundVariants: [] });
 export {
   TOOLTIP_MAX_WIDTH,
   actionsContainer,