@automattic/jetpack-connection 1.2.7 → 1.2.8

package/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ### This is a list detailing changes for the Jetpack RNA Connection Component releases.
 
+## [1.2.8] - 2025-07-01
+### Changed
+- Internal updates.
+
 ## [1.2.7] - 2025-06-30
 ### Changed
 - Update dependencies.
@@ -1080,6 +1084,7 @@
 - `Main` and `ConnectUser` components added.
 - `JetpackRestApiClient` API client added.
 
+[1.2.8]: https://github.com/Automattic/jetpack-connection-js/compare/v1.2.7...v1.2.8
 [1.2.7]: https://github.com/Automattic/jetpack-connection-js/compare/v1.2.6...v1.2.7
 [1.2.6]: https://github.com/Automattic/jetpack-connection-js/compare/v1.2.5...v1.2.6
 [1.2.5]: https://github.com/Automattic/jetpack-connection-js/compare/v1.2.4...v1.2.5

package/README.md

@@ -40,7 +40,7 @@ The component implements the connection screen page, and loads the `ConnectButto
 
 ### Usage
 ```jsx
-import React, { useState, useCallback } from 'react';
+import { useState, useCallback } from 'react';
 import { ConnectScreen } from '@automattic/jetpack-connection';
 
 const [ connectionStatus, setConnectionStatus ] = useState( {} );
@@ -81,7 +81,7 @@ The component displays the connection button and handles the connection process,
 
 ### Basic Usage
 ```jsx
-import React, { useCallback } from 'react';
+import { useCallback } from 'react';
 import { ConnectButton } from '@automattic/jetpack-connection';
 
 const onUserConnected = useCallback( () => alert( 'User Connected' ) );
@@ -184,7 +184,7 @@ This way we ensure that `onDisconnected` will always be called via clicking the
 
 ### Basic Usage
 ```jsx
-import React, { useCallback } from 'react';
+import { useCallback } from 'react';
 import { DisconnectDialog } from '@automattic/jetpack-connection';
 
 const onDisconnectedCallback = useCallback( () => alert( 'Successfully Disconnected' ) );
