@dynatrace/strato-components 3.11.3 → 3.12.0

package/charts/core/components/text-ellipsis/chars-font-width-map.js

@@ -22,6 +22,7 @@ __export(chars_font_width_map_exports, {
   charsFontWidth12pixelsSize600Map: () => charsFontWidth12pixelsSize600Map,
   charsFontWidth12pixelsSize700Map: () => charsFontWidth12pixelsSize700Map,
   charsFontWidth14pixelsSize400Map: () => charsFontWidth14pixelsSize400Map,
+  charsFontWidth14pixelsSize500Map: () => charsFontWidth14pixelsSize500Map,
   charsFontWidth16pixelsSize500Map: () => charsFontWidth16pixelsSize500Map,
   charsFontWidth18pixelsSize400Map: () => charsFontWidth18pixelsSize400Map,
   charsFontWidth9pixelsSize500Map: () => charsFontWidth9pixelsSize500Map
@@ -343,6 +344,164 @@ const charsFontWidth14pixelsSize400Map = {
   "\xA3": 8.04998779296875,
   "\xA5": 8.035995483398438
 };
+const charsFontWidth14pixelsSize500Map = {
+  "0": 8.11999,
+  "1": 8.11999,
+  "2": 8.11999,
+  "3": 8.11999,
+  "4": 8.11999,
+  "5": 8.11999,
+  "6": 8.11999,
+  "7": 8.11999,
+  "8": 8.11999,
+  "9": 8.11999,
+  a: 7.811999,
+  b: 7.867986,
+  c: 6.817993,
+  d: 7.867986,
+  e: 7.475988,
+  f: 5.348,
+  g: 7.797988,
+  h: 8.134,
+  i: 3.709992,
+  j: 3.821984,
+  k: 7.363995,
+  l: 4.143985,
+  m: 12.501986,
+  n: 8.105998,
+  o: 7.573987,
+  p: 7.867986,
+  q: 7.881997,
+  r: 5.753991,
+  s: 6.929985,
+  t: 5.389994,
+  u: 8.105998,
+  v: 7.055987,
+  w: 10.737994,
+  x: 7.349986,
+  y: 7.013992,
+  z: 7.08399,
+  \u00E1: 7.811999,
+  \u00E0: 7.811999,
+  \u00E4: 7.811999,
+  \u00E2: 7.811999,
+  \u00E3: 7.811999,
+  \u00E5: 7.811999,
+  \u00E7: 6.817993,
+  \u00E9: 7.475988,
+  \u00E8: 7.475988,
+  \u00EB: 7.475988,
+  \u00EA: 7.475988,
+  \u00ED: 3.709992,
+  \u00EC: 3.709992,
+  \u00EF: 3.709992,
+  \u00F1: 8.105998,
+  \u00F3: 7.573987,
+  \u00F2: 7.573987,
+  \u00F6: 7.573987,
+  \u00F4: 7.573987,
+  \u00F5: 7.573987,
+  \u00F8: 7.573987,
+  \u0161: 6.929985,
+  \u00FD: 7.013992,
+  \u00FF: 7.013992,
+  Z: 8.511988,
+  A: 9.029988,
+  \u00C1: 9.029988,
+  \u00C0: 9.029988,
+  \u00C4: 9.029988,
+  \u00C2: 9.029988,
+  \u00C3: 9.029988,
+  \u00C5: 9.029988,
+  B: 8.75,
+  C: 8.455984,
+  \u00C7: 8.455984,
+  D: 8.917997,
+  E: 8.232,
+  \u00C9: 8.232,
+  \u00C8: 8.232,
+  \u00CB: 8.232,
+  \u00CA: 8.232,
+  F: 7.825992,
+  G: 8.848,
+  H: 9.673991,
+  I: 5.403987,
+  \u00CD: 5.403987,
+  \u00CC: 5.403987,
+  \u00CF: 5.403987,
+  J: 6.46799,
+  K: 8.75,
+  L: 7.349986,
+  " ": 3.58399,
+  M: 11.81599,
+  N: 9.799993,
+  \u00D1: 9.799993,
+  O: 9.141999,
+  \u00D3: 9.141999,
+  \u00D2: 9.141999,
+  \u00D6: 9.141999,
+  \u00D4: 9.141999,
+  \u00D5: 9.141999,
+  \u00D8: 9.141999,
+  P: 8.553983,
+  Q: 9.141999,
+  R: 8.973984,
+  S: 8.483986,
+  \u0160: 8.483986,
+  T: 7.671987,
+  U: 9.281993,
+  \u00DA: 9.281993,
+  \u00D9: 9.281993,
+  \u00DC: 9.281993,
+  V: 8.93199,
+  W: 13.579999,
+  X: 9.337998,
+  Y: 8.441991,
+  \u00DD: 8.441991,
+  \u0178: 8.441991,
+  "!": 4.10199,
+  '"': 5.529988,
+  "'": 3.233986,
+  "#": 8.903987,
+  $: 8.189987,
+  "%": 10.261988,
+  "&": 8.805987,
+  "(": 4.983986,
+  ")": 4.815989,
+  "*": 7.461995,
+  "+": 8.049993,
+  ",": 3.598,
+  "-": 6.677999,
+  ".": 3.598,
+  "/": 5.095995,
+  ":": 3.598,
+  ";": 3.598,
+  "<": 8.287987,
+  "=": 8.049993,
+  ">": 8.287987,
+  "?": 7.769986,
+  "@": 14.923991,
+  "[": 5.109988,
+  "\\": 5.095995,
+  "]": 5.039991,
+  "^": 8.049993,
+  _: 8.11999,
+  "`": 4.10199,
+  "{": 5.473984,
+  "|": 3.891999,
+  "}": 5.473984,
+  "~": 8.049993,
+  "\u2022": 6.131997,
+  "\u2026": 10.79399,
+  "\xB0": 5.347981,
+  \u00B5: 8.105998,
+  "\xB2": 4.871994,
+  "\xB3": 4.871994,
+  "\xB1": 8.049993,
+  "\u20AC": 8.189987,
+  "\xA3": 8.189987,
+  "\xA5": 8.049993
+};
 const charsFontWidth12pixelsSize500Map = {
   "0": 6.959991,
   "1": 6.959991,

package/charts/core/components/threshold-bar/styles.css

@@ -1,31 +1,39 @@
-._18heesa0-3-11-3 {
+._18heesa0-3-12-0 {
   border-right: unset;
   transform-origin: top left;
   width: 16px;
   border-left: var(--dt-borders-width-default, 1px) var(--dt-borders-style-default, solid) var(--dt-colors-border-neutral-default, #dadbe4);
 }
-._18heesa1-3-11-3 {
+._18heesa1-3-12-0 {
   border-right: var(--dt-borders-width-default, 1px) var(--dt-borders-style-default, solid) var(--dt-colors-border-neutral-default, #dadbe4);
 }
-._18heesa2-3-11-3 {
+._18heesa2-3-12-0 {
   border-left: var(--dt-borders-width-default, 1px) var(--dt-borders-style-default, solid) var(--dt-colors-border-neutral-default, #dadbe4);
 }
-._18heesa3-3-11-3 {
+._18heesa3-3-12-0 {
   border-left: none;
   border-right: var(--dt-borders-width-default, 1px) var(--dt-borders-style-default, solid) var(--dt-colors-border-neutral-default, #dadbe4);
 }
-._18heesa4-3-11-3 {
+._18heesa4-3-12-0 {
+  border-left: none;
+  border-right: var(--dt-borders-width-default, 1px) var(--dt-borders-style-default, solid) var(--dt-colors-border-neutral-default, #dadbe4);
+}
+._18heesa5-3-12-0 {
+  border-left: none;
+  border-right: var(--dt-borders-width-default, 1px) var(--dt-borders-style-default, solid) var(--dt-colors-border-neutral-default, #dadbe4);
+}
+._18heesa6-3-12-0 {
   transform: scaleX(-1) translateX(-100%);
 }
-._18heesa5-3-11-3 {
+._18heesa7-3-12-0 {
   transform: none;
 }
-._18heesa6-3-11-3 {
+._18heesa8-3-12-0 {
   transform: rotate(-90deg) scaleX(-1);
 }
-._18heesa7-3-11-3 {
+._18heesa9-3-12-0 {
   transform: rotate(-90deg) translateX(-100%);
 }
-._18heesa8-3-11-3 {
+._18heesaa-3-12-0 {
   overflow: hidden;
 }

package/charts/core/components/threshold-bar/styles.css.d.ts

@@ -10,6 +10,14 @@ export declare const wrapper: import("@vanilla-extract/recipes").RuntimeFn<{
             borderLeft: "none";
             borderRight: string;
         };
+        topBorder: {
+            borderLeft: "none";
+            borderRight: string;
+        };
+        bottomBorder: {
+            borderLeft: "none";
+            borderRight: string;
+        };
     };
     /** Transformations applied to the div (svg parent)
      * as we need to keep our original coordinate system,

package/charts/core/components/threshold-bar/styles.sty.js

@@ -23,5 +23,5 @@ __export(styles_css_exports, {
 module.exports = __toCommonJS(styles_css_exports);
 var import_styles_css_ts_vanilla = require("./styles.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var bodyOverflowOverwrite = "_18heesa8-3-11-3";
-var wrapper = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_18heesa0-3-11-3", variantClassNames: { borderArea: { bothBorders: "_18heesa1-3-11-3", leftBorder: "_18heesa2-3-11-3", rightBorder: "_18heesa3-3-11-3" }, layoutType: { "vertical-flip": "_18heesa4-3-11-3", "vertical-no-flip": "_18heesa5-3-11-3", "horizontal-flip": "_18heesa6-3-11-3", "horizontal-no-flip": "_18heesa7-3-11-3" } }, defaultVariants: {}, compoundVariants: [] });
+var bodyOverflowOverwrite = "_18heesaa-3-12-0";
+var wrapper = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_18heesa0-3-12-0", variantClassNames: { borderArea: { bothBorders: "_18heesa1-3-12-0", leftBorder: "_18heesa2-3-12-0", rightBorder: "_18heesa3-3-12-0", topBorder: "_18heesa4-3-12-0", bottomBorder: "_18heesa5-3-12-0" }, layoutType: { "vertical-flip": "_18heesa6-3-12-0", "vertical-no-flip": "_18heesa7-3-12-0", "horizontal-flip": "_18heesa8-3-12-0", "horizontal-no-flip": "_18heesa9-3-12-0" } }, defaultVariants: {}, compoundVariants: [] });

package/charts/core/components/threshold-bar/types.d.ts

@@ -41,12 +41,28 @@ export type BothBorders = 'bothBorders';
  * @internal
  */
 export declare const BothBorders: BothBorders;
+/**
+ * @internal
+ */
+export type TopBorder = 'topBorder';
+/**
+ * @internal
+ */
+export declare const TopBorder: TopBorder;
+/**
+ * @internal
+ */
+export type BottomBorder = 'bottomBorder';
+/**
+ * @internal
+ */
+export declare const BottomBorder: BottomBorder;
 /**
  * @internal
  */
 export type ThresholdBarProps = {
     /** Control which side the ThresholdArea border needs to be displayed. **/
-    borderArea?: BothBorders | LeftBorder | RightBorder;
+    borderArea?: BothBorders | LeftBorder | RightBorder | TopBorder | BottomBorder;
     /** Length in absolute pixels for the component.
      * If layout is vertical, this length is used for height.
      * Otherwise, it's used as width.

package/charts/core/components/threshold-bar/types.js

@@ -18,10 +18,14 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var types_exports = {};
 __export(types_exports, {
   BothBorders: () => BothBorders,
+  BottomBorder: () => BottomBorder,
   LeftBorder: () => LeftBorder,
-  RightBorder: () => RightBorder
+  RightBorder: () => RightBorder,
+  TopBorder: () => TopBorder
 });
 module.exports = __toCommonJS(types_exports);
 const LeftBorder = "leftBorder";
 const RightBorder = "rightBorder";
 const BothBorders = "bothBorders";
+const TopBorder = "topBorder";
+const BottomBorder = "bottomBorder";

package/charts/core/components/toolbar/ChartToolbarRenderer.css

@@ -1,4 +1,4 @@
-._1x31hou0-3-11-3 {
+._1x31hou0-3-12-0 {
   padding: var(--dt-spacings-size-4, 4px);
   background: var(--dt-colors-background-surface-default, #fff);
   border-radius: var(--dt-borders-radius-surface-subdued, 9px);
@@ -6,55 +6,55 @@
   box-shadow: var(--dt-box-shadows-surface-floating-rest, 0px 0px 0px 1px #2d2e4e08, 0px 1px 2px #2d2e4e0d, 0px 5px 11px -2px #2d2e4e29);
   touch-action: none;
 }
-._1x31hou1-3-11-3 {
+._1x31hou1-3-12-0 {
   visibility: visible;
 }
-._1x31hou2-3-11-3 {
+._1x31hou2-3-12-0 {
   visibility: hidden;
 }
-._1x31hou3-3-11-3 {
+._1x31hou3-3-12-0 {
   padding: 0;
   box-shadow: none;
   margin-left: var(--dt-spacings-size-4, 4px);
 }
-._1x31hou4-3-11-3 {
+._1x31hou4-3-12-0 {
   background-color: transparent;
   cursor: grab;
   touch-action: none;
 }
-._1x31hou5-3-11-3 {
+._1x31hou5-3-12-0 {
   pointer-events: auto;
 }
-._1x31hou6-3-11-3 {
+._1x31hou6-3-12-0 {
   position: relative;
 }
-._1x31hou7-3-11-3 {
+._1x31hou7-3-12-0 {
   position: absolute;
 }
-body[data-scroll-locked] ._1x31hou8-3-11-3 * {
+body[data-scroll-locked] ._1x31hou8-3-12-0 * {
   pointer-events: none;
 }
-body[data-scroll-locked] ._1x31hou8-3-11-3 button[aria-expanded="true"] {
+body[data-scroll-locked] ._1x31hou8-3-12-0 button[aria-expanded="true"] {
   pointer-events: all;
 }
-._1x31hou9-3-11-3 {
+._1x31hou9-3-12-0 {
   pointer-events: none;
 }
-._1x31houa-3-11-3 {
+._1x31houa-3-12-0 {
   position: relative;
 }
-._1x31houb-3-11-3 {
+._1x31houb-3-12-0 {
   position: absolute;
 }
-._1x31houc-3-11-3 {
+._1x31houc-3-12-0 {
   width: calc(100% - var(--dt-spacings-size-16, 16px));
   height: calc(100% - var(--dt-spacings-size-16, 16px));
   top: var(--dt-spacings-size-8, 8px);
   left: var(--dt-spacings-size-8, 8px);
 }
-._1x31houd-3-11-3 {
+._1x31houd-3-12-0 {
   margin: 0 var(--dt-spacings-size-4, 4px);
 }
-._1x31houe-3-11-3 {
+._1x31houe-3-12-0 {
   margin: var(--dt-spacings-size-4, 4px) 0;
 }

package/charts/core/components/toolbar/ChartToolbarRenderer.js

@@ -104,6 +104,7 @@ const InternalChartToolbarRenderer = (props) => {
   } = (0, import_useToolbar.useToolbar)(collapsed, menuDisplayMode);
   const isInlineMode = toolbarDisplayMode === "inline";
   const [isMenuOpen, setIsMenuOpen] = (0, import_react.useState)(void 0);
+  const [isToolbarFocused, setIsToolbarFocused] = (0, import_react.useState)(false);
   const [toolbarElement, setToolbarElement] = (0, import_react.useState)();
   const [boundSize, boundRef] = (0, import_useObserveContainerSize.useObserveContainerSize)();
   const [toolbarSize, toolbarRefCallback] = (0, import_useObserveContainerSize.useObserveContainerSize)();
@@ -111,7 +112,12 @@ const InternalChartToolbarRenderer = (props) => {
   const lastMeasuredWidthRef = (0, import_react.useRef)(0);
   const intl = (0, import_react_intl.useIntl)();
   const mouseInBounds = (0, import_react.useRef)(false);
+  const hasMountedRef = (0, import_react.useRef)(false);
+  const menuClosedByOutsideInteractionRef = (0, import_react.useRef)(false);
   const [isVisible, setIsVisible] = (0, import_react.useState)(false);
+  (0, import_react.useEffect)(() => {
+    hasMountedRef.current = true;
+  }, []);
   const toolbarComponentRef = (0, import_react.useCallback)((toolbarElement2) => {
     setToolbarElement(toolbarElement2);
   }, []);
@@ -158,8 +164,10 @@ const InternalChartToolbarRenderer = (props) => {
       } else {
         onMouseEnter?.();
       }
+      requestAnimationFrame(() => setIsMenuOpen(open));
+    } else {
+      setIsMenuOpen(open);
     }
-    setIsMenuOpen(open);
     onToggleMenu?.(open);
   };
   const collapseButton = (0, import_react.useMemo)(
@@ -204,7 +212,16 @@ const InternalChartToolbarRenderer = (props) => {
   const handleOnMenuLeave = () => {
     mouseInBounds.current = true;
   };
+  const handleMenuInteractOutside = () => {
+    menuClosedByOutsideInteractionRef.current = true;
+  };
   const onCloseAutoFocus = (e) => {
+    if (menuClosedByOutsideInteractionRef.current) {
+      menuClosedByOutsideInteractionRef.current = false;
+      e.preventDefault();
+      setIsToolbarFocused(false);
+      return;
+    }
     if ((lastItemSelected === import_types.INTERACTION_MODE.Explore && onClose || lastItemSelected === import_types.INTERACTION_MODE.Zoom) && onClose) {
       e.preventDefault();
       onClose();
@@ -258,8 +275,16 @@ const InternalChartToolbarRenderer = (props) => {
       event.stopPropagation();
     }
   };
+  const handleOnFocus = () => {
+    if (hasMountedRef.current) {
+      setIsToolbarFocused(true);
+    }
+  };
   const handleOnBlur = (event) => {
     event.stopPropagation();
+    if (!event.currentTarget.contains(event.relatedTarget)) {
+      setIsToolbarFocused(false);
+    }
   };
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_ChartToolbarVisibilityOverlay.ChartToolbarVisibilityOverlay,
@@ -289,6 +314,7 @@ const InternalChartToolbarRenderer = (props) => {
               ref: toolbarRef,
               role: "toolbar",
               "data-testid": "chart-toolbar-container",
+              onFocus: handleOnFocus,
               onBlur: handleOnBlur,
               onKeyDown: handleKeyDown,
               onPointerDown: onMouseEnterHandler,
@@ -299,7 +325,7 @@ const InternalChartToolbarRenderer = (props) => {
                 "div",
                 {
                   className: (0, import_ChartToolbarRenderer_css.outerContainer)({
-                    visible: visible || isMenuOpen || isDragging || visibleWhenMouseInBounds && isVisible,
+                    visible: visible || isMenuOpen || isDragging || isToolbarFocused || visibleWhenMouseInBounds && isVisible,
                     inline: isInlineMode
                   }),
                   "data-testid": "chart-toolbar-wrapper",
@@ -351,6 +377,7 @@ const InternalChartToolbarRenderer = (props) => {
                               onMenuLeave: handleOnMenuLeave,
                               menuAlignment: isExpanded ? "start" : "end",
                               onCloseAutoFocus,
+                              onInteractOutside: handleMenuInteractOutside,
                               "data-dt-name": "ToolbarTools",
                               "data-dt-properties": isExpanded && fitsBounds ? "state:changeMode" : "state:tools",
                               children: [

package/charts/core/components/toolbar/ChartToolbarRenderer.sty.js

@@ -30,11 +30,11 @@ module.exports = __toCommonJS(ChartToolbarRenderer_css_exports);
 var import_ChartGrid_css_ts_vanilla = require("../chart-grid/ChartGrid.css");
 var import_ChartToolbarRenderer_css_ts_vanilla = require("./ChartToolbarRenderer.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var chartToolbar = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1x31hou5-3-11-3", variantClassNames: { inline: { true: "_1x31hou6-3-11-3", false: "_1x31hou7-3-11-3" } }, defaultVariants: {}, compoundVariants: [] });
-var chartToolbarArea = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1x31hou9-3-11-3", variantClassNames: { inline: { true: "_1x31houa-3-11-3", false: "_1x31houb-3-11-3" } }, defaultVariants: {}, compoundVariants: [] });
-var defaultOverlayPadding = "_1x31houc-3-11-3";
-var grip = "_1x31hou4-3-11-3";
-var outerContainer = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1x31hou0-3-11-3", variantClassNames: { visible: { true: "_1x31hou1-3-11-3", false: "_1x31hou2-3-11-3" }, inline: { true: "_1x31hou3-3-11-3" } }, defaultVariants: {}, compoundVariants: [] });
-var styledHorizontalDivider = "_1x31houe-3-11-3";
-var styledVerticalDivider = "_1x31houd-3-11-3";
-var toolbarVisibilityOverlay = "_1x31hou8-3-11-3 _13lzg4k0-3-11-3";
+var chartToolbar = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1x31hou5-3-12-0", variantClassNames: { inline: { true: "_1x31hou6-3-12-0", false: "_1x31hou7-3-12-0" } }, defaultVariants: {}, compoundVariants: [] });
+var chartToolbarArea = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1x31hou9-3-12-0", variantClassNames: { inline: { true: "_1x31houa-3-12-0", false: "_1x31houb-3-12-0" } }, defaultVariants: {}, compoundVariants: [] });
+var defaultOverlayPadding = "_1x31houc-3-12-0";
+var grip = "_1x31hou4-3-12-0";
+var outerContainer = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1x31hou0-3-12-0", variantClassNames: { visible: { true: "_1x31hou1-3-12-0", false: "_1x31hou2-3-12-0" }, inline: { true: "_1x31hou3-3-12-0" } }, defaultVariants: {}, compoundVariants: [] });
+var styledHorizontalDivider = "_1x31houe-3-12-0";
+var styledVerticalDivider = "_1x31houd-3-12-0";
+var toolbarVisibilityOverlay = "_1x31hou8-3-12-0 _13lzg4k0-3-12-0";

package/charts/core/components/toolbar/components/ChartDataMenu.css

@@ -1,9 +1,9 @@
-._1hxr84t0-3-11-3 {
+._1hxr84t0-3-12-0 {
   background-color: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
   width: var(--dt-spacings-size-24, 24px);
   height: var(--dt-spacings-size-20, 20px);
   border-radius: var(--dt-borders-radius-field-subdued, 3px);
 }
-._1hxr84t0-3-11-3:hover {
+._1hxr84t0-3-12-0:hover {
   background-color: var(--dt-colors-background-field-neutral-emphasized-active, #d0d1dc);
 }

package/charts/core/components/toolbar/components/ChartDataMenu.sty.js

@@ -21,4 +21,4 @@ __export(ChartDataMenu_css_exports, {
 });
 module.exports = __toCommonJS(ChartDataMenu_css_exports);
 var import_ChartDataMenu_css_ts_vanilla = require("./ChartDataMenu.css");
-var triggerButton = "_1hxr84t0-3-11-3";
+var triggerButton = "_1hxr84t0-3-12-0";

package/charts/core/components/toolbar/components/Control.css

@@ -1,47 +1,47 @@
-._1ukritl0-3-11-3 {
+._1ukritl0-3-12-0 {
   font-family: var(--dt-typography-text-base-emphasized-family, DynatraceFlow,Roboto,Helvetica,sans-serif);
   font-size: var(--dt-typography-text-base-emphasized-size, 14px);
   font-weight: var(--dt-typography-text-base-emphasized-weight, 500);
 }
-._1ukritl1-3-11-3 {
+._1ukritl1-3-12-0 {
   display: flex;
   align-items: center;
   justify-content: space-between;
   width: 100%;
 }
-._1ukritl2-3-11-3 {
+._1ukritl2-3-12-0 {
   display: flex;
   align-items: baseline;
   gap: 4px;
   font-size: var(--dt-typography-text-small-default-size, 12px);
 }
-._1ukritl3-3-11-3 {
+._1ukritl3-3-12-0 {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
 }
-._1ukritl4-3-11-3 {
+._1ukritl4-3-12-0 {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
 }
-._1ukritl5-3-11-3 {
+._1ukritl5-3-12-0 {
   position: relative;
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
 }
-._1ukritl6-3-11-3 {
+._1ukritl6-3-12-0 {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
   cursor: not-allowed;
 }
-._1ukritl6-3-11-3:hover {
+._1ukritl6-3-12-0:hover {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
   background-color: transparent;
 }
-._1ukritl7-3-11-3 {
+._1ukritl7-3-12-0 {
   color: var(--dt-colors-text-primary-default, #464cce);
 }
-._1ukritl8-3-11-3 {
+._1ukritl8-3-12-0 {
   background-color: transparent;
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
   position: relative;
 }
-._1ukritl8-3-11-3::before {
+._1ukritl8-3-12-0::before {
   content: "";
   position: absolute;
   border-radius: 2px;
@@ -51,25 +51,25 @@
   width: 0;
   height: 0;
 }
-._1ukritl8-3-11-3:active {
+._1ukritl8-3-12-0:active {
   background-color: var(--dt-colors-background-field-primary-emphasized-active, #c9d1f4);
 }
-._1ukritl9-3-11-3 {
+._1ukritl9-3-12-0 {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
 }
-._1ukritl9-3-11-3:hover {
+._1ukritl9-3-12-0:hover {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
   background-color: transparent;
   cursor: not-allowed;
 }
-._1ukritla-3-11-3 {
+._1ukritla-3-12-0 {
   color: var(--dt-colors-text-primary-default, #464cce);
 }
-._1ukritla-3-11-3::before {
+._1ukritla-3-12-0::before {
   width: 2px;
   height: 20px;
 }
-._1ukritla-3-11-3:hover {
+._1ukritla-3-12-0:hover {
   color: var(--dt-colors-text-primary-default, #464cce);
   background-color: var(--dt-colors-background-field-primary-emphasized, #e1e5f7);
 }

package/charts/core/components/toolbar/components/Control.sty.js

@@ -26,8 +26,8 @@ __export(Control_css_exports, {
 module.exports = __toCommonJS(Control_css_exports);
 var import_Control_css_ts_vanilla = require("./Control.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var buttonStyle = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1ukritl5-3-11-3", variantClassNames: { disabled: { true: "_1ukritl6-3-11-3" }, selected: { true: "_1ukritl7-3-11-3" } }, defaultVariants: {}, compoundVariants: [] });
-var menuItemStyles = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1ukritl8-3-11-3", variantClassNames: { disabled: { true: "_1ukritl9-3-11-3" }, selected: { true: "_1ukritla-3-11-3" } }, defaultVariants: {}, compoundVariants: [] });
-var styledMenuItemContent = "_1ukritl1-3-11-3";
-var styledShortcutGroup = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1ukritl2-3-11-3", variantClassNames: { disabled: { true: "_1ukritl3-3-11-3", false: "_1ukritl4-3-11-3" } }, defaultVariants: {}, compoundVariants: [] });
-var styledText = "_1ukritl0-3-11-3";
+var buttonStyle = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1ukritl5-3-12-0", variantClassNames: { disabled: { true: "_1ukritl6-3-12-0" }, selected: { true: "_1ukritl7-3-12-0" } }, defaultVariants: {}, compoundVariants: [] });
+var menuItemStyles = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1ukritl8-3-12-0", variantClassNames: { disabled: { true: "_1ukritl9-3-12-0" }, selected: { true: "_1ukritla-3-12-0" } }, defaultVariants: {}, compoundVariants: [] });
+var styledMenuItemContent = "_1ukritl1-3-12-0";
+var styledShortcutGroup = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1ukritl2-3-12-0", variantClassNames: { disabled: { true: "_1ukritl3-3-12-0", false: "_1ukritl4-3-12-0" } }, defaultVariants: {}, compoundVariants: [] });
+var styledText = "_1ukritl0-3-12-0";

package/charts/core/components/toolbar/components/ToolbarMenu.css

@@ -1,14 +1,14 @@
-._auj9i40-3-11-3 {
+._auj9i40-3-12-0 {
   align-items: center;
   display: flex;
 }
-._auj9i41-3-11-3 {
+._auj9i41-3-12-0 {
   height: var(--dt-spacings-size-20, 20px);
   width: var(--dt-spacings-size-24, 24px);
 }
-._auj9i42-3-11-3 {
+._auj9i42-3-12-0 {
   height: var(--dt-spacings-size-24, 24px);
 }
-._auj9i43-3-11-3 {
+._auj9i43-3-12-0 {
   min-width: 215px;
 }

package/charts/core/components/toolbar/components/ToolbarMenu.d.ts

@@ -9,6 +9,7 @@ interface ChartToolbarMenuProps {
     triggerLabel?: string;
     menuAlignment?: 'start' | 'end';
     onCloseAutoFocus?: (event: Event) => void;
+    onInteractOutside?: (event: Event) => void;
     isDownloadEnabled?: boolean;
     toolbarDisplayMode?: 'overlay' | 'inline';
     /** Behaviour tracking attribute */

package/charts/core/components/toolbar/components/ToolbarMenu.js

@@ -31,6 +31,7 @@ var import_useA11yToolbarTabIndex = require("../../../hooks/useA11yToolbarTabInd
 var import_useToolbarContext = require("../hooks/useToolbarContext.js");
 var import_messages = require("../messages.js");
 var import_ToolbarMenu_css = require("./ToolbarMenu.sty.js");
+const MenuContent = import_Menu.Menu.Content;
 function renderMenuItems(children) {
   return import_react.Children.map(children, (child) => {
     if ((0, import_react.isValidElement)(child)) {
@@ -55,6 +56,7 @@ const ToolbarMenu = (props) => {
     onMenuLeave,
     menuAlignment = "start",
     onCloseAutoFocus,
+    onInteractOutside,
     "data-dt-name": dtName,
     "data-dt-properties": dtProperties
   } = props;
@@ -122,10 +124,11 @@ const ToolbarMenu = (props) => {
       children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_Menu.Menu, { onOpenChange: onMenuOpen, open: isOpen, children: [
         chartActionsButton,
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          import_Menu.Menu.Content,
+          MenuContent,
           {
             alignment: menuAlignment,
             onCloseAutoFocus,
+            onInteractOutside,
             children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Menu.Menu.Group, { className: import_ToolbarMenu_css.toolbarMenuGroup, children: menuItems })
           }
         )