@splunk/visualizations 28.6.0 → 28.7.0

package/NetworkGraph.js

@@ -1674,7 +1674,7 @@ var Cover = styled_components_default.div`
     bottom: 0;
 `;
 var Blocker = styled_components_default.div.attrs({
-  "data-splunk-visualization-version": "28.6.0 - 92427899a"
+  "data-splunk-visualization-version": "28.7.0 - d7b18cab6"
 })`
     position: relative;
     width: 100%;
@@ -1785,7 +1785,7 @@ var withFixedSizeContainer = (Viz) => {
       FixSizeItem,
       {
         "data-test": "fix-size-item",
-        "data-splunk-visualization-version": "28.6.0 - 92427899a",
+        "data-splunk-visualization-version": "28.7.0 - d7b18cab6",
         width,
         height,
         backgroundColor
@@ -4117,6 +4117,9 @@ var RECT_TOP_MARGIN = 4;
 var LABEL_FONT_SIZE = 12;
 var FONT = `${LABEL_FONT_SIZE}px ${VIZ_FONT_FAMILY}`;
 var DIM_OPACITY = 0.25;
+var NODE_FOCUS_RING_PADDING = 4;
+var NODE_FOCUS_RING_STROKE_WIDTH = 3;
+var NODE_FOCUS_RING_SCREEN_PADDING = NODE_FOCUS_RING_STROKE_WIDTH / 2;
 var MIN_NODE_SPACING = 4;
 var MIN_EDGE_LENGTH = 48;
 var MIN_NODE_CONTAINER_SIZE = DEFAULT_NODE_RADIUS * 2 + MIN_EDGE_LENGTH;
@@ -4547,9 +4550,10 @@ var truncateTextToMaxLines = (text = "", font = `12px ${VIZ_FONT_FAMILY}`, maxWi
   }
   return outputLines;
 };
-var getNodeBounds = (node) => {
+var getNodeBounds = (node, options = {}) => {
   var _a, _b;
   if (!node) return void 0;
+  if (!Number.isFinite(node.x) || !Number.isFinite(node.y)) return void 0;
   const truncatedText = truncateTextToMaxLines((_a = node.label) != null ? _a : "", FONT, MAX_TEXT_WIDTH, 2);
   const textWidth = truncatedText.length ? Math.max(...truncatedText.map((line) => computeTextWidth(line, FONT))) : 0;
   const labelHeight = truncatedText.length > 0 ? RECT_VERTICAL_PADDING * 2 + LINE_HEIGHT * truncatedText.length : 0;
@@ -4557,13 +4561,156 @@ var getNodeBounds = (node) => {
   const nodeLabelWidth = textWidth + RECT_HORIZONTAL_PADDING * 2;
   const nodeDiameter = (_b = node.size) != null ? _b : DEFAULT_NODE_RADIUS * 2;
   const nodeRadius = nodeDiameter / 2;
+  const nodeCircleRadius = options.includeFocusRing ? nodeRadius + NODE_FOCUS_RING_PADDING : nodeRadius;
+  const nodeLeft = node.x - Math.max(nodeCircleRadius, nodeLabelWidth / 2);
+  const nodeWidth = Math.max(nodeCircleRadius * 2, nodeLabelWidth);
   return {
-    x: node.x - Math.max(nodeRadius, nodeLabelWidth / 2),
-    y: node.y - nodeRadius,
-    x2: node.x - Math.max(nodeRadius, nodeLabelWidth / 2) + Math.max(nodeRadius * 2, nodeLabelWidth),
-    y2: node.y + nodeRadius + nodeLabelHeightWithMargin
+    x: nodeLeft,
+    y: node.y - nodeCircleRadius,
+    x2: nodeLeft + nodeWidth,
+    y2: Math.max(node.y + nodeCircleRadius, node.y + nodeRadius + nodeLabelHeightWithMargin)
   };
 };
+var getScreenBounds = (node, transform, options = {}) => {
+  const bounds = getNodeBounds(node, options);
+  if (!bounds) {
+    return null;
+  }
+  const screenPadding = options.includeFocusRing ? NODE_FOCUS_RING_SCREEN_PADDING : 0;
+  const left = bounds.x * transform.k + transform.x - screenPadding;
+  const top = bounds.y * transform.k + transform.y - screenPadding;
+  const right = bounds.x2 * transform.k + transform.x + screenPadding;
+  const bottom = bounds.y2 * transform.k + transform.y + screenPadding;
+  return {
+    left,
+    top,
+    right,
+    bottom,
+    width: right - left,
+    height: bottom - top
+  };
+};
+var isNodePartiallyVisible = (node, transform, viewportWidth, viewportHeight) => {
+  const bounds = getScreenBounds(node, transform);
+  if (!bounds) {
+    return false;
+  }
+  return bounds.right >= 0 && bounds.left <= viewportWidth && bounds.bottom >= 0 && bounds.top <= viewportHeight;
+};
+var getOrderedNodesWithPositions = (nodeMap) => Object.values(nodeMap).filter((node) => Number.isFinite(node.x) && Number.isFinite(node.y)).sort((a, b) => a.index - b.index);
+var getCentermostNodeId = (nodeMap, transform, viewportWidth, viewportHeight) => {
+  const nodesWithPositions = getOrderedNodesWithPositions(nodeMap);
+  if (nodesWithPositions.length === 0) {
+    return null;
+  }
+  const visibleNodes = nodesWithPositions.filter(
+    (node) => isNodePartiallyVisible(node, transform, viewportWidth, viewportHeight)
+  );
+  const candidates = visibleNodes.length > 0 ? visibleNodes : nodesWithPositions;
+  const viewportCenterX = viewportWidth / 2;
+  const viewportCenterY = viewportHeight / 2;
+  return candidates.reduce((closestNode, node) => {
+    const closestDistance = __pow(closestNode.x * transform.k + transform.x - viewportCenterX, 2) + __pow(closestNode.y * transform.k + transform.y - viewportCenterY, 2);
+    const distance = __pow(node.x * transform.k + transform.x - viewportCenterX, 2) + __pow(node.y * transform.k + transform.y - viewportCenterY, 2);
+    if (distance < closestDistance) {
+      return node;
+    }
+    return closestNode;
+  }, candidates[0]).id;
+};
+var getNextNodeIdInDirection = (nodeMap, currentNodeId, direction) => {
+  if (!currentNodeId || !nodeMap[currentNodeId]) {
+    return null;
+  }
+  const currentNode = nodeMap[currentNodeId];
+  if (!Number.isFinite(currentNode.x) || !Number.isFinite(currentNode.y)) {
+    return null;
+  }
+  const candidates = getOrderedNodesWithPositions(nodeMap).filter((node) => node.id !== currentNodeId);
+  const directionalCandidates = candidates.map((node) => {
+    const dx = node.x - currentNode.x;
+    const dy = node.y - currentNode.y;
+    let primaryDistance;
+    let secondaryDistance;
+    switch (direction) {
+      case "ArrowLeft":
+        primaryDistance = -dx;
+        secondaryDistance = Math.abs(dy);
+        break;
+      case "ArrowRight":
+        primaryDistance = dx;
+        secondaryDistance = Math.abs(dy);
+        break;
+      case "ArrowUp":
+        primaryDistance = -dy;
+        secondaryDistance = Math.abs(dx);
+        break;
+      case "ArrowDown":
+        primaryDistance = dy;
+        secondaryDistance = Math.abs(dx);
+        break;
+      default:
+        primaryDistance = Number.NaN;
+        secondaryDistance = Number.NaN;
+    }
+    return {
+      node,
+      primaryDistance,
+      secondaryDistance,
+      navigationScore: primaryDistance + secondaryDistance * 4,
+      distance: __pow(dx, 2) + __pow(dy, 2),
+      isDirectionallyAligned: primaryDistance >= secondaryDistance
+    };
+  }).filter(({ primaryDistance }) => primaryDistance > 0);
+  if (directionalCandidates.length === 0) {
+    return null;
+  }
+  const alignedCandidates = directionalCandidates.filter(
+    ({ isDirectionallyAligned }) => isDirectionallyAligned
+  );
+  const candidatesToSort = alignedCandidates.length > 0 ? alignedCandidates : directionalCandidates;
+  candidatesToSort.sort((a, b) => {
+    if (a.navigationScore !== b.navigationScore) {
+      return a.navigationScore - b.navigationScore;
+    }
+    if (a.secondaryDistance !== b.secondaryDistance) {
+      return a.secondaryDistance - b.secondaryDistance;
+    }
+    return a.node.index - b.node.index;
+  });
+  return candidatesToSort[0].node.id;
+};
+var getPanDeltaToRevealNode = (node, transform, viewportWidth, viewportHeight) => {
+  const bounds = getScreenBounds(node, transform, { includeFocusRing: true });
+  if (!bounds) {
+    return { dx: 0, dy: 0 };
+  }
+  let dx = 0;
+  let dy = 0;
+  if (bounds.width <= viewportWidth) {
+    if (bounds.left < 0) {
+      dx = -bounds.left;
+    } else if (bounds.right > viewportWidth) {
+      dx = viewportWidth - bounds.right;
+    }
+  } else if (bounds.left > 0) {
+    dx = -bounds.left;
+  } else if (bounds.right < viewportWidth) {
+    dx = viewportWidth - bounds.right;
+  }
+  if (bounds.height <= viewportHeight) {
+    if (bounds.top < 0) {
+      dy = -bounds.top;
+    } else if (bounds.bottom > viewportHeight) {
+      dy = viewportHeight - bounds.bottom;
+    }
+  } else if (bounds.top > 0) {
+    dy = -bounds.top;
+  } else if (bounds.bottom < viewportHeight) {
+    dy = viewportHeight - bounds.bottom;
+  }
+  return { dx, dy };
+};
 var getFullVizBoundsWithPadding = (nodeMap, padding) => {
   let minX = Infinity;
   let minY = Infinity;
@@ -5146,7 +5293,18 @@ var NodeCircle = styled_components_default.circle`
   var _a;
   return (_a = props.color) != null ? _a : themes_exports.variables.neutral100;
 }};
