fix: remove defaultProps in prep for react 19 (#50266)

packages/js/components/changelog/50266-fix-remove-functional-component-default-props

@@ -0,0 +1,4 @@
+Significance: minor
+Type: dev
+
+Removed defaultProps from React functional components since they will be deprecated for React 19

packages/js/components/src/calendar/input.js

@@ -9,17 +9,17 @@ import { uniqueId, noop } from 'lodash';
 import PropTypes from 'prop-types';
 
 const DateInput = ( {
-	disabled,
+	disabled = false,
 	value,
 	onChange,
 	dateFormat,
 	label,
 	describedBy,
 	error,
-	onFocus,
+	onFocus = () => {},
-	onBlur,
+	onBlur = () => {},
-	onKeyDown,
+	onKeyDown = noop,
-	errorPosition,
+	errorPosition = 'bottom center',
 } ) => {
 	const classes = classnames( 'woocommerce-calendar__input', {
 		'is-empty': value.length === 0,
@@ -73,12 +73,4 @@ DateInput.propTypes = {
 	onKeyDown: PropTypes.func,
 };
 
-DateInput.defaultProps = {
-	disabled: false,
-	onFocus: () => {},
-	onBlur: () => {},
-	errorPosition: 'bottom center',
-	onKeyDown: noop,
-};
-
 export default DateInput;

packages/js/components/src/date/index.js

@@ -15,7 +15,12 @@ import { createElement } from '@wordpress/element';
  * @param {string} props.visibleFormat
  * @return {Object} -
  */
-const Date = ( { date, machineFormat, screenReaderFormat, visibleFormat } ) => {
+const Date = ( {
+	date,
+	machineFormat = 'Y-m-d H:i:s',
+	screenReaderFormat = 'F j, Y',
+	visibleFormat = 'Y-m-d',
+} ) => {
 	return (
 		<time dateTime={ formatDate( machineFormat, date ) }>
 			<span aria-hidden="true">
@@ -48,10 +53,4 @@ Date.propTypes = {
 	visibleFormat: PropTypes.string,
 };
 
-Date.defaultProps = {
-	machineFormat: 'Y-m-d H:i:s',
-	screenReaderFormat: 'F j, Y',
-	visibleFormat: 'Y-m-d',
-};
-
 export default Date;

packages/js/components/src/summary/index.js

@@ -22,7 +22,11 @@ import Menu from './menu';
  * @param {string} props.label
  * @return {Object} -
  */
-const SummaryList = ( { children, isDropdownBreakpoint, label } ) => {
+const SummaryList = ( {
+	children,
+	isDropdownBreakpoint,
+	label = __( 'Performance Indicators', 'woocommerce' ),
+} ) => {
 	const items = children( {} );
 	// We default to "one" because we can't have empty children.
 	const itemCount = Children.count( items ) || 1;
@@ -79,10 +83,6 @@ SummaryList.propTypes = {
 	label: PropTypes.string,
 };
 
-SummaryList.defaultProps = {
-	label: __( 'Performance Indicators', 'woocommerce' ),
-};
-
 export default withViewportMatch( {
 	isDropdownBreakpoint: '< large',
 } )( SummaryList );

packages/js/components/src/summary/number.js

@@ -39,18 +39,18 @@ import { Text } from '../experimental';
 const SummaryNumber = ( {
 	children,
 	delta,
-	href,
+	href = '',
-	hrefType,
+	hrefType = 'wc-admin',
-	isOpen,
+	isOpen = false,
 	label,
 	labelTooltipText,
 	onToggle,
-	prevLabel,
+	prevLabel = __( 'Previous period:', 'woocommerce' ),
 	prevValue,
-	reverseTrend,
+	reverseTrend = false,
-	selected,
+	selected = false,
 	value,
-	onLinkClickCallback,
+	onLinkClickCallback = noop,
 } ) => {
 	const liClasses = classnames( 'woocommerce-summary__item-container', {
 		'is-dropdown-button': onToggle,
@@ -238,14 +238,4 @@ SummaryNumber.propTypes = {
 	onLinkClickCallback: PropTypes.func,
 };
 
-SummaryNumber.defaultProps = {
-	href: '',
-	hrefType: 'wc-admin',
-	isOpen: false,
-	prevLabel: __( 'Previous period:', 'woocommerce' ),
-	reverseTrend: false,
-	selected: false,
-	onLinkClickCallback: noop,
-};
-
 export default SummaryNumber;

packages/js/components/src/timeline/index.js

@@ -13,9 +13,16 @@ import { createElement } from '@wordpress/element';
 import TimelineGroup from './timeline-group';
 import { sortByDateUsing, groupItemsUsing } from './util';
 
-const Timeline = ( props ) => {
+const Timeline = ( {
-	const { className, items, groupBy, orderBy, dateFormat, clockFormat } =
+	className = '',
-		props;
+	items = [],
+	groupBy = 'day',
+	orderBy = 'desc',
+	/* translators: PHP date format string used to display dates, see php.net/date. */
+	dateFormat = __( 'F j, Y', 'woocommerce' ),
+	/* translators: PHP clock format string used to display times, see php.net/date. */
+	clockFormat = __( 'g:ia', 'woocommerce' ),
+} ) => {
 	const timelineClassName = classnames( 'woocommerce-timeline', className );
 
 	// Early return in case no data was passed to the component.
@@ -111,16 +118,5 @@ Timeline.propTypes = {
 	clockFormat: PropTypes.string,
 };
 
-Timeline.defaultProps = {
-	className: '',
-	items: [],
-	groupBy: 'day',
-	orderBy: 'desc',
-	/* translators: PHP date format string used to display dates, see php.net/date. */
-	dateFormat: __( 'F j, Y', 'woocommerce' ),
-	/* translators: PHP clock format string used to display times, see php.net/date. */
-	clockFormat: __( 'g:ia', 'woocommerce' ),
-};
-
 export { orderByOptions, groupByOptions } from './util';
 export default Timeline;

packages/js/components/src/timeline/timeline-group.js

@@ -11,8 +11,12 @@ import { createElement } from '@wordpress/element';
 import TimelineItem from './timeline-item';
 import { sortByDateUsing } from './util';
 
-const TimelineGroup = ( props ) => {
+const TimelineGroup = ( {
-	const { group, className, orderBy, clockFormat } = props;
+	group = { title: '', items: [] },
+	className = '',
+	orderBy = 'desc',
+	clockFormat,
+} ) => {
 	const groupClassName = classnames(
 		'woocommerce-timeline-group',
 		className
@@ -102,13 +106,4 @@ TimelineGroup.propTypes = {
 	clockFormat: PropTypes.string,
 };
 
-TimelineGroup.defaultProps = {
-	className: '',
-	group: {
-		title: '',
-		items: [],
-	},
-	orderBy: 'desc',
-};
-
 export default TimelineGroup;

packages/js/components/src/timeline/timeline-item.js

@@ -6,9 +6,7 @@ import { format } from '@wordpress/date';
 import PropTypes from 'prop-types';
 import { createElement } from '@wordpress/element';
 
-const TimelineItem = ( props ) => {
+const TimelineItem = ( { item = {}, className = '', clockFormat } ) => {
-	const { item, className, clockFormat } = props;
-
 	const itemClassName = classnames( 'woocommerce-timeline-item', className );
 	const itemTimeString = format( clockFormat, item.date );
 
@@ -74,9 +72,4 @@ TimelineItem.propTypes = {
 	} ).isRequired,
 };
 
-TimelineItem.defaultProps = {
-	className: '',
-	item: {},
-};
-
 export default TimelineItem;

packages/js/components/src/view-more-list/index.js

@@ -17,7 +17,7 @@ import Tag from '../tag';
  * @param {Array}  props.items
  * @return {Object} -
  */
-const ViewMoreList = ( { items } ) => {
+const ViewMoreList = ( { items = [] } ) => {
 	return (
 		<Tag
 			className="woocommerce-view-more-list"
@@ -49,8 +49,4 @@ ViewMoreList.propTypes = {
 	items: PropTypes.arrayOf( PropTypes.node ),
 };
 
-ViewMoreList.defaultProps = {
-	items: [],
-};
-
 export default ViewMoreList;

plugins/woocommerce-admin/client/activity-panel/activity-panel.js

@@ -15,7 +15,7 @@ import {
 	useUserPreferences,
 	getVisibleTasks,
 } from '@woocommerce/data';
-import { getHistory, addHistoryListener } from '@woocommerce/navigation';
+import { addHistoryListener } from '@woocommerce/navigation';
 import { recordEvent } from '@woocommerce/tracks';
 import { useSlot } from '@woocommerce/experimental';
 import {
@@ -503,8 +503,4 @@ export const ActivityPanel = ( { isEmbedded, query } ) => {
 	);
 };
 
-ActivityPanel.defaultProps = {
-	getHistory,
-};
-
 export default ActivityPanel;

plugins/woocommerce-admin/client/activity-panel/panels/help.js

@@ -15,7 +15,7 @@ import {
 	SETTINGS_STORE_NAME,
 } from '@woocommerce/data';
 import { compose } from 'redux';
-import { recordEvent } from '@woocommerce/tracks';
+import { recordEvent as fallbackRecordEvent } from '@woocommerce/tracks';
 
 /**
  * Internal dependencies
@@ -359,15 +359,18 @@ function getListItems( props ) {
 	} ) );
 }
 
-export const HelpPanel = ( props ) => {
+export const HelpPanel = ( {
-	const { taskName } = props;
+	taskName,
+	recordEvent = fallbackRecordEvent,
+	...props
+} ) => {
 	useEffect( () => {
-		props.recordEvent( 'help_panel_open', {
+		recordEvent( 'help_panel_open', {
 			task_name: taskName || 'homescreen',
 		} );
-	}, [ taskName ] );
+	}, [ taskName, recordEvent ] );
 
-	const listItems = getListItems( props );
+	const listItems = getListItems( { taskName, recordEvent, ...props } );
 
 	return (
 		<Fragment>
@@ -382,10 +385,6 @@ export const HelpPanel = ( props ) => {
 	);
 };
 
-HelpPanel.defaultProps = {
-	recordEvent,
-};
-
 export default compose(
 	withSelect( ( select ) => {
 		const { getSettings } = select( SETTINGS_STORE_NAME );

plugins/woocommerce-admin/client/analytics/components/report-table/index.js

@@ -7,7 +7,7 @@ import { Fragment, useRef, useState } from '@wordpress/element';
 import { compose } from '@wordpress/compose';
 import { focus } from '@wordpress/dom';
 import { withDispatch, withSelect } from '@wordpress/data';
-import { get, noop, partial, uniq } from 'lodash';
+import { get, partial, uniq } from 'lodash';
 import { __, sprintf } from '@wordpress/i18n';
 import PropTypes from 'prop-types';
 import { STORE_KEY as CES_STORE_KEY } from '@woocommerce/customer-effort-score';
@@ -50,17 +50,23 @@ const ReportTable = ( props ) => {
 		getRowsContent,
 		getSummary,
 		isRequesting,
-		primaryData,
+		primaryData = {},
-		tableData,
+		tableData = {
+			items: {
+				data: [],
+				totalResults: 0,
+			},
+			query: {},
+		},
 		endpoint,
 		// These props are not used in the render function, but are destructured
 		// so they are not included in the `tableProps` variable.
 		// eslint-disable-next-line no-unused-vars
 		itemIdField,
-		// eslint-disable-next-line no-unused-vars
+		// eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
-		tableQuery,
+		tableQuery = {},
 		compareBy,
-		compareParam,
+		compareParam = 'filter',
 		searchBy,
 		labels = {},
 		...tableProps
@@ -249,7 +255,7 @@ const ReportTable = ( props ) => {
 	};
 
 	const onSearchChange = ( values ) => {
-		const { baseSearchQuery, addCesSurveyForCustomerSearch } = props;
+		const { baseSearchQuery = {}, addCesSurveyForCustomerSearch } = props;
 		// A comma is used as a separator between search terms, so we want to escape
 		// any comma they contain.
 		const searchTerms = values.map( ( v ) =>
@@ -553,22 +559,6 @@ ReportTable.propTypes = {
 	title: PropTypes.string.isRequired,
 };
 
-ReportTable.defaultProps = {
-	primaryData: {},
-	tableData: {
-		items: {
-			data: [],
-			totalResults: 0,
-		},
-		query: {},
-	},
-	tableQuery: {},
-	compareParam: 'filter',
-	downloadable: false,
-	onSearch: noop,
-	baseSearchQuery: {},
-};
-
 const EMPTY_ARRAY = [];
 const EMPTY_OBJECT = {};
 

plugins/woocommerce-admin/client/homescreen/activity-panel/orders/index.js

@@ -360,17 +360,8 @@ function OrdersPanel( { unreadOrdersCount, orderStatuses } ) {
 }
 
 OrdersPanel.propTypes = {
-	isError: PropTypes.bool,
-	isRequesting: PropTypes.bool,
 	unreadOrdersCount: PropTypes.number,
-	orders: PropTypes.array.isRequired,
 	orderStatuses: PropTypes.array,
 };
 
-OrdersPanel.defaultProps = {
-	orders: [],
-	isError: false,
-	isRequesting: false,
-};
-
 export default OrdersPanel;

plugins/woocommerce-admin/client/marketing/coupons/knowledge-base/index.js

@@ -24,8 +24,11 @@ const KnowledgeBase = ( {
 	posts,
 	isLoading,
 	error,
-	title,
+	title = __( 'WooCommerce knowledge base', 'woocommerce' ),
-	description,
+	description = __(
+		'Learn the ins and outs of successful marketing from the experts at WooCommerce.',
+		'woocommerce'
+	),
 	category,
 } ) => {
 	const [ page, updatePage ] = useState( 1 );
@@ -227,14 +230,6 @@ KnowledgeBase.propTypes = {
 	category: PropTypes.string,
 };
 
-KnowledgeBase.defaultProps = {
-	title: __( 'WooCommerce knowledge base', 'woocommerce' ),
-	description: __(
-		'Learn the ins and outs of successful marketing from the experts at WooCommerce.',
-		'woocommerce'
-	),
-};
-
 export { KnowledgeBase };
 
 export default compose(

plugins/woocommerce-admin/client/marketing/coupons/recommended-extensions/index.js

@@ -19,8 +19,11 @@ import Card from '../card';
 const RecommendedExtensions = ( {
 	extensions,
 	isLoading,
-	title,
+	title = __( 'Recommended extensions', 'woocommerce' ),
-	description,
+	description = __(
+		'Great marketing requires the right tools. Take your marketing to the next level with our recommended marketing extensions.',
+		'woocommerce'
+	),
 	category,
 } ) => {
 	if ( extensions.length === 0 && ! isLoading ) {
@@ -95,14 +98,6 @@ RecommendedExtensions.propTypes = {
 	category: PropTypes.string,
 };
 
-RecommendedExtensions.defaultProps = {
-	title: __( 'Recommended extensions', 'woocommerce' ),
-	description: __(
-		'Great marketing requires the right tools. Take your marketing to the next level with our recommended marketing extensions.',
-		'woocommerce'
-	),
-};
-
 export { RecommendedExtensions };
 export { default as RecommendedExtensionsPlaceholder } from './placeholder';
 

plugins/woocommerce-blocks/assets/js/editor-components/products-control/index.js

@@ -27,10 +27,10 @@ const ProductsControl = ( {
 	error,
 	onChange,
 	onSearch,
-	selected,
+	selected = [],
-	products,
+	products = [],
-	isLoading,
+	isLoading = true,
-	isCompact,
+	isCompact = false,
 } ) => {
 	const messages = {
 		clear: __( 'Clear all products', 'woocommerce' ),
@@ -90,11 +90,4 @@ ProductsControl.propTypes = {
 	isLoading: PropTypes.bool,
 };
 
-ProductsControl.defaultProps = {
-	selected: [],
-	products: [],
-	isCompact: false,
-	isLoading: true,
-};
-
 export default withSearchedProducts( ProductsControl );

plugins/woocommerce/changelog/50266-fix-remove-functional-component-default-props

@@ -0,0 +1,4 @@
+Significance: minor
+Type: dev
+
+Removed defaultProps from React functional components since they will be deprecated for React 19