@splunk/visualizations 28.6.0 → 28.7.0

package/common/utils/mapUtils.js

@@ -166,102 +166,74 @@ var defaultImport11 = __toESM(require("@splunk/visualization-context/FeatureFlag
 __reExport(FeatureFlagContext_exports, require("@splunk/visualization-context/FeatureFlagContext"));
 var FeatureFlagContext_default = "default" in defaultImport11 ? defaultImport11.default : defaultImport11;
 
-// esm-externals:@splunk/ui-utils/id
-var id_exports = {};
-__export(id_exports, {
-  default: () => id_default
-});
-var defaultImport12 = __toESM(require("@splunk/ui-utils/id"));
-__reExport(id_exports, require("@splunk/ui-utils/id"));
-var id_default = "default" in defaultImport12 ? defaultImport12.default : defaultImport12;
-
-// esm-externals:d3-scale
-var d3_scale_exports = {};
-__export(d3_scale_exports, {
-  default: () => d3_scale_default
-});
-var defaultImport13 = __toESM(require("d3-scale"));
-__reExport(d3_scale_exports, require("d3-scale"));
-var d3_scale_default = "default" in defaultImport13 ? defaultImport13.default : defaultImport13;
-
-// esm-externals:chroma-js
-var chroma_js_exports = {};
-__export(chroma_js_exports, {
-  default: () => chroma_js_default
-});
-var defaultImport14 = __toESM(require("chroma-js"));
-__reExport(chroma_js_exports, require("chroma-js"));
-var chroma_js_default = "default" in defaultImport14 ? defaultImport14.default : defaultImport14;
-
-// esm-externals:@splunk/visualization-color-palettes
-var visualization_color_palettes_exports = {};
-__export(visualization_color_palettes_exports, {
-  default: () => visualization_color_palettes_default
+// esm-externals:@splunk/ui-utils/i18n
+var i18n_exports = {};
+__export(i18n_exports, {
+  default: () => i18n_default
 });
-var defaultImport15 = __toESM(require("@splunk/visualization-color-palettes"));
-__reExport(visualization_color_palettes_exports, require("@splunk/visualization-color-palettes"));
-var visualization_color_palettes_default = "default" in defaultImport15 ? defaultImport15.default : defaultImport15;
+var defaultImport12 = __toESM(require("@splunk/ui-utils/i18n"));
+__reExport(i18n_exports, require("@splunk/ui-utils/i18n"));
+var i18n_default = "default" in defaultImport12 ? defaultImport12.default : defaultImport12;
 
-// esm-externals:@splunk/visualization-schemas
-var visualization_schemas_exports = {};
-__export(visualization_schemas_exports, {
-  default: () => visualization_schemas_default
+// esm-externals:@splunk/ui-utils/format
+var format_exports = {};
+__export(format_exports, {
+  default: () => format_default
 });
-var defaultImport16 = __toESM(require("@splunk/visualization-schemas"));
-__reExport(visualization_schemas_exports, require("@splunk/visualization-schemas"));
-var visualization_schemas_default = "default" in defaultImport16 ? defaultImport16.default : defaultImport16;
+var defaultImport13 = __toESM(require("@splunk/ui-utils/format"));
+__reExport(format_exports, require("@splunk/ui-utils/format"));
+var format_default = "default" in defaultImport13 ? defaultImport13.default : defaultImport13;
 
-// src/Map/PureMap/MapUtils.ts
-var MIN_BUBBLE_RADIUS = 7.11;
-var MAX_BUBBLE_RADIUS = 45.26;
-var matchBubbleSize = (dataRange, data) => {
-  const size = (0, d3_scale_exports.scalePow)().exponent(0.2).domain(dataRange).range([MIN_BUBBLE_RADIUS, MAX_BUBBLE_RADIUS])(
-    data
-  );
-  if (size > MAX_BUBBLE_RADIUS) {
-    return MAX_BUBBLE_RADIUS;
-  }
-  if (size < MIN_BUBBLE_RADIUS) {
-    return MIN_BUBBLE_RADIUS;
-  }
-  return size;
+// src/Map/PureMap/keyboardConstants.ts
+var KEYBOARD_KEYS = {
+  ARROW_RIGHT: "ArrowRight",
+  ARROW_LEFT: "ArrowLeft",
+  ARROW_UP: "ArrowUp",
+  ARROW_DOWN: "ArrowDown",
+  HOME: "Home",
+  END: "End",
+  ENTER: "Enter",
+  SPACE: " "
 };
 
-// esm-externals:maplibre-gl
-var maplibre_gl_exports = {};
-__export(maplibre_gl_exports, {
-  default: () => maplibre_gl_default
-});
-var defaultImport17 = __toESM(require("maplibre-gl"));
-__reExport(maplibre_gl_exports, require("maplibre-gl"));
-var maplibre_gl_default = "default" in defaultImport17 ? defaultImport17.default : defaultImport17;
-
 // esm-externals:@splunk/react-ui/Popover
 var Popover_exports = {};
 __export(Popover_exports, {
   default: () => Popover_default
 });
-var defaultImport18 = __toESM(require("@splunk/react-ui/Popover"));
+var defaultImport14 = __toESM(require("@splunk/react-ui/Popover"));
 __reExport(Popover_exports, require("@splunk/react-ui/Popover"));
-var Popover_default = "default" in defaultImport18 ? defaultImport18.default : defaultImport18;
-
-// esm-externals:@splunk/ui-utils/i18n
-var i18n_exports = {};
-__export(i18n_exports, {
-  default: () => i18n_default
-});
-var defaultImport19 = __toESM(require("@splunk/ui-utils/i18n"));
-__reExport(i18n_exports, require("@splunk/ui-utils/i18n"));
-var i18n_default = "default" in defaultImport19 ? defaultImport19.default : defaultImport19;
+var Popover_default = "default" in defaultImport14 ? defaultImport14.default : defaultImport14;
 
 // esm-externals:@splunk/themes
 var themes_exports = {};
 __export(themes_exports, {
   default: () => themes_default
 });
-var defaultImport20 = __toESM(require("@splunk/themes"));
+var defaultImport15 = __toESM(require("@splunk/themes"));
 __reExport(themes_exports, require("@splunk/themes"));
-var themes_default = "default" in defaultImport20 ? defaultImport20.default : defaultImport20;
+var themes_default = "default" in defaultImport15 ? defaultImport15.default : defaultImport15;
+
+// esm-externals:@splunk/ui-utils/id
+var id_exports = {};
+__export(id_exports, {
+  default: () => id_default
+});
+var defaultImport16 = __toESM(require("@splunk/ui-utils/id"));
+__reExport(id_exports, require("@splunk/ui-utils/id"));
+var id_default = "default" in defaultImport16 ? defaultImport16.default : defaultImport16;
+
+// src/common/utils/shadowDomUtils.ts
+var getFloatingLayerStyleTarget = (anchor) => {
+  if (!anchor || typeof anchor.getRootNode !== "function") {
+    return void 0;
+  }
+  const rootNode = anchor.getRootNode();
+  if (typeof ShadowRoot !== "undefined" && rootNode instanceof ShadowRoot) {
+    return anchor.ownerDocument.head;
+  }
+  return void 0;
+};
 
 // src/Map/PureMap/Tooltip.tsx
 var StyledPopover = styled_components_default(Popover_default)`
@@ -336,6 +308,7 @@ var convertDegToDMS = (decimalDegree, type) => {
   return `${degrees}\xB0 ${minutes}' ${seconds}" ${direction}`;
 };
 var Tooltip = ({
+  id,
   open,
   anchor,
   latitude,
@@ -344,24 +317,105 @@ var Tooltip = ({
   areaValue,
   additionalFields = [],
   showCoordinates = true,
-  tooltipHeader = null
+  tooltipHeader = null,
+  stylesManagedExternally = false,
+  onMouseEnter,
+  onMouseLeave
 }) => {
   const featureFlagContext = react_exports.useContext(FeatureFlagContext_default);
   const isTooltipIconFlagEnabled = Boolean(featureFlagContext == null ? void 0 : featureFlagContext.visualizations_enableTooltipIcon);
-  return /* @__PURE__ */ react_exports.createElement(
+  const styleTarget = stylesManagedExternally ? void 0 : getFloatingLayerStyleTarget(anchor);
+  const popover = /* @__PURE__ */ react_exports.createElement(
     StyledPopover,
     {
+      id,
+      role: "tooltip",
       open,
       animation: false,
       anchor,
       "data-test": "map-marker-tooltip",
-      defaultPlacement: "above"
+      defaultPlacement: "above",
+      onMouseEnter,
+      onMouseLeave
     },
     /* @__PURE__ */ react_exports.createElement(StyledTable, null, tooltipHeader && /* @__PURE__ */ react_exports.createElement(StyledTooltipHeader, { "data-test": "tooltip-header" }, /* @__PURE__ */ react_exports.createElement("tr", null, /* @__PURE__ */ react_exports.createElement("th", { colSpan: 2 }, /* @__PURE__ */ react_exports.createElement("span", { "data-test": "tooltip-header-value" }, tooltipHeader)))), /* @__PURE__ */ react_exports.createElement("tbody", null, Boolean(areaId && areaValue) && /* @__PURE__ */ react_exports.createElement("tr", null, /* @__PURE__ */ react_exports.createElement(StyledTitleColumn, { "data-test": "area-id" }, areaId), /* @__PURE__ */ react_exports.createElement(StyledValueColumn, { "data-test": "area-value" }, areaValue)), Boolean(showCoordinates && latitude) && /* @__PURE__ */ react_exports.createElement("tr", null, /* @__PURE__ */ react_exports.createElement(StyledTitleColumn, null, (0, i18n_exports._)("Latitude")), /* @__PURE__ */ react_exports.createElement(StyledValueColumn, { "data-test": "latitude" }, convertDegToDMS(latitude, "latitude"))), Boolean(showCoordinates && longitude) && /* @__PURE__ */ react_exports.createElement("tr", null, /* @__PURE__ */ react_exports.createElement(StyledTitleColumn, null, (0, i18n_exports._)("Longitude")), /* @__PURE__ */ react_exports.createElement(StyledValueColumn, { "data-test": "longitude" }, convertDegToDMS(longitude, "longitude"))), additionalFields.filter(({ value }) => value && String(value) !== "0").map(({ name, value, color, icon }) => /* @__PURE__ */ react_exports.createElement("tr", { key: (0, id_exports.createDOMID)() }, /* @__PURE__ */ react_exports.createElement(StyledTitleColumn, { "data-test": "field-title" }, color ? /* @__PURE__ */ react_exports.createElement(StyledColorBlock, { "data-test": "field-color", color }) : null, /* @__PURE__ */ react_exports.createElement("span", null, name, isTooltipIconFlagEnabled && icon && ((0, iconUtils_exports.isRemoteIcon)(icon) || (0, iconUtils_exports.isDataURI)(icon)) ? /* @__PURE__ */ react_exports.createElement(StyledIconWrapper, { "data-test": "field-icon" }, /* @__PURE__ */ react_exports.createElement(RemoteIcon_default, { iconURL: icon, width: 16, height: 16 })) : null)), /* @__PURE__ */ react_exports.createElement(StyledValueColumn, { "data-test": "field-value" }, value)))))
   );
+  return styleTarget ? /* @__PURE__ */ react_exports.createElement(styled_components_exports.StyleSheetManager, { target: styleTarget }, popover) : popover;
 };
 var Tooltip_default = Tooltip;
 
+// esm-externals:d3-scale
+var d3_scale_exports = {};
+__export(d3_scale_exports, {
+  default: () => d3_scale_default
+});
+var defaultImport17 = __toESM(require("d3-scale"));
+__reExport(d3_scale_exports, require("d3-scale"));
+var d3_scale_default = "default" in defaultImport17 ? defaultImport17.default : defaultImport17;
+
+// esm-externals:chroma-js
+var chroma_js_exports = {};
+__export(chroma_js_exports, {
+  default: () => chroma_js_default
+});
+var defaultImport18 = __toESM(require("chroma-js"));
+__reExport(chroma_js_exports, require("chroma-js"));
+var chroma_js_default = "default" in defaultImport18 ? defaultImport18.default : defaultImport18;
+
+// esm-externals:@splunk/visualization-color-palettes
+var visualization_color_palettes_exports = {};
+__export(visualization_color_palettes_exports, {
+  default: () => visualization_color_palettes_default
+});
+var defaultImport19 = __toESM(require("@splunk/visualization-color-palettes"));
+__reExport(visualization_color_palettes_exports, require("@splunk/visualization-color-palettes"));
+var visualization_color_palettes_default = "default" in defaultImport19 ? defaultImport19.default : defaultImport19;
+
+// esm-externals:@splunk/visualization-schemas
+var visualization_schemas_exports = {};
+__export(visualization_schemas_exports, {
+  default: () => visualization_schemas_default
+});
+var defaultImport20 = __toESM(require("@splunk/visualization-schemas"));
+__reExport(visualization_schemas_exports, require("@splunk/visualization-schemas"));
+var visualization_schemas_default = "default" in defaultImport20 ? defaultImport20.default : defaultImport20;
+
+// src/Map/PureMap/MapUtils.ts
+var MIN_BUBBLE_RADIUS = 7.11;
+var MAX_BUBBLE_RADIUS = 45.26;
+var matchBubbleSize = (dataRange, data) => {
+  const size = (0, d3_scale_exports.scalePow)().exponent(0.2).domain(dataRange).range([MIN_BUBBLE_RADIUS, MAX_BUBBLE_RADIUS])(
+    data
+  );
+  if (size > MAX_BUBBLE_RADIUS) {
+    return MAX_BUBBLE_RADIUS;
+  }
+  if (size < MIN_BUBBLE_RADIUS) {
+    return MIN_BUBBLE_RADIUS;
+  }
+  return size;
+};
+
+// esm-externals:maplibre-gl
+var maplibre_gl_exports = {};
+__export(maplibre_gl_exports, {
+  default: () => maplibre_gl_default
+});
+var defaultImport21 = __toESM(require("maplibre-gl"));
+__reExport(maplibre_gl_exports, require("maplibre-gl"));
+var maplibre_gl_default = "default" in defaultImport21 ? defaultImport21.default : defaultImport21;
+
+// src/Map/PureMap/MapContext.tsx
+var MapContext = react_exports.createContext({
+  activeTooltipId: null,
+  setActiveTooltipId: () => {
+  },
+  activeChoroplethId: null,
+  setActiveChoroplethId: () => {
+  }
+});
+var useMapContext = () => react_exports.useContext(MapContext);
+
 // src/Map/PureMap/MarkerWrapper.tsx
 var MarkerWrapper = (_a) => {
   var _b = _a, {
@@ -372,9 +426,10 @@ var MarkerWrapper = (_a) => {
     additionalFields = [],
     tooltipHeader = null,
     map,
-    isChoroplethTooltipOpen,
     children,
-    showCoordinates = true
+    showCoordinates = true,
+    stylesManagedExternally = false,
+    customMarkerId
   } = _b, otherProps = __objRest(_b, [
     "longitude",
     "latitude",
@@ -383,19 +438,120 @@ var MarkerWrapper = (_a) => {
     "additionalFields",
     "tooltipHeader",
     "map",
-    "isChoroplethTooltipOpen",
     "children",
-    "showCoordinates"
+    "showCoordinates",
+    "stylesManagedExternally",
+    "customMarkerId"
   ]);
   const container = react_exports.useRef();
   const marker = react_exports.useRef();
   const [isTooltipOpen, setTooltipOpenStatus] = react_exports.useState(false);
-  const isChoroplethTooltip = react_exports.useCallback(
-    () => isChoroplethTooltipOpen !== void 0,
-    [isChoroplethTooltipOpen]
+  const [isFocused, setIsFocused] = react_exports.useState(false);
+  const [isHovered, setIsHovered] = react_exports.useState(false);
+  const [isPopoverHovered, setIsPopoverHovered] = react_exports.useState(false);
+  const tooltipId = react_exports.useMemo(() => (0, id_exports.createDOMID)(), []);
+  const pendingMoveEndHandler = react_exports.useRef(null);
+  const closeTimeoutRef = react_exports.useRef(null);
+  const generatedMarkerId = react_exports.useMemo(() => (0, id_exports.createDOMID)(), []);
+  const markerId = customMarkerId || generatedMarkerId;
+  const { activeTooltipId, setActiveTooltipId } = useMapContext();
+  const mapMoveHandlerRef = react_exports.useRef(null);
+  const openTooltip = react_exports.useCallback(() => {
+    setActiveTooltipId(markerId);
+    setTooltipOpenStatus(true);
+  }, [markerId, setActiveTooltipId]);
+  const cleanupPendingMoveEnd = react_exports.useCallback(() => {
+    if (pendingMoveEndHandler.current && map.current && typeof map.current.off === "function") {
+      map.current.off("moveend", pendingMoveEndHandler.current);
+      pendingMoveEndHandler.current = null;
+    }
+  }, [map]);
+  const cleanupMapMoveHandler = react_exports.useCallback(() => {
+    if (mapMoveHandlerRef.current && map.current && typeof map.current.off === "function") {
+      map.current.off("move", mapMoveHandlerRef.current);
+      mapMoveHandlerRef.current = null;
+    }
+  }, [map]);
+  const shouldCloseTooltip = react_exports.useCallback(
+    (focused, hovered, popoverHovered) => {
+      return !focused && !hovered && !popoverHovered;
+    },
+    []
+  );
+  const cancelCloseTimeout = react_exports.useCallback(() => {
+    if (closeTimeoutRef.current) {
+      clearTimeout(closeTimeoutRef.current);
+      closeTimeoutRef.current = null;
+    }
+  }, []);
+  const closeTooltipIfShould = react_exports.useCallback(
+    (focused, hovered, popoverHovered) => {
+      cancelCloseTimeout();
+      if (shouldCloseTooltip(focused, hovered, popoverHovered)) {
+        closeTimeoutRef.current = setTimeout(() => {
+          setTooltipOpenStatus(false);
+          setActiveTooltipId((currentId) => currentId === markerId ? null : currentId);
+          closeTimeoutRef.current = null;
+        }, 100);
+      }
+    },
+    [shouldCloseTooltip, markerId, setActiveTooltipId, cancelCloseTimeout]
   );
-  const openTooltip = react_exports.useCallback(() => setTooltipOpenStatus(true), []);
-  const closeTooltip = react_exports.useCallback(() => setTooltipOpenStatus(false), []);
+  const handleMouseEnter = react_exports.useCallback(() => {
+    cancelCloseTimeout();
+    setIsHovered(true);
+    openTooltip();
+  }, [openTooltip, cancelCloseTimeout]);
+  const handleMouseLeave = react_exports.useCallback(() => {
+    setIsHovered(false);
+    closeTooltipIfShould(isFocused, false, isPopoverHovered);
+  }, [isFocused, isPopoverHovered, closeTooltipIfShould]);
+  const handlePopoverMouseEnter = react_exports.useCallback(() => {
+    cancelCloseTimeout();
+    setIsPopoverHovered(true);
+  }, [cancelCloseTimeout]);
+  const handlePopoverMouseLeave = react_exports.useCallback(() => {
+    setIsPopoverHovered(false);
+    closeTooltipIfShould(isFocused, isHovered, false);
+  }, [isFocused, isHovered, closeTooltipIfShould]);
+  const handleBlur = react_exports.useCallback(() => {
+    setIsFocused(false);
+    cleanupPendingMoveEnd();
+    closeTooltipIfShould(false, isHovered, isPopoverHovered);
+  }, [isHovered, isPopoverHovered, cleanupPendingMoveEnd, closeTooltipIfShould]);
+  const handleEscapeKey = react_exports.useCallback(
+    (e) => {
+      if (e.key === "Escape" && activeTooltipId === markerId) {
+        cancelCloseTimeout();
+        setIsFocused(false);
+        setIsHovered(false);
+        setIsPopoverHovered(false);
+        cleanupPendingMoveEnd();
+        setTooltipOpenStatus(false);
+        setActiveTooltipId(null);
+      }
+    },
+    [activeTooltipId, markerId, cleanupPendingMoveEnd, setActiveTooltipId, cancelCloseTimeout]
+  );
+  const handleFocus = react_exports.useCallback(() => {
+    cleanupPendingMoveEnd();
+    if (map.current && longitude !== void 0 && latitude !== void 0 && typeof map.current.once === "function") {
+      const bounds = map.current.getBounds();
+      if (!bounds.contains([longitude, latitude])) {
+        const moveEndHandler = () => {
+          pendingMoveEndHandler.current = null;
+          setIsFocused(true);
+          openTooltip();
+        };
+        pendingMoveEndHandler.current = moveEndHandler;
+        map.current.once("moveend", moveEndHandler);
+        map.current.panTo([longitude, latitude]);
+        return;
+      }
+    }
+    setIsFocused(true);
+    openTooltip();
+  }, [openTooltip, map, longitude, latitude, cleanupPendingMoveEnd]);
   const cleanupMarker = react_exports.useCallback(() => {
     if (marker.current) {
       marker.current.remove();
@@ -416,35 +572,102 @@ var MarkerWrapper = (_a) => {
       cleanupMarker();
     }
   }, [latitude, longitude, map]);
-  react_exports.useEffect(() => cleanupMarker, []);
+  react_exports.useEffect(() => {
+    if (isTooltipOpen && activeTooltipId === markerId) {
+      document.addEventListener("keydown", handleEscapeKey);
+      return () => {
+        document.removeEventListener("keydown", handleEscapeKey);
+      };
+    }
+    return void 0;
+  }, [isTooltipOpen, activeTooltipId, markerId, handleEscapeKey]);
+  react_exports.useEffect(() => {
+    if (isTooltipOpen && activeTooltipId !== markerId && activeTooltipId !== null) {
+      setTooltipOpenStatus(false);
+    }
+  }, [activeTooltipId, markerId, isTooltipOpen]);
+  react_exports.useEffect(() => {
+    if (!isTooltipOpen && activeTooltipId === null && (isFocused || isHovered || isPopoverHovered)) {
+      openTooltip();
+    }
+  }, [activeTooltipId, isTooltipOpen, isFocused, isHovered, isPopoverHovered, openTooltip]);
+  react_exports.useEffect(() => {
+    if (!customMarkerId) return;
+    if (activeTooltipId === markerId) {
+      setTooltipOpenStatus(true);
+    } else {
+      setTooltipOpenStatus(false);
+    }
+  }, [customMarkerId, activeTooltipId, markerId]);
+  const [, forceUpdate] = react_exports.useReducer((x) => x + 1, 0);
+  react_exports.useEffect(() => {
+    if (!isTooltipOpen || !map.current || typeof map.current.on !== "function") {
+      return void 0;
+    }
+    let rafId = null;
+    const handleMapMove = () => {
+      if (rafId === null) {
+        rafId = requestAnimationFrame(() => {
+          forceUpdate();
+          rafId = null;
+        });
+      }
+    };
+    mapMoveHandlerRef.current = handleMapMove;
+    map.current.on("move", handleMapMove);
+    return () => {
+      if (rafId !== null) {
+        cancelAnimationFrame(rafId);
+      }
+      cleanupMapMoveHandler();
+    };
+  }, [isTooltipOpen, map, cleanupMapMoveHandler]);
+  react_exports.useEffect(
+    () => () => {
+      cancelCloseTimeout();
+      cleanupPendingMoveEnd();
+      cleanupMapMoveHandler();
+      cleanupMarker();
+    },
+    [cancelCloseTimeout, cleanupPendingMoveEnd, cleanupMapMoveHandler, cleanupMarker]
+  );
   const filteredAdditionalFields = additionalFields.filter(({ value }) => value && String(value) !== "0");
-  const showTooltip = showCoordinates || filteredAdditionalFields.length || areaId && areaValue;
-  return /* @__PURE__ */ react_exports.createElement("div", { style: { visibility: isChoroplethTooltip() ? "hidden" : "visible" } }, /* @__PURE__ */ react_exports.createElement(
+  const showTooltip = showCoordinates || filteredAdditionalFields.length || areaId && !Number.isNaN(areaValue);
+  const isTooltipVisible = activeTooltipId === markerId && (isTooltipOpen || customMarkerId !== void 0);
+  const childrenWithTooltipId = react_exports.useMemo(() => {
+    if (!children) return null;
+    if (!react_exports.isValidElement(children)) return children;
+    return react_exports.cloneElement(children, {
+      "aria-describedby": tooltipId
+    });
+  }, [children, tooltipId]);
+  return /* @__PURE__ */ react_exports.createElement("div", null, /* @__PURE__ */ react_exports.createElement(
     "div",
     __spreadValues({
-      style: {
-        visibility: isChoroplethTooltip() ? "hidden" : "visible"
-      },
       ref: container,
       "data-test": "map-marker",
-      onMouseOver: openTooltip,
-      onMouseLeave: closeTooltip,
-      onFocus: openTooltip,
-      onBlur: closeTooltip
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave,
+      onFocus: handleFocus,
+      onBlur: handleBlur
     }, otherProps),
-    children
+    childrenWithTooltipId
   ), /* @__PURE__ */ react_exports.createElement("div", null, showTooltip && /* @__PURE__ */ react_exports.createElement(
     Tooltip_default,
     {
-      open: isChoroplethTooltip() ? isChoroplethTooltipOpen : isTooltipOpen,
+      id: tooltipId,
+      open: isTooltipVisible,
       anchor: container.current,
-      latitude: isChoroplethTooltip() ? null : latitude,
-      longitude: isChoroplethTooltip() ? null : longitude,
+      latitude: showCoordinates ? latitude : null,
+      longitude: showCoordinates ? longitude : null,
       areaId,
       areaValue,
       additionalFields,
       showCoordinates,
-      tooltipHeader
+      tooltipHeader,
+      stylesManagedExternally,
+      onMouseEnter: handlePopoverMouseEnter,
+      onMouseLeave: handlePopoverMouseLeave
     }
   )));
 };
@@ -461,21 +684,51 @@ var PieSegment = react_exports.memo(
     color,
     themeColor,
     segmentMetadata,
-    handleBubbleClick
+    handleBubbleClick,
+    ariaLabel,
+    "aria-describedby": ariaDescribedBy,
+    onKeyDown,
+    onFocus,
+    onBlur,
+    elementRef,
+    hasEventHandlers
   }) => {
     const { name, value } = segmentMetadata != null ? segmentMetadata : {};
-    const handleSegmentClick = react_exports.useCallback(
+    const handleInteraction = react_exports.useCallback(
       (e) => {
+        if ("key" in e && e.key !== KEYBOARD_KEYS.ENTER && e.key !== KEYBOARD_KEYS.SPACE) {
+          return;
+        }
+        e.preventDefault();
         handleBubbleClick(e, name, value);
       },
       [name, value, handleBubbleClick]
     );
+    const handleKeyDown = react_exports.useCallback(
+      (e) => {
+        if (hasEventHandlers && (e.key === KEYBOARD_KEYS.ENTER || e.key === KEYBOARD_KEYS.SPACE)) {
+          handleInteraction(e);
+        }
+        if (onKeyDown) {
+          onKeyDown(e);
+        }
+      },
+      [hasEventHandlers, handleInteraction, onKeyDown]
+    );
     if (end - start === 1) {
       return /* @__PURE__ */ react_exports.createElement(
         BubbleSegment,
         {
+          $hasEventHandlers: hasEventHandlers,
+          ref: elementRef,
           as: "circle",
-          onClick: handleSegmentClick,
+          role: hasEventHandlers ? "button" : "graphics-symbol",
+          "aria-label": ariaLabel,
+          "aria-describedby": ariaDescribedBy,
+          onClick: hasEventHandlers ? handleInteraction : void 0,
+          onKeyDown: handleKeyDown,
+          onFocus,
+          onBlur,
           cx: radius,
           cy: radius,
           r: radius,
@@ -496,8 +749,16 @@ var PieSegment = react_exports.memo(
     return /* @__PURE__ */ react_exports.createElement(
       BubbleSegment,
       {
+        $hasEventHandlers: hasEventHandlers,
+        ref: elementRef,
         as: "path",
-        onClick: handleSegmentClick,
+        role: hasEventHandlers ? "button" : "graphics-symbol",
+        "aria-label": ariaLabel,
+        "aria-describedby": ariaDescribedBy,
+        onClick: hasEventHandlers ? handleInteraction : void 0,
+        onKeyDown: handleKeyDown,
+        onFocus,
+        onBlur,
         d: `M ${radius} ${radius} L ${radius + radius * x0} ${radius + radius * y0} A ${radius} ${radius} 0 ${arc} 1 ${radius + radius * x1} ${radius + radius * y1} L ${radius} ${radius} A 0 0 0 ${arc} 0 ${radius} ${radius}`,
         fill: color,
         fillOpacity: 0.8,
@@ -512,10 +773,118 @@ PieSegment.displayName = "MapBubblePieSegment";
 var BubbleSegment = styled_components_default.path`
     transition: 0.2s ease-in-out;
     transition-property: fill, stroke;
+    ${({ $hasEventHandlers }) => $hasEventHandlers && "cursor: pointer;"}
+
+    &:focus {
+        outline: none;
+    }
 `;
-var StyledMarkerWrapper = styled_components_default(MarkerWrapper_default)`
-    cursor: pointer;
-`;
+var BubbleSvg = react_exports.memo(
+  ({
+    values,
+    valueRange,
+    tooltipHeader,
+    latitude,
+    longitude,
+    icon,
+    isPie,
+    themeColor,
+    segmentStartIndex,
+    colors,
+    bubbleSize,
+    onClick,
+    "aria-describedby": ariaDescribedBy,
+    onKeyDown,
+    onFocus,
+    onBlur,
+    setElementRef,
+    hasEventHandlers
+  }) => {
+    const featureFlagContext = react_exports.useContext(FeatureFlagContext_default);
+    const isBubbleMapIconFlagEnabled = Boolean(featureFlagContext == null ? void 0 : featureFlagContext.visualizations_enableBubbleMapIcon);
+    const total = values.reduce((totalValue, v) => totalValue + v, 0);
+    const radius = matchBubbleSize(valueRange, total);
+    const getAriaLabel = react_exports.useCallback(
+      (segmentName, segmentValue) => {
+        let segmentLabel = (0, i18n_exports._)("Map marker");
+        if (tooltipHeader) {
+          segmentLabel = tooltipHeader;
+        } else if (latitude !== void 0 && longitude !== void 0) {
+          segmentLabel = (0, format_exports.sprintf)((0, i18n_exports._)("Location: %(lat)s, %(lng)s"), {
+            lat: convertDegToDMS(latitude, "latitude"),
+            lng: convertDegToDMS(longitude, "longitude")
+          });
+        }
+        if (segmentName != null && segmentValue != null) {
+          segmentLabel = (0, format_exports.sprintf)((0, i18n_exports._)("%(locationLabel)s, %(segmentName)s: %(segmentValue)s"), {
+            locationLabel: segmentLabel,
+            segmentName,
+            segmentValue: segmentValue.toString()
+          });
+        }
+        if (hasEventHandlers) {
+          segmentLabel = (0, format_exports.sprintf)((0, i18n_exports._)("%(label)s, Click for drilldown"), { label: segmentLabel });
+        }
+        return segmentLabel;
+      },
+      [tooltipHeader, latitude, longitude, hasEventHandlers]
+    );
+    const offsets = [];
+    let runningTotal = 0;
+    values.forEach((count) => {
+      offsets.push(runningTotal);
+      runningTotal += count;
+    });
+    const width = radius * 2;
+    const showIcon = isBubbleMapIconFlagEnabled && radius >= ICON_DISPLAY_CUTOFF && icon && ((0, iconUtils_exports.isRemoteIcon)(icon) || (0, iconUtils_exports.isDataURI)(icon));
+    return /* @__PURE__ */ react_exports.createElement("svg", { width, height: width, viewBox: `-3 -3 ${width + 6} ${width + 6}` }, isPie && /* @__PURE__ */ react_exports.createElement(
+      "circle",
+      {
+        cx: radius,
+        cy: radius,
+        r: radius,
+        fill: "none",
+        strokeWidth: 2,
+        stroke: themeColor,
+        strokeOpacity: 0.3
+      }
+    ), values.map((v, i) => {
+      var _a, _b;
+      const globalIndex = segmentStartIndex + i;
+      return /* @__PURE__ */ react_exports.createElement(
+        PieSegment,
+        {
+          key: globalIndex,
+          start: offsets[i] / total,
+          end: (offsets[i] + v) / total,
+          radius,
+          color: colors[i],
+          themeColor,
+          segmentMetadata: bubbleSize[i],
+          handleBubbleClick: onClick,
+          ariaLabel: getAriaLabel((_a = bubbleSize[i]) == null ? void 0 : _a.name, (_b = bubbleSize[i]) == null ? void 0 : _b.value),
+          "aria-describedby": ariaDescribedBy,
+          onKeyDown,
+          onFocus,
+          onBlur,
+          elementRef: setElementRef ? (element) => setElementRef(globalIndex, element) : void 0,
+          hasEventHandlers
+        }
+      );
+    }), showIcon && /* @__PURE__ */ react_exports.createElement(
+      "foreignObject",
+      {
+        x: radius - radius * 0.8 / 2,
+        y: radius - radius * 0.8 / 2,
+        width: radius * 0.8,
+        height: radius * 0.8,
+        style: { pointerEvents: "none" },
+        "data-test": "bubble-icon-wrapper"
+      },
+      /* @__PURE__ */ react_exports.createElement(RemoteIcon_default, { iconURL: icon, width: radius * 0.8, height: radius * 0.8 })
+    ));
+  }
+);
 var Bubble = react_exports.memo(
   ({
     originalValues,
@@ -531,10 +900,15 @@ var Bubble = react_exports.memo(
     map,
     handleMapClick,
     icon,
-    showCoordinates
+    showCoordinates,
+    stylesManagedExternally,
+    segmentStartIndex = 0,
+    onKeyDown,
+    onFocus,
+    onBlur,
+    setElementRef,
+    hasEventHandlers
   }) => {
-    const featureFlagContext = react_exports.useContext(FeatureFlagContext_default);
-    const isBubbleMapIconFlagEnabled = Boolean(featureFlagContext == null ? void 0 : featureFlagContext.visualizations_enableBubbleMapIcon);
     const onBubbleClick = react_exports.useCallback(
       (e, name, value) => {
         handleMapClick(e, name, value);
@@ -544,58 +918,9 @@ var Bubble = react_exports.memo(
     );
     const allZeros = originalValues.every((v) => v === 0);
     const values = originalValues.map((v) => v > 0 ? v : 0);
-    const total = values.reduce((totalValue, v) => totalValue + v, 0);
-    const radius = matchBubbleSize(valueRange, total);
-    const bubble = react_exports.useMemo(() => {
-      if (allZeros || !originalValues.length) return null;
-      const offsets = [];
-      let runningTotal = 0;
-      values.forEach((count) => {
-        offsets.push(runningTotal);
-        runningTotal += count;
-      });
-      const width = radius * 2;
-      return /* @__PURE__ */ react_exports.createElement("svg", { width, height: width, viewBox: `-3 -3 ${width + 6} ${width + 6}` }, isPie && /* @__PURE__ */ react_exports.createElement(
-        "circle",
-        {
-          cx: radius,
-          cy: radius,
-          r: radius,
-          fill: "none",
-          strokeWidth: 2,
-          stroke: themeColor,
-          strokeOpacity: 0.3
-        }
-      ), values.map((v, i) => /* @__PURE__ */ react_exports.createElement(
-        PieSegment,
-        {
-          key: (0, id_exports.createDOMID)(),
-          start: offsets[i] / total,
-          end: (offsets[i] + v) / total,
-          radius,
-          color: colors[i],
-          themeColor,
-          segmentMetadata: bubbleSize[i],
-          handleBubbleClick: onBubbleClick
-        }
-      )));
-    }, [
-      bubbleSize,
-      colors,
-      isPie,
-      onBubbleClick,
-      originalValues,
-      themeColor,
-      allZeros,
-      radius,
-      total,
-      values
-    ]);
-    if (!bubble) {
-      return null;
-    }
+    if (allZeros || !originalValues.length) return null;
     return /* @__PURE__ */ react_exports.createElement(
-      StyledMarkerWrapper,
+      MarkerWrapper_default,
       {
         longitude,
         latitude,
@@ -603,22 +928,30 @@ var Bubble = react_exports.memo(
         tooltipHeader,
         map,
         "data-test-type": "bubble",
-        showCoordinates
+        showCoordinates,
+        stylesManagedExternally
       },
-      bubble,
-      isBubbleMapIconFlagEnabled && radius >= ICON_DISPLAY_CUTOFF && icon && ((0, iconUtils_exports.isRemoteIcon)(icon) || (0, iconUtils_exports.isDataURI)(icon)) && /* @__PURE__ */ react_exports.createElement(
-        "div",
+      /* @__PURE__ */ react_exports.createElement(
+        BubbleSvg,
         {
-          "data-test": "bubble-icon-wrapper",
-          style: {
-            position: "absolute",
-            top: `${radius}px`,
-            left: `${radius}px`,
-            transform: "translate(-50%, -50%)",
-            pointerEvents: "none"
-          }
-        },
-        /* @__PURE__ */ react_exports.createElement(RemoteIcon_default, { iconURL: icon, width: radius * 0.8, height: radius * 0.8 })
+          values,
+          valueRange,
+          colors,
+          bubbleSize,
+          isPie,
+          themeColor,
+          segmentStartIndex,
+          latitude,
+          longitude,
+          tooltipHeader,
+          icon,
+          onClick: onBubbleClick,
+          onKeyDown,
+          onFocus,
+          onBlur,
+          setElementRef,
+          hasEventHandlers
+        }
       )
     );
   }