@@ -230,7 +230,7 @@ The `Disconnect` functionality is **temporary**. In the future, it will be repla
 
 ### Basic Usage
 ```jsx
-import React, { useCallback } from 'react';
+import { useCallback } from 'react';
 import { ConnectionStatusCard } from '@automattic/jetpack-connection';
 
 const onDisconnectedCallback = useCallback( () => alert( 'Successfully Disconnected' ) );

package/components/connect-button/index.jsx

@@ -1,14 +1,13 @@
 import { ActionButton } from '@automattic/jetpack-components';
 import { __ } from '@wordpress/i18n';
 import PropTypes from 'prop-types';
-import React from 'react';
 import useConnection from '../use-connection';
 
 /**
  * The RNA connection component.
  *
  * @param {object} props -- The properties.
- * @return {React.Component} The RNA connection component.
+ * @return {import('react').Component} The RNA connection component.
  */
 const ConnectButton = props => {
 	const {

package/components/connect-screen/basic/index.tsx

@@ -1,7 +1,7 @@
 import { __ } from '@wordpress/i18n';
-import React from 'react';
 import useConnection from '../../use-connection';
 import ConnectScreenVisual from './visual';
+import type { FC, ReactNode } from 'react';
 
 export type Props = {
 	// API root
@@ -13,7 +13,7 @@ export type Props = {
 	// The redirect admin UR
 	redirectUri: string;
 	// Additional page elements to show before the call to action
-	children: React.ReactNode;
+	children: ReactNode;
 	// The Title
 	title?: string;
 	// The Connect Button label
@@ -33,15 +33,15 @@ export type Props = {
 	// Whether to skip the pricing page after the connection screen
 	skipPricingPage?: boolean;
 	// Additional page elements to show after the call to action
-	footer?: React.ReactNode;
+	footer?: ReactNode;
 	// The logo to display at the top of the component
-	logo?: React.ReactNode;
+	logo?: ReactNode;
 };
 
 /*
  * The Connection Screen component.
  */
-const ConnectScreen: React.FC< Props > = ( {
+const ConnectScreen: FC< Props > = ( {
 	title,
 	buttonLabel,
 	loadingLabel,

package/components/connect-screen/basic/visual.tsx

@@ -1,10 +1,10 @@
 import { ActionButton, TermsOfService, getRedirectUrl } from '@automattic/jetpack-components';
 import { createInterpolateElement } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import React from 'react';
 import ConnectScreenLayout from '../layout';
 import type { Props as ConnectScreenProps } from '../basic';
 import type { WithRequired } from '../types';
+import type { FC } from 'react';
 import './style.scss';
 
 type SharedProps = Pick<
@@ -70,7 +70,7 @@ const getErrorMessage = ( errorCode, isOfflineMode ) => {
 /*
  * The Connection Screen Visual component.
  */
-const ConnectScreenVisual: React.FC< Props > = ( {
+const ConnectScreenVisual: FC< Props > = ( {
 	title,
 	images,
 	children,

package/components/connect-screen/layout/image-slider.tsx

@@ -1,20 +1,21 @@
-import React from 'react';
+import { Fragment } from 'react';
 import type { Props as ConnectScreenProps } from '../basic';
+import type { FC } from 'react';
 
 export type Props = Pick< ConnectScreenProps, 'images' | 'assetBaseUrl' >;
 
 /*
  * The ImageSlider component.
  */
-const ImageSlider: React.FC< Props > = ( { images, assetBaseUrl = '' } ) => {
+const ImageSlider: FC< Props > = ( { images, assetBaseUrl = '' } ) => {
 	if ( ! images?.length ) {
 		return null;
 	}
 
 	const imagesHTML = images.map( ( image, index ) => (
-		<React.Fragment key={ index }>
+		<Fragment key={ index }>
 			<img src={ assetBaseUrl + image } alt="" />
-		</React.Fragment>
+		</Fragment>
 	) );
 
 	return <div className="jp-connection__connect-screen__image-slider">{ imagesHTML }</div>;

package/components/connect-screen/layout/index.tsx

@@ -1,9 +1,9 @@
 import { JetpackLogo } from '@automattic/jetpack-components';
 import clsx from 'clsx';
-import React from 'react';
 import ImageSlider from './image-slider';
 import type { Props as ConnectScreenProps } from '../basic';
 import type { WithRequired } from '../types';
+import type { FC } from 'react';
 import './style.scss';
 
 type SharedProps = Pick<
@@ -22,7 +22,7 @@ export type Props = WithRequired< SharedProps, 'title' > & OwnProps;
 /*
  * The Connection Screen Layout component.
  */
-const ConnectScreenLayout: React.FC< Props > = ( {
+const ConnectScreenLayout: FC< Props > = ( {
 	title,
 	children,
 	className,

package/components/connect-screen/required-plan/index.jsx

@@ -1,6 +1,5 @@
 import { __ } from '@wordpress/i18n';
 import PropTypes from 'prop-types';
-import React from 'react';
 import useProductCheckoutWorkflow from '../../../hooks/use-product-checkout-workflow';
 import useConnection from '../../use-connection';
 import ConnectScreenRequiredPlanVisual from './visual';
@@ -9,7 +8,7 @@ import ConnectScreenRequiredPlanVisual from './visual';
  * The Connection Screen Visual component for consumers that require a Plan.
  *
  * @param {object} props -- The properties.
- * @return {React.Component} The `ConnectScreenForRequiredPlan` component.
+ * @return {import('react').Component} The `ConnectScreenForRequiredPlan` component.
  */
 const ConnectScreenRequiredPlan = props => {
 	const {

package/components/connect-screen/required-plan/visual.jsx

@@ -9,7 +9,6 @@ import { __ } from '@wordpress/i18n';
 import clsx from 'clsx';
 import debugFactory from 'debug';
 import PropTypes from 'prop-types';
-import React from 'react';
 import ConnectScreenLayout from '../layout';
 import './style.scss';
 
@@ -19,7 +18,7 @@ const debug = debugFactory( 'jetpack:connection:ConnectScreenRequiredPlanVisual'
  * The Connection Screen Visual component for consumers that require a Plan.
  *
  * @param {object} props -- The properties.
- * @return {React.Component} The `ConnectScreenRequiredPlanVisual` component.
+ * @return {import('react').Component} The `ConnectScreenRequiredPlanVisual` component.
  */
 const ConnectScreenRequiredPlanVisual = props => {
 	const {

package/components/connected-plugins/index.jsx

@@ -1,13 +1,13 @@
 import { __ } from '@wordpress/i18n';
 import PropTypes from 'prop-types';
-import React, { useMemo } from 'react';
+import { Fragment, useMemo } from 'react';
 import DisconnectCard from '../disconnect-card';
 
 /**
  * Render a list of connected plugins.
  *
  * @param {object} props - The properties
- * @return {React.Component} - The ConnectedPlugins React component
+ * @return {import('react').Component} - The ConnectedPlugins React component
  */
 
 const ConnectedPlugins = props => {
@@ -35,7 +35,7 @@ const ConnectedPlugins = props => {
 
 	if ( connectedPlugins && connectedPluginsArray.length > 0 ) {
 		return (
-			<React.Fragment>
+			<Fragment>
 				<div className="jp-connection__disconnect-dialog__step-copy">
 					<p className="jp-connection__disconnect-dialog__large-text">
 						{ __(
@@ -49,7 +49,7 @@ const ConnectedPlugins = props => {
 						return <DisconnectCard title={ plugin.name } key={ plugin.slug } />;
 					} ) }
 				</div>
-			</React.Fragment>
+			</Fragment>
 		);
 	}
 

package/components/connection-error-notice/index.jsx

@@ -2,14 +2,13 @@ import { Spinner, useBreakpointMatch } from '@automattic/jetpack-components';
 import { Icon, Notice, Path, SVG } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
 import PropTypes from 'prop-types';
-import React from 'react';
 import styles from './styles.module.scss';
 
 /**
  * The RNA Connection Error Notice component.
  *
  * @param {object} props -- The properties.
- * @return {React.Component} The `ConnectionErrorNotice` component.
+ * @return {import('react').Component} The `ConnectionErrorNotice` component.
  */
 const ConnectionErrorNotice = props => {
 	const {

package/components/disconnect-card/index.jsx

@@ -1,5 +1,4 @@
 import PropTypes from 'prop-types';
-import React from 'react';
 
 import './style.scss';
 
@@ -8,7 +7,7 @@ import './style.scss';
  * Used in the disconnection flow.
  *
  * @param {object} props - The Properties.
- * @return {React.Component} DisconnectCard - The disconnect card component.
+ * @return {import('react').Component} DisconnectCard - The disconnect card component.
  */
 const DisconnectCard = props => {
 	const { title, value, description } = props;

package/components/disconnect-dialog/index.jsx

@@ -4,7 +4,7 @@ import { jetpackConfigHas, jetpackConfigGet } from '@automattic/jetpack-config';
 import { Modal } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import PropTypes from 'prop-types';
-import React, { useMemo, useEffect, useCallback, useState } from 'react';
+import { useMemo, useEffect, useCallback, useState } from 'react';
 import './style.scss';
 import StepDisconnect from './steps/step-disconnect';
 import StepDisconnectConfirm from './steps/step-disconnect-confirm';
@@ -15,7 +15,7 @@ import StepThankYou from './steps/step-thank-you';
  * The RNA Disconnect Dialog component.
  *
  * @param {object} props -- The properties.
- * @return {React.Component} The `DisconnectDialog` component.
+ * @return {import('react').Component} The `DisconnectDialog` component.
  */
 const DisconnectDialog = props => {
 	const [ isDisconnecting, setIsDisconnecting ] = useState( false );
@@ -302,7 +302,7 @@ const DisconnectDialog = props => {
 	/**
 	 * Determine what step to show based on the current state
 	 *
-	 * @return { React.Component|undefined } - component for current step
+	 * @return { import('react').Component|undefined } - component for current step
 	 */
 	const getCurrentStep = () => {
 		if ( ! isDisconnected ) {

package/components/disconnect-dialog/steps/step-disconnect-confirm.jsx

@@ -3,7 +3,6 @@ import { Button } from '@wordpress/components';
 import { createInterpolateElement } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import PropTypes from 'prop-types';
-import React from 'react';
 import disconnectImage from '../images/disconnect-confirm.jpg';
 
 /**
@@ -11,7 +10,7 @@ import disconnectImage from '../images/disconnect-confirm.jpg';
  * Will only show option to provide feedback if the canProvideFeedback prop is true.
  *
  * @param {object} props - The properties.
- * @return {React.Component} - StepDisconnectConfirm Component
+ * @return {import('react').Component} - StepDisconnectConfirm Component
  */
 const StepDisconnectConfirm = props => {
 	const { onExit, canProvideFeedback, onProvideFeedback } = props;

package/components/disconnect-dialog/steps/step-disconnect.jsx

@@ -3,14 +3,14 @@ import { Button, ExternalLink } from '@wordpress/components';
 import { createInterpolateElement } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import PropTypes from 'prop-types';
-import React, { useCallback, useEffect } from 'react';
+import { Fragment, useCallback, useEffect } from 'react';
 import ConnectedPlugins from '../../connected-plugins';
 
 /**
  * Disconnect step in disconnection flow.
  *
  * @param {object} props - The properties.
- * @return {React.Component} - The StepDisconnect component
+ * @return {import('react').Component} - The StepDisconnect component
  */
 const StepDisconnect = props => {
 	const {
@@ -66,7 +66,7 @@ const StepDisconnect = props => {
 	/**
 	 * Render the disconnect button, allows for some variance based on context.
 	 *
-	 * @return {React.Component} - Button used for disconnect.
+	 * @return {import('react').Component} - Button used for disconnect.
 	 */
 	const renderDisconnectButton = () => {
 		let buttonText = __( 'Disconnect', 'jetpack-connection-js' );
@@ -93,7 +93,7 @@ const StepDisconnect = props => {
 	 * Show some fallback output if there are no connected plugins to show and no passed disconnect component.
 	 * This is a more generic message about disconnecting Jetpack.
 	 *
-	 * @return {React.ElementType|undefined} - Fallback message for when there are no connected plugins or passed components to show.
+	 * @return {import('react').ElementType|undefined} - Fallback message for when there are no connected plugins or passed components to show.
 	 */
 	const renderFallbackOutput = () => {
 		const hasOtherConnectedPlugins =
@@ -122,7 +122,7 @@ const StepDisconnect = props => {
 	};
 
 	return (
-		<React.Fragment>
+		<Fragment>
 			<div className="jp-connection__disconnect-dialog__content">
 				<h1 id="jp-connection__disconnect-dialog__heading">{ title }</h1>
 				<ConnectedPlugins
@@ -186,7 +186,7 @@ const StepDisconnect = props => {
 					<p className="jp-connection__disconnect-dialog__error">{ disconnectError }</p>
 				) }
 			</div>
-		</React.Fragment>
+		</Fragment>
 	);
 };
 

package/components/disconnect-dialog/steps/step-survey.jsx

@@ -1,6 +1,5 @@
 import { __ } from '@wordpress/i18n';
 import PropTypes from 'prop-types';
-import React from 'react';
 import '../../disconnect-survey/_jp-connect_disconnect-survey-card.scss';
 import DisconnectSurvey from '../../disconnect-survey';
 
@@ -8,7 +7,7 @@ import DisconnectSurvey from '../../disconnect-survey';
  * Show the survey step and allow the user to select a response.
  *
  * @param {object} props - The properties.
- * @return {React.Component} The StepSurvey Component
+ * @return {import('react').Component} The StepSurvey Component
  */
 const StepSurvey = props => {
 	const { onExit, onFeedBackProvided, isSubmittingFeedback } = props;

package/components/disconnect-dialog/steps/step-thank-you.jsx

@@ -3,14 +3,13 @@ import { Button } from '@wordpress/components';
 import { createInterpolateElement } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import PropTypes from 'prop-types';
-import React from 'react';
 import disconnectImage from '../images/disconnect-thanks.jpg';
 
 /**
  * Show the "thank you" step following survey submission
  *
  * @param {object} props - The properties.
- * @return {React.Component} - The StepThankYou Component
+ * @return {import('react').Component} - The StepThankYou Component
  */
 const StepThankYou = props => {
 	const { onExit } = props;

package/components/disconnect-survey/index.jsx

@@ -1,14 +1,14 @@
 import { Button } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import PropTypes from 'prop-types';
-import React, { useCallback, useState } from 'react';
+import { Fragment, useCallback, useState } from 'react';
 import SurveyChoice from './survey-choice';
 
 /**
  * Handles showing the disconnect survey.
  *
  * @param {object} props - The component props.
- * @return {React.Component} - DisconnectSurvey component.
+ * @return {import('react').Component} - DisconnectSurvey component.
  */
 const DisconnectSurvey = props => {
 	const { onSubmit, isSubmittingFeedback } = props;
@@ -105,7 +105,7 @@ const DisconnectSurvey = props => {
 	/**
 	 * Show all the survey options from the options array.
 	 *
-	 * @return {React.ElementType []} - Mapped array of rendered survey options.
+	 * @return {import('react').ElementType []} - Mapped array of rendered survey options.
 	 */
 	const renderOptions = () => {
 		return options.map( option => {
@@ -127,7 +127,7 @@ const DisconnectSurvey = props => {
 	 * Show the custom input survey option.
 	 * Contains an input field for a custom response.
 	 *
-	 * @return {React.ElementType} - The custom survey option with an input field.
+	 * @return {import('react').ElementType} - The custom survey option with an input field.
 	 */
 	const renderCustomOption = () => {
 		return (
@@ -154,7 +154,7 @@ const DisconnectSurvey = props => {
 	};
 
 	return (
-		<React.Fragment>
+		<Fragment>
 			<div className="jp-connection__disconnect-dialog__survey">
 				{ renderOptions() }
 				{ renderCustomOption() }
@@ -175,7 +175,7 @@ const DisconnectSurvey = props => {
 						  ) }
 				</Button>
 			</p>
-		</React.Fragment>
+		</Fragment>
 	);
 };
 

package/components/disconnect-survey/survey-choice.jsx

@@ -1,16 +1,16 @@
-import React, { useCallback } from 'react';
+import { useCallback } from 'react';
 
 import './_jp-connect_disconnect-survey-card.scss';
 
 /**
  * SurveyChoice - Present one choice in the survey.
  *
- * @param {string}            props.id        - The ID/slug string of the survey option
- * @param {Function}          props.onClick   - Event handler for clicking on the survey option.
- * @param {Function}          props.onKeydown - Event handler for pressing a key on the survey option.
- * @param {React.ElementType} props.children  - Any passed elements as children to this component.
- * @param {string}            props.className - A class name to apply to the survey choice.
- * @return {React.Component} SurveyChoice - The SurveyChoice component.
+ * @param {string}                      props.id        - The ID/slug string of the survey option
+ * @param {Function}                    props.onClick   - Event handler for clicking on the survey option.
+ * @param {Function}                    props.onKeydown - Event handler for pressing a key on the survey option.
+ * @param {import('react').ElementType} props.children  - Any passed elements as children to this component.
+ * @param {string}                      props.className - A class name to apply to the survey choice.
+ * @return {import('react').Component} SurveyChoice - The SurveyChoice component.
  */
 
 const SurveyChoice = props => {

package/components/in-place-connection/index.jsx

@@ -1,6 +1,6 @@
 import { __ } from '@wordpress/i18n';
 import PropTypes from 'prop-types';
-import React, { useEffect, useRef } from 'react';
+import { useEffect, useRef } from 'react';
 
 import './style.scss';
 
@@ -18,7 +18,7 @@ import './style.scss';
  * @param {Function}      props.onComplete                 -- The callback to be called upon complete of the connection process.
  * @param {Function}      props.onThirdPartyCookiesBlocked -- The callback to be called if third-party cookies are disabled.
  * @param {string}        props.location                   -- Component location identifier passed to WP.com.
- * @return {React.Component} The in-place connection component.
+ * @return {import('react').Component} The in-place connection component.
  */
 const InPlaceConnection = props => {
 	const {

package/components/manage-connection-dialog/index.jsx

@@ -11,7 +11,7 @@ import { __ } from '@wordpress/i18n';
 import { Icon, chevronRight, external } from '@wordpress/icons';
 import clsx from 'clsx';
 import PropTypes from 'prop-types';
-import React, { useCallback, useEffect, useState, useMemo } from 'react';
+import { useCallback, useEffect, useState, useMemo } from 'react';
 /**
  * Internal dependencies
  */
@@ -24,7 +24,7 @@ import './style.scss';
  * The RNA Manage Connection Dialog component.
  *
  * @param {object} props -- The properties.
- * @return {React.JSX} The `ManageConnectionDialog` component.
+ * @return {import('react').JSX} The `ManageConnectionDialog` component.
  */
 const ManageConnectionDialog = props => {
 	const {

package/components/owner-disconnect-dialog/index.jsx

@@ -10,7 +10,7 @@ import { __ } from '@wordpress/i18n';
 import { Icon, chevronRight, external } from '@wordpress/icons';
 import clsx from 'clsx';
 import PropTypes from 'prop-types';
-import React, { useCallback, useState, useEffect } from 'react';
+import { useCallback, useState, useEffect } from 'react';
 import './style.scss';
 
 /**
@@ -23,7 +23,7 @@ import './style.scss';
  * @param {string}   props.apiNonce       - API nonce.
  * @param {Function} props.onDisconnected - Callback after successful disconnection.
  * @param {Function} props.onUnlinked     - Callback after user is unlinked.
- * @return {React.Component} The OwnerDisconnectDialog component.
+ * @return {import('react').Component} The OwnerDisconnectDialog component.
  */
 const OwnerDisconnectDialog = ( {
 	isOpen,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/jetpack-connection",
-	"version": "1.2.7",
+	"version": "1.2.8",
 	"description": "Jetpack Connection Component",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/js-packages/connection/#readme",
 	"bugs": {
@@ -14,10 +14,10 @@
 	"author": "Automattic",
 	"license": "GPL-2.0-or-later",
 	"dependencies": {
-		"@automattic/jetpack-analytics": "^1.0.1",
-		"@automattic/jetpack-api": "^1.0.2",
-		"@automattic/jetpack-components": "^1.1.7",
-		"@automattic/jetpack-config": "^1.0.1",
+		"@automattic/jetpack-analytics": "^1.0.2",
+		"@automattic/jetpack-api": "^1.0.3",
+		"@automattic/jetpack-components": "^1.1.8",
+		"@automattic/jetpack-config": "^1.0.2",
 		"@automattic/jetpack-script-data": "^0.4.4",
 		"@wordpress/base-styles": "6.1.0",
 		"@wordpress/browserslist-config": "6.25.0",
@@ -31,7 +31,7 @@
 		"prop-types": "^15.7.2"
 	},
 	"devDependencies": {
-		"@automattic/jetpack-base-styles": "^1.0.1",
+		"@automattic/jetpack-base-styles": "^1.0.2",
 		"@babel/core": "7.27.4",
 		"@babel/preset-react": "7.27.1",
 		"@storybook/addon-actions": "8.6.7",