@automattic/jetpack-components 0.61.0 → 0.62.0

package/CHANGELOG.md

@@ -2,6 +2,14 @@
 
 ### This is a list detailing changes for the Jetpack RNA Components package releases.
 
+## [0.62.0] - 2024-11-25
+### Added
+- Add Stats icon [#40236]
+- Adds ThreatModal component and stories [#40197]
+
+### Changed
+- Updated package dependencies. [#40288]
+
 ## [0.61.0] - 2024-11-18
 ### Added
 - Gridicon Component: Add support for help-outline icon. [#39867]
@@ -1218,6 +1226,7 @@
 ### Changed
 - Update node version requirement to 14.16.1
 
+[0.62.0]: https://github.com/Automattic/jetpack-components/compare/0.61.0...0.62.0
 [0.61.0]: https://github.com/Automattic/jetpack-components/compare/0.60.0...0.61.0
 [0.60.0]: https://github.com/Automattic/jetpack-components/compare/0.59.0...0.60.0
 [0.59.0]: https://github.com/Automattic/jetpack-components/compare/0.58.1...0.59.0

package/components/diff-viewer/styles.module.scss

@@ -14,7 +14,7 @@
 	display: flex;
 	font-family: "Courier 10 Pitch", Courier, monospace;
 	flex-direction: row;
-	overflow-x: scroll;
+	overflow-x: auto;
 	white-space: pre;
 }
 

package/components/icons/index.tsx

@@ -234,6 +234,18 @@ export const AiIcon: React.FC< BaseIconProps > = ( {
 	);
 };
 
+export const StatsIcon: React.FC< BaseIconProps > = ( { opacity = 1, size, color } ) => {
+	return (
+		<IconWrapper size={ size } opacity={ opacity } color={ color }>
+			<Path
+				fillRule="evenodd"
+				clipRule="evenodd"
+				d="M11.25 5H12.75V20H11.25V5ZM6 10H7.5V20H6V10ZM18 14H16.5V20H18V14Z"
+			/>
+		</IconWrapper>
+	);
+};
+
 const jetpackIcons = {
 	'anti-spam': AntiSpamIcon,
 	backup: BackupIcon,
@@ -249,6 +261,7 @@ const jetpackIcons = {
 	jetpack: JetpackIcon,
 	share: ShareIcon,
 	ai: AiIcon,
+	stats: StatsIcon,
 };
 
 const iconsMap = {

package/components/marked-lines/styles.module.scss

@@ -4,7 +4,7 @@
 	font-family: monospace;
 	display: flex;
 	flex-direction: row;
-	overflow-x: scroll;
+	overflow-x: auto;
 }
 
 .marked-lines__marked-line {

package/components/threat-fixer-button/index.tsx

@@ -1,9 +1,9 @@
 import { Button } from '@automattic/jetpack-components';
 import {
 	type Threat,
-	fixerIsInError,
-	fixerIsInProgress,
-	fixerStatusIsStale,
+	getFixerState,
+	getFixerAction,
+	getFixerMessage,
 } from '@automattic/jetpack-scan';
 import { Tooltip } from '@wordpress/components';
 import { useCallback, useMemo } from '@wordpress/element';
@@ -30,10 +30,7 @@ export default function ThreatFixerButton( {
 	className?: string;
 } ): JSX.Element {
 	const fixerState = useMemo( () => {
-		const inProgress = threat.fixer && fixerIsInProgress( threat.fixer );
-		const error = threat.fixer && fixerIsInError( threat.fixer );
-		const stale = threat.fixer && fixerStatusIsStale( threat.fixer );
-		return { inProgress, error, stale };
+		return getFixerState( threat.fixer );
 	}, [ threat.fixer ] );
 
 	const tooltipText = useMemo( () => {
@@ -53,54 +50,7 @@ export default function ThreatFixerButton( {
 			return __( 'An auto-fixer is in progress.', 'jetpack' );
 		}
 
-		switch ( threat.fixable.fixer ) {
-			case 'delete':
-				if ( threat.filename ) {
-					if ( threat.filename.endsWith( '/' ) ) {
-						return __( 'Deletes the directory that the infected file is in.', 'jetpack' );
-					}
-
-					if ( threat.signature === 'Core.File.Modification' ) {
-						return __( 'Deletes the unexpected file in a core WordPress directory.', 'jetpack' );
-					}
-
-					return __( 'Deletes the infected file.', 'jetpack' );
-				}
-
-				if ( threat.extension?.type === 'plugin' ) {
-					return __( 'Deletes the plugin directory to fix the threat.', 'jetpack' );
-				}
-
-				if ( threat.extension?.type === 'theme' ) {
-					return __( 'Deletes the theme directory to fix the threat.', 'jetpack' );
-				}
-				break;
-			case 'update':
-				return __( 'Upgrades the plugin or theme to a newer version.', 'jetpack' );
-			case 'replace':
-			case 'rollback':
-				if ( threat.filename ) {
-					return threat.signature === 'Core.File.Modification'
-						? __(
-								'Replaces the modified core WordPress file with the original clean version from the WordPress source code.',
-								'jetpack'
-						  )
-						: __(
-								'Replaces the infected file with a previously backed up version that is clean.',
-								'jetpack'
-						  );
-				}
-
-				if ( threat.signature === 'php_hardening_WP_Config_NoSalts_001' ) {
-					return __(
-						'Replaces the default salt keys in wp-config.php with unique ones.',
-						'jetpack'
-					);
-				}
-				break;
-			default:
-				return __( 'An auto-fixer is available.', 'jetpack' );
-		}
+		return getFixerMessage( threat );
 	}, [ threat, fixerState ] );
 
 	const buttonText = useMemo( () => {
@@ -112,18 +62,8 @@ export default function ThreatFixerButton( {
 			return __( 'Error', 'jetpack' );
 		}
 
-		switch ( threat.fixable.fixer ) {
-			case 'delete':
-				return __( 'Delete', 'jetpack' );
-			case 'update':
-				return __( 'Update', 'jetpack' );
-			case 'replace':
-			case 'rollback':
-				return __( 'Replace', 'jetpack' );
-			default:
-				return __( 'Fix', 'jetpack' );
-		}
-	}, [ threat.fixable, fixerState.error ] );
+		return getFixerAction( threat );
+	}, [ threat, fixerState.error ] );
 
 	const handleClick = useCallback(
 		( event: React.MouseEvent ) => {

package/components/threat-modal/credentials-gate.tsx

@@ -0,0 +1,65 @@
+import { Text, Button } from '@automattic/jetpack-components';
+import { Notice } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import React, { ReactElement } from 'react';
+import styles from './styles.module.scss';
+
+const CredentialsGate = ( {
+	siteCredentialsNeeded,
+	credentialsIsFetching,
+	credentialsRedirectUrl,
+	children,
+}: {
+	siteCredentialsNeeded: boolean;
+	credentialsIsFetching: boolean;
+	credentialsRedirectUrl: string;
+	children: ReactElement;
+} ): JSX.Element => {
+	if ( ! siteCredentialsNeeded ) {
+		return children;
+	}
+
+	return (
+		<>
+			<Notice
+				status="warning"
+				isDismissible={ false }
+				children={
+					<Text>
+						{ __(
+							'Before Jetpack can auto-fix threats on your site, it needs your server credentials.',
+							'jetpack'
+						) }
+					</Text>
+				}
+			/>
+
+			<Text>
+				{ __(
+					'Your server credentials allow Jetpack to access the server that’s powering your website. This information is securely saved and only used to perform fix threats detected on your site.',
+					'jetpack'
+				) }
+			</Text>
+
+			<Text>
+				{ __(
+					'Once you’ve entered server credentials, Jetpack will be fixing the selected threats.',
+					'jetpack'
+				) }
+			</Text>
+
+			<div className={ styles[ 'modal-actions' ] }>
+				<Button
+					isExternalLink={ true }
+					weight="regular"
+					href={ credentialsRedirectUrl }
+					isLoading={ credentialsIsFetching }
+				>
+					{ __( 'Enter server credentials', 'jetpack' ) }
+				</Button>
+			</div>
+		</>
+	);
+};
+
+export default CredentialsGate;

package/components/threat-modal/index.tsx

@@ -0,0 +1,153 @@
+import { Button, ThreatSeverityBadge } from '@automattic/jetpack-components';
+import { type Threat, getFixerState } from '@automattic/jetpack-scan';
+import { Modal, Notice } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { useMemo } from 'react';
+import Text from '../text';
+import CredentialsGate from './credentials-gate';
+import styles from './styles.module.scss';
+import ThreatActions from './threat-actions';
+import ThreatFixDetails from './threat-fix-details';
+import ThreatTechnicalDetails from './threat-technical-details';
+import UserConnectionGate from './user-connection-gate';
+
+/**
+ * ThreatModal component
+ *
+ * @param {object}   props                           - The props.
+ * @param {object}   props.threat                    - The threat.
+ * @param {boolean}  props.isUserConnected           - Whether the user is connected.
+ * @param {boolean}  props.hasConnectedOwner         - Whether the user has a connected owner.
+ * @param {boolean}  props.userIsConnecting          - Whether the user is connecting.
+ * @param {Function} props.handleConnectUser         - The handleConnectUser function.
+ * @param {object}   props.credentials               - The credentials.
+ * @param {boolean}  props.credentialsIsFetching     - Whether the credentials are fetching.
+ * @param {string}   props.credentialsRedirectUrl    - The credentials redirect URL.
+ * @param {Function} props.handleUpgradeClick        - The handleUpgradeClick function.
+ * @param {Function} props.handleFixThreatClick      - The handleFixThreatClick function.
+ * @param {Function} props.handleIgnoreThreatClick   - The handleIgnoreThreatClick function.
+ * @param {Function} props.handleUnignoreThreatClick - The handleUnignoreThreatClick function.
+ *
+ * @return {JSX.Element} The threat modal.
+ */
+export default function ThreatModal( {
+	threat,
+	isUserConnected,
+	hasConnectedOwner,
+	userIsConnecting,
+	handleConnectUser,
+	credentials,
+	credentialsIsFetching,
+	credentialsRedirectUrl,
+	handleUpgradeClick,
+	handleFixThreatClick,
+	handleIgnoreThreatClick,
+	handleUnignoreThreatClick,
+	...modalProps
+}: {
+	threat: Threat;
+	isUserConnected: boolean;
+	hasConnectedOwner: boolean;
+	userIsConnecting: boolean;
+	handleConnectUser: () => void;
+	credentials: false | Record< string, unknown >[];
+	credentialsIsFetching: boolean;
+	credentialsRedirectUrl: string;
+	handleUpgradeClick?: () => void;
+	handleFixThreatClick?: ( threats: Threat[] ) => void;
+	handleIgnoreThreatClick?: ( threats: Threat[] ) => void;
+	handleUnignoreThreatClick?: ( threats: Threat[] ) => void;
+} & React.ComponentProps< typeof Modal > ): JSX.Element {
+	const userConnectionNeeded = ! isUserConnected || ! hasConnectedOwner;
+	const siteCredentialsNeeded = ! credentials || credentials.length === 0;
+
+	const fixerState = useMemo( () => {
+		return getFixerState( threat.fixer );
+	}, [ threat.fixer ] );
+
+	const getModalTitle = useMemo( () => {
+		if ( userConnectionNeeded ) {
+			return <Text variant="title-small">{ __( 'User connection needed', 'jetpack' ) }</Text>;
+		}
+
+		if ( siteCredentialsNeeded ) {
+			return <Text variant="title-small">{ __( 'Site credentials needed', 'jetpack' ) }</Text>;
+		}
+
+		return (
+			<>
+				<Text variant="title-small">{ threat.title }</Text>
+				{ !! threat.severity && <ThreatSeverityBadge severity={ threat.severity } /> }
+			</>
+		);
+	}, [ userConnectionNeeded, siteCredentialsNeeded, threat.title, threat.severity ] );
+
+	return (
+		<Modal
+			size="large"
+			title={ <div className={ styles.title }>{ getModalTitle }</div> }
+			{ ...modalProps }
+		>
+			<div className={ styles[ 'threat-details' ] }>
+				<UserConnectionGate
+					userConnectionNeeded={ userConnectionNeeded }
+					userIsConnecting={ userIsConnecting }
+					handleConnectUser={ handleConnectUser }
+				>
+					<CredentialsGate
+						siteCredentialsNeeded={ siteCredentialsNeeded }
+						credentialsIsFetching={ credentialsIsFetching }
+						credentialsRedirectUrl={ credentialsRedirectUrl }
+					>
+						<>
+							{ fixerState.error && (
+								<Notice isDismissible={ false } status="error">
+									<Text>{ __( 'An error occurred auto-fixing this threat.', 'jetpack' ) }</Text>
+								</Notice>
+							) }
+							{ fixerState.stale && (
+								<Notice isDismissible={ false } status="error">
+									<Text>{ __( 'The auto-fixer is taking longer than expected.', 'jetpack' ) }</Text>
+								</Notice>
+							) }
+							{ fixerState.inProgress && ! fixerState.stale && (
+								<Notice isDismissible={ false } status="success">
+									<Text>{ __( 'The auto-fixer is in progress.', 'jetpack' ) }</Text>
+								</Notice>
+							) }
+							<div className={ styles.section }>
+								{ !! threat.description && <Text>{ threat.description }</Text> }
+
+								{ !! threat.source && (
+									<div>
+										<Button
+											variant="link"
+											isExternalLink={ true }
+											weight="regular"
+											href={ threat.source }
+										>
+											{ __( 'See more technical details of this threat', 'jetpack' ) }
+										</Button>
+									</div>
+								) }
+							</div>
+
+							<ThreatFixDetails threat={ threat } handleUpgradeClick={ handleUpgradeClick } />
+
+							<ThreatTechnicalDetails threat={ threat } />
+
+							<ThreatActions
+								threat={ threat }
+								closeModal={ modalProps.onRequestClose }
+								handleFixThreatClick={ handleFixThreatClick }
+								handleIgnoreThreatClick={ handleIgnoreThreatClick }
+								handleUnignoreThreatClick={ handleUnignoreThreatClick }
+								fixerState={ fixerState }
+							/>
+						</>
+					</CredentialsGate>
+				</UserConnectionGate>
+			</div>
+		</Modal>
+	);
+}

package/components/threat-modal/styles.module.scss

@@ -0,0 +1,35 @@
+.threat-details {
+	display: flex;
+	flex-direction: column;
+	gap: calc( var( --spacing-base ) * 3 ); // 24px
+}
+
+.section {
+	display: flex;
+	flex-direction: column;
+	gap: calc( var( --spacing-base ) * 2 ); // 16px
+}
+
+.title {
+	display: flex;
+	align-items: center;
+	gap: calc( var( --spacing-base ) * 1.5 ); // 12px
+}
+
+.filename {
+	background-color: var( --jp-gray-0 );
+	padding: calc( var( --spacing-base ) * 3 ); // 24px
+	overflow-x: auto;
+}
+
+.modal-actions {
+	display: flex;
+	justify-content: flex-end;
+	padding-top: calc( var( --spacing-base ) * 3 ); // 24px
+	border-top: 1px solid var( --jp-gray-0 );
+
+	.threat-actions {
+		display: flex;
+		gap: calc( var( --spacing-base ) * 2 ); // 16px;
+	}
+}

package/components/threat-modal/threat-actions.tsx

@@ -0,0 +1,97 @@
+import { Button } from '@automattic/jetpack-components';
+import { Threat, getFixerAction } from '@automattic/jetpack-scan';
+import { __ } from '@wordpress/i18n';
+import React, { useCallback, useMemo } from 'react';
+import styles from './styles.module.scss';
+
+/**
+ * ThreatActions component
+ *
+ * @param {object}   props                             - The component props.
+ * @param {object}   props.threat                      - The threat object containing action details.
+ * @param {Function} props.closeModal                  - Function to close the modal.
+ * @param {Function} [props.handleFixThreatClick]      - Function to handle fixing the threat.
+ * @param {Function} [props.handleIgnoreThreatClick]   - Function to handle ignoring the threat.
+ * @param {Function} [props.handleUnignoreThreatClick] - Function to handle unignoring the threat.
+ * @param {object}   props.fixerState                  - The state of the fixer (inProgress, error, stale).
+ * @param {boolean}  props.fixerState.inProgress       - Whether the fixer is in progress.
+ * @param {boolean}  props.fixerState.error            - Whether the fixer encountered an error.
+ * @param {boolean}  props.fixerState.stale            - Whether the fixer is stale.
+ *
+ * @return {JSX.Element | null} The rendered action buttons or null if no actions are available.
+ */
+const ThreatActions = ( {
+	threat,
+	closeModal,
+	handleFixThreatClick,
+	handleIgnoreThreatClick,
+	handleUnignoreThreatClick,
+	fixerState,
+}: {
+	threat: Threat;
+	closeModal: () => void;
+	handleFixThreatClick?: ( threats: Threat[] ) => void;
+	handleIgnoreThreatClick?: ( threats: Threat[] ) => void;
+	handleUnignoreThreatClick?: ( threats: Threat[] ) => void;
+	fixerState: { inProgress: boolean; error: boolean; stale: boolean };
+} ): JSX.Element => {
+	const fixerAction = useMemo( () => getFixerAction( threat ), [ threat ] );
+
+	const onFixClick = useCallback( () => {
+		handleFixThreatClick?.( [ threat ] );
+		closeModal();
+	}, [ threat, handleFixThreatClick, closeModal ] );
+
+	const onIgnoreClick = useCallback( () => {
+		handleIgnoreThreatClick?.( [ threat ] );
+		closeModal();
+	}, [ threat, handleIgnoreThreatClick, closeModal ] );
+
+	const onUnignoreClick = useCallback( () => {
+		handleUnignoreThreatClick?.( [ threat ] );
+		closeModal();
+	}, [ threat, handleUnignoreThreatClick, closeModal ] );
+
+	if ( ! handleFixThreatClick && ! handleIgnoreThreatClick && ! handleUnignoreThreatClick ) {
+		return null;
+	}
+
+	return (
+		<div className={ styles[ 'modal-actions' ] }>
+			<div className={ styles[ 'threat-actions' ] }>
+				{ threat.status === 'ignored' && handleUnignoreThreatClick && (
+					<Button isDestructive={ true } variant="secondary" onClick={ onUnignoreClick }>
+						{ __( 'Un-ignore', 'jetpack' ) }
+					</Button>
+				) }
+				{ threat.status === 'current' && (
+					<>
+						{ handleIgnoreThreatClick && (
+							<Button
+								isDestructive={ true }
+								variant="secondary"
+								onClick={ onIgnoreClick }
+								disabled={ fixerState.inProgress && ! fixerState.stale }
+							>
+								{ __( 'Ignore', 'jetpack' ) }
+							</Button>
+						) }
+						{ threat.fixable && handleFixThreatClick && (
+							<Button
+								isPrimary
+								disabled={ fixerState.inProgress && ! fixerState.stale }
+								onClick={ onFixClick }
+							>
+								{ fixerState.error || fixerState.stale
+									? __( 'Retry fix', 'jetpack' )
+									: fixerAction }
+							</Button>
+						) }
+					</>
+				) }
+			</div>
+		</div>
+	);
+};
+
+export default ThreatActions;

package/components/threat-modal/threat-fix-details.tsx

@@ -0,0 +1,68 @@
+import { Threat, getFixerMessage } from '@automattic/jetpack-scan';
+import { __, sprintf } from '@wordpress/i18n';
+import React, { useMemo } from 'react';
+import ContextualUpgradeTrigger from '../contextual-upgrade-trigger';
+import Text from '../text';
+import styles from './styles.module.scss';
+
+/**
+ * ThreatFixDetails component
+ *
+ * @param {object}   props                    - The component props.
+ * @param {object}   props.threat             - The threat object containing fix details.
+ * @param {Function} props.handleUpgradeClick - Function to handle upgrade click events.
+ *
+ * @return {JSX.Element | null} The rendered fix details or null if no fixable details are available.
+ */
+const ThreatFixDetails = ( {
+	threat,
+	handleUpgradeClick,
+}: {
+	threat: Threat;
+	handleUpgradeClick: () => void;
+} ): JSX.Element => {
+	const title = useMemo( () => {
+		if ( threat.status === 'fixed' ) {
+			return __( 'How did Jetpack fix it?', 'jetpack' );
+		}
+		if ( threat.status === 'current' && threat.fixable ) {
+			return __( 'How can Jetpack auto-fix this threat?', 'jetpack' );
+		}
+		return __( 'How to fix it?', 'jetpack' );
+	}, [ threat ] );
+
+	const fix = useMemo( () => {
+		// The threat has a fixed version available, but no auto-fix is available.
+		// The user needs to update the extension to the fixed version.
+		if ( ! threat.fixable && threat.fixedIn ) {
+			return sprintf(
+				/* translators: Translates to Updates to version. %1$s: Name. %2$s: Fixed version */
+				__( 'Update %1$s to version %2$s.', 'jetpack' ),
+				threat.extension.name,
+				threat.fixedIn
+			);
+		}
+		// The threat has an auto-fix available.
+		return getFixerMessage( threat );
+	}, [ threat ] );
+
+	if ( ! threat.fixable && ! threat.fixedIn ) {
+		return null;
+	}
+
+	return (
+		<div className={ styles.section }>
+			<Text variant="title-small">{ title }</Text>
+			<Text>{ fix }</Text>
+			{ handleUpgradeClick && (
+				<ContextualUpgradeTrigger
+					description={ __( 'Looking for advanced scan results and one-click fixes?', 'jetpack' ) }
+					cta={ __( 'Upgrade Jetpack now', 'jetpack' ) }
+					onClick={ handleUpgradeClick }
+				/>
+			) }
+		</div>
+	);
+};
+
+export default ThreatFixDetails;

package/components/threat-modal/threat-technical-details.tsx

@@ -0,0 +1,36 @@
+import { Threat } from '@automattic/jetpack-scan';
+import { __ } from '@wordpress/i18n';
+import DiffViewer from '../diff-viewer';
+import MarkedLines from '../marked-lines';
+import Text from '../text';
+import styles from './styles.module.scss';
+
+/**
+ * ThreatTechnicalDetails component
+ *
+ * @param {object} props        - The component props.
+ * @param {object} props.threat - The threat object containing technical details.
+ *
+ * @return {JSX.Element | null} The rendered technical details or null if no details are available.
+ */
+const ThreatTechnicalDetails = ( { threat }: { threat: Threat } ): JSX.Element => {
+	if ( ! threat.filename && ! threat.context && ! threat.diff ) {
+		return null;
+	}
+
+	return (
+		<div className={ styles.section }>
+			<Text variant="title-small">{ __( 'The technical details', 'jetpack' ) }</Text>
+			{ threat.filename && (
+				<>
+					<Text>{ __( 'Threat found in file:', 'jetpack' ) }</Text>
+					<pre className={ styles.filename }>{ threat.filename }</pre>
+				</>
+			) }
+			{ threat.context && <MarkedLines context={ threat.context } /> }
+			{ threat.diff && <DiffViewer diff={ threat.diff } /> }
+		</div>
+	);
+};
+
+export default ThreatTechnicalDetails;

package/components/threat-modal/user-connection-gate.tsx

@@ -0,0 +1,64 @@
+import { Text, Button } from '@automattic/jetpack-components';
+import { Notice } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import React, { ReactElement } from 'react';
+import styles from './styles.module.scss';
+
+const UserConnectionGate = ( {
+	userConnectionNeeded,
+	userIsConnecting,
+	handleConnectUser,
+	children,
+}: {
+	userConnectionNeeded: boolean;
+	userIsConnecting: boolean;
+	handleConnectUser: () => void;
+	children: ReactElement;
+} ): JSX.Element => {
+	if ( ! userConnectionNeeded ) {
+		return children;
+	}
+	return (
+		<>
+			<Notice
+				status="warning"
+				isDismissible={ false }
+				children={
+					<Text>
+						{ __(
+							'Before Jetpack can ignore and auto-fix threats on your site, a user connection is needed.',
+							'jetpack'
+						) }
+					</Text>
+				}
+			/>
+
+			<Text>
+				{ __(
+					'A user connection provides Jetpack the access necessary to perform these tasks.',
+					'jetpack'
+				) }
+			</Text>
+
+			<Text>
+				{ __(
+					'Once you’ve secured a user connection, all Jetpack features will be available for use.',
+					'jetpack'
+				) }
+			</Text>
+
+			<div className={ styles[ 'modal-actions' ] }>
+				<Button
+					isExternalLink={ true }
+					weight="regular"
+					isLoading={ userIsConnecting }
+					onClick={ handleConnectUser }
+				>
+					{ __( 'Connect your user account', 'jetpack' ) }
+				</Button>
+			</div>
+		</>
+	);
+};
+
+export default UserConnectionGate;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/jetpack-components",
-	"version": "0.61.0",
+	"version": "0.62.0",
 	"description": "Jetpack Components Package",
 	"author": "Automattic",
 	"license": "GPL-2.0-or-later",
@@ -15,29 +15,29 @@
 	},
 	"dependencies": {
 		"@automattic/format-currency": "1.0.1",
-		"@automattic/jetpack-boost-score-api": "^0.1.46",
-		"@automattic/jetpack-scan": "^0.2.0",
+		"@automattic/jetpack-boost-score-api": "^0.1.47",
+		"@automattic/jetpack-scan": "^0.3.0",
 		"@babel/runtime": "^7",
-		"@wordpress/browserslist-config": "6.11.0",
-		"@wordpress/components": "28.11.0",
-		"@wordpress/compose": "7.11.0",
-		"@wordpress/data": "10.11.0",
-		"@wordpress/dataviews": "4.7.0",
-		"@wordpress/date": "5.11.0",
-		"@wordpress/element": "6.11.0",
-		"@wordpress/i18n": "5.11.0",
-		"@wordpress/icons": "10.11.0",
-		"@wordpress/notices": "5.11.0",
+		"@wordpress/browserslist-config": "6.12.0",
+		"@wordpress/components": "28.12.0",
+		"@wordpress/compose": "7.12.0",
+		"@wordpress/data": "10.12.0",
+		"@wordpress/dataviews": "4.8.0",
+		"@wordpress/date": "5.12.0",
+		"@wordpress/element": "6.12.0",
+		"@wordpress/i18n": "5.12.0",
+		"@wordpress/icons": "10.12.0",
+		"@wordpress/notices": "5.12.0",
 		"clsx": "2.1.1",
 		"prop-types": "^15.7.2",
 		"qrcode.react": "3.1.0",
 		"react-slider": "2.0.5",
-		"social-logos": "^3.1.12",
+		"social-logos": "^3.1.13",
 		"uplot": "1.6.31",
 		"uplot-react": "1.1.4"
 	},
 	"devDependencies": {
-		"@automattic/jetpack-base-styles": "^0.6.36",
+		"@automattic/jetpack-base-styles": "^0.6.37",
 		"@babel/core": "7.26.0",
 		"@babel/preset-react": "7.25.9",
 		"@jest/globals": "29.4.3",