@dynatrace/strato-components 3.5.2 → 3.6.0

package/charts/core/components/legend/range/components/RangeLegendSegments/RangeLegendSegments.sty.js

@@ -22,4 +22,4 @@ __export(RangeLegendSegments_css_exports, {
 module.exports = __toCommonJS(RangeLegendSegments_css_exports);
 var import_RangeLegendSegments_css_ts_vanilla = require("./RangeLegendSegments.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var legendSvg = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_6z9t250-3-5-2", variantClassNames: { isHorizontal: { true: "_6z9t251-3-5-2", false: "_6z9t252-3-5-2" } }, defaultVariants: {}, compoundVariants: [] });
+var legendSvg = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_6z9t250-3-6-0", variantClassNames: { isHorizontal: { true: "_6z9t251-3-6-0", false: "_6z9t252-3-6-0" } }, defaultVariants: {}, compoundVariants: [] });

package/charts/core/components/loader-overlay/LoaderOverlay.css

@@ -1,4 +1,4 @@
-._bs5vaz0-3-5-2 {
+._bs5vaz0-3-6-0 {
   position: absolute;
   top: 0;
   width: 100%;
@@ -6,7 +6,7 @@
   z-index: 1;
   pointer-events: none;
 }
-._bs5vaz1-3-5-2 {
+._bs5vaz1-3-6-0 {
   position: absolute;
   top: 0;
   width: 100%;

package/charts/core/components/loader-overlay/LoaderOverlay.sty.js

@@ -22,5 +22,5 @@ __export(LoaderOverlay_css_exports, {
 });
 module.exports = __toCommonJS(LoaderOverlay_css_exports);
 var import_LoaderOverlay_css_ts_vanilla = require("./LoaderOverlay.css");
-var loaderOverlay = "_bs5vaz0-3-5-2";
-var progressCircle = "_bs5vaz1-3-5-2";
+var loaderOverlay = "_bs5vaz0-3-6-0";
+var progressCircle = "_bs5vaz1-3-6-0";

package/charts/core/components/overlay-tooltip/OverlayTooltip.d.ts

@@ -7,6 +7,7 @@ import type { OverlayTooltipProps } from './types.js';
 export declare const OverlayTooltip: ((props: PropsWithChildren<OverlayTooltipProps>) => import("react/jsx-runtime").JSX.Element) & {
     Action: (props: import("./components/global-actions/Action.js").ActionProps) => import("react/jsx-runtime").JSX.Element;
     ActionsPlaceholder: (_props: import("./components/global-actions/ActionsPlaceholder.js").ActionsPlaceholderProps) => null;
+    Footer: ({ actions, unpinnedPlaceholderText }: import("./components/Footer.js").FooterProps) => import("react/jsx-runtime").JSX.Element | null;
     Header: (props: import("./components/header/types/header.js").HeaderProps) => import("react/jsx-runtime").JSX.Element | null;
     Series: <T extends Record<string, unknown>>(props: {
         data: T[];
@@ -31,6 +32,8 @@ export declare const ChartTooltip: {
 } & {
     Action: (props: import("./components/global-actions/Action.js").ActionProps) => import("react/jsx-runtime").JSX.Element;
     ActionsPlaceholder: (_props: import("./components/global-actions/ActionsPlaceholder.js").ActionsPlaceholderProps) => null;
+    Footer: ({ actions, unpinnedPlaceholderText }: import("./components/Footer.js").FooterProps) => import("react/jsx-runtime").JSX.Element | null;
+    Header: (props: import("./components/header/types/header.js").HeaderProps) => import("react/jsx-runtime").JSX.Element | null;
     Series: <T extends Record<string, unknown>>(props: {
         data: T[];
         seriesItemTemplate: (item: T) => import("react").JSX.Element;

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

@@ -24,6 +24,7 @@ __export(OverlayTooltip_exports, {
 module.exports = __toCommonJS(OverlayTooltip_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_DynamicTooltipRenderer = require("./components/DynamicTooltipRenderer.js");
+var import_Footer = require("./components/Footer.js");
 var import_Action = require("./components/global-actions/Action.js");
 var import_ActionsPlaceholder = require("./components/global-actions/ActionsPlaceholder.js");
 var import_Header = require("./components/header/Header.js");
@@ -48,6 +49,7 @@ const TooltipRoot = (props) => {
 const OverlayTooltip = Object.assign(TooltipRoot, {
   Action: import_Action.Action,
   ActionsPlaceholder: import_ActionsPlaceholder.ActionsPlaceholder,
+  Footer: import_Footer.Footer,
   Header: import_Header.Header,
   Series: import_Series.Series,
   SeriesHeader: import_SeriesHeader.SeriesHeader,
@@ -58,6 +60,8 @@ Tooltip.displayName = "ChartTooltip";
 const ChartTooltip = Object.assign(Tooltip, {
   Action: import_Action.Action,
   ActionsPlaceholder: import_ActionsPlaceholder.ActionsPlaceholder,
+  Footer: import_Footer.Footer,
+  Header: import_Header.Header,
   Series: import_Series.Series,
   SeriesHeader: import_SeriesHeader.SeriesHeader,
   SeriesItem: import_SeriesItem.SeriesItem

package/charts/core/components/overlay-tooltip/_to-be-removed/DummyInteractionsOverlay.js

@@ -55,8 +55,12 @@ const DummyInteractionsOverlay = (props) => {
       className: import_InteractionsOverlay_css.interactionsOverlay,
       onPointerMove: (event) => (0, import_utils.isOwnEvent)(event) && dispatch({
         type: "SET_POSITION",
-        payload: props.getData()
-      })(event),
+        payload: {
+          data: props.getData(),
+          absoluteX: Math.round(event.clientX),
+          absoluteY: Math.round(event.clientY)
+        }
+      })(),
       onPointerLeave: dispatch({ type: "SET_OUT_BOUNDS" }),
       onClick: (event) => {
         if (!(0, import_utils.isOwnEvent)(event)) {
@@ -76,14 +80,13 @@ const DummyInteractionsOverlay = (props) => {
             }
           })();
         } else {
-          const { offsetX, offsetY } = event.nativeEvent;
           dispatch({
             type: "SET_PINNED",
             payload: {
               pinned: true,
               data: props.getData(),
-              relativeX: offsetX,
-              relativeY: offsetY
+              absoluteX: Math.round(event.clientX),
+              absoluteY: Math.round(event.clientY)
             }
           })();
         }

package/charts/core/components/overlay-tooltip/_to-be-removed/_OverlayTooltipWIPStory.js

@@ -114,8 +114,8 @@ const TogglePinned = (props) => {
           type: "SET_PINNED",
           payload: {
             pinned: true,
-            relativeX: 10,
-            relativeY: 30,
+            absoluteX: 10,
+            absoluteY: 30,
             data: props.getData ? props.getData() : import_MyTooltip.TooltipData[0].data()
           }
         })();

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

@@ -39,8 +39,13 @@ const DynamicTooltipRenderer = (props) => {
   if (!inBounds || (0, import_lodash_es.isNull)(absoluteX) || (0, import_lodash_es.isNull)(absoluteY) || (0, import_utils.isTooltipDataEmpty)(data)) {
     return;
   }
+  const { config, content } = (0, import_build_content.buildContent)(props.children, defaultConfig, {
+    userSymbolPosition: props.symbolAlignment,
+    userTruncationMode: props.truncation ?? import_constants.DEFAULT_TRUNCATION_MODE,
+    customTooltip: !!props.legacyTemplate
+  });
   if (props.legacyTemplate) {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ExternalConfigContext.ExternalConfigContext.Provider, { value: config, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_LegacyTemplateTooltip.LegacyTemplateTooltip,
       {
         pinned,
@@ -48,11 +53,7 @@ const DynamicTooltipRenderer = (props) => {
         absoluteY,
         children: props.legacyTemplate
       }
-    );
+    ) });
   }
-  const { config, content } = (0, import_build_content.buildContent)(props.children, defaultConfig, {
-    userSymbolPosition: props.symbolAlignment,
-    userTruncationMode: props.truncation ?? import_constants.DEFAULT_TRUNCATION_MODE
-  });
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_DynamicTooltip.DynamicTooltip, { pinned, absoluteX, absoluteY, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ExternalConfigContext.ExternalConfigContext.Provider, { value: config, children: content }) });
 };

package/charts/core/components/overlay-tooltip/components/Footer.d.ts

@@ -0,0 +1,13 @@
+import { type ReactNode } from 'react';
+/**
+ * Props for the `ChartTooltip.Footer` slot.
+ * @public
+ */
+export interface FooterProps {
+    /** Global actions rendered in the footer when the tooltip is pinned. */
+    actions: ReactNode[];
+    /** Text shown in the footer when the tooltip is not yet pinned. Defaults to a built-in pin prompt message. */
+    unpinnedPlaceholderText: string | undefined;
+}
+/** @public */
+export declare const Footer: ({ actions, unpinnedPlaceholderText }: FooterProps) => import("react/jsx-runtime").JSX.Element | null;

package/charts/core/components/overlay-tooltip/components/{TooltipFooter.js → Footer.js}

@@ -25,21 +25,18 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   mod
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var TooltipFooter_exports = {};
-__export(TooltipFooter_exports, {
-  TooltipFooter: () => TooltipFooter
+var Footer_exports = {};
+__export(Footer_exports, {
+  Footer: () => Footer
 });
-module.exports = __toCommonJS(TooltipFooter_exports);
+module.exports = __toCommonJS(Footer_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_useIntl = __toESM(require("react-intl/src/components/useIntl.js"));
 var import_messages = require("../messages.js");
 var import_selectors = require("../selectors.js");
 var import_actions_css = require("./global-actions/actions.sty.js");
 var import_GlobalActions = require("./global-actions/GlobalActions.js");
-const TooltipFooter = ({
-  actions,
-  unpinnedPlaceholderText
-}) => {
+const Footer = ({ actions, unpinnedPlaceholderText }) => {
   const intl = (0, import_useIntl.default)();
   const { pinned } = (0, import_selectors.useTooltipSnapshot)();
   if (pinned) {

package/charts/core/components/overlay-tooltip/components/global-actions/Action.js

@@ -23,8 +23,10 @@ module.exports = __toCommonJS(Action_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_actions_css = require("./actions.sty.js");
 var import_Button = require("../../../../../../buttons/button/Button.js");
+var import_useTooltipReducer = require("../../useTooltipReducer.js");
 const Action = (props) => {
   const { label, icon, trailingIcon, onSelect, disabled } = props;
+  const dispatch = (0, import_useTooltipReducer.useTooltipReducer)();
   const handleKeyDown = (event) => {
     if (event.key === "Enter" || event.key === " ") {
       event.preventDefault();
@@ -40,6 +42,10 @@ const Action = (props) => {
       className: import_actions_css.actionButton,
       onClick: onSelect,
       onKeyDown: handleKeyDown,
+      onPointerEnter: dispatch({
+        type: "SET_ACTIVE_SERIES",
+        payload: { activeSeries: "global-action" }
+      }),
       width: "full",
       textAlign: "start",
       children: [

package/charts/core/components/overlay-tooltip/components/global-actions/GlobalActions.d.ts

@@ -1,6 +1,6 @@
-import { type JSX } from 'react';
+import { type ReactNode } from 'react';
 interface GlobalActionsProps {
-    actions: JSX.Element[];
+    actions: ReactNode[];
 }
 export declare const GlobalActions: ({ actions }: GlobalActionsProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/charts/core/components/overlay-tooltip/components/global-actions/GlobalActions.js

@@ -23,19 +23,9 @@ module.exports = __toCommonJS(GlobalActions_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_Divider = require("../../../../../../layouts/divider/Divider.js");
 var import_tooltip_css = require("../../tooltip.sty.js");
-var import_useTooltipReducer = require("../../useTooltipReducer.js");
 const GlobalActions = ({ actions }) => {
-  const dispatch = (0, import_useTooltipReducer.useTooltipReducer)();
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-    "div",
-    {
-      className: import_tooltip_css.actionsContainer,
-      "aria-label": "Tooltip actions",
-      onPointerMove: dispatch({ type: "TOOLTIP_MOUSE_LEAVE" }),
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Divider.Divider, { orientation: "horizontal", className: import_tooltip_css.divider }, "divider"),
-        actions
-      ]
-    }
-  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: import_tooltip_css.actionsContainer, "aria-label": "Tooltip actions", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Divider.Divider, { orientation: "horizontal", className: import_tooltip_css.divider }, "divider"),
+    actions
+  ] });
 };

package/charts/core/components/overlay-tooltip/components/global-actions/actions.css

@@ -1,4 +1,4 @@
-@keyframes _15am2yg1-3-5-2 {
+@keyframes _15am2yg1-3-6-0 {
   from {
     opacity: 0;
     max-height: 0;
@@ -12,7 +12,7 @@
     margin-top: var(--dt-spacings-size-4, 4px);
   }
 }
-._15am2yg0-3-5-2 {
+._15am2yg0-3-6-0 {
   display: block;
   padding: var(--dt-spacings-size-6, 6px) var(--dt-spacings-size-8, 8px);
   width: 100%;
@@ -24,7 +24,7 @@
   line-height: var(--dt-typography-text-base-emphasized-line-height, 1.4285714286);
   border-radius: var(--dt-borders-radius-field-default, 6px);
 }
-._15am2yg2-3-5-2 {
+._15am2yg2-3-6-0 {
   box-sizing: border-box;
   border-top: 1px solid var(--dt-colors-border-neutral-default, #dadbe4);
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
@@ -36,6 +36,6 @@
   padding: 0;
   margin-top: 0;
   overflow: hidden;
-  animation: _15am2yg1-3-5-2 var(--dt-animations-expand-collapse-duration-fast, 250ms) var(--dt-animations-expand-collapse-easing, cubic-bezier(0.4, 0, 0.2, 1)) both;
+  animation: _15am2yg1-3-6-0 var(--dt-animations-expand-collapse-duration-fast, 250ms) var(--dt-animations-expand-collapse-easing, cubic-bezier(0.4, 0, 0.2, 1)) both;
   animation-delay: 1200ms;
 }

package/charts/core/components/overlay-tooltip/components/global-actions/actions.sty.js

@@ -22,5 +22,5 @@ __export(actions_css_exports, {
 });
 module.exports = __toCommonJS(actions_css_exports);
 var import_actions_css_ts_vanilla = require("./actions.css");
-var actionButton = "_15am2yg0-3-5-2";
-var actionsPlaceholderTextAnimated = "_15am2yg2-3-5-2";
+var actionButton = "_15am2yg0-3-6-0";
+var actionsPlaceholderTextAnimated = "_15am2yg2-3-6-0";

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

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

package/charts/core/components/overlay-tooltip/components/header/Header.d.ts

@@ -1,2 +1,3 @@
 import { HeaderProps } from './types/header.js';
+/** @public */
 export declare const Header: (props: HeaderProps) => import("react/jsx-runtime").JSX.Element | null;

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

@@ -26,9 +26,9 @@ __export(Header_css_exports, {
 });
 module.exports = __toCommonJS(Header_css_exports);
 var import_Header_css_ts_vanilla = require("./Header.css");
-var headerContainer = "_1ldhlar2-3-5-2";
-var headerSubText = "_1ldhlar5-3-5-2";
-var headerText = "_1ldhlar3-3-5-2";
-var headerTextMultiLine = "_1ldhlar4-3-5-2";
-var headerWidthVar = "var(--_1ldhlar1-3-5-2)";
-var maxLinesVar = "var(--_1ldhlar0-3-5-2)";
+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)";

package/charts/core/components/overlay-tooltip/components/header/types/header.d.ts

@@ -1,7 +1,7 @@
 import type { HeaderData, TooltipValue } from '../../../types.js';
 /**
  * Primary header data for the tooltip, containing the main value and an optional subheader.
- * @internal
+ * @public
  */
 export interface HeaderDataInformation {
     /** The primary value displayed in the tooltip header row. */
@@ -11,7 +11,7 @@ export interface HeaderDataInformation {
 }
 /**
  * Extended header data that additionally supports a duration display and label override.
- * @internal
+ * @public
  */
 export interface HeaderDataWithDuration extends HeaderDataInformation {
     /** When `true`, renders the elapsed duration between the header range values. */
@@ -42,7 +42,7 @@ export interface HeaderDataWithDuration extends HeaderDataInformation {
 }
 /**
  * Props for the `ChartTooltip.Header` slot, controlling the tooltip header content.
- * @internal
+ * @public
  */
 export type HeaderProps = HeaderDataWithDuration;
 export type HeaderValueFormatter = (value: TooltipValue | [TooltipValue, TooltipValue] | undefined) => string | undefined;

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

@@ -39,6 +39,7 @@ var import_strato_icons = require("@dynatrace/strato-icons");
 var import_use_series_item_display_state = require("./hooks/use-series-item-display-state.js");
 var import_SeriesActionsHeader = require("./SeriesActionsHeader.js");
 var import_SeriesItemContent = require("./SeriesItemContent.js");
+var import_useId = require("../../../../../../core/hooks/useId.js");
 var import_copy_to_clipboard_messages = require("../../../copy-to-clipboard/copy-to-clipboard-messages.js");
 var import_ChartActionsMenuAsync = require("../../../series-action/ChartActionsMenuAsync.js");
 var import_constants = require("../../constants.js");
@@ -48,18 +49,18 @@ var import_selectors = require("../../selectors.js");
 var import_tooltip_css = require("../../tooltip.sty.js");
 var import_useTooltipReducer = require("../../useTooltipReducer.js");
 var import_get_copy_action = require("../../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 = (0, import_react_intl.useIntl)();
   const { pinned } = (0, import_selectors.useTooltipSnapshot)();
   const labelFor = (0, import_useDefaultLabels.useDefaultLabels)();
-  const internalProps = props;
-  const { actions, ...restProps } = internalProps;
+  const { actions, ...restProps } = props;
   const { symbolPosition = "left", defaultActionsConfig } = (0, import_ExternalConfigContext.useExternalConfig)();
   const hasActions = actions !== void 0 || defaultActionsConfig.size > 0;
   const dispatch = (0, import_useTooltipReducer.useTooltipReducer)();
-  const isOpen = (0, import_selectors.useSelector)(({ activeSeries: activeSeries2 }) => activeSeries2 === props.name);
+  const rowId = (0, import_useId.useId)();
+  const isOpen = (0, import_selectors.useSelector)(({ activeSeries: activeSeries2 }) => activeSeries2 === rowId);
   const { activeSeries } = (0, import_selectors.useTooltipSnapshot)();
   const menuDelayRef = (0, import_react.useRef)(0);
   const asyncActions = actions ? async () => actions() : void 0;
@@ -72,14 +73,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]) => {
@@ -98,12 +99,13 @@ const SeriesItem = (props) => {
     "button",
     {
       className: (0, import_clsx.default)(
-        activeSeries === props.name && import_tooltip_css.seriesItemActive,
+        activeSeries === rowId && import_tooltip_css.seriesItemActive,
         import_tooltip_css.seriesItemWrapper
       ),
       onClick: handleClick,
       onPointerMove: handlePointerMove,
       onKeyDown: import_lodash_es.noop,
+      "data-testid": "menu-trigger",
       children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         import_ChartActionsMenuAsync.ChartActionsMenuAsync,
         {
@@ -130,11 +132,25 @@ const SeriesItem = (props) => {
 const WithSymbol = (0, import_react.forwardRef)(
   (props, ref) => {
     const containerWidth = import_tooltip_css.TOOLTIP_MAX_WIDTH - import_constants.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,
@@ -151,7 +167,13 @@ const WithSymbol = (0, import_react.forwardRef)(
         {
           color,
           name,
+          description,
           nameText,
+          descriptionText,
+          fullDescriptionText,
+          isDescriptionTruncated,
+          descriptionShouldUseMultiLineCss,
+          descriptionMultiLineMode,
           displayValueText,
           displayRelativeValueText,
           fullValueText,
@@ -162,6 +184,7 @@ const WithSymbol = (0, import_react.forwardRef)(
           symbolPosition,
           shape,
           symbol,
+          iconStyle,
           icon,
           hasChevron: hasActions,
           maxWidth: seriesContentMaxWidth

package/charts/core/components/overlay-tooltip/components/series/SeriesItemContent.d.ts

@@ -2,6 +2,11 @@ import { CSSProperties } from 'react';
 import { InternalSeriesItemProps } from '../../types/series.js';
 interface SeriesItemContentProps extends Omit<InternalSeriesItemProps, 'value'> {
     nameText: string | string[];
+    descriptionText?: string;
+    fullDescriptionText?: string;
+    isDescriptionTruncated?: boolean;
+    descriptionShouldUseMultiLineCss?: boolean;
+    descriptionMultiLineMode?: 'clamp' | 'wrap';
     displayValueText: string;
     displayRelativeValueText?: string;
     fullValueText: string;

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

@@ -43,6 +43,11 @@ const SeriesItemContent = (0, import_react.forwardRef)((props, ref) => {
   const {
     color,
     nameText,
+    descriptionText,
+    fullDescriptionText,
+    isDescriptionTruncated,
+    descriptionShouldUseMultiLineCss,
+    descriptionMultiLineMode = "clamp",
     displayValueText,
     displayRelativeValueText,
     fullValueText,
@@ -88,6 +93,12 @@ const SeriesItemContent = (0, import_react.forwardRef)((props, ref) => {
       }
     ) });
   };
+  const getDescriptionClassName = () => {
+    if (!descriptionShouldUseMultiLineCss) {
+      return import_tooltip_css.seriesDescriptionText;
+    }
+    return descriptionMultiLineMode === "wrap" ? import_tooltip_css.seriesDescriptionTextMultiLineWrap : import_tooltip_css.seriesDescriptionTextMultiLine;
+  };
   const renderValue = () => {
     const isValueTruncated = displayValueText !== fullValueText;
     const isRelativeValueTruncated = displayRelativeValueText !== fullRelativeValueText;
@@ -114,12 +125,33 @@ const SeriesItemContent = (0, import_react.forwardRef)((props, ref) => {
       }),
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { gridArea: "symbol" }, children: hasSymbol ? renderSymbol() : null }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
           "div",
           {
             className: import_tooltip_css.seriesNameCell,
-            style: { gridArea: "name", marginRight: `${import_constants.GAP_BETWEEN_COLUMNS}px` },
-            children: renderNameContent()
+            style: {
+              gridArea: "name",
+              marginRight: `${import_constants.GAP_BETWEEN_COLUMNS}px`,
+              flexDirection: "column"
+            },
+            children: [
+              renderNameContent(),
+              descriptionText !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_Tooltip.Tooltip,
+                {
+                  text: fullDescriptionText ?? "",
+                  disabled: !isDescriptionTruncated,
+                  children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    "span",
+                    {
+                      className: getDescriptionClassName(),
+                      style: descriptionShouldUseMultiLineCss ? nameStyle : void 0,
+                      children: descriptionText
+                    }
+                  )
+                }
+              )
+            ]
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: import_tooltip_css.seriesValueCell, style: { gridArea: "value" }, children: renderValue() })

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

@@ -64,5 +64,5 @@ const SeriesSymbol = (props) => {
   if (!props.color) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ShapeIcon.ShapeIcon, { color: props.color, shape: props.shape || "circle" });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ShapeIcon.ShapeIcon, { color: props.color, shape: props.shape || "single" });
 };

package/charts/core/components/overlay-tooltip/components/series/hooks/use-series-item-display-state.d.ts

@@ -4,6 +4,11 @@ export declare const useSeriesItemDisplayState: (props: InternalSeriesItemProps
 }) => {
     nameText: string | string[];
     displayNameText: import("../../../types.js").SeriesName;
+    descriptionText: string | undefined;
+    fullDescriptionText: string | undefined;
+    isDescriptionTruncated: boolean;
+    descriptionShouldUseMultiLineCss: boolean;
+    descriptionMultiLineMode: "wrap" | "clamp";
     displayValueText: string;
     displayRelativeValueText: string | undefined;
     fullValueText: string;