@dynatrace/strato-components 3.6.0 → 3.7.0

package/esm/charts/core/components/text-ellipsis/truncate-string.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/core/components/text-ellipsis/truncate-string.ts"],
-  "sourcesContent": ["import { TruncationMode } from '../../../../typography/text-ellipsis/TextEllipsis.js';\nimport { ELLIPSIS_CHARACTER as _ELLIPSIS_CHARACTER } from '../../../../typography/utils.js';\n\n/**\n * Approximate pixel height for a single line of text.\n * Used by consumers for layout calculations; not involved in truncation logic.\n * @public\n */\nexport const TEXT_HEIGHT = 12;\n\n/**\n * Computes the pixel width of a string using a per-character width map.\n * Unknown characters fall back to the width of '\\@'.\n *\n * @param text - The string to measure.\n * @param fontWidthMap - Map of character to pixel width for the active font.\n * @returns The total width in CSS pixels.\n * @public\n */\nexport const calculateWidth = (\n  text: string,\n  fontWidthMap: Record<string, number>,\n): number => {\n  let totalWidth = 0;\n  for (const char of text) {\n    totalWidth += fontWidthMap[char] ?? fontWidthMap['@'];\n  }\n  return totalWidth;\n};\n\n/**\n * Iteratively accumulates characters produced by a generator until the available\n * capacity (availableWidth minus ellipsis width) is reached, then returns the\n * accumulated characters. This function does not apply the ellipsis; it only\n * determines what characters can be kept.\n *\n * @param availableWidth - Maximum width allowed for the final text including the ellipsis.\n * @param fontWidthMap - Map of character to pixel width for the active font.\n * @param generator - Generator that yields characters in the order they should be kept.\n * @returns The sequence of kept characters that fit within the capacity.\n * @internal\n */\nfunction accumulateUntilCapacity(\n  availableWidth: number,\n  fontWidthMap: Record<string, number>,\n  generator: Generator<string>,\n) {\n  let keptText = '';\n  let keptWidth = 0;\n  const capacity =\n    availableWidth - calculateWidth(_ELLIPSIS_CHARACTER, fontWidthMap);\n\n  for (const ch of generator) {\n    const chWidth = calculateWidth(ch, fontWidthMap);\n    if (keptWidth + chWidth > capacity) {\n      return keptText;\n    }\n    keptText += ch;\n    keptWidth += chWidth;\n  }\n\n  return keptText;\n}\n\n/**\n * Tolerance in CSS pixels for width comparisons to avoid subpixel off-by-ones\n * that cause visual clipping at the right edge.\n * @internal\n */\nconst EPSILON_PX = 0.5;\n\n/**\n * If the available width is below this threshold (considering epsilon), the function\n * returns only the ellipsis to avoid unstable truncation artifacts.\n * @internal\n */\nconst MIN_AVAILABLE_WIDTH = 19;\n\n/**\n * Controls which side of the string the middle-truncation generator starts\n * collecting characters from. 'start' keeps head characters first (e.g.\n * \"3\u2026\" for \"37%\"), 'end' keeps tail characters first (e.g. \"\u2026%\" for \"37%\").\n * Only affects the 'middle' truncation mode.\n * @public\n */\nexport type TruncationPriority = 'start' | 'end';\n\n/**\n * Produces the final truncated string by inserting an ellipsis in the appropriate\n * position for each truncation mode, based on the sequence of kept characters.\n *\n * - 'start': Places ellipsis at the beginning and reverses kept characters.\n * - 'end': Places ellipsis at the end.\n * - 'middle': Interleaves characters into head and tail based on index parity,\n *   then places the ellipsis between head and tail.\n * @internal\n */\nconst buildTruncatedOutput = {\n  start: (kept: string) => {\n    let reversed = '';\n    for (const ch of kept) {\n      reversed = ch + reversed;\n    }\n    return `${_ELLIPSIS_CHARACTER}${reversed}`;\n  },\n  end: (kept: string) => `${kept}${_ELLIPSIS_CHARACTER}`,\n  middle: (kept: string, priority: TruncationPriority) => {\n    let head = '';\n    let tail = '';\n    if (priority === 'start') {\n      for (let i = 0; i < kept.length; i++) {\n        if (i % 2 === 0) {\n          head += kept[i];\n        } else {\n          tail = kept[i] + tail;\n        }\n      }\n    } else {\n      for (let i = 0; i < kept.length; i++) {\n        if (i % 2 === 0) {\n          tail = kept[i] + tail;\n        } else {\n          head += kept[i];\n        }\n      }\n    }\n    return `${head}${_ELLIPSIS_CHARACTER}${tail}`;\n  },\n};\n\n/**\n * Character generators that yield the sequence of characters to keep for each\n * truncation mode before the ellipsis is applied.\n *\n * - 'start': Yields from end to start (tail-first).\n * - 'end': Yields from start to end (head-first).\n * - 'middle': Alternates from both ends toward the center.\n *   The `priority` parameter controls which end yields first.\n * @internal\n */\nconst keepSequenceGenerators = {\n  start: function* fromTail(text: string) {\n    for (let i = text.length - 1; i >= 0; i--) {\n      yield text[i];\n    }\n  },\n  end: function* fromHead(text: string) {\n    for (const ch of text) {\n      yield ch;\n    }\n  },\n  middle: function* fromBothEnds(text: string, priority: TruncationPriority) {\n    let left = 0;\n    let right = text.length - 1;\n    while (left < right) {\n      if (priority === 'start') {\n        yield text[left++];\n        yield text[right--];\n      } else {\n        yield text[right--];\n        yield text[left++];\n      }\n    }\n    if (left === right) {\n      yield text[left];\n    }\n  },\n};\n\n/**\n * Truncates a string to fit within the given width by placing an ellipsis at the\n * start, middle, or end, depending on the truncation mode. If the text fits, it\n * is returned unchanged. If the width is too small, returns only the ellipsis.\n *\n * Key behaviors:\n * - Uses a generator to determine which characters to keep for each mode.\n * - Accumulates characters until the capacity (availableWidth minus ellipsis width).\n * - Applies EPSILON tolerance to treat near-equal widths as fitting.\n * - Uses MIN_AVAILABLE_WIDTH to return a stable ellipsis when space is minimal.\n *\n * @param text - The input string to truncate.\n * @param availableWidth - Max allowed width in CSS pixels for the final output.\n * @param fontWidthMap - Per-character width map for the active font.\n * @param truncationMode - Where to place the ellipsis: 'start' | 'middle' | 'end'.\n * @param priority - For 'middle' mode only: 'start' keeps head characters first\n *   (e.g. \"3\u2026\"), 'end' keeps tail characters first (e.g. \"\u2026%\").\n *   Defaults to 'end' to match the legacy behavior.\n * @returns The truncated string with ellipsis applied according to the mode.\n * @public\n */\nexport const truncateString = (\n  text: string,\n  availableWidth: number,\n  fontWidthMap: Record<string, number>,\n  truncationMode: TruncationMode = 'middle',\n  priority: TruncationPriority = 'end',\n) => {\n  // The EPSILON_PX tolerance allows text that is very close to the available\n  // width to be considered as fitting, avoiding unnecessary truncation for\n  // borderline cases where subpixel differences don't cause visible overflow.\n  const fullTextWidth = calculateWidth(text, fontWidthMap);\n  const roundedAvailableWidth = Math.round(availableWidth) + EPSILON_PX;\n\n  if (fullTextWidth <= roundedAvailableWidth) {\n    return text;\n  }\n\n  if (MIN_AVAILABLE_WIDTH >= roundedAvailableWidth) {\n    return _ELLIPSIS_CHARACTER;\n  }\n\n  const keptChars = accumulateUntilCapacity(\n    availableWidth,\n    fontWidthMap,\n    truncationMode === 'middle'\n      ? keepSequenceGenerators.middle(text, priority)\n      : keepSequenceGenerators[truncationMode](text),\n  );\n\n  return truncationMode === 'middle'\n    ? buildTruncatedOutput.middle(keptChars, priority)\n    : buildTruncatedOutput[truncationMode](keptChars);\n};\n"],
-  "mappings": "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",
-  "names": []
+  "sourcesContent": ["import { TruncationMode } from '../../../../typography/text-ellipsis/TextEllipsis.js';\nimport { ELLIPSIS_CHARACTER as _ELLIPSIS_CHARACTER } from '../../../../typography/utils.js';\n\n/**\n * Approximate pixel height for a single line of text.\n * Used by consumers for layout calculations; not involved in truncation logic.\n * @public\n */\nexport const TEXT_HEIGHT = 12;\n\n/**\n * Computes the pixel width of a string using a per-character width map.\n * Unknown characters fall back to the width of '\\@'.\n *\n * @param text - The string to measure.\n * @param fontWidthMap - Map of character to pixel width for the active font.\n * @returns The total width in CSS pixels.\n * @public\n */\nexport const calculateWidth = (\n  text: string,\n  fontWidthMap: Record<string, number>,\n): number => {\n  let totalWidth = 0;\n  for (const char of text) {\n    totalWidth += fontWidthMap[char] ?? fontWidthMap['@'];\n  }\n  return totalWidth;\n};\n\n/**\n * Iteratively accumulates characters produced by a generator until the available\n * capacity (availableWidth minus ellipsis width) is reached, then returns the\n * accumulated characters. This function does not apply the ellipsis; it only\n * determines what characters can be kept.\n *\n * @param availableWidth - Maximum width allowed for the final text including the ellipsis.\n * @param fontWidthMap - Map of character to pixel width for the active font.\n * @param generator - Generator that yields characters in the order they should be kept.\n * @returns The sequence of kept characters that fit within the capacity.\n * @internal\n */\nfunction accumulateUntilCapacity(\n  availableWidth: number,\n  generator: Generator<string>,\n  measureText: (text: string) => number,\n) {\n  let keptText = '';\n  let keptWidth = 0;\n  const capacity = availableWidth - measureText(_ELLIPSIS_CHARACTER);\n\n  for (const ch of generator) {\n    const chWidth = measureText(ch);\n    if (keptWidth + chWidth > capacity) {\n      return keptText;\n    }\n    keptText += ch;\n    keptWidth += chWidth;\n  }\n\n  return keptText;\n}\n\n/**\n * Tolerance in CSS pixels for width comparisons to avoid subpixel off-by-ones\n * that cause visual clipping at the right edge.\n * @internal\n */\nconst EPSILON_PX = 0.5;\n\n/**\n * If the available width is below this threshold (considering epsilon), the function\n * returns only the ellipsis to avoid unstable truncation artifacts.\n * @internal\n */\nconst MIN_AVAILABLE_WIDTH = 19;\n\n/**\n * Controls which side of the string the middle-truncation generator starts\n * collecting characters from. 'start' keeps head characters first (e.g.\n * \"3\u2026\" for \"37%\"), 'end' keeps tail characters first (e.g. \"\u2026%\" for \"37%\").\n * Only affects the 'middle' truncation mode.\n * @public\n */\nexport type TruncationPriority = 'start' | 'end';\n\n/**\n * Produces the final truncated string by inserting an ellipsis in the appropriate\n * position for each truncation mode, based on the sequence of kept characters.\n *\n * - 'start': Places ellipsis at the beginning and reverses kept characters.\n * - 'end': Places ellipsis at the end.\n * - 'middle': Interleaves characters into head and tail based on index parity,\n *   then places the ellipsis between head and tail.\n * @internal\n */\nconst buildTruncatedOutput = {\n  start: (kept: string) => {\n    let reversed = '';\n    for (const ch of kept) {\n      reversed = ch + reversed;\n    }\n    return `${_ELLIPSIS_CHARACTER}${reversed}`;\n  },\n  end: (kept: string) => `${kept}${_ELLIPSIS_CHARACTER}`,\n  middle: (kept: string, priority: TruncationPriority) => {\n    let head = '';\n    let tail = '';\n    if (priority === 'start') {\n      for (let i = 0; i < kept.length; i++) {\n        if (i % 2 === 0) {\n          head += kept[i];\n        } else {\n          tail = kept[i] + tail;\n        }\n      }\n    } else {\n      for (let i = 0; i < kept.length; i++) {\n        if (i % 2 === 0) {\n          tail = kept[i] + tail;\n        } else {\n          head += kept[i];\n        }\n      }\n    }\n    return `${head}${_ELLIPSIS_CHARACTER}${tail}`;\n  },\n};\n\n/**\n * Character generators that yield the sequence of characters to keep for each\n * truncation mode before the ellipsis is applied.\n *\n * - 'start': Yields from end to start (tail-first).\n * - 'end': Yields from start to end (head-first).\n * - 'middle': Alternates from both ends toward the center.\n *   The `priority` parameter controls which end yields first.\n * @internal\n */\nconst keepSequenceGenerators = {\n  start: function* fromTail(text: string) {\n    for (let i = text.length - 1; i >= 0; i--) {\n      yield text[i];\n    }\n  },\n  end: function* fromHead(text: string) {\n    for (const ch of text) {\n      yield ch;\n    }\n  },\n  middle: function* fromBothEnds(text: string, priority: TruncationPriority) {\n    let left = 0;\n    let right = text.length - 1;\n    while (left < right) {\n      if (priority === 'start') {\n        yield text[left++];\n        yield text[right--];\n      } else {\n        yield text[right--];\n        yield text[left++];\n      }\n    }\n    if (left === right) {\n      yield text[left];\n    }\n  },\n};\n\n/**\n * Truncates a string to fit within the given width by placing an ellipsis at the\n * start, middle, or end, depending on the truncation mode. If the text fits, it\n * is returned unchanged. If the width is too small, returns only the ellipsis.\n *\n * Key behaviors:\n * - Uses a generator to determine which characters to keep for each mode.\n * - Accumulates characters until the capacity (availableWidth minus ellipsis width).\n * - Applies EPSILON tolerance to treat near-equal widths as fitting.\n * - Uses MIN_AVAILABLE_WIDTH to return a stable ellipsis when space is minimal.\n *\n * @param text - The input string to truncate.\n * @param availableWidth - Max allowed width in CSS pixels for the final output.\n * @param fontWidthMap - Per-character width map for the active font.\n * @param truncationMode - Where to place the ellipsis: 'start' | 'middle' | 'end'.\n * @param priority - For 'middle' mode only: 'start' keeps head characters first\n *   (e.g. \"3\u2026\"), 'end' keeps tail characters first (e.g. \"\u2026%\").\n *   Defaults to 'end' to match the legacy behavior.\n * @returns The truncated string with ellipsis applied according to the mode.\n * @public\n */\nexport const truncateString = (\n  text: string,\n  availableWidth: number,\n  fontWidthMap: Record<string, number>,\n  truncationMode: TruncationMode = 'middle',\n  priority: TruncationPriority = 'end',\n  measureText?: (text: string) => number,\n) => {\n  const measure =\n    measureText ?? ((text: string) => calculateWidth(text, fontWidthMap));\n\n  // The EPSILON_PX tolerance allows text that is very close to the available\n  // width to be considered as fitting, avoiding unnecessary truncation for\n  // borderline cases where subpixel differences don't cause visible overflow.\n  const fullTextWidth = measure(text);\n  const roundedAvailableWidth = Math.round(availableWidth) + EPSILON_PX;\n\n  if (fullTextWidth <= roundedAvailableWidth) {\n    return text;\n  }\n\n  if (MIN_AVAILABLE_WIDTH >= roundedAvailableWidth) {\n    return _ELLIPSIS_CHARACTER;\n  }\n\n  const keptChars = accumulateUntilCapacity(\n    availableWidth,\n    truncationMode === 'middle'\n      ? keepSequenceGenerators.middle(text, priority)\n      : keepSequenceGenerators[truncationMode](text),\n    measure,\n  );\n\n  return truncationMode === 'middle'\n    ? buildTruncatedOutput.middle(keptChars, priority)\n    : buildTruncatedOutput[truncationMode](keptChars);\n};\n"],
+  "mappings": "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",
+  "names": ["text"]
 }

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