-    cursor: pointer;
+    cursor: ${(props) => props.$isClickable ? "pointer" : "default"};
+
+    &:focus {
+        outline: none;
+    }
+`;
+var NodeFocusRing = styled_components_default.circle`
+    fill: none;
+    stroke: ${themes_exports.variables.focusColor};
+    stroke-width: ${NODE_FOCUS_RING_STROKE_WIDTH}px;
+    pointer-events: none;
+    vector-effect: non-scaling-stroke;
 `;
 var IconElement = (_a) => {
   var _b = _a, { icon } = _b, iconProps = __objRest(_b, ["icon"]);
@@ -5185,7 +5343,8 @@ var Node = (0, react_exports.memo)(function Node2(props) {
     handleOpen,
     handleAnchor,
     handleRequestClose,
-    isDragging = false
+    isDragging = false,
+    tabIndex = 0
   } = props;
   const circleRef = (0, react_exports.useRef)(null);
   const truncatedText = truncateTextToMaxLines(label, FONT, MAX_TEXT_WIDTH, 2);
@@ -5203,6 +5362,8 @@ var Node = (0, react_exports.memo)(function Node2(props) {
   const { iconUrl, shouldRenderRemoteIcon } = (0, react_exports.useMemo)(() => getIconRenderInfo(icon), [icon]);
   const builtInIcon = (0, react_exports.useMemo)(() => isBuiltInIcon(icon) ? icon : null, [icon]);
   const [IconComponent, setIconComponent] = react_exports.useState(null);
+  const [isFocused, setIsFocused] = react_exports.useState(false);
+  const isClickable = typeof handleNodeClick === "function";
   react_exports.useEffect(() => {
     if (!builtInIcon) {
       setIconComponent(null);
@@ -5234,6 +5395,8 @@ var Node = (0, react_exports.memo)(function Node2(props) {
     };
   }, [builtInIcon]);
   const nodeClickHandler = (0, react_exports.useCallback)(() => {
+    var _a2;
+    (_a2 = circleRef.current) == null ? void 0 : _a2.focus();
     if (handleNodeClick) {
       handleNodeClick({ id, value, index });
     }
@@ -5285,12 +5448,29 @@ var Node = (0, react_exports.memo)(function Node2(props) {
     }
     handleRequestClose();
   }, [handleNodeMouseOut, nodeWithPosition, setHighlightedNode, handleRequestClose, isDragging]);
+  const onFocus = (0, react_exports.useCallback)(() => {
+    setIsFocused(true);
+    onMouseEnter();
+  }, [onMouseEnter]);
+  const onBlur = (0, react_exports.useCallback)(() => {
+    setIsFocused(false);
+    onMouseLeave();
+  }, [onMouseLeave]);
   react_exports.useEffect(() => {
     if (isDragging) {
       handleRequestClose();
     }
   }, [isDragging, handleRequestClose]);
-  return /* @__PURE__ */ react_exports.createElement(react_exports.Fragment, null, /* @__PURE__ */ react_exports.createElement(
+  return /* @__PURE__ */ react_exports.createElement(react_exports.Fragment, null, isFocused && /* @__PURE__ */ react_exports.createElement(
+    NodeFocusRing,
+    {
+      "data-test": "node-focus-ring",
+      r: radius + NODE_FOCUS_RING_PADDING,
+      cx: x,
+      cy: y,
+      opacity
+    }
+  ), /* @__PURE__ */ react_exports.createElement(
     NodeCircle,
     {
       "data-test": "node",
@@ -5301,17 +5481,18 @@ var Node = (0, react_exports.memo)(function Node2(props) {
       height: diameter,
       id: sanitizedId,
       ref: circleRef,
-      tabIndex: 0,
-      role: "button",
+      tabIndex,
+      role: isClickable ? "button" : "graphics-object",
       "aria-label": label || (0, i18n_exports._)("Node"),
+      $isClickable: isClickable,
       color,
       opacity,
-      onClick: nodeClickHandler,
-      onKeyDown,
+      onClick: isClickable ? nodeClickHandler : void 0,
+      onKeyDown: isClickable ? onKeyDown : void 0,
       onMouseEnter,
       onMouseLeave,
-      onFocus: onMouseEnter,
-      onBlur: onMouseLeave
+      onFocus,
+      onBlur
     }
   ), !!IconComponent && !shouldHideIcon && /* @__PURE__ */ react_exports.createElement(
     NodeIcon,
@@ -5483,6 +5664,19 @@ var defaultImport114 = __toESM(require("@splunk/react-ui/Popover"));
 __reExport(Popover_exports, require("@splunk/react-ui/Popover"));
 var Popover_default = "default" in defaultImport114 ? defaultImport114.default : defaultImport114;
 
+// src/common/utils/shadowDomUtils.ts
+init_define_global();
+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/NetworkGraph/PureNetworkGraph/components/Tooltip.tsx
 var StyledPopover = styled_components_default(Popover_default)`
     font-size: ${themes_exports.variables.fontSizeSmall};
