@splunk/visualizations 27.1.0 → 27.2.0

package/Image.js

@@ -603,7 +603,7 @@ var withFixedSizeContainer = (Viz) => {
       FixSizeItem,
       {
         "data-test": "fix-size-item",
-        "data-splunk-visualization-version": "27.1.0 - fe8b048df",
+        "data-splunk-visualization-version": "27.2.0 - 2e7eda8d4",
         width,
         height,
         backgroundColor
@@ -669,7 +669,7 @@ var Cover = styled_components_default.div`
     bottom: 0;
 `;
 var Blocker = styled_components_default.div.attrs({
-  "data-splunk-visualization-version": "27.1.0 - fe8b048df"
+  "data-splunk-visualization-version": "27.2.0 - 2e7eda8d4"
 })`
     position: relative;
     width: 100%;

package/Line.js

@@ -2722,7 +2722,7 @@ var withFixedSizeContainer = (Viz) => {
       FixSizeItem,
       {
         "data-test": "fix-size-item",
-        "data-splunk-visualization-version": "27.1.0 - fe8b048df",
+        "data-splunk-visualization-version": "27.2.0 - 2e7eda8d4",
         width,
         height,
         backgroundColor
@@ -2788,7 +2788,7 @@ var Cover = styled_components_default.div`
     bottom: 0;
 `;
 var Blocker = styled_components_default.div.attrs({
-  "data-splunk-visualization-version": "27.1.0 - fe8b048df"
+  "data-splunk-visualization-version": "27.2.0 - 2e7eda8d4"
 })`
     position: relative;
     width: 100%;

package/LinkGraph.js

@@ -3048,7 +3048,7 @@ var withFixedSizeContainer = (Viz) => {
       FixSizeItem,
       {
         "data-test": "fix-size-item",
-        "data-splunk-visualization-version": "27.1.0 - fe8b048df",
+        "data-splunk-visualization-version": "27.2.0 - 2e7eda8d4",
         width,
         height,
         backgroundColor
@@ -3118,7 +3118,7 @@ var Cover = styled_components_default.div`
     bottom: 0;
 `;
 var Blocker = styled_components_default.div.attrs({
-  "data-splunk-visualization-version": "27.1.0 - fe8b048df"
+  "data-splunk-visualization-version": "27.2.0 - 2e7eda8d4"
 })`
     position: relative;
     width: 100%;
@@ -4254,6 +4254,10 @@ var StyledViewport = styled_components_default.div`
         }
     }
 
+    .node:focus {
+        box-shadow: ${variables_default.focusShadow};
+    }
+
     .node.hovering {
         background: ${(props) => props.nodeHighlightColor};
         p:not(.badge) {
@@ -4752,7 +4756,9 @@ var Nodes = (props) => {
       style: { visibility: props.nodes[key].data.isHidden ? "hidden" : "visible" },
       onClick: () => props.onNodeClick(key),
       onMouseEnter: () => props.handleMouseEnterNode(key),
-      onMouseLeave: () => props.handleMouseLeave()
+      onMouseLeave: () => props.handleMouseLeave(),
+      onFocus: () => props.handleMouseEnterNode(key),
+      onBlur: () => props.handleMouseLeave()
     },
     /* @__PURE__ */ react_exports.createElement(
       NodeToUse,
@@ -5111,6 +5117,7 @@ var StyledFields = styled_components_default.div`
     justify-content: space-between;
     align-items: center;
     max-height: 30px;
+    z-index: 1;
 
     > div:last-child {
         margin-right: 16px;
@@ -5126,9 +5133,7 @@ var StyledFields = styled_components_default.div`
             background: transparent !important;
             padding: 0;
             border: none;
-            border-radius: !important;
             font-size: 12px !important;
-            box-shadow: none !important;
         }
 
         > button > span {
@@ -5230,7 +5235,18 @@ var PureLinkGraph = (props) => {
       width,
       "data-test": "link-graph"
     },
-    /* @__PURE__ */ react_exports.createElement(LinkGraphContainer, { "data-test-render-count": value, height, width }, /* @__PURE__ */ react_exports.createElement(
+    /* @__PURE__ */ react_exports.createElement(LinkGraphContainer, { "data-test-render-count": value, height, width }, /* @__PURE__ */ react_exports.createElement(StyledFields, { nodeWidth, nodeSpacingX }, Object.keys(graphDataModelState.fields).map((field, index) => /* @__PURE__ */ react_exports.createElement(
+      Field_default,
+      {
+        showNodeCounts,
+        "data-test": `field-${index}`,
+        key: field,
+        onSort: (sortKey) => handleFieldSort(graphDataModelState.fields[field].value, sortKey),
+        field: graphDataModelState.fields[field].value,
+        width: nodeWidth,
+        count: graphDataModelState.fields[field].count
+      }
+    ))), /* @__PURE__ */ react_exports.createElement(
       Graph_default,
       {
         linkColor,
@@ -5246,18 +5262,7 @@ var PureLinkGraph = (props) => {
         metadataFields,
         metadataColumns
       }
-    ), /* @__PURE__ */ react_exports.createElement(StyledFields, { nodeWidth, nodeSpacingX }, Object.keys(graphDataModelState.fields).map((field, index) => /* @__PURE__ */ react_exports.createElement(
-      Field_default,
-      {
-        showNodeCounts,
-        "data-test": `field-${index}`,
-        key: field,
-        onSort: (sortKey) => handleFieldSort(graphDataModelState.fields[field].value, sortKey),
-        field: graphDataModelState.fields[field].value,
-        width: nodeWidth,
-        count: graphDataModelState.fields[field].count
-      }
-    ))))
+    ))
   );
 };
 PureLinkGraph.propTypes = {