@automattic/jetpack-components 0.58.0 → 0.58.1

package/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 ### This is a list detailing changes for the Jetpack RNA Components package releases.
 
+## [0.58.1] - 2024-11-04
+### Added
+- Enable test coverage. [#39961]
+
+### Fixed
+- Fix tooltip behavior. [#39879]
+
 ## [0.58.0] - 2024-10-15
 ### Added
 - Add DiffViewer component [#39672]
@@ -1195,6 +1202,7 @@
 ### Changed
 - Update node version requirement to 14.16.1
 
+[0.58.1]: https://github.com/Automattic/jetpack-components/compare/0.58.0...0.58.1
 [0.58.0]: https://github.com/Automattic/jetpack-components/compare/0.57.0...0.58.0
 [0.57.0]: https://github.com/Automattic/jetpack-components/compare/0.56.3...0.57.0
 [0.56.3]: https://github.com/Automattic/jetpack-components/compare/0.56.2...0.56.3

package/components/boost-score-graph/style-tooltip.scss

@@ -5,6 +5,17 @@ $white: #ffffff;
 .jb-score-tooltips-container {
     width: 100%;
     position: relative;
+    pointer-events: none;
+
+}
+
+.jb-score-tooltip-react-root {
+    position: absolute;
+    bottom: -20px;
+    translate: -50% calc( 100% - 20px );
+    z-index: 1000;
+    pointer-events: auto;
+    user-select: text;
 }
 
 .jb-score-tooltip {
@@ -17,6 +28,11 @@ $white: #ffffff;
     width: 20em;
     position: relative;
     box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
+    display: none;
+
+    .visible &, &:hover {
+        display: block;
+    }
 
     hr {
         border-top: 1px solid $grey;

package/components/boost-score-graph/tooltips-plugin.ts

@@ -25,35 +25,26 @@ export function tooltipsPlugin( periods ) {
 		if ( ! reactDom ) {
 			reactDom = ReactDOM.createRoot( reactRoot );
 		}
-		reactRoot.style.position = 'absolute';
-		reactRoot.style.bottom = -20 + 'px';
-		reactRoot.style.translate = '-50% calc( 100% - 20px )';
-		reactRoot.style.zIndex = '1000';
+		reactRoot.classList.add( 'jb-score-tooltip-react-root' );
 
 		container.appendChild( reactRoot );
 
 		u.over.appendChild( container );
 
-		/**
-		 * Hides all tooltips.
-		 */
-		function hideTips() {
-			reactRoot.style.display = 'none';
-		}
+		u.over.addEventListener( 'mouseenter', () => {
+			container.classList.add( 'visible' );
+		} );
 
-		/**
-		 * Shows all tooltips.
-		 */
-		function showTips() {
-			reactRoot.style.display = null;
-		}
+		u.over.addEventListener( 'mouseleave', () => {
+			container.classList.remove( 'visible' );
+		} );
 
-		container.addEventListener( 'mouseleave', () => {
-			hideTips();
+		reactRoot.addEventListener( 'mouseenter', () => {
+			reactRoot.classList.add( 'visible' );
 		} );
 
-		container.addEventListener( 'mouseenter', () => {
-			showTips();
+		reactRoot.addEventListener( 'mouseleave', () => {
+			reactRoot.classList.remove( 'visible' );
 		} );
 	}
 
@@ -62,7 +53,7 @@ export function tooltipsPlugin( periods ) {
 	 * @param {uPlot} u - The uPlot instance.
 	 */
 	function setSize( u: uPlot ) {
-		container.style.height = u.over.clientHeight + 'px';
+		container.style.paddingTop = u.over.clientHeight + 'px';
 	}
 
 	/**
@@ -75,6 +66,10 @@ export function tooltipsPlugin( periods ) {
 
 		const period = periods[ idx ];
 
+		if ( ! period ) {
+			return;
+		}
+
 		// Timestamp of the cursor position
 		const timestamp = u.data[ 0 ][ idx ];
 

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/jetpack-components",
-	"version": "0.58.0",
+	"version": "0.58.1",
 	"description": "Jetpack Components Package",
 	"author": "Automattic",
 	"license": "GPL-2.0-or-later",
@@ -15,7 +15,7 @@
 	},
 	"dependencies": {
 		"@automattic/format-currency": "1.0.1",
-		"@automattic/jetpack-boost-score-api": "^0.1.42",
+		"@automattic/jetpack-boost-score-api": "^0.1.44",
 		"@babel/runtime": "^7",
 		"@wordpress/browserslist-config": "6.9.0",
 		"@wordpress/components": "28.9.0",
@@ -30,7 +30,7 @@
 		"prop-types": "^15.7.2",
 		"qrcode.react": "3.1.0",
 		"react-slider": "2.0.5",
-		"social-logos": "^3.1.9",
+		"social-logos": "^3.1.10",
 		"uplot": "1.6.31",
 		"uplot-react": "1.1.4"
 	},
@@ -80,6 +80,7 @@
 	"scripts": {
 		"build": "pnpm run compile-ts",
 		"compile-ts": "tsc --pretty",
-		"test": "NODE_OPTIONS=--experimental-vm-modules jest"
+		"test": "NODE_OPTIONS=--experimental-vm-modules jest",
+		"test-coverage": "pnpm run test --coverage"
 	}
 }