@dynatrace/strato-components 3.0.1 → 3.1.0

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

@@ -22,7 +22,9 @@ __export(chars_font_width_map_exports, {
   charsFontWidth12pixelsSize500Map: () => charsFontWidth12pixelsSize500Map,
   charsFontWidth12pixelsSize600Map: () => charsFontWidth12pixelsSize600Map,
   charsFontWidth12pixelsSize700Map: () => charsFontWidth12pixelsSize700Map,
-  charsFontWidth14pixelsSize400Map: () => charsFontWidth14pixelsSize400Map
+  charsFontWidth14pixelsSize400Map: () => charsFontWidth14pixelsSize400Map,
+  charsFontWidth16pixelsSize500Map: () => charsFontWidth16pixelsSize500Map,
+  charsFontWidth9pixelsSize500Map: () => charsFontWidth9pixelsSize500Map
 });
 module.exports = __toCommonJS(chars_font_width_map_exports);
 const charsFontWidth12pixelsSize400Map = {
@@ -803,3 +805,311 @@ const charsFontWidth12pixelsSize700Map = {
   "\xA3": 6.673828,
   "\xA5": 7.007813
 };
+const charsFontWidth9pixelsSize500Map = {
+  "0": 5.219993,
+  "1": 5.219993,
+  "2": 5.219993,
+  "3": 5.219993,
+  "4": 5.219993,
+  "5": 5.219993,
+  "6": 5.219993,
+  "7": 5.219993,
+  "8": 5.219993,
+  "9": 5.219993,
+  a: 5.021999,
+  b: 5.057991,
+  c: 4.382995,
+  d: 5.057991,
+  e: 4.805993,
+  f: 3.438,
+  g: 5.012992,
+  h: 5.229,
+  i: 2.384995,
+  j: 2.45699,
+  k: 4.733997,
+  l: 2.66399,
+  m: 8.036991,
+  n: 5.210999,
+  o: 4.868992,
+  p: 5.057991,
+  q: 5.066998,
+  r: 3.698994,
+  s: 4.45499,
+  t: 3.464996,
+  u: 5.210999,
+  v: 4.535992,
+  w: 6.902996,
+  x: 4.724991,
+  y: 4.508995,
+  z: 4.553993,
+  \u00E1: 5.021999,
+  \u00E0: 5.021999,
+  \u00E4: 5.021999,
+  \u00E2: 5.021999,
+  \u00E3: 5.021999,
+  \u00E5: 5.021999,
+  \u00E7: 4.382995,
+  \u00E9: 4.805993,
+  \u00E8: 4.805993,
+  \u00EB: 4.805993,
+  \u00EA: 4.805993,
+  \u00ED: 2.384995,
+  \u00EC: 2.384995,
+  \u00EF: 2.384995,
+  \u00F1: 5.210999,
+  \u00F3: 4.868992,
+  \u00F2: 4.868992,
+  \u00F6: 4.868992,
+  \u00F4: 4.868992,
+  \u00F5: 4.868992,
+  \u00F8: 4.868992,
+  \u0161: 4.45499,
+  \u00FD: 4.508995,
+  \u00FF: 4.508995,
+  Z: 5.471992,
+  A: 5.804992,
+  \u00C1: 5.804992,
+  \u00C0: 5.804992,
+  \u00C4: 5.804992,
+  \u00C2: 5.804992,
+  \u00C3: 5.804992,
+  \u00C5: 5.804992,
+  B: 5.625,
+  C: 5.435989,
+  \u00C7: 5.435989,
+  D: 5.732998,
+  E: 5.292,
+  \u00C9: 5.292,
+  \u00C8: 5.292,
+  \u00CB: 5.292,
+  \u00CA: 5.292,
+  F: 5.030995,
+  G: 5.688,
+  H: 6.218994,
+  I: 3.473992,
+  \u00CD: 3.473992,
+  \u00CC: 3.473992,
+  \u00CF: 3.473992,
+  J: 4.157993,
+  K: 5.625,
+  L: 4.724991,
+  " ": 2.303993,
+  M: 7.595993,
+  N: 6.299995,
+  O: 5.876999,
+  \u00D3: 5.876999,
+  \u00D2: 5.876999,
+  \u00D6: 5.876999,
+  \u00D4: 5.876999,
+  \u00D5: 5.876999,
+  \u00D8: 5.876999,
+  P: 5.498989,
+  Q: 5.876999,
+  R: 5.768989,
+  S: 5.453991,
+  \u0160: 5.453991,
+  T: 4.931992,
+  U: 5.966995,
+  V: 5.741993,
+  W: 8.729999,
+  X: 6.002998,
+  Y: 5.426994,
+  \u00DD: 5.426994,
+  \u0178: 5.426994,
+  "!": 2.636993,
+  '"': 3.554992,
+  "'": 2.078991,
+  "#": 5.723992,
+  $: 5.264992,
+  "%": 6.596992,
+  "&": 5.660992,
+  "(": 3.203991,
+  ")": 3.095993,
+  "*": 4.796997,
+  "+": 5.174996,
+  ",": 2.313,
+  "-": 4.292999,
+  ".": 2.313,
+  "/": 3.275997,
+  ":": 2.313,
+  ";": 2.313,
+  "<": 5.327992,
+  "=": 5.174996,
+  ">": 5.327992,
+  "?": 4.994991,
+  "@": 9.593994,
+  "[": 3.284993,
+  "\\": 3.275997,
+  "]": 3.239994,
+  "^": 5.174996,
+  _: 5.219993,
+  "`": 2.636993,
+  "{": 3.518989,
+  "|": 2.501999,
+  "}": 3.518989,
+  "~": 5.174996,
+  "\u2022": 3.941998,
+  "\u2026": 6.938993,
+  "\xB0": 3.437988,
+  \u00B5: 5.210999,
+  "\xB2": 3.131996,
+  "\xB3": 3.131996,
+  "\xB1": 5.174996,
+  "\u20AC": 5.264992,
+  "\xA3": 5.264992,
+  "\xA5": 5.174996
+};
+const charsFontWidth16pixelsSize500Map = {
+  "0": 9.279988,
+  "1": 9.279988,
+  "2": 9.279988,
+  "3": 9.279988,
+  "4": 9.279988,
+  "5": 9.279988,
+  "6": 9.279988,
+  "7": 9.279988,
+  "8": 9.279988,
+  "9": 9.279988,
+  a: 8.927999,
+  b: 8.991984,
+  c: 7.791992,
+  d: 8.991984,
+  e: 8.543987,
+  f: 6.112,
+  g: 8.911987,
+  h: 9.296,
+  i: 4.239991,
+  j: 4.367981,
+  k: 8.415995,
+  l: 4.735983,
+  m: 14.287984,
+  n: 9.263997,
+  o: 8.655985,
+  p: 8.991984,
+  q: 9.007996,
+  r: 6.575989,
+  s: 7.919983,
+  t: 6.159993,
+  u: 9.263997,
+  v: 8.063985,
+  w: 12.271993,
+  x: 8.399984,
+  y: 8.015991,
+  z: 8.095988,
+  \u00E1: 8.927999,
+  \u00E0: 8.927999,
+  \u00E4: 8.927999,
+  \u00E2: 8.927999,
+  \u00E3: 8.927999,
+  \u00E5: 8.927999,
+  \u00E7: 7.791992,
+  \u00E9: 8.543987,
+  \u00E8: 8.543987,
+  \u00EB: 8.543987,
+  \u00EA: 8.543987,
+  \u00ED: 4.239991,
+  \u00EC: 4.239991,
+  \u00EF: 4.239991,
+  \u00F1: 9.263997,
+  \u00F3: 8.655985,
+  \u00F2: 8.655985,
+  \u00F6: 8.655985,
+  \u00F4: 8.655985,
+  \u00F5: 8.655985,
+  \u00F8: 8.655985,
+  \u0161: 7.919983,
+  \u00FD: 8.015991,
+  \u00FF: 8.015991,
+  Z: 9.727987,
+  A: 10.319987,
+  \u00C1: 10.319987,
+  \u00C0: 10.319987,
+  \u00C4: 10.319987,
+  \u00C2: 10.319987,
+  \u00C3: 10.319987,
+  \u00C5: 10.319987,
+  B: 10,
+  C: 9.663981,
+  \u00C7: 9.663981,
+  D: 10.191996,
+  E: 9.408,
+  \u00C9: 9.408,
+  \u00C8: 9.408,
+  \u00CB: 9.408,
+  \u00CA: 9.408,
+  F: 8.943991,
+  G: 10.112,
+  H: 11.055989,
+  I: 6.175985,
+  \u00CD: 6.175985,
+  \u00CC: 6.175985,
+  \u00CF: 6.175985,
+  J: 7.391988,
+  K: 10,
+  L: 8.399984,
+  " ": 4.095988,
+  M: 13.503988,
+  N: 11.199992,
+  O: 10.447999,
+  \u00D3: 10.447999,
+  \u00D2: 10.447999,
+  \u00D6: 10.447999,
+  \u00D4: 10.447999,
+  \u00D5: 10.447999,
+  \u00D8: 10.447999,
+  P: 9.77598,
+  Q: 10.447999,
+  R: 10.255981,
+  S: 9.695984,
+  \u0160: 9.695984,
+  T: 8.767985,
+  U: 10.607992,
+  V: 10.207988,
+  W: 15.519999,
+  X: 10.671997,
+  Y: 9.647989,
+  \u00DD: 9.647989,
+  \u0178: 9.647989,
+  "!": 4.687988,
+  '"': 6.319987,
+  "'": 3.695984,
+  "#": 10.175985,
+  $: 9.359985,
+  "%": 11.727987,
+  "&": 10.063985,
+  "(": 5.695984,
+  ")": 5.503988,
+  "*": 8.527995,
+  "+": 9.199992,
+  ",": 4.112,
+  "-": 7.631999,
+  ".": 4.112,
+  "/": 5.823995,
+  ":": 4.112,
+  ";": 4.112,
+  "<": 9.471985,
+  "=": 9.199992,
+  ">": 9.471985,
+  "?": 8.879984,
+  "@": 17.055989,
+  "[": 5.839987,
+  "\\": 5.823995,
+  "]": 5.759989,
+  "^": 9.199992,
+  _: 9.279988,
+  "`": 4.687988,
+  "{": 6.255981,
+  "|": 4.447999,
+  "}": 6.255981,
+  "~": 9.199992,
+  "\u2022": 7.007996,
+  "\u2026": 12.335988,
+  "\xB0": 6.111979,
+  \u00B5: 9.263997,
+  "\xB2": 5.567993,
+  "\xB3": 5.567993,
+  "\xB1": 9.199992,
+  "\u20AC": 9.359985,
+  "\xA3": 9.359985,
+  "\xA5": 9.199992
+};

package/charts/core/components/text-ellipsis/truncate-string.d.ts

@@ -15,6 +15,14 @@ export declare const TEXT_HEIGHT = 12;
  * @public
  */
 export declare const calculateWidth: (text: string, fontWidthMap: Record<string, number>) => number;
+/**
+ * Controls which side of the string the middle-truncation generator starts
+ * collecting characters from. 'start' keeps head characters first (e.g.
+ * "3…" for "37%"), 'end' keeps tail characters first (e.g. "…%" for "37%").
+ * Only affects the 'middle' truncation mode.
+ * @public
+ */
+export type TruncationPriority = 'start' | 'end';
 /**
  * Truncates a string to fit within the given width by placing an ellipsis at the
  * start, middle, or end, depending on the truncation mode. If the text fits, it
@@ -30,7 +38,10 @@ export declare const calculateWidth: (text: string, fontWidthMap: Record<string,
  * @param availableWidth - Max allowed width in CSS pixels for the final output.
  * @param fontWidthMap - Per-character width map for the active font.
  * @param truncationMode - Where to place the ellipsis: 'start' | 'middle' | 'end'.
+ * @param priority - For 'middle' mode only: 'start' keeps head characters first
+ *   (e.g. "3…"), 'end' keeps tail characters first (e.g. "…%").
+ *   Defaults to 'end' to match the legacy behavior.
  * @returns The truncated string with ellipsis applied according to the mode.
  * @public
  */
-export declare const truncateString: (text: string, availableWidth: number, fontWidthMap: Record<string, number>, truncationMode?: TruncationMode) => string;
+export declare const truncateString: (text: string, availableWidth: number, fontWidthMap: Record<string, number>, truncationMode?: TruncationMode, priority?: TruncationPriority) => string;

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

@@ -53,14 +53,24 @@ const buildTruncatedOutput = {
     return `${import_utils.ELLIPSIS_CHARACTER}${reversed}`;
   },
   end: (kept) => `${kept}${import_utils.ELLIPSIS_CHARACTER}`,
-  middle: (kept) => {
+  middle: (kept, priority) => {
     let head = "";
     let tail = "";
-    for (let i = 0; i < kept.length; i++) {
-      if (i % 2 === 0) {
-        tail = kept[i] + tail;
-      } else {
-        head += kept[i];
+    if (priority === "start") {
+      for (let i = 0; i < kept.length; i++) {
+        if (i % 2 === 0) {
+          head += kept[i];
+        } else {
+          tail = kept[i] + tail;
+        }
+      }
+    } else {
+      for (let i = 0; i < kept.length; i++) {
+        if (i % 2 === 0) {
+          tail = kept[i] + tail;
+        } else {
+          head += kept[i];
+        }
       }
     }
     return `${head}${import_utils.ELLIPSIS_CHARACTER}${tail}`;
@@ -77,19 +87,24 @@ const keepSequenceGenerators = {
       yield ch;
     }
   },
-  middle: function* fromBothEnds(text) {
+  middle: function* fromBothEnds(text, priority) {
     let left = 0;
     let right = text.length - 1;
     while (left < right) {
-      yield text[right--];
-      yield text[left++];
+      if (priority === "start") {
+        yield text[left++];
+        yield text[right--];
+      } else {
+        yield text[right--];
+        yield text[left++];
+      }
     }
     if (left === right) {
       yield text[left];
     }
   }
 };
-const truncateString = (text, availableWidth, fontWidthMap, truncationMode = "middle") => {
+const truncateString = (text, availableWidth, fontWidthMap, truncationMode = "middle", priority = "end") => {
   const fullTextWidth = calculateWidth(text, fontWidthMap);
   const roundedAvailableWidth = Math.round(availableWidth) + EPSILON_PX;
   if (fullTextWidth <= roundedAvailableWidth) {
@@ -101,7 +116,7 @@ const truncateString = (text, availableWidth, fontWidthMap, truncationMode = "mi
   const keptChars = accumulateUntilCapacity(
     availableWidth,
     fontWidthMap,
-    keepSequenceGenerators[truncationMode](text)
+    truncationMode === "middle" ? keepSequenceGenerators.middle(text, priority) : keepSequenceGenerators[truncationMode](text)
   );
-  return buildTruncatedOutput[truncationMode](keptChars);
+  return truncationMode === "middle" ? buildTruncatedOutput.middle(keptChars, priority) : buildTruncatedOutput[truncationMode](keptChars);
 };

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

@@ -1,43 +1,43 @@
-._18heesa0-3-0-1 {
+._18heesa0-3-1-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-0-1 {
+._18heesa1-3-1-0 {
   border-right: var(--dt-borders-width-default, 1px) var(--dt-borders-style-default, solid) var(--dt-colors-border-neutral-default, #dadbe4);
 }
-._18heesa2-3-0-1 {
+._18heesa2-3-1-0 {
   border-left: var(--dt-borders-width-default, 1px) var(--dt-borders-style-default, solid) var(--dt-colors-border-neutral-default, #dadbe4);
 }
-._18heesa3-3-0-1 {
+._18heesa3-3-1-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-0-1 {
+._18heesa4-3-1-0 {
   transform: scaleX(-1) translateX(-100%);
 }
-._18heesa5-3-0-1 {
+._18heesa5-3-1-0 {
   transform: none;
 }
-._18heesa6-3-0-1 {
+._18heesa6-3-1-0 {
   transform: rotate(-90deg) scaleX(-1);
 }
-._18heesa7-3-0-1 {
+._18heesa7-3-1-0 {
   transform: rotate(-90deg) translateX(-100%);
 }
-._18heesa8-3-0-1 {
+._18heesa8-3-1-0 {
   display: flex;
   flex-wrap: nowrap;
   justify-content: space-between;
   align-items: center;
   width: 100%;
 }
-._18heesa9-3-0-1 {
+._18heesa9-3-1-0 {
   flex: 1;
   margin-right: var(--dt-spacings-size-8, 8px);
 }
-._18heesaa-3-0-1 {
+._18heesaa-3-1-0 {
   min-width: 24px;
   display: flex;
   align-items: center;
@@ -51,6 +51,6 @@
   border-radius: var(--dt-borders-radius-field-subdued, 3px);
   word-break: break-word;
 }
-._18heesab-3-0-1 {
+._18heesab-3-1-0 {
   overflow: hidden;
 }

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

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

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

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

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

@@ -169,7 +169,8 @@ const InternalChartToolbarRenderer = (props) => {
         tooltipText: intl.formatMessage(import_messages.TOOLBAR_MESSAGES.chartToolbarExpand),
         onClick: () => expandHandler(true),
         tabIndex: -1,
-        testId: "toolbar-expand-button"
+        testId: "toolbar-expand-button",
+        "data-dt-name": "ToolbarExpand"
       }
     ),
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -330,6 +331,7 @@ const InternalChartToolbarRenderer = (props) => {
                               onMenuLeave: handleOnMenuLeave,
                               menuAlignment: isExpanded ? "start" : "end",
                               onCloseAutoFocus,
+                              "data-dt-name": isExpanded && fitsBounds ? "ToolbarChangeMode" : "ToolbarTools",
                               children: [
                                 children,
                                 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(

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

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

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

@@ -50,7 +50,8 @@ const CollapseButton = ({ onClick }) => {
       onKeyDown: onKeyDownHandler,
       onClick: onClickHandler,
       tabIndex,
-      divider: "left"
+      divider: "left",
+      "data-dt-name": "ToolbarCollapse"
     }
   );
 };

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

@@ -2,4 +2,4 @@ import type { IntentsAsyncTemplate } from '../types.js';
 export declare const AsyncIntents: ({ intentsAsyncTemplate, shouldRun, }: {
     intentsAsyncTemplate: IntentsAsyncTemplate | undefined;
     shouldRun: boolean;
-}) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+}) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;

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

@@ -26,5 +26,5 @@ const AsyncIntents = ({
   intentsAsyncTemplate,
   shouldRun
 }) => {
-  return (0, import_useResolveAsyncComponent.useResolveAsyncComponent)(shouldRun ? intentsAsyncTemplate : void 0);
+  return (0, import_useResolveAsyncComponent.useResolveAsyncComponent)(intentsAsyncTemplate, shouldRun);
 };

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

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

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

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