@dynatrace/strato-components 3.0.1 → 3.1.0

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

@@ -21,8 +21,8 @@ __export(defaults_exports, {
   DEFAULTS: () => DEFAULTS
 });
 module.exports = __toCommonJS(defaults_exports);
-var import_format_value = require("./components/Header/utils/format-value.js");
-var import_value_formatters = require("./components/Header/utils/value-formatters.js");
+var import_format_value = require("./components/header/utils/format-value.js");
+var import_value_formatters = require("./components/header/utils/value-formatters.js");
 var import_messages = require("./messages.js");
 const DEFAULTS = {
   dot: {

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

@@ -34,4 +34,9 @@ export declare const OVERLAY_TOOLTIP_MESSAGES: {
         defaultMessage: string;
         description: string;
     };
+    globalActionsUnpinnedMessage: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
 };

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

@@ -57,5 +57,10 @@ const OVERLAY_TOOLTIP_MESSAGES = (0, import_react_intl.defineMessages)({
     id: "1paaTnYOwnYa5MKF",
     defaultMessage: "Node",
     description: "Text label for the node in the tooltip. Displayed when hovering over Treemap and Honeycomb geometries."
+  },
+  globalActionsUnpinnedMessage: {
+    id: "lF57t/he+SSB22bR",
+    defaultMessage: "Pin to access actions",
+    description: "Text label displayed in the tooltip when global actions are available but the tooltip is not pinned."
   }
 });

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

