@dynatrace/strato-components 3.8.0 → 3.9.0

package/CHANGELOG.md

@@ -1,5 +1,150 @@
 # components
 
+## 3.9.0
+
+### Deprecations
+
+#### Forms
+
+- Deprecated the legacy `controlState` validation override APIs in favor of `FormFieldMessages` and native validation props. (APPDEV-18261)
+
+#### FormField
+
+- Deprecated the legacy `controlId` fallback. Pass `id` to the form control instead. (APPDEV-18261)
+
+### Updates
+
+#### General
+
+- Updated the `@vanilla-extract/css` dependency to `1.21.1`, which fixes non-deterministic style composition output. An empty composed style used in a selector (e.g. a `disabled` state combining `readOnly` and `ariaDisabled`) could intermittently drop a class, changing generated class names between builds and, in rare cases, leaving a selector-targeted state unstyled.
+
+#### Charts
+
+- Fixed the annotation markers band top separator appearing when there is only one visible track, and the missing bottom separator in `XYChart` when track labels are displayed. (APPDEV-18335)
+
+#### Editors
+
+- Autocomplete no longer resets to the first page when hovering over a suggestion in a paginated autocomplete list. (APPDEV-18530)
+- Fixed type-over behavior so typing a closing bracket or quote next to an auto-inserted one skips over it instead of inserting a duplicate when the editor is used in controlled mode. (APPDEV-18663)
+
+#### Forms
+
+- Improved consistency of form-control IDs, hints, errors, and validation behavior across migrated form controls. (APPDEV-18261)
+
+#### Layouts
+
+- Added a controlled `width` prop to `PageLayout.Details` for full control of the details panel width. Pair it with the existing `onResize` callback to follow drag-resizing; the requested width is clamped to fit the active layout mode (within `minWidth`/`maxWidth` in split, or the available container width in overlay). When omitted, the panel manages its own width from `defaultWidth`. (APPDEV-18256)
+- Fixed `PageLayout.Sidebar` and `PageLayout.Details` breakpoint crossings overwriting a controlled `collapsed` and firing `onCollapsedChange` for controlled panels. A crossing now fires the new `onBreakpointTransition(belowBreakpoint)` callback instead and never changes a controlled `collapsed`. An uncontrolled `Sidebar` still auto-collapses below the breakpoint and reopens above it; `Details` never auto-collapses and honors `defaultCollapsed` on every viewport. Migration: use `onBreakpointTransition` instead of `onCollapsedChange` to react to crossings; consumers relying on the component to auto-close a controlled panel on narrow viewports must subscribe to `onBreakpointTransition` and update `collapsed` themselves. (APPDEV-18164)
+
+#### Overlays
+
+- Reduce Modal and Sheet horizontal padding to 16px on mobile viewports (APPDEV-18055)
+
+#### AnnotationsChart
+
+- Markers that visually collide on canvas, whether placed a single unit apart or overlapping through a long label, are now grouped into a shared tooltip so every marker stays reachable. You can also bring a marker to the front by hovering its item in a pinned tooltip. (APPDEV-18332)
+- Fix tooltip not pinning on first tap on iOS. (APPDEV-18345)
+- Added `symbolColor` prop to annotation markers. (APPDEV-12894)
+
+#### CategoricalBarChart
+
+- Fixed clicking a series item in the tooltip not opening its action menu and incorrectly re-pinning the tooltip at the click coordinates. (APPDEV-18480)
+
+#### CodeEditor
+
+- Improved the line highlight animation that plays when the editor value changes externally. The highlight now appears instantly and fades out smoothly, using a subtler color that no longer inverts the text color. (APPDEV-18552)
+- Fixed controlled folding from failing to unfold when positions were removed from the `folding` prop (APPDEV-18343)
+- Fixed folding not working when cursor was positioned inside the block in controlled setting. (APPDEV-18343)
+
+#### DataTable
+
+- Added `formatDownloadHeader` callback to `DataTable.DownloadData` and `DataTableRef.downloadData()` to override CSV header names per column. The callback receives `{ columnId, leafHeader, groupHeader }` and can return a replacement string or `undefined` to keep the default header name. (APPDEV-10809)
+- The download "All" option is no longer shown when using server-side pagination. (APPDEV-18494)
+- Row and cell action menus are now closed when the table is scrolled and their anchor row leaves the visible area. (APPDEV-17725)
+- Added `disabledRowDragAndDropTooltip` to the `rowOrdering` config and the `useLockedRowOrder` hook to explain why a row's drag handle is disabled. A default tooltip is shown while the table is sorted. (APPDEV-17473)
+- Fixed the phantom drag mode that left column headers unresponsive to interactions after starting to drag a column and releasing immediately. (APPDEV-18523)
+- Improved the look and feel of the column settings modal, as follows: columns are now grouped under "Pinned to left", "Pinned to right", and "Unpinned" section headers; drag handles moved to the left and the visibility and pinning controls to the right; hidden columns show a "Hidden" chip, and the controls have updated icons. (APPDEV-17477)
+- Fixed the URL detection behavior in text column link rendering. (APPDEV-18658)
+- Fixed the row drag handle tooltip not updating when the multi-sort changed. (APPDEV-17473)
+- You can now customize the CSV download file name by passing a string or callback to the new `fileName` prop. (APPDEV-10808)
+
+#### DateTimePicker
+
+- Fixed the `TypeError` caused by `Intl.DisplayNames.supportedLocalesOf` being unavailable. (APPDEV-18299)
+
+#### DQLEditor
+
+- The "Format query" action menu item now displays its keyboard shortcut (`Cmd+Shift+F` on macOS, `Ctrl+Shift+F` on Windows/Linux). (APPDEV-18298)
+- Improved the line highlight animation that plays when the editor value changes externally. The highlight now appears instantly and fades out smoothly, using a subtler color that no longer inverts the text color. (APPDEV-18552)
+- Now shows the correct autocomplete suggestions after a duration unit. (APPDEV-18323)
+- Code folding is now supported for block comments and subqueries. (APPDEV-18343)
+- Now shows the correct autocomplete suggestion when typing a duration unit alias after a number. (APPDEV-18323)
+- Fixed the issue where autosuggestions could carry over between separate DQL editors. (APPDEV-18160)
+- Autocomplete now runs a fresh query when you type a dot, ensuring all fields are included in the suggestions. (APPDEV-18160)
+
+#### ExternalLink
+
+- Fixed the href attribute handling. (APPDEV-18658)
+
+#### FilterField
+
+- Fixed programmatic validation so `validate()` reveals the validation result consistently, including while the field has focus. (APPDEV-18261)
+- Recent and pinned filter suggestions now use full syntax highlighting. (APPDEV-18229)
+
+#### FormField
+
+- Improved id semantics so labels, validation messages, and grouped controls target the intended form controls. (APPDEV-18261)
+
+#### GaugeChart
+
+- Fixed the tooltip trigger area to match the arc shape, so the tooltip no longer activates when hovering or tapping in the empty region outside the arc's angular span. (APPDEV-18472)
+
+#### NumberInputV2
+
+- Range/step validation errors (min/max/step) now block form submission and are no longer cleared when the `required` prop changes. (APPDEV-18575)
+
+#### SegmentSelector
+
+- Validates variable names against the defined includes filters.
+- Fixed validation error being shown too early when selecting a segment with variables. (APPDEV-17459)
+- Increased the maximum number of result records from 10,000 to 15,000. (APPDEV-18655)
+
+#### Select
+
+- Fixed an issue where pressing Enter to open the dropdown would also submit an enclosing form. (APPDEV-18459)
+
+#### SingleValue
+
+- Fixed context value labels for flat-line Sparkline. (APPDEV-18502)
+
+#### TimeframeSelector
+
+- Fixed the `TypeError` caused by `Intl.DisplayNames.supportedLocalesOf` being unavailable. (APPDEV-18299)
+- Fixed the stepper not shifting absolute timeframes correctly. (APPDEV-18458)
+
+#### TimeseriesChart
+
+- Fixed annotation range marker labels expanding beyond their bounded width instead of truncating to fit. (APPDEV-18444)
+
+#### TopList
+
+- Fixed `TopList` bar labels using wrong color contrast when a ColorRule overrides the bar color. (APPDEV-18660)
+- You can now apply per-datapoint color overrides to bars by passing one or more `<TopList.ColorRule>` slots as children. (APPDEV-18262)
+
+#### XYChart
+
+- Fixed the `onZoomChange` callback firing when the domain did not actually change, such as when zooming at a boundary, panning at an edge, resetting with no zoom applied, or selecting a zoom range identical to the current domain. (APPDEV-13044)
+- Fixed `XYChart.BarSeriesBar` labels using wrong color contrast when a ColorRule overrides the bar color. (APPDEV-18660)
+- `XYChart.BarSeries` now allows configuring color rules per datapoint. When every bar in the series is recolored to the same rule color, the legend swatch adopts that color; if only some bars match (or match different colors), the legend keeps the original series color. (APPDEV-18262)
+
+## 3.8.1
+
+### Updates
+
+#### FilterField
+
+- Fixed build warnings due to extra commas in css file (APPDEV-18608)
+
 ## 3.8.0
 
 ### Dependency updates

