fix: Top-level as g, not fragment

__tests__/__snapshots__/axis.test.tsx.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`axis with default options 1`] = `
-Array [
+<g>
   <g
     className="tick"
     transform="translate(0.5,0)"
@@ -20,7 +20,7 @@ Array [
     >
       0.0
     </text>
-  </g>,
+  </g>
   <g
     className="tick"
     transform="translate(0.6,0)"
@@ -39,7 +39,7 @@ Array [
     >
       0.1
     </text>
-  </g>,
+  </g>
   <g
     className="tick"
     transform="translate(0.7,0)"
@@ -58,7 +58,7 @@ Array [
     >
       0.2
     </text>
-  </g>,
+  </g>
   <g
     className="tick"
     transform="translate(0.8,0)"
@@ -77,7 +77,7 @@ Array [
     >
       0.3
     </text>
-  </g>,
+  </g>
   <g
     className="tick"
     transform="translate(0.9,0)"
@@ -96,7 +96,7 @@ Array [
     >
       0.4
     </text>
-  </g>,
+  </g>
   <g
     className="tick"
     transform="translate(1,0)"
@@ -115,7 +115,7 @@ Array [
     >
       0.5
     </text>
-  </g>,
+  </g>
   <g
     className="tick"
     transform="translate(1.1,0)"
@@ -134,7 +134,7 @@ Array [
     >
       0.6
     </text>
-  </g>,
+  </g>
   <g
     className="tick"
     transform="translate(1.2,0)"
@@ -153,7 +153,7 @@ Array [
     >
       0.7
     </text>
-  </g>,
+  </g>
   <g
     className="tick"
     transform="translate(1.3,0)"
@@ -172,7 +172,7 @@ Array [
     >
       0.8
     </text>
-  </g>,
+  </g>
   <g
     className="tick"
     transform="translate(1.4,0)"
@@ -191,7 +191,7 @@ Array [
     >
       0.9
     </text>
-  </g>,
+  </g>
   <g
     className="tick"
     transform="translate(1.5,0)"
@@ -210,18 +210,18 @@ Array [
     >
       1.0
     </text>
-  </g>,
+  </g>
   <path
     className="domain"
     d="M0.5,6V0.5H1.5V6"
     fill="transparent"
     stroke="currentColor"
-  />,
-]
+  />
+</g>
 `;
 
 exports[`axis with top orientation 1`] = `
-Array [
+<g>
   <g
     className="tick"
     transform="translate(0.5,0)"
@@ -240,7 +240,7 @@ Array [
     >
       0.0
     </text>
-  </g>,
+  </g>
   <g
     className="tick"
     transform="translate(0.6,0)"
@@ -259,7 +259,7 @@ Array [
     >
       0.1
     </text>
-  </g>,
+  </g>
   <g
     className="tick"
     transform="translate(0.7,0)"
@@ -278,7 +278,7 @@ Array [
     >
       0.2
     </text>
-  </g>,
+  </g>
   <g
     className="tick"
     transform="translate(0.8,0)"
@@ -297,7 +297,7 @@ Array [
     >
       0.3
     </text>
-  </g>,
+  </g>
   <g
     className="tick"
     transform="translate(0.9,0)"
@@ -316,7 +316,7 @@ Array [
     >
       0.4
     </text>
-  </g>,
+  </g>
   <g
     className="tick"
     transform="translate(1,0)"
@@ -335,7 +335,7 @@ Array [
     >
       0.5
     </text>
-  </g>,
+  </g>
   <g
     className="tick"
     transform="translate(1.1,0)"
@@ -354,7 +354,7 @@ Array [
     >
       0.6
     </text>
-  </g>,
+  </g>
   <g
     className="tick"
     transform="translate(1.2,0)"
@@ -373,7 +373,7 @@ Array [
     >
       0.7
     </text>
-  </g>,
+  </g>
   <g
     className="tick"
     transform="translate(1.3,0)"
@@ -392,7 +392,7 @@ Array [
     >
       0.8
     </text>
-  </g>,
+  </g>
   <g
     className="tick"
     transform="translate(1.4,0)"
@@ -411,7 +411,7 @@ Array [
     >
       0.9
     </text>
-  </g>,
+  </g>
   <g
     className="tick"
     transform="translate(1.5,0)"
@@ -430,12 +430,12 @@ Array [
     >
       1.0
     </text>
-  </g>,
+  </g>
   <path
     className="domain"
     d="M0.5,-6V0.5H1.5V-6"
     fill="transparent"
     stroke="currentColor"
-  />,
-]
+  />
+</g>
 `;

src/index.tsx

@@ -132,7 +132,7 @@ export const Axis = <Domain extends AxisDomain>({
   };
 
   return (
-    <>
+    <g>
       {values.map((tick: any, i: number) => (
         <g
           className="tick"
@@ -170,6 +170,6 @@ export const Axis = <Domain extends AxisDomain>({
         fill="transparent"
         d={domainPath}
       />
-    </>
+    </g>
   );
 };