@dynatrace/strato-components 3.8.0 → 3.9.1

package/editors/dql-editor/dql/open-autocomplete.js

@@ -43,6 +43,9 @@ function isTypingParameterPrefixAfterCommand(context) {
   );
   return commandAndParameter !== null;
 }
+function isTypingNumericContext(context) {
+  return context.matchBefore(/\d[\w.]*$/) !== null;
+}
 function isAtTokenBoundary(state) {
   const afterCursor = state.doc.slice(state.selection.main.to).toString();
   const immediateCharacterAfterCursor = afterCursor.slice(0, 1);
@@ -69,7 +72,7 @@ async function openAutocomplete(update, state) {
       return false;
     }
   }
-  if (isTyping && (isTypingCommandPrefixAtCommandBoundary(context) || isTypingCommandPrefixAtSubqueryStart(context) || isTypingParameterPrefixAfterCommand(context)) && isAtTokenBoundary(state)) {
+  if (isTyping && (isTypingCommandPrefixAtCommandBoundary(context) || isTypingCommandPrefixAtSubqueryStart(context) || isTypingParameterPrefixAfterCommand(context) || isTypingNumericContext(context)) && isAtTokenBoundary(state)) {
     return true;
   }
   if (isFocused && state.doc.toString().trim() === "") {

package/editors/dql-editor/dql/suggestion-autocompletions.d.ts

@@ -1,2 +1,9 @@
+import { type SuggestionCache } from './get-suggestions.js';
 import type { AutocompleteProvider } from '../../base-code-editor/auto-completion/autocompletion.extension.js';
-export declare const suggestionAutocompletion: AutocompleteProvider;
+/**
+ * Creates the DQL autocomplete provider bound to a `cache` owned by the calling
+ * editor instance. Keeping the cache per-instance ensures suggestions never
+ * outlive the editor or leak between editors (or between dev-app stories).
+ * @param cache - the suggestion cache owned by the editor instance.
+ */
+export declare const createSuggestionAutocompletion: (cache: SuggestionCache) => AutocompleteProvider;

package/editors/dql-editor/dql/suggestion-autocompletions.js

@@ -17,7 +17,7 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var suggestion_autocompletions_exports = {};
 __export(suggestion_autocompletions_exports, {
-  suggestionAutocompletion: () => suggestionAutocompletion
+  createSuggestionAutocompletion: () => createSuggestionAutocompletion
 });
 module.exports = __toCommonJS(suggestion_autocompletions_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
@@ -25,12 +25,16 @@ var import_dql_linter = require("./dql-linter.js");
 var import_fuzzy_match = require("./fuzzy-match.js");
 var import_get_suggestions = require("./get-suggestions.js");
 var import_SuggestionPart = require("./SuggestionPart.js");
+var import_dql_common = require("../../../core/dql/dql-common.js");
 var import_Flex = require("../../../layouts/flex/Flex.js");
 var import_Text = require("../../../typography/text/Text.js");
-function getMatchPattern(content) {
-  const match = content.match(/\W?([\w.]*)$/);
-  const capture = match?.[1];
-  return capture ?? "";
+function extractWordToken(content) {
+  const rawCapture = /\W?([\w.]*)$/.exec(content)?.[1] ?? "";
+  const trimmedCapture = rawCapture.replace(/^\d+(\.\d+)?/, "");
+  return { rawCapture, trimmedCapture };
+}
+function getIsTypingUnitAlias(rawCapture, trimmedCapture) {
+  return trimmedCapture.length > 0 && trimmedCapture !== rawCapture && import_dql_common.combinedDurationUnits.some((unit) => unit.startsWith(trimmedCapture));
 }
 function hasInfo(suggestions) {
   return suggestions.some(
@@ -63,7 +67,7 @@ function getRequestString(autocompleteContent, patternLength, requestLength) {
   );
 }
 const MAX_DATA_SUGGESTIONS = 1e4;
-async function getFilteredSuggestions(autocompleteContent, patternLength, explicit) {
+async function getFilteredSuggestions(autocompleteContent, patternLength, explicit, cache) {
   const requestString = getRequestString(
     autocompleteContent,
     patternLength,
@@ -72,7 +76,8 @@ async function getFilteredSuggestions(autocompleteContent, patternLength, explic
   const suggestions = await (0, import_get_suggestions.getSuggestions)(
     requestString,
     requestString.length,
-    MAX_DATA_SUGGESTIONS
+    MAX_DATA_SUGGESTIONS,
+    cache
   );
   const pattern = autocompleteContent.slice(
     autocompleteContent.length - patternLength
@@ -85,26 +90,38 @@ async function getFilteredSuggestions(autocompleteContent, patternLength, explic
     explicit
   );
 }
-const suggestionAutocompletion = async (context) => {
+function buildSuggestionInfoPopup(suggestion) {
+  const infoParts = suggestion.parts.filter((part) => !!part.info);
+  if (infoParts.length === 0) {
+    return void 0;
+  }
+  return () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Flex.Flex, { flexDirection: "column", gap: 16, children: infoParts.map((part) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_SuggestionPart.SuggestionPart, { suggestionPart: part }, part.info)) });
+}
+const createSuggestionAutocompletion = (cache) => async (context) => {
   if (context.matchBefore(/[^\w.]/) && !context.explicit) {
     return null;
   }
   const autocompleteContent = context.state.doc.slice(0, context.pos).toString();
-  const pattern = getMatchPattern(autocompleteContent);
+  const { rawCapture, trimmedCapture: pattern } = extractWordToken(autocompleteContent);
   const infoSuggestions = await (0, import_get_suggestions.getSuggestions)(
-    getRequestString(autocompleteContent, pattern.length, 0)
+    getRequestString(autocompleteContent, pattern.length, 0),
+    void 0,
+    void 0,
+    cache
   );
   let filteredSuggestions = await getFilteredSuggestions(
     autocompleteContent,
     pattern.length,
-    pattern.length <= 1
+    pattern.length <= 1 || getIsTypingUnitAlias(rawCapture, pattern) || pattern.endsWith("."),
+    cache
   );
   if (filteredSuggestions.length === 0) {
     if (pattern.length > 1) {
       filteredSuggestions = await getFilteredSuggestions(
         autocompleteContent,
         pattern.length,
-        true
+        true,
+        cache
       );
     }
   }
@@ -132,12 +149,9 @@ const suggestionAutocompletion = async (context) => {
   const section = infoSuggestions.filter((suggestion) => !suggestion.suggestion).flatMap((suggestion) => suggestion.parts.map((part) => part.info)).filter((text) => !!text).join(" ");
   return {
     suggestions: filteredSuggestions.map((suggestion) => {
-      const hasInfo2 = suggestion.parts.some((part) => !!part.info);
       const shouldBeTruncated = (0, import_fuzzy_match.labelShouldBeTruncated)(suggestion.suggestion);
       const middleEllipsisText = shouldBeTruncated ? (0, import_fuzzy_match.convertToMiddleEllipsis)(suggestion.suggestion) : suggestion.suggestion;
-      const infoPopup = hasInfo2 ? () => {
-        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Flex.Flex, { flexDirection: "column", gap: 16, children: suggestion.parts.filter((part) => !!part.info).map((part) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_SuggestionPart.SuggestionPart, { suggestionPart: part }, part.info)) });
-      } : void 0;
+      const infoPopup = buildSuggestionInfoPopup(suggestion);
       return {
         ...suggestion,
         label: middleEllipsisText,

package/esm/buttons/button/Button.css

@@ -1,13 +1,13 @@
-._10kgnsa0-3-8-0 {
+._10kgnsa0-3-9-1 {
   font-family: var(--dt-typography-text-base-default-family, DynatraceFlow,Roboto,Helvetica,sans-serif);
   font-weight: var(--dt-typography-text-base-emphasized-weight, 500);
   font-size: var(--dt-typography-text-base-default-size, 14px);
   line-height: var(--dt-typography-text-base-default-line-height, 1.4285714286);
   text-decoration: var(--dt-typography-text-base-default-text-decoration, none);
   text-transform: none;
-  background: var(--_bx32h3-3-8-0);
-  box-shadow: var(--_bx32h4-3-8-0);
-  color: var(--_bx32h0-3-8-0);
+  background: var(--_bx32h3-3-9-1);
+  box-shadow: var(--_bx32h4-3-9-1);
+  color: var(--_bx32h0-3-9-1);
   display: inline-flex;
   position: relative;
   align-items: center;
@@ -24,38 +24,38 @@
   transition-duration: var(--dt-animations-hover-duration-base, 150ms);
   transition-property: color, background-color, box-shadow, transform;
 }
-._10kgnsa1-3-8-0 {
+._10kgnsa1-3-9-1 {
   text-align: start;
   justify-content: space-between;
 }
-._10kgnsa2-3-8-0 {
+._10kgnsa2-3-9-1 {
   text-align: center;
   justify-content: center;
 }
-._10kgnsa3-3-8-0 {
+._10kgnsa3-3-9-1 {
   padding-top: var(--dt-spacings-size-2, 2px);
   padding-bottom: var(--dt-spacings-size-2, 2px);
   padding-left: var(--dt-spacings-size-4, 4px);
   padding-right: var(--dt-spacings-size-4, 4px);
   gap: var(--dt-spacings-size-2, 2px);
 }
-._10kgnsa4-3-8-0 {
+._10kgnsa4-3-9-1 {
   padding-top: var(--dt-spacings-size-6, 6px);
   padding-bottom: var(--dt-spacings-size-6, 6px);
   padding-left: var(--dt-spacings-size-8, 8px);
   padding-right: var(--dt-spacings-size-8, 8px);
   gap: var(--dt-spacings-size-4, 4px);
 }
-._10kgnsa5-3-8-0 {
+._10kgnsa5-3-9-1 {
   cursor: not-allowed;
 }
-._10kgnsa6-3-8-0 {
+._10kgnsa6-3-9-1 {
   width: 100%;
 }
-._10kgnsa7-3-8-0 {
+._10kgnsa7-3-9-1 {
   width: fit-content;
 }
-._10kgnsa8-3-8-0 {
+._10kgnsa8-3-9-1 {
   position: absolute;
   top: 0;
   left: 0;
@@ -67,19 +67,19 @@
   align-items: center;
   z-index: 1;
 }
-._10kgnsa3-3-8-0 ._10kgnsa9-3-8-0:not(:has(svg:only-child)) {
+._10kgnsa3-3-9-1 ._10kgnsa9-3-9-1:not(:has(svg:only-child)) {
   padding-top: 0;
   padding-bottom: 0;
   padding-left: 2px;
   padding-right: 2px;
 }
-._10kgnsa4-3-8-0 ._10kgnsa9-3-8-0:not(:has(svg:only-child)) {
+._10kgnsa4-3-9-1 ._10kgnsa9-3-9-1:not(:has(svg:only-child)) {
   padding-top: 0;
   padding-bottom: 0;
   padding-left: 4px;
   padding-right: 4px;
 }
-._10kgnsab-3-8-0 {
+._10kgnsab-3-9-1 {
   display: inline-flex;
   min-width: 0;
   max-width: 100%;

package/esm/buttons/button/Button.sty.js

@@ -3,10 +3,10 @@ import "../../core/components/app-root/AppRoot.css";
 import "../../styles/field.css";
 import "./Button.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var button = _7a468({ defaultClassName: "_10kgnsa0-3-8-0", variantClassNames: { textAlign: { start: "_10kgnsa1-3-8-0", center: "_10kgnsa2-3-8-0" }, size: { condensed: "_10kgnsa3-3-8-0", "default": "_10kgnsa4-3-8-0" }, disabled: { true: "_10kgnsa5-3-8-0" } }, defaultVariants: { size: "default", textAlign: "center", disabled: false }, compoundVariants: [] });
-var label = _7a468({ defaultClassName: "_10kgnsa9-3-8-0", variantClassNames: { textual: { true: "_oqqp1n0-3-8-0", false: "_10kgnsab-3-8-0" } }, defaultVariants: {}, compoundVariants: [] });
-var loading = "_10kgnsa8-3-8-0";
-var widths = { full: "_10kgnsa6-3-8-0", content: "_10kgnsa7-3-8-0" };
+var button = _7a468({ defaultClassName: "_10kgnsa0-3-9-1", variantClassNames: { textAlign: { start: "_10kgnsa1-3-9-1", center: "_10kgnsa2-3-9-1" }, size: { condensed: "_10kgnsa3-3-9-1", "default": "_10kgnsa4-3-9-1" }, disabled: { true: "_10kgnsa5-3-9-1" } }, defaultVariants: { size: "default", textAlign: "center", disabled: false }, compoundVariants: [] });
+var label = _7a468({ defaultClassName: "_10kgnsa9-3-9-1", variantClassNames: { textual: { true: "_oqqp1n0-3-9-1", false: "_10kgnsab-3-9-1" } }, defaultVariants: {}, compoundVariants: [] });
+var loading = "_10kgnsa8-3-9-1";
+var widths = { full: "_10kgnsa6-3-9-1", content: "_10kgnsa7-3-9-1" };
 export {
   button,
   label,

package/esm/buttons/button/Button.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/buttons/button/Button.css.ts"],
-  "sourcesContent": ["import '../../styles/ellipsis.css';\nimport '../../core/components/app-root/AppRoot.css';\nimport '../../styles/field.css';\nimport './Button.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var button = _7a468({defaultClassName:'_10kgnsa0-3-8-0',variantClassNames:{textAlign:{start:'_10kgnsa1-3-8-0',center:'_10kgnsa2-3-8-0'},size:{condensed:'_10kgnsa3-3-8-0','default':'_10kgnsa4-3-8-0'},disabled:{true:'_10kgnsa5-3-8-0'}},defaultVariants:{size:'default',textAlign:'center',disabled:false},compoundVariants:[]});\nexport var label = _7a468({defaultClassName:'_10kgnsa9-3-8-0',variantClassNames:{textual:{true:'_oqqp1n0-3-8-0',false:'_10kgnsab-3-8-0'}},defaultVariants:{},compoundVariants:[]});\nexport var loading = '_10kgnsa8-3-8-0';\nexport var widths = {full:'_10kgnsa6-3-8-0',content:'_10kgnsa7-3-8-0'};"],
+  "sourcesContent": ["import '../../styles/ellipsis.css';\nimport '../../core/components/app-root/AppRoot.css';\nimport '../../styles/field.css';\nimport './Button.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var button = _7a468({defaultClassName:'_10kgnsa0-3-9-1',variantClassNames:{textAlign:{start:'_10kgnsa1-3-9-1',center:'_10kgnsa2-3-9-1'},size:{condensed:'_10kgnsa3-3-9-1','default':'_10kgnsa4-3-9-1'},disabled:{true:'_10kgnsa5-3-9-1'}},defaultVariants:{size:'default',textAlign:'center',disabled:false},compoundVariants:[]});\nexport var label = _7a468({defaultClassName:'_10kgnsa9-3-9-1',variantClassNames:{textual:{true:'_oqqp1n0-3-9-1',false:'_10kgnsab-3-9-1'}},defaultVariants:{},compoundVariants:[]});\nexport var loading = '_10kgnsa8-3-9-1';\nexport var widths = {full:'_10kgnsa6-3-9-1',content:'_10kgnsa7-3-9-1'};"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,SAAS,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,WAAU,EAAC,OAAM,mBAAkB,QAAO,kBAAiB,GAAE,MAAK,EAAC,WAAU,mBAAkB,WAAU,kBAAiB,GAAE,UAAS,EAAC,MAAK,kBAAiB,EAAC,GAAE,iBAAgB,EAAC,MAAK,WAAU,WAAU,UAAS,UAAS,MAAK,GAAE,kBAAiB,CAAC,EAAC,CAAC;AACjU,IAAI,QAAQ,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,SAAQ,EAAC,MAAK,kBAAiB,OAAM,kBAAiB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AAC1K,IAAI,UAAU;AACd,IAAI,SAAS,EAAC,MAAK,mBAAkB,SAAQ,kBAAiB;",
   "names": []
 }

package/esm/buttons/intent-button/IntentButton.css

@@ -1,3 +1,3 @@
-._1xe9ern0-3-8-0 {
+._1xe9ern0-3-9-1 {
   opacity: 0.5;
 }

package/esm/buttons/intent-button/IntentButton.sty.js

@@ -1,5 +1,5 @@
 import "./IntentButton.css";
-var disabledAppIconOpacity = "_1xe9ern0-3-8-0";
+var disabledAppIconOpacity = "_1xe9ern0-3-9-1";
 export {
   disabledAppIconOpacity
 };

package/esm/buttons/intent-button/IntentButton.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/buttons/intent-button/IntentButton.css.ts"],
-  "sourcesContent": ["import './IntentButton.css';\nexport var disabledAppIconOpacity = '_1xe9ern0-3-8-0';"],
+  "sourcesContent": ["import './IntentButton.css';\nexport var disabledAppIconOpacity = '_1xe9ern0-3-9-1';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,yBAAyB;",
   "names": []
 }

package/esm/buttons/notify-button/NotifyButton.css

@@ -1,10 +1,10 @@
-._1j9pkom0-3-8-0 {
+._1j9pkom0-3-9-1 {
   padding-top: var(--dt-spacings-size-12, 12px);
   padding-bottom: var(--dt-spacings-size-16, 16px);
   padding-left: var(--dt-spacings-size-16, 16px);
   padding-right: var(--dt-spacings-size-16, 16px);
 }
-._1j9pkom1-3-8-0 {
+._1j9pkom1-3-9-1 {
   display: flex;
   flex-direction: column;
   gap: var(--dt-spacings-size-6, 6px);

package/esm/buttons/notify-button/NotifyButton.sty.js

@@ -1,6 +1,6 @@
 import "./NotifyButton.css";
-var overlay = "_1j9pkom0-3-8-0";
-var toast = "_1j9pkom1-3-8-0";
+var overlay = "_1j9pkom0-3-9-1";
+var toast = "_1j9pkom1-3-9-1";
 export {
   overlay,
   toast

package/esm/buttons/notify-button/NotifyButton.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/buttons/notify-button/NotifyButton.css.ts"],
-  "sourcesContent": ["import './NotifyButton.css';\nexport var overlay = '_1j9pkom0-3-8-0';\nexport var toast = '_1j9pkom1-3-8-0';"],
+  "sourcesContent": ["import './NotifyButton.css';\nexport var overlay = '_1j9pkom0-3-9-1';\nexport var toast = '_1j9pkom1-3-9-1';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,UAAU;AACd,IAAI,QAAQ;",
   "names": []
 }

package/esm/charts/categorical-bar/components/interactions/hooks/useSeriesActionClickHandler.js

@@ -1,7 +1,5 @@
 import { isLinkAction } from "../../../../core/components/series-action/utils/is-link-action.js";
-import { useSetState } from "../../../hooks/store/selectors.js";
 const useSeriesActionClickHandler = (hasMultipleItems) => {
-  const setState = useSetState();
   const multiItemsActionClickHandler = (e) => {
     if (!isLinkAction(e.target)) {
       e.preventDefault();
@@ -9,16 +7,7 @@ const useSeriesActionClickHandler = (hasMultipleItems) => {
     e.stopPropagation();
   };
   const singleItemActionClickHandler = (e) => {
-    setState((prev) => ({
-      ...prev,
-      overlays: {
-        ...prev.overlays,
-        visibleTooltip: false,
-        pinnedTooltip: false,
-        mouseInBounds: false,
-        mousePosition: void 0
-      }
-    }));
+    e.stopPropagation();
   };
   return hasMultipleItems ? multiItemsActionClickHandler : singleItemActionClickHandler;
 };

package/esm/charts/categorical-bar/components/interactions/hooks/useSeriesActionClickHandler.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/categorical-bar/components/interactions/hooks/useSeriesActionClickHandler.tsx"],
-  "sourcesContent": ["import { type MouseEvent as ReactMouseEvent } from 'react';\n\nimport { isLinkAction } from '../../../../core/components/series-action/utils/is-link-action.js';\nimport { useSetState } from '../../../hooks/store/selectors.js';\n\n/**\n * Hook responsible to return the handler called when clicking on a category action.\n * The handler will handle the logic of keeping the tooltip open in case there are\n * multiple entries in the tooltip, hiding the tooltip alternatively.\n * @param hasMultipleItems -\n */\nexport const useSeriesActionClickHandler = (hasMultipleItems: boolean) => {\n  const setState = useSetState();\n\n  const multiItemsActionClickHandler = (e: ReactMouseEvent) => {\n    if (!isLinkAction(e.target as HTMLElement)) {\n      e.preventDefault();\n    }\n    // needed to avoid the propagation of the event that in some cases\n    // introduce unexpected behaviors (e.g. unpinning tooltip)\n    e.stopPropagation();\n  };\n\n  const singleItemActionClickHandler = (e: ReactMouseEvent) => {\n    setState((prev) => ({\n      ...prev,\n      overlays: {\n        ...prev.overlays,\n        visibleTooltip: false,\n        pinnedTooltip: false,\n        mouseInBounds: false,\n        mousePosition: undefined,\n      },\n    }));\n  };\n\n  return hasMultipleItems\n    ? multiItemsActionClickHandler\n    : singleItemActionClickHandler;\n};\n"],
-  "mappings": "AAEA,SAAS,oBAAoB;AAC7B,SAAS,mBAAmB;AAQrB,MAAM,8BAA8B,CAAC,qBAA8B;AACxE,QAAM,WAAW,YAAY;AAE7B,QAAM,+BAA+B,CAAC,MAAuB;AAC3D,QAAI,CAAC,aAAa,EAAE,MAAqB,GAAG;AAC1C,QAAE,eAAe;AAAA,IACnB;AAGA,MAAE,gBAAgB;AAAA,EACpB;AAEA,QAAM,+BAA+B,CAAC,MAAuB;AAC3D,aAAS,CAAC,UAAU;AAAA,MAClB,GAAG;AAAA,MACH,UAAU;AAAA,QACR,GAAG,KAAK;AAAA,QACR,gBAAgB;AAAA,QAChB,eAAe;AAAA,QACf,eAAe;AAAA,QACf,eAAe;AAAA,MACjB;AAAA,IACF,EAAE;AAAA,EACJ;AAEA,SAAO,mBACH,+BACA;AACN;",
+  "sourcesContent": ["import { type MouseEvent as ReactMouseEvent } from 'react';\n\nimport { isLinkAction } from '../../../../core/components/series-action/utils/is-link-action.js';\n\n/**\n * Hook responsible to return the handler called when clicking on a category action.\n * When the tooltip has multiple entries, the handler keeps it open after a click.\n * In both cases it stops propagation to avoid unexpected side effects.\n * @param hasMultipleItems -\n */\nexport const useSeriesActionClickHandler = (hasMultipleItems: boolean) => {\n  const multiItemsActionClickHandler = (e: ReactMouseEvent) => {\n    if (!isLinkAction(e.target as HTMLElement)) {\n      e.preventDefault();\n    }\n    // needed to avoid the propagation of the event that in some cases\n    // introduce unexpected behaviors (e.g. unpinning tooltip)\n    e.stopPropagation();\n  };\n\n  const singleItemActionClickHandler = (e: ReactMouseEvent) => {\n    // needed to avoid the propagation of the event that in some cases\n    // introduce unexpected behaviors (e.g. re-pinning the tooltip at the\n    // click coordinates instead of leaving it pinned where it was)\n    e.stopPropagation();\n  };\n\n  return hasMultipleItems\n    ? multiItemsActionClickHandler\n    : singleItemActionClickHandler;\n};\n"],
+  "mappings": "AAEA,SAAS,oBAAoB;AAQtB,MAAM,8BAA8B,CAAC,qBAA8B;AACxE,QAAM,+BAA+B,CAAC,MAAuB;AAC3D,QAAI,CAAC,aAAa,EAAE,MAAqB,GAAG;AAC1C,QAAE,eAAe;AAAA,IACnB;AAGA,MAAE,gBAAgB;AAAA,EACpB;AAEA,QAAM,+BAA+B,CAAC,MAAuB;AAI3D,MAAE,gBAAgB;AAAA,EACpB;AAEA,SAAO,mBACH,+BACA;AACN;",
   "names": []
 }

package/esm/charts/categorical-bar/components/interactions/overlays/CategoricalBarChartInspectOverlay.css

@@ -1,9 +1,9 @@
-._1wi8enr0-3-8-0 {
+._1wi8enr0-3-9-1 {
   cursor: crosshair;
   overflow: visible;
   z-index: 1;
 }
-._1wi8enr1-3-8-0 {
+._1wi8enr1-3-9-1 {
   top: -7px;
   left: -7px;
   width: calc(100% + 14px);

package/esm/charts/categorical-bar/components/interactions/overlays/CategoricalBarChartInspectOverlay.sty.js

@@ -1,7 +1,7 @@
 import "../../../../core/components/chart-grid/ChartGrid.css";
 import "./CategoricalBarChartInspectOverlay.css";
-var crosshairLayout = "_1wi8enr0-3-8-0 _13lzg4k0-3-8-0";
-var dataPointLayout = "_1wi8enr1-3-8-0 _13lzg4k0-3-8-0";
+var crosshairLayout = "_1wi8enr0-3-9-1 _13lzg4k0-3-9-1";
+var dataPointLayout = "_1wi8enr1-3-9-1 _13lzg4k0-3-9-1";
 export {
   crosshairLayout,
   dataPointLayout

package/esm/charts/categorical-bar/components/interactions/overlays/CategoricalBarChartInspectOverlay.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/categorical-bar/components/interactions/overlays/CategoricalBarChartInspectOverlay.css.ts"],
-  "sourcesContent": ["import '../../../../core/components/chart-grid/ChartGrid.css';\nimport './CategoricalBarChartInspectOverlay.css';\nexport var crosshairLayout = '_1wi8enr0-3-8-0 _13lzg4k0-3-8-0';\nexport var dataPointLayout = '_1wi8enr1-3-8-0 _13lzg4k0-3-8-0';"],
+  "sourcesContent": ["import '../../../../core/components/chart-grid/ChartGrid.css';\nimport './CategoricalBarChartInspectOverlay.css';\nexport var crosshairLayout = '_1wi8enr0-3-9-1 _13lzg4k0-3-9-1';\nexport var dataPointLayout = '_1wi8enr1-3-9-1 _13lzg4k0-3-9-1';"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACA,IAAI,kBAAkB;AACtB,IAAI,kBAAkB;",
   "names": []
 }

package/esm/charts/categorical-bar/components/interactions/tooltip/CategoricalBarChartTooltip.js

@@ -72,6 +72,10 @@ function CategoricalBarChartTooltip({
   const actionClickHandler = useSeriesActionClickHandler(
     sortedTooltipItems.length > 1
   );
+  const handleActionClick = (event) => {
+    actionClickHandler(event);
+    updateSelectedItem("");
+  };
   const seriesActions = useTooltipSeriesActions(
     closestCategory?.dimensions,
     (dimension) => safeGet(dimensionMap, dimension).id
@@ -85,46 +89,71 @@ function CategoricalBarChartTooltip({
     (item) => item.id === closestDimensionPoint.datapoint.id
   ) : void 0;
   const bodyItems = headerItem ? sortedTooltipItems.filter((item) => item !== headerItem) : sortedTooltipItems;
-  return showTooltip ? /* @__PURE__ */ jsxs(
-    CategoricalBarChartTooltipWrapper,
-    {
-      onMouseLeave: handleMenuLeave,
-      onScrollContent: handleMenuScroll,
-      estimatedItemSize,
-      children: [
-        /* @__PURE__ */ jsx(InteractiveChartTooltip.Header, { children: hasHeader && /* @__PURE__ */ jsx(
-          CategoricalTooltipHeader,
+  const renderBodyItem = (item, index) => {
+    const isOpen = selectedItem === item.id;
+    const handleRowClickCapture = (event) => {
+      if (isOpen) {
+        return;
+      }
+      event.stopPropagation();
+      updateSelectedItem(item.id);
+    };
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        role: "none",
+        style: { pointerEvents: "auto" },
+        onClickCapture: handleRowClickCapture,
+        children: /* @__PURE__ */ jsx(
+          ChartActionsMenu,
           {
-            name: safeGet(categoryMap, closestCategory).name,
-            item: headerItem
+            isOpen,
+            actions: isOpen ? seriesActions(item) : void 0,
+            defaultActions: getDefaultAction(item),
+            ref: actionsMenuRef,
+            onActionClick: handleActionClick,
+            children: /* @__PURE__ */ jsx(
+              SeriesBasedContent,
+              {
+                item,
+                onMouseHover: () => updateSelectedItem(item.id),
+                showDivider: index !== bodyItems.length - 1,
+                truncationMode,
+                isScrolling
+              }
+            )
           }
-        ) }),
-        bodyItems && /* @__PURE__ */ jsx(InteractiveChartTooltip.Body, { children: bodyItems.map((item, index) => () => {
-          const isBodyItem = item !== headerItem;
-          const isOpen = selectedItem === item.id;
-          return isBodyItem && /* @__PURE__ */ jsx(
-            ChartActionsMenu,
-            {
-              isOpen,
-              actions: isOpen ? seriesActions(item) : void 0,
-              defaultActions: getDefaultAction(item),
-              ref: actionsMenuRef,
-              onActionClick: actionClickHandler,
-              children: /* @__PURE__ */ jsx(
-                SeriesBasedContent,
-                {
-                  item,
-                  onMouseHover: () => updateSelectedItem(item.id),
-                  showDivider: index !== bodyItems.length - 1,
-                  truncationMode,
-                  isScrolling
-                }
-              )
-            },
-            `${item.id}`
-          );
-        }) })
-      ]
+        )
+      },
+      item.id
+    );
+  };
+  return showTooltip ? /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "none",
+      onClick: (event) => event.stopPropagation(),
+      onMouseMove: (event) => event.stopPropagation(),
+      children: /* @__PURE__ */ jsxs(
+        CategoricalBarChartTooltipWrapper,
+        {
+          onMouseLeave: handleMenuLeave,
+          onScrollContent: handleMenuScroll,
+          estimatedItemSize,
+          children: [
+            /* @__PURE__ */ jsx(InteractiveChartTooltip.Header, { children: hasHeader && /* @__PURE__ */ jsx(
+              CategoricalTooltipHeader,
+              {
+                name: safeGet(categoryMap, closestCategory).name,
+                item: headerItem
+              }
+            ) }),
+            bodyItems && /* @__PURE__ */ jsx(InteractiveChartTooltip.Body, { children: bodyItems.map(
+              (item, index) => () => item !== headerItem && renderBodyItem(item, index)
+            ) })
+          ]
+        }
+      )
     }
   ) : null;
 }

package/esm/charts/categorical-bar/components/interactions/tooltip/CategoricalBarChartTooltip.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/categorical-bar/components/interactions/tooltip/CategoricalBarChartTooltip.tsx"],
-  "sourcesContent": ["/* eslint-disable @typescript-eslint/no-deprecated -- DEPRECATION: [APPDEV-17834] BREAKING-CHANGE: migrate to ChartTooltip before next major. */\nimport { useMemo } from 'react';\n\nimport {\n  getClosestCategory,\n  getSortedTooltipItems,\n} from './categorical-tooltip.js';\nimport { CategoricalBarChartTooltipWrapper } from './CategoricalBarChartTooltipWrapper.js';\nimport { ChartActionsMenu } from '../../../../core/components/series-action/ChartActionsMenu.js';\nimport { useChartActionsMenu } from '../../../../core/components/series-action/hooks/useChartActionsMenu.js';\nimport { getDefaultAction } from '../../../../core/components/series-action/hooks/useDefaultAction.js';\nimport { InteractiveChartTooltip } from '../../../../core/components/tooltip/InteractiveChartTooltip/components/InteractiveChartTooltip.js';\nimport { SeriesBasedContent } from '../../../../core/components/tooltip/InteractiveChartTooltip/contents/SeriesBasedContent.js';\nimport { CategoricalTooltipHeader } from '../../../../core/components/tooltip/InteractiveChartTooltip/headers/CategoricalTooltipHeader.js';\nimport { useSeriesBasedItemEstimatedSize } from '../../../../core/components/tooltip/InteractiveChartTooltip/hooks/useSeriesBasedItemEstimatedSize.js';\nimport { useTooltipSeriesActions } from '../../../../core/components/tooltip/shared/hooks/useTooltipSeriesActions.js';\nimport type { ChartUnit } from '../../../../core/types/chart-unit.js';\nimport { Formatter } from '../../../../core/types/formatter.js';\nimport { safeGet } from '../../../../core/utils/safe-get.js';\nimport { VARIANT_GROUPED } from '../../../constants.js';\nimport { useTooltipState } from '../../../hooks/store/selectors.js';\nimport { useCategoricalBarChartScales } from '../../../hooks/useCategoricalBarChartScales.js';\nimport { useCategoricalBarChartTooltip } from '../../../hooks/useCategoricalBarChartTooltip.js';\nimport { useCategoricalBarFilteredData } from '../../../hooks/useCategoricalBarFilteredData.js';\nimport { useTruncationMode } from '../../../hooks/useTruncationMode.js';\nimport {\n  Dimension,\n  DimensionXYPoint,\n} from '../../../types/categorical-bar-chart-data.js';\nimport { useSeriesActionClickHandler } from '../hooks/useSeriesActionClickHandler.js';\n\ninterface CategoricalBarChartTooltipProps {\n  /** Closest point to the mouse position & the x and y position of the tooltip */\n  closestDimensionPoint?: DimensionXYPoint;\n  hasHeader: boolean;\n  formatter: Formatter;\n  unit?: ChartUnit;\n}\n\n/**\n * Tooltip specific to the CategoricalBarChart.\n */\nexport function CategoricalBarChartTooltip({\n  closestDimensionPoint,\n  hasHeader,\n  formatter,\n  unit,\n}: CategoricalBarChartTooltipProps) {\n  const { visibleTooltip } = useTooltipState();\n  const { variant } = useCategoricalBarChartTooltip();\n  const truncationMode = useTruncationMode();\n  const {\n    filteredCategories: categories,\n    dimensionMap,\n    categoryMap,\n  } = useCategoricalBarFilteredData();\n  const {\n    onLeave: handleMenuLeave,\n    onScroll: handleMenuScroll,\n    selectedItem,\n    updateSelectedItem,\n    actionsMenuRef,\n    isScrolling,\n  } = useChartActionsMenu();\n  const grouped = variant === VARIANT_GROUPED;\n  const closestCategory = useMemo(\n    () => getClosestCategory(categories, dimensionMap, closestDimensionPoint),\n    [categories, dimensionMap, closestDimensionPoint],\n  );\n  const { valueScale } = useCategoricalBarChartScales();\n  const sortedTooltipItems = useMemo(\n    () =>\n      getSortedTooltipItems(\n        dimensionMap,\n        closestDimensionPoint,\n        grouped,\n        closestCategory,\n        formatter,\n        valueScale,\n        unit,\n      ),\n    [\n      dimensionMap,\n      closestDimensionPoint,\n      grouped,\n      closestCategory,\n      formatter,\n      valueScale,\n      unit,\n    ],\n  );\n\n  const actionClickHandler = useSeriesActionClickHandler(\n    sortedTooltipItems.length > 1,\n  );\n\n  const seriesActions = useTooltipSeriesActions<Dimension>(\n    closestCategory?.dimensions,\n    (dimension) => safeGet(dimensionMap, dimension).id,\n  );\n\n  const estimatedItemSize = useSeriesBasedItemEstimatedSize(\n    sortedTooltipItems,\n    'single-line',\n  );\n\n  const showTooltip = sortedTooltipItems.length && visibleTooltip;\n\n  const headerItem = hasHeader\n    ? closestDimensionPoint &&\n      sortedTooltipItems.find(\n        (item) => item.id === closestDimensionPoint.datapoint.id,\n      )\n    : undefined;\n\n  const bodyItems = headerItem\n    ? sortedTooltipItems.filter((item) => item !== headerItem)\n    : sortedTooltipItems;\n\n  return showTooltip ? (\n    <CategoricalBarChartTooltipWrapper\n      onMouseLeave={handleMenuLeave}\n      onScrollContent={handleMenuScroll}\n      estimatedItemSize={estimatedItemSize}\n    >\n      <InteractiveChartTooltip.Header>\n        {hasHeader && (\n          <CategoricalTooltipHeader\n            name={safeGet(categoryMap, closestCategory).name}\n            item={headerItem}\n          />\n        )}\n      </InteractiveChartTooltip.Header>\n      {bodyItems && (\n        <InteractiveChartTooltip.Body>\n          {bodyItems.map((item, index) => () => {\n            const isBodyItem = item !== headerItem;\n            const isOpen = selectedItem === item.id;\n            return (\n              isBodyItem && (\n                <ChartActionsMenu\n                  key={`${item.id}`}\n                  isOpen={isOpen}\n                  actions={isOpen ? seriesActions(item) : undefined}\n                  defaultActions={getDefaultAction(item)}\n                  ref={actionsMenuRef}\n                  onActionClick={actionClickHandler}\n                >\n                  <SeriesBasedContent\n                    item={item}\n                    onMouseHover={() => updateSelectedItem(item.id)}\n                    showDivider={index !== bodyItems.length - 1}\n                    truncationMode={truncationMode}\n                    isScrolling={isScrolling}\n                  />\n                </ChartActionsMenu>\n              )\n            );\n          })}\n        </InteractiveChartTooltip.Body>\n      )}\n    </CategoricalBarChartTooltipWrapper>\n  ) : null;\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["/* eslint-disable @typescript-eslint/no-deprecated -- DEPRECATION: [APPDEV-17834] BREAKING-CHANGE: migrate to ChartTooltip before next major. */\nimport { useMemo, type MouseEvent as ReactMouseEvent } from 'react';\n\nimport {\n  getClosestCategory,\n  getSortedTooltipItems,\n} from './categorical-tooltip.js';\nimport { CategoricalBarChartTooltipWrapper } from './CategoricalBarChartTooltipWrapper.js';\nimport { ChartActionsMenu } from '../../../../core/components/series-action/ChartActionsMenu.js';\nimport { useChartActionsMenu } from '../../../../core/components/series-action/hooks/useChartActionsMenu.js';\nimport { getDefaultAction } from '../../../../core/components/series-action/hooks/useDefaultAction.js';\nimport { InteractiveChartTooltip } from '../../../../core/components/tooltip/InteractiveChartTooltip/components/InteractiveChartTooltip.js';\nimport { SeriesBasedContent } from '../../../../core/components/tooltip/InteractiveChartTooltip/contents/SeriesBasedContent.js';\nimport { CategoricalTooltipHeader } from '../../../../core/components/tooltip/InteractiveChartTooltip/headers/CategoricalTooltipHeader.js';\nimport { useSeriesBasedItemEstimatedSize } from '../../../../core/components/tooltip/InteractiveChartTooltip/hooks/useSeriesBasedItemEstimatedSize.js';\nimport { useTooltipSeriesActions } from '../../../../core/components/tooltip/shared/hooks/useTooltipSeriesActions.js';\nimport type { ChartUnit } from '../../../../core/types/chart-unit.js';\nimport { Formatter } from '../../../../core/types/formatter.js';\nimport { TooltipItem } from '../../../../core/types/tooltip.js';\nimport { safeGet } from '../../../../core/utils/safe-get.js';\nimport { VARIANT_GROUPED } from '../../../constants.js';\nimport { useTooltipState } from '../../../hooks/store/selectors.js';\nimport { useCategoricalBarChartScales } from '../../../hooks/useCategoricalBarChartScales.js';\nimport { useCategoricalBarChartTooltip } from '../../../hooks/useCategoricalBarChartTooltip.js';\nimport { useCategoricalBarFilteredData } from '../../../hooks/useCategoricalBarFilteredData.js';\nimport { useTruncationMode } from '../../../hooks/useTruncationMode.js';\nimport {\n  Dimension,\n  DimensionXYPoint,\n} from '../../../types/categorical-bar-chart-data.js';\nimport { useSeriesActionClickHandler } from '../hooks/useSeriesActionClickHandler.js';\n\ninterface CategoricalBarChartTooltipProps {\n  /** Closest point to the mouse position & the x and y position of the tooltip */\n  closestDimensionPoint?: DimensionXYPoint;\n  hasHeader: boolean;\n  formatter: Formatter;\n  unit?: ChartUnit;\n}\n\n/**\n * Tooltip specific to the CategoricalBarChart.\n */\nexport function CategoricalBarChartTooltip({\n  closestDimensionPoint,\n  hasHeader,\n  formatter,\n  unit,\n}: CategoricalBarChartTooltipProps) {\n  const { visibleTooltip } = useTooltipState();\n  const { variant } = useCategoricalBarChartTooltip();\n  const truncationMode = useTruncationMode();\n  const {\n    filteredCategories: categories,\n    dimensionMap,\n    categoryMap,\n  } = useCategoricalBarFilteredData();\n  const {\n    onLeave: handleMenuLeave,\n    onScroll: handleMenuScroll,\n    selectedItem,\n    updateSelectedItem,\n    actionsMenuRef,\n    isScrolling,\n  } = useChartActionsMenu();\n  const grouped = variant === VARIANT_GROUPED;\n  const closestCategory = useMemo(\n    () => getClosestCategory(categories, dimensionMap, closestDimensionPoint),\n    [categories, dimensionMap, closestDimensionPoint],\n  );\n  const { valueScale } = useCategoricalBarChartScales();\n  const sortedTooltipItems = useMemo(\n    () =>\n      getSortedTooltipItems(\n        dimensionMap,\n        closestDimensionPoint,\n        grouped,\n        closestCategory,\n        formatter,\n        valueScale,\n        unit,\n      ),\n    [\n      dimensionMap,\n      closestDimensionPoint,\n      grouped,\n      closestCategory,\n      formatter,\n      valueScale,\n      unit,\n    ],\n  );\n\n  const actionClickHandler = useSeriesActionClickHandler(\n    sortedTooltipItems.length > 1,\n  );\n  const handleActionClick = (event: ReactMouseEvent) => {\n    actionClickHandler(event);\n    // Close this item's action menu once its action has run; the tooltip\n    // itself must stay open/pinned exactly as it was.\n    updateSelectedItem('');\n  };\n\n  const seriesActions = useTooltipSeriesActions<Dimension>(\n    closestCategory?.dimensions,\n    (dimension) => safeGet(dimensionMap, dimension).id,\n  );\n\n  const estimatedItemSize = useSeriesBasedItemEstimatedSize(\n    sortedTooltipItems,\n    'single-line',\n  );\n\n  const showTooltip = sortedTooltipItems.length && visibleTooltip;\n\n  const headerItem = hasHeader\n    ? closestDimensionPoint &&\n      sortedTooltipItems.find(\n        (item) => item.id === closestDimensionPoint.datapoint.id,\n      )\n    : undefined;\n\n  const bodyItems = headerItem\n    ? sortedTooltipItems.filter((item) => item !== headerItem)\n    : sortedTooltipItems;\n\n  const renderBodyItem = (item: TooltipItem, index: number) => {\n    const isOpen = selectedItem === item.id;\n\n    const handleRowClickCapture = (event: ReactMouseEvent<HTMLDivElement>) => {\n      if (isOpen) {\n        return;\n      }\n      // ChartActionsMenu treats any bubbled click as an executed action.\n      // Stop the opening tap/click here so it only opens the menu instead\n      // of misfiring the (not yet visible) action.\n      event.stopPropagation();\n      updateSelectedItem(item.id);\n    };\n\n    return (\n      <div\n        key={item.id}\n        role=\"none\"\n        style={{ pointerEvents: 'auto' }}\n        onClickCapture={handleRowClickCapture}\n      >\n        <ChartActionsMenu\n          isOpen={isOpen}\n          actions={isOpen ? seriesActions(item) : undefined}\n          defaultActions={getDefaultAction(item)}\n          ref={actionsMenuRef}\n          onActionClick={handleActionClick}\n        >\n          <SeriesBasedContent\n            item={item}\n            onMouseHover={() => updateSelectedItem(item.id)}\n            showDivider={index !== bodyItems.length - 1}\n            truncationMode={truncationMode}\n            isScrolling={isScrolling}\n          />\n        </ChartActionsMenu>\n      </div>\n    );\n  };\n\n  return showTooltip ? (\n    <div\n      role=\"none\"\n      onClick={(event) => event.stopPropagation()}\n      onMouseMove={(event) => event.stopPropagation()}\n    >\n      <CategoricalBarChartTooltipWrapper\n        onMouseLeave={handleMenuLeave}\n        onScrollContent={handleMenuScroll}\n        estimatedItemSize={estimatedItemSize}\n      >\n        <InteractiveChartTooltip.Header>\n          {hasHeader && (\n            <CategoricalTooltipHeader\n              name={safeGet(categoryMap, closestCategory).name}\n              item={headerItem}\n            />\n          )}\n        </InteractiveChartTooltip.Header>\n        {bodyItems && (\n          <InteractiveChartTooltip.Body>\n            {bodyItems.map(\n              (item, index) => () =>\n                item !== headerItem && renderBodyItem(item, index),\n            )}\n          </InteractiveChartTooltip.Body>\n        )}\n      </CategoricalBarChartTooltipWrapper>\n    </div>\n  ) : null;\n}\n"],
+  "mappings": "AA0JU,cAkBJ,YAlBI;AAzJV,SAAS,eAAmD;AAE5D;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,SAAS,yCAAyC;AAClD,SAAS,wBAAwB;AACjC,SAAS,2BAA2B;AACpC,SAAS,wBAAwB;AACjC,SAAS,+BAA+B;AACxC,SAAS,0BAA0B;AACnC,SAAS,gCAAgC;AACzC,SAAS,uCAAuC;AAChD,SAAS,+BAA+B;AAIxC,SAAS,eAAe;AACxB,SAAS,uBAAuB;AAChC,SAAS,uBAAuB;AAChC,SAAS,oCAAoC;AAC7C,SAAS,qCAAqC;AAC9C,SAAS,qCAAqC;AAC9C,SAAS,yBAAyB;AAKlC,SAAS,mCAAmC;AAarC,SAAS,2BAA2B;AAAA,EACzC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAoC;AAClC,QAAM,EAAE,eAAe,IAAI,gBAAgB;AAC3C,QAAM,EAAE,QAAQ,IAAI,8BAA8B;AAClD,QAAM,iBAAiB,kBAAkB;AACzC,QAAM;AAAA,IACJ,oBAAoB;AAAA,IACpB;AAAA,IACA;AAAA,EACF,IAAI,8BAA8B;AAClC,QAAM;AAAA,IACJ,SAAS;AAAA,IACT,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,oBAAoB;AACxB,QAAM,UAAU,YAAY;AAC5B,QAAM,kBAAkB;AAAA,IACtB,MAAM,mBAAmB,YAAY,cAAc,qBAAqB;AAAA,IACxE,CAAC,YAAY,cAAc,qBAAqB;AAAA,EAClD;AACA,QAAM,EAAE,WAAW,IAAI,6BAA6B;AACpD,QAAM,qBAAqB;AAAA,IACzB,MACE;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACF;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,QAAM,qBAAqB;AAAA,IACzB,mBAAmB,SAAS;AAAA,EAC9B;AACA,QAAM,oBAAoB,CAAC,UAA2B;AACpD,uBAAmB,KAAK;AAGxB,uBAAmB,EAAE;AAAA,EACvB;AAEA,QAAM,gBAAgB;AAAA,IACpB,iBAAiB;AAAA,IACjB,CAAC,cAAc,QAAQ,cAAc,SAAS,EAAE;AAAA,EAClD;AAEA,QAAM,oBAAoB;AAAA,IACxB;AAAA,IACA;AAAA,EACF;AAEA,QAAM,cAAc,mBAAmB,UAAU;AAEjD,QAAM,aAAa,YACf,yBACA,mBAAmB;AAAA,IACjB,CAAC,SAAS,KAAK,OAAO,sBAAsB,UAAU;AAAA,EACxD,IACA;AAEJ,QAAM,YAAY,aACd,mBAAmB,OAAO,CAAC,SAAS,SAAS,UAAU,IACvD;AAEJ,QAAM,iBAAiB,CAAC,MAAmB,UAAkB;AAC3D,UAAM,SAAS,iBAAiB,KAAK;AAErC,UAAM,wBAAwB,CAAC,UAA2C;AACxE,UAAI,QAAQ;AACV;AAAA,MACF;AAIA,YAAM,gBAAgB;AACtB,yBAAmB,KAAK,EAAE;AAAA,IAC5B;AAEA,WACE;AAAA,MAAC;AAAA;AAAA,QAEC,MAAK;AAAA,QACL,OAAO,EAAE,eAAe,OAAO;AAAA,QAC/B,gBAAgB;AAAA,QAEhB;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA,SAAS,SAAS,cAAc,IAAI,IAAI;AAAA,YACxC,gBAAgB,iBAAiB,IAAI;AAAA,YACrC,KAAK;AAAA,YACL,eAAe;AAAA,YAEf;AAAA,cAAC;AAAA;AAAA,gBACC;AAAA,gBACA,cAAc,MAAM,mBAAmB,KAAK,EAAE;AAAA,gBAC9C,aAAa,UAAU,UAAU,SAAS;AAAA,gBAC1C;AAAA,gBACA;AAAA;AAAA,YACF;AAAA;AAAA,QACF;AAAA;AAAA,MAnBK,KAAK;AAAA,IAoBZ;AAAA,EAEJ;AAEA,SAAO,cACL;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,SAAS,CAAC,UAAU,MAAM,gBAAgB;AAAA,MAC1C,aAAa,CAAC,UAAU,MAAM,gBAAgB;AAAA,MAE9C;AAAA,QAAC;AAAA;AAAA,UACC,cAAc;AAAA,UACd,iBAAiB;AAAA,UACjB;AAAA,UAEA;AAAA,gCAAC,wBAAwB,QAAxB,EACE,uBACC;AAAA,cAAC;AAAA;AAAA,gBACC,MAAM,QAAQ,aAAa,eAAe,EAAE;AAAA,gBAC5C,MAAM;AAAA;AAAA,YACR,GAEJ;AAAA,YACC,aACC,oBAAC,wBAAwB,MAAxB,EACE,oBAAU;AAAA,cACT,CAAC,MAAM,UAAU,MACf,SAAS,cAAc,eAAe,MAAM,KAAK;AAAA,YACrD,GACF;AAAA;AAAA;AAAA,MAEJ;AAAA;AAAA,EACF,IACE;AACN;",
   "names": []
 }

package/esm/charts/core/components/annotations/AnnotationsAtom.css

@@ -1,3 +1,3 @@
-._145zb630-3-8-0 {
+._145zb630-3-9-1 {
   position: relative;
 }

package/esm/charts/core/components/annotations/AnnotationsAtom.js

@@ -23,7 +23,8 @@ const _AnnotationsAtom = (props) => {
     width,
     children,
     showLabels = true,
-    labelsWidth = DEFAULT_LABELS_WIDTH
+    labelsWidth = DEFAULT_LABELS_WIDTH,
+    outerBottomLine = false
   } = props;
   const trackWidth = width - labelsWidth;
   const tracks = extractVisibleTracks(children);
@@ -49,7 +50,8 @@ const _AnnotationsAtom = (props) => {
           value: {
             showLabels,
             labelsWidth,
-            trackWidth
+            trackWidth,
+            outerBottomLine
           },
           children: /* @__PURE__ */ jsx(MarkersByTrackContext.Provider, { value: tracksConfig, children: /* @__PURE__ */ jsx(MarkerCoordinatesContext.Provider, { value: markersPerTrack, children: /* @__PURE__ */ jsx(MarkerEventHandlersContext.Provider, { value: markerEventHandlers, children: /* @__PURE__ */ jsx(TrackEventHandlersContext.Provider, { value: trackEventHandlers, children: /* @__PURE__ */ jsxs(CanvasSvgToImagesProvider, { icons, children: [
             /* @__PURE__ */ jsx(