@dynatrace/strato-components 3.11.3 → 3.12.0

package/esm/charts/core/components/interactions-overlay/types.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/core/components/interactions-overlay/types.ts"],
-  "sourcesContent": ["import type {\n  Dispatch,\n  RefObject,\n  SetStateAction,\n  WheelEvent,\n  FocusEvent,\n} from 'react';\n\nimport type { StylingProps } from '../../../../core/types/styling-props.js';\nimport type { MappedObject } from '../../types/helpers/mapped-object.js';\nimport type {\n  DragEndProps,\n  DragMoveProps,\n  DragStartProps,\n  PointerEventModifiers,\n  PointerEventPosition,\n  RelativeAbsolutePosition,\n} from '../../types/pointer-events.js';\n\n/**\n * @internal\n */\nexport type InteractionMode = 'explore' | 'pan' | 'zoom';\n\nexport const INTERACTION_MODE = Object.freeze<MappedObject<InteractionMode>>({\n  Explore: 'explore',\n  Pan: 'pan',\n  Zoom: 'zoom',\n});\n\n/**\n * @internal\n */\nexport type InteractionTriggers = 'pointer' | 'keyboard';\n\n/**\n * @internal\n */\nexport type KeyboardOnlyInteractionTriggers = Omit<\n  InteractionTriggers,\n  'pointer'\n>;\n\n/**\n * @internal\n */\nexport type ZoomBehavior = 'zoom-x' | 'zoom-in' | 'zoom-out';\n\n/**\n * @internal\n */\nexport interface InteractionsOverlayProps extends StylingProps {\n  /**\n   * Defines current interaction mode\n   */\n  mode: InteractionMode;\n  /**\n   * Defines whether the chart has a pinned point\n   */\n  pinned: boolean;\n  /**\n   * Defines the current selection area. Can be undefined\n   */\n  selectionArea?: [RelativeAbsolutePosition, RelativeAbsolutePosition];\n  /**\n   * The container width\n   */\n  width: number;\n  /**\n   * The container height\n   */\n  height: number;\n  /**\n   * Whether zoom mode is disabled\n   */\n  isZoomXDisabled?: boolean;\n  /**\n   * Whether zoom in/out is disabled\n   */\n  isZoomDisabled?: boolean;\n  /**\n   * Whether pan is disabled\n   */\n  isPanDisabled?: boolean;\n  /**\n   * Detects if current interaction mode changed. Can be triggered by keyboard\n   * @param event - The interaction event, contains:\n   * - mode: the new interaction mode\n   * - keyboard: whether the mode should be accessible by keyboard\n   */\n  onModeChange?: (event: { mode: InteractionMode; keyboard: boolean }) => void;\n  /**\n   * Detects if overlay is focused. Can be triggered by keyboard\n   * @param event - The interaction event, contains:\n   * - triggeredBy: keyboard\n   */\n  onFocus?: (event?: FocusEvent) => void;\n  /**\n   * Detects if overlay is hovered. Can be triggered by the mouse\n   * @param event - The interaction event, contains:\n   * - triggeredBy: pointer (mouse/touch)\n   * - position: relative and absolute position of the start of the interaction\n   */\n  onHover?: (event: {\n    triggeredBy: InteractionTriggers;\n    position: RelativeAbsolutePosition;\n  }) => void;\n  /**\n   * Detects if overlay is blurred or left by mouse. Can be triggered by keyboard or mouse\n   * @param event - The interaction event, contains:\n   * - triggeredBy: keyboard or pointer (mouse/touch)\n   */\n  onLeave?: (event: { triggeredBy: InteractionTriggers }) => void;\n  /**\n   * Detects pan interaction start. Can be triggered by keyboard or pointer (mouse/touch)\n   * @param event - The interaction event, contains:\n   * - triggeredBy: keyboard or pointer (mouse/touch)\n   */\n  onPanStart?: (event: { triggeredBy: InteractionTriggers }) => void;\n  /**\n   * Detects pan interaction change. Can be triggered by keyboard or pointer (mouse/touch)\n   * @param event - The interaction event, contains:\n   * - triggeredBy: keyboard or pointer (mouse/touch)\n   * - delta: distance in pixels of the desired pan change. It can be positive (pan to right) or negative (pan to left)\n   */\n  onPanChange?: (event: {\n    triggeredBy: InteractionTriggers;\n    delta: number;\n  }) => void;\n  /**\n   * Detects pan interaction end. Can be triggered by keyboard or pointer (mouse/touch)\n   * @param event - The interaction event, contains:\n   * - triggeredBy: keyboard or pointer (mouse/touch)\n   */\n  onPanEnd?: (event: { triggeredBy: InteractionTriggers }) => void;\n  /**\n   * Detects pin interaction. Can be triggered by pointer (mouse/touch)\n   * @param event - The interaction event, contains:\n   * - triggeredBy: keyboard or pointer (mouse/touch)\n   * - position: relative and absolute position of the start of the interaction\n   * - pin: whether is action of pin or unpin\n   */\n  onTogglePin?: (event: {\n    triggeredBy: InteractionTriggers;\n    position: RelativeAbsolutePosition | undefined;\n    pin: boolean;\n  }) => void;\n  /**\n   * Detects reset interaction. Can be triggered by keyboard, pointer (mouse/touch) or resize\n   * @param event - The interaction event, contains:\n   * - triggeredBy: keyboard, pointer (mouse/touch)\n   * - mousePosition: the mouse position, if in bounds\n   */\n  onReset?: (event: {\n    triggeredBy: InteractionTriggers;\n    mousePosition?: RelativeAbsolutePosition;\n  }) => void;\n  /**\n   * Detects select interaction start. Can be triggered by keyboard or pointer (mouse/touch)\n   * @param event - The interaction event, contains:\n   * - triggeredBy: keyboard or pointer (mouse/touch)\n   * - position: start position of the selection area\n   */\n  onSelectStart?: (event: {\n    triggeredBy: InteractionTriggers;\n    position: RelativeAbsolutePosition;\n  }) => void;\n  /**\n   * Detects select interaction change. Can be triggered by keyboard or pointer (mouse/touch)\n   * @param event - The interaction event, contains:\n   * - triggeredBy: keyboard or pointer (mouse/touch)\n   * - start: start position of the selection area\n   * - end: end position of the selection area\n   */\n  onSelectChange?: (event: {\n    triggeredBy: InteractionTriggers;\n    start: RelativeAbsolutePosition;\n    end: RelativeAbsolutePosition;\n    mode: 'zoom' | 'explore';\n  }) => void;\n  /**\n   * Detects select interaction end. Can be triggered by keyboard or pointer (mouse/touch)\n   * @param event - The interaction event, contains:\n   * - triggeredBy: keyboard or pointer (mouse/touch)\n   * - start: start position of the selection area\n   * - end: end position of the selection area\n   * or:\n   * - cancelled: whether the interaction was cancelled\n   */\n  onSelectEnd?: (\n    event:\n      | {\n          triggeredBy: InteractionTriggers;\n          start: RelativeAbsolutePosition;\n          end: RelativeAbsolutePosition;\n        }\n      | { cancelled: true },\n  ) => void;\n  /**\n   * Detects zoom interaction start. Can be triggered by keyboard or pointer (mouse/touch)\n   * @param event - The interaction event, contains:\n   * - triggeredBy: keyboard or pointer (mouse/touch)\n   */\n  onZoomStart?: (event: { triggeredBy: InteractionTriggers }) => void;\n  /**\n   * Detects zoom interaction change. Can be triggered by keyboard or pointer (mouse/touch)\n   * @param event - The interaction event, contains:\n   * - triggeredBy: keyboard or pointer (mouse/touch)\n   * - deltaStart: distance in pixels of the start side of the desired zoom change. Can be positive (zoom in) and negative (zoom out)\n   * - deltaEnd: distance in pixels for the start side of the desired zoom change. Can be positive (zoom out) and negative (zoom in)\n   */\n  onZoomChange?: (event: {\n    triggeredBy: InteractionTriggers;\n    deltaStart: number;\n    deltaEnd: number;\n    behavior: ZoomBehavior;\n  }) => void;\n  /**\n   * Detects zoom interaction end. Can be triggered by keyboard or pointer (mouse/touch)\n   * @param event - The interaction event, contains:\n   * - triggeredBy: keyboard or pointer (mouse/touch)\n   */\n  onZoomEnd?: (event: { triggeredBy: InteractionTriggers }) => void;\n}\n\nexport const isSelectCancelled = (\n  event:\n    | {\n        triggeredBy: InteractionTriggers;\n        start: RelativeAbsolutePosition;\n        end: RelativeAbsolutePosition;\n      }\n    | { cancelled: true },\n): event is { cancelled: true } => 'cancelled' in event && event.cancelled;\n\n/**\n * @internal\n */\nexport type OverlappingInteractionsProps = Pick<\n  InteractionsOverlayProps,\n  | 'pinned'\n  | 'selectionArea'\n  | 'onSelectEnd'\n  | 'onHover'\n  | 'onTogglePin'\n  | 'height'\n  | 'onReset'\n  | 'width'\n  | 'onZoomChange'\n  | 'onPanStart'\n  | 'onPanChange'\n  | 'onPanEnd'\n  | 'onModeChange'\n> & {\n  eventCancelled: RefObject<boolean>;\n  setCursorMode: Dispatch<SetStateAction<InteractionMode | 'zoomOut'>>;\n  lastMousePositionRef: RefObject<RelativeAbsolutePosition | undefined>;\n  panDeltaRef: RefObject<number | undefined>;\n};\n\n/**\n * @internal\n */\nexport type exploreInteractions = OverlappingInteractionsProps &\n  Pick<\n    InteractionsOverlayProps,\n    'onModeChange' | 'onSelectChange' | 'onSelectStart' | 'isZoomXDisabled'\n  >;\n\n/**\n * @internal\n */\nexport type zoomInteractions = OverlappingInteractionsProps &\n  Pick<InteractionsOverlayProps, 'onSelectChange' | 'onSelectStart'> & {\n    cursorMode: 'zoomOut' | InteractionMode;\n  };\n\n/**\n * @internal\n */\nexport type panInteractions = OverlappingInteractionsProps & {\n  cursorMode: 'zoomOut' | InteractionMode;\n};\n\n/**\n * @internal\n */\nexport type InteractionsHandlers = {\n  onMouseHover: (event: PointerEventPosition & PointerEventModifiers) => void;\n  onMouseClickOrTap: (\n    event: PointerEventPosition & PointerEventModifiers,\n  ) => void;\n  onDragStart: (event: DragStartProps & PointerEventModifiers) => void;\n  onDragMove: (event: DragMoveProps & PointerEventModifiers) => void;\n  onDragEnd: (event: DragEndProps & PointerEventModifiers) => void;\n  onDoubleClickOrTap: (triggeredBy: InteractionTriggers) => void;\n  onWheel: (event: WheelEvent) => void;\n  onKeyEscape: () => void;\n  onKeyEnter: () => void;\n  onKeyRight: (shiftKey: boolean) => void;\n  onKeyLeft: (shiftKey: boolean) => void;\n  onKeyUp: (isTemporaryZoomMode: boolean) => void;\n  onKeyDown: (isTemporaryZoomMode: boolean) => void;\n  onDragStartWithMiddleButton: () => void;\n  onDragMoveWithMiddleButton: (\n    event: DragMoveProps & PointerEventModifiers,\n  ) => void;\n  onDragEndWithMiddleButton: (\n    event: DragEndProps & PointerEventModifiers,\n  ) => void;\n};\n\n/**\n * @internal\n */\nexport type Interactions = {\n  explore: InteractionsHandlers;\n  zoom: InteractionsHandlers;\n  pan: InteractionsHandlers;\n};\n"],
-  "mappings": "AAwBO,MAAM,mBAAmB,OAAO,OAAsC;AAAA,EAC3E,SAAS;AAAA,EACT,KAAK;AAAA,EACL,MAAM;AACR,CAAC;AAqMM,MAAM,oBAAoB,CAC/B,UAOiC,eAAe,SAAS,MAAM;",
+  "sourcesContent": ["import type {\n  Dispatch,\n  RefObject,\n  SetStateAction,\n  WheelEvent,\n  FocusEvent,\n} from 'react';\n\nimport type { StylingProps } from '../../../../core/types/styling-props.js';\nimport type { MappedObject } from '../../types/helpers/mapped-object.js';\nimport type {\n  DragEndProps,\n  DragMoveProps,\n  DragStartProps,\n  PointerEventModifiers,\n  PointerEventPosition,\n  RelativeAbsolutePosition,\n} from '../../types/pointer-events.js';\n\n/**\n * @internal\n */\nexport type InteractionMode = 'explore' | 'pan' | 'zoom';\n\nexport const INTERACTION_MODE = Object.freeze<MappedObject<InteractionMode>>({\n  Explore: 'explore',\n  Pan: 'pan',\n  Zoom: 'zoom',\n});\n\n/**\n * @internal\n */\nexport type InteractionTriggers = 'pointer' | 'keyboard';\n\n/**\n * @internal\n */\nexport type KeyboardOnlyInteractionTriggers = Omit<\n  InteractionTriggers,\n  'pointer'\n>;\n\n/**\n * @internal\n */\nexport type ZoomBehavior = 'zoom-x' | 'zoom-in' | 'zoom-out';\n\n/**\n * @internal\n */\nexport interface InteractionsOverlayProps extends StylingProps {\n  /**\n   * Defines current interaction mode\n   */\n  mode: InteractionMode;\n  /**\n   * Defines whether the chart has a pinned point\n   */\n  pinned: boolean;\n  /**\n   * Defines the current selection area. Can be undefined\n   */\n  selectionArea?: [RelativeAbsolutePosition, RelativeAbsolutePosition];\n  /**\n   * The container width\n   */\n  width: number;\n  /**\n   * The container height\n   */\n  height: number;\n  /**\n   * Whether zoom mode is disabled\n   */\n  isZoomXDisabled?: boolean;\n  /**\n   * Whether zoom in/out is disabled\n   */\n  isZoomDisabled?: boolean;\n  /**\n   * Whether pan is disabled\n   */\n  isPanDisabled?: boolean;\n  /**\n   * Whether drag-to-select is disabled\n   */\n  isSelectDisabled?: boolean;\n  /**\n   * Detects if current interaction mode changed. Can be triggered by keyboard\n   * @param event - The interaction event, contains:\n   * - mode: the new interaction mode\n   * - keyboard: whether the mode should be accessible by keyboard\n   */\n  onModeChange?: (event: { mode: InteractionMode; keyboard: boolean }) => void;\n  /**\n   * Detects if overlay is focused. Can be triggered by keyboard\n   * @param event - The interaction event, contains:\n   * - triggeredBy: keyboard\n   */\n  onFocus?: (event?: FocusEvent) => void;\n  /**\n   * Detects if overlay is hovered. Can be triggered by the mouse\n   * @param event - The interaction event, contains:\n   * - triggeredBy: pointer (mouse/touch)\n   * - position: relative and absolute position of the start of the interaction\n   */\n  onHover?: (event: {\n    triggeredBy: InteractionTriggers;\n    position: RelativeAbsolutePosition;\n  }) => void;\n  /**\n   * Detects if overlay is blurred or left by mouse. Can be triggered by keyboard or mouse\n   * @param event - The interaction event, contains:\n   * - triggeredBy: keyboard or pointer (mouse/touch)\n   */\n  onLeave?: (event: { triggeredBy: InteractionTriggers }) => void;\n  /**\n   * Detects pan interaction start. Can be triggered by keyboard or pointer (mouse/touch)\n   * @param event - The interaction event, contains:\n   * - triggeredBy: keyboard or pointer (mouse/touch)\n   */\n  onPanStart?: (event: { triggeredBy: InteractionTriggers }) => void;\n  /**\n   * Detects pan interaction change. Can be triggered by keyboard or pointer (mouse/touch)\n   * @param event - The interaction event, contains:\n   * - triggeredBy: keyboard or pointer (mouse/touch)\n   * - delta: distance in pixels of the desired pan change. It can be positive (pan to right) or negative (pan to left)\n   */\n  onPanChange?: (event: {\n    triggeredBy: InteractionTriggers;\n    delta: number;\n  }) => void;\n  /**\n   * Detects pan interaction end. Can be triggered by keyboard or pointer (mouse/touch)\n   * @param event - The interaction event, contains:\n   * - triggeredBy: keyboard or pointer (mouse/touch)\n   */\n  onPanEnd?: (event: { triggeredBy: InteractionTriggers }) => void;\n  /**\n   * Detects pin interaction. Can be triggered by pointer (mouse/touch)\n   * @param event - The interaction event, contains:\n   * - triggeredBy: keyboard or pointer (mouse/touch)\n   * - position: relative and absolute position of the start of the interaction\n   * - pin: whether is action of pin or unpin\n   */\n  onTogglePin?: (event: {\n    triggeredBy: InteractionTriggers;\n    position: RelativeAbsolutePosition | undefined;\n    pin: boolean;\n  }) => void;\n  /**\n   * Detects reset interaction. Can be triggered by keyboard, pointer (mouse/touch) or resize\n   * @param event - The interaction event, contains:\n   * - triggeredBy: keyboard, pointer (mouse/touch)\n   * - mousePosition: the mouse position, if in bounds\n   */\n  onReset?: (event: {\n    triggeredBy: InteractionTriggers;\n    mousePosition?: RelativeAbsolutePosition;\n  }) => void;\n  /**\n   * Detects select interaction start. Can be triggered by keyboard or pointer (mouse/touch)\n   * @param event - The interaction event, contains:\n   * - triggeredBy: keyboard or pointer (mouse/touch)\n   * - position: start position of the selection area\n   */\n  onSelectStart?: (event: {\n    triggeredBy: InteractionTriggers;\n    position: RelativeAbsolutePosition;\n  }) => void;\n  /**\n   * Detects select interaction change. Can be triggered by keyboard or pointer (mouse/touch)\n   * @param event - The interaction event, contains:\n   * - triggeredBy: keyboard or pointer (mouse/touch)\n   * - start: start position of the selection area\n   * - end: end position of the selection area\n   */\n  onSelectChange?: (event: {\n    triggeredBy: InteractionTriggers;\n    start: RelativeAbsolutePosition;\n    end: RelativeAbsolutePosition;\n    mode: 'zoom' | 'explore';\n  }) => void;\n  /**\n   * Detects select interaction end. Can be triggered by keyboard or pointer (mouse/touch)\n   * @param event - The interaction event, contains:\n   * - triggeredBy: keyboard or pointer (mouse/touch)\n   * - start: start position of the selection area\n   * - end: end position of the selection area\n   * or:\n   * - cancelled: whether the interaction was cancelled\n   */\n  onSelectEnd?: (\n    event:\n      | {\n          triggeredBy: InteractionTriggers;\n          start: RelativeAbsolutePosition;\n          end: RelativeAbsolutePosition;\n        }\n      | { cancelled: true },\n  ) => void;\n  /**\n   * Detects zoom interaction start. Can be triggered by keyboard or pointer (mouse/touch)\n   * @param event - The interaction event, contains:\n   * - triggeredBy: keyboard or pointer (mouse/touch)\n   */\n  onZoomStart?: (event: { triggeredBy: InteractionTriggers }) => void;\n  /**\n   * Detects zoom interaction change. Can be triggered by keyboard or pointer (mouse/touch)\n   * @param event - The interaction event, contains:\n   * - triggeredBy: keyboard or pointer (mouse/touch)\n   * - deltaStart: distance in pixels of the start side of the desired zoom change. Can be positive (zoom in) and negative (zoom out)\n   * - deltaEnd: distance in pixels for the start side of the desired zoom change. Can be positive (zoom out) and negative (zoom in)\n   */\n  onZoomChange?: (event: {\n    triggeredBy: InteractionTriggers;\n    deltaStart: number;\n    deltaEnd: number;\n    behavior: ZoomBehavior;\n  }) => void;\n  /**\n   * Detects zoom interaction end. Can be triggered by keyboard or pointer (mouse/touch)\n   * @param event - The interaction event, contains:\n   * - triggeredBy: keyboard or pointer (mouse/touch)\n   */\n  onZoomEnd?: (event: { triggeredBy: InteractionTriggers }) => void;\n}\n\nexport const isSelectCancelled = (\n  event:\n    | {\n        triggeredBy: InteractionTriggers;\n        start: RelativeAbsolutePosition;\n        end: RelativeAbsolutePosition;\n      }\n    | { cancelled: true },\n): event is { cancelled: true } => 'cancelled' in event && event.cancelled;\n\n/**\n * @internal\n */\nexport type OverlappingInteractionsProps = Pick<\n  InteractionsOverlayProps,\n  | 'pinned'\n  | 'selectionArea'\n  | 'onSelectEnd'\n  | 'onHover'\n  | 'onTogglePin'\n  | 'height'\n  | 'onReset'\n  | 'width'\n  | 'onZoomChange'\n  | 'onPanStart'\n  | 'onPanChange'\n  | 'onPanEnd'\n  | 'onModeChange'\n> & {\n  eventCancelled: RefObject<boolean>;\n  setCursorMode: Dispatch<SetStateAction<InteractionMode | 'zoomOut'>>;\n  lastMousePositionRef: RefObject<RelativeAbsolutePosition | undefined>;\n  panDeltaRef: RefObject<number | undefined>;\n};\n\n/**\n * @internal\n */\nexport type exploreInteractions = OverlappingInteractionsProps &\n  Pick<\n    InteractionsOverlayProps,\n    'onModeChange' | 'onSelectChange' | 'onSelectStart' | 'isZoomXDisabled'\n  >;\n\n/**\n * @internal\n */\nexport type zoomInteractions = OverlappingInteractionsProps &\n  Pick<InteractionsOverlayProps, 'onSelectChange' | 'onSelectStart'> & {\n    cursorMode: 'zoomOut' | InteractionMode;\n  };\n\n/**\n * @internal\n */\nexport type panInteractions = OverlappingInteractionsProps & {\n  cursorMode: 'zoomOut' | InteractionMode;\n};\n\n/**\n * @internal\n */\nexport type InteractionsHandlers = {\n  onMouseHover: (event: PointerEventPosition & PointerEventModifiers) => void;\n  onMouseClickOrTap: (\n    event: PointerEventPosition & PointerEventModifiers,\n  ) => void;\n  onDragStart: (event: DragStartProps & PointerEventModifiers) => void;\n  onDragMove: (event: DragMoveProps & PointerEventModifiers) => void;\n  onDragEnd: (event: DragEndProps & PointerEventModifiers) => void;\n  onDoubleClickOrTap: (triggeredBy: InteractionTriggers) => void;\n  onWheel: (event: WheelEvent) => void;\n  onKeyEscape: () => void;\n  onKeyEnter: () => void;\n  onKeyRight: (shiftKey: boolean) => void;\n  onKeyLeft: (shiftKey: boolean) => void;\n  onKeyUp: (isTemporaryZoomMode: boolean) => void;\n  onKeyDown: (isTemporaryZoomMode: boolean) => void;\n  onDragStartWithMiddleButton: () => void;\n  onDragMoveWithMiddleButton: (\n    event: DragMoveProps & PointerEventModifiers,\n  ) => void;\n  onDragEndWithMiddleButton: (\n    event: DragEndProps & PointerEventModifiers,\n  ) => void;\n};\n\n/**\n * @internal\n */\nexport type Interactions = {\n  explore: InteractionsHandlers;\n  zoom: InteractionsHandlers;\n  pan: InteractionsHandlers;\n};\n"],
+  "mappings": "AAwBO,MAAM,mBAAmB,OAAO,OAAsC;AAAA,EAC3E,SAAS;AAAA,EACT,KAAK;AAAA,EACL,MAAM;AACR,CAAC;AAyMM,MAAM,oBAAoB,CAC/B,UAOiC,eAAe,SAAS,MAAM;",
   "names": []
 }

