@dynatrace/strato-components 3.0.1 → 3.1.0

package/charts/core/components/legend/categorical/hooks/useKeyboardSelectionShortcuts.js

@@ -24,92 +24,62 @@ module.exports = __toCommonJS(useKeyboardSelectionShortcuts_exports);
 var import_react = require("react");
 var import_index_should_be_included_in_shift_clicked_list = require("../utils/index-should-be-included-in-shift-clicked-list.js");
 function useKeyboardSelectionShortcuts(allItems) {
-  const buildSelections = (0, import_react.useCallback)(
-    (selected) => allItems.reduce((acc, item) => {
-      acc[item.id] = selected;
-      return acc;
-    }, {}),
-    [allItems]
-  );
   const pivot = (0, import_react.useRef)(void 0);
   const lastIndexClicked = (0, import_react.useRef)(void 0);
-  const itemSelectionMap = (0, import_react.useRef)(buildSelections(true));
   const newClickIndex = (0, import_react.useCallback)(
     (item) => allItems.findIndex((it) => it.id === item.id),
     [allItems]
   );
-  const updateItemSelectionMap = (id, selected, hiddenItems) => {
-    const isLastItem = hiddenItems.size === allItems.length - 1;
-    if (isLastItem) {
-      return itemSelectionMap.current;
-    }
-    const newSelectionMap = { ...itemSelectionMap.current, [id]: selected };
-    hiddenItems.forEach((item) => {
-      newSelectionMap[item] = true;
-    });
-    itemSelectionMap.current = newSelectionMap;
-    return newSelectionMap;
-  };
-  const getCurrentSelection = (selectionMap) => allItems.filter((item) => selectionMap[item.id]);
-  const smartSelectionWithShift = (item) => {
-    if (pivot.current === void 0 || lastIndexClicked.current === void 0) {
-      return simpleSelection(item);
+  const smartSelectionWithShift = (item, hiddenItems) => {
+    const currentPivot = pivot.current;
+    if (currentPivot === void 0 || lastIndexClicked.current === void 0) {
+      return simpleSelection(item, hiddenItems);
     }
     const newClick = newClickIndex(item);
     const previousLastClick = lastIndexClicked.current;
     lastIndexClicked.current = newClick;
-    const newItemSelectionMap = { ...itemSelectionMap.current };
-    allItems.forEach((item2, index) => {
-      newItemSelectionMap[item2.id] = (0, import_index_should_be_included_in_shift_clicked_list.indexShouldBeIncludedInShiftClickedList)(
+    return allItems.filter(
+      (it, index) => (0, import_index_should_be_included_in_shift_clicked_list.indexShouldBeIncludedInShiftClickedList)(
         index,
         newClick,
-        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        pivot.current,
+        currentPivot,
         previousLastClick,
-        newItemSelectionMap[item2.id]
-      );
-    });
-    itemSelectionMap.current = newItemSelectionMap;
-    return getCurrentSelection(newItemSelectionMap);
+        !hiddenItems.has(it.id)
+      )
+    );
   };
   const smartSelectionWithCtrl = (item, hiddenItems) => {
     const newClick = newClickIndex(item);
     pivot.current = newClick;
     lastIndexClicked.current = newClick;
-    const newItemSelectionMap = updateItemSelectionMap(
-      item.id,
-      !itemSelectionMap.current[item.id],
-      hiddenItems
-    );
-    return getCurrentSelection(newItemSelectionMap);
+    const visibleItems = allItems.filter((it) => !hiddenItems.has(it.id));
+    if (hiddenItems.has(item.id)) {
+      return [...visibleItems, item];
+    }
+    if (visibleItems.length === 1) {
+      return allItems.filter((it) => it.id !== item.id);
+    }
+    return visibleItems.filter((it) => it.id !== item.id);
   };
-  const simpleSelection = (item) => {
-    const currentSelectedSize = Object.values(itemSelectionMap.current).filter(
-      (item2) => item2
-    ).length;
+  const simpleSelection = (item, hiddenItems) => {
+    const currentSelectedSize = allItems.length - hiddenItems.size;
     const newClick = newClickIndex(item);
     pivot.current = newClick;
     lastIndexClicked.current = newClick;
-    if (itemSelectionMap.current[item.id] && currentSelectedSize === 1) {
-      const newItemSelectionMap = buildSelections(true);
-      itemSelectionMap.current = newItemSelectionMap;
-      return getCurrentSelection(newItemSelectionMap);
+    if (!hiddenItems.has(item.id) && currentSelectedSize === 1) {
+      return allItems;
     }
-    itemSelectionMap.current = {
-      ...buildSelections(false),
-      [item.id]: true
-    };
     return [item];
   };
   const selectItem = (item, hiddenItems, event) => {
     const { shiftKey, ctrlKey, metaKey } = event;
     if (shiftKey) {
-      return smartSelectionWithShift(item);
+      return smartSelectionWithShift(item, hiddenItems);
     }
     if (ctrlKey || metaKey) {
       return smartSelectionWithCtrl(item, hiddenItems);
     }
-    return simpleSelection(item);
+    return simpleSelection(item, hiddenItems);
   };
   return selectItem;
 }

package/charts/core/components/legend/range/RangeLegend.css

@@ -1,13 +1,13 @@
-._lvrd9i0-3-0-1 {
+._lvrd9i0-3-1-0 {
   display: flex;
   align-items: center;
   padding: var(--dt-spacings-size-8, 8px);
   box-sizing: border-box;
   margin: 0 auto;
 }
-._lvrd9i1-3-0-1 {
+._lvrd9i1-3-1-0 {
   flex-direction: row;
 }
-._lvrd9i2-3-0-1 {
+._lvrd9i2-3-1-0 {
   flex-direction: column;
 }

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

@@ -23,4 +23,4 @@ __export(RangeLegend_css_exports, {
 module.exports = __toCommonJS(RangeLegend_css_exports);
 var import_RangeLegend_css_ts_vanilla = require("./RangeLegend.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var legendContainer = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_lvrd9i0-3-0-1", variantClassNames: { isVertical: { true: "_lvrd9i1-3-0-1", false: "_lvrd9i2-3-0-1" } }, defaultVariants: {}, compoundVariants: [] });
+var legendContainer = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_lvrd9i0-3-1-0", variantClassNames: { isVertical: { true: "_lvrd9i1-3-1-0", false: "_lvrd9i2-3-1-0" } }, defaultVariants: {}, compoundVariants: [] });

package/charts/core/components/legend/range/components/RangeLegendBoundaryLabel/RangeLegendBoundaryLabel.css

@@ -1,6 +1,6 @@
-._klb1cs1-3-0-1 {
+._klb1cs1-3-1-0 {
   visibility: hidden;
 }
-._klb1cs2-3-0-1 {
+._klb1cs2-3-1-0 {
   visibility: visible;
 }

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

@@ -23,4 +23,4 @@ __export(RangeLegendBoundaryLabel_css_exports, {
 module.exports = __toCommonJS(RangeLegendBoundaryLabel_css_exports);
 var import_RangeLegendBoundaryLabel_css_ts_vanilla = require("./RangeLegendBoundaryLabel.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var boundaryLabel = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_klb1cs0-3-0-1", variantClassNames: { isMarkerShown: { true: "_klb1cs1-3-0-1", false: "_klb1cs2-3-0-1" } }, defaultVariants: {}, compoundVariants: [] });
+var boundaryLabel = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_klb1cs0-3-1-0", variantClassNames: { isMarkerShown: { true: "_klb1cs1-3-1-0", false: "_klb1cs2-3-1-0" } }, defaultVariants: {}, compoundVariants: [] });

package/charts/core/components/legend/range/components/RangeLegendItemLabel/RangeLegendItemLabel.css

@@ -1,3 +1,3 @@
-._1itb2bi0-3-0-1 {
+._1itb2bi0-3-1-0 {
   overflow: visible;
 }

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

@@ -22,4 +22,4 @@ __export(RangeLegendItemLabel_css_exports, {
 });
 module.exports = __toCommonJS(RangeLegendItemLabel_css_exports);
 var import_RangeLegendItemLabel_css_ts_vanilla = require("./RangeLegendItemLabel.css");
-var legendLabel = "_1itb2bi0-3-0-1";
+var legendLabel = "_1itb2bi0-3-1-0";

package/charts/core/components/legend/range/components/RangeLegendItemMarker/RangeLegendItemMarker.css

@@ -1,9 +1,9 @@
-._1kzx6wv0-3-0-1 {
+._1kzx6wv0-3-1-0 {
   overflow: visible;
 }
-._1kzx6wv1-3-0-1 {
+._1kzx6wv1-3-1-0 {
   visibility: visible;
 }
-._1kzx6wv2-3-0-1 {
+._1kzx6wv2-3-1-0 {
   visibility: hidden;
 }

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

@@ -23,4 +23,4 @@ __export(RangeLegendItemMarker_css_exports, {
 module.exports = __toCommonJS(RangeLegendItemMarker_css_exports);
 var import_RangeLegendItemMarker_css_ts_vanilla = require("./RangeLegendItemMarker.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var legendMarker = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1kzx6wv0-3-0-1", variantClassNames: { isMarkerShown: { true: "_1kzx6wv1-3-0-1", false: "_1kzx6wv2-3-0-1" } }, defaultVariants: {}, compoundVariants: [] });
+var legendMarker = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1kzx6wv0-3-1-0", variantClassNames: { isMarkerShown: { true: "_1kzx6wv1-3-1-0", false: "_1kzx6wv2-3-1-0" } }, defaultVariants: {}, compoundVariants: [] });

package/charts/core/components/legend/range/components/RangeLegendMarkers/RangeLegendMarkers.css

@@ -1,12 +1,12 @@
-._u32l830-3-0-1 {
+._u32l830-3-1-0 {
   overflow: visible;
   position: absolute;
 }
-._u32l831-3-0-1 {
+._u32l831-3-1-0 {
   width: 100%;
   height: 10px;
 }
-._u32l832-3-0-1 {
+._u32l832-3-1-0 {
   height: 100%;
   width: 10px;
 }

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

@@ -23,4 +23,4 @@ __export(RangeLegendMarkers_css_exports, {
 module.exports = __toCommonJS(RangeLegendMarkers_css_exports);
 var import_RangeLegendMarkers_css_ts_vanilla = require("./RangeLegendMarkers.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var legendMarkersSvg = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_u32l830-3-0-1", variantClassNames: { isHorizontal: { true: "_u32l831-3-0-1", false: "_u32l832-3-0-1" } }, defaultVariants: {}, compoundVariants: [] });
+var legendMarkersSvg = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_u32l830-3-1-0", variantClassNames: { isHorizontal: { true: "_u32l831-3-1-0", false: "_u32l832-3-1-0" } }, defaultVariants: {}, compoundVariants: [] });

package/charts/core/components/legend/range/components/RangeLegendSegments/RangeLegendSegments.css

@@ -1,21 +1,21 @@
-._6z9t250-3-0-1 {
+._6z9t250-3-1-0 {
   display: block;
   border-radius: 2px;
   overflow: hidden;
   background-color: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
 }
-._6z9t250-3-0-1:focus {
+._6z9t250-3-1-0:focus {
   outline: none;
 }
-._6z9t251-3-0-1 {
+._6z9t251-3-1-0 {
   margin: 0 auto;
   width: 100%;
   height: 10px;
 }
-._6z9t252-3-0-1 {
+._6z9t252-3-1-0 {
   height: 100%;
   width: 10px;
 }
-._6z9t250-3-0-1 rect:focus {
+._6z9t250-3-1-0 rect:focus {
   outline: none;
 }

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

@@ -23,4 +23,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-0-1", variantClassNames: { isHorizontal: { true: "_6z9t251-3-0-1", false: "_6z9t252-3-0-1" } }, defaultVariants: {}, compoundVariants: [] });
+var legendSvg = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_6z9t250-3-1-0", variantClassNames: { isHorizontal: { true: "_6z9t251-3-1-0", false: "_6z9t252-3-1-0" } }, defaultVariants: {}, compoundVariants: [] });

package/charts/core/components/legend/range/constants.d.ts

@@ -3,11 +3,6 @@ import type { TruncationMode } from '../../../../../typography/text-ellipsis/Tex
 import type { MappedObject } from '../../../types/helpers/mapped-object.js';
 export declare const LABEL_ALIGNMENT: MappedObject<LabelAlignment>;
 export declare const TRUNCATION_MODE: MappedObject<TruncationMode>;
-export declare const ITEM_FONT_STYLES: {
-    fontSize: string;
-    fontFamily: string;
-    fontWeight: string;
-};
 export declare const DEFAULT_TRUNCATION_MODE: "middle";
 export declare const DEFAULT_FORMATTER: (value: number) => string;
 export declare const DEFAULT_ITEM_THICKNESS = 10;

package/charts/core/components/legend/range/constants.js

@@ -41,7 +41,6 @@ __export(constants_exports, {
   DEFAULT_TRUNCATION_MODE: () => DEFAULT_TRUNCATION_MODE,
   GAP_BETWEEN_LABELS: () => GAP_BETWEEN_LABELS,
   HOVERED_LABEL_FONT_WEIGHT: () => HOVERED_LABEL_FONT_WEIGHT,
-  ITEM_FONT_STYLES: () => ITEM_FONT_STYLES,
   LABEL_ALIGNMENT: () => LABEL_ALIGNMENT,
   LABEL_FONT_COLOR_HOVERED: () => LABEL_FONT_COLOR_HOVERED,
   LABEL_FONT_WEIGHT: () => LABEL_FONT_WEIGHT,
@@ -75,11 +74,6 @@ const TRUNCATION_MODE = {
   Middle: "middle",
   Start: "start"
 };
-const ITEM_FONT_STYLES = {
-  fontSize: import_typography.default.Text.Small.Default.Size,
-  fontFamily: import_typography.default.Text.Small.Default.Family,
-  fontWeight: import_typography.default.Text.Small.Emphasized.Weight
-};
 const DEFAULT_TRUNCATION_MODE = TRUNCATION_MODE.Middle;
 const DEFAULT_FORMATTER = (value) => (0, import_units.format)(value);
 const DEFAULT_ITEM_THICKNESS = 10;

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

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

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

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

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

@@ -60,7 +60,7 @@ const DynamicTooltip = (props) => {
     if (tooltip.getState().pinned) {
       dispatch({
         type: "UPDATE_POSITION",
-        payload: { type: "non-resize" }
+        payload: { type: "non-resize", scroll: true }
       })();
       return;
     }
@@ -118,8 +118,10 @@ const DynamicTooltip = (props) => {
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       "div",
       {
+        role: "tooltip",
         ref: setTooltipWrapper,
         className: (0, import_tooltip_css.wrapper)({ isPinned: props.pinned }),
+        onMouseLeave: dispatch({ type: "TOOLTIP_MOUSE_LEAVE" }),
         ...dynamicTooltip,
         children: props.children
       }

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

@@ -1,11 +1,13 @@
-import type { PropsWithChildren } from 'react';
+import { type PropsWithChildren } from 'react';
 import type { OverlayTooltipProps } from './types.js';
 /**
  * OverlayTooltip WIP component
  * @internal
  */
 export declare const OverlayTooltip: ((props: PropsWithChildren<OverlayTooltipProps>) => import("react/jsx-runtime.js").JSX.Element | undefined) & {
-    Header: (props: import("./components/Header/types/header.js").HeaderProps) => import("react/jsx-runtime.js").JSX.Element | null;
+    Action: (props: import("./components/global-actions/Action.js").ActionProps) => import("react/jsx-runtime.js").JSX.Element;
+    ActionsPlaceholder: (_props: import("./components/global-actions/ActionsPlaceholder.js").ActionsPlaceholderProps) => null;
+    Header: (props: import("./components/header/types/header.js").HeaderProps) => import("react/jsx-runtime.js").JSX.Element | null;
     Series: <T extends Record<string, unknown>>(props: {
         data: T[];
         seriesItemTemplate: (item: T) => import("react").JSX.Element;
@@ -17,12 +19,5 @@ export declare const OverlayTooltip: ((props: PropsWithChildren<OverlayTooltipPr
         valueLabel?: string;
         disabled?: boolean;
     }) => import("react/jsx-runtime.js").JSX.Element | null;
-    SeriesItem: (props: {
-        name: string;
-        value: string | number | Date;
-        valueUnit?: string;
-        color: string;
-        relativeValue?: string | number | undefined;
-        relativeValueUnit?: string;
-    }) => import("react/jsx-runtime.js").JSX.Element;
+    SeriesItem: (props: import("./types/series.js").SeriesItemProps) => import("react/jsx-runtime.js").JSX.Element;
 };

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

@@ -23,10 +23,12 @@ __export(OverlayTooltip_exports, {
 module.exports = __toCommonJS(OverlayTooltip_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_lodash_es = require("lodash");
-var import_Header = require("./components/Header/Header.js");
-var import_Series = require("./components/Series.js");
-var import_SeriesHeader = require("./components/SeriesHeader.js");
-var import_SeriesItem = require("./components/SeriesItem.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");
+var import_Series = require("./components/series/Series.js");
+var import_SeriesHeader = require("./components/series/SeriesHeader.js");
+var import_SeriesItem = require("./components/series/SeriesItem.js");
 var import_ExternalConfigContext = require("./contexts/ExternalConfigContext.js");
 var import_DynamicTooltip = require("./DynamicTooltip.js");
 var import_useDefaultConfig = require("./hooks/useDefaultConfig.js");
@@ -48,6 +50,8 @@ const TooltipRoot = (props) => {
   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 }) });
 };
 const OverlayTooltip = Object.assign(TooltipRoot, {
+  Action: import_Action.Action,
+  ActionsPlaceholder: import_ActionsPlaceholder.ActionsPlaceholder,
   Header: import_Header.Header,
   Series: import_Series.Series,
   SeriesHeader: import_SeriesHeader.SeriesHeader,

package/charts/core/components/overlay-tooltip/_to-be-removed/HeaderTestTooltip.d.ts

@@ -1,7 +1,7 @@
 import { type JSX } from 'react';
 import type { Data } from '../types.js';
 interface TestDataEntry {
-    description: string;
+    description: JSX.Element;
     data: () => Data;
     template: JSX.Element;
 }

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

@@ -79,52 +79,52 @@ const createTestData = (geometry, header1, subheader) => {
 };
 const HeaderTestData = [
   {
-    description: "Dot: Single date",
+    description: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { children: "Dot: Single date" }),
     data: createTestData("dot", /* @__PURE__ */ new Date("2023-06-15")),
     template: DotTooltip
   },
   {
-    description: "Dot: Date range (from-to)",
+    description: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { children: "Dot: Date range (from-to)" }),
     data: createTestData("dot", DATE_RANGES.janOnly),
     template: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(HeaderTooltip, { label: "" })
   },
   {
-    description: "Dot: Date range with subheader",
+    description: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { children: "Dot: Date range with subheader" }),
     data: createTestData("dot", DATE_RANGES.fullYearSimple, ["Full Year"]),
     template: DotTooltip
   },
   {
-    description: "Rect: Single string",
+    description: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { children: "Rect: Single string" }),
     data: createTestData("rect", "Q3"),
     template: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(HeaderTooltip, { label: "Quarter" })
   },
   {
-    description: "Rect: String range",
+    description: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { children: "Rect: String range" }),
     data: createTestData("rect", ["Start", "End"]),
     template: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(HeaderTooltip, {})
   },
   {
-    description: "Rect: With subheader",
+    description: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { children: "Rect: With subheader" }),
     data: createTestData("rect", "Q3", ["2023"]),
     template: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(HeaderTooltip, {})
   },
   {
-    description: "TreeMap: With parent",
+    description: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { children: "TreeMap: With parent" }),
     data: createTestData("treemap", "United States"),
     template: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(HeaderTooltip, {})
   },
   {
-    description: "Custom label: Single value",
+    description: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { children: "Custom label: Single value" }),
     data: createTestData("dot", "Custom Value"),
     template: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(HeaderTooltip, { label: "My Custom Label" })
   },
   {
-    description: "Custom label: Date range",
+    description: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { children: "Custom label: Date range" }),
     data: createTestData("dot", DATE_RANGES.janToJun),
     template: DurationTooltip("Time Period")
   },
   {
-    description: "Long string value",
+    description: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { children: "Long string value" }),
     data: createTestData(
       "dot",
       "This is a very long header value that might overflow the container"
@@ -132,102 +132,102 @@ const HeaderTestData = [
     template: DotTooltip
   },
   {
-    description: "Numeric value",
+    description: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { children: "Numeric value" }),
     data: createTestData("dot", 12345),
     template: DotTooltip
   },
   {
-    description: "Numeric range (from-to)",
+    description: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { children: "Numeric range (from-to)" }),
     data: createTestData("dot", [0, 100]),
     template: DotTooltip
   },
   {
-    description: "Date Range: Seconds changing (same minute)",
+    description: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { children: "Date Range: Seconds changing (same minute)" }),
     data: createTestData("dot", DATE_RANGES.secondsChanging),
     template: NoGeometryTooltip
   },
   {
-    description: "Date Range: Minutes changing (same hour)",
+    description: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { children: "Date Range: Minutes changing (same hour)" }),
     data: createTestData("dot", DATE_RANGES.minutesChanging),
     template: NoGeometryTooltip
   },
   {
-    description: "Date Range: Hours changing (same day)",
+    description: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { children: "Date Range: Hours changing (same day)" }),
     data: createTestData("dot", DATE_RANGES.hoursChanging),
     template: NoGeometryTooltip
   },
   {
-    description: "Date Range: Days changing (same month)",
+    description: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { children: "Date Range: Days changing (same month)" }),
     data: createTestData("dot", DATE_RANGES.daysChanging),
     template: NoGeometryTooltip
   },
   {
-    description: "Date Range: Months changing (same year)",
+    description: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { children: "Date Range: Months changing (same year)" }),
     data: createTestData("dot", DATE_RANGES.monthsChanging),
     template: NoGeometryTooltip
   },
   {
-    description: "Date Range: Years changing (different years)",
+    description: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { children: "Date Range: Years changing (different years)" }),
     data: createTestData("dot", DATE_RANGES.yearsChanging),
     template: NoGeometryTooltip
   },
   {
-    description: "Date Range: With seconds included",
+    description: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { children: "Date Range: With seconds included" }),
     data: createTestData("dot", DATE_RANGES.withSeconds),
     template: NoGeometryTooltip
   },
   {
-    description: "Date Range: Cross-day with weekday",
+    description: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { children: "Date Range: Cross-day with weekday" }),
     data: createTestData("dot", DATE_RANGES.crossDay),
     template: NoGeometryTooltip
   },
   {
-    description: "Date Range: Same day with subheader",
+    description: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { children: "Date Range: Same day with subheader" }),
     data: createTestData("dot", DATE_RANGES.sameDay, ["Business Hours"]),
     template: NoGeometryTooltip
   },
   {
-    description: "Duration: Date range - seconds difference",
+    description: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { children: "Duration: Date range - seconds difference" }),
     data: createTestData("dot", DATE_RANGES.secondsChanging),
     template: DurationTooltip("Time Period")
   },
   {
-    description: "Duration: Date range - minutes difference",
+    description: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { children: "Duration: Date range - minutes difference" }),
     data: createTestData("dot", DATE_RANGES.minutesChanging),
     template: DurationTooltip("Meeting Duration")
   },
   {
-    description: "Duration: Date range - hours difference",
+    description: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { children: "Duration: Date range - hours difference" }),
     data: createTestData("dot", DATE_RANGES.hoursChanging),
     template: DurationTooltip("Work Day")
   },
   {
-    description: "Duration: Date range - days difference",
+    description: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { children: "Duration: Date range - days difference" }),
     data: createTestData("dot", DATE_RANGES.daysChanging),
     template: DurationTooltip("Project Sprint")
   },
   {
-    description: "Duration: Numeric range - small difference",
+    description: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { children: "Duration: Numeric range - small difference" }),
     data: createTestData("dot", [1250, 1388]),
     template: DurationTooltip("Score Range")
   },
   {
-    description: "Duration: Numeric range - large difference",
+    description: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { children: "Duration: Numeric range - large difference" }),
     data: createTestData("dot", [1e4, 25e4]),
     template: DurationTooltip("Revenue Range")
   },
   {
-    description: "Duration: Date range with subheader",
+    description: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { children: "Duration: Date range with subheader" }),
     data: createTestData("dot", DATE_RANGES.fullYear, ["Full Year Analysis"]),
     template: DurationTooltip("Annual Period")
   },
   {
-    description: "Duration: Cross-month date range",
+    description: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { children: "Duration: Cross-month date range" }),
     data: createTestData("dot", DATE_RANGES.monthsChanging),
     template: DurationTooltip("Seasonal Period")
   },
   {
-    description: "Duration: Same day range with subheader",
+    description: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { children: "Duration: Same day range with subheader" }),
     data: createTestData("dot", DATE_RANGES.sameDay, ["Business Hours"]),
     template: DurationTooltip("Daily Operations")
   }

package/charts/core/components/overlay-tooltip/_to-be-removed/MyTooltip.d.ts

@@ -1,7 +1,8 @@
 import type { JSX } from 'react';
 import type { Data } from '../types.js';
 export declare const TooltipData: {
-    description: string;
+    testId?: string;
+    description: JSX.Element;
     data: () => Data;
     template: JSX.Element;
 }[];