@@ -1,4 +1,4 @@
-._1j1seex0-3-0-1 {
+._1j1seex0-3-1-0 {
   box-sizing: border-box;
   padding: var(--dt-spacings-size-4, 4px);
   border-radius: var(--dt-borders-radius-surface-subdued, 9px);
@@ -13,23 +13,23 @@
   min-width: 200px;
   max-width: 480px;
 }
-._1j1seex0-3-0-1[data-placement="right"] {
+._1j1seex0-3-1-0[data-placement="right"] {
   transform-origin: 0 calc(1rem + 18px);
 }
-._1j1seex0-3-0-1[data-placement="left"] {
+._1j1seex0-3-1-0[data-placement="left"] {
   transform-origin: 100% calc(1rem + 18px);
 }
-._1j1seex1-3-0-1 {
+._1j1seex1-3-1-0 {
   pointer-events: all;
 }
-._1j1seex1-3-0-1[data-popper-reference-hidden=true] {
+._1j1seex1-3-1-0[data-popper-reference-hidden=true] {
   visibility: hidden;
   pointer-events: none;
 }
-._1j1seex2-3-0-1 {
+._1j1seex2-3-1-0 {
   pointer-events: none;
 }
-._1j1seex3-3-0-1 {
+._1j1seex3-3-1-0 {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
   font-family: var(--dt-typography-text-small-emphasized-family, DynatraceFlow,Roboto,Helvetica,sans-serif);
   font-size: var(--dt-typography-text-small-emphasized-size, 12px);
@@ -39,16 +39,16 @@
   box-sizing: border-box;
   padding: var(--dt-spacings-size-4, 4px) var(--dt-spacings-size-6, 6px);
 }
-._1j1seex4-3-0-1 {
+._1j1seex4-3-1-0 {
   min-height: 24px;
   max-height: 192px;
   overflow: auto;
 }
-._1j1seex5-3-0-1 {
+._1j1seex5-3-1-0 {
   width: 100%;
   position: relative;
 }
-._1j1seex6-3-0-1 {
+._1j1seex6-3-1-0 {
   width: 100%;
   box-sizing: border-box;
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
@@ -57,33 +57,53 @@
   line-height: var(--dt-typography-text-small-default-line-height, 1.333333333);
   cursor: pointer;
 }
-._1j1seex6-3-0-1:hover {
-  border-radius: var(--dt-borders-radius-container-subdued, 6px);
-  background-color: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
-}
-._1j1seex7-3-0-1 {
+._1j1seex7-3-1-0 {
   padding-left: var(--dt-spacings-size-6, 6px);
 }
-._1j1seex8-3-0-1 {
+._1j1seex8-3-1-0 {
   padding-right: var(--dt-spacings-size-6, 6px);
 }
-._1j1seex5-3-0-1:not(:has(*:hover)) ._1j1seex9-3-0-1 {
+._1j1seex9-3-1-0 {
   border-radius: var(--dt-borders-radius-container-subdued, 6px);
   background-color: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
 }
-._1j1seexa-3-0-1 {
+._1j1seexa-3-1-0 {
   padding-top: var(--dt-spacings-size-4, 4px);
   padding-bottom: var(--dt-spacings-size-4, 4px);
 }
-._1j1seexb-3-0-1 {
+._1j1seexb-3-1-0 {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
   font-size: var(--dt-typography-text-small-default-size, 12px);
   padding-left: var(--dt-spacings-size-6, 6px);
 }
-._1j1seexc-3-0-1 {
-  height: var(--dt-spacings-size-24, 24px);
-  line-height: var(--dt-spacings-size-24, 24px);
-  width: var(--dt-spacings-size-24, 24px);
+._1j1seexc-3-1-0 {
+  display: flex;
   align-items: center;
   justify-content: center;
+  height: var(--dt-spacings-size-24, 24px);
+  width: var(--dt-spacings-size-24, 24px);
+  flex-shrink: 0;
+}
+._1j1seexd-3-1-0 {
+  margin-top: var(--dt-spacings-size-4, 4px);
+  margin-bottom: var(--dt-spacings-size-4, 4px);
+}
+._1j1seexe-3-1-0 {
+  margin-left: -6px;
+  padding-left: var(--dt-spacings-size-6, 6px);
+}
+._1j1seexf-3-1-0 {
+  font-family: var(--dt-typography-text-small-default-family, DynatraceFlow,Roboto,Helvetica,sans-serif);
+  font-weight: var(--dt-typography-text-small-default-weight, 400);
+  font-size: var(--dt-typography-text-small-default-size, 12px);
+  line-height: var(--dt-typography-text-small-default-line-height, 1.333333333);
+  padding: var(--dt-spacings-size-4, 4px) var(--dt-spacings-size-6, 6px);
+}
+._1j1seexg-3-1-0 {
+  display: flex;
+  flex-direction: column;
+}
+._1j1seex0-3-1-0:has(._1j1seexg-3-1-0:not(:hover)) ._1j1seexh-3-1-0 {
+  border-radius: var(--dt-borders-radius-container-subdued, 6px);
+  background-color: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
 }

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

@@ -30,4 +30,9 @@ export declare const seriesItem: import("@vanilla-extract/recipes").RuntimeFn<{
 export declare const seriesItemActive: string;
 export declare const seriesItemText: string;
 export declare const relativeValueStyle: string;
-export declare const symbol: string;
+export declare const symbolWrapper: string;
+export declare const divider: string;
+export declare const symbolRight: string;
+export declare const seriesActionHeader: string;
+export declare const actionsContainer: string;
+export declare const seriesItemHighlighted: string;

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

@@ -18,25 +18,35 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var tooltip_css_exports = {};
 __export(tooltip_css_exports, {
+  actionsContainer: () => actionsContainer,
+  divider: () => divider,
   relativeValueStyle: () => relativeValueStyle,
+  seriesActionHeader: () => seriesActionHeader,
   seriesHeader: () => seriesHeader,
   seriesItem: () => seriesItem,
   seriesItemActive: () => seriesItemActive,
+  seriesItemHighlighted: () => seriesItemHighlighted,
   seriesItemText: () => seriesItemText,
   seriesOverflowContainer: () => seriesOverflowContainer,
   seriesWrapper: () => seriesWrapper,
-  symbol: () => symbol,
+  symbolRight: () => symbolRight,
+  symbolWrapper: () => symbolWrapper,
   wrapper: () => wrapper
 });
 module.exports = __toCommonJS(tooltip_css_exports);
 var import_tooltip_css_ts_vanilla = require("./tooltip.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var relativeValueStyle = "_1j1seexb-3-0-1";
-var seriesHeader = "_1j1seex3-3-0-1";
-var seriesItem = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1j1seex6-3-0-1", variantClassNames: { symbolPosition: { right: "_1j1seex7-3-0-1", left: "_1j1seex8-3-0-1" } }, defaultVariants: { symbolPosition: "left" }, compoundVariants: [] });
-var seriesItemActive = "_1j1seex9-3-0-1";
-var seriesItemText = "_1j1seexa-3-0-1";
-var seriesOverflowContainer = "_1j1seex5-3-0-1";
-var seriesWrapper = "_1j1seex4-3-0-1";
-var symbol = "_1j1seexc-3-0-1";
-var wrapper = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1j1seex0-3-0-1", variantClassNames: { isPinned: { true: "_1j1seex1-3-0-1", false: "_1j1seex2-3-0-1" } }, defaultVariants: {}, compoundVariants: [] });
+var actionsContainer = "_1j1seexg-3-1-0";
+var divider = "_1j1seexd-3-1-0";
+var relativeValueStyle = "_1j1seexb-3-1-0";
+var seriesActionHeader = "_1j1seexf-3-1-0";
+var seriesHeader = "_1j1seex3-3-1-0";
+var seriesItem = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1j1seex6-3-1-0", variantClassNames: { symbolPosition: { right: "_1j1seex7-3-1-0", left: "_1j1seex8-3-1-0" } }, defaultVariants: { symbolPosition: "left" }, compoundVariants: [] });
+var seriesItemActive = "_1j1seex9-3-1-0";
+var seriesItemHighlighted = "_1j1seexh-3-1-0";
+var seriesItemText = "_1j1seexa-3-1-0";
+var seriesOverflowContainer = "_1j1seex5-3-1-0";
+var seriesWrapper = "_1j1seex4-3-1-0";
+var symbolRight = "_1j1seexe-3-1-0";
+var symbolWrapper = "_1j1seexc-3-1-0";
+var wrapper = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1j1seex0-3-1-0", variantClassNames: { isPinned: { true: "_1j1seex1-3-1-0", false: "_1j1seex2-3-1-0" } }, defaultVariants: {}, compoundVariants: [] });

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

@@ -0,0 +1,46 @@
+import { JSX } from 'react';
+import type { SeriesActionsTemplate } from '../../../types/series-actions-template.js';
+import { VariantShape } from '../../shape/type.js';
+import type { Data } from '../types.js';
+type Series = Data['series'][number];
+export type BaseSeriesItemProps = {
+    name: Series['name'];
+    value: Series['value'];
+    valueUnit?: string;
+    relativeValue?: Series['relativeValue'];
+    relativeValueUnit?: string;
+};
+type SeriesItemActions = {
+    actions?: () => SeriesActionsTemplate;
+};
+export type ShapeSeriesItemProps = BaseSeriesItemProps & SeriesItemActions & {
+    color: string;
+    shape?: VariantShape;
+    symbol?: never;
+    icon?: never;
+};
+export type SymbolSeriesItemProps = BaseSeriesItemProps & SeriesItemActions & {
+    symbol: string;
+    color?: never;
+    shape?: never;
+    icon?: never;
+};
+export type IconSeriesItemProps = BaseSeriesItemProps & SeriesItemActions & {
+    icon: JSX.Element;
+    color?: never;
+    shape?: never;
+    symbol?: never;
+};
+/**
+ * Public union — enforces mutual exclusivity at the call site via `never`.
+ * Consumers must pass exactly one of: color, symbol, or icon.
+ */
+export type SeriesItemProps = ShapeSeriesItemProps | SymbolSeriesItemProps | IconSeriesItemProps;
+export type InternalSeriesItemProps = BaseSeriesItemProps & {
+    color?: string;
+    shape?: VariantShape;
+    symbol?: string;
+    icon?: JSX.Element;
+    actions?: () => SeriesActionsTemplate;
+};
+export {};

package/{filters/timeframe-selector/Item.types.js → charts/core/components/overlay-tooltip/types/series.js}

@@ -12,5 +12,5 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var Item_types_exports = {};
-module.exports = __toCommonJS(Item_types_exports);
+var series_exports = {};
+module.exports = __toCommonJS(series_exports);

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

@@ -1,7 +1,7 @@
 import type { JSX, RefObject } from 'react';
 import type { MessageDescriptor } from 'react-intl';
-import { FormatStrategy } from './components/Header/utils/format-value.js';
 import type { Store } from '../../../../core/store/store.js';
+import type { SeriesActionsTemplate } from '../../types/series-actions-template.js';
 export declare enum GeometryTypesEnum {
     'dot' = "dot",
     'pie' = "pie",
@@ -35,6 +35,7 @@ export type Overlay = {
     clear: () => void;
 };
 export type TooltipState = {
+    activeSeries: string | null;
     pinned: boolean;
     inBounds: boolean;
     data: Data | NoData;
@@ -79,4 +80,15 @@ export type ExternalConfig = {
 export type OverlayTooltipProps = {
     symbolPosition?: 'left' | 'right';
 };
+export type FormatStrategy = (value: HeaderData) => string | null;
+type Series = Data['series'][number];
+export type SeriesItemProps = {
+    name: Series['name'];
+    value: Series['value'];
+    valueUnit?: string;
+    color: string;
+    relativeValue?: Series['relativeValue'];
+    relativeValueUnit?: string;
+    actions?: () => SeriesActionsTemplate;
+};
 export {};

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

@@ -23,7 +23,15 @@ type TooltipAction = {
     type: 'UPDATE_POSITION';
     payload: {
         type: 'resize' | 'non-resize';
+        scroll?: boolean;
     };
+} | {
+    type: 'SET_ACTIVE_SERIES';
+    payload: {
+        activeSeries: string | null;
+    };
+} | {
+    type: 'TOOLTIP_MOUSE_LEAVE';
 };
 export declare const useTooltipReducer: () => (action: TooltipAction) => (event?: {
     clientX: number;

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

@@ -41,6 +41,7 @@ const useTooltipReducer = () => {
           percentX: null,
           percentY: null,
           inBounds: false,
+          activeSeries: null,
           data: (0, import_utils.emptyData)()
         }));
         break;
@@ -123,7 +124,30 @@ const useTooltipReducer = () => {
           );
           return {
             ...prevState,
-            ...positions
+            ...positions,
+            activeSeries: action.payload.scroll ? null : prevState.activeSeries
+          };
+        });
+        break;
+      case "SET_ACTIVE_SERIES":
+        store.setState((prevState) => {
+          if (prevState.activeSeries === action.payload.activeSeries) {
+            return prevState;
+          }
+          return {
+            ...prevState,
+            activeSeries: action.payload.activeSeries
+          };
+        });
+        break;
+      case "TOOLTIP_MOUSE_LEAVE":
+        store.setState((prevState) => {
+          if ((0, import_lodash_es.isNull)(prevState.activeSeries)) {
+            return prevState;
+          }
+          return {
+            ...prevState,
+            activeSeries: null
           };
         });
         break;

package/charts/core/components/overlay-tooltip/utils/build-content.js

@@ -24,12 +24,23 @@ module.exports = __toCommonJS(build_content_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
 var import_is_slot = require("../../../../../core/utils/is-slot.js");
-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_GlobalActions = require("../components/global-actions/GlobalActions.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");
 function buildContent(children, defaultConfig, args) {
-  const slots = { Header: null, Series: null, SeriesHeader: null, SeriesItem: null };
+  const slots = {
+    Header: null,
+    Series: null,
+    SeriesHeader: null,
+    SeriesItem: null,
+    ActionsPlaceholder: null,
+    GlobalActions: []
+  };
+  let globalActionsUnpinnedMessage;
   import_react.Children.forEach(children, (child) => {
     if ((0, import_is_slot.isSlot)(child, import_Header.Header)) {
       slots.Header = child;
@@ -39,13 +50,26 @@ function buildContent(children, defaultConfig, args) {
       slots.Series = child;
     } else if ((0, import_is_slot.isSlot)(child, import_SeriesItem.SeriesItem)) {
       slots.SeriesItem = child;
+    } else if ((0, import_is_slot.isSlot)(child, import_ActionsPlaceholder.ActionsPlaceholder)) {
+      globalActionsUnpinnedMessage = child.props.text;
+    } else if ((0, import_is_slot.isSlot)(child, import_Action.Action)) {
+      slots.GlobalActions.push(child);
     }
   });
+  const hasGlobalActions = slots.GlobalActions.length > 0 || slots.ActionsPlaceholder !== null;
   return {
     content: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.Fragment, { children: slots.Header }, "header"),
       slots.SeriesItem ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.Fragment, { children: slots.SeriesHeader || /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_SeriesHeader.SeriesHeader, {}) }, "seriesHeader") : null,
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.Fragment, { children: slots.Series || slots.SeriesItem }, "series")
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.Fragment, { children: slots.Series || slots.SeriesItem }, "series"),
+      hasGlobalActions ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_GlobalActions.GlobalActions,
+        {
+          actions: slots.GlobalActions,
+          globalActionsUnpinnedMessage
+        },
+        "globalActions"
+      ) : null
     ],
     config: {
       seriesHeader: slots.SeriesHeader || /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_SeriesHeader.SeriesHeader, {}),

package/charts/core/components/overlays/ChartOverlaysBorder.css

@@ -1,4 +1,4 @@
-._sw8x1w0-3-0-1 {
+._sw8x1w0-3-1-0 {
   position: absolute;
   top: -0.5px;
   left: -0.5px;
@@ -10,15 +10,15 @@
   border-bottom: none;
   box-sizing: border-box;
 }
-._sw8x1w1-3-0-1 {
+._sw8x1w1-3-1-0 {
   border-left: 1px solid var(--dt-colors-text-neutral-subdued, #595a7d);
 }
-._sw8x1w2-3-0-1 {
+._sw8x1w2-3-1-0 {
   border-right: 1px solid var(--dt-colors-text-neutral-subdued, #595a7d);
 }
-._sw8x1w3-3-0-1 {
+._sw8x1w3-3-1-0 {
   border-bottom: 1px solid var(--dt-colors-text-neutral-subdued, #595a7d);
 }
-._sw8x1w4-3-0-1 {
+._sw8x1w4-3-1-0 {
   border-top: 1px solid var(--dt-colors-text-neutral-subdued, #595a7d);
 }

package/charts/core/components/overlays/ChartOverlaysBorder.sty.js

@@ -26,8 +26,8 @@ __export(ChartOverlaysBorder_css_exports, {
 });
 module.exports = __toCommonJS(ChartOverlaysBorder_css_exports);
 var import_ChartOverlaysBorder_css_ts_vanilla = require("./ChartOverlaysBorder.css");
-var chartOverlaysBorder = "_sw8x1w0-3-0-1";
-var chartOverlaysBorder__rightAxis = "_sw8x1w2-3-0-1";
-var chartOverlaysBorder__topAxis = "_sw8x1w4-3-0-1";
-var chartOverlaysBorder__xAxis = "_sw8x1w1-3-0-1";
-var chartOverlaysBorder__yAxis = "_sw8x1w3-3-0-1";
+var chartOverlaysBorder = "_sw8x1w0-3-1-0";
+var chartOverlaysBorder__rightAxis = "_sw8x1w2-3-1-0";
+var chartOverlaysBorder__topAxis = "_sw8x1w4-3-1-0";
+var chartOverlaysBorder__xAxis = "_sw8x1w1-3-1-0";
+var chartOverlaysBorder__yAxis = "_sw8x1w3-3-1-0";

package/charts/core/components/selection-area/SelectionArea.css

@@ -1,10 +1,10 @@
-._efl7nz0-3-0-1 {
+._efl7nz0-3-1-0 {
   background-color: transparent;
   overflow: visible;
   pointer-events: none;
   z-index: 3;
 }
-._efl7nz1-3-0-1 {
+._efl7nz1-3-1-0 {
   width: 5px;
   height: 40px;
   fill: var(--dt-colors-border-primary-on-accent-default, #f4f4fb);
@@ -15,21 +15,21 @@
   transform-box: stroke-box;
   transition: transform var(--dt-animations-rescale-duration-fast, 170ms) var(--dt-animations-rescale-easing, cubic-bezier(0.4, 0, 0.2, 1));
 }
-._efl7nz1-3-0-1:focus {
+._efl7nz1-3-1-0:focus {
   outline: none;
   stroke-width: 3;
 }
-._efl7nz2-3-0-1 {
+._efl7nz2-3-1-0 {
   width: 15px;
   height: 80px;
   fill: transparent;
   cursor: col-resize;
   touch-action: pan-x;
 }
-._efl7nz2-3-0-1 + .knob--hovered {
+._efl7nz2-3-1-0 + .knob--hovered {
   transform: scaleY(1);
 }
-._efl7nz3-3-0-1 {
+._efl7nz3-3-1-0 {
   fill: var(--dt-colors-background-field-primary-accent, #474fcf);
   stroke: var(--dt-colors-border-primary-accent, #464cce);
   stroke-width: 1;
@@ -37,33 +37,33 @@
   fill-opacity: 0.1;
   touch-action: pan-x;
 }
-._efl7nz3-3-0-1:hover {
+._efl7nz3-3-1-0:hover {
   cursor: move;
 }
-._efl7nz3-3-0-1:focus {
+._efl7nz3-3-1-0:focus {
   outline: none;
   clip-path: unset;
   stroke-width: 3;
 }
-._efl7nz3-3-0-1:focus ~ .knob {
+._efl7nz3-3-1-0:focus ~ .knob {
   stroke-width: 3;
 }
-._efl7nz4-3-0-1 {
+._efl7nz4-3-1-0 {
   user-select: none;
   pointer-events: none;
 }
-._efl7nz5-3-0-1 {
+._efl7nz5-3-1-0 {
   text-wrap: nowrap;
   min-width: unset;
 }
-._efl7nz6-3-0-1 {
+._efl7nz6-3-1-0 {
   padding-left: 3px;
 }
-._efl7nz7-3-0-1 {
+._efl7nz7-3-1-0 {
   padding: var(--dt-spacings-size-2, 2px);
   padding-left: 3px;
   width: 100%;
 }
-._efl7nz8-3-0-1 * {
+._efl7nz8-3-1-0 * {
   pointer-events: none;
 }

package/charts/core/components/selection-area/SelectionArea.sty.js

@@ -31,12 +31,12 @@ __export(SelectionArea_css_exports, {
 module.exports = __toCommonJS(SelectionArea_css_exports);
 var import_ChartGrid_css_ts_vanilla = require("../chart-grid/ChartGrid.css");
 var import_SelectionArea_css_ts_vanilla = require("./SelectionArea.css");
-var brushOverlay = "_efl7nz0-3-0-1 _13lzg4k0-3-0-1";
-var disabledActions = "_efl7nz8-3-0-1";
-var knob = "_efl7nz1-3-0-1";
-var selectionArea = "_efl7nz3-3-0-1";
-var tooltipContainer = "_efl7nz4-3-0-1";
-var tooltipHeader = "_efl7nz5-3-0-1";
-var tooltipHeaderCategorical = "_efl7nz6-3-0-1";
-var tooltipHeaderSubtext = "_efl7nz7-3-0-1";
-var transparentDraggingArea = "_efl7nz2-3-0-1";
+var brushOverlay = "_efl7nz0-3-1-0 _13lzg4k0-3-1-0";
+var disabledActions = "_efl7nz8-3-1-0";
+var knob = "_efl7nz1-3-1-0";
+var selectionArea = "_efl7nz3-3-1-0";
+var tooltipContainer = "_efl7nz4-3-1-0";
+var tooltipHeader = "_efl7nz5-3-1-0";
+var tooltipHeaderCategorical = "_efl7nz6-3-1-0";
+var tooltipHeaderSubtext = "_efl7nz7-3-1-0";
+var transparentDraggingArea = "_efl7nz2-3-1-0";

package/charts/core/components/series-action/ChartActionsMenuAsync.d.ts

@@ -0,0 +1,13 @@
+import { type PropsWithChildren, type ReactElement, type MouseEventHandler } from 'react';
+type ChartActionsMenuAsyncProps = {
+    isOpen: boolean;
+    defaultActions?: ReactElement<PropsWithChildren>;
+    header?: ReactElement | null;
+    onActionSelected?: MouseEventHandler<HTMLDivElement>;
+    actions: (() => Promise<ReactElement>) | undefined;
+    delay?: number;
+};
+export declare const ChartActionsMenuAsync: (props: ChartActionsMenuAsyncProps & {
+    children?: import("react").ReactNode | undefined;
+} & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null;
+export {};

package/charts/core/components/series-action/ChartActionsMenuAsync.js

@@ -0,0 +1,71 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var ChartActionsMenuAsync_exports = {};
+__export(ChartActionsMenuAsync_exports, {
+  ChartActionsMenuAsync: () => ChartActionsMenuAsync
+});
+module.exports = __toCommonJS(ChartActionsMenuAsync_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_lodash_es = require("lodash");
+var import_react = require("react");
+var import_Menu = require("../../../../navigation/menu/Menu.js");
+var import_useResolveAsyncComponent = require("../../hooks/useResolveAsyncComponent.js");
+var import_render_menu_action_children = require("../../utils/render-menu-action-children.js");
+const ChartActionsMenuAsync = (0, import_react.forwardRef)((props, forwardedRef) => {
+  const { children, isOpen } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_Menu.Menu, { open: isOpen, modal: false, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Menu.Menu.Trigger, { children }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Content, { ...props, ref: forwardedRef })
+  ] });
+});
+const Content = (0, import_react.forwardRef)(
+  (props, forwardedRef) => {
+    const {
+      isOpen,
+      actions,
+      defaultActions,
+      onActionSelected,
+      header,
+      delay = 0
+    } = props;
+    const [shouldRun, setShouldRun] = (0, import_react.useState)(false);
+    const customActions = (0, import_useResolveAsyncComponent.useResolveAsyncComponent)(actions, shouldRun);
+    const defaultActionsMapped = shouldRun && defaultActions ? (0, import_render_menu_action_children.renderMenuActionChildren)(defaultActions) : null;
+    (0, import_react.useEffect)(() => {
+      if (isOpen) {
+        const timer = setTimeout(() => {
+          setShouldRun(true);
+        }, delay);
+        return () => clearTimeout(timer);
+      }
+    }, [isOpen, delay]);
+    if (!shouldRun) {
+      return null;
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_Menu.Menu.Content, { ref: forwardedRef, side: "right", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Menu.Menu.Group, { children: header }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { role: "none", onClick: onActionSelected, onKeyDown: import_lodash_es.noop, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_Menu.Menu.Group, { children: [
+        defaultActionsMapped,
+        customActions && (0, import_render_menu_action_children.renderMenuActionChildren)(customActions.props.children, {
+          divideActionsAndIntents: false
+        })
+      ] }) })
+    ] });
+  }
+);

package/charts/core/components/series-action/hooks/useDefaultAction.d.ts

@@ -1,2 +1,3 @@
-import { TooltipItem } from '../../../types/tooltip.js';
-export declare const getDefaultAction: (item?: TooltipItem) => import("react/jsx-runtime.js").JSX.Element;
+export declare const getDefaultAction: (item: {
+    name: string | string[];
+}) => import("react/jsx-runtime.js").JSX.Element;