@dynatrace/strato-components 3.12.1 → 3.13.0

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

@@ -17,24 +17,78 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var TooltipPortal_exports = {};
 __export(TooltipPortal_exports, {
-  TooltipPortal: () => TooltipPortal
+  TooltipPortal: () => TooltipPortal,
+  resolveMenuSide: () => resolveMenuSide
 });
 module.exports = __toCommonJS(TooltipPortal_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
 var import_react_dom = require("react-dom");
+var import_SeriesActionsMenuContent = require("./SeriesActionsMenuContent.js");
 var import_OverlayStackingProvider = require("../../../../../core/providers/OverlayStackingProvider.js");
+var import_Menu = require("../../../../../navigation/menu/Menu.js");
+var import_ActiveSeriesMenuContext = require("../contexts/ActiveSeriesMenuContext.js");
 var import_useDynamicTooltip = require("../hooks/useDynamicTooltip.js");
 var import_tooltip_container_dimensions_Provider = require("../providers/tooltip-container-dimensions.Provider.js");
+var import_selectors = require("../selectors.js");
 var import_tooltip_css = require("../tooltip.sty.js");
 var import_is_scroll_ignored = require("../utils/is-scroll-ignored.js");
+const MENU_WIDTH_INITIAL = 200;
+const resolveMenuSide = (spaceRight, spaceLeft, menuWidth) => {
+  if (spaceRight >= menuWidth) {
+    return "right";
+  }
+  if (spaceLeft >= menuWidth) {
+    return "left";
+  }
+  return "bottom";
+};
+const TooltipMenu = ({
+  tooltipId,
+  absoluteX,
+  tooltipWrapper,
+  children
+}) => {
+  const { menuProps } = (0, import_ActiveSeriesMenuContext.useActiveSeriesMenu)();
+  const activeSeries = (0, import_selectors.useSelector)((state) => state.activeSeries);
+  const menuWidthRef = (0, import_react.useRef)(MENU_WIDTH_INITIAL);
+  const menuSideRef = (0, import_react.useRef)("right");
+  const sideComputedForSeries = (0, import_react.useRef)(null);
+  const handleMenuResize = (0, import_react.useCallback)((width) => {
+    menuWidthRef.current = width;
+  }, []);
+  if (activeSeries && activeSeries !== sideComputedForSeries.current) {
+    sideComputedForSeries.current = activeSeries;
+    const rect = tooltipWrapper?.getBoundingClientRect();
+    const spaceRight = window.innerWidth - (rect?.right ?? absoluteX);
+    const spaceLeft = rect?.left ?? absoluteX;
+    menuSideRef.current = resolveMenuSide(
+      spaceRight,
+      spaceLeft,
+      menuWidthRef.current
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_Menu.Menu, { open: !!activeSeries, modal: false, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Menu.Menu.Trigger, { children }),
+    menuProps && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_SeriesActionsMenuContent.SeriesActionsMenuContent,
+      {
+        tooltipId,
+        ...menuProps,
+        side: menuSideRef.current,
+        onResize: handleMenuResize
+      },
+      activeSeries
+    )
+  ] });
+};
 const TooltipPortal = (props) => {
   const {
     id,
     absoluteX,
     absoluteY,
-    isInteractive,
     onMouseLeave,
+    isInteractive,
     onScrollCapture
   } = props;
   const [tooltipWrapper, setTooltipWrapper] = (0, import_react.useState)(
@@ -45,26 +99,43 @@ const TooltipPortal = (props) => {
     x: absoluteX,
     y: absoluteY
   });
+  const handleMouseLeave = (0, import_react.useCallback)(
+    (event) => {
+      const related = event.relatedTarget;
+      if (related?.closest?.(`[data-tooltip-menu-id="${id}"]`)) {
+        return;
+      }
+      onMouseLeave?.();
+    },
+    [id, onMouseLeave]
+  );
   return (0, import_react_dom.createPortal)(
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      "div",
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { onMouseLeave: handleMouseLeave, role: "presentation", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      TooltipMenu,
       {
-        id,
-        role: "tooltip",
-        "aria-label": "OverlayTooltip",
-        ref: setTooltipWrapper,
-        ...{ [import_is_scroll_ignored.CHART_SCROLL_IGNORE_ATTR]: "" },
-        className: (0, import_tooltip_css.wrapper)({ isInteractive }),
-        onMouseLeave,
-        onScrollCapture: (event) => {
-          if (tooltipWrapper?.contains(event.target)) {
-            onScrollCapture?.(event);
+        tooltipId: id,
+        absoluteX,
+        tooltipWrapper,
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "div",
+          {
+            id,
+            role: "tooltip",
+            "aria-label": "OverlayTooltip",
+            ref: setTooltipWrapper,
+            ...{ [import_is_scroll_ignored.CHART_SCROLL_IGNORE_ATTR]: "" },
+            className: (0, import_tooltip_css.wrapper)({ isInteractive }),
+            onScrollCapture: (event) => {
+              if (tooltipWrapper?.contains(event.target)) {
+                onScrollCapture?.(event);
+              }
+            },
+            ...dynamicTooltip,
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_OverlayStackingProvider.OverlayStackingProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tooltip_container_dimensions_Provider.TooltipContainerDimensionProvider, { container: tooltipWrapper, children: props.children }) })
           }
-        },
-        ...dynamicTooltip,
-        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_OverlayStackingProvider.OverlayStackingProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tooltip_container_dimensions_Provider.TooltipContainerDimensionProvider, { container: tooltipWrapper, children: props.children }) })
+        )
       }
