@automattic/jetpack-components 0.54.4 → 0.55.1

package/CHANGELOG.md

@@ -2,6 +2,17 @@
 
 ### This is a list detailing changes for the Jetpack RNA Components package releases.
 
+## [0.55.1] - 2024-07-25
+### Added
+- Added `className` prop to `Alert` component [#38450]
+
+### Changed
+- React compatibility: Ensuring createRoot is not called more than once. [#38495]
+
+## [0.55.0] - 2024-07-22
+### Removed
+- Remove compatibility with WordPress 6.4. [#38386]
+
 ## [0.54.4] - 2024-07-18
 ### Changed
 - Internal updates.
@@ -1087,6 +1098,8 @@
 ### Changed
 - Update node version requirement to 14.16.1
 
+[0.55.1]: https://github.com/Automattic/jetpack-components/compare/0.55.0...0.55.1
+[0.55.0]: https://github.com/Automattic/jetpack-components/compare/0.54.4...0.55.0
 [0.54.4]: https://github.com/Automattic/jetpack-components/compare/0.54.3...0.54.4
 [0.54.3]: https://github.com/Automattic/jetpack-components/compare/0.54.2...0.54.3
 [0.54.2]: https://github.com/Automattic/jetpack-components/compare/0.54.1...0.54.2

package/components/alert/index.tsx

@@ -12,6 +12,9 @@ type AlertProps = {
 
 	/** Children to be rendered inside the alert. */
 	children: React.ReactNode;
+
+	/** Wrapper class name */
+	className?: string;
 };
 
 const getIconByLevel = ( level: AlertProps[ 'level' ] ) => {
@@ -35,11 +38,17 @@ const getIconByLevel = ( level: AlertProps[ 'level' ] ) => {
  * @param {object} props                   - The component properties.
  * @param {string} props.level             - The alert level: error, warning, info, success.
  * @param {boolean} props.showIcon         - Whether to show the alert icon.
+ * @param {string} props.className         - The wrapper class name.
  * @param {React.Component} props.children - The alert content.
  * @returns {React.ReactElement}             The `Alert` component.
  */
-const Alert: React.FC< AlertProps > = ( { level = 'warning', children, showIcon = true } ) => {
-	const classes = clsx( styles.container, styles[ `is-${ level }` ] );
+const Alert: React.FC< AlertProps > = ( {
+	level = 'warning',
+	children,
+	showIcon = true,
+	className,
+} ) => {
+	const classes = clsx( styles.container, styles[ `is-${ level }` ], className );
 
 	return (
 		<div className={ classes }>

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

@@ -22,8 +22,9 @@ export function tooltipsPlugin( periods ) {
 	 */
 	function init( u: uPlot, _opts: object ) {
 		container.classList.add( 'jb-score-tooltips-container' );
-
-		reactDom = ReactDOM.createRoot( reactRoot );
+		if ( ! reactDom ) {
+			reactDom = ReactDOM.createRoot( reactRoot );
+		}
 		reactRoot.style.position = 'absolute';
 		reactRoot.style.bottom = -20 + 'px';
 		reactRoot.style.translate = '-50% calc( 100% - 20px )';

package/components/stat-card/index.tsx

@@ -31,8 +31,7 @@ const StatCard = ( { className, icon, label, value, variant = 'square' }: StatCa
 			<div className={ clsx( styles.info ) }>
 				<Text className={ styles.label }>{ label }</Text>
 				{ variant === 'square' ? (
-					// @todo Switch to `placement` once WordPress 6.4 is the minimum.
-					<Tooltip text={ formattedValue } position="top center">
+					<Tooltip text={ formattedValue } placement="top">
 						<Text variant="headline-small" className={ clsx( styles.value ) }>
 							{ compactValue }
 						</Text>

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/jetpack-components",
-	"version": "0.54.4",
+	"version": "0.55.1",
 	"description": "Jetpack Components Package",
 	"author": "Automattic",
 	"license": "GPL-2.0-or-later",