@@ -5525,17 +5719,24 @@ var Tooltip = ({
   headerValue,
   nodeFields = {},
   onRequestClose
-}) => /* @__PURE__ */ react_exports.createElement(
-  StyledPopover,
-  {
-    "data-test": "network-graph-tooltip",
-    open,
-    anchor,
-    onRequestClose,
-    defaultPlacement: "above"
-  },
-  /* @__PURE__ */ react_exports.createElement(StyledWrapper, null, /* @__PURE__ */ react_exports.createElement(Title, null, headerValue), /* @__PURE__ */ react_exports.createElement(StyledTable, null, /* @__PURE__ */ react_exports.createElement("tbody", null, Object.entries(nodeFields).map(([field, value]) => /* @__PURE__ */ react_exports.createElement("tr", { key: field }, /* @__PURE__ */ react_exports.createElement(StyledLabelCell, null, (0, i18n_exports._)(field)), /* @__PURE__ */ react_exports.createElement(StyledValueCell, null, (0, i18n_exports._)(String(value))))))))
-);
+}) => {
+  if (!open || !anchor) {
+    return null;
+  }
+  const styleTarget = getFloatingLayerStyleTarget(anchor);
+  const popover = /* @__PURE__ */ react_exports.createElement(
+    StyledPopover,
+    {
+      "data-test": "network-graph-tooltip",
+      open,
+      anchor,
+      onRequestClose,
+      defaultPlacement: "above"
+    },
+    /* @__PURE__ */ react_exports.createElement(StyledWrapper, null, /* @__PURE__ */ react_exports.createElement(Title, null, headerValue), /* @__PURE__ */ react_exports.createElement(StyledTable, null, /* @__PURE__ */ react_exports.createElement("tbody", null, Object.entries(nodeFields).map(([field, value]) => /* @__PURE__ */ react_exports.createElement("tr", { key: field }, /* @__PURE__ */ react_exports.createElement(StyledLabelCell, null, (0, i18n_exports._)(field)), /* @__PURE__ */ react_exports.createElement(StyledValueCell, null, (0, i18n_exports._)(String(value))))))))
+  );
+  return styleTarget ? /* @__PURE__ */ react_exports.createElement(styled_components_exports.StyleSheetManager, { target: styleTarget }, popover) : popover;
+};
 var Tooltip_default = Tooltip;
 
 // src/NetworkGraph/PureNetworkGraph/components/NetworkGraphSvg.tsx
