@dynatrace/strato-components 3.11.2 → 3.12.0

package/charts/core/components/legend/range/components/RangeLegendSegments/RangeLegendSegments.css

@@ -1,21 +1,21 @@
-._6z9t250-3-11-2 {
+._6z9t250-3-12-0 {
   display: block;
   border-radius: 2px;
   overflow: hidden;
   background-color: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
 }
-._6z9t250-3-11-2:focus {
+._6z9t250-3-12-0:focus {
   outline: none;
 }
-._6z9t251-3-11-2 {
+._6z9t251-3-12-0 {
   margin: 0 auto;
   width: 100%;
   height: 10px;
 }
-._6z9t252-3-11-2 {
+._6z9t252-3-12-0 {
   height: 100%;
   width: 10px;
 }
-._6z9t250-3-11-2 rect:focus {
+._6z9t250-3-12-0 rect:focus {
   outline: none;
 }

package/charts/core/components/legend/range/components/RangeLegendSegments/RangeLegendSegments.sty.js

@@ -22,4 +22,4 @@ __export(RangeLegendSegments_css_exports, {
 module.exports = __toCommonJS(RangeLegendSegments_css_exports);
 var import_RangeLegendSegments_css_ts_vanilla = require("./RangeLegendSegments.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var legendSvg = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_6z9t250-3-11-2", variantClassNames: { isHorizontal: { true: "_6z9t251-3-11-2", false: "_6z9t252-3-11-2" } }, defaultVariants: {}, compoundVariants: [] });
+var legendSvg = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_6z9t250-3-12-0", variantClassNames: { isHorizontal: { true: "_6z9t251-3-12-0", false: "_6z9t252-3-12-0" } }, defaultVariants: {}, compoundVariants: [] });

package/charts/core/components/legend/shared/context/Legend.context.js

@@ -28,6 +28,7 @@ const LegendContext = (0, import_react.createContext)({
   onLegendIconClick: () => void 0,
   onItemHover: () => void 0,
   onLegendNameClick: () => void 0,
-  interactionsDisabled: false
+  interactionsDisabled: false,
+  onAnnounce: () => void 0
 });
 LegendContext["displayName"] = "LegendContext";

package/charts/core/components/loader-overlay/LoaderOverlay.css

@@ -1,4 +1,4 @@
-._bs5vaz0-3-11-2 {
+._bs5vaz0-3-12-0 {
   position: absolute;
   top: 0;
   width: 100%;
@@ -6,7 +6,7 @@
   z-index: 1;
   pointer-events: none;
 }
-._bs5vaz1-3-11-2 {
+._bs5vaz1-3-12-0 {
   position: absolute;
   top: 0;
   width: 100%;

package/charts/core/components/loader-overlay/LoaderOverlay.sty.js

@@ -22,5 +22,5 @@ __export(LoaderOverlay_css_exports, {
 });
 module.exports = __toCommonJS(LoaderOverlay_css_exports);
 var import_LoaderOverlay_css_ts_vanilla = require("./LoaderOverlay.css");
-var loaderOverlay = "_bs5vaz0-3-11-2";
-var progressCircle = "_bs5vaz1-3-11-2";
+var loaderOverlay = "_bs5vaz0-3-12-0";
+var progressCircle = "_bs5vaz1-3-12-0";

package/charts/core/components/overlay-tooltip/OverlayTooltip.d.ts

@@ -1,4 +1,4 @@
-import type { PropsWithChildren } from 'react';
+import { type PropsWithChildren } from 'react';
 import type { OverlayTooltipProps } from './types.js';
 /**
  * OverlayTooltip WIP component

package/charts/core/components/overlay-tooltip/OverlayTooltip.js

@@ -32,11 +32,19 @@ var import_Series = require("./components/series/Series.js");
 var import_SeriesHeader = require("./components/series/SeriesHeader.js");
 var import_SeriesItem = require("./components/series/SeriesItem.js");
 var import_TooltipPortal = require("./components/TooltipPortal.js");
+var import_OverlayContext = require("./contexts/OverlayContext.js");
+var import_useCanvasAriaDescribedBy = require("./hooks/useCanvasAriaDescribedBy.js");
+var import_useId = require("../../../../core/hooks/useId.js");
 const TooltipRoot = (props) => {
-  if (props.absoluteX !== void 0 && props.absoluteY !== void 0) {
+  const tooltipId = (0, import_useId.useId)();
+  const overlay = (0, import_OverlayContext.useOverlay)();
+  const isPortalMode = props.absoluteX !== void 0 && props.absoluteY !== void 0;
+  (0, import_useCanvasAriaDescribedBy.useCanvasAriaDescribedBy)(overlay.overlayRef, tooltipId, isPortalMode);
+  if (isPortalMode) {
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_TooltipPortal.TooltipPortal,
       {
+        id: tooltipId,
         isInteractive: props.isInteractive ?? false,
         absoluteX: props.absoluteX,
         absoluteY: props.absoluteY,

package/charts/core/components/overlay-tooltip/components/DynamicTooltip.d.ts

@@ -1,5 +1,6 @@
 import { type PropsWithChildren } from 'react';
 export declare const DynamicTooltip: (props: PropsWithChildren<{
+    id: string;
     pinned: boolean;
     absoluteX: number;
     absoluteY: number;

package/charts/core/components/overlay-tooltip/components/DynamicTooltip.js

@@ -31,7 +31,7 @@ var import_TooltipContext = require("../contexts/TooltipContext.js");
 var import_useTooltipReducer = require("../useTooltipReducer.js");
 var import_is_scroll_ignored = require("../utils/is-scroll-ignored.js");
 const DynamicTooltip = (props) => {
-  const { absoluteX, absoluteY, pinned } = props;
+  const { id, absoluteX, absoluteY, pinned } = props;
   const overlay = (0, import_OverlayContext.useOverlay)();
   const dispatch = (0, import_useTooltipReducer.useTooltipReducer)();
   const tooltip = (0, import_TooltipContext.useTooltip)();
@@ -119,6 +119,7 @@ const DynamicTooltip = (props) => {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_TooltipPortal.TooltipPortal,
     {
+      id,
       isInteractive: pinned,
       absoluteX,
       absoluteY,

package/charts/core/components/overlay-tooltip/components/DynamicTooltipRenderer.js

@@ -23,9 +23,12 @@ module.exports = __toCommonJS(DynamicTooltipRenderer_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_lodash_es = require("lodash");
 var import_DynamicTooltip = require("./DynamicTooltip.js");
+var import_useId = require("../../../../../core/hooks/useId.js");
 var import_LegacyTemplateTooltip = require("../components/LegacyTemplateTooltip.js");
 var import_constants = require("../constants.js");
 var import_ExternalConfigContext = require("../contexts/ExternalConfigContext.js");
+var import_OverlayContext = require("../contexts/OverlayContext.js");
+var import_useCanvasAriaDescribedBy = require("../hooks/useCanvasAriaDescribedBy.js");
 var import_useDefaultConfig = require("../hooks/useDefaultConfig.js");
 var import_selectors = require("../selectors.js");
 var import_build_content = require("../utils/build-content.js");
@@ -36,6 +39,9 @@ const DynamicTooltipRenderer = (props) => {
   );
   const { absoluteX, absoluteY, inBounds, pinned, data } = (0, import_selectors.useTooltipSnapshot)();
   const defaultConfig = (0, import_useDefaultConfig.useDefaultConfig)();
+  const tooltipId = (0, import_useId.useId)();
+  const overlay = (0, import_OverlayContext.useOverlay)();
+  (0, import_useCanvasAriaDescribedBy.useCanvasAriaDescribedBy)(overlay.overlayRef, tooltipId, inBounds);
   if (!inBounds || (0, import_lodash_es.isNull)(absoluteX) || (0, import_lodash_es.isNull)(absoluteY) || (0, import_utils.isTooltipDataEmpty)(data)) {
     return;
   }
@@ -48,6 +54,7 @@ const DynamicTooltipRenderer = (props) => {
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ExternalConfigContext.ExternalConfigContext.Provider, { value: config, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_LegacyTemplateTooltip.LegacyTemplateTooltip,
       {
+        id: tooltipId,
         pinned,
         absoluteX,
         absoluteY,
@@ -55,5 +62,14 @@ const DynamicTooltipRenderer = (props) => {
       }
     ) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_DynamicTooltip.DynamicTooltip, { pinned, absoluteX, absoluteY, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ExternalConfigContext.ExternalConfigContext.Provider, { value: config, children: content }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_DynamicTooltip.DynamicTooltip,
+    {
+      id: tooltipId,
+      pinned,
+      absoluteX,
+      absoluteY,
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ExternalConfigContext.ExternalConfigContext.Provider, { value: config, children: content })
+    }
+  );
 };

package/charts/core/components/overlay-tooltip/components/LegacyTemplateTooltip.d.ts

@@ -1,5 +1,6 @@
 import { type PropsWithChildren } from 'react';
 export declare const LegacyTemplateTooltip: (props: PropsWithChildren<{
+    id: string;
     pinned: boolean;
     absoluteX: number;
     absoluteY: number;

package/charts/core/components/overlay-tooltip/components/LegacyTemplateTooltip.js

@@ -27,7 +27,7 @@ var import_useChartActionsMenu = require("../../series-action/hooks/useChartActi
 var import_ActionSelectionContext = require("../../tooltip/context/ActionSelectionContext.js");
 var import_ChartTooltipMetadataContext = require("../../tooltip/context/ChartTooltipMetadataContext.js");
 const LegacyTemplateTooltip = (props) => {
-  const { absoluteX, absoluteY, pinned } = props;
+  const { id, absoluteX, absoluteY, pinned } = props;
   const tooltipRef = (0, import_react.useRef)(null);
   const {
     selectedItem: selectedItemId,
@@ -44,6 +44,7 @@ const LegacyTemplateTooltip = (props) => {
       children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ChartTooltipMetadataContext.ChartTooltipMetadataContext.Provider, { value: { tooltipRef }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         import_DynamicTooltip.DynamicTooltip,
         {
+          id,
           pinned,
           absoluteX,
           absoluteY,

package/charts/core/components/overlay-tooltip/components/TooltipPortal.d.ts

@@ -1,5 +1,6 @@
 import { type PropsWithChildren, type UIEventHandler } from 'react';
 export type TooltipPortalProps = PropsWithChildren<{
+    id: string;
     isInteractive: boolean;
     absoluteX: number;
     absoluteY: number;

package/charts/core/components/overlay-tooltip/components/TooltipPortal.js

@@ -29,7 +29,14 @@ var import_tooltip_container_dimensions_Provider = require("../providers/tooltip
 var import_tooltip_css = require("../tooltip.sty.js");
 var import_is_scroll_ignored = require("../utils/is-scroll-ignored.js");
 const TooltipPortal = (props) => {
-  const { absoluteX, absoluteY, isInteractive, onMouseLeave, onScrollCapture } = props;
+  const {
+    id,
+    absoluteX,
+    absoluteY,
+    isInteractive,
+    onMouseLeave,
+    onScrollCapture
+  } = props;
   const [tooltipWrapper, setTooltipWrapper] = (0, import_react.useState)(
     null
   );
@@ -42,6 +49,7 @@ const TooltipPortal = (props) => {
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       "div",
       {
+        id,
         role: "tooltip",
         "aria-label": "OverlayTooltip",
         ref: setTooltipWrapper,

package/charts/core/components/overlay-tooltip/components/global-actions/actions.css

@@ -1,4 +1,4 @@
-@keyframes _15am2yg1-3-11-2 {
+@keyframes _15am2yg1-3-12-0 {
   from {
     opacity: 0;
     max-height: 0;
@@ -12,7 +12,7 @@
     margin-top: var(--dt-spacings-size-4, 4px);
   }
 }
-._15am2yg0-3-11-2 {
+._15am2yg0-3-12-0 {
   display: block;
   padding: var(--dt-spacings-size-6, 6px) var(--dt-spacings-size-8, 8px);
   width: 100%;
@@ -24,7 +24,7 @@
   line-height: var(--dt-typography-text-base-emphasized-line-height, 1.4285714286);
   border-radius: var(--dt-borders-radius-field-default, 6px);
 }
-._15am2yg2-3-11-2 {
+._15am2yg2-3-12-0 {
   box-sizing: border-box;
   border-top: 1px solid var(--dt-colors-border-neutral-default, #dadbe4);
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
@@ -36,6 +36,6 @@
   padding: 0;
   margin-top: 0;
   overflow: hidden;
-  animation: _15am2yg1-3-11-2 var(--dt-animations-expand-collapse-duration-fast, 250ms) var(--dt-animations-expand-collapse-easing, cubic-bezier(0.4, 0, 0.2, 1)) both;
+  animation: _15am2yg1-3-12-0 var(--dt-animations-expand-collapse-duration-fast, 250ms) var(--dt-animations-expand-collapse-easing, cubic-bezier(0.4, 0, 0.2, 1)) both;
   animation-delay: 1200ms;
 }

package/charts/core/components/overlay-tooltip/components/global-actions/actions.sty.js

@@ -22,5 +22,5 @@ __export(actions_css_exports, {
 });
 module.exports = __toCommonJS(actions_css_exports);
 var import_actions_css_ts_vanilla = require("./actions.css");
-var actionButton = "_15am2yg0-3-11-2";
-var actionsPlaceholderTextAnimated = "_15am2yg2-3-11-2";
+var actionButton = "_15am2yg0-3-12-0";
+var actionsPlaceholderTextAnimated = "_15am2yg2-3-12-0";

package/charts/core/components/overlay-tooltip/components/header/Header.css

@@ -1,10 +1,10 @@
-._1ldhlar2-3-11-2 {
+._1ldhlar2-3-12-0 {
   padding: var(--dt-spacings-size-4, 4px) var(--dt-spacings-size-6, 6px);
-  width: var(--_1ldhlar1-3-11-2, calc(100% - 8px));
+  width: var(--_1ldhlar1-3-12-0, calc(100% - 8px));
   height: 100%;
   display: inline-block;
 }
-._1ldhlar3-3-11-2 {
+._1ldhlar3-3-12-0 {
   font-family: var(--dt-typography-text-small-emphasized-family, DynatraceFlow,Roboto,Helvetica,sans-serif);
   font-size: var(--dt-typography-text-small-emphasized-size, 12px);
   line-height: var(--dt-typography-text-small-emphasized-line-height, 1.333333333);
@@ -13,15 +13,15 @@
   margin: 0;
   padding: 0;
 }
-._1ldhlar4-3-11-2 {
+._1ldhlar4-3-12-0 {
   display: -webkit-box;
   -webkit-box-orient: vertical;
-  -webkit-line-clamp: var(--_1ldhlar0-3-11-2);
+  -webkit-line-clamp: var(--_1ldhlar0-3-12-0);
   overflow: hidden;
   text-overflow: ellipsis;
   word-break: break-word;
 }
-._1ldhlar5-3-11-2 {
+._1ldhlar5-3-12-0 {
   font-family: var(--dt-typography-text-small-default-family, DynatraceFlow,Roboto,Helvetica,sans-serif);
   font-size: var(--dt-typography-text-small-default-size, 12px);
   line-height: var(--dt-typography-text-small-default-line-height, 1.333333333);

package/charts/core/components/overlay-tooltip/components/header/Header.sty.js

@@ -26,9 +26,9 @@ __export(Header_css_exports, {
 });
 module.exports = __toCommonJS(Header_css_exports);
 var import_Header_css_ts_vanilla = require("./Header.css");
-var headerContainer = "_1ldhlar2-3-11-2";
-var headerSubText = "_1ldhlar5-3-11-2";
-var headerText = "_1ldhlar3-3-11-2";
-var headerTextMultiLine = "_1ldhlar4-3-11-2";
-var headerWidthVar = "var(--_1ldhlar1-3-11-2)";
-var maxLinesVar = "var(--_1ldhlar0-3-11-2)";
+var headerContainer = "_1ldhlar2-3-12-0";
+var headerSubText = "_1ldhlar5-3-12-0";
+var headerText = "_1ldhlar3-3-12-0";
+var headerTextMultiLine = "_1ldhlar4-3-12-0";
+var headerWidthVar = "var(--_1ldhlar1-3-12-0)";
+var maxLinesVar = "var(--_1ldhlar0-3-12-0)";

package/charts/core/components/overlay-tooltip/components/series/seriesSymbol.css

@@ -1,4 +1,4 @@
-._1ydozsr0-3-11-2 {
+._1ydozsr0-3-12-0 {
   height: var(--dt-spacings-size-16, 16px);
   width: var(--dt-spacings-size-16, 16px);
   font-size: var(--dt-spacings-size-16, 16px);
@@ -10,7 +10,7 @@
   justify-content: center;
   flex-shrink: 0;
 }
-._1ydozsr1-3-11-2 {
+._1ydozsr1-3-12-0 {
   height: var(--dt-spacings-size-24, 24px);
   width: var(--dt-spacings-size-24, 24px);
   font-size: var(--dt-spacings-size-24, 24px);

package/charts/core/components/overlay-tooltip/components/series/seriesSymbol.sty.js

@@ -22,5 +22,5 @@ __export(seriesSymbol_css_exports, {
 });
 module.exports = __toCommonJS(seriesSymbol_css_exports);
 var import_seriesSymbol_css_ts_vanilla = require("./seriesSymbol.css");
-var customSymbol = "_1ydozsr0-3-11-2";
-var customSymbolLarge = "_1ydozsr1-3-11-2 _1ydozsr0-3-11-2";
+var customSymbol = "_1ydozsr0-3-12-0";
+var customSymbolLarge = "_1ydozsr1-3-12-0 _1ydozsr0-3-12-0";

package/charts/core/components/overlay-tooltip/contexts/PinCoordinationContext.d.ts

@@ -0,0 +1,29 @@
+import { type PropsWithChildren } from 'react';
+import { type Store } from '../../../../../core/store/store.js';
+/**
+ * Coordinates pin ownership between a chart's own tooltip and its annotations
+ * tooltip, without sharing their position/data/hover state. Each side
+ * increments its own counter when it takes the pin; the other side reacts by
+ * releasing its pin.
+ *
+ * The context defaults to a harmless, unshared no-op store, so any consumer
+ * of the shared annotations module (e.g. a bare AnnotationsNumericalDisplay/
+ * AnnotationsTimeDisplay used outside a chart root, as DataTable's Gantt
+ * chart does) can safely call these hooks without crashing or requiring an
+ * explicit provider. Real cross-component coordination only happens where a
+ * `PinCoordinationProvider` establishes a shared ancestor of both a chart's
+ * own tooltip and its annotations tooltip — currently only XYChartRoot and
+ * the standalone AnnotationsChart mount one.
+ *
+ * @internal
+ */
+export type PinCoordinationState = {
+    dismissAnnotationAt: number;
+    dismissChartAt: number;
+};
+export declare const PinCoordinationContext: import("react").Context<Store<PinCoordinationState>>;
+/** @internal */
+export declare const usePinCoordination: () => Store<PinCoordinationState>;
+/** @internal */
+export declare function PinCoordinationProvider(props: Readonly<PropsWithChildren>): import("react").JSX.Element;
+//# sourceMappingURL=PinCoordinationContext.d.ts.map

package/charts/core/components/overlay-tooltip/contexts/PinCoordinationContext.js

@@ -0,0 +1,38 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var PinCoordinationContext_exports = {};
+__export(PinCoordinationContext_exports, {
+  PinCoordinationContext: () => PinCoordinationContext,
+  PinCoordinationProvider: () => PinCoordinationProvider,
+  usePinCoordination: () => usePinCoordination
+});
+module.exports = __toCommonJS(PinCoordinationContext_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_store = require("../../../../../core/store/store.js");
+const initialState = () => ({
+  dismissAnnotationAt: 0,
+  dismissChartAt: 0
+});
+const PinCoordinationContext = (0, import_react.createContext)((0, import_store.createStore)(initialState()));
+const usePinCoordination = () => (0, import_react.useContext)(PinCoordinationContext);
+function PinCoordinationProvider(props) {
+  const store = (0, import_react.useRef)(void 0);
+  store.current ||= (0, import_store.createStore)(initialState());
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PinCoordinationContext.Provider, { value: store.current, children: props.children });
+}

package/charts/core/components/overlay-tooltip/hooks/useCanvasAriaDescribedBy.d.ts

@@ -0,0 +1,4 @@
+import { type RefObject } from 'react';
+/** @internal */
+export declare const useCanvasAriaDescribedBy: (overlayRef: RefObject<HTMLDivElement | undefined>, tooltipId: string, active: boolean) => void;
+//# sourceMappingURL=useCanvasAriaDescribedBy.d.ts.map

package/charts/core/components/overlay-tooltip/hooks/useCanvasAriaDescribedBy.js

@@ -0,0 +1,54 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var useCanvasAriaDescribedBy_exports = {};
+__export(useCanvasAriaDescribedBy_exports, {
+  useCanvasAriaDescribedBy: () => useCanvasAriaDescribedBy
+});
+module.exports = __toCommonJS(useCanvasAriaDescribedBy_exports);
+var import_react = require("react");
+const useCanvasAriaDescribedBy = (overlayRef, tooltipId, active) => {
+  (0, import_react.useEffect)(() => {
+    if (!active) {
+      return;
+    }
+    let chartEl = overlayRef.current?.closest("[data-dt-component]") ?? null;
+    while (chartEl !== null && chartEl.querySelector("canvas") === null) {
+      chartEl = chartEl.parentElement?.closest("[data-dt-component]") ?? null;
+    }
+    if (!chartEl) {
+      return;
+    }
+    const resolvedChartEl = chartEl;
+    const applyToCanvases = () => {
+      resolvedChartEl.querySelectorAll("canvas").forEach((canvas) => {
+        canvas.setAttribute("aria-describedby", tooltipId);
+      });
+    };
+    applyToCanvases();
+    const observer = new MutationObserver(applyToCanvases);
+    observer.observe(resolvedChartEl, { childList: true, subtree: true });
+    return () => {
+      observer.disconnect();
+      resolvedChartEl.querySelectorAll("canvas").forEach((canvas) => {
+        if (canvas.getAttribute("aria-describedby") === tooltipId) {
+          canvas.removeAttribute("aria-describedby");
+        }
+      });
+    };
+  }, [active, tooltipId]);
+};

package/charts/core/components/overlay-tooltip/pinCoordinationSelectors.d.ts

@@ -0,0 +1,5 @@
+/** @internal */
+export declare const useDismissAnnotationSignal: () => number;
+/** @internal */
+export declare const useDismissChartTooltipSignal: () => number;
+//# sourceMappingURL=pinCoordinationSelectors.d.ts.map

package/charts/core/components/overlay-tooltip/pinCoordinationSelectors.js

@@ -0,0 +1,30 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var pinCoordinationSelectors_exports = {};
+__export(pinCoordinationSelectors_exports, {
+  useDismissAnnotationSignal: () => useDismissAnnotationSignal,
+  useDismissChartTooltipSignal: () => useDismissChartTooltipSignal
+});
+module.exports = __toCommonJS(pinCoordinationSelectors_exports);
+var import_PinCoordinationContext = require("./contexts/PinCoordinationContext.js");
+var import_selector = require("../../../../core/store/selector.js");
+const useDismissAnnotationSignal = () => (0, import_selector.useStoreSelector)(
+  import_PinCoordinationContext.PinCoordinationContext,
+  (state) => state.dismissAnnotationAt
+);
+const useDismissChartTooltipSignal = () => (0, import_selector.useStoreSelector)(import_PinCoordinationContext.PinCoordinationContext, (state) => state.dismissChartAt);