package/buttons/button/Button.css

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

package/buttons/button/Button.sty.js

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

package/buttons/intent-button/IntentButton.css

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

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

@@ -21,4 +21,4 @@ __export(IntentButton_css_exports, {
 });
 module.exports = __toCommonJS(IntentButton_css_exports);
 var import_IntentButton_css_ts_vanilla = require("./IntentButton.css");
-var disabledAppIconOpacity = "_1xe9ern0-3-8-0";
+var disabledAppIconOpacity = "_1xe9ern0-3-9-0";

package/buttons/notify-button/NotifyButton.css

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

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

@@ -22,5 +22,5 @@ __export(NotifyButton_css_exports, {
 });
 module.exports = __toCommonJS(NotifyButton_css_exports);
 var import_NotifyButton_css_ts_vanilla = require("./NotifyButton.css");
-var overlay = "_1j9pkom0-3-8-0";
-var toast = "_1j9pkom1-3-8-0";
+var overlay = "_1j9pkom0-3-9-0";
+var toast = "_1j9pkom1-3-9-0";

package/charts/categorical-bar/components/interactions/hooks/useSeriesActionClickHandler.d.ts

@@ -1,8 +1,8 @@
 import { type MouseEvent as ReactMouseEvent } from 'react';
 /**
  * Hook responsible to return the handler called when clicking on a category action.
- * The handler will handle the logic of keeping the tooltip open in case there are
- * multiple entries in the tooltip, hiding the tooltip alternatively.
+ * When the tooltip has multiple entries, the handler keeps it open after a click.
+ * In both cases it stops propagation to avoid unexpected side effects.
  * @param hasMultipleItems -
  */
 export declare const useSeriesActionClickHandler: (hasMultipleItems: boolean) => (e: ReactMouseEvent) => void;

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