-    ),
+    ) }),
     document.body
   );
 };

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

@@ -1,4 +1,4 @@
-@keyframes _15am2yg1-3-12-1 {
+@keyframes _15am2yg1-3-13-0 {
   from {
     opacity: 0;
     max-height: 0;
@@ -12,7 +12,7 @@
     margin-top: var(--dt-spacings-size-4, 4px);
   }
 }
-._15am2yg0-3-12-1 {
+._15am2yg0-3-13-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-12-1 {
+._15am2yg2-3-13-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-12-1 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-13-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-12-1";
-var actionsPlaceholderTextAnimated = "_15am2yg2-3-12-1";
+var actionButton = "_15am2yg0-3-13-0";
+var actionsPlaceholderTextAnimated = "_15am2yg2-3-13-0";

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

@@ -1,10 +1,11 @@
-._1ldhlar2-3-12-1 {
+._1ldhlar1-3-13-0 {
+  box-sizing: border-box;
   padding: var(--dt-spacings-size-4, 4px) var(--dt-spacings-size-6, 6px);
-  width: var(--_1ldhlar1-3-12-1, calc(100% - 8px));
+  width: 100%;
   height: 100%;
   display: inline-block;
 }
-._1ldhlar3-3-12-1 {
+._1ldhlar2-3-13-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 +14,22 @@
   margin: 0;
   padding: 0;
 }
-._1ldhlar4-3-12-1 {
+._1ldhlar3-3-13-0 {
   display: -webkit-box;
   -webkit-box-orient: vertical;
-  -webkit-line-clamp: var(--_1ldhlar0-3-12-1);
+  -webkit-line-clamp: var(--_1ldhlar0-3-13-0);
+  word-break: break-word;
+  white-space: pre-line;
+}
+._1ldhlar4-3-13-0 {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: var(--_1ldhlar0-3-13-0);
   overflow: hidden;
   text-overflow: ellipsis;
   word-break: break-word;
 }
-._1ldhlar5-3-12-1 {
+._1ldhlar5-3-13-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.css.d.ts

@@ -1,7 +1,7 @@
 export declare const maxLinesVar: `var(--${string})`;
-export declare const headerWidthVar: `var(--${string})`;
 export declare const headerContainer: string;
 export declare const headerText: string;
+export declare const headerTextMultiLineContained: string;
 export declare const headerTextMultiLine: string;
 export declare const headerSubText: string;
 //# sourceMappingURL=Header.css.d.ts.map

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

@@ -41,7 +41,6 @@ var import_Divider = require("../../../../../../layouts/divider/Divider.js");
 var import_Tooltip = require("../../../../../../overlays/tooltip/Tooltip.js");
 var import_constants = require("../../constants.js");
 var import_ExternalConfigContext = require("../../contexts/ExternalConfigContext.js");
-var import_TooltipDimensionsContext = require("../../contexts/TooltipDimensionsContext.js");
 var import_useDefaultConfig = require("../../hooks/useDefaultConfig.js");
 var import_useDefaultLabels = require("../../hooks/useDefaultLabels.js");
 var import_tooltip_css = require("../../tooltip.sty.js");
@@ -64,7 +63,6 @@ const Header = (props) => {
   const defaultConfig = (0, import_useDefaultConfig.useDefaultConfig)();
   const defaultStrategy = defaultConfig?.headerFormatStrategy ?? import_value_formatters.defaultLabelFormatterStrategy;
   const { displayHeaderDivider, truncationMode = import_constants.DEFAULT_TRUNCATION_MODE } = (0, import_ExternalConfigContext.useExternalConfig)();
-  const containerWidth = (0, import_TooltipDimensionsContext.useTooltipDimensions)()?.width || import_tooltip_css.TOOLTIP_MAX_WIDTH;
   const showedLines = Math.min(
     maxLines ?? import_constants.DEFAULT_HEADER_LINES,
     import_constants.MAX_HEADER_LINES
@@ -78,7 +76,7 @@ const Header = (props) => {
   const computedShowDuration2 = showRangeDuration2 ?? false;
   const formatStrategy = defaultStrategy ?? (0, import_get_non_geometry_header.getNonGeometryHeader)(header1);
   const header2FormatStrategy = (0, import_get_non_geometry_header.getNonGeometryHeader)(header2);
-  const availableWidth = containerWidth - import_constants.TOOLTIP_WRAPPER_PADDING * 2;
+  const availableWidth = import_tooltip_css.TOOLTIP_MAX_WIDTH - import_constants.TOOLTIP_CONTENT_PADDING * 2;
   if ((0, import_type_guards.isHeaderEmpty)(header1, header2, subheader)) {
     return null;
   }
@@ -93,7 +91,6 @@ const Header = (props) => {
   };
   const {
     content: headerContent,
-    totalTextWidth,
     shownText,
     isTruncated,
     durationContent,
@@ -107,7 +104,6 @@ const Header = (props) => {
   });
   const {
     content: header2Content,
-    totalTextWidth: header2TotalTextWidth,
     shownText: shownHeader2Text,
     isTruncated: isHeader2Truncated,
     durationContent: duration2Content,
@@ -126,12 +122,20 @@ const Header = (props) => {
     availableWidth,
     truncationMode
   });
-  const headerClassName = !isSingleLine && isTruncationEnd ? (0, import_clsx.default)(import_Header_css.headerText, import_Header_css.headerTextMultiLine) : import_Header_css.headerText;
-  const shouldConstrainWidth = totalTextWidth > availableWidth || header2TotalTextWidth > availableWidth;
-  const headerContainerStyle = shouldConstrainWidth ? (0, import_dynamic.assignInlineVars)({ [import_Header_css.headerWidthVar]: `${availableWidth}px` }) : {};
+  const isJsTruncated = shownText !== headerContent || shownHeader2Text !== header2Content;
+  const getMultiLineModifierClass = () => {
+    if (isTruncationEnd) {
+      return import_Header_css.headerTextMultiLine;
+    }
+    if (isJsTruncated) {
+      return import_Header_css.headerTextMultiLineContained;
+    }
+    return void 0;
+  };
+  const headerClassName = !isSingleLine ? (0, import_clsx.default)(import_Header_css.headerText, getMultiLineModifierClass()) : import_Header_css.headerText;
   const isHeader2Unique = header2Content + duration2Suffix !== headerContent + durationSuffix;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: import_Header_css.headerContainer, style: headerContainerStyle, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: import_Header_css.headerContainer, children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Tooltip.Tooltip, { text: headerContent, disabled: !isTruncated, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
         "p",
         {

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

@@ -21,14 +21,14 @@ __export(Header_css_exports, {
   headerSubText: () => headerSubText,
   headerText: () => headerText,
   headerTextMultiLine: () => headerTextMultiLine,
-  headerWidthVar: () => headerWidthVar,
+  headerTextMultiLineContained: () => headerTextMultiLineContained,
   maxLinesVar: () => maxLinesVar
 });
 module.exports = __toCommonJS(Header_css_exports);
 var import_Header_css_ts_vanilla = require("./Header.css");
-var headerContainer = "_1ldhlar2-3-12-1";
-var headerSubText = "_1ldhlar5-3-12-1";
-var headerText = "_1ldhlar3-3-12-1";
-var headerTextMultiLine = "_1ldhlar4-3-12-1";
-var headerWidthVar = "var(--_1ldhlar1-3-12-1)";
-var maxLinesVar = "var(--_1ldhlar0-3-12-1)";
+var headerContainer = "_1ldhlar1-3-13-0";
+var headerSubText = "_1ldhlar5-3-13-0";
+var headerText = "_1ldhlar2-3-13-0";
+var headerTextMultiLine = "_1ldhlar4-3-13-0";
+var headerTextMultiLineContained = "_1ldhlar3-3-13-0";
+var maxLinesVar = "var(--_1ldhlar0-3-13-0)";

package/charts/core/components/overlay-tooltip/components/header/utils/get-shown-header-text.js

@@ -25,9 +25,13 @@ const getShownHeaderText = (headerContent, isSingleLine, isTruncationEnd, availa
   if (!isSingleLine && isTruncationEnd) {
     return headerContent;
   }
-  return (0, import_text_truncation_header.getHeaderTruncatedText)(
-    headerContent,
-    isSingleLine ? availableWidth : availableWidth * showedLines,
-    truncationMode
-  );
+  if (!isSingleLine) {
+    return (0, import_text_truncation_header.getHeaderTruncatedTextMultiLine)(
+      headerContent,
+      availableWidth,
+      showedLines,
+      truncationMode
+    );
+  }
+  return (0, import_text_truncation_header.getHeaderTruncatedText)(headerContent, availableWidth, truncationMode);
 };

package/charts/core/components/overlay-tooltip/components/series/SeriesItem.js

@@ -41,8 +41,8 @@ var import_SeriesActionsHeader = require("./SeriesActionsHeader.js");
 var import_SeriesItemContent = require("./SeriesItemContent.js");
 var import_useId = require("../../../../../../core/hooks/useId.js");
 var import_copy_to_clipboard_messages = require("../../../copy-to-clipboard/copy-to-clipboard-messages.js");
-var import_ChartActionsMenuAsync = require("../../../series-action/ChartActionsMenuAsync.js");
 var import_constants = require("../../constants.js");
+var import_ActiveSeriesMenuContext = require("../../contexts/ActiveSeriesMenuContext.js");
 var import_ExternalConfigContext = require("../../contexts/ExternalConfigContext.js");
 var import_useDefaultLabels = require("../../hooks/useDefaultLabels.js");
 var import_selectors = require("../../selectors.js");
@@ -60,14 +60,14 @@ const SeriesItem = (props) => {
   const hasActions = actions !== void 0 || defaultActionsConfig.size > 0;
   const dispatch = (0, import_useTooltipReducer.useTooltipReducer)();
   const rowId = (0, import_useId.useId)();
-  const isOpen = (0, import_selectors.useSelector)(({ activeSeries: activeSeries2 }) => activeSeries2 === rowId);
+  const isOpen = (0, import_selectors.useSelector)(({ activeSeries: activeSeries2 }) => {
+    return activeSeries2 === rowId;
+  });
   const { activeSeries } = (0, import_selectors.useTooltipSnapshot)();
   const menuDelayRef = (0, import_react.useRef)(0);
+  const buttonRef = (0, import_react.useRef)(null);
   const asyncActions = actions ? async () => actions() : void 0;
-  const triggerLeftTooltip = (event) => {
-    event.stopPropagation();
-    dispatch({ type: "TOOLTIP_MOUSE_LEAVE" })();
-  };
+  const { setMenuProps } = (0, import_ActiveSeriesMenuContext.useActiveSeriesMenu)();
   const handleClick = (event) => {
     event.stopPropagation();
     menuDelayRef.current = 0;
@@ -95,9 +95,26 @@ const SeriesItem = (props) => {
     );
     return (0, import_get_copy_action.getDefaultAction)(props, accessor, message);
   });
+  (0, import_react.useEffect)(() => {
+    if (!isOpen || !hasActions) {
+      return;
+    }
+    const button = buttonRef.current;
+    const tooltipEl = button?.closest('[aria-label="OverlayTooltip"]');
+    const alignOffset = button && tooltipEl ? button.getBoundingClientRect().top - tooltipEl.getBoundingClientRect().top : 0;
+    setMenuProps({
+      actions: asyncActions,
+      defaultActions,
+      header: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_SeriesActionsHeader.SeriesActionsHeader, { text: props.name }),
+      delay: menuDelayRef.current,
+      alignOffset
+    });
+    return () => isOpen && setMenuProps(null);
+  }, [isOpen, hasActions, setMenuProps]);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "button",
     {
+      ref: buttonRef,
       className: (0, import_clsx.default)(
         activeSeries === rowId && import_tooltip_css.seriesItemActive,
         import_tooltip_css.seriesItemWrapper
@@ -105,25 +122,13 @@ const SeriesItem = (props) => {
       onClick: handleClick,
       onPointerMove: handlePointerMove,
       onKeyDown: import_lodash_es.noop,
-      "data-testid": "menu-trigger",
+      "data-testid": "series-item",
       children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_ChartActionsMenuAsync.ChartActionsMenuAsync,
+        WithSymbol,
         {
+          symbolPosition,
           hasActions,
-          defaultActions,
-          actions: asyncActions,
-          isOpen,
-          header: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_SeriesActionsHeader.SeriesActionsHeader, { text: props.name }),
-          onActionSelected: triggerLeftTooltip,
-          delay: menuDelayRef.current,
-          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            WithSymbol,
-            {
-              symbolPosition,
-              hasActions,
-              ...restProps
-            }
-          )
+          ...restProps
         }
       )
     }

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

@@ -1,4 +1,4 @@
-._1ydozsr0-3-12-1 {
+._1ydozsr0-3-13-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-12-1 {
+._1ydozsr1-3-13-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-12-1";
-var customSymbolLarge = "_1ydozsr1-3-12-1 _1ydozsr0-3-12-1";
+var customSymbol = "_1ydozsr0-3-13-0";
+var customSymbolLarge = "_1ydozsr1-3-13-0 _1ydozsr0-3-13-0";

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

@@ -0,0 +1,21 @@
+import { type Dispatch, type PropsWithChildren, type ReactElement, type ReactNode, type SetStateAction } from 'react';
+export type ActiveSeriesMenuProps = {
+    actions: (() => Promise<ReactElement>) | undefined;
+    defaultActions: ReactNode;
+    header: ReactElement;
+    delay: number;
+    /**
+     * Vertical offset, in pixels, of the active series item's top edge relative
+     * to the tooltip wrapper. Used to align the menu with the hovered series item
+     * when the menu opens to the right or left of the tooltip.
+     */
+    alignOffset: number;
+};
+type ContextValue = {
+    menuProps: ActiveSeriesMenuProps | null;
+    setMenuProps: Dispatch<SetStateAction<ActiveSeriesMenuProps | null>>;
+};
+export declare const useActiveSeriesMenu: () => ContextValue;
+export declare const ActiveSeriesMenuProvider: ({ children }: PropsWithChildren) => import("react").JSX.Element;
+export {};
+//# sourceMappingURL=ActiveSeriesMenuContext.d.ts.map

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

@@ -0,0 +1,42 @@
+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 ActiveSeriesMenuContext_exports = {};
+__export(ActiveSeriesMenuContext_exports, {
+  ActiveSeriesMenuProvider: () => ActiveSeriesMenuProvider,
+  useActiveSeriesMenu: () => useActiveSeriesMenu
+});
+module.exports = __toCommonJS(ActiveSeriesMenuContext_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+const ActiveSeriesMenuContext = (0, import_react.createContext)(null);
+const useActiveSeriesMenu = () => {
+  const ctx = (0, import_react.useContext)(ActiveSeriesMenuContext);
+  if (!ctx) {
+    throw new Error(
+      "useActiveSeriesMenu must be used within ActiveSeriesMenuProvider"
+    );
+  }
+  return ctx;
+};
+const ActiveSeriesMenuProvider = ({ children }) => {
+  const [menuProps, setMenuProps] = (0, import_react.useState)(
+    null
+  );
+  const value = (0, import_react.useMemo)(() => ({ menuProps, setMenuProps }), [menuProps]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ActiveSeriesMenuContext.Provider, { value, children });
+};

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

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

package/charts/core/components/overlay-tooltip/hooks/useSvgAriaDescribedBy.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 useSvgAriaDescribedBy_exports = {};
+__export(useSvgAriaDescribedBy_exports, {
+  useSvgAriaDescribedBy: () => useSvgAriaDescribedBy
+});
+module.exports = __toCommonJS(useSvgAriaDescribedBy_exports);
+var import_react = require("react");
+const useSvgAriaDescribedBy = (overlayRef, tooltipId, active) => {
+  (0, import_react.useEffect)(() => {
+    if (!active || !overlayRef.current) {
+      return;
+    }
+    const container = overlayRef.current;
+    const applyToSvgs = () => {
+      container.querySelectorAll("[data-dt-chart-svg]").forEach((svg) => {
+        const ids = svg.getAttribute("aria-describedby")?.split(/\s+/).filter(Boolean) ?? [];
+        if (!ids.includes(tooltipId)) {
+          svg.setAttribute("aria-describedby", [...ids, tooltipId].join(" "));
+        }
+      });
+    };
+    applyToSvgs();
+    const observer = new MutationObserver(applyToSvgs);
+    observer.observe(container, { childList: true, subtree: true });
+    return () => {
+      observer.disconnect();
+      container.querySelectorAll("[data-dt-chart-svg]").forEach((svg) => {
+        const ids = svg.getAttribute("aria-describedby")?.split(/\s+/).filter(Boolean) ?? [];
+        const remaining = ids.filter((id) => id !== tooltipId);
+        if (remaining.length > 0) {
+          svg.setAttribute("aria-describedby", remaining.join(" "));
+        } else {
+          svg.removeAttribute("aria-describedby");
+        }
+      });
+    };
+  }, [active, tooltipId]);
+};