@automattic/jetpack-components 0.53.1 → 0.53.3

package/CHANGELOG.md

@@ -2,6 +2,22 @@
 
 ### This is a list detailing changes for the Jetpack RNA Components package releases.
 
+## [0.53.3] - 2024-05-16
+### Added
+- Social | Wired up confirmation UI with connect button [#37295]
+
+### Changed
+- Updated package dependencies. [#37379]
+- Updated package dependencies. [#37380]
+- Updated package dependencies. [#37382]
+
+## [0.53.2] - 2024-05-13
+### Added
+- Added --jp-gray-5 as an alias of --jp-gray to the theme [#37327]
+
+### Fixed
+- Fixed notices z-index for global notices when modal is open [#37196]
+
 ## [0.53.1] - 2024-05-09
 ### Added
 - Added GlobalNotices component and useGlobalNotices hook [#37286]
@@ -1023,6 +1039,8 @@
 ### Changed
 - Update node version requirement to 14.16.1
 
+[0.53.3]: https://github.com/Automattic/jetpack-components/compare/0.53.2...0.53.3
+[0.53.2]: https://github.com/Automattic/jetpack-components/compare/0.53.1...0.53.2
 [0.53.1]: https://github.com/Automattic/jetpack-components/compare/0.53.0...0.53.1
 [0.53.0]: https://github.com/Automattic/jetpack-components/compare/0.52.1...0.53.0
 [0.52.1]: https://github.com/Automattic/jetpack-components/compare/0.52.0...0.52.1

package/components/action-button/index.jsx

@@ -26,11 +26,11 @@ const ActionButton = props => {
 	const {
 		label,
 		onClick,
-		isLoading,
+		isLoading = false,
 		loadingText,
 		isDisabled,
-		displayError,
-		errorMessage,
+		displayError = false,
+		errorMessage = __( 'An error occurred. Please try again.', 'jetpack' ),
 		customClass,
 	} = props;
 
@@ -72,10 +72,4 @@ ActionButton.propTypes = {
 	errorMessage: PropTypes.oneOfType( [ PropTypes.string, PropTypes.element ] ),
 };
 
-ActionButton.defaultProps = {
-	isLoading: false,
-	displayError: false,
-	errorMessage: __( 'An error occurred. Please try again.', 'jetpack' ),
-};
-
 export default ActionButton;

package/components/action-popover/index.tsx

@@ -46,6 +46,7 @@ const ActionPopover = ( {
 	const popoverProps = {
 		...otherPopoverProps,
 		offset,
+		onClose,
 	};
 
 	const showSteps = Number.isFinite( step ) && Number.isFinite( totalSteps );

package/components/alert/index.tsx

@@ -38,7 +38,7 @@ const getIconByLevel = ( level: AlertProps[ 'level' ] ) => {
  * @param {React.Component} props.children - The alert content.
  * @returns {React.ReactElement}             The `Alert` component.
  */
-const Alert: React.FC< AlertProps > = ( { level, children, showIcon } ) => {
+const Alert: React.FC< AlertProps > = ( { level = 'warning', children, showIcon = true } ) => {
 	const classes = classNames( styles.container, styles[ `is-${ level }` ] );
 
 	return (
@@ -53,9 +53,4 @@ const Alert: React.FC< AlertProps > = ( { level, children, showIcon } ) => {
 	);
 };
 
-Alert.defaultProps = {
-	level: 'warning',
-	showIcon: true,
-};
-
 export default Alert;

package/components/global-notices/styles.module.scss

@@ -6,6 +6,8 @@
 		inset-block-start: auto; // top
 		inset-block-end: 0; // bottom
 		inset-inline: 0; // left and right
+		// Modals have 100000, so this needs to be above them
+		z-index: 100001;
 
 		@include break-small {
 			width: auto;

package/components/notice/index.tsx

@@ -51,11 +51,11 @@ const getIconByLevel = ( level: NoticeProps[ 'level' ] ) => {
  * @returns {React.ReactElement}              The `Notice` component.
  */
 const Notice: React.FC< NoticeProps > = ( {
-	level,
+	level = 'info',
 	title,
 	children,
 	actions,
-	hideCloseButton,
+	hideCloseButton = false,
 	onClose,
 } ) => {
 	const classes = classNames( styles.container, styles[ `is-${ level }` ] );
@@ -90,9 +90,4 @@ const Notice: React.FC< NoticeProps > = ( {
 	);
 };
 
-Notice.defaultProps = {
-	level: 'info',
-	hideCloseButton: false,
-};
-
 export default Notice;

package/components/number-slider/index.tsx

@@ -47,7 +47,13 @@ const NumberSlider: React.FC< NumberSliderProps > = ( {
 	const renderThumbCallback = renderThumb
 		? renderThumb
 		: ( props, state ) => {
-				return <div { ...props }>{ state.valueNow }</div>;
+				const { key, ...otherProps } = props;
+
+				return (
+					<div key={ key } { ...otherProps }>
+						{ state.valueNow }
+					</div>
+				);
 		  };
 
 	return (

package/components/spinner/index.jsx

@@ -3,23 +3,23 @@ import React from 'react';
 
 import './style.scss';
 
-const Spinner = props => {
-	const className = props.className + ' jp-components-spinner';
+const Spinner = ( { color = '#FFFFFF', className = '', size = 20 } ) => {
+	const theClassName = className + ' jp-components-spinner';
 
 	const styleOuter = {
-		width: props.size,
-		height: props.size,
-		fontSize: props.size, // allows border-width to be specified in em units
-		borderTopColor: props.color,
+		width: size,
+		height: size,
+		fontSize: size, // allows border-width to be specified in em units
+		borderTopColor: color,
 	};
 
 	const styleInner = {
-		borderTopColor: props.color,
-		borderRightColor: props.color,
+		borderTopColor: color,
+		borderRightColor: color,
 	};
 
 	return (
-		<div className={ className }>
+		<div className={ theClassName }>
 			<div className="jp-components-spinner__outer" style={ styleOuter }>
 				<div className="jp-components-spinner__inner" style={ styleInner } />
 			</div>
@@ -36,10 +36,4 @@ Spinner.propTypes = {
 	size: PropTypes.number,
 };
 
-Spinner.defaultProps = {
-	color: '#FFFFFF',
-	className: '',
-	size: 20,
-};
-
 export default Spinner;

package/components/theme-provider/index.tsx

@@ -25,6 +25,7 @@ export const colors = {
 	// Gray
 	'--jp-gray': '#dcdcde',
 	'--jp-gray-0': '#F6F7F7',
+	'--jp-gray-5': 'var(--jp-gray)',
 	'--jp-gray-10': '#C3C4C7',
 	'--jp-gray-20': '#A7AAAD',
 	'--jp-gray-40': '#787C82',

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/jetpack-components",
-	"version": "0.53.1",
+	"version": "0.53.3",
 	"description": "Jetpack Components Package",
 	"author": "Automattic",
 	"license": "GPL-2.0-or-later",
@@ -15,17 +15,17 @@
 	},
 	"dependencies": {
 		"@automattic/format-currency": "1.0.1",
-		"@automattic/jetpack-boost-score-api": "^0.1.29",
+		"@automattic/jetpack-boost-score-api": "^0.1.30",
 		"@babel/runtime": "^7",
-		"@wordpress/browserslist-config": "5.39.0",
-		"@wordpress/components": "27.4.0",
-		"@wordpress/compose": "6.33.0",
-		"@wordpress/data": "9.26.0",
-		"@wordpress/date": "4.56.0",
-		"@wordpress/element": "5.33.0",
-		"@wordpress/i18n": "4.56.0",
-		"@wordpress/icons": "9.47.0",
-		"@wordpress/notices": "4.24.0",
+		"@wordpress/browserslist-config": "5.40.0",
+		"@wordpress/components": "27.5.0",
+		"@wordpress/compose": "6.34.0",
+		"@wordpress/data": "9.27.0",
+		"@wordpress/date": "4.57.0",
+		"@wordpress/element": "5.34.0",
+		"@wordpress/i18n": "4.57.0",
+		"@wordpress/icons": "9.48.0",
+		"@wordpress/notices": "4.25.0",
 		"classnames": "2.3.2",
 		"prop-types": "^15.7.2",
 		"qrcode.react": "3.1.0",
@@ -35,15 +35,15 @@
 		"uplot-react": "1.1.4"
 	},
 	"devDependencies": {
-		"@automattic/jetpack-base-styles": "^0.6.24",
+		"@automattic/jetpack-base-styles": "^0.6.25",
 		"@babel/core": "7.24.0",
 		"@babel/preset-react": "7.23.3",
 		"@jest/globals": "29.4.3",
 		"@storybook/addon-actions": "8.0.9",
 		"@storybook/blocks": "8.0.9",
 		"@storybook/react": "8.0.9",
-		"@testing-library/dom": "9.3.4",
-		"@testing-library/react": "14.2.1",
+		"@testing-library/dom": "10.1.0",
+		"@testing-library/react": "15.0.7",
 		"@testing-library/user-event": "14.5.2",
 		"@types/jest": "29.5.12",
 		"@types/qrcode.react": "1.0.5",
@@ -54,9 +54,9 @@
 		"@types/testing-library__jest-dom": "5.14.9",
 		"jest": "29.7.0",
 		"jest-environment-jsdom": "29.7.0",
-		"react": "18.2.0",
-		"react-dom": "18.2.0",
-		"react-test-renderer": "18.2.0",
+		"react": "18.3.1",
+		"react-dom": "18.3.1",
+		"react-test-renderer": "18.3.1",
 		"require-from-string": "2.0.2",
 		"resize-observer-polyfill": "1.5.1",
 		"ts-dedent": "2.2.0",