@@ -21,9 +21,7 @@ __export(useSeriesActionClickHandler_exports, {
 });
 module.exports = __toCommonJS(useSeriesActionClickHandler_exports);
 var import_is_link_action = require("../../../../core/components/series-action/utils/is-link-action.js");
-var import_selectors = require("../../../hooks/store/selectors.js");
 const useSeriesActionClickHandler = (hasMultipleItems) => {
-  const setState = (0, import_selectors.useSetState)();
   const multiItemsActionClickHandler = (e) => {
     if (!(0, import_is_link_action.isLinkAction)(e.target)) {
       e.preventDefault();
@@ -31,16 +29,7 @@ const useSeriesActionClickHandler = (hasMultipleItems) => {
     e.stopPropagation();
   };
   const singleItemActionClickHandler = (e) => {
-    setState((prev) => ({
-      ...prev,
-      overlays: {
-        ...prev.overlays,
-        visibleTooltip: false,
-        pinnedTooltip: false,
-        mouseInBounds: false,
-        mousePosition: void 0
-      }
-    }));
+    e.stopPropagation();
   };
   return hasMultipleItems ? multiItemsActionClickHandler : singleItemActionClickHandler;
 };

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

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

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

@@ -23,5 +23,5 @@ __export(CategoricalBarChartInspectOverlay_css_exports, {
 module.exports = __toCommonJS(CategoricalBarChartInspectOverlay_css_exports);
 var import_ChartGrid_css_ts_vanilla = require("../../../../core/components/chart-grid/ChartGrid.css");
 var import_CategoricalBarChartInspectOverlay_css_ts_vanilla = require("./CategoricalBarChartInspectOverlay.css");
-var crosshairLayout = "_1wi8enr0-3-8-0 _13lzg4k0-3-8-0";
-var dataPointLayout = "_1wi8enr1-3-8-0 _13lzg4k0-3-8-0";
+var crosshairLayout = "_1wi8enr0-3-9-0 _13lzg4k0-3-9-0";
+var dataPointLayout = "_1wi8enr1-3-9-0 _13lzg4k0-3-9-0";

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

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

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

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

package/charts/core/components/annotations/AnnotationsAtom.d.ts

@@ -16,6 +16,13 @@ export interface AnnotationsAtomProps {
      * @defaultValue 'DEFAULT_LABELS_WIDTH' constant
      */
     labelsWidth?: number;
+    /**
+     * Draws a separator line below the bottom-most track. Used when the
+     * annotations area is not directly adjacent to the plot (e.g. an XY chart
+     * with a top axis) and the plot border cannot act as the separator.
+     * @defaultValue false
+     */
+    outerBottomLine?: boolean;
 }
 /**
  * The Annotations atomic component

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

@@ -43,7 +43,8 @@ const _AnnotationsAtom = (props) => {
     width,
     children,
     showLabels = true,
-    labelsWidth = import_constants.DEFAULT_LABELS_WIDTH
+    labelsWidth = import_constants.DEFAULT_LABELS_WIDTH,
+    outerBottomLine = false
   } = props;
   const trackWidth = width - labelsWidth;
   const tracks = (0, import_extract_visible_tracks.extractVisibleTracks)(children);
@@ -69,7 +70,8 @@ const _AnnotationsAtom = (props) => {
           value: {
             showLabels,
             labelsWidth,
-            trackWidth
+            trackWidth,
+            outerBottomLine
           },
           children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_MarkersByTrack_context.MarkersByTrackContext.Provider, { value: tracksConfig, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_MarkerCoordinates_context.MarkerCoordinatesContext.Provider, { value: markersPerTrack, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_MarkerEventHandlers_context.MarkerEventHandlersContext.Provider, { value: markerEventHandlers, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TrackEventHandlers_context.TrackEventHandlersContext.Provider, { value: trackEventHandlers, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_CanvasSvgToImages_Provider.CanvasSvgToImagesProvider, { icons, children: [
             /* @__PURE__ */ (0, import_jsx_runtime.jsx)(

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

@@ -21,4 +21,4 @@ __export(AnnotationsAtom_css_exports, {
 });
 module.exports = __toCommonJS(AnnotationsAtom_css_exports);
 var import_AnnotationsAtom_css_ts_vanilla = require("./AnnotationsAtom.css");
-var wrapper = "_145zb630-3-8-0";
+var wrapper = "_145zb630-3-9-0";

package/charts/core/components/annotations/components/AnnotationsRenderer.d.ts

@@ -10,6 +10,7 @@ type AnnotationsRendererProps = {
     tracks: AnnotationsTrackConfig[];
     textOverflow: TextOverflowOptions;
     truncateMode?: TruncationMode;
+    outerBottomLine?: boolean;
 };
 export declare const AnnotationsRenderer: (props: AnnotationsRendererProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/charts/core/components/annotations/components/AnnotationsRenderer.js

@@ -32,6 +32,11 @@ var import_calculate_marker_dimension = require("../utils/calculate-marker-dimen
 var import_define_marker_brightness_state = require("../utils/define-marker-brightness-state.js");
 var import_define_marker_color = require("../utils/define-marker-color.js");
 var import_define_marker_content = require("../utils/define-marker-content.js");
+const compareByHoverAwarePriority = (isHovered, getPriority) => (a, b) => {
+  const priorityA = isHovered(a) ? Infinity : getPriority(a);
+  const priorityB = isHovered(b) ? Infinity : getPriority(b);
+  return priorityA - priorityB;
+};
 const AnnotationsRenderer = (props) => {
   const {
     scale,
@@ -40,10 +45,11 @@ const AnnotationsRenderer = (props) => {
     showLabels,
     tracks,
     textOverflow,
-    truncateMode
+    truncateMode,
+    outerBottomLine
   } = props;
   const overlay = (0, import_OverlayContext.useOverlay)();
-  const groupedData = (0, import_useGroupedAnnotationsData.useGroupedAnnotationsData)(tracks, scale.domain());
+  const groupedData = (0, import_useGroupedAnnotationsData.useGroupedAnnotationsData)(tracks, scale, textOverflow);
   const selection = (0, import_selectors.useAnnotationsSelectionState)();
   const { handleMouseEnter, handleMouseMove, handleMouseLeave, handleClick } = (0, import_useMarkerEventHandlers.useMarkerEventHandlers)(overlay.overlayRef);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -52,9 +58,14 @@ const AnnotationsRenderer = (props) => {
       width,
       labelsWidth: labelsOffset,
       showLabels,
+      outerBottomLine,
       children: groupedData.map((track, trackNumber) => {
+        const hoveredKey = selection.pinnedGroup ? selection.hoverGroupListKey : void 0;
         const currentTrack = Array.from(track.markers.entries()).sort(
-          ([, a], [, b]) => Math.max(...a.map((g) => g.priority)) - Math.max(...b.map((g) => g.priority))
+          compareByHoverAwarePriority(
+            ([, group]) => group.some((g) => g.key === hoveredKey),
+            ([, group]) => Math.max(...group.map((g) => g.priority))
+          )
         );
         return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           import_TrackAtom.TrackAtom,
@@ -62,9 +73,14 @@ const AnnotationsRenderer = (props) => {
             label: track.label,
             hidden: track.hidden,
             children: currentTrack.map(([groupId, annotationsGroup]) => {
-              return annotationsGroup.toSorted((a, b) => a.priority - b.priority).map(({ key: markerId, markers }) => {
+              return annotationsGroup.toSorted(
+                compareByHoverAwarePriority(
+                  (g) => hoveredKey === g.key,
+                  (g) => g.priority
+                )
+              ).map(({ key: markerId, markers }) => {
                 const [marker] = markers;
-                const color = (0, import_define_marker_color.defineMarkerColor)(markers);
+                const { color, symbolColor } = (0, import_define_marker_color.defineMarkerColors)(markers);
                 const state = (0, import_define_marker_brightness_state.defineMarkerBrightnessState)(
                   markerId,
                   selection
@@ -77,6 +93,7 @@ const AnnotationsRenderer = (props) => {
                     x,
                     width: width2,
                     color,
+                    symbolColor,
                     onMouseEnter: handleMouseEnter(
                       markerId,
                       groupId,

package/charts/core/components/annotations/components/canvas/AnnotationsCanvasLayout.css

@@ -1,4 +1,4 @@
-._1yc349j0-3-8-0 {
+._1yc349j0-3-9-0 {
   position: absolute;
   top: 0;
   left: 0;

package/charts/core/components/annotations/components/canvas/AnnotationsCanvasLayout.sty.js

@@ -21,4 +21,4 @@ __export(AnnotationsCanvasLayout_css_exports, {
 });
 module.exports = __toCommonJS(AnnotationsCanvasLayout_css_exports);
 var import_AnnotationsCanvasLayout_css_ts_vanilla = require("./AnnotationsCanvasLayout.css");
-var canvasContainer = "_1yc349j0-3-8-0";
+var canvasContainer = "_1yc349j0-3-9-0";