@@ -5559,7 +5760,8 @@ var NetworkGraphSvg = (0, react_exports.memo)(function NetworkGraphSvg2({
   handleNodeMouseOut,
   highlightedNode,
   setHighlightedNode = () => void 0,
-  isDragging = false
+  isDragging = false,
+  activeNodeId
 }) {
   var _a, _b;
   const graphId = (0, react_exports.useId)();
@@ -5593,6 +5795,15 @@ var NetworkGraphSvg = (0, react_exports.memo)(function NetworkGraphSvg2({
   const anchorNodeVisual = anchorId ? nodeMapVisual[anchorId] : void 0;
   const headerValue = (_a = anchorNodeVisual == null ? void 0 : anchorNodeVisual.tooltipHeader) != null ? _a : "";
   const nodeFields = (_b = anchorNodeVisual == null ? void 0 : anchorNodeVisual.tooltipFields) != null ? _b : {};
+  const getNodeTabIndex = (0, react_exports.useCallback)(
+    (id) => {
+      if (activeNodeId === void 0) {
+        return 0;
+      }
+      return activeNodeId === id ? 0 : -1;
+    },
+    [activeNodeId]
+  );
   (0, react_exports.useEffect)(() => {
     if (isReadyToRender) {
       (0, d3_selection_exports.select)(svgRef == null ? void 0 : svgRef.current).selectAll("circle").on("mousedown", (event) => {
@@ -5697,7 +5908,8 @@ var NetworkGraphSvg = (0, react_exports.memo)(function NetworkGraphSvg2({
           handleOpen,
           handleAnchor,
           handleRequestClose,
-          isDragging
+          isDragging,
+          tabIndex: getNodeTabIndex(id)
         }
       );
     }))
@@ -5801,7 +6013,8 @@ var ZoomControls = (0, react_exports.memo)(function ZoomControls2(props) {
     hideReset = false,
     hideZoomControls = false,
     disableZoomIn = false,
-    disableZoomOut = false
+    disableZoomOut = false,
+    buttonTabIndex
   } = props;
   return /* @__PURE__ */ react_exports.createElement(StyledZoomControlsContainer, { "data-test": "zoom-controls-container" }, !hideZoomControls && /* @__PURE__ */ react_exports.createElement(StyledBaseContainer, { "data-test": "zoom-buttons-container" }, /* @__PURE__ */ react_exports.createElement(Tooltip_default2, { contentRelationship: "label", content: (0, i18n_exports._)("Zoom in") }, /* @__PURE__ */ react_exports.createElement(
     StyledZoomInButton,
@@ -5810,7 +6023,8 @@ var ZoomControls = (0, react_exports.memo)(function ZoomControls2(props) {
       appearance: "subtle",
       onClick: handleZoomIn,
       disabled: disableZoomIn,
-      "data-test": "zoom-in-button"
+      "data-test": "zoom-in-button",
+      tabIndex: buttonTabIndex
     }
   )), /* @__PURE__ */ react_exports.createElement(Tooltip_default2, { contentRelationship: "label", content: (0, i18n_exports._)("Zoom out") }, /* @__PURE__ */ react_exports.createElement(
     StyledZoomOutButton,
@@ -5819,7 +6033,8 @@ var ZoomControls = (0, react_exports.memo)(function ZoomControls2(props) {
       appearance: "subtle",
       onClick: handleZoomOut,
       disabled: disableZoomOut,
-      "data-test": "zoom-out-button"
+      "data-test": "zoom-out-button",
+      tabIndex: buttonTabIndex
     }
   ))), !hideReset && /* @__PURE__ */ react_exports.createElement(StyledResetContainer, { moveToTop: hideZoomControls, "data-test": "reset-button-container" }, /* @__PURE__ */ react_exports.createElement(Tooltip_default2, { contentRelationship: "label", content: (0, i18n_exports._)("Reset zoom") }, /* @__PURE__ */ react_exports.createElement(
     StyledButton,
@@ -5827,7 +6042,8 @@ var ZoomControls = (0, react_exports.memo)(function ZoomControls2(props) {
       icon: /* @__PURE__ */ react_exports.createElement(SquareAndCorners_default, null),
       appearance: "subtle",
       onClick: handleReset,
-      "data-test": "reset-button"
+      "data-test": "reset-button",
+      tabIndex: buttonTabIndex
     }
   ))));
 });
@@ -5847,6 +6063,11 @@ var forwardMouseDownEvent = (event, container) => {
   const forwarded = new MouseEvent("mousedown", event);
   container == null ? void 0 : container.dispatchEvent(forwarded);
 };
+var getNodeIdFromEventTarget = (target) => {
+  const nodeElement = target instanceof Element ? target.closest('[data-test="node"]') : null;
+  return (nodeElement == null ? void 0 : nodeElement.id) ? unsanitizeSvgId(nodeElement.id) : null;
+};
+var isKeyboardNavigationDirection = (key) => key === "ArrowLeft" || key === "ArrowRight" || key === "ArrowUp" || key === "ArrowDown";
 var PureNetworkGraph = ({
   width = DEFAULT_CHART_WIDTH,
   height = DEFAULT_CHART_HEIGHT,
@@ -5889,7 +6110,7 @@ var PureNetworkGraph = ({
   tooltipNodeFields = EMPTY_ARRAY,
   tooltipHeaderFieldName = "",
   onOptionsChange = lodash_exports.noop,
-  onNodeClick = lodash_exports.noop,
+  onNodeClick,
   onNodeMouseOver = lodash_exports.noop,
   onNodeMouseOut = lodash_exports.noop,
   onNodeDrag = lodash_exports.noop
@@ -5911,6 +6132,7 @@ var PureNetworkGraph = ({
     x: null,
     y: null
   });
+  const hasNodeClickHandler = typeof onNodeClick === "function";
   const frozenNodeMapForZoomRef = (0, react_exports.useRef)(null);
   const dragOffsetRef = (0, react_exports.useRef)(null);
   const baseNodeMapRef = (0, react_exports.useRef)(null);
@@ -6017,6 +6239,7 @@ var PureNetworkGraph = ({
   const [hideReset, setHideReset] = (0, react_exports.useState)(true);
   const [isReadyToRender, setIsReadyToRender] = (0, react_exports.useState)(false);
   const [highlightedNode, setHighlightedNode] = (0, react_exports.useState)(null);
+  const [focusedNodeId, setFocusedNodeId] = (0, react_exports.useState)(null);
   const numberWidth = typeof width === "string" ? containerSize.width : width;
   const numberHeight = typeof height === "string" ? containerSize.height : height;
   const effectiveWidth = Math.max(numberWidth, 0);
@@ -6032,6 +6255,22 @@ var PureNetworkGraph = ({
     () => d3_zoom_exports.zoomIdentity.translate(effectiveWidth / 2, effectiveHeight / 2).scale(autoZoomLevel).translate(-autoCenter[0], -autoCenter[1]),
     [autoCenter, autoZoomLevel, effectiveWidth, effectiveHeight]
   );
+  const currentKeyboardTransform = (0, react_exports.useMemo)(
+    () => {
+      var _a2, _b2, _c, _d, _e, _f, _g;
+      return {
+        k: (_c = (_b2 = (_a2 = parentZoomAndPanState.zoom) != null ? _a2 : initialTransform.k) != null ? _b2 : autoZoomLevel) != null ? _c : 1,
+        x: (_e = (_d = parentZoomAndPanState.x) != null ? _d : initialTransform.x) != null ? _e : 0,
+        y: (_g = (_f = parentZoomAndPanState.y) != null ? _f : initialTransform.y) != null ? _g : 0
+      };
+    },
+    [autoZoomLevel, initialTransform, parentZoomAndPanState]
+  );
+  const centermostNodeId = (0, react_exports.useMemo)(
+    () => getCentermostNodeId(nodeMapStruct, currentKeyboardTransform, effectiveWidth, effectiveHeight),
+    [currentKeyboardTransform, effectiveHeight, effectiveWidth, nodeMapStruct]
+  );
+  const activeNodeId = focusedNodeId && nodeMapStruct[focusedNodeId] ? focusedNodeId : centermostNodeId;
   const { disableZoomIn, disableZoomOut } = (0, react_exports.useMemo)(
     () => getZoomDisableState(parentZoomAndPanState.zoom, autoZoomLevel, minZoomLevel),
     [parentZoomAndPanState.zoom, autoZoomLevel, minZoomLevel]
@@ -6085,6 +6324,11 @@ var PureNetworkGraph = ({
     const shouldHideReset = (!parentZoomAndPanState.zoom || nearlyEqual(parentZoomAndPanState.zoom, initialTransform.k, 0.01, true)) && (!parentZoomAndPanState.x || nearlyEqual(parentZoomAndPanState.x, initialTransform.x)) && (!parentZoomAndPanState.y || nearlyEqual(parentZoomAndPanState.y, initialTransform.y));
     setHideReset(shouldHideReset);
   }, [parentZoomAndPanState, initialTransform]);
+  (0, react_exports.useEffect)(() => {
+    if (focusedNodeId && !nodeMapStruct[focusedNodeId]) {
+      setFocusedNodeId(null);
+    }
+  }, [focusedNodeId, nodeMapStruct]);
   (0, react_exports.useEffect)(() => {
     if ((0, d3_selection_exports.select)(svgRef.current).on) (0, d3_selection_exports.select)(svgRef.current).on(".zoom", null);
     const minTopLeft = [autoCenter[0] - minZoomWidth / 2, autoCenter[1] - minZoomHeight / 2];
@@ -6136,8 +6380,68 @@ var PureNetworkGraph = ({
     },
     [zoomFunc]
   );
+  const handleAutoPan = (0, react_exports.useCallback)(
+    (dx, dy) => {
+      if (!svgRef.current || !dx && !dy) {
+        return;
+      }
+      const transform = (0, d3_zoom_exports.zoomTransform)(svgRef.current);
+      const zoomLevel = Number.isFinite(transform.k) && transform.k > 0 ? transform.k : currentKeyboardTransform.k;
+      (0, d3_selection_exports.select)(svgRef.current).call(zoomFunc.translateBy, dx / zoomLevel, dy / zoomLevel);
+    },
+    [currentKeyboardTransform.k, zoomFunc]
+  );
+  const focusNodeById = (0, react_exports.useCallback)((nodeId) => {
+    var _a2;
+    const nodeElement = (_a2 = svgRef.current) == null ? void 0 : _a2.querySelector(`#${sanitizeSvgId(nodeId)}`);
+    nodeElement == null ? void 0 : nodeElement.focus();
+  }, []);
+  const ensureNodeVisible = (0, react_exports.useCallback)(
+    (nodeId) => {
+      const node = nodeMapStruct[nodeId];
+      if (!node) {
+        return;
+      }
+      const { dx, dy } = getPanDeltaToRevealNode(
+        node,
+        currentKeyboardTransform,
+        effectiveWidth,
+        effectiveHeight
+      );
+      handleAutoPan(dx, dy);
+    },
+    [currentKeyboardTransform, effectiveHeight, effectiveWidth, handleAutoPan, nodeMapStruct]
+  );
+  const handleFocus = (0, react_exports.useCallback)(
+    (e) => {
+      const nodeId = getNodeIdFromEventTarget(e.target);
+      setFocusedNodeId(nodeId);
+      if (nodeId) {
+        ensureNodeVisible(nodeId);
+      }
+    },
+    [ensureNodeVisible]
+  );
+  const handleBlur = (0, react_exports.useCallback)((e) => {
+    var _a2;
+    const nextTarget = e.relatedTarget;
+    if (!nextTarget || !((_a2 = containerRef.current) == null ? void 0 : _a2.contains(nextTarget))) {
+      setFocusedNodeId(null);
+    }
+  }, []);
   const handleKeyDown = (0, react_exports.useCallback)(
     (e) => {
+      const nodeId = getNodeIdFromEventTarget(e.target);
+      if (nodeId && isKeyboardNavigationDirection(e.key)) {
+        const nextNodeId = getNextNodeIdInDirection(nodeMapStruct, nodeId, e.key);
+        e.preventDefault();
+        e.stopPropagation();
+        if (nextNodeId) {
+          setFocusedNodeId(nextNodeId);
+          focusNodeById(nextNodeId);
+        }
+        return;
+      }
       switch (e.key) {
         case "+":
         case "=":
@@ -6163,7 +6467,7 @@ var PureNetworkGraph = ({
       }
       e.preventDefault();
     },
-    [handlePan, handleZoomIn, handleZoomOut]
+    [focusNodeById, handlePan, handleZoomIn, handleZoomOut, nodeMapStruct]
   );
   const handleMouseDown = (0, react_exports.useCallback)(
     // mousedown uses event from d3 which is typed to any
@@ -6248,7 +6552,7 @@ var PureNetworkGraph = ({
   );
   const handleNodeClick = (0, react_exports.useCallback)(
     (node) => {
-      if (node) {
+      if (node && typeof onNodeClick === "function") {
         const metadataForNode = metadata[node.index] || {};
         onNodeClick({
           type: "node.click",
@@ -6317,7 +6621,9 @@ var PureNetworkGraph = ({
       width: cssWidth,
       height: cssHeight,
       tabIndex: 0,
-      onKeyDown: handleKeyDown
+      onKeyDown: handleKeyDown,
+      onFocus: handleFocus,
+      onBlur: handleBlur
     },
     nodeMapVisual && nodeMapStruct && /* @__PURE__ */ react_default.createElement(react_default.Fragment, null, isReadyToRender && /* @__PURE__ */ react_default.createElement(
       ZoomControls_default,
@@ -6347,12 +6653,13 @@ var PureNetworkGraph = ({
         handleMouseDown,
         handleMouseUp,
         handleDrag,
-        handleNodeClick,
+        handleNodeClick: hasNodeClickHandler ? handleNodeClick : void 0,
         handleNodeMouseOver,
         handleNodeMouseOut,
         highlightedNode,
         setHighlightedNode,
-        isDragging: isDragging.dragStarted
+        isDragging: isDragging.dragStarted,
+        activeNodeId
       }
     ))
   );
@@ -7221,7 +7528,13 @@ var computeVizProps = (_a) => {
 };
 var withTooltipFields = (Viz) => {
   const VizWithTooltipFields = (_a) => {
-    var _b = _a, { dataSources, options } = _b, otherProps = __objRest(_b, ["dataSources", "options"]);
+    var _b = _a, {
+      dataSources,
+      options
+    } = _b, otherProps = __objRest(_b, [
+      "dataSources",
+      "options"
+    ]);
     var _a2;
     if (!((_a2 = dataSources == null ? void 0 : dataSources.primary) == null ? void 0 : _a2.data)) {
       return /* @__PURE__ */ react_exports.createElement(Viz, __spreadProps(__spreadValues({}, otherProps), { options }));