Fix: Cursor styles

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gtk-grafana/react-json-tree",
-  "version": "0.0.7",
+  "version": "0.0.8",
   "description": "React JSON Viewer Component, Extracted from redux-devtools",
   "keywords": [
     "react",

src/JSONValueNode.tsx

@@ -32,7 +32,7 @@ export default function JSONValueNode({
 }: Props) {
   return (
     <li
-      className={`${styles.valueNode} valueNode--${nodeType} valueNode--${keyPath}`}
+      className={`${styles.valueNode} valueNode--${nodeType} valueNode--${keyPath[0]}`}
     >
       <span data-testid={"value-node-label"} className={styles.valueNodeLabel}>
         {labelRenderer(keyPath, nodeType, false, false)}

src/index.tsx

@@ -28,8 +28,17 @@ const defaultItemString: GetItemString = (
     {itemType} {itemString}
   </span>
 );
-const defaultLabelRenderer: LabelRenderer = ([label]) => (
-  <span className={styles.defaultLabelWrap}>{label}:</span>
+const defaultLabelRenderer: LabelRenderer = (
+  [label],
+  nodeType,
+  expanded,
+  expandable,
+) => (
+  <span
+    className={`${styles.defaultLabelWrap} ${expandable ? styles.defaultLabelWrapExpandable : ""}`}
+  >
+    {label}:
+  </span>
 );
 const noCustomNode: IsCustomNode = () => false;
 

src/styles/JSONNestedNode.module.scss

@@ -1,10 +1,12 @@
 .nestedNode {
   display: var(--json-tree-inline-flex);
   position: relative;
+  cursor: default;
 
   &--expandable {
     align-items: var(--json-tree-align-items);
     display: var(--json-tree-block);
+    cursor: pointer;
   }
 
   &--expanded {
@@ -23,7 +25,6 @@
 .nestedNodeLabelWrap {
   display: var(--json-tree-block);
   align-items: var(--json-tree-align-items);
-  cursor: pointer;
 }
 
 .nestedNodeItemString {
@@ -41,10 +42,12 @@
   display: var(--json-tree-inline-flex);
   align-items: var(--json-tree-align-items);
   margin-right: var(--json-tree-nested-node-label-margin);
+  cursor: default;
 
   &--expandable {
     display: var(--json-tree-inline-flex);
     align-items: var(--json-tree-align-items);
+    cursor: pointer;
   }
 
   &--expanded {
@@ -54,12 +57,14 @@
 
 .rootNode {
   display: var(--json-tree-inline-flex);
+  cursor: default;
 }
 
 .rootNodeExpanded {
 }
 
 .rootNodeExpandable {
+  cursor: pointer;
 }
 
 .rootNodeChildren {

src/styles/JSONValueNode.module.scss

@@ -1,6 +1,7 @@
 .valueNode {
   display: var(--json-tree-block);
   align-items: var(--json-tree-value-node-align-items);
+  cursor: default;
 }
 
 .valueNodeValue {

src/styles/tree.module.scss

@@ -13,4 +13,9 @@
   display: var(--json-tree-inline-flex);
   margin-right: var(--json-tree-default-label-wrap-margin-right);
   color: var(--json-tree-label-color);
+  cursor: default;
+
+  &--expandable {
+    cursor: pointer;
+  }
 }