package/esm/charts/core/components/legend/categorical/ChartLegend.css

@@ -1,4 +1,4 @@
-._9x5f9b0-3-11-3 {
+._9x5f9b0-3-12-0 {
   display: flex;
   align-items: center;
   width: 100%;

package/esm/charts/core/components/legend/categorical/ChartLegend.js

@@ -1,14 +1,16 @@
-import { jsx } from "react/jsx-runtime";
-import { useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { legendContainer } from "./ChartLegend.sty.js";
 import { ChartLegendGrid } from "./components/ChartLegendGrid.js";
 import { ChartVirtualizedLegendGrid } from "./components/ChartVirtualizedLegendGrid.js";
 import { LegendGridSettingsContext } from "./context/LegendGridSettingsContext.js";
 import { useLegendInteractions } from "./hooks/useLegendInteractions.js";
 import { buildGridSettings } from "./utils/legend-grid.utils.js";
+import { VisuallyHidden } from "../../../../../core/components/visually-hidden/VisuallyHidden.js";
 import { DEFAULT_TRUNCATION_MODE, ORIENTATION } from "../../../constants.js";
 import { LegendContext } from "../shared/context/Legend.context.js";
 import { useLegendSize } from "../shared/context/LegendSizeContext.js";
+const ANNOUNCE_CLEANUP_MS = 1e3;
 const ChartLegend = (props) => {
   const {
     items,
@@ -23,8 +25,29 @@ const ChartLegend = (props) => {
   const ref = useRef(null);
   const { width, height } = useLegendSize();
   const { onItemHover, onLegendIconClick, onLegendNameClick, hiddenItems } = useLegendInteractions(items, { onClick, onHover });
+  const [announcements, setAnnouncements] = useState([]);
+  const nextAnnouncementId = useRef(0);
+  const cleanupTimeouts = useRef(/* @__PURE__ */ new Set());
+  const announce = useCallback((message) => {
+    const id = nextAnnouncementId.current++;
+    setAnnouncements((current) => [...current, { id, message }]);
+    const timeout = setTimeout(() => {
+      setAnnouncements(
+        (current) => current.filter((announcement) => announcement.id !== id)
+      );
+      cleanupTimeouts.current.delete(timeout);
+    }, ANNOUNCE_CLEANUP_MS);
+    cleanupTimeouts.current.add(timeout);
+  }, []);
+  useEffect(() => {
+    const timeouts = cleanupTimeouts.current;
+    return () => {
+      timeouts.forEach(clearTimeout);
+      timeouts.clear();
+    };
+  }, []);
   const gridSettings = buildGridSettings(items, width, height);
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs(
     "div",
     {
       ref,
@@ -36,27 +59,31 @@ const ChartLegend = (props) => {
         flexDirection: orientation === ORIENTATION.Vertical ? "row" : "column",
         ...style
       },
-      children: /* @__PURE__ */ jsx(
-        LegendContext.Provider,
-        {
-          value: {
-            hiddenItems,
-            truncationMode,
-            onSeriesAction,
-            onLegendIconClick,
-            onItemHover,
-            onLegendNameClick,
-            interactionsDisabled
-          },
-          children: /* @__PURE__ */ jsx(LegendGridSettingsContext.Provider, { value: gridSettings, children: gridSettings.hasVirtual ? /* @__PURE__ */ jsx(
-            ChartVirtualizedLegendGrid,
-            {
-              items,
-              orientation
-            }
-          ) : /* @__PURE__ */ jsx(ChartLegendGrid, { items, orientation }) })
-        }
-      )
+      children: [
+        /* @__PURE__ */ jsx(VisuallyHidden, { children: /* @__PURE__ */ jsx("div", { role: "status", "aria-atomic": "false", children: announcements.map((announcement) => /* @__PURE__ */ jsx("div", { children: announcement.message }, announcement.id)) }) }),
+        /* @__PURE__ */ jsx(
+          LegendContext.Provider,
+          {
+            value: {
+              hiddenItems,
+              truncationMode,
+              onSeriesAction,
+              onLegendIconClick,
+              onItemHover,
+              onLegendNameClick,
+              interactionsDisabled,
+              onAnnounce: announce
+            },
+            children: /* @__PURE__ */ jsx(LegendGridSettingsContext.Provider, { value: gridSettings, children: gridSettings.hasVirtual ? /* @__PURE__ */ jsx(
+              ChartVirtualizedLegendGrid,
+              {
+                items,
+                orientation
+              }
+            ) : /* @__PURE__ */ jsx(ChartLegendGrid, { items, orientation }) })
+          }
+        )
+      ]
     }
   );
 };

package/esm/charts/core/components/legend/categorical/ChartLegend.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/core/components/legend/categorical/ChartLegend.tsx"],
-  "sourcesContent": ["import { useRef } from 'react';\n\nimport { legendContainer } from './ChartLegend.sty.js';\nimport { ChartLegendGrid } from './components/ChartLegendGrid.js';\nimport { ChartVirtualizedLegendGrid } from './components/ChartVirtualizedLegendGrid.js';\nimport { LegendGridSettingsContext } from './context/LegendGridSettingsContext.js';\nimport { useLegendInteractions } from './hooks/useLegendInteractions.js';\nimport { LegendItem } from './types/legend.js';\nimport { buildGridSettings } from './utils/legend-grid.utils.js';\nimport { StylingProps } from '../../../../../core/types/styling-props.js';\nimport type { TruncationMode } from '../../../../../typography/text-ellipsis/TextEllipsis.js';\nimport { DEFAULT_TRUNCATION_MODE, ORIENTATION } from '../../../constants.js';\nimport { ChartLegendOrientation } from '../../../types/legend.js';\nimport type { SeriesActions } from '../../../types/series-actions-template.js';\nimport { LegendContext } from '../shared/context/Legend.context.js';\nimport { useLegendSize } from '../shared/context/LegendSizeContext.js';\n\n/**\n * @internal\n */\nexport interface ChartLegendProps extends StylingProps {\n  /** The series of the legend */\n  items: LegendItem[];\n  /** Chart orientation\n   ** @defaultValue 'horizontal' */\n  orientation?: ChartLegendOrientation;\n  /** Sometimes no legend interactions are allowed (while tooltip is pinned) */\n  interactionsDisabled?: boolean;\n  /** Called when the user hovers over a legend item */\n  onHover?: (hoveredSeries?: LegendItem) => void;\n  /** Called when the user click the legend item */\n  onClick?: (visible: LegendItem[]) => void;\n  /** Called when the user performs a legend action */\n  onSeriesAction?: SeriesActions<LegendItem>;\n  /**\n   * Truncation mode to use (start, middle, end)\n   * Applied to all the parts that truncate text.\n   * @defaultValue 'middle'\n   */\n  truncationMode?: TruncationMode;\n}\n\n/**\n * @internal\n */\nexport const ChartLegend = (props: ChartLegendProps) => {\n  const {\n    items,\n    orientation = ORIENTATION.Horizontal,\n    onHover,\n    onClick,\n    onSeriesAction,\n    interactionsDisabled = false,\n    truncationMode = DEFAULT_TRUNCATION_MODE,\n    style,\n  } = props;\n\n  const ref = useRef<HTMLDivElement>(null);\n  const { width, height } = useLegendSize();\n  const { onItemHover, onLegendIconClick, onLegendNameClick, hiddenItems } =\n    useLegendInteractions(items, { onClick, onHover });\n\n  const gridSettings = buildGridSettings(items, width, height);\n\n  return (\n    <div\n      ref={ref}\n      data-testid=\"chart-legend\"\n      className={legendContainer}\n      style={{\n        height,\n        width,\n        flexDirection: orientation === ORIENTATION.Vertical ? 'row' : 'column',\n        ...style,\n      }}\n    >\n      <LegendContext.Provider\n        value={{\n          hiddenItems,\n          truncationMode,\n          onSeriesAction,\n          onLegendIconClick,\n          onItemHover,\n          onLegendNameClick,\n          interactionsDisabled,\n        }}\n      >\n        <LegendGridSettingsContext.Provider value={gridSettings}>\n          {gridSettings.hasVirtual ? (\n            <ChartVirtualizedLegendGrid\n              items={items}\n              orientation={orientation}\n            />\n          ) : (\n            <ChartLegendGrid items={items} orientation={orientation} />\n          )}\n        </LegendGridSettingsContext.Provider>\n      </LegendContext.Provider>\n    </div>\n  );\n};\n\nChartLegend['displayName'] = 'ChartLegend';\n"],
-  "mappings": "AAyFY;AAzFZ,SAAS,cAAc;AAEvB,SAAS,uBAAuB;AAChC,SAAS,uBAAuB;AAChC,SAAS,kCAAkC;AAC3C,SAAS,iCAAiC;AAC1C,SAAS,6BAA6B;AAEtC,SAAS,yBAAyB;AAGlC,SAAS,yBAAyB,mBAAmB;AAGrD,SAAS,qBAAqB;AAC9B,SAAS,qBAAqB;AA8BvB,MAAM,cAAc,CAAC,UAA4B;AACtD,QAAM;AAAA,IACJ;AAAA,IACA,cAAc,YAAY;AAAA,IAC1B;AAAA,IACA;AAAA,IACA;AAAA,IACA,uBAAuB;AAAA,IACvB,iBAAiB;AAAA,IACjB;AAAA,EACF,IAAI;AAEJ,QAAM,MAAM,OAAuB,IAAI;AACvC,QAAM,EAAE,OAAO,OAAO,IAAI,cAAc;AACxC,QAAM,EAAE,aAAa,mBAAmB,mBAAmB,YAAY,IACrE,sBAAsB,OAAO,EAAE,SAAS,QAAQ,CAAC;AAEnD,QAAM,eAAe,kBAAkB,OAAO,OAAO,MAAM;AAE3D,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,eAAY;AAAA,MACZ,WAAW;AAAA,MACX,OAAO;AAAA,QACL;AAAA,QACA;AAAA,QACA,eAAe,gBAAgB,YAAY,WAAW,QAAQ;AAAA,QAC9D,GAAG;AAAA,MACL;AAAA,MAEA;AAAA,QAAC,cAAc;AAAA,QAAd;AAAA,UACC,OAAO;AAAA,YACL;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,UACF;AAAA,UAEA,8BAAC,0BAA0B,UAA1B,EAAmC,OAAO,cACxC,uBAAa,aACZ;AAAA,YAAC;AAAA;AAAA,cACC;AAAA,cACA;AAAA;AAAA,UACF,IAEA,oBAAC,mBAAgB,OAAc,aAA0B,GAE7D;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;AAEA,YAAY,aAAa,IAAI;",
+  "sourcesContent": ["import { useCallback, useEffect, useRef, useState } from 'react';\n\nimport { legendContainer } from './ChartLegend.sty.js';\nimport { ChartLegendGrid } from './components/ChartLegendGrid.js';\nimport { ChartVirtualizedLegendGrid } from './components/ChartVirtualizedLegendGrid.js';\nimport { LegendGridSettingsContext } from './context/LegendGridSettingsContext.js';\nimport { useLegendInteractions } from './hooks/useLegendInteractions.js';\nimport { LegendItem } from './types/legend.js';\nimport { buildGridSettings } from './utils/legend-grid.utils.js';\nimport { VisuallyHidden } from '../../../../../core/components/visually-hidden/VisuallyHidden.js';\nimport { StylingProps } from '../../../../../core/types/styling-props.js';\nimport type { TruncationMode } from '../../../../../typography/text-ellipsis/TextEllipsis.js';\nimport { DEFAULT_TRUNCATION_MODE, ORIENTATION } from '../../../constants.js';\nimport { ChartLegendOrientation } from '../../../types/legend.js';\nimport type { SeriesActions } from '../../../types/series-actions-template.js';\nimport { LegendContext } from '../shared/context/Legend.context.js';\nimport { useLegendSize } from '../shared/context/LegendSizeContext.js';\n\n/** How long an announcement node stays mounted before being removed from the live region. */\nconst ANNOUNCE_CLEANUP_MS = 1000;\n\ninterface Announcement {\n  id: number;\n  message: string;\n}\n\n/**\n * @internal\n */\nexport interface ChartLegendProps extends StylingProps {\n  /** The series of the legend */\n  items: LegendItem[];\n  /** Chart orientation\n   ** @defaultValue 'horizontal' */\n  orientation?: ChartLegendOrientation;\n  /** Sometimes no legend interactions are allowed (while tooltip is pinned) */\n  interactionsDisabled?: boolean;\n  /** Called when the user hovers over a legend item */\n  onHover?: (hoveredSeries?: LegendItem) => void;\n  /** Called when the user click the legend item */\n  onClick?: (visible: LegendItem[]) => void;\n  /** Called when the user performs a legend action */\n  onSeriesAction?: SeriesActions<LegendItem>;\n  /**\n   * Truncation mode to use (start, middle, end)\n   * Applied to all the parts that truncate text.\n   * @defaultValue 'middle'\n   */\n  truncationMode?: TruncationMode;\n}\n\n/**\n * @internal\n */\nexport const ChartLegend = (props: ChartLegendProps) => {\n  const {\n    items,\n    orientation = ORIENTATION.Horizontal,\n    onHover,\n    onClick,\n    onSeriesAction,\n    interactionsDisabled = false,\n    truncationMode = DEFAULT_TRUNCATION_MODE,\n    style,\n  } = props;\n\n  const ref = useRef<HTMLDivElement>(null);\n  const { width, height } = useLegendSize();\n  const { onItemHover, onLegendIconClick, onLegendNameClick, hiddenItems } =\n    useLegendInteractions(items, { onClick, onHover });\n\n  const [announcements, setAnnouncements] = useState<Announcement[]>([]);\n  const nextAnnouncementId = useRef(0);\n  const cleanupTimeouts = useRef(new Set<ReturnType<typeof setTimeout>>());\n\n  // Each announcement is appended as a new child node rather than overwriting a\n  // single text node. Screen readers (VoiceOver in particular) cache the last\n  // spoken value and won't re-announce when a live region is merely cleared and\n  // reset to the same string; inserting a fresh node reliably triggers a new\n  // announcement even for repeated identical messages (e.g. \"Copied\"). Nodes are\n  // removed shortly after so the region doesn't accumulate stale content.\n  const announce = useCallback((message: string) => {\n    const id = nextAnnouncementId.current++;\n    setAnnouncements((current) => [...current, { id, message }]);\n\n    const timeout = setTimeout(() => {\n      setAnnouncements((current) =>\n        current.filter((announcement) => announcement.id !== id),\n      );\n      cleanupTimeouts.current.delete(timeout);\n    }, ANNOUNCE_CLEANUP_MS);\n    cleanupTimeouts.current.add(timeout);\n  }, []);\n\n  useEffect(() => {\n    const timeouts = cleanupTimeouts.current;\n    return () => {\n      timeouts.forEach(clearTimeout);\n      timeouts.clear();\n    };\n  }, []);\n\n  const gridSettings = buildGridSettings(items, width, height);\n\n  return (\n    <div\n      ref={ref}\n      data-testid=\"chart-legend\"\n      className={legendContainer}\n      style={{\n        height,\n        width,\n        flexDirection: orientation === ORIENTATION.Vertical ? 'row' : 'column',\n        ...style,\n      }}\n    >\n      <VisuallyHidden>\n        <div role=\"status\" aria-atomic=\"false\">\n          {announcements.map((announcement) => (\n            <div key={announcement.id}>{announcement.message}</div>\n          ))}\n        </div>\n      </VisuallyHidden>\n      <LegendContext.Provider\n        value={{\n          hiddenItems,\n          truncationMode,\n          onSeriesAction,\n          onLegendIconClick,\n          onItemHover,\n          onLegendNameClick,\n          interactionsDisabled,\n          onAnnounce: announce,\n        }}\n      >\n        <LegendGridSettingsContext.Provider value={gridSettings}>\n          {gridSettings.hasVirtual ? (\n            <ChartVirtualizedLegendGrid\n              items={items}\n              orientation={orientation}\n            />\n          ) : (\n            <ChartLegendGrid items={items} orientation={orientation} />\n          )}\n        </LegendGridSettingsContext.Provider>\n      </LegendContext.Provider>\n    </div>\n  );\n};\n\nChartLegend['displayName'] = 'ChartLegend';\n"],
+  "mappings": "AAyGI,SAcQ,KAdR;AAzGJ,SAAS,aAAa,WAAW,QAAQ,gBAAgB;AAEzD,SAAS,uBAAuB;AAChC,SAAS,uBAAuB;AAChC,SAAS,kCAAkC;AAC3C,SAAS,iCAAiC;AAC1C,SAAS,6BAA6B;AAEtC,SAAS,yBAAyB;AAClC,SAAS,sBAAsB;AAG/B,SAAS,yBAAyB,mBAAmB;AAGrD,SAAS,qBAAqB;AAC9B,SAAS,qBAAqB;AAG9B,MAAM,sBAAsB;AAmCrB,MAAM,cAAc,CAAC,UAA4B;AACtD,QAAM;AAAA,IACJ;AAAA,IACA,cAAc,YAAY;AAAA,IAC1B;AAAA,IACA;AAAA,IACA;AAAA,IACA,uBAAuB;AAAA,IACvB,iBAAiB;AAAA,IACjB;AAAA,EACF,IAAI;AAEJ,QAAM,MAAM,OAAuB,IAAI;AACvC,QAAM,EAAE,OAAO,OAAO,IAAI,cAAc;AACxC,QAAM,EAAE,aAAa,mBAAmB,mBAAmB,YAAY,IACrE,sBAAsB,OAAO,EAAE,SAAS,QAAQ,CAAC;AAEnD,QAAM,CAAC,eAAe,gBAAgB,IAAI,SAAyB,CAAC,CAAC;AACrE,QAAM,qBAAqB,OAAO,CAAC;AACnC,QAAM,kBAAkB,OAAO,oBAAI,IAAmC,CAAC;AAQvE,QAAM,WAAW,YAAY,CAAC,YAAoB;AAChD,UAAM,KAAK,mBAAmB;AAC9B,qBAAiB,CAAC,YAAY,CAAC,GAAG,SAAS,EAAE,IAAI,QAAQ,CAAC,CAAC;AAE3D,UAAM,UAAU,WAAW,MAAM;AAC/B;AAAA,QAAiB,CAAC,YAChB,QAAQ,OAAO,CAAC,iBAAiB,aAAa,OAAO,EAAE;AAAA,MACzD;AACA,sBAAgB,QAAQ,OAAO,OAAO;AAAA,IACxC,GAAG,mBAAmB;AACtB,oBAAgB,QAAQ,IAAI,OAAO;AAAA,EACrC,GAAG,CAAC,CAAC;AAEL,YAAU,MAAM;AACd,UAAM,WAAW,gBAAgB;AACjC,WAAO,MAAM;AACX,eAAS,QAAQ,YAAY;AAC7B,eAAS,MAAM;AAAA,IACjB;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,QAAM,eAAe,kBAAkB,OAAO,OAAO,MAAM;AAE3D,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,eAAY;AAAA,MACZ,WAAW;AAAA,MACX,OAAO;AAAA,QACL;AAAA,QACA;AAAA,QACA,eAAe,gBAAgB,YAAY,WAAW,QAAQ;AAAA,QAC9D,GAAG;AAAA,MACL;AAAA,MAEA;AAAA,4BAAC,kBACC,8BAAC,SAAI,MAAK,UAAS,eAAY,SAC5B,wBAAc,IAAI,CAAC,iBAClB,oBAAC,SAA2B,uBAAa,WAA/B,aAAa,EAA0B,CAClD,GACH,GACF;AAAA,QACA;AAAA,UAAC,cAAc;AAAA,UAAd;AAAA,YACC,OAAO;AAAA,cACL;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA,YAAY;AAAA,YACd;AAAA,YAEA,8BAAC,0BAA0B,UAA1B,EAAmC,OAAO,cACxC,uBAAa,aACZ;AAAA,cAAC;AAAA;AAAA,gBACC;AAAA,gBACA;AAAA;AAAA,YACF,IAEA,oBAAC,mBAAgB,OAAc,aAA0B,GAE7D;AAAA;AAAA,QACF;AAAA;AAAA;AAAA,EACF;AAEJ;AAEA,YAAY,aAAa,IAAI;",
   "names": []
 }

package/esm/charts/core/components/legend/categorical/ChartLegend.sty.js

@@ -1,5 +1,5 @@
 import "./ChartLegend.css";
-var legendContainer = "_9x5f9b0-3-11-3";
+var legendContainer = "_9x5f9b0-3-12-0";
 export {
   legendContainer
 };

package/esm/charts/core/components/legend/categorical/ChartLegend.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/core/components/legend/categorical/ChartLegend.css.ts"],
-  "sourcesContent": ["import './ChartLegend.css';\nexport var legendContainer = '_9x5f9b0-3-11-3';"],
+  "sourcesContent": ["import './ChartLegend.css';\nexport var legendContainer = '_9x5f9b0-3-12-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,kBAAkB;",
   "names": []
 }

package/esm/charts/core/components/legend/categorical/components/ChartLegendIcon/ChartLegendIcon.css

@@ -1,12 +1,12 @@
-._1wmibjy0-3-11-3 {
+._1wmibjy0-3-12-0 {
   font-size: var(--dt-spacings-size-8, 8px);
   display: block;
 }
-._1wmibjy1-3-11-3 {
+._1wmibjy1-3-12-0 {
   font-size: var(--dt-spacings-size-8, 8px);
   display: block;
 }
-._1wmibjy2-3-11-3 {
+._1wmibjy2-3-12-0 {
   width: var(--dt-spacings-size-8, 8px);
   height: var(--dt-spacings-size-8, 8px);
   border-radius: 100%;

package/esm/charts/core/components/legend/categorical/components/ChartLegendIcon/ChartLegendIcon.js

@@ -20,6 +20,7 @@ const ChartLegendIcon = (props) => {
     hover,
     disabled,
     color,
+    ariaLabel,
     icon,
     buttonRef,
     onMouseEnter,
@@ -48,7 +49,7 @@ const ChartLegendIcon = (props) => {
     "button",
     {
       ref: buttonRef,
-      "aria-label": "Hide",
+      "aria-label": ariaLabel,
       "data-testid": "chart-legend-item-icon",
       "data-dt-children-name": "LegendHideItem",
       "data-dt-properties": visible ? "state:hide" : "state:show",

package/esm/charts/core/components/legend/categorical/components/ChartLegendIcon/ChartLegendIcon.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../../src/charts/core/components/legend/categorical/components/ChartLegendIcon/ChartLegendIcon.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport { type RefObject, type ReactElement } from 'react';\n\nimport Colors from '@dynatrace/strato-design-tokens/colors';\nimport { ViewIcon, ViewOffIcon } from '@dynatrace/strato-icons';\n\nimport {\n  coloredEyeOffIcon,\n  eyeIcon,\n  singleDimensionIcon,\n} from './ChartLegendIcon.sty.js';\nimport { getTokenComputedStyle } from '../../../../../utils/getTokenComputedStyle.js';\nimport { getValidColor } from '../../../../../utils/getValidColor.js';\nimport { useLegend } from '../../hooks/useLegend.js';\nimport {\n  baseLegendButton,\n  legendItemButton,\n} from '../ChartLegendItem/ChartLegendItem.sty.js';\n\ninterface LegendIconProps {\n  visible: boolean;\n  hover: boolean;\n  disabled: boolean;\n  color: string;\n  icon?: ReactElement;\n  buttonRef: RefObject<HTMLButtonElement | null>;\n  onMouseEnter: () => void;\n  onButtonClick?: () => void;\n}\n\nexport const ChartLegendIcon = (props: LegendIconProps) => {\n  const {\n    visible,\n    hover,\n    disabled,\n    color,\n    icon,\n    buttonRef,\n    onMouseEnter,\n    onButtonClick,\n  } = props;\n\n  const { interactionsDisabled } = useLegend();\n\n  const validColor = getTokenComputedStyle(getValidColor(color));\n\n  const withCustomIconOrDefault = icon ? (\n    icon\n  ) : (\n    <span\n      data-testid=\"chart-legend-item-icon-visible\"\n      className={singleDimensionIcon}\n      style={{ backgroundColor: validColor }}\n    />\n  );\n\n  const iconVisibleOrHidden = visible ? (\n    withCustomIconOrDefault\n  ) : (\n    <ViewOffIcon\n      data-testid=\"chart-legend-item-icon-hidden\"\n      size=\"small\"\n      className={coloredEyeOffIcon}\n      style={{ color }}\n    />\n  );\n\n  return (\n    <button\n      ref={buttonRef}\n      aria-label=\"Hide\"\n      data-testid=\"chart-legend-item-icon\"\n      data-dt-children-name=\"LegendHideItem\"\n      data-dt-properties={visible ? 'state:hide' : 'state:show'}\n      disabled={disabled}\n      onFocus={(e) => {\n        onMouseEnter();\n      }}\n      onClick={onButtonClick}\n      onMouseEnter={onMouseEnter}\n      className={clsx(\n        baseLegendButton,\n        legendItemButton({\n          isInteractive: !interactionsDisabled,\n        }),\n      )}\n      style={{\n        color: visible || hover ? color : Colors.Text.Neutral.Subdued,\n      }}\n    >\n      {hover && visible && !disabled ? (\n        <ViewIcon\n          data-testid=\"chart-legend-item-icon-hover\"\n          size=\"small\"\n          className={eyeIcon}\n        />\n      ) : (\n        iconVisibleOrHidden\n      )}\n    </button>\n  );\n};\n"],
-  "mappings": "AAiDI;AAjDJ,OAAO,UAAU;AAGjB,OAAO,YAAY;AACnB,SAAS,UAAU,mBAAmB;AAEtC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,6BAA6B;AACtC,SAAS,qBAAqB;AAC9B,SAAS,iBAAiB;AAC1B;AAAA,EACE;AAAA,EACA;AAAA,OACK;AAaA,MAAM,kBAAkB,CAAC,UAA2B;AACzD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,EAAE,qBAAqB,IAAI,UAAU;AAE3C,QAAM,aAAa,sBAAsB,cAAc,KAAK,CAAC;AAE7D,QAAM,0BAA0B,OAC9B,OAEA;AAAA,IAAC;AAAA;AAAA,MACC,eAAY;AAAA,MACZ,WAAW;AAAA,MACX,OAAO,EAAE,iBAAiB,WAAW;AAAA;AAAA,EACvC;AAGF,QAAM,sBAAsB,UAC1B,0BAEA;AAAA,IAAC;AAAA;AAAA,MACC,eAAY;AAAA,MACZ,MAAK;AAAA,MACL,WAAW;AAAA,MACX,OAAO,EAAE,MAAM;AAAA;AAAA,EACjB;AAGF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,cAAW;AAAA,MACX,eAAY;AAAA,MACZ,yBAAsB;AAAA,MACtB,sBAAoB,UAAU,eAAe;AAAA,MAC7C;AAAA,MACA,SAAS,CAAC,MAAM;AACd,qBAAa;AAAA,MACf;AAAA,MACA,SAAS;AAAA,MACT;AAAA,MACA,WAAW;AAAA,QACT;AAAA,QACA,iBAAiB;AAAA,UACf,eAAe,CAAC;AAAA,QAClB,CAAC;AAAA,MACH;AAAA,MACA,OAAO;AAAA,QACL,OAAO,WAAW,QAAQ,QAAQ,OAAO,KAAK,QAAQ;AAAA,MACxD;AAAA,MAEC,mBAAS,WAAW,CAAC,WACpB;AAAA,QAAC;AAAA;AAAA,UACC,eAAY;AAAA,UACZ,MAAK;AAAA,UACL,WAAW;AAAA;AAAA,MACb,IAEA;AAAA;AAAA,EAEJ;AAEJ;",
+  "sourcesContent": ["import clsx from 'clsx';\nimport { type RefObject, type ReactElement } from 'react';\n\nimport Colors from '@dynatrace/strato-design-tokens/colors';\nimport { ViewIcon, ViewOffIcon } from '@dynatrace/strato-icons';\n\nimport {\n  coloredEyeOffIcon,\n  eyeIcon,\n  singleDimensionIcon,\n} from './ChartLegendIcon.sty.js';\nimport { getTokenComputedStyle } from '../../../../../utils/getTokenComputedStyle.js';\nimport { getValidColor } from '../../../../../utils/getValidColor.js';\nimport { useLegend } from '../../hooks/useLegend.js';\nimport {\n  baseLegendButton,\n  legendItemButton,\n} from '../ChartLegendItem/ChartLegendItem.sty.js';\n\ninterface LegendIconProps {\n  visible: boolean;\n  hover: boolean;\n  disabled: boolean;\n  color: string;\n  ariaLabel: string;\n  icon?: ReactElement;\n  buttonRef: RefObject<HTMLButtonElement | null>;\n  onMouseEnter: () => void;\n  onButtonClick?: () => void;\n}\n\nexport const ChartLegendIcon = (props: LegendIconProps) => {\n  const {\n    visible,\n    hover,\n    disabled,\n    color,\n    ariaLabel,\n    icon,\n    buttonRef,\n    onMouseEnter,\n    onButtonClick,\n  } = props;\n\n  const { interactionsDisabled } = useLegend();\n\n  const validColor = getTokenComputedStyle(getValidColor(color));\n\n  const withCustomIconOrDefault = icon ? (\n    icon\n  ) : (\n    <span\n      data-testid=\"chart-legend-item-icon-visible\"\n      className={singleDimensionIcon}\n      style={{ backgroundColor: validColor }}\n    />\n  );\n\n  const iconVisibleOrHidden = visible ? (\n    withCustomIconOrDefault\n  ) : (\n    <ViewOffIcon\n      data-testid=\"chart-legend-item-icon-hidden\"\n      size=\"small\"\n      className={coloredEyeOffIcon}\n      style={{ color }}\n    />\n  );\n\n  return (\n    <button\n      ref={buttonRef}\n      aria-label={ariaLabel}\n      data-testid=\"chart-legend-item-icon\"\n      data-dt-children-name=\"LegendHideItem\"\n      data-dt-properties={visible ? 'state:hide' : 'state:show'}\n      disabled={disabled}\n      onFocus={(e) => {\n        onMouseEnter();\n      }}\n      onClick={onButtonClick}\n      onMouseEnter={onMouseEnter}\n      className={clsx(\n        baseLegendButton,\n        legendItemButton({\n          isInteractive: !interactionsDisabled,\n        }),\n      )}\n      style={{\n        color: visible || hover ? color : Colors.Text.Neutral.Subdued,\n      }}\n    >\n      {hover && visible && !disabled ? (\n        <ViewIcon\n          data-testid=\"chart-legend-item-icon-hover\"\n          size=\"small\"\n          className={eyeIcon}\n        />\n      ) : (\n        iconVisibleOrHidden\n      )}\n    </button>\n  );\n};\n"],
+  "mappings": "AAmDI;AAnDJ,OAAO,UAAU;AAGjB,OAAO,YAAY;AACnB,SAAS,UAAU,mBAAmB;AAEtC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,6BAA6B;AACtC,SAAS,qBAAqB;AAC9B,SAAS,iBAAiB;AAC1B;AAAA,EACE;AAAA,EACA;AAAA,OACK;AAcA,MAAM,kBAAkB,CAAC,UAA2B;AACzD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,EAAE,qBAAqB,IAAI,UAAU;AAE3C,QAAM,aAAa,sBAAsB,cAAc,KAAK,CAAC;AAE7D,QAAM,0BAA0B,OAC9B,OAEA;AAAA,IAAC;AAAA;AAAA,MACC,eAAY;AAAA,MACZ,WAAW;AAAA,MACX,OAAO,EAAE,iBAAiB,WAAW;AAAA;AAAA,EACvC;AAGF,QAAM,sBAAsB,UAC1B,0BAEA;AAAA,IAAC;AAAA;AAAA,MACC,eAAY;AAAA,MACZ,MAAK;AAAA,MACL,WAAW;AAAA,MACX,OAAO,EAAE,MAAM;AAAA;AAAA,EACjB;AAGF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,cAAY;AAAA,MACZ,eAAY;AAAA,MACZ,yBAAsB;AAAA,MACtB,sBAAoB,UAAU,eAAe;AAAA,MAC7C;AAAA,MACA,SAAS,CAAC,MAAM;AACd,qBAAa;AAAA,MACf;AAAA,MACA,SAAS;AAAA,MACT;AAAA,MACA,WAAW;AAAA,QACT;AAAA,QACA,iBAAiB;AAAA,UACf,eAAe,CAAC;AAAA,QAClB,CAAC;AAAA,MACH;AAAA,MACA,OAAO;AAAA,QACL,OAAO,WAAW,QAAQ,QAAQ,OAAO,KAAK,QAAQ;AAAA,MACxD;AAAA,MAEC,mBAAS,WAAW,CAAC,WACpB;AAAA,QAAC;AAAA;AAAA,UACC,eAAY;AAAA,UACZ,MAAK;AAAA,UACL,WAAW;AAAA;AAAA,MACb,IAEA;AAAA;AAAA,EAEJ;AAEJ;",
   "names": []
 }

package/esm/charts/core/components/legend/categorical/components/ChartLegendIcon/ChartLegendIcon.sty.js

@@ -1,7 +1,7 @@
 import "./ChartLegendIcon.css";
-var coloredEyeOffIcon = "_1wmibjy1-3-11-3";
-var eyeIcon = "_1wmibjy0-3-11-3";
-var singleDimensionIcon = "_1wmibjy2-3-11-3";
+var coloredEyeOffIcon = "_1wmibjy1-3-12-0";
+var eyeIcon = "_1wmibjy0-3-12-0";
+var singleDimensionIcon = "_1wmibjy2-3-12-0";
 export {
   coloredEyeOffIcon,
   eyeIcon,

package/esm/charts/core/components/legend/categorical/components/ChartLegendIcon/ChartLegendIcon.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../../src/charts/core/components/legend/categorical/components/ChartLegendIcon/ChartLegendIcon.css.ts"],
-  "sourcesContent": ["import './ChartLegendIcon.css';\nexport var coloredEyeOffIcon = '_1wmibjy1-3-11-3';\nexport var eyeIcon = '_1wmibjy0-3-11-3';\nexport var singleDimensionIcon = '_1wmibjy2-3-11-3';"],
+  "sourcesContent": ["import './ChartLegendIcon.css';\nexport var coloredEyeOffIcon = '_1wmibjy1-3-12-0';\nexport var eyeIcon = '_1wmibjy0-3-12-0';\nexport var singleDimensionIcon = '_1wmibjy2-3-12-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,oBAAoB;AACxB,IAAI,UAAU;AACd,IAAI,sBAAsB;",
   "names": []
 }

package/esm/charts/core/components/legend/categorical/components/ChartLegendItem/ChartLegendItem.css

@@ -1,4 +1,4 @@
-._mt8v6g0-3-11-3 {
+._mt8v6g0-3-12-0 {
   display: inline-flex;
   justify-content: center;
   align-items: center;
@@ -19,23 +19,23 @@
   padding: var(--dt-spacings-size-2, 2px);
   width: fit-content;
 }
-._mt8v6g1-3-11-3 {
+._mt8v6g1-3-12-0 {
   padding-left: var(--dt-spacings-size-4, 4px);
   padding-right: var(--dt-spacings-size-4, 4px);
 }
-._mt8v6g1-3-11-3:disabled {
+._mt8v6g1-3-12-0:disabled {
   cursor: auto;
 }
-._mt8v6g2-3-11-3 {
+._mt8v6g2-3-12-0 {
   cursor: pointer;
 }
-._mt8v6g2-3-11-3:hover {
+._mt8v6g2-3-12-0:hover {
   background-color: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
 }
-._mt8v6g3-3-11-3 {
+._mt8v6g3-3-12-0 {
   cursor: auto;
 }
-._mt8v6g4-3-11-3 {
+._mt8v6g4-3-12-0 {
   padding-left: var(--dt-spacings-size-4, 4px);
   padding-right: var(--dt-spacings-size-0, 0);
   min-width: var(--dt-spacings-size-20, 20px);
@@ -45,27 +45,27 @@
   font-family: var(--dt-typography-text-small-default-family, DynatraceFlow,Roboto,Helvetica,sans-serif);
   line-height: var(--dt-typography-text-small-emphasized-line-height, 1.333333333);
 }
-._mt8v6g4-3-11-3:hover {
+._mt8v6g4-3-12-0:hover {
   cursor: auto;
 }
-._mt8v6g5-3-11-3:hover {
+._mt8v6g5-3-12-0:hover {
   background-color: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
   cursor: pointer;
 }
-._mt8v6g6-3-11-3:hover {
+._mt8v6g6-3-12-0:hover {
   background-color: unset;
   cursor: auto;
 }
-._mt8v6g7-3-11-3 {
+._mt8v6g7-3-12-0 {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
 }
-._mt8v6g8-3-11-3 {
+._mt8v6g8-3-12-0 {
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
 }
-._mt8v6g4-3-11-3 > .button-children {
+._mt8v6g4-3-12-0 > .button-children {
   flex-grow: 1;
 }
-._mt8v6g9-3-11-3 {
+._mt8v6g9-3-12-0 {
   line-height: 2;
   white-space: nowrap;
   display: flex;
@@ -74,10 +74,10 @@
   flex-shrink: 1;
   height: var(--dt-spacings-size-20, 20px);
 }
-._mt8v6g9-3-11-3 > ._mt8v6g1-3-11-3 {
+._mt8v6g9-3-12-0 > ._mt8v6g1-3-12-0 {
   flex: 0 0 auto;
 }
-._mt8v6ga-3-11-3 {
+._mt8v6ga-3-12-0 {
   flex: 1 1 auto;
   white-space: nowrap;
   display: flex;
@@ -85,7 +85,7 @@
   overflow: hidden;
   padding-right: var(--dt-spacings-size-4, 4px);
 }
-._mt8v6gb-3-11-3 {
+._mt8v6gb-3-12-0 {
   flex-shrink: 1;
   text-align: left;
   overflow: hidden;

package/esm/charts/core/components/legend/categorical/components/ChartLegendItem/ChartLegendItem.js

@@ -18,7 +18,8 @@ const ChartLegendItem = (props) => {
     onItemHover,
     onLegendNameClick,
     interactionsDisabled,
-    onSeriesAction: actions
+    onSeriesAction: actions,
+    onAnnounce
   } = useLegend();
   const {
     refIconButton,
@@ -62,9 +63,33 @@ const ChartLegendItem = (props) => {
   };
   const { intl, defaultActions } = useLegendItemActions(
     item,
-    onLegendItemAction
+    onLegendItemAction,
+    onAnnounce
   );
-  const iconButtonClickHandler = !isLastItem ? onIconButtonClick : void 0;
+  const hideAriaLabel = intl.formatMessage(
+    LEGEND_MESSAGES.legendHideSeriesAria,
+    { seriesName: item.name }
+  );
+  const showAriaLabel = intl.formatMessage(
+    LEGEND_MESSAGES.legendShowSeriesAria,
+    { seriesName: item.name }
+  );
+  const actionsAriaLabel = intl.formatMessage(
+    LEGEND_MESSAGES.legendSeriesActionsAria,
+    { seriesName: item.name }
+  );
+  const hiddenAnnouncement = intl.formatMessage(
+    LEGEND_MESSAGES.legendSeriesHiddenAnnouncement,
+    { seriesName: item.name }
+  );
+  const shownAnnouncement = intl.formatMessage(
+    LEGEND_MESSAGES.legendSeriesShownAnnouncement,
+    { seriesName: item.name }
+  );
+  const iconButtonClickHandler = !isLastItem ? () => {
+    onIconButtonClick();
+    onAnnounce(visible ? hiddenAnnouncement : shownAnnouncement);
+  } : void 0;
   const disabled = interactionsDisabled || isLastItem;
   const memoizedActions = useMemo(() => {
     if (open && actions) {
@@ -92,6 +117,7 @@ const ChartLegendItem = (props) => {
                 hover: isIconHovered,
                 disabled: isLastItem,
                 color: item.color.Default,
+                ariaLabel: visible ? hideAriaLabel : showAriaLabel,
                 icon: item.icon,
                 buttonRef: refIconButton,
                 onMouseEnter: handleIconMouseEnter,
@@ -124,6 +150,7 @@ const ChartLegendItem = (props) => {
                 {
                   disabled: interactionsDisabled,
                   visible: shouldShowActionsButton,
+                  ariaLabel: actionsAriaLabel,
                   onOpenChange: updateOpenState,
                   isOpen: open,
                   onFocus: handleLabelMouseEnter,

package/esm/charts/core/components/legend/categorical/components/ChartLegendItem/ChartLegendItem.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../../src/charts/core/components/legend/categorical/components/ChartLegendItem/ChartLegendItem.tsx"],
-  "sourcesContent": ["import { useMemo } from 'react';\n\nimport { legendItem, legendNameWrapper } from './ChartLegendItem.sty.js';\nimport { Tooltip } from '../../../../../../../overlays/tooltip/Tooltip.js';\nimport { useLegend } from '../../hooks/useLegend.js';\nimport { useLegendItemActions } from '../../hooks/useLegendItemActions.js';\nimport { useLegendItemInteractions } from '../../hooks/useLegendItemInteractions.js';\nimport { useLegendItemState } from '../../hooks/useLegendItemState.js';\nimport { LEGEND_MESSAGES } from '../../messages.js';\nimport { LegendItem } from '../../types/legend.js';\nimport { ChartLegendIcon } from '../ChartLegendIcon/ChartLegendIcon.js';\nimport { ChartLegendItemLabel } from '../ChartLegendItemLabel/ChartLegendItemLabel.js';\nimport { ChartLegendSeriesActions } from '../ChartLegendSeriesActions/ChartLegendSeriesActions.js';\n\ninterface ChartLegendItemProps {\n  item: LegendItem;\n  active?: HTMLElement;\n  numberOfItems: number;\n}\n\nexport const ChartLegendItem = (props: ChartLegendItemProps) => {\n  const { item, numberOfItems } = props;\n\n  const {\n    hiddenItems,\n    onLegendIconClick,\n    onItemHover,\n    onLegendNameClick,\n    interactionsDisabled,\n    onSeriesAction: actions,\n  } = useLegend();\n\n  const {\n    refIconButton,\n    refNameButton,\n    open,\n    updateOpenState,\n    updateHoveredState,\n    updateVisible,\n    visible,\n    isLastItem,\n    shouldShowActionsButton,\n    isIconHovered,\n  } = useLegendItemState(\n    item,\n    interactionsDisabled,\n    hiddenItems,\n    numberOfItems,\n  );\n\n  const {\n    handleLabelMouseEnter,\n    handleIconMouseEnter,\n    handleMouseLeave,\n    onNameButtonClick,\n    onNameButtonKeyDown,\n    onIconButtonClick,\n  } = useLegendItemInteractions(\n    item,\n    {\n      onItemHover,\n      onLegendIconClick,\n      onLegendNameClick,\n      updateHoveredState,\n      updateVisible,\n      visible,\n    },\n    interactionsDisabled,\n  );\n\n  const onLegendItemAction = () => {\n    onItemHover(undefined);\n    updateHoveredState(false);\n  };\n\n  const { intl, defaultActions } = useLegendItemActions(\n    item,\n    onLegendItemAction,\n  );\n\n  const iconButtonClickHandler = !isLastItem ? onIconButtonClick : undefined;\n  const disabled = interactionsDisabled || isLastItem;\n  const memoizedActions = useMemo(() => {\n    if (open && actions) {\n      return actions(item);\n    }\n  }, [open]);\n\n  return (\n    <div\n      onMouseLeave={handleMouseLeave}\n      data-testid=\"chart-legend-item\"\n      className={legendItem}\n    >\n      <Tooltip\n        data-testid={\n          disabled\n            ? 'chart-legend-item-tooltip-disabled'\n            : 'chart-legend-item-tooltip'\n        }\n        disabled={disabled}\n        text={\n          visible\n            ? intl.formatMessage(LEGEND_MESSAGES.legendHideSeries)\n            : intl.formatMessage(LEGEND_MESSAGES.legendShowSeries)\n        }\n        placement=\"left\"\n      >\n        <ChartLegendIcon\n          visible={visible}\n          hover={isIconHovered}\n          disabled={isLastItem}\n          color={item.color.Default}\n          icon={item.icon}\n          buttonRef={refIconButton}\n          onMouseEnter={handleIconMouseEnter}\n          onButtonClick={iconButtonClickHandler}\n        />\n      </Tooltip>\n      <div\n        onFocus={handleLabelMouseEnter}\n        data-testid=\"chart-legend-name-wrapper\"\n        className={legendNameWrapper}\n      >\n        <ChartLegendItemLabel\n          item={item}\n          visible={visible}\n          buttonRef={refNameButton}\n          onButtonClick={onNameButtonClick}\n          onButtonKeydown={onNameButtonKeyDown}\n          onMouseEnter={handleLabelMouseEnter}\n          onMouseLeave={handleMouseLeave}\n        />\n        {actions && (\n          <ChartLegendSeriesActions\n            disabled={interactionsDisabled}\n            visible={shouldShowActionsButton}\n            onOpenChange={updateOpenState}\n            isOpen={open}\n            onFocus={handleLabelMouseEnter}\n            onMouseEnter={handleLabelMouseEnter}\n            onMouseLeave={handleMouseLeave}\n            defaultActions={defaultActions}\n            actions={memoizedActions}\n            onBlur={handleMouseLeave}\n          />\n        )}\n      </div>\n    </div>\n  );\n};\n\nChartLegendItem['displayName'] = 'ChartLegendItem';\n"],
-  "mappings": "AA4GQ,cAWF,YAXE;AA5GR,SAAS,eAAe;AAExB,SAAS,YAAY,yBAAyB;AAC9C,SAAS,eAAe;AACxB,SAAS,iBAAiB;AAC1B,SAAS,4BAA4B;AACrC,SAAS,iCAAiC;AAC1C,SAAS,0BAA0B;AACnC,SAAS,uBAAuB;AAEhC,SAAS,uBAAuB;AAChC,SAAS,4BAA4B;AACrC,SAAS,gCAAgC;AAQlC,MAAM,kBAAkB,CAAC,UAAgC;AAC9D,QAAM,EAAE,MAAM,cAAc,IAAI;AAEhC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,gBAAgB;AAAA,EAClB,IAAI,UAAU;AAEd,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAAA,IACF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAAA,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA;AAAA,EACF;AAEA,QAAM,qBAAqB,MAAM;AAC/B,gBAAY,MAAS;AACrB,uBAAmB,KAAK;AAAA,EAC1B;AAEA,QAAM,EAAE,MAAM,eAAe,IAAI;AAAA,IAC/B;AAAA,IACA;AAAA,EACF;AAEA,QAAM,yBAAyB,CAAC,aAAa,oBAAoB;AACjE,QAAM,WAAW,wBAAwB;AACzC,QAAM,kBAAkB,QAAQ,MAAM;AACpC,QAAI,QAAQ,SAAS;AACnB,aAAO,QAAQ,IAAI;AAAA,IACrB;AAAA,EACF,GAAG,CAAC,IAAI,CAAC;AAET,SACE;AAAA,IAAC;AAAA;AAAA,MACC,cAAc;AAAA,MACd,eAAY;AAAA,MACZ,WAAW;AAAA,MAEX;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,eACE,WACI,uCACA;AAAA,YAEN;AAAA,YACA,MACE,UACI,KAAK,cAAc,gBAAgB,gBAAgB,IACnD,KAAK,cAAc,gBAAgB,gBAAgB;AAAA,YAEzD,WAAU;AAAA,YAEV;AAAA,cAAC;AAAA;AAAA,gBACC;AAAA,gBACA,OAAO;AAAA,gBACP,UAAU;AAAA,gBACV,OAAO,KAAK,MAAM;AAAA,gBAClB,MAAM,KAAK;AAAA,gBACX,WAAW;AAAA,gBACX,cAAc;AAAA,gBACd,eAAe;AAAA;AAAA,YACjB;AAAA;AAAA,QACF;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,SAAS;AAAA,YACT,eAAY;AAAA,YACZ,WAAW;AAAA,YAEX;AAAA;AAAA,gBAAC;AAAA;AAAA,kBACC;AAAA,kBACA;AAAA,kBACA,WAAW;AAAA,kBACX,eAAe;AAAA,kBACf,iBAAiB;AAAA,kBACjB,cAAc;AAAA,kBACd,cAAc;AAAA;AAAA,cAChB;AAAA,cACC,WACC;AAAA,gBAAC;AAAA;AAAA,kBACC,UAAU;AAAA,kBACV,SAAS;AAAA,kBACT,cAAc;AAAA,kBACd,QAAQ;AAAA,kBACR,SAAS;AAAA,kBACT,cAAc;AAAA,kBACd,cAAc;AAAA,kBACd;AAAA,kBACA,SAAS;AAAA,kBACT,QAAQ;AAAA;AAAA,cACV;AAAA;AAAA;AAAA,QAEJ;AAAA;AAAA;AAAA,EACF;AAEJ;AAEA,gBAAgB,aAAa,IAAI;",
+  "sourcesContent": ["import { useMemo } from 'react';\n\nimport { legendItem, legendNameWrapper } from './ChartLegendItem.sty.js';\nimport { Tooltip } from '../../../../../../../overlays/tooltip/Tooltip.js';\nimport { useLegend } from '../../hooks/useLegend.js';\nimport { useLegendItemActions } from '../../hooks/useLegendItemActions.js';\nimport { useLegendItemInteractions } from '../../hooks/useLegendItemInteractions.js';\nimport { useLegendItemState } from '../../hooks/useLegendItemState.js';\nimport { LEGEND_MESSAGES } from '../../messages.js';\nimport { LegendItem } from '../../types/legend.js';\nimport { ChartLegendIcon } from '../ChartLegendIcon/ChartLegendIcon.js';\nimport { ChartLegendItemLabel } from '../ChartLegendItemLabel/ChartLegendItemLabel.js';\nimport { ChartLegendSeriesActions } from '../ChartLegendSeriesActions/ChartLegendSeriesActions.js';\n\ninterface ChartLegendItemProps {\n  item: LegendItem;\n  active?: HTMLElement;\n  numberOfItems: number;\n}\n\nexport const ChartLegendItem = (props: ChartLegendItemProps) => {\n  const { item, numberOfItems } = props;\n\n  const {\n    hiddenItems,\n    onLegendIconClick,\n    onItemHover,\n    onLegendNameClick,\n    interactionsDisabled,\n    onSeriesAction: actions,\n    onAnnounce,\n  } = useLegend();\n\n  const {\n    refIconButton,\n    refNameButton,\n    open,\n    updateOpenState,\n    updateHoveredState,\n    updateVisible,\n    visible,\n    isLastItem,\n    shouldShowActionsButton,\n    isIconHovered,\n  } = useLegendItemState(\n    item,\n    interactionsDisabled,\n    hiddenItems,\n    numberOfItems,\n  );\n\n  const {\n    handleLabelMouseEnter,\n    handleIconMouseEnter,\n    handleMouseLeave,\n    onNameButtonClick,\n    onNameButtonKeyDown,\n    onIconButtonClick,\n  } = useLegendItemInteractions(\n    item,\n    {\n      onItemHover,\n      onLegendIconClick,\n      onLegendNameClick,\n      updateHoveredState,\n      updateVisible,\n      visible,\n    },\n    interactionsDisabled,\n  );\n\n  const onLegendItemAction = () => {\n    onItemHover(undefined);\n    updateHoveredState(false);\n  };\n\n  const { intl, defaultActions } = useLegendItemActions(\n    item,\n    onLegendItemAction,\n    onAnnounce,\n  );\n\n  const hideAriaLabel = intl.formatMessage(\n    LEGEND_MESSAGES.legendHideSeriesAria,\n    { seriesName: item.name },\n  );\n  const showAriaLabel = intl.formatMessage(\n    LEGEND_MESSAGES.legendShowSeriesAria,\n    { seriesName: item.name },\n  );\n  const actionsAriaLabel = intl.formatMessage(\n    LEGEND_MESSAGES.legendSeriesActionsAria,\n    { seriesName: item.name },\n  );\n\n  const hiddenAnnouncement = intl.formatMessage(\n    LEGEND_MESSAGES.legendSeriesHiddenAnnouncement,\n    { seriesName: item.name },\n  );\n  const shownAnnouncement = intl.formatMessage(\n    LEGEND_MESSAGES.legendSeriesShownAnnouncement,\n    { seriesName: item.name },\n  );\n\n  const iconButtonClickHandler = !isLastItem\n    ? () => {\n        onIconButtonClick();\n        onAnnounce(visible ? hiddenAnnouncement : shownAnnouncement);\n      }\n    : undefined;\n  const disabled = interactionsDisabled || isLastItem;\n  const memoizedActions = useMemo(() => {\n    if (open && actions) {\n      return actions(item);\n    }\n  }, [open]);\n\n  return (\n    <div\n      onMouseLeave={handleMouseLeave}\n      data-testid=\"chart-legend-item\"\n      className={legendItem}\n    >\n      <Tooltip\n        data-testid={\n          disabled\n            ? 'chart-legend-item-tooltip-disabled'\n            : 'chart-legend-item-tooltip'\n        }\n        disabled={disabled}\n        text={\n          visible\n            ? intl.formatMessage(LEGEND_MESSAGES.legendHideSeries)\n            : intl.formatMessage(LEGEND_MESSAGES.legendShowSeries)\n        }\n        placement=\"left\"\n      >\n        <ChartLegendIcon\n          visible={visible}\n          hover={isIconHovered}\n          disabled={isLastItem}\n          color={item.color.Default}\n          ariaLabel={visible ? hideAriaLabel : showAriaLabel}\n          icon={item.icon}\n          buttonRef={refIconButton}\n          onMouseEnter={handleIconMouseEnter}\n          onButtonClick={iconButtonClickHandler}\n        />\n      </Tooltip>\n      <div\n        onFocus={handleLabelMouseEnter}\n        data-testid=\"chart-legend-name-wrapper\"\n        className={legendNameWrapper}\n      >\n        <ChartLegendItemLabel\n          item={item}\n          visible={visible}\n          buttonRef={refNameButton}\n          onButtonClick={onNameButtonClick}\n          onButtonKeydown={onNameButtonKeyDown}\n          onMouseEnter={handleLabelMouseEnter}\n          onMouseLeave={handleMouseLeave}\n        />\n        {actions && (\n          <ChartLegendSeriesActions\n            disabled={interactionsDisabled}\n            visible={shouldShowActionsButton}\n            ariaLabel={actionsAriaLabel}\n            onOpenChange={updateOpenState}\n            isOpen={open}\n            onFocus={handleLabelMouseEnter}\n            onMouseEnter={handleLabelMouseEnter}\n            onMouseLeave={handleMouseLeave}\n            defaultActions={defaultActions}\n            actions={memoizedActions}\n            onBlur={handleMouseLeave}\n          />\n        )}\n      </div>\n    </div>\n  );\n};\n\nChartLegendItem['displayName'] = 'ChartLegendItem';\n"],
+  "mappings": "AAyIQ,cAYF,YAZE;AAzIR,SAAS,eAAe;AAExB,SAAS,YAAY,yBAAyB;AAC9C,SAAS,eAAe;AACxB,SAAS,iBAAiB;AAC1B,SAAS,4BAA4B;AACrC,SAAS,iCAAiC;AAC1C,SAAS,0BAA0B;AACnC,SAAS,uBAAuB;AAEhC,SAAS,uBAAuB;AAChC,SAAS,4BAA4B;AACrC,SAAS,gCAAgC;AAQlC,MAAM,kBAAkB,CAAC,UAAgC;AAC9D,QAAM,EAAE,MAAM,cAAc,IAAI;AAEhC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,gBAAgB;AAAA,IAChB;AAAA,EACF,IAAI,UAAU;AAEd,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAAA,IACF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAAA,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA;AAAA,EACF;AAEA,QAAM,qBAAqB,MAAM;AAC/B,gBAAY,MAAS;AACrB,uBAAmB,KAAK;AAAA,EAC1B;AAEA,QAAM,EAAE,MAAM,eAAe,IAAI;AAAA,IAC/B;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,QAAM,gBAAgB,KAAK;AAAA,IACzB,gBAAgB;AAAA,IAChB,EAAE,YAAY,KAAK,KAAK;AAAA,EAC1B;AACA,QAAM,gBAAgB,KAAK;AAAA,IACzB,gBAAgB;AAAA,IAChB,EAAE,YAAY,KAAK,KAAK;AAAA,EAC1B;AACA,QAAM,mBAAmB,KAAK;AAAA,IAC5B,gBAAgB;AAAA,IAChB,EAAE,YAAY,KAAK,KAAK;AAAA,EAC1B;AAEA,QAAM,qBAAqB,KAAK;AAAA,IAC9B,gBAAgB;AAAA,IAChB,EAAE,YAAY,KAAK,KAAK;AAAA,EAC1B;AACA,QAAM,oBAAoB,KAAK;AAAA,IAC7B,gBAAgB;AAAA,IAChB,EAAE,YAAY,KAAK,KAAK;AAAA,EAC1B;AAEA,QAAM,yBAAyB,CAAC,aAC5B,MAAM;AACJ,sBAAkB;AAClB,eAAW,UAAU,qBAAqB,iBAAiB;AAAA,EAC7D,IACA;AACJ,QAAM,WAAW,wBAAwB;AACzC,QAAM,kBAAkB,QAAQ,MAAM;AACpC,QAAI,QAAQ,SAAS;AACnB,aAAO,QAAQ,IAAI;AAAA,IACrB;AAAA,EACF,GAAG,CAAC,IAAI,CAAC;AAET,SACE;AAAA,IAAC;AAAA;AAAA,MACC,cAAc;AAAA,MACd,eAAY;AAAA,MACZ,WAAW;AAAA,MAEX;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,eACE,WACI,uCACA;AAAA,YAEN;AAAA,YACA,MACE,UACI,KAAK,cAAc,gBAAgB,gBAAgB,IACnD,KAAK,cAAc,gBAAgB,gBAAgB;AAAA,YAEzD,WAAU;AAAA,YAEV;AAAA,cAAC;AAAA;AAAA,gBACC;AAAA,gBACA,OAAO;AAAA,gBACP,UAAU;AAAA,gBACV,OAAO,KAAK,MAAM;AAAA,gBAClB,WAAW,UAAU,gBAAgB;AAAA,gBACrC,MAAM,KAAK;AAAA,gBACX,WAAW;AAAA,gBACX,cAAc;AAAA,gBACd,eAAe;AAAA;AAAA,YACjB;AAAA;AAAA,QACF;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,SAAS;AAAA,YACT,eAAY;AAAA,YACZ,WAAW;AAAA,YAEX;AAAA;AAAA,gBAAC;AAAA;AAAA,kBACC;AAAA,kBACA;AAAA,kBACA,WAAW;AAAA,kBACX,eAAe;AAAA,kBACf,iBAAiB;AAAA,kBACjB,cAAc;AAAA,kBACd,cAAc;AAAA;AAAA,cAChB;AAAA,cACC,WACC;AAAA,gBAAC;AAAA;AAAA,kBACC,UAAU;AAAA,kBACV,SAAS;AAAA,kBACT,WAAW;AAAA,kBACX,cAAc;AAAA,kBACd,QAAQ;AAAA,kBACR,SAAS;AAAA,kBACT,cAAc;AAAA,kBACd,cAAc;AAAA,kBACd;AAAA,kBACA,SAAS;AAAA,kBACT,QAAQ;AAAA;AAAA,cACV;AAAA;AAAA;AAAA,QAEJ;AAAA;AAAA;AAAA,EACF;AAEJ;AAEA,gBAAgB,aAAa,IAAI;",
   "names": []
 }

package/esm/charts/core/components/legend/categorical/components/ChartLegendItem/ChartLegendItem.sty.js

@@ -2,12 +2,12 @@ import "../../../../../../../core/styles/focusRingStatic.css";
 import "./ChartLegendItem.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
 var ItemFontStyles = { fontWeight: "var(--dt-typography-text-small-emphasized-weight, 500)", fontSize: "var(--dt-typography-text-small-emphasized-size, 12px)", fontFamily: "var(--dt-typography-text-small-default-family, DynatraceFlow,Roboto,Helvetica,sans-serif)", lineHeight: "var(--dt-typography-text-small-emphasized-line-height, 1.333333333)" };
-var baseLegendButton = "_mt8v6g0-3-11-3 _z0fq9b4-3-11-3 _z0fq9bd-3-11-3 _z0fq9b6-3-11-3 _z0fq9b9-3-11-3";
-var legendItem = "_mt8v6g9-3-11-3";
-var legendItemButton = _7a468({ defaultClassName: "_mt8v6g1-3-11-3", variantClassNames: { isInteractive: { true: "_mt8v6g2-3-11-3", false: "_mt8v6g3-3-11-3" } }, defaultVariants: {}, compoundVariants: [] });
-var legendNameButton = _7a468({ defaultClassName: "_mt8v6g4-3-11-3", variantClassNames: { isInteractive: { true: "_mt8v6g5-3-11-3", false: "_mt8v6g6-3-11-3" }, isSubdued: { true: "_mt8v6g7-3-11-3", false: "_mt8v6g8-3-11-3" } }, defaultVariants: {}, compoundVariants: [] });
-var legendNameButtonOverride = "_mt8v6gb-3-11-3";
-var legendNameWrapper = "_mt8v6ga-3-11-3";
+var baseLegendButton = "_mt8v6g0-3-12-0 _z0fq9b4-3-12-0 _z0fq9bd-3-12-0 _z0fq9b6-3-12-0 _z0fq9b9-3-12-0";
+var legendItem = "_mt8v6g9-3-12-0";
+var legendItemButton = _7a468({ defaultClassName: "_mt8v6g1-3-12-0", variantClassNames: { isInteractive: { true: "_mt8v6g2-3-12-0", false: "_mt8v6g3-3-12-0" } }, defaultVariants: {}, compoundVariants: [] });
+var legendNameButton = _7a468({ defaultClassName: "_mt8v6g4-3-12-0", variantClassNames: { isInteractive: { true: "_mt8v6g5-3-12-0", false: "_mt8v6g6-3-12-0" }, isSubdued: { true: "_mt8v6g7-3-12-0", false: "_mt8v6g8-3-12-0" } }, defaultVariants: {}, compoundVariants: [] });
+var legendNameButtonOverride = "_mt8v6gb-3-12-0";
+var legendNameWrapper = "_mt8v6ga-3-12-0";
 export {
   ItemFontStyles,
   baseLegendButton,

package/esm/charts/core/components/legend/categorical/components/ChartLegendItem/ChartLegendItem.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../../src/charts/core/components/legend/categorical/components/ChartLegendItem/ChartLegendItem.css.ts"],
-  "sourcesContent": ["import '../../../../../../../core/styles/focusRingStatic.css';\nimport './ChartLegendItem.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var ItemFontStyles = {fontWeight:'var(--dt-typography-text-small-emphasized-weight, 500)',fontSize:'var(--dt-typography-text-small-emphasized-size, 12px)',fontFamily:'var(--dt-typography-text-small-default-family, DynatraceFlow,Roboto,Helvetica,sans-serif)',lineHeight:'var(--dt-typography-text-small-emphasized-line-height, 1.333333333)'};\nexport var baseLegendButton = '_mt8v6g0-3-11-3 _z0fq9b4-3-11-3 _z0fq9bd-3-11-3 _z0fq9b6-3-11-3 _z0fq9b9-3-11-3';\nexport var legendItem = '_mt8v6g9-3-11-3';\nexport var legendItemButton = _7a468({defaultClassName:'_mt8v6g1-3-11-3',variantClassNames:{isInteractive:{true:'_mt8v6g2-3-11-3',false:'_mt8v6g3-3-11-3'}},defaultVariants:{},compoundVariants:[]});\nexport var legendNameButton = _7a468({defaultClassName:'_mt8v6g4-3-11-3',variantClassNames:{isInteractive:{true:'_mt8v6g5-3-11-3',false:'_mt8v6g6-3-11-3'},isSubdued:{true:'_mt8v6g7-3-11-3',false:'_mt8v6g8-3-11-3'}},defaultVariants:{},compoundVariants:[]});\nexport var legendNameButtonOverride = '_mt8v6gb-3-11-3';\nexport var legendNameWrapper = '_mt8v6ga-3-11-3';"],
+  "sourcesContent": ["import '../../../../../../../core/styles/focusRingStatic.css';\nimport './ChartLegendItem.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var ItemFontStyles = {fontWeight:'var(--dt-typography-text-small-emphasized-weight, 500)',fontSize:'var(--dt-typography-text-small-emphasized-size, 12px)',fontFamily:'var(--dt-typography-text-small-default-family, DynatraceFlow,Roboto,Helvetica,sans-serif)',lineHeight:'var(--dt-typography-text-small-emphasized-line-height, 1.333333333)'};\nexport var baseLegendButton = '_mt8v6g0-3-12-0 _z0fq9b4-3-12-0 _z0fq9bd-3-12-0 _z0fq9b6-3-12-0 _z0fq9b9-3-12-0';\nexport var legendItem = '_mt8v6g9-3-12-0';\nexport var legendItemButton = _7a468({defaultClassName:'_mt8v6g1-3-12-0',variantClassNames:{isInteractive:{true:'_mt8v6g2-3-12-0',false:'_mt8v6g3-3-12-0'}},defaultVariants:{},compoundVariants:[]});\nexport var legendNameButton = _7a468({defaultClassName:'_mt8v6g4-3-12-0',variantClassNames:{isInteractive:{true:'_mt8v6g5-3-12-0',false:'_mt8v6g6-3-12-0'},isSubdued:{true:'_mt8v6g7-3-12-0',false:'_mt8v6g8-3-12-0'}},defaultVariants:{},compoundVariants:[]});\nexport var legendNameButtonOverride = '_mt8v6gb-3-12-0';\nexport var legendNameWrapper = '_mt8v6ga-3-12-0';"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,iBAAiB,EAAC,YAAW,0DAAyD,UAAS,yDAAwD,YAAW,6FAA4F,YAAW,sEAAqE;AAClV,IAAI,mBAAmB;AACvB,IAAI,aAAa;AACjB,IAAI,mBAAmB,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,eAAc,EAAC,MAAK,mBAAkB,OAAM,kBAAiB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AAC5L,IAAI,mBAAmB,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,eAAc,EAAC,MAAK,mBAAkB,OAAM,kBAAiB,GAAE,WAAU,EAAC,MAAK,mBAAkB,OAAM,kBAAiB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AACvP,IAAI,2BAA2B;AAC/B,IAAI,oBAAoB;",
   "names": []
 }

package/esm/charts/core/components/legend/categorical/components/ChartLegendSeriesActions/ChartLegendSeriesActions.css

@@ -1,10 +1,10 @@
-._yo3l7h0-3-11-3 {
+._yo3l7h0-3-12-0 {
   padding: var(--dt-spacings-size-2, 2px);
   border-radius: var(--dt-borders-radius-field-subdued, 3px);
 }
-._yo3l7h1-3-11-3 {
+._yo3l7h1-3-12-0 {
   visibility: visible;
 }
-._yo3l7h2-3-11-3 {
+._yo3l7h2-3-12-0 {
   visibility: hidden;
 }

package/esm/charts/core/components/legend/categorical/components/ChartLegendSeriesActions/ChartLegendSeriesActions.js

@@ -11,6 +11,7 @@ const ChartLegendSeriesActions = (props) => {
     onOpenChange,
     isOpen,
     visible = false,
+    ariaLabel,
     onFocus,
     onBlur,
     onMouseEnter,
@@ -28,6 +29,7 @@ const ChartLegendSeriesActions = (props) => {
       Button,
       {
         "data-testid": "legend-more-actions-button",
+        "aria-label": ariaLabel,
         variant: "default",
         disabled,
         onFocus: handleFocus,

package/esm/charts/core/components/legend/categorical/components/ChartLegendSeriesActions/ChartLegendSeriesActions.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../../src/charts/core/components/legend/categorical/components/ChartLegendSeriesActions/ChartLegendSeriesActions.tsx"],
-  "sourcesContent": ["import {\n  type FocusEvent as ReactFocusEvent,\n  type PropsWithChildren,\n  type ReactElement,\n} from 'react';\n\nimport { DotMenuIcon } from '@dynatrace/strato-icons';\n\nimport { seriesButton } from './ChartLegendSeriesActions.sty.js';\nimport { Button } from '../../../../../../../buttons/button/Button.js';\nimport { Menu } from '../../../../../../../navigation/menu/Menu.js';\nimport { useCustomSeriesActions } from '../../../../../hooks/useCustomSeriesActions.js';\nimport { SeriesActionsTemplate } from '../../../../../types/series-actions-template.js';\nimport { renderMenuActionChildren } from '../../../../../utils/render-menu-action-children.js';\n\nexport interface LegendSeriesActionsProps {\n  onFocus: () => void;\n  onMouseEnter: () => void;\n  onMouseLeave: () => void;\n  /** Disables the menu trigger. */\n  disabled?: boolean;\n  /** Makes the actions button visible or hidden **/\n  visible?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  isOpen: boolean;\n  onBlur: () => void;\n  /** Default actions to display **/\n  defaultActions?: ReactElement<PropsWithChildren>;\n  /** Custom series actions to display **/\n  actions?: SeriesActionsTemplate;\n}\n\n/**\n * LegendSeriesActions component.\n */\nexport const ChartLegendSeriesActions = (props: LegendSeriesActionsProps) => {\n  const {\n    disabled,\n    onOpenChange,\n    isOpen,\n    visible = false,\n    onFocus,\n    onBlur,\n    onMouseEnter,\n    onMouseLeave,\n    defaultActions,\n    actions,\n  } = props;\n\n  const handleFocus = (event: ReactFocusEvent) => {\n    event.stopPropagation();\n    onFocus();\n  };\n  const customActions = useCustomSeriesActions(actions, isOpen);\n\n  return (\n    <Menu onOpenChange={onOpenChange}>\n      <Menu.Trigger>\n        <Button\n          data-testid=\"legend-more-actions-button\"\n          variant=\"default\"\n          disabled={disabled}\n          onFocus={handleFocus}\n          onBlur={onBlur}\n          onMouseEnter={onMouseEnter}\n          onMouseLeave={onMouseLeave}\n          className={seriesButton({ visible: visible })}\n        >\n          <Button.Prefix>\n            <DotMenuIcon size=\"small\" />\n          </Button.Prefix>\n        </Button>\n      </Menu.Trigger>\n      {!disabled && isOpen && (\n        <Menu.Content data-testid=\"menu-content\">\n          {defaultActions ? renderMenuActionChildren(defaultActions) : null}\n          {customActions ? (\n            <div data-dt-children-name=\"LegendSeriesItems\">\n              {renderMenuActionChildren(customActions.props.children)}\n            </div>\n          ) : null}\n        </Menu.Content>\n      )}\n    </Menu>\n  );\n};\n\nChartLegendSeriesActions['displayName'] = 'LegendSeriesActions';\n"],
-  "mappings": "AAqEY,cAKJ,YALI;AA/DZ,SAAS,mBAAmB;AAE5B,SAAS,oBAAoB;AAC7B,SAAS,cAAc;AACvB,SAAS,YAAY;AACrB,SAAS,8BAA8B;AAEvC,SAAS,gCAAgC;AAsBlC,MAAM,2BAA2B,CAAC,UAAoC;AAC3E,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,cAAc,CAAC,UAA2B;AAC9C,UAAM,gBAAgB;AACtB,YAAQ;AAAA,EACV;AACA,QAAM,gBAAgB,uBAAuB,SAAS,MAAM;AAE5D,SACE,qBAAC,QAAK,cACJ;AAAA,wBAAC,KAAK,SAAL,EACC;AAAA,MAAC;AAAA;AAAA,QACC,eAAY;AAAA,QACZ,SAAQ;AAAA,QACR;AAAA,QACA,SAAS;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA,WAAW,aAAa,EAAE,QAAiB,CAAC;AAAA,QAE5C,8BAAC,OAAO,QAAP,EACC,8BAAC,eAAY,MAAK,SAAQ,GAC5B;AAAA;AAAA,IACF,GACF;AAAA,IACC,CAAC,YAAY,UACZ,qBAAC,KAAK,SAAL,EAAa,eAAY,gBACvB;AAAA,uBAAiB,yBAAyB,cAAc,IAAI;AAAA,MAC5D,gBACC,oBAAC,SAAI,yBAAsB,qBACxB,mCAAyB,cAAc,MAAM,QAAQ,GACxD,IACE;AAAA,OACN;AAAA,KAEJ;AAEJ;AAEA,yBAAyB,aAAa,IAAI;",
+  "sourcesContent": ["import {\n  type FocusEvent as ReactFocusEvent,\n  type PropsWithChildren,\n  type ReactElement,\n} from 'react';\n\nimport { DotMenuIcon } from '@dynatrace/strato-icons';\n\nimport { seriesButton } from './ChartLegendSeriesActions.sty.js';\nimport { Button } from '../../../../../../../buttons/button/Button.js';\nimport { Menu } from '../../../../../../../navigation/menu/Menu.js';\nimport { useCustomSeriesActions } from '../../../../../hooks/useCustomSeriesActions.js';\nimport { SeriesActionsTemplate } from '../../../../../types/series-actions-template.js';\nimport { renderMenuActionChildren } from '../../../../../utils/render-menu-action-children.js';\n\nexport interface LegendSeriesActionsProps {\n  onFocus: () => void;\n  onMouseEnter: () => void;\n  onMouseLeave: () => void;\n  /** Disables the menu trigger. */\n  disabled?: boolean;\n  /** Makes the actions button visible or hidden **/\n  visible?: boolean;\n  /** Accessible label for the actions menu trigger button. */\n  ariaLabel: string;\n  onOpenChange?: (open: boolean) => void;\n  isOpen: boolean;\n  onBlur: () => void;\n  /** Default actions to display **/\n  defaultActions?: ReactElement<PropsWithChildren>;\n  /** Custom series actions to display **/\n  actions?: SeriesActionsTemplate;\n}\n\n/**\n * LegendSeriesActions component.\n */\nexport const ChartLegendSeriesActions = (props: LegendSeriesActionsProps) => {\n  const {\n    disabled,\n    onOpenChange,\n    isOpen,\n    visible = false,\n    ariaLabel,\n    onFocus,\n    onBlur,\n    onMouseEnter,\n    onMouseLeave,\n    defaultActions,\n    actions,\n  } = props;\n\n  const handleFocus = (event: ReactFocusEvent) => {\n    event.stopPropagation();\n    onFocus();\n  };\n  const customActions = useCustomSeriesActions(actions, isOpen);\n\n  return (\n    <Menu onOpenChange={onOpenChange}>\n      <Menu.Trigger>\n        <Button\n          data-testid=\"legend-more-actions-button\"\n          aria-label={ariaLabel}\n          variant=\"default\"\n          disabled={disabled}\n          onFocus={handleFocus}\n          onBlur={onBlur}\n          onMouseEnter={onMouseEnter}\n          onMouseLeave={onMouseLeave}\n          className={seriesButton({ visible: visible })}\n        >\n          <Button.Prefix>\n            <DotMenuIcon size=\"small\" />\n          </Button.Prefix>\n        </Button>\n      </Menu.Trigger>\n      {!disabled && isOpen && (\n        <Menu.Content data-testid=\"menu-content\">\n          {defaultActions ? renderMenuActionChildren(defaultActions) : null}\n          {customActions ? (\n            <div data-dt-children-name=\"LegendSeriesItems\">\n              {renderMenuActionChildren(customActions.props.children)}\n            </div>\n          ) : null}\n        </Menu.Content>\n      )}\n    </Menu>\n  );\n};\n\nChartLegendSeriesActions['displayName'] = 'LegendSeriesActions';\n"],
+  "mappings": "AAyEY,cAKJ,YALI;AAnEZ,SAAS,mBAAmB;AAE5B,SAAS,oBAAoB;AAC7B,SAAS,cAAc;AACvB,SAAS,YAAY;AACrB,SAAS,8BAA8B;AAEvC,SAAS,gCAAgC;AAwBlC,MAAM,2BAA2B,CAAC,UAAoC;AAC3E,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,cAAc,CAAC,UAA2B;AAC9C,UAAM,gBAAgB;AACtB,YAAQ;AAAA,EACV;AACA,QAAM,gBAAgB,uBAAuB,SAAS,MAAM;AAE5D,SACE,qBAAC,QAAK,cACJ;AAAA,wBAAC,KAAK,SAAL,EACC;AAAA,MAAC;AAAA;AAAA,QACC,eAAY;AAAA,QACZ,cAAY;AAAA,QACZ,SAAQ;AAAA,QACR;AAAA,QACA,SAAS;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA,WAAW,aAAa,EAAE,QAAiB,CAAC;AAAA,QAE5C,8BAAC,OAAO,QAAP,EACC,8BAAC,eAAY,MAAK,SAAQ,GAC5B;AAAA;AAAA,IACF,GACF;AAAA,IACC,CAAC,YAAY,UACZ,qBAAC,KAAK,SAAL,EAAa,eAAY,gBACvB;AAAA,uBAAiB,yBAAyB,cAAc,IAAI;AAAA,MAC5D,gBACC,oBAAC,SAAI,yBAAsB,qBACxB,mCAAyB,cAAc,MAAM,QAAQ,GACxD,IACE;AAAA,OACN;AAAA,KAEJ;AAEJ;AAEA,yBAAyB,aAAa,IAAI;",
   "names": []
 }