@@ -1,31 +1,31 @@
-._18heesa0-3-6-0 {
+._18heesa0-3-7-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-6-0 {
+._18heesa1-3-7-0 {
   border-right: var(--dt-borders-width-default, 1px) var(--dt-borders-style-default, solid) var(--dt-colors-border-neutral-default, #dadbe4);
 }
-._18heesa2-3-6-0 {
+._18heesa2-3-7-0 {
   border-left: var(--dt-borders-width-default, 1px) var(--dt-borders-style-default, solid) var(--dt-colors-border-neutral-default, #dadbe4);
 }
-._18heesa3-3-6-0 {
+._18heesa3-3-7-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-6-0 {
+._18heesa4-3-7-0 {
   transform: scaleX(-1) translateX(-100%);
 }
-._18heesa5-3-6-0 {
+._18heesa5-3-7-0 {
   transform: none;
 }
-._18heesa6-3-6-0 {
+._18heesa6-3-7-0 {
   transform: rotate(-90deg) scaleX(-1);
 }
-._18heesa7-3-6-0 {
+._18heesa7-3-7-0 {
   transform: rotate(-90deg) translateX(-100%);
 }
-._18heesa8-3-6-0 {
+._18heesa8-3-7-0 {
   overflow: hidden;
 }

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

@@ -1,7 +1,7 @@
 import "./styles.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var bodyOverflowOverwrite = "_18heesa8-3-6-0";
-var wrapper = _7a468({ defaultClassName: "_18heesa0-3-6-0", variantClassNames: { borderArea: { bothBorders: "_18heesa1-3-6-0", leftBorder: "_18heesa2-3-6-0", rightBorder: "_18heesa3-3-6-0" }, layoutType: { "vertical-flip": "_18heesa4-3-6-0", "vertical-no-flip": "_18heesa5-3-6-0", "horizontal-flip": "_18heesa6-3-6-0", "horizontal-no-flip": "_18heesa7-3-6-0" } }, defaultVariants: {}, compoundVariants: [] });
+var bodyOverflowOverwrite = "_18heesa8-3-7-0";
+var wrapper = _7a468({ defaultClassName: "_18heesa0-3-7-0", variantClassNames: { borderArea: { bothBorders: "_18heesa1-3-7-0", leftBorder: "_18heesa2-3-7-0", rightBorder: "_18heesa3-3-7-0" }, layoutType: { "vertical-flip": "_18heesa4-3-7-0", "vertical-no-flip": "_18heesa5-3-7-0", "horizontal-flip": "_18heesa6-3-7-0", "horizontal-no-flip": "_18heesa7-3-7-0" } }, defaultVariants: {}, compoundVariants: [] });
 export {
   bodyOverflowOverwrite,
   wrapper

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/core/components/threshold-bar/styles.css.ts"],
-  "sourcesContent": ["import './styles.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var bodyOverflowOverwrite = '_18heesa8-3-6-0';\nexport var wrapper = _7a468({defaultClassName:'_18heesa0-3-6-0',variantClassNames:{borderArea:{bothBorders:'_18heesa1-3-6-0',leftBorder:'_18heesa2-3-6-0',rightBorder:'_18heesa3-3-6-0'},layoutType:{'vertical-flip':'_18heesa4-3-6-0','vertical-no-flip':'_18heesa5-3-6-0','horizontal-flip':'_18heesa6-3-6-0','horizontal-no-flip':'_18heesa7-3-6-0'}},defaultVariants:{},compoundVariants:[]});"],
+  "sourcesContent": ["import './styles.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var bodyOverflowOverwrite = '_18heesa8-3-7-0';\nexport var wrapper = _7a468({defaultClassName:'_18heesa0-3-7-0',variantClassNames:{borderArea:{bothBorders:'_18heesa1-3-7-0',leftBorder:'_18heesa2-3-7-0',rightBorder:'_18heesa3-3-7-0'},layoutType:{'vertical-flip':'_18heesa4-3-7-0','vertical-no-flip':'_18heesa5-3-7-0','horizontal-flip':'_18heesa6-3-7-0','horizontal-no-flip':'_18heesa7-3-7-0'}},defaultVariants:{},compoundVariants:[]});"],
   "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,wBAAwB;AAC5B,IAAI,UAAU,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,YAAW,EAAC,aAAY,mBAAkB,YAAW,mBAAkB,aAAY,kBAAiB,GAAE,YAAW,EAAC,iBAAgB,mBAAkB,oBAAmB,mBAAkB,mBAAkB,mBAAkB,sBAAqB,kBAAiB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;",
   "names": []
 }

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

@@ -1,58 +1,60 @@
-._1x31hou0-3-6-0 {
+._1x31hou0-3-7-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);
   width: fit-content;
   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-6-0 {
+._1x31hou1-3-7-0 {
   visibility: visible;
 }
-._1x31hou2-3-6-0 {
+._1x31hou2-3-7-0 {
   visibility: hidden;
 }
-._1x31hou3-3-6-0 {
+._1x31hou3-3-7-0 {
   padding: 0;
   box-shadow: none;
   margin-left: var(--dt-spacings-size-4, 4px);
 }
-._1x31hou4-3-6-0 {
+._1x31hou4-3-7-0 {
   background-color: transparent;
   cursor: grab;
+  touch-action: none;
 }
-._1x31hou5-3-6-0 {
+._1x31hou5-3-7-0 {
   pointer-events: auto;
 }
-._1x31hou6-3-6-0 {
+._1x31hou6-3-7-0 {
   position: relative;
 }
-._1x31hou7-3-6-0 {
+._1x31hou7-3-7-0 {
   position: absolute;
 }
-body[data-scroll-locked] ._1x31hou8-3-6-0 * {
+body[data-scroll-locked] ._1x31hou8-3-7-0 * {
   pointer-events: none;
 }
-body[data-scroll-locked] ._1x31hou8-3-6-0 button[aria-expanded="true"] {
+body[data-scroll-locked] ._1x31hou8-3-7-0 button[aria-expanded="true"] {
   pointer-events: all;
 }
-._1x31hou9-3-6-0 {
+._1x31hou9-3-7-0 {
   pointer-events: none;
 }
-._1x31houa-3-6-0 {
+._1x31houa-3-7-0 {
   position: relative;
 }
-._1x31houb-3-6-0 {
+._1x31houb-3-7-0 {
   position: absolute;
 }
-._1x31houc-3-6-0 {
+._1x31houc-3-7-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-6-0 {
+._1x31houd-3-7-0 {
   margin: 0 var(--dt-spacings-size-4, 4px);
 }
-._1x31houe-3-6-0 {
+._1x31houe-3-7-0 {
   margin: var(--dt-spacings-size-4, 4px) 0;
 }

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

@@ -306,7 +306,11 @@ const InternalChartToolbarRenderer = (props) => {
                       "div",
                       {
                         "data-testid": "toolbar-children",
-                        style: { display: "flex", alignItems: "center" },
+                        style: {
+                          display: "flex",
+                          alignItems: "center",
+                          touchAction: "none"
+                        },
                         ref: draggable && removeDragHandle ? triggerDragRef : void 0,
                         children: [
                           shouldShowMenu && /* @__PURE__ */ jsx(ChartToolbarContext.Provider, { value: toolbarMenuConfig, children: /* @__PURE__ */ jsxs(

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/core/components/toolbar/ChartToolbarRenderer.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  type FocusEvent as ReactFocusEvent,\n  type KeyboardEvent as ReactKeyboardEvent,\n  type MouseEvent as ReactMouseEvent,\n  type PropsWithChildren,\n  type RefObject,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { useIntl } from 'react-intl';\n\nimport {\n  ChevronRightDoubleIcon,\n  DragAllDirectionIcon,\n} from '@dynatrace/strato-icons';\n\nimport {\n  chartToolbar,\n  chartToolbarArea,\n  defaultOverlayPadding,\n  grip,\n  outerContainer,\n} from './ChartToolbarRenderer.sty.js';\nimport { ChartToolbarVisibilityOverlay } from './ChartToolbarVisibilityOverlay.js';\nimport { CollapseButton } from './CollapseButton.js';\nimport { ChartDataMenu } from './components/ChartDataMenu.js';\nimport { Control } from './components/Control.js';\nimport { HorizontalDivider, VerticalDivider } from './components/divider.js';\nimport { IntentsCollapsedAndDownloadSection } from './components/IntentsCollapsedAndDownloadSection.js';\nimport { ToolbarMenu } from './components/ToolbarMenu.js';\nimport { TOOLBAR_DRAG_BUTTON_ARIA_LABEL } from './constants.js';\nimport {\n  ChartToolbarContext,\n  type ChartToolbarContextProps,\n} from './context/ChartToolbar.context.js';\nimport { useToolbar } from './hooks/useToolbar.js';\nimport { TOOLBAR_MESSAGES } from './messages.js';\nimport type { ChartToolbarRendererProps } from './types.js';\nimport { doesFitInBounds } from './utils/does-fit-in-bounds.js';\nimport { estimateToolbarWidth } from './utils/estimate-toolbar-width.js';\nimport { getToolbarPlacement } from './utils/get-toolbar-placement.js';\nimport { Button } from '../../../../buttons/button/Button.js';\nimport { useBehavioralTrackingProps as _useBehavioralTrackingProps } from '../../../../core/hooks/useBehavioralTrackingProps.js';\nimport { useMergeRefs } from '../../../../core/hooks/useMergeRefs.js';\nimport { Flex } from '../../../../layouts/flex/Flex.js';\nimport { Tooltip } from '../../../../overlays/tooltip/Tooltip.js';\nimport { A11yToolbarTabIndexContext } from '../../context/A11yToolbarTabIndexContext.js';\nimport { useA11yToolbarControls } from '../../hooks/useA11yToolbarControls.js';\nimport { useDragElement } from '../../hooks/useDragElement.js';\nimport { useObserveContainerSize } from '../../hooks/useObserveContainerSize.js';\nimport { getDraggableBounds } from '../../utils/get-draggable-bounds.js';\nimport { INTERACTION_MODE } from '../interactions-overlay/types.js';\n\n/**\n * @internal\n */\nexport const InternalChartToolbarRenderer = (\n  props: PropsWithChildren<ChartToolbarRendererProps>,\n) => {\n  const [\n    behaviorTrackingProps,\n    {\n      children,\n      visible,\n      placement,\n      collapsed = false,\n      draggable = true,\n      removeDragHandle = false,\n      initialA11yState,\n      zIndex,\n      onToggleToolbar,\n      onToggleMenu,\n      onMouseEnter,\n      onMouseLeave,\n      menuIcon,\n      menuTriggerLabel,\n      menuDisplayMode = 'collapsed',\n      onClose,\n      isDownloadEnabled = false,\n      intents,\n      handleDownloadDataToolbar,\n      toolbarDisplayMode = 'overlay',\n      visibleWhenMouseInBounds = false,\n      overlayClassName = defaultOverlayPadding,\n      intentsAsyncTemplate,\n      handlerRef,\n    },\n  ] = _useBehavioralTrackingProps(props);\n\n  const {\n    isExpanded,\n    lastItemSelected,\n    updateLastItemSelected,\n    toggleExpanded,\n    isCollapsable,\n    fitsBounds,\n    updateFitsBounds,\n    shouldShowMenu,\n  } = useToolbar(collapsed, menuDisplayMode);\n  const isInlineMode = toolbarDisplayMode === 'inline';\n  const [isMenuOpen, setIsMenuOpen] = useState<boolean | void>(undefined);\n  const [toolbarElement, setToolbarElement] = useState<HTMLDivElement>();\n\n  const [boundSize, boundRef] = useObserveContainerSize();\n  const [toolbarSize, toolbarRefCallback] = useObserveContainerSize();\n  const intl = useIntl();\n  const mouseInBounds = useRef(false);\n\n  const [isVisible, setIsVisible] = useState(false);\n\n  const toolbarElementRef = useCallback((toolbarElement: HTMLDivElement) => {\n    setToolbarElement(toolbarElement);\n  }, []);\n\n  const toolbarRef = useMergeRefs([toolbarRefCallback, toolbarElementRef]);\n\n  const { a11yControlsValue, setKeyEvent, setActiveControl } =\n    useA11yToolbarControls(initialA11yState);\n\n  const maxBounds = useMemo(\n    () => getDraggableBounds(toolbarSize, boundSize),\n    [toolbarSize, boundSize],\n  );\n\n  useEffect(() => {\n    updateFitsBounds(\n      doesFitInBounds(estimateToolbarWidth(children), boundSize),\n    );\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [children, boundSize]);\n\n  useEffect(() => {\n    toggleExpanded(fitsBounds && !collapsed);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [collapsed, fitsBounds]);\n\n  const initialPosition = getToolbarPlacement(placement, maxBounds);\n\n  const { isDragging, triggerDragRef, didDrag, setDidDrag } = useDragElement(\n    toolbarElement,\n    maxBounds,\n    initialPosition,\n  );\n\n  const expandHandler = useCallback(\n    (isExpanded: boolean) => {\n      toggleExpanded(isExpanded);\n      onToggleToolbar?.(isExpanded);\n    },\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [onToggleToolbar],\n  );\n\n  const handleToggleMenu = (open: boolean) => {\n    if (!open) {\n      if (!mouseInBounds.current) {\n        onMouseLeave?.();\n      } else {\n        onMouseEnter?.();\n      }\n    }\n\n    setIsMenuOpen(open);\n    onToggleMenu?.(open);\n  };\n\n  const collapseButton = useMemo(\n    () =>\n      Array.isArray(children) && (\n        <CollapseButton\n          onClick={(isExpanded: boolean) => {\n            expandHandler(isExpanded);\n            setActiveControl('explore');\n          }}\n        />\n      ),\n    [children, expandHandler, setActiveControl],\n  );\n\n  const expandButton = useMemo(\n    () => (\n      <Control\n        prefixIcon={<ChevronRightDoubleIcon />}\n        tooltipText={intl.formatMessage(TOOLBAR_MESSAGES.chartToolbarExpand)}\n        onClick={() => expandHandler(true)}\n        tabIndex={-1}\n        testId=\"toolbar-expand-button\"\n        data-dt-name=\"ToolbarExpand\"\n      />\n    ),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [expandHandler],\n  );\n\n  const onMouseEnterHandler = () => {\n    mouseInBounds.current = true;\n    onMouseEnter?.();\n  };\n\n  const onMouseLeaveHandler = (event: ReactMouseEvent) => {\n    event.stopPropagation();\n    mouseInBounds.current = false;\n    onMouseLeave?.();\n  };\n\n  const handleOnMenuEnter = () => {\n    mouseInBounds.current = false;\n  };\n\n  const handleOnMenuLeave = () => {\n    mouseInBounds.current = true;\n  };\n\n  const onCloseAutoFocus = (e: Event) => {\n    if (\n      ((lastItemSelected === INTERACTION_MODE.Explore && onClose) ||\n        lastItemSelected === INTERACTION_MODE.Zoom) &&\n      onClose\n    ) {\n      // Prevent the autofocus from focusing back on the menu trigger after closing the menu\n      e.preventDefault();\n      onClose();\n      updateLastItemSelected(undefined);\n    }\n  };\n\n  const handleResetDidDrag = useCallback(() => {\n    setDidDrag(false);\n  }, [setDidDrag]);\n  const showCollapsedIntentAndDownloadSubmenu =\n    (!isExpanded || !fitsBounds) && (!!intents?.length || isDownloadEnabled);\n  const showExpandButton = !isExpanded && fitsBounds;\n  const showCollapseButton = isExpanded && isCollapsable;\n  const showIntentMenu =\n    isExpanded && fitsBounds && !!(intents?.length || intentsAsyncTemplate);\n\n  const toolbarMenuConfig = useMemo<ChartToolbarContextProps>(\n    () => ({\n      isMenuElement: true,\n      isExpanded,\n      lastItemSelected,\n      updateLastItemSelected,\n    }),\n    [isExpanded, lastItemSelected, updateLastItemSelected],\n  );\n\n  const intentsMenuConfig = useMemo<ChartToolbarContextProps>(\n    () => ({\n      isMenuElement: false,\n      isExpanded,\n      lastItemSelected,\n      didDrag,\n      resetDidDrag: handleResetDidDrag,\n      updateLastItemSelected,\n    }),\n    [\n      isExpanded,\n      lastItemSelected,\n      didDrag,\n      handleResetDidDrag,\n      updateLastItemSelected,\n    ],\n  );\n\n  const handleKeyDown = (event: ReactKeyboardEvent) => {\n    if (event.target === triggerDragRef.current && event.code !== 'Tab') {\n      event.stopPropagation();\n      event.preventDefault();\n      return;\n    }\n\n    if (event.code === 'ArrowLeft' || event.code === 'ArrowRight') {\n      event.stopPropagation();\n      setKeyEvent(event);\n    }\n\n    if (event.code === 'Enter') {\n      event.stopPropagation();\n    }\n  };\n\n  const handleOnBlur = (event: ReactFocusEvent) => {\n    event.stopPropagation();\n  };\n\n  return (\n    <ChartToolbarVisibilityOverlay\n      handlerRef={handlerRef}\n      boundSize={boundSize}\n      setIsVisible={setIsVisible}\n      visibleWhenMouseInBounds={visibleWhenMouseInBounds}\n      isVisible={isVisible}\n    >\n      <div\n        className={clsx(\n          chartToolbarArea({\n            inline: isInlineMode,\n          }),\n          overlayClassName,\n        )}\n        data-testid=\"chart-plot-overlay-toolbar\"\n        ref={boundRef}\n        style={{ zIndex }}\n      >\n        <div\n          className={chartToolbar({ inline: isInlineMode })}\n          id=\"chart-toolbar\"\n          ref={toolbarRef}\n          role=\"toolbar\"\n          data-testid=\"chart-toolbar-container\"\n          onBlur={handleOnBlur}\n          onKeyDown={handleKeyDown}\n          onMouseEnter={onMouseEnterHandler}\n          onMouseLeave={onMouseLeaveHandler}\n          {...behaviorTrackingProps}\n        >\n          <A11yToolbarTabIndexContext.Provider value={a11yControlsValue}>\n            <div\n              className={outerContainer({\n                visible:\n                  visible ||\n                  isMenuOpen ||\n                  isDragging ||\n                  (visibleWhenMouseInBounds && isVisible),\n                inline: isInlineMode,\n              })}\n              data-testid=\"chart-toolbar-wrapper\"\n            >\n              <Flex gap={0} flexDirection=\"row\" alignItems=\"center\">\n                {draggable &&\n                  !removeDragHandle && [\n                    <Tooltip\n                      text={intl.formatMessage(\n                        TOOLBAR_MESSAGES.chartToolbarMove,\n                      )}\n                      disabled={isDragging}\n                      key=\"tooltip\"\n                    >\n                      <Button\n                        className={grip}\n                        ref={triggerDragRef as RefObject<HTMLButtonElement>}\n                        variant=\"default\"\n                        size=\"condensed\"\n                        data-testid=\"chart-toolbar-grip\"\n                        aria-label={TOOLBAR_DRAG_BUTTON_ARIA_LABEL}\n                      >\n                        <Button.Prefix>\n                          <DragAllDirectionIcon />\n                        </Button.Prefix>\n                      </Button>\n                    </Tooltip>,\n                    <VerticalDivider key=\"divider\" />,\n                  ]}\n                <div\n                  data-testid=\"toolbar-children\"\n                  style={{ display: 'flex', alignItems: 'center' }}\n                  ref={\n                    draggable && removeDragHandle\n                      ? (triggerDragRef as RefObject<HTMLDivElement>)\n                      : undefined\n                  }\n                >\n                  {shouldShowMenu && (\n                    <ChartToolbarContext.Provider value={toolbarMenuConfig}>\n                      <ToolbarMenu\n                        onMenuOpen={handleToggleMenu}\n                        activeModeIcon={menuIcon}\n                        triggerLabel={menuTriggerLabel}\n                        onMenuEnter={handleOnMenuEnter}\n                        onMenuLeave={handleOnMenuLeave}\n                        menuAlignment={isExpanded ? 'start' : 'end'}\n                        onCloseAutoFocus={onCloseAutoFocus}\n                        data-dt-name=\"ToolbarTools\"\n                        data-dt-properties={\n                          isExpanded && fitsBounds\n                            ? 'state:changeMode'\n                            : 'state:tools'\n                        }\n                      >\n                        {children}\n                        <IntentsCollapsedAndDownloadSection\n                          hidden={!showCollapsedIntentAndDownloadSubmenu}\n                          intents={intents}\n                          showDownloadButton={isDownloadEnabled}\n                          handleDownloadDataToolbar={handleDownloadDataToolbar}\n                        />\n                        {showExpandButton && (\n                          <>\n                            <HorizontalDivider />\n                            {expandButton}\n                          </>\n                        )}\n                      </ToolbarMenu>\n                    </ChartToolbarContext.Provider>\n                  )}\n                  <ChartToolbarContext.Provider value={intentsMenuConfig}>\n                    {children}\n                    {showIntentMenu && (\n                      <ChartDataMenu\n                        onMenuOpen={handleToggleMenu}\n                        onMenuEnter={handleOnMenuEnter}\n                        onMenuLeave={handleOnMenuLeave}\n                        isDownloadEnabled={isDownloadEnabled}\n                        handleDownloadDataToolbar={handleDownloadDataToolbar}\n                        intents={intents}\n                        showDivider={!!menuIcon}\n                        isDragging={isDragging}\n                        buttonMode={isInlineMode ? 'inline' : 'standard'}\n                        intentsAsyncTemplate={intentsAsyncTemplate}\n                      />\n                    )}\n                  </ChartToolbarContext.Provider>\n                  {showCollapseButton && collapseButton}\n                </div>\n              </Flex>\n            </div>\n          </A11yToolbarTabIndexContext.Provider>\n        </div>\n      </div>\n    </ChartToolbarVisibilityOverlay>\n  );\n};\n\nInternalChartToolbarRenderer['displayName'] = 'ChartToolbarRenderer';\n\n/**\n * @internal\n */\nexport const ChartToolbarRenderer = Object.assign(\n  InternalChartToolbarRenderer,\n  {\n    Control,\n  },\n);\n"],
-  "mappings": "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",
+  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  type FocusEvent as ReactFocusEvent,\n  type KeyboardEvent as ReactKeyboardEvent,\n  type MouseEvent as ReactMouseEvent,\n  type PropsWithChildren,\n  type RefObject,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { useIntl } from 'react-intl';\n\nimport {\n  ChevronRightDoubleIcon,\n  DragAllDirectionIcon,\n} from '@dynatrace/strato-icons';\n\nimport {\n  chartToolbar,\n  chartToolbarArea,\n  defaultOverlayPadding,\n  grip,\n  outerContainer,\n} from './ChartToolbarRenderer.sty.js';\nimport { ChartToolbarVisibilityOverlay } from './ChartToolbarVisibilityOverlay.js';\nimport { CollapseButton } from './CollapseButton.js';\nimport { ChartDataMenu } from './components/ChartDataMenu.js';\nimport { Control } from './components/Control.js';\nimport { HorizontalDivider, VerticalDivider } from './components/divider.js';\nimport { IntentsCollapsedAndDownloadSection } from './components/IntentsCollapsedAndDownloadSection.js';\nimport { ToolbarMenu } from './components/ToolbarMenu.js';\nimport { TOOLBAR_DRAG_BUTTON_ARIA_LABEL } from './constants.js';\nimport {\n  ChartToolbarContext,\n  type ChartToolbarContextProps,\n} from './context/ChartToolbar.context.js';\nimport { useToolbar } from './hooks/useToolbar.js';\nimport { TOOLBAR_MESSAGES } from './messages.js';\nimport type { ChartToolbarRendererProps } from './types.js';\nimport { doesFitInBounds } from './utils/does-fit-in-bounds.js';\nimport { estimateToolbarWidth } from './utils/estimate-toolbar-width.js';\nimport { getToolbarPlacement } from './utils/get-toolbar-placement.js';\nimport { Button } from '../../../../buttons/button/Button.js';\nimport { useBehavioralTrackingProps as _useBehavioralTrackingProps } from '../../../../core/hooks/useBehavioralTrackingProps.js';\nimport { useMergeRefs } from '../../../../core/hooks/useMergeRefs.js';\nimport { Flex } from '../../../../layouts/flex/Flex.js';\nimport { Tooltip } from '../../../../overlays/tooltip/Tooltip.js';\nimport { A11yToolbarTabIndexContext } from '../../context/A11yToolbarTabIndexContext.js';\nimport { useA11yToolbarControls } from '../../hooks/useA11yToolbarControls.js';\nimport { useDragElement } from '../../hooks/useDragElement.js';\nimport { useObserveContainerSize } from '../../hooks/useObserveContainerSize.js';\nimport { getDraggableBounds } from '../../utils/get-draggable-bounds.js';\nimport { INTERACTION_MODE } from '../interactions-overlay/types.js';\n\n/**\n * @internal\n */\nexport const InternalChartToolbarRenderer = (\n  props: PropsWithChildren<ChartToolbarRendererProps>,\n) => {\n  const [\n    behaviorTrackingProps,\n    {\n      children,\n      visible,\n      placement,\n      collapsed = false,\n      draggable = true,\n      removeDragHandle = false,\n      initialA11yState,\n      zIndex,\n      onToggleToolbar,\n      onToggleMenu,\n      onMouseEnter,\n      onMouseLeave,\n      menuIcon,\n      menuTriggerLabel,\n      menuDisplayMode = 'collapsed',\n      onClose,\n      isDownloadEnabled = false,\n      intents,\n      handleDownloadDataToolbar,\n      toolbarDisplayMode = 'overlay',\n      visibleWhenMouseInBounds = false,\n      overlayClassName = defaultOverlayPadding,\n      intentsAsyncTemplate,\n      handlerRef,\n    },\n  ] = _useBehavioralTrackingProps(props);\n\n  const {\n    isExpanded,\n    lastItemSelected,\n    updateLastItemSelected,\n    toggleExpanded,\n    isCollapsable,\n    fitsBounds,\n    updateFitsBounds,\n    shouldShowMenu,\n  } = useToolbar(collapsed, menuDisplayMode);\n  const isInlineMode = toolbarDisplayMode === 'inline';\n  const [isMenuOpen, setIsMenuOpen] = useState<boolean | void>(undefined);\n  const [toolbarElement, setToolbarElement] = useState<HTMLDivElement>();\n\n  const [boundSize, boundRef] = useObserveContainerSize();\n  const [toolbarSize, toolbarRefCallback] = useObserveContainerSize();\n  const intl = useIntl();\n  const mouseInBounds = useRef(false);\n\n  const [isVisible, setIsVisible] = useState(false);\n\n  const toolbarElementRef = useCallback((toolbarElement: HTMLDivElement) => {\n    setToolbarElement(toolbarElement);\n  }, []);\n\n  const toolbarRef = useMergeRefs([toolbarRefCallback, toolbarElementRef]);\n\n  const { a11yControlsValue, setKeyEvent, setActiveControl } =\n    useA11yToolbarControls(initialA11yState);\n\n  const maxBounds = useMemo(\n    () => getDraggableBounds(toolbarSize, boundSize),\n    [toolbarSize, boundSize],\n  );\n\n  useEffect(() => {\n    updateFitsBounds(\n      doesFitInBounds(estimateToolbarWidth(children), boundSize),\n    );\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [children, boundSize]);\n\n  useEffect(() => {\n    toggleExpanded(fitsBounds && !collapsed);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [collapsed, fitsBounds]);\n\n  const initialPosition = getToolbarPlacement(placement, maxBounds);\n\n  const { isDragging, triggerDragRef, didDrag, setDidDrag } = useDragElement(\n    toolbarElement,\n    maxBounds,\n    initialPosition,\n  );\n\n  const expandHandler = useCallback(\n    (isExpanded: boolean) => {\n      toggleExpanded(isExpanded);\n      onToggleToolbar?.(isExpanded);\n    },\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [onToggleToolbar],\n  );\n\n  const handleToggleMenu = (open: boolean) => {\n    if (!open) {\n      if (!mouseInBounds.current) {\n        onMouseLeave?.();\n      } else {\n        onMouseEnter?.();\n      }\n    }\n\n    setIsMenuOpen(open);\n    onToggleMenu?.(open);\n  };\n\n  const collapseButton = useMemo(\n    () =>\n      Array.isArray(children) && (\n        <CollapseButton\n          onClick={(isExpanded: boolean) => {\n            expandHandler(isExpanded);\n            setActiveControl('explore');\n          }}\n        />\n      ),\n    [children, expandHandler, setActiveControl],\n  );\n\n  const expandButton = useMemo(\n    () => (\n      <Control\n        prefixIcon={<ChevronRightDoubleIcon />}\n        tooltipText={intl.formatMessage(TOOLBAR_MESSAGES.chartToolbarExpand)}\n        onClick={() => expandHandler(true)}\n        tabIndex={-1}\n        testId=\"toolbar-expand-button\"\n        data-dt-name=\"ToolbarExpand\"\n      />\n    ),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [expandHandler],\n  );\n\n  const onMouseEnterHandler = () => {\n    mouseInBounds.current = true;\n    onMouseEnter?.();\n  };\n\n  const onMouseLeaveHandler = (event: ReactMouseEvent) => {\n    event.stopPropagation();\n    mouseInBounds.current = false;\n    onMouseLeave?.();\n  };\n\n  const handleOnMenuEnter = () => {\n    mouseInBounds.current = false;\n  };\n\n  const handleOnMenuLeave = () => {\n    mouseInBounds.current = true;\n  };\n\n  const onCloseAutoFocus = (e: Event) => {\n    if (\n      ((lastItemSelected === INTERACTION_MODE.Explore && onClose) ||\n        lastItemSelected === INTERACTION_MODE.Zoom) &&\n      onClose\n    ) {\n      // Prevent the autofocus from focusing back on the menu trigger after closing the menu\n      e.preventDefault();\n      onClose();\n      updateLastItemSelected(undefined);\n    }\n  };\n\n  const handleResetDidDrag = useCallback(() => {\n    setDidDrag(false);\n  }, [setDidDrag]);\n  const showCollapsedIntentAndDownloadSubmenu =\n    (!isExpanded || !fitsBounds) && (!!intents?.length || isDownloadEnabled);\n  const showExpandButton = !isExpanded && fitsBounds;\n  const showCollapseButton = isExpanded && isCollapsable;\n  const showIntentMenu =\n    isExpanded && fitsBounds && !!(intents?.length || intentsAsyncTemplate);\n\n  const toolbarMenuConfig = useMemo<ChartToolbarContextProps>(\n    () => ({\n      isMenuElement: true,\n      isExpanded,\n      lastItemSelected,\n      updateLastItemSelected,\n    }),\n    [isExpanded, lastItemSelected, updateLastItemSelected],\n  );\n\n  const intentsMenuConfig = useMemo<ChartToolbarContextProps>(\n    () => ({\n      isMenuElement: false,\n      isExpanded,\n      lastItemSelected,\n      didDrag,\n      resetDidDrag: handleResetDidDrag,\n      updateLastItemSelected,\n    }),\n    [\n      isExpanded,\n      lastItemSelected,\n      didDrag,\n      handleResetDidDrag,\n      updateLastItemSelected,\n    ],\n  );\n\n  const handleKeyDown = (event: ReactKeyboardEvent) => {\n    if (event.target === triggerDragRef.current && event.code !== 'Tab') {\n      event.stopPropagation();\n      event.preventDefault();\n      return;\n    }\n\n    if (event.code === 'ArrowLeft' || event.code === 'ArrowRight') {\n      event.stopPropagation();\n      setKeyEvent(event);\n    }\n\n    if (event.code === 'Enter') {\n      event.stopPropagation();\n    }\n  };\n\n  const handleOnBlur = (event: ReactFocusEvent) => {\n    event.stopPropagation();\n  };\n\n  return (\n    <ChartToolbarVisibilityOverlay\n      handlerRef={handlerRef}\n      boundSize={boundSize}\n      setIsVisible={setIsVisible}\n      visibleWhenMouseInBounds={visibleWhenMouseInBounds}\n      isVisible={isVisible}\n    >\n      <div\n        className={clsx(\n          chartToolbarArea({\n            inline: isInlineMode,\n          }),\n          overlayClassName,\n        )}\n        data-testid=\"chart-plot-overlay-toolbar\"\n        ref={boundRef}\n        style={{ zIndex }}\n      >\n        <div\n          className={chartToolbar({ inline: isInlineMode })}\n          id=\"chart-toolbar\"\n          ref={toolbarRef}\n          role=\"toolbar\"\n          data-testid=\"chart-toolbar-container\"\n          onBlur={handleOnBlur}\n          onKeyDown={handleKeyDown}\n          onMouseEnter={onMouseEnterHandler}\n          onMouseLeave={onMouseLeaveHandler}\n          {...behaviorTrackingProps}\n        >\n          <A11yToolbarTabIndexContext.Provider value={a11yControlsValue}>\n            <div\n              className={outerContainer({\n                visible:\n                  visible ||\n                  isMenuOpen ||\n                  isDragging ||\n                  (visibleWhenMouseInBounds && isVisible),\n                inline: isInlineMode,\n              })}\n              data-testid=\"chart-toolbar-wrapper\"\n            >\n              <Flex gap={0} flexDirection=\"row\" alignItems=\"center\">\n                {draggable &&\n                  !removeDragHandle && [\n                    <Tooltip\n                      text={intl.formatMessage(\n                        TOOLBAR_MESSAGES.chartToolbarMove,\n                      )}\n                      disabled={isDragging}\n                      key=\"tooltip\"\n                    >\n                      <Button\n                        className={grip}\n                        ref={triggerDragRef as RefObject<HTMLButtonElement>}\n                        variant=\"default\"\n                        size=\"condensed\"\n                        data-testid=\"chart-toolbar-grip\"\n                        aria-label={TOOLBAR_DRAG_BUTTON_ARIA_LABEL}\n                      >\n                        <Button.Prefix>\n                          <DragAllDirectionIcon />\n                        </Button.Prefix>\n                      </Button>\n                    </Tooltip>,\n                    <VerticalDivider key=\"divider\" />,\n                  ]}\n                <div\n                  data-testid=\"toolbar-children\"\n                  style={{\n                    display: 'flex',\n                    alignItems: 'center',\n                    touchAction: 'none',\n                  }}\n                  ref={\n                    draggable && removeDragHandle\n                      ? (triggerDragRef as RefObject<HTMLDivElement>)\n                      : undefined\n                  }\n                >\n                  {shouldShowMenu && (\n                    <ChartToolbarContext.Provider value={toolbarMenuConfig}>\n                      <ToolbarMenu\n                        onMenuOpen={handleToggleMenu}\n                        activeModeIcon={menuIcon}\n                        triggerLabel={menuTriggerLabel}\n                        onMenuEnter={handleOnMenuEnter}\n                        onMenuLeave={handleOnMenuLeave}\n                        menuAlignment={isExpanded ? 'start' : 'end'}\n                        onCloseAutoFocus={onCloseAutoFocus}\n                        data-dt-name=\"ToolbarTools\"\n                        data-dt-properties={\n                          isExpanded && fitsBounds\n                            ? 'state:changeMode'\n                            : 'state:tools'\n                        }\n                      >\n                        {children}\n                        <IntentsCollapsedAndDownloadSection\n                          hidden={!showCollapsedIntentAndDownloadSubmenu}\n                          intents={intents}\n                          showDownloadButton={isDownloadEnabled}\n                          handleDownloadDataToolbar={handleDownloadDataToolbar}\n                        />\n                        {showExpandButton && (\n                          <>\n                            <HorizontalDivider />\n                            {expandButton}\n                          </>\n                        )}\n                      </ToolbarMenu>\n                    </ChartToolbarContext.Provider>\n                  )}\n                  <ChartToolbarContext.Provider value={intentsMenuConfig}>\n                    {children}\n                    {showIntentMenu && (\n                      <ChartDataMenu\n                        onMenuOpen={handleToggleMenu}\n                        onMenuEnter={handleOnMenuEnter}\n                        onMenuLeave={handleOnMenuLeave}\n                        isDownloadEnabled={isDownloadEnabled}\n                        handleDownloadDataToolbar={handleDownloadDataToolbar}\n                        intents={intents}\n                        showDivider={!!menuIcon}\n                        isDragging={isDragging}\n                        buttonMode={isInlineMode ? 'inline' : 'standard'}\n                        intentsAsyncTemplate={intentsAsyncTemplate}\n                      />\n                    )}\n                  </ChartToolbarContext.Provider>\n                  {showCollapseButton && collapseButton}\n                </div>\n              </Flex>\n            </div>\n          </A11yToolbarTabIndexContext.Provider>\n        </div>\n      </div>\n    </ChartToolbarVisibilityOverlay>\n  );\n};\n\nInternalChartToolbarRenderer['displayName'] = 'ChartToolbarRenderer';\n\n/**\n * @internal\n */\nexport const ChartToolbarRenderer = Object.assign(\n  InternalChartToolbarRenderer,\n  {\n    Control,\n  },\n);\n"],
+  "mappings": "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",
   "names": ["toolbarElement", "isExpanded"]
 }

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

@@ -1,14 +1,14 @@
 import "../chart-grid/ChartGrid.css";
 import "./ChartToolbarRenderer.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var chartToolbar = _7a468({ defaultClassName: "_1x31hou5-3-6-0", variantClassNames: { inline: { true: "_1x31hou6-3-6-0", false: "_1x31hou7-3-6-0" } }, defaultVariants: {}, compoundVariants: [] });
-var chartToolbarArea = _7a468({ defaultClassName: "_1x31hou9-3-6-0", variantClassNames: { inline: { true: "_1x31houa-3-6-0", false: "_1x31houb-3-6-0" } }, defaultVariants: {}, compoundVariants: [] });
-var defaultOverlayPadding = "_1x31houc-3-6-0";
-var grip = "_1x31hou4-3-6-0";
-var outerContainer = _7a468({ defaultClassName: "_1x31hou0-3-6-0", variantClassNames: { visible: { true: "_1x31hou1-3-6-0", false: "_1x31hou2-3-6-0" }, inline: { true: "_1x31hou3-3-6-0" } }, defaultVariants: {}, compoundVariants: [] });
-var styledHorizontalDivider = "_1x31houe-3-6-0";
-var styledVerticalDivider = "_1x31houd-3-6-0";
-var toolbarVisibilityOverlay = "_1x31hou8-3-6-0 _13lzg4k0-3-6-0";
+var chartToolbar = _7a468({ defaultClassName: "_1x31hou5-3-7-0", variantClassNames: { inline: { true: "_1x31hou6-3-7-0", false: "_1x31hou7-3-7-0" } }, defaultVariants: {}, compoundVariants: [] });
+var chartToolbarArea = _7a468({ defaultClassName: "_1x31hou9-3-7-0", variantClassNames: { inline: { true: "_1x31houa-3-7-0", false: "_1x31houb-3-7-0" } }, defaultVariants: {}, compoundVariants: [] });
+var defaultOverlayPadding = "_1x31houc-3-7-0";
+var grip = "_1x31hou4-3-7-0";
+var outerContainer = _7a468({ defaultClassName: "_1x31hou0-3-7-0", variantClassNames: { visible: { true: "_1x31hou1-3-7-0", false: "_1x31hou2-3-7-0" }, inline: { true: "_1x31hou3-3-7-0" } }, defaultVariants: {}, compoundVariants: [] });
+var styledHorizontalDivider = "_1x31houe-3-7-0";
+var styledVerticalDivider = "_1x31houd-3-7-0";
+var toolbarVisibilityOverlay = "_1x31hou8-3-7-0 _13lzg4k0-3-7-0";
 export {
   chartToolbar,
   chartToolbarArea,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/core/components/toolbar/ChartToolbarRenderer.css.ts"],
-  "sourcesContent": ["import '../chart-grid/ChartGrid.css';\nimport './ChartToolbarRenderer.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var chartToolbar = _7a468({defaultClassName:'_1x31hou5-3-6-0',variantClassNames:{inline:{true:'_1x31hou6-3-6-0',false:'_1x31hou7-3-6-0'}},defaultVariants:{},compoundVariants:[]});\nexport var chartToolbarArea = _7a468({defaultClassName:'_1x31hou9-3-6-0',variantClassNames:{inline:{true:'_1x31houa-3-6-0',false:'_1x31houb-3-6-0'}},defaultVariants:{},compoundVariants:[]});\nexport var defaultOverlayPadding = '_1x31houc-3-6-0';\nexport var grip = '_1x31hou4-3-6-0';\nexport var outerContainer = _7a468({defaultClassName:'_1x31hou0-3-6-0',variantClassNames:{visible:{true:'_1x31hou1-3-6-0',false:'_1x31hou2-3-6-0'},inline:{true:'_1x31hou3-3-6-0'}},defaultVariants:{},compoundVariants:[]});\nexport var styledHorizontalDivider = '_1x31houe-3-6-0';\nexport var styledVerticalDivider = '_1x31houd-3-6-0';\nexport var toolbarVisibilityOverlay = '_1x31hou8-3-6-0 _13lzg4k0-3-6-0';"],
+  "sourcesContent": ["import '../chart-grid/ChartGrid.css';\nimport './ChartToolbarRenderer.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var chartToolbar = _7a468({defaultClassName:'_1x31hou5-3-7-0',variantClassNames:{inline:{true:'_1x31hou6-3-7-0',false:'_1x31hou7-3-7-0'}},defaultVariants:{},compoundVariants:[]});\nexport var chartToolbarArea = _7a468({defaultClassName:'_1x31hou9-3-7-0',variantClassNames:{inline:{true:'_1x31houa-3-7-0',false:'_1x31houb-3-7-0'}},defaultVariants:{},compoundVariants:[]});\nexport var defaultOverlayPadding = '_1x31houc-3-7-0';\nexport var grip = '_1x31hou4-3-7-0';\nexport var outerContainer = _7a468({defaultClassName:'_1x31hou0-3-7-0',variantClassNames:{visible:{true:'_1x31hou1-3-7-0',false:'_1x31hou2-3-7-0'},inline:{true:'_1x31hou3-3-7-0'}},defaultVariants:{},compoundVariants:[]});\nexport var styledHorizontalDivider = '_1x31houe-3-7-0';\nexport var styledVerticalDivider = '_1x31houd-3-7-0';\nexport var toolbarVisibilityOverlay = '_1x31hou8-3-7-0 _13lzg4k0-3-7-0';"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,eAAe,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,QAAO,EAAC,MAAK,mBAAkB,OAAM,kBAAiB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AACjL,IAAI,mBAAmB,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,QAAO,EAAC,MAAK,mBAAkB,OAAM,kBAAiB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AACrL,IAAI,wBAAwB;AAC5B,IAAI,OAAO;AACX,IAAI,iBAAiB,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,SAAQ,EAAC,MAAK,mBAAkB,OAAM,kBAAiB,GAAE,QAAO,EAAC,MAAK,kBAAiB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AACpN,IAAI,0BAA0B;AAC9B,IAAI,wBAAwB;AAC5B,IAAI,2BAA2B;",
   "names": []
 }

package/esm/charts/core/components/toolbar/ChartToolbarVisibilityOverlay.js

@@ -76,7 +76,7 @@ const VisibilityOverlay = (props) => {
           isVisible || setIsVisible(true);
         }
       },
-      onClick: () => {
+      onPointerDown: () => {
         isVisible || setIsVisible(true);
       },
       children

package/esm/charts/core/components/toolbar/ChartToolbarVisibilityOverlay.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/core/components/toolbar/ChartToolbarVisibilityOverlay.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport { useEffect, useMemo, useRef, type PropsWithChildren } from 'react';\n\nimport { toolbarVisibilityOverlay } from './ChartToolbarRenderer.sty.js';\nimport type { ChartToolbarRendererProps } from './types.js';\nimport { useApplyCallbackOnScroll } from '../../hooks/useApplyCallbackOnScroll.js';\nimport { useEffectOnValueChange } from '../../hooks/useEffectOnValueChange.js';\nimport type { ViewportEventPosition } from '../../types/pointer-events.js';\nimport { isWithinBounds } from '../../utils/is-within-bounds.js';\nimport type { ChartLayoutDimensions } from '../chart-layout/types/chart-layout.js';\nimport { interactionsOverlay } from '../interactions-overlay/InteractionsOverlay.sty.js';\n\ntype ChartToolbarVisibilityOverlayProps = {\n  boundSize: ChartLayoutDimensions;\n  visibleWhenMouseInBounds: boolean;\n  setIsVisible: (isVisible: boolean) => void;\n  isVisible: boolean;\n  handlerRef?: ChartToolbarRendererProps['handlerRef'];\n};\n\nexport const ChartToolbarVisibilityOverlay = (\n  props: PropsWithChildren<ChartToolbarVisibilityOverlayProps>,\n) => {\n  const { children, visibleWhenMouseInBounds } = props;\n\n  if (!visibleWhenMouseInBounds) {\n    return children;\n  }\n\n  return <VisibilityOverlay {...props} />;\n};\n\nconst VisibilityOverlay = (\n  props: PropsWithChildren<ChartToolbarVisibilityOverlayProps>,\n) => {\n  const { boundSize, children, setIsVisible, isVisible, handlerRef } = props;\n\n  const overlayRef = useRef<HTMLDivElement>(null);\n\n  const overlayState = useMemo(() => {\n    let bounds: DOMRect | undefined;\n    return {\n      inBounds: (e: ViewportEventPosition) => {\n        if (!bounds) {\n          bounds = overlayRef.current?.getBoundingClientRect();\n        }\n        return isWithinBounds(e, bounds);\n      },\n      resetBounds: () => {\n        bounds = undefined;\n      },\n    };\n  }, []);\n\n  useApplyCallbackOnScroll(!isVisible, () => {\n    overlayState.resetBounds();\n  });\n\n  useEffectOnValueChange(() => {\n    overlayState.resetBounds();\n    setIsVisible(false);\n  }, [boundSize.height, boundSize.width]);\n\n  useEffect(() => {\n    if (handlerRef?.current) {\n      handlerRef.current.handleFocus = () => {\n        setIsVisible(true);\n      };\n    }\n    return () => {\n      if (handlerRef?.current) {\n        handlerRef.current.handleFocus = () => null;\n      }\n    };\n  });\n\n  useEffect(() => {\n    const cbMouse = (event: MouseEvent) => {\n      if (!overlayState.inBounds(event)) {\n        setIsVisible(false);\n        overlayState.resetBounds();\n      }\n    };\n\n    if (isVisible) {\n      document.addEventListener('mouseup', cbMouse);\n      document.addEventListener('pointerout', cbMouse);\n    }\n\n    return () => {\n      document.removeEventListener('mouseup', cbMouse);\n      document.removeEventListener('pointerout', cbMouse);\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [isVisible]);\n\n  return (\n    <div\n      role=\"none\"\n      ref={overlayRef}\n      className={clsx(toolbarVisibilityOverlay, interactionsOverlay)}\n      onPointerMove={(e: ViewportEventPosition) => {\n        if (overlayState.inBounds(e)) {\n          isVisible || setIsVisible(true);\n        }\n      }}\n      onClick={() => {\n        isVisible || setIsVisible(true);\n      }}\n    >\n      {children}\n    </div>\n  );\n};\n"],
-  "mappings": "AA6BS;AA7BT,OAAO,UAAU;AACjB,SAAS,WAAW,SAAS,cAAsC;AAEnE,SAAS,gCAAgC;AAEzC,SAAS,gCAAgC;AACzC,SAAS,8BAA8B;AAEvC,SAAS,sBAAsB;AAE/B,SAAS,2BAA2B;AAU7B,MAAM,gCAAgC,CAC3C,UACG;AACH,QAAM,EAAE,UAAU,yBAAyB,IAAI;AAE/C,MAAI,CAAC,0BAA0B;AAC7B,WAAO;AAAA,EACT;AAEA,SAAO,oBAAC,qBAAmB,GAAG,OAAO;AACvC;AAEA,MAAM,oBAAoB,CACxB,UACG;AACH,QAAM,EAAE,WAAW,UAAU,cAAc,WAAW,WAAW,IAAI;AAErE,QAAM,aAAa,OAAuB,IAAI;AAE9C,QAAM,eAAe,QAAQ,MAAM;AACjC,QAAI;AACJ,WAAO;AAAA,MACL,UAAU,CAAC,MAA6B;AACtC,YAAI,CAAC,QAAQ;AACX,mBAAS,WAAW,SAAS,sBAAsB;AAAA,QACrD;AACA,eAAO,eAAe,GAAG,MAAM;AAAA,MACjC;AAAA,MACA,aAAa,MAAM;AACjB,iBAAS;AAAA,MACX;AAAA,IACF;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,2BAAyB,CAAC,WAAW,MAAM;AACzC,iBAAa,YAAY;AAAA,EAC3B,CAAC;AAED,yBAAuB,MAAM;AAC3B,iBAAa,YAAY;AACzB,iBAAa,KAAK;AAAA,EACpB,GAAG,CAAC,UAAU,QAAQ,UAAU,KAAK,CAAC;AAEtC,YAAU,MAAM;AACd,QAAI,YAAY,SAAS;AACvB,iBAAW,QAAQ,cAAc,MAAM;AACrC,qBAAa,IAAI;AAAA,MACnB;AAAA,IACF;AACA,WAAO,MAAM;AACX,UAAI,YAAY,SAAS;AACvB,mBAAW,QAAQ,cAAc,MAAM;AAAA,MACzC;AAAA,IACF;AAAA,EACF,CAAC;AAED,YAAU,MAAM;AACd,UAAM,UAAU,CAAC,UAAsB;AACrC,UAAI,CAAC,aAAa,SAAS,KAAK,GAAG;AACjC,qBAAa,KAAK;AAClB,qBAAa,YAAY;AAAA,MAC3B;AAAA,IACF;AAEA,QAAI,WAAW;AACb,eAAS,iBAAiB,WAAW,OAAO;AAC5C,eAAS,iBAAiB,cAAc,OAAO;AAAA,IACjD;AAEA,WAAO,MAAM;AACX,eAAS,oBAAoB,WAAW,OAAO;AAC/C,eAAS,oBAAoB,cAAc,OAAO;AAAA,IACpD;AAAA,EAEF,GAAG,CAAC,SAAS,CAAC;AAEd,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,KAAK;AAAA,MACL,WAAW,KAAK,0BAA0B,mBAAmB;AAAA,MAC7D,eAAe,CAAC,MAA6B;AAC3C,YAAI,aAAa,SAAS,CAAC,GAAG;AAC5B,uBAAa,aAAa,IAAI;AAAA,QAChC;AAAA,MACF;AAAA,MACA,SAAS,MAAM;AACb,qBAAa,aAAa,IAAI;AAAA,MAChC;AAAA,MAEC;AAAA;AAAA,EACH;AAEJ;",
+  "sourcesContent": ["import clsx from 'clsx';\nimport { useEffect, useMemo, useRef, type PropsWithChildren } from 'react';\n\nimport { toolbarVisibilityOverlay } from './ChartToolbarRenderer.sty.js';\nimport type { ChartToolbarRendererProps } from './types.js';\nimport { useApplyCallbackOnScroll } from '../../hooks/useApplyCallbackOnScroll.js';\nimport { useEffectOnValueChange } from '../../hooks/useEffectOnValueChange.js';\nimport type { ViewportEventPosition } from '../../types/pointer-events.js';\nimport { isWithinBounds } from '../../utils/is-within-bounds.js';\nimport type { ChartLayoutDimensions } from '../chart-layout/types/chart-layout.js';\nimport { interactionsOverlay } from '../interactions-overlay/InteractionsOverlay.sty.js';\n\ntype ChartToolbarVisibilityOverlayProps = {\n  boundSize: ChartLayoutDimensions;\n  visibleWhenMouseInBounds: boolean;\n  setIsVisible: (isVisible: boolean) => void;\n  isVisible: boolean;\n  handlerRef?: ChartToolbarRendererProps['handlerRef'];\n};\n\nexport const ChartToolbarVisibilityOverlay = (\n  props: PropsWithChildren<ChartToolbarVisibilityOverlayProps>,\n) => {\n  const { children, visibleWhenMouseInBounds } = props;\n\n  if (!visibleWhenMouseInBounds) {\n    return children;\n  }\n\n  return <VisibilityOverlay {...props} />;\n};\n\nconst VisibilityOverlay = (\n  props: PropsWithChildren<ChartToolbarVisibilityOverlayProps>,\n) => {\n  const { boundSize, children, setIsVisible, isVisible, handlerRef } = props;\n\n  const overlayRef = useRef<HTMLDivElement>(null);\n\n  const overlayState = useMemo(() => {\n    let bounds: DOMRect | undefined;\n    return {\n      inBounds: (e: ViewportEventPosition) => {\n        if (!bounds) {\n          bounds = overlayRef.current?.getBoundingClientRect();\n        }\n        return isWithinBounds(e, bounds);\n      },\n      resetBounds: () => {\n        bounds = undefined;\n      },\n    };\n  }, []);\n\n  useApplyCallbackOnScroll(!isVisible, () => {\n    overlayState.resetBounds();\n  });\n\n  useEffectOnValueChange(() => {\n    overlayState.resetBounds();\n    setIsVisible(false);\n  }, [boundSize.height, boundSize.width]);\n\n  useEffect(() => {\n    if (handlerRef?.current) {\n      handlerRef.current.handleFocus = () => {\n        setIsVisible(true);\n      };\n    }\n    return () => {\n      if (handlerRef?.current) {\n        handlerRef.current.handleFocus = () => null;\n      }\n    };\n  });\n\n  useEffect(() => {\n    const cbMouse = (event: MouseEvent) => {\n      if (!overlayState.inBounds(event)) {\n        setIsVisible(false);\n        overlayState.resetBounds();\n      }\n    };\n\n    if (isVisible) {\n      document.addEventListener('mouseup', cbMouse);\n      document.addEventListener('pointerout', cbMouse);\n    }\n\n    return () => {\n      document.removeEventListener('mouseup', cbMouse);\n      document.removeEventListener('pointerout', cbMouse);\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [isVisible]);\n\n  return (\n    <div\n      role=\"none\"\n      ref={overlayRef}\n      className={clsx(toolbarVisibilityOverlay, interactionsOverlay)}\n      onPointerMove={(e: ViewportEventPosition) => {\n        if (overlayState.inBounds(e)) {\n          isVisible || setIsVisible(true);\n        }\n      }}\n      onPointerDown={() => {\n        isVisible || setIsVisible(true);\n      }}\n    >\n      {children}\n    </div>\n  );\n};\n"],
+  "mappings": "AA6BS;AA7BT,OAAO,UAAU;AACjB,SAAS,WAAW,SAAS,cAAsC;AAEnE,SAAS,gCAAgC;AAEzC,SAAS,gCAAgC;AACzC,SAAS,8BAA8B;AAEvC,SAAS,sBAAsB;AAE/B,SAAS,2BAA2B;AAU7B,MAAM,gCAAgC,CAC3C,UACG;AACH,QAAM,EAAE,UAAU,yBAAyB,IAAI;AAE/C,MAAI,CAAC,0BAA0B;AAC7B,WAAO;AAAA,EACT;AAEA,SAAO,oBAAC,qBAAmB,GAAG,OAAO;AACvC;AAEA,MAAM,oBAAoB,CACxB,UACG;AACH,QAAM,EAAE,WAAW,UAAU,cAAc,WAAW,WAAW,IAAI;AAErE,QAAM,aAAa,OAAuB,IAAI;AAE9C,QAAM,eAAe,QAAQ,MAAM;AACjC,QAAI;AACJ,WAAO;AAAA,MACL,UAAU,CAAC,MAA6B;AACtC,YAAI,CAAC,QAAQ;AACX,mBAAS,WAAW,SAAS,sBAAsB;AAAA,QACrD;AACA,eAAO,eAAe,GAAG,MAAM;AAAA,MACjC;AAAA,MACA,aAAa,MAAM;AACjB,iBAAS;AAAA,MACX;AAAA,IACF;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,2BAAyB,CAAC,WAAW,MAAM;AACzC,iBAAa,YAAY;AAAA,EAC3B,CAAC;AAED,yBAAuB,MAAM;AAC3B,iBAAa,YAAY;AACzB,iBAAa,KAAK;AAAA,EACpB,GAAG,CAAC,UAAU,QAAQ,UAAU,KAAK,CAAC;AAEtC,YAAU,MAAM;AACd,QAAI,YAAY,SAAS;AACvB,iBAAW,QAAQ,cAAc,MAAM;AACrC,qBAAa,IAAI;AAAA,MACnB;AAAA,IACF;AACA,WAAO,MAAM;AACX,UAAI,YAAY,SAAS;AACvB,mBAAW,QAAQ,cAAc,MAAM;AAAA,MACzC;AAAA,IACF;AAAA,EACF,CAAC;AAED,YAAU,MAAM;AACd,UAAM,UAAU,CAAC,UAAsB;AACrC,UAAI,CAAC,aAAa,SAAS,KAAK,GAAG;AACjC,qBAAa,KAAK;AAClB,qBAAa,YAAY;AAAA,MAC3B;AAAA,IACF;AAEA,QAAI,WAAW;AACb,eAAS,iBAAiB,WAAW,OAAO;AAC5C,eAAS,iBAAiB,cAAc,OAAO;AAAA,IACjD;AAEA,WAAO,MAAM;AACX,eAAS,oBAAoB,WAAW,OAAO;AAC/C,eAAS,oBAAoB,cAAc,OAAO;AAAA,IACpD;AAAA,EAEF,GAAG,CAAC,SAAS,CAAC;AAEd,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,KAAK;AAAA,MACL,WAAW,KAAK,0BAA0B,mBAAmB;AAAA,MAC7D,eAAe,CAAC,MAA6B;AAC3C,YAAI,aAAa,SAAS,CAAC,GAAG;AAC5B,uBAAa,aAAa,IAAI;AAAA,QAChC;AAAA,MACF;AAAA,MACA,eAAe,MAAM;AACnB,qBAAa,aAAa,IAAI;AAAA,MAChC;AAAA,MAEC;AAAA;AAAA,EACH;AAEJ;",
   "names": []
 }

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

@@ -1,9 +1,9 @@
-._1hxr84t0-3-6-0 {
+._1hxr84t0-3-7-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-6-0:hover {
+._1hxr84t0-3-7-0:hover {
   background-color: var(--dt-colors-background-field-neutral-emphasized-active, #d0d1dc);
 }

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

@@ -1,11 +1,6 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { createElement } from "react";
-import {
-  useCallback,
-  useEffect,
-  useRef,
-  useState
-} from "react";
+import { useEffect, useRef, useState } from "react";
 import { useIntl } from "react-intl";
 import Spacings from "@dynatrace/strato-design-tokens/spacings";
 import { DotMenuIcon, DownloadIcon } from "@dynatrace/strato-icons";
@@ -35,14 +30,11 @@ const ChartDataMenu = ({
   intentsAsyncTemplate
 }) => {
   const intentButtonRef = useRef(null);
-  const menuContentRef = useRef(null);
+  const isTriggerPointerDownRef = useRef(false);
   const tabIndex = useA11yToolbarTabIndex("intent");
   const intl = useIntl();
   const [isOpen, setIsOpen] = useState(false);
   const isInlineMode = buttonMode === "inline";
-  const handleOnMouseEnter = () => {
-    onMenuEnter?.();
-  };
   useEffectOnValueChange(() => {
     onMenuOpen(isOpen);
   }, [isOpen]);
@@ -52,63 +44,39 @@ const ChartDataMenu = ({
     }
   }, [intentButtonRef, tabIndex]);
   useEffect(() => {
-    if (isDragging !== void 0 && isDragging && isOpen) {
-      setIsOpen(false);
+    if (isDragging !== void 0 && isDragging) {
+      isTriggerPointerDownRef.current = false;
+      if (isOpen) {
+        setIsOpen(false);
+      }
     }
   }, [isDragging, isOpen]);
-  const handleOnMouseLeave = () => {
-    onMenuLeave?.();
-  };
-  const handleToolbarMenuClick = () => {
-    setIsOpen((prevState) => !prevState);
+  const handleOpenChange = (open) => {
+    if (isTriggerPointerDownRef.current) {
+      return;
+    }
+    if (!open) {
+      setIsOpen(false);
+    }
   };
-  const handleOnClickOutsideOverlay = useCallback(
-    (e) => {
-      const menuContainsTarget = menuContentRef.current?.contains(
-        e.target
-      );
-      if (isOpen && !menuContainsTarget) {
-        setIsOpen(false);
-      }
-    },
-    [setIsOpen, isOpen, menuContentRef]
-  );
-  const handleOnKeyUp = useCallback(
-    (e) => {
-      if (e.key === "Escape") {
-        setIsOpen(false);
-      }
-    },
-    [setIsOpen]
-  );
-  const handleOnKeyDown = (e) => {
-    const nativeEvent = e.nativeEvent;
-    if (nativeEvent.code === "Enter") {
-      setIsOpen((prevState) => !prevState);
+  const handleTriggerClick = () => {
+    isTriggerPointerDownRef.current = false;
+    if (!isDragging) {
+      setIsOpen(!isOpen);
     }
   };
-  useEffect(() => {
-    window.addEventListener("click", handleOnClickOutsideOverlay);
-    window.addEventListener("keyup", handleOnKeyUp);
-    return () => {
-      window.removeEventListener("click", handleOnClickOutsideOverlay);
-      window.removeEventListener("keyup", handleOnKeyUp);
-    };
-  }, [handleOnClickOutsideOverlay, handleOnKeyUp]);
   return /* @__PURE__ */ jsxs(
     "div",
     {
       className: styledToolbarMenuContainer({
         inline: isInlineMode
       }),
-      onMouseEnter: handleOnMouseEnter,
-      onMouseLeave: handleOnMouseLeave,
-      onClick: handleToolbarMenuClick,
-      onKeyDown: handleOnKeyDown,
-      ref: menuContentRef,
+      onMouseEnter: onMenuEnter,
+      onMouseLeave: onMenuLeave,
+      role: "none",
       children: [
         showDivider && /* @__PURE__ */ jsx(VerticalDivider, {}),
-        /* @__PURE__ */ jsxs(Menu, { open: isOpen, children: [
+        /* @__PURE__ */ jsxs(Menu, { open: isOpen, onOpenChange: handleOpenChange, children: [
           /* @__PURE__ */ jsx(Menu.Trigger, { children: /* @__PURE__ */ jsx(
             Button,
             {
@@ -118,6 +86,10 @@ const ChartDataMenu = ({
               size: "condensed",
               ref: intentButtonRef,
               tabIndex,
+              onPointerDown: () => {
+                isTriggerPointerDownRef.current = true;
+              },
+              onClick: handleTriggerClick,
               children: /* @__PURE__ */ jsx(DotMenuIcon, {})
             }
           ) }),

package/esm/charts/core/components/toolbar/components/ChartDataMenu.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/core/components/toolbar/components/ChartDataMenu.tsx"],
-  "sourcesContent": ["import {\n  type KeyboardEvent as ReactKeyboardEvent,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\nimport { useIntl } from 'react-intl';\n\nimport Spacings from '@dynatrace/strato-design-tokens/spacings';\nimport { DotMenuIcon, DownloadIcon } from '@dynatrace/strato-icons';\n\nimport { AsyncIntents } from './AsyncIntents.js';\nimport { triggerButton } from './ChartDataMenu.sty.js';\nimport {\n  styledToolbarMenuContainer,\n  toolbarMenuGroup,\n} from './ToolbarMenu.sty.js';\nimport { Button } from '../../../../../buttons/button/Button.js';\nimport type { IntentProps } from '../../../../../core/slots/Intent/Intent.js';\nimport { Menu } from '../../../../../navigation/menu/Menu.js';\nimport { useA11yToolbarTabIndex } from '../../../hooks/useA11yToolbarTabIndex.js';\nimport { useEffectOnValueChange } from '../../../hooks/useEffectOnValueChange.js';\nimport { TOOLBAR_MESSAGES } from '../messages.js';\nimport type { IntentsAsyncTemplate } from '../types.js';\nimport { VerticalDivider } from './divider.js';\n\ninterface ChartDataMenuProps {\n  onMenuEnter: () => void;\n  onMenuLeave: () => void;\n  onMenuOpen: (open: boolean) => void;\n  handleDownloadDataToolbar?: () => void;\n  menuAlignment?: 'center' | 'end' | 'start';\n  isDownloadEnabled?: boolean;\n  intents?: Array<IntentProps>;\n  showDivider: boolean;\n  isDragging?: boolean;\n  buttonMode: 'standard' | 'inline';\n  intentsAsyncTemplate?: IntentsAsyncTemplate;\n}\n\nexport const ChartDataMenu = ({\n  onMenuEnter,\n  onMenuLeave,\n  onMenuOpen,\n  menuAlignment = 'end',\n  isDownloadEnabled,\n  handleDownloadDataToolbar,\n  intents = [],\n  showDivider,\n  buttonMode = 'standard',\n  isDragging,\n  intentsAsyncTemplate,\n}: ChartDataMenuProps) => {\n  const intentButtonRef = useRef<HTMLButtonElement>(null);\n  const menuContentRef = useRef<HTMLDivElement>(null);\n  const tabIndex = useA11yToolbarTabIndex('intent');\n  const intl = useIntl();\n  const [isOpen, setIsOpen] = useState(false);\n  const isInlineMode = buttonMode === 'inline';\n\n  const handleOnMouseEnter = () => {\n    onMenuEnter?.();\n  };\n\n  useEffectOnValueChange(() => {\n    onMenuOpen(isOpen);\n  }, [isOpen]);\n\n  useEffect(() => {\n    if (tabIndex === 0 && intentButtonRef.current) {\n      intentButtonRef.current?.focus();\n    }\n  }, [intentButtonRef, tabIndex]);\n\n  useEffect(() => {\n    if (isDragging !== undefined && isDragging && isOpen) {\n      setIsOpen(false);\n    }\n  }, [isDragging, isOpen]);\n\n  const handleOnMouseLeave = () => {\n    onMenuLeave?.();\n  };\n\n  const handleToolbarMenuClick = () => {\n    setIsOpen((prevState) => !prevState);\n  };\n\n  const handleOnClickOutsideOverlay = useCallback(\n    (e: MouseEvent) => {\n      const menuContainsTarget = menuContentRef.current?.contains(\n        e.target as Node,\n      );\n\n      if (isOpen && !menuContainsTarget) {\n        setIsOpen(false);\n      }\n    },\n    [setIsOpen, isOpen, menuContentRef],\n  );\n\n  // We have to use the keyup event, because the keydown event propagation is stopped inside the Menu component.\n  const handleOnKeyUp = useCallback(\n    (e: KeyboardEvent) => {\n      if (e.key === 'Escape') {\n        setIsOpen(false);\n      }\n    },\n    [setIsOpen],\n  );\n\n  const handleOnKeyDown = (e: ReactKeyboardEvent) => {\n    const nativeEvent = e.nativeEvent;\n\n    if (nativeEvent.code === 'Enter') {\n      setIsOpen((prevState) => !prevState);\n    }\n  };\n\n  useEffect(() => {\n    window.addEventListener('click', handleOnClickOutsideOverlay);\n    window.addEventListener('keyup', handleOnKeyUp);\n\n    return () => {\n      window.removeEventListener('click', handleOnClickOutsideOverlay);\n      window.removeEventListener('keyup', handleOnKeyUp);\n    };\n  }, [handleOnClickOutsideOverlay, handleOnKeyUp]);\n\n  return (\n    <div\n      className={styledToolbarMenuContainer({\n        inline: isInlineMode,\n      })}\n      onMouseEnter={handleOnMouseEnter}\n      onMouseLeave={handleOnMouseLeave}\n      onClick={handleToolbarMenuClick}\n      onKeyDown={handleOnKeyDown}\n      ref={menuContentRef}\n    >\n      {showDivider && <VerticalDivider />}\n\n      <Menu open={isOpen}>\n        <Menu.Trigger>\n          <Button\n            width={Spacings.Size28}\n            className={isInlineMode ? triggerButton : undefined}\n            variant=\"default\"\n            size=\"condensed\"\n            ref={intentButtonRef}\n            tabIndex={tabIndex}\n          >\n            <DotMenuIcon />\n          </Button>\n        </Menu.Trigger>\n        <Menu.Content alignment={menuAlignment}>\n          <Menu.Group className={toolbarMenuGroup}>\n            {isDownloadEnabled && handleDownloadDataToolbar ? (\n              <Menu.Item onSelect={handleDownloadDataToolbar}>\n                <Menu.Prefix>\n                  <DownloadIcon />\n                </Menu.Prefix>\n                {intl.formatMessage(TOOLBAR_MESSAGES.downloadDataButton)}\n              </Menu.Item>\n            ) : null}\n          </Menu.Group>\n          {intents.length ? (\n            <Menu.Group className={toolbarMenuGroup}>\n              {intents.map((item, key) => (\n                <Menu.Intent {...item} key={item.children?.toString() || key}>\n                  {item.icon && <Menu.Prefix>{item.icon}</Menu.Prefix>}\n                  {item.children}\n                </Menu.Intent>\n              ))}\n            </Menu.Group>\n          ) : null}\n          <AsyncIntents\n            intentsAsyncTemplate={intentsAsyncTemplate}\n            shouldRun={isOpen}\n          />\n        </Menu.Content>\n      </Menu>\n    </div>\n  );\n};\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { useEffect, useRef, useState } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport Spacings from '@dynatrace/strato-design-tokens/spacings';\nimport { DotMenuIcon, DownloadIcon } from '@dynatrace/strato-icons';\n\nimport { AsyncIntents } from './AsyncIntents.js';\nimport { triggerButton } from './ChartDataMenu.sty.js';\nimport {\n  styledToolbarMenuContainer,\n  toolbarMenuGroup,\n} from './ToolbarMenu.sty.js';\nimport { Button } from '../../../../../buttons/button/Button.js';\nimport type { IntentProps } from '../../../../../core/slots/Intent/Intent.js';\nimport { Menu } from '../../../../../navigation/menu/Menu.js';\nimport { useA11yToolbarTabIndex } from '../../../hooks/useA11yToolbarTabIndex.js';\nimport { useEffectOnValueChange } from '../../../hooks/useEffectOnValueChange.js';\nimport { TOOLBAR_MESSAGES } from '../messages.js';\nimport type { IntentsAsyncTemplate } from '../types.js';\nimport { VerticalDivider } from './divider.js';\n\ninterface ChartDataMenuProps {\n  onMenuEnter: () => void;\n  onMenuLeave: () => void;\n  onMenuOpen: (open: boolean) => void;\n  handleDownloadDataToolbar?: () => void;\n  menuAlignment?: 'center' | 'end' | 'start';\n  isDownloadEnabled?: boolean;\n  intents?: Array<IntentProps>;\n  showDivider: boolean;\n  isDragging?: boolean;\n  buttonMode: 'standard' | 'inline';\n  intentsAsyncTemplate?: IntentsAsyncTemplate;\n}\n\nexport const ChartDataMenu = ({\n  onMenuEnter,\n  onMenuLeave,\n  onMenuOpen,\n  menuAlignment = 'end',\n  isDownloadEnabled,\n  handleDownloadDataToolbar,\n  intents = [],\n  showDivider,\n  buttonMode = 'standard',\n  isDragging,\n  intentsAsyncTemplate,\n}: ChartDataMenuProps) => {\n  const intentButtonRef = useRef<HTMLButtonElement>(null);\n  const isTriggerPointerDownRef = useRef(false);\n  const tabIndex = useA11yToolbarTabIndex('intent');\n  const intl = useIntl();\n  const [isOpen, setIsOpen] = useState(false);\n  const isInlineMode = buttonMode === 'inline';\n\n  useEffectOnValueChange(() => {\n    onMenuOpen(isOpen);\n  }, [isOpen]);\n\n  useEffect(() => {\n    if (tabIndex === 0 && intentButtonRef.current) {\n      intentButtonRef.current?.focus();\n    }\n  }, [intentButtonRef, tabIndex]);\n\n  useEffect(() => {\n    if (isDragging !== undefined && isDragging) {\n      isTriggerPointerDownRef.current = false;\n      if (isOpen) {\n        setIsOpen(false);\n      }\n    }\n  }, [isDragging, isOpen]);\n\n  const handleOpenChange = (open: boolean) => {\n    if (isTriggerPointerDownRef.current) {\n      return;\n    }\n    if (!open) {\n      setIsOpen(false);\n    }\n  };\n\n  const handleTriggerClick = () => {\n    isTriggerPointerDownRef.current = false;\n    if (!isDragging) {\n      setIsOpen(!isOpen);\n    }\n  };\n\n  return (\n    <div\n      className={styledToolbarMenuContainer({\n        inline: isInlineMode,\n      })}\n      onMouseEnter={onMenuEnter}\n      onMouseLeave={onMenuLeave}\n      role=\"none\"\n    >\n      {showDivider && <VerticalDivider />}\n\n      <Menu open={isOpen} onOpenChange={handleOpenChange}>\n        <Menu.Trigger>\n          <Button\n            width={Spacings.Size28}\n            className={isInlineMode ? triggerButton : undefined}\n            variant=\"default\"\n            size=\"condensed\"\n            ref={intentButtonRef}\n            tabIndex={tabIndex}\n            onPointerDown={() => {\n              isTriggerPointerDownRef.current = true;\n            }}\n            onClick={handleTriggerClick}\n          >\n            <DotMenuIcon />\n          </Button>\n        </Menu.Trigger>\n        <Menu.Content alignment={menuAlignment}>\n          <Menu.Group className={toolbarMenuGroup}>\n            {isDownloadEnabled && handleDownloadDataToolbar ? (\n              <Menu.Item onSelect={handleDownloadDataToolbar}>\n                <Menu.Prefix>\n                  <DownloadIcon />\n                </Menu.Prefix>\n                {intl.formatMessage(TOOLBAR_MESSAGES.downloadDataButton)}\n              </Menu.Item>\n            ) : null}\n          </Menu.Group>\n          {intents.length ? (\n            <Menu.Group className={toolbarMenuGroup}>\n              {intents.map((item, key) => (\n                <Menu.Intent {...item} key={item.children?.toString() || key}>\n                  {item.icon && <Menu.Prefix>{item.icon}</Menu.Prefix>}\n                  {item.children}\n                </Menu.Intent>\n              ))}\n            </Menu.Group>\n          ) : null}\n          <AsyncIntents\n            intentsAsyncTemplate={intentsAsyncTemplate}\n            shouldRun={isOpen}\n          />\n        </Menu.Content>\n      </Menu>\n    </div>\n  );\n};\n"],
+  "mappings": "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",
   "names": []
 }

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

@@ -1,5 +1,5 @@
 import "./ChartDataMenu.css";
-var triggerButton = "_1hxr84t0-3-6-0";
+var triggerButton = "_1hxr84t0-3-7-0";
 export {
   triggerButton
 };