Commit 4d03fc58761 for woocommerce
commit 4d03fc5876167e578e1e68b6213859643b9d0549
Author: Michal Iwanow <4765119+mcliwanow@users.noreply.github.com>
Date: Fri Jun 5 09:52:18 2026 +0200
Prepare Marketplace for React 19 compatibility (#65401)
diff --git a/packages/js/components/changelog/wccom-2623-table-react-19-compatibility b/packages/js/components/changelog/wccom-2623-table-react-19-compatibility
new file mode 100644
index 00000000000..cc5d6d269d7
--- /dev/null
+++ b/packages/js/components/changelog/wccom-2623-table-react-19-compatibility
@@ -0,0 +1,4 @@
+Significance: patch
+Type: dev
+
+Prepare table component typings for React 19 compatibility.
diff --git a/packages/js/components/src/table/index.tsx b/packages/js/components/src/table/index.tsx
index e241618ccf3..08be0c658c0 100644
--- a/packages/js/components/src/table/index.tsx
+++ b/packages/js/components/src/table/index.tsx
@@ -41,7 +41,7 @@ const defaultOnColumnsChange: (
* `TableCard` serves as Card wrapper & contains a card header, `<Table />`, `<TableSummary />`, and `<Pagination />`.
* This includes filtering and comparison functionality for report pages.
*/
-const TableCard: React.VFC< TableCardProps > = ( {
+const TableCard: React.FC< TableCardProps > = ( {
actions,
className,
hasSearch,
diff --git a/packages/js/components/src/table/placeholder.tsx b/packages/js/components/src/table/placeholder.tsx
index fbc8ee916f1..1911206a895 100644
--- a/packages/js/components/src/table/placeholder.tsx
+++ b/packages/js/components/src/table/placeholder.tsx
@@ -29,7 +29,7 @@ type TablePlaceholderProps = {
/**
* `TablePlaceholder` behaves like `Table` but displays placeholder boxes instead of data. This can be used while loading.
*/
-const TablePlaceholder: React.VFC< TablePlaceholderProps > = ( {
+const TablePlaceholder: React.FC< TablePlaceholderProps > = ( {
query,
caption,
headers,
diff --git a/packages/js/components/src/table/table.tsx b/packages/js/components/src/table/table.tsx
index 140a9c17035..6d49cc3797b 100644
--- a/packages/js/components/src/table/table.tsx
+++ b/packages/js/components/src/table/table.tsx
@@ -62,7 +62,7 @@ const getDisplay = ( cell: { display?: React.ReactNode } ) =>
* | March | 9 | $460.00 |
*/
-const Table: React.VFC< TableProps > = ( {
+const Table: React.FC< TableProps > = ( {
instanceId,
headers = [],
rows = [],
@@ -83,7 +83,7 @@ const Table: React.VFC< TableProps > = ( {
const [ isScrollableRight, setIsScrollableRight ] = useState( false );
const [ isScrollableLeft, setIsScrollableLeft ] = useState( false );
- const container = useRef< HTMLDivElement >( null );
+ const container = useRef< HTMLDivElement | null >( null );
if ( classNames ) {
deprecated( `Table component's classNames prop`, {
diff --git a/plugins/woocommerce/changelog/wccom-2623-marketplace-react-19-compatibility b/plugins/woocommerce/changelog/wccom-2623-marketplace-react-19-compatibility
new file mode 100644
index 00000000000..cd1f1a863e7
--- /dev/null
+++ b/plugins/woocommerce/changelog/wccom-2623-marketplace-react-19-compatibility
@@ -0,0 +1,4 @@
+Significance: patch
+Type: dev
+
+Prepare Marketplace JSX and ref types for React 19 compatibility.
diff --git a/plugins/woocommerce/client/admin/client/marketplace/components/banner/banner.tsx b/plugins/woocommerce/client/admin/client/marketplace/components/banner/banner.tsx
index b080a0e0aba..b936a6bb7e7 100644
--- a/plugins/woocommerce/client/admin/client/marketplace/components/banner/banner.tsx
+++ b/plugins/woocommerce/client/admin/client/marketplace/components/banner/banner.tsx
@@ -47,7 +47,7 @@ export default function ProductFeaturedBanner() {
const [ activeIndex, setActiveIndex ] = useState( 0 );
const [ isDismissed, setIsDismissed ] = useState( false );
const [ autoRotate, setAutoRotate ] = useState( true );
- const carouselItemRef = useRef< HTMLLIElement >( null );
+ const carouselItemRef = useRef< HTMLLIElement | null >( null );
useEffect( () => {
let interval: NodeJS.Timeout;
diff --git a/plugins/woocommerce/client/admin/client/marketplace/components/category-selector/category-dropdown.tsx b/plugins/woocommerce/client/admin/client/marketplace/components/category-selector/category-dropdown.tsx
index e05d56c2acc..ac465423a9e 100644
--- a/plugins/woocommerce/client/admin/client/marketplace/components/category-selector/category-dropdown.tsx
+++ b/plugins/woocommerce/client/admin/client/marketplace/components/category-selector/category-dropdown.tsx
@@ -18,7 +18,7 @@ function DropdownContent( props: {
readonly categories: Category[];
readonly selected?: Category;
readonly onClick: () => void;
-} ): JSX.Element {
+} ): React.JSX.Element {
function updateCategorySelection(
event: React.MouseEvent< HTMLButtonElement >
) {
@@ -78,7 +78,7 @@ type CategoryDropdownProps = {
export default function CategoryDropdown(
props: CategoryDropdownProps
-): JSX.Element {
+): React.JSX.Element {
function dropDownTracksEvent() {
recordEvent( 'marketplace_category_dropdown_opened', {
type: props.type,
diff --git a/plugins/woocommerce/client/admin/client/marketplace/components/category-selector/category-link.tsx b/plugins/woocommerce/client/admin/client/marketplace/components/category-selector/category-link.tsx
index d674758117f..d00d348d4d0 100644
--- a/plugins/woocommerce/client/admin/client/marketplace/components/category-selector/category-link.tsx
+++ b/plugins/woocommerce/client/admin/client/marketplace/components/category-selector/category-link.tsx
@@ -9,7 +9,7 @@ import { navigateTo, getNewPath } from '@woocommerce/navigation';
*/
import { Category } from './types';
-export default function CategoryLink( props: Category ): JSX.Element {
+export default function CategoryLink( props: Category ): React.JSX.Element {
function updateCategorySelection(
event: React.MouseEvent< HTMLButtonElement >
) {
diff --git a/plugins/woocommerce/client/admin/client/marketplace/components/category-selector/category-selector.tsx b/plugins/woocommerce/client/admin/client/marketplace/components/category-selector/category-selector.tsx
index 9625aef5862..7a5a12ae78d 100644
--- a/plugins/woocommerce/client/admin/client/marketplace/components/category-selector/category-selector.tsx
+++ b/plugins/woocommerce/client/admin/client/marketplace/components/category-selector/category-selector.tsx
@@ -29,7 +29,7 @@ interface CategorySelectorProps {
export default function CategorySelector(
props: CategorySelectorProps
-): JSX.Element {
+): React.JSX.Element {
const [ selected, setSelected ] = useState< Category >();
const [ isLoading, setIsLoading ] = useState( false );
const [ categoriesToShow, setCategoriesToShow ] = useState< Category[] >(
@@ -40,8 +40,8 @@ export default function CategorySelector(
'start' | 'middle' | 'end'
>( 'start' );
- const categorySelectorRef = useRef< HTMLUListElement >( null );
- const selectedCategoryRef = useRef< HTMLLIElement >( null );
+ const categorySelectorRef = useRef< HTMLUListElement | null >( null );
+ const selectedCategoryRef = useRef< HTMLLIElement | null >( null );
const query = useQuery();
diff --git a/plugins/woocommerce/client/admin/client/marketplace/components/connect-notice/connect-notice.tsx b/plugins/woocommerce/client/admin/client/marketplace/components/connect-notice/connect-notice.tsx
index 32176094cb4..bd6fddcb762 100644
--- a/plugins/woocommerce/client/admin/client/marketplace/components/connect-notice/connect-notice.tsx
+++ b/plugins/woocommerce/client/admin/client/marketplace/components/connect-notice/connect-notice.tsx
@@ -12,7 +12,7 @@ import { appendURLParams, connectUrl } from '~/marketplace/utils/functions';
import Notice from '~/marketplace/components/notice/notice';
import { getAdminSetting } from '~/utils/admin-settings';
-export default function ConnectNotice(): JSX.Element | null {
+export default function ConnectNotice(): React.JSX.Element | null {
const localStorageKey = 'woo-connect-notice-marketplace-dismissed';
const wccomSettings = getAdminSetting( 'wccomHelper', {} );
const noticeType: 'none' | 'short' | 'long' =
diff --git a/plugins/woocommerce/client/admin/client/marketplace/components/content/content.tsx b/plugins/woocommerce/client/admin/client/marketplace/components/content/content.tsx
index f794d276cdc..5405723cd29 100644
--- a/plugins/woocommerce/client/admin/client/marketplace/components/content/content.tsx
+++ b/plugins/woocommerce/client/admin/client/marketplace/components/content/content.tsx
@@ -36,7 +36,7 @@ import PluginInstallNotice from '../woo-update-manager-plugin/plugin-install-not
import SubscriptionsExpiredExpiringNotice from '~/marketplace/components/my-subscriptions/subscriptions-expired-expiring-notice';
import LoadMoreButton from '../load-more-button/load-more-button';
-export default function Content(): JSX.Element {
+export default function Content(): React.JSX.Element {
const marketplaceContextValue = useContext( MarketplaceContext );
const [ allProducts, setAllProducts ] = useState< Product[] >( [] );
const [ filteredProducts, setFilteredProducts ] = useState< Product[] >(
@@ -388,7 +388,7 @@ export default function Content(): JSX.Element {
}
}, [ firstNewProductId ] );
- const renderContent = (): JSX.Element => {
+ const renderContent = (): React.JSX.Element => {
switch ( selectedTab ) {
case 'extensions':
case 'themes':
diff --git a/plugins/woocommerce/client/admin/client/marketplace/components/discover/discover.tsx b/plugins/woocommerce/client/admin/client/marketplace/components/discover/discover.tsx
index d8ef942ef62..4650f01b44d 100644
--- a/plugins/woocommerce/client/admin/client/marketplace/components/discover/discover.tsx
+++ b/plugins/woocommerce/client/admin/client/marketplace/components/discover/discover.tsx
@@ -15,7 +15,7 @@ import { ProductCardType, ProductType } from '../product-list/types';
import './discover.scss';
import { recordMarketplaceView } from '~/marketplace/utils/tracking';
-export default function Discover(): JSX.Element | null {
+export default function Discover(): React.JSX.Element | null {
const [ productGroups, setProductGroups ] = useState<
Array< ProductGroup >
>( [] );
diff --git a/plugins/woocommerce/client/admin/client/marketplace/components/footer/footer.tsx b/plugins/woocommerce/client/admin/client/marketplace/components/footer/footer.tsx
index d1ce7a55943..503b26d08a6 100644
--- a/plugins/woocommerce/client/admin/client/marketplace/components/footer/footer.tsx
+++ b/plugins/woocommerce/client/admin/client/marketplace/components/footer/footer.tsx
@@ -66,7 +66,7 @@ export const paymentTitle = ( location: string ) => {
);
};
-function FooterContent(): JSX.Element {
+function FooterContent(): React.JSX.Element {
return (
<div className="woocommerce-marketplace__footer-content">
<h2 className="woocommerce-marketplace__footer-title">
@@ -113,7 +113,7 @@ function FooterContent(): JSX.Element {
);
}
-export default function Footer(): JSX.Element {
+export default function Footer(): React.JSX.Element {
return (
<div className="woocommerce-marketplace__footer">
<FooterContent />
diff --git a/plugins/woocommerce/client/admin/client/marketplace/components/header-account/header-account-modal.tsx b/plugins/woocommerce/client/admin/client/marketplace/components/header-account/header-account-modal.tsx
index 149941b2933..f3709678c8c 100644
--- a/plugins/woocommerce/client/admin/client/marketplace/components/header-account/header-account-modal.tsx
+++ b/plugins/woocommerce/client/admin/client/marketplace/components/header-account/header-account-modal.tsx
@@ -16,7 +16,7 @@ export interface HeaderAccountModalProps {
export default function HeaderAccountModal(
props: HeaderAccountModalProps
-): JSX.Element {
+): React.JSX.Element {
const { setIsModalOpen, disconnectURL } = props;
const [ isBusy, setIsBusy ] = useState( false );
const toggleIsBusy = () => setIsBusy( ! isBusy );
diff --git a/plugins/woocommerce/client/admin/client/marketplace/components/header-account/header-account.tsx b/plugins/woocommerce/client/admin/client/marketplace/components/header-account/header-account.tsx
index 85fc88b6868..c2d07070587 100644
--- a/plugins/woocommerce/client/admin/client/marketplace/components/header-account/header-account.tsx
+++ b/plugins/woocommerce/client/admin/client/marketplace/components/header-account/header-account.tsx
@@ -40,7 +40,7 @@ interface HeaderAccountProps {
export default function HeaderAccount( {
page = 'wc-admin',
-}: HeaderAccountProps ): JSX.Element {
+}: HeaderAccountProps ): React.JSX.Element {
const [ isModalOpen, setIsModalOpen ] = useState( false );
const [ useDefaultAvatar, setUseDefaultAvatar ] = useState( false );
diff --git a/plugins/woocommerce/client/admin/client/marketplace/components/icon-with-text/icon-with-text.tsx b/plugins/woocommerce/client/admin/client/marketplace/components/icon-with-text/icon-with-text.tsx
index 7f5867a9ff5..dd16f6e4604 100644
--- a/plugins/woocommerce/client/admin/client/marketplace/components/icon-with-text/icon-with-text.tsx
+++ b/plugins/woocommerce/client/admin/client/marketplace/components/icon-with-text/icon-with-text.tsx
@@ -10,12 +10,14 @@ import { ReactElement } from 'react';
import './icon-with-text.scss';
export interface IconWithTextProps {
- icon: JSX.Element;
+ icon: React.JSX.Element;
title: ReactElement | string;
description: string;
}
-export default function IconWithText( props: IconWithTextProps ): JSX.Element {
+export default function IconWithText(
+ props: IconWithTextProps
+): React.JSX.Element {
const { icon, title, description } = props;
return (
<div className="woocommerce-marketplace__icon-group">
diff --git a/plugins/woocommerce/client/admin/client/marketplace/components/likert-scale/likert-scale.tsx b/plugins/woocommerce/client/admin/client/marketplace/components/likert-scale/likert-scale.tsx
index b45beab54a5..0048263f908 100644
--- a/plugins/woocommerce/client/admin/client/marketplace/components/likert-scale/likert-scale.tsx
+++ b/plugins/woocommerce/client/admin/client/marketplace/components/likert-scale/likert-scale.tsx
@@ -22,7 +22,9 @@ export interface LikertChangeEvent {
};
}
-export default function LikertScale( props: LikertScaleProps ): JSX.Element {
+export default function LikertScale(
+ props: LikertScaleProps
+): React.JSX.Element {
const { title, fieldName, onValueChange, validationFailed } = props;
const scaleOptions = [
{
diff --git a/plugins/woocommerce/client/admin/client/marketplace/components/my-subscriptions/my-subscriptions-account.tsx b/plugins/woocommerce/client/admin/client/marketplace/components/my-subscriptions/my-subscriptions-account.tsx
index b45ff0d9056..c16449e99b1 100644
--- a/plugins/woocommerce/client/admin/client/marketplace/components/my-subscriptions/my-subscriptions-account.tsx
+++ b/plugins/woocommerce/client/admin/client/marketplace/components/my-subscriptions/my-subscriptions-account.tsx
@@ -12,7 +12,7 @@ import { Icon, link } from '@wordpress/icons';
import { getAdminSetting } from '~/utils/admin-settings';
import { MARKETPLACE_MY_ACCOUNT_PATH } from '../constants';
-export default function MySubscriptionsAccount(): JSX.Element | null {
+export default function MySubscriptionsAccount(): React.JSX.Element | null {
const wccomSettings = getAdminSetting( 'wccomHelper', {} );
const isConnected = wccomSettings?.isConnected ?? false;
diff --git a/plugins/woocommerce/client/admin/client/marketplace/components/my-subscriptions/my-subscriptions.tsx b/plugins/woocommerce/client/admin/client/marketplace/components/my-subscriptions/my-subscriptions.tsx
index 1784fe082be..8527a765ffc 100644
--- a/plugins/woocommerce/client/admin/client/marketplace/components/my-subscriptions/my-subscriptions.tsx
+++ b/plugins/woocommerce/client/admin/client/marketplace/components/my-subscriptions/my-subscriptions.tsx
@@ -26,7 +26,7 @@ import { connectUrl } from '../../utils/functions';
import Notice from '../notice/notice';
import MySubscriptionsAccount from './my-subscriptions-account';
-export default function MySubscriptions(): JSX.Element {
+export default function MySubscriptions(): React.JSX.Element {
const { subscriptions, isLoading } = useContext( SubscriptionsContext );
const wccomSettings = getAdminSetting( 'wccomHelper', {} );
diff --git a/plugins/woocommerce/client/admin/client/marketplace/components/my-subscriptions/subscriptions-expired-expiring-notice.tsx b/plugins/woocommerce/client/admin/client/marketplace/components/my-subscriptions/subscriptions-expired-expiring-notice.tsx
index f0140071e92..0b68fb4e381 100644
--- a/plugins/woocommerce/client/admin/client/marketplace/components/my-subscriptions/subscriptions-expired-expiring-notice.tsx
+++ b/plugins/woocommerce/client/admin/client/marketplace/components/my-subscriptions/subscriptions-expired-expiring-notice.tsx
@@ -23,7 +23,7 @@ export interface TrackEvents {
export default function SubscriptionsExpiredExpiringNotice(
props: SubscriptionsExpiredExpiringNoticeProps
-): JSX.Element | null {
+): React.JSX.Element | null {
const { type } = props;
const wccomSettings = getAdminSetting( 'wccomHelper', {} );
const eventKeys: Record< string, TrackEvents > = {
diff --git a/plugins/woocommerce/client/admin/client/marketplace/components/my-subscriptions/table/rows/functions.tsx b/plugins/woocommerce/client/admin/client/marketplace/components/my-subscriptions/table/rows/functions.tsx
index 9e00bed2281..5f671d84150 100644
--- a/plugins/woocommerce/client/admin/client/marketplace/components/my-subscriptions/table/rows/functions.tsx
+++ b/plugins/woocommerce/client/admin/client/marketplace/components/my-subscriptions/table/rows/functions.tsx
@@ -35,7 +35,7 @@ import { getAdminSetting } from '../../../../../utils/admin-settings';
type StatusBadge = {
text: string;
level: StatusLevel;
- explanation?: string | JSX.Element;
+ explanation?: string | React.JSX.Element;
};
function getStatusBadge(
@@ -210,7 +210,7 @@ function getStatusBadge(
function getVersion(
subscription: Subscription,
table: MySubscriptionsTable
-): string | JSX.Element {
+): string | React.JSX.Element {
const wccomSettings = getAdminSetting( 'wccomHelper', {} );
if ( subscription.local.version === subscription.version ) {
diff --git a/plugins/woocommerce/client/admin/client/marketplace/components/my-subscriptions/table/rows/status-popover.tsx b/plugins/woocommerce/client/admin/client/marketplace/components/my-subscriptions/table/rows/status-popover.tsx
index 27096256c07..337c1fd4367 100644
--- a/plugins/woocommerce/client/admin/client/marketplace/components/my-subscriptions/table/rows/status-popover.tsx
+++ b/plugins/woocommerce/client/admin/client/marketplace/components/my-subscriptions/table/rows/status-popover.tsx
@@ -13,7 +13,7 @@ import { StatusLevel } from '../../types';
export default function StatusPopover( props: {
text: string;
level: StatusLevel;
- explanation: string | JSX.Element;
+ explanation: string | React.JSX.Element;
explanationOnHover?: boolean;
} ) {
const [ isHovered, setIsHovered ] = useState( false );
diff --git a/plugins/woocommerce/client/admin/client/marketplace/components/notice/notice.tsx b/plugins/woocommerce/client/admin/client/marketplace/components/notice/notice.tsx
index 2fb66c0c27b..0e2ae3b21d0 100644
--- a/plugins/woocommerce/client/admin/client/marketplace/components/notice/notice.tsx
+++ b/plugins/woocommerce/client/admin/client/marketplace/components/notice/notice.tsx
@@ -32,7 +32,7 @@ const iconMap = {
percent,
};
-export default function Notice( props: NoticeProps ): JSX.Element | null {
+export default function Notice( props: NoticeProps ): React.JSX.Element | null {
const {
id,
description,
diff --git a/plugins/woocommerce/client/admin/client/marketplace/components/product-card/product-card.tsx b/plugins/woocommerce/client/admin/client/marketplace/components/product-card/product-card.tsx
index 84596a7e2f0..b0e9f8dd081 100644
--- a/plugins/woocommerce/client/admin/client/marketplace/components/product-card/product-card.tsx
+++ b/plugins/woocommerce/client/admin/client/marketplace/components/product-card/product-card.tsx
@@ -32,7 +32,7 @@ export interface ProductCardProps {
cardType?: ProductCardType;
}
-function ProductCard( props: ProductCardProps ): JSX.Element {
+function ProductCard( props: ProductCardProps ): React.JSX.Element {
const SPONSORED_PRODUCT_LABEL = 'promoted'; // what product.label indicates a sponsored placement
const SPONSORED_PRODUCT_STRIPE_SIZE = '5px'; // unfortunately can't be defined in CSS - height of "stripe"
@@ -40,7 +40,7 @@ function ProductCard( props: ProductCardProps ): JSX.Element {
const isCompact = cardType === 'compact';
const query = useQuery();
const [ isPreviewModalOpen, setIsPreviewModalOpen ] = useState( false );
- const linkRef = useRef< HTMLAnchorElement >( null );
+ const linkRef = useRef< HTMLAnchorElement | null >( null );
// Get the product if provided; if not provided, render a skeleton loader
const product = props.product ?? {
id: null,
diff --git a/plugins/woocommerce/client/admin/client/marketplace/components/product-list-content/no-results.tsx b/plugins/woocommerce/client/admin/client/marketplace/components/product-list-content/no-results.tsx
index 2d96db0a918..48241c133c3 100644
--- a/plugins/woocommerce/client/admin/client/marketplace/components/product-list-content/no-results.tsx
+++ b/plugins/woocommerce/client/admin/client/marketplace/components/product-list-content/no-results.tsx
@@ -18,7 +18,7 @@ export default function NoResults( props: {
type: SearchResultType;
showHeading?: boolean;
heading?: string;
-} ): JSX.Element {
+} ): React.JSX.Element {
const [ productGroups, setProductGroups ] = useState< ProductGroup[] >();
const [ isLoading, setIsLoading ] = useState( false );
const productGroupsForSearchType = {
diff --git a/plugins/woocommerce/client/admin/client/marketplace/components/product-list-content/product-list-content.tsx b/plugins/woocommerce/client/admin/client/marketplace/components/product-list-content/product-list-content.tsx
index 297567ffe9d..35cb9d2277f 100644
--- a/plugins/woocommerce/client/admin/client/marketplace/components/product-list-content/product-list-content.tsx
+++ b/plugins/woocommerce/client/admin/client/marketplace/components/product-list-content/product-list-content.tsx
@@ -22,7 +22,7 @@ export default function ProductListContent( props: {
className?: string;
searchTerm?: string;
category?: string;
-} ): JSX.Element {
+} ): React.JSX.Element {
const wccomHelperSettings = getAdminSetting( 'wccomHelper', {} );
const [ productsToShow, setProductsToShow ] = useState( props.products );
diff --git a/plugins/woocommerce/client/admin/client/marketplace/components/product-list-header/product-list-header.tsx b/plugins/woocommerce/client/admin/client/marketplace/components/product-list-header/product-list-header.tsx
index e0dc51d685d..3c4ed7f7e4e 100644
--- a/plugins/woocommerce/client/admin/client/marketplace/components/product-list-header/product-list-header.tsx
+++ b/plugins/woocommerce/client/admin/client/marketplace/components/product-list-header/product-list-header.tsx
@@ -21,7 +21,7 @@ interface ProductListHeaderProps {
export default function ProductListHeader(
props: ProductListHeaderProps
-): JSX.Element {
+): React.JSX.Element {
const { title, description, groupURL, groupURLText, groupURLType } = props;
const isLoading = title === '';
diff --git a/plugins/woocommerce/client/admin/client/marketplace/components/product-list/product-list.tsx b/plugins/woocommerce/client/admin/client/marketplace/components/product-list/product-list.tsx
index 1f836eb3a63..1bcdea5b2fc 100644
--- a/plugins/woocommerce/client/admin/client/marketplace/components/product-list/product-list.tsx
+++ b/plugins/woocommerce/client/admin/client/marketplace/components/product-list/product-list.tsx
@@ -19,7 +19,9 @@ interface ProductListProps {
containerRef?: ( element: HTMLDivElement | null ) => void;
}
-export default function ProductList( props: ProductListProps ): JSX.Element {
+export default function ProductList(
+ props: ProductListProps
+): React.JSX.Element {
const {
title,
description,
diff --git a/plugins/woocommerce/client/admin/client/marketplace/components/product-loader/product-loader.tsx b/plugins/woocommerce/client/admin/client/marketplace/components/product-loader/product-loader.tsx
index d8bb671c52c..6729b0f4e34 100644
--- a/plugins/woocommerce/client/admin/client/marketplace/components/product-loader/product-loader.tsx
+++ b/plugins/woocommerce/client/admin/client/marketplace/components/product-loader/product-loader.tsx
@@ -16,7 +16,7 @@ interface ProductLoaderProps {
export default function ProductLoader(
props: ProductLoaderProps
-): JSX.Element {
+): React.JSX.Element {
const { hasTitle, type } = props;
const placeholderCount = props.placeholderCount || 12;
diff --git a/plugins/woocommerce/client/admin/client/marketplace/components/product-preview-modal/product-preview-modal.tsx b/plugins/woocommerce/client/admin/client/marketplace/components/product-preview-modal/product-preview-modal.tsx
index 1221781d85d..fd547b497d9 100644
--- a/plugins/woocommerce/client/admin/client/marketplace/components/product-preview-modal/product-preview-modal.tsx
+++ b/plugins/woocommerce/client/admin/client/marketplace/components/product-preview-modal/product-preview-modal.tsx
@@ -16,10 +16,10 @@ import './product-preview-modal.scss';
interface ProductPreviewModalProps {
productTitle: string;
- productVendor: JSX.Element | string | null;
+ productVendor: React.JSX.Element | string | null;
productIcon: string;
productId: number;
- triggerRef: React.RefObject< HTMLAnchorElement >;
+ triggerRef: React.RefObject< HTMLAnchorElement | null >;
onOpen?: () => void;
onClose?: ( closeType?: string ) => void;
}
diff --git a/plugins/woocommerce/client/admin/client/marketplace/components/products/products.tsx b/plugins/woocommerce/client/admin/client/marketplace/components/products/products.tsx
index ed401afab2b..15114ac75eb 100644
--- a/plugins/woocommerce/client/admin/client/marketplace/components/products/products.tsx
+++ b/plugins/woocommerce/client/admin/client/marketplace/components/products/products.tsx
@@ -130,26 +130,29 @@ export default function Products( props: ProductsProps ) {
'woocommerce-marketplace__browse-wp-theme-directory'
}
>
- <b>
+ <b key="wp-theme-directory-heading">
{ __( 'Didn’t find a theme you like?', 'woocommerce' ) }
</b>
- { createInterpolateElement(
- __(
- ' Browse the <a>WordPress.org theme directory</a> to discover more.',
- 'woocommerce'
- ),
- {
- a: (
- // eslint-disable-next-line jsx-a11y/anchor-has-content
- <a
- href={
- ADMIN_URL +
- 'theme-install.php?search=e-commerce'
- }
- />
+ <span key="wp-theme-directory-copy">
+ { createInterpolateElement(
+ __(
+ ' Browse the <a>WordPress.org theme directory</a> to discover more.',
+ 'woocommerce'
),
- }
- ) }
+ {
+ a: (
+ // eslint-disable-next-line jsx-a11y/anchor-has-content
+ <a
+ key="wp-theme-directory"
+ href={
+ ADMIN_URL +
+ 'theme-install.php?search=e-commerce'
+ }
+ />
+ ),
+ }
+ ) }
+ </span>
</div>
) }
{ showAllButton && (
diff --git a/plugins/woocommerce/client/admin/client/marketplace/components/promotions/promotions.tsx b/plugins/woocommerce/client/admin/client/marketplace/components/promotions/promotions.tsx
index 9d7115e1a5b..514d72f4311 100644
--- a/plugins/woocommerce/client/admin/client/marketplace/components/promotions/promotions.tsx
+++ b/plugins/woocommerce/client/admin/client/marketplace/components/promotions/promotions.tsx
@@ -19,9 +19,11 @@ declare global {
}
}
-const Promotions: ( { format }: { format: string } ) => null | JSX.Element = ( {
+const Promotions: ( {
format,
-} ) => {
+}: {
+ format: string;
+} ) => null | React.JSX.Element = ( { format } ) => {
if (
! window?.wcMarketplace?.promotions ||
! Array.isArray( window?.wcMarketplace?.promotions )
diff --git a/plugins/woocommerce/client/admin/client/marketplace/components/search/search.tsx b/plugins/woocommerce/client/admin/client/marketplace/components/search/search.tsx
index d967e6ac1b1..d695a47930e 100644
--- a/plugins/woocommerce/client/admin/client/marketplace/components/search/search.tsx
+++ b/plugins/woocommerce/client/admin/client/marketplace/components/search/search.tsx
@@ -15,10 +15,8 @@ import { MARKETPLACE_PATH } from '../constants';
/**
* Search component.
- *
- * @return {JSX.Element} Search component.
*/
-function Search(): JSX.Element {
+function Search(): React.JSX.Element {
const [ searchTerm, setSearchTerm ] = useState( '' );
const searchPlaceholder = __( 'Search Marketplace', 'woocommerce' );
diff --git a/plugins/woocommerce/client/admin/client/marketplace/components/tabs/tabs.tsx b/plugins/woocommerce/client/admin/client/marketplace/components/tabs/tabs.tsx
index 858f57a8708..8d56e47608f 100644
--- a/plugins/woocommerce/client/admin/client/marketplace/components/tabs/tabs.tsx
+++ b/plugins/woocommerce/client/admin/client/marketplace/components/tabs/tabs.tsx
@@ -155,7 +155,7 @@ const renderTabs = (
return tabContent;
};
-const Tabs = ( props: TabsProps ): JSX.Element => {
+const Tabs = ( props: TabsProps ): React.JSX.Element => {
const { additionalClassNames } = props;
const marketplaceContextValue = useContext( MarketplaceContext );
const { isLoading, setSelectedTab } = marketplaceContextValue;
diff --git a/plugins/woocommerce/client/admin/client/marketplace/contexts/marketplace-context.tsx b/plugins/woocommerce/client/admin/client/marketplace/contexts/marketplace-context.tsx
index 4b9e1ef87f5..fcd18ba3161 100644
--- a/plugins/woocommerce/client/admin/client/marketplace/contexts/marketplace-context.tsx
+++ b/plugins/woocommerce/client/admin/client/marketplace/contexts/marketplace-context.tsx
@@ -42,8 +42,8 @@ export const MarketplaceContext = createContext< MarketplaceContextType >( {
} );
export function MarketplaceContextProvider( props: {
- children: JSX.Element;
-} ): JSX.Element {
+ children: React.JSX.Element;
+} ): React.JSX.Element {
const [ isLoading, setIsLoading ] = useState( true );
const [ selectedTab, setSelectedTab ] = useState( '' );
const [ iamSettings, setIamSettings ] = useState( {} );
diff --git a/plugins/woocommerce/client/admin/client/marketplace/contexts/subscriptions-context.tsx b/plugins/woocommerce/client/admin/client/marketplace/contexts/subscriptions-context.tsx
index 3244685e65b..8c4b4778032 100644
--- a/plugins/woocommerce/client/admin/client/marketplace/contexts/subscriptions-context.tsx
+++ b/plugins/woocommerce/client/admin/client/marketplace/contexts/subscriptions-context.tsx
@@ -28,8 +28,8 @@ export const SubscriptionsContext =
createContext< SubscriptionsContextType >( defaultContext );
export function SubscriptionsContextProvider( props: {
- children: JSX.Element;
-} ): JSX.Element {
+ children: React.JSX.Element;
+} ): React.JSX.Element {
const [ subscriptions, setSubscriptions ] = useState<
Array< Subscription >
>( [] );