WRQ-19328: Fix React 18.3 warnings in sandstone

ColorPicker/ColorPicker.js

@@ -272,11 +272,6 @@ const ColorPickerBase = kind({
 		text: PropTypes.string
 	},
 
-	defaultProps: {
-		disabled: false,
-		popupOpen: false
-	},
-
 	handlers: {
 		handleClosePopup: (ev, {onTogglePopup}) => {
 			onTogglePopup();
@@ -293,7 +288,7 @@ const ColorPickerBase = kind({
 		publicClassNames: true
 	},
 
-	render: ({color, colorHandler, css, disabled, handleClosePopup, handleOpenPopup, popupOpen, presetColors, text, ...rest}) => {
+	render: ({color, colorHandler, css, disabled = false, handleClosePopup, handleOpenPopup, popupOpen = false, presetColors, text, ...rest}) => {
 		delete rest.onTogglePopup;
 
 		const CloseIcon = useCallback((props) => <Icon {...props} css={css} />, [css]);

Dropdown/DropdownList.js

@@ -118,11 +118,13 @@ const DropdownListBase = kind({
 				child = {children: child};
 			}
 			const data = child.children;
+			const {key, ...restChild} = {...child};
 
 			return (
 				<Item
 					{...rest}
-					{...child}
+					{...restChild}
+					key={key}
 					slotAfter={slotAfter}
 					data-selected={isSelected}
 					// eslint-disable-next-line react/jsx-no-bind

PageViews/PageViewsRouter.js

@@ -29,7 +29,7 @@
 		children,
 		componentRef,
 		'data-spotlight-id': spotlightId,
-		index,
+		index = 0,
 		onTransition,
 		onWillTransition,
 		rtl,
@@ -125,10 +125,6 @@
 		rtl: PropTypes.bool
 	};
 
-	PageViewsProvider.defaultProps = {
-		index: 0
-	};
-
 	return PageViewsProvider;
 }
 

Scroller/Scroller.js

@@ -39,6 +39,29 @@ const nop = () => {};
 const SpottableDiv = Spottable('div');
 let scrollerId = 0;
 
+const scrollerDefaultProps = {
+	'data-spotlight-container-disabled': false,
+	cbScrollTo: nop,
+	direction: 'both',
+	fadeOut: false,
+	focusableScrollbar: false,
+	horizontalScrollbar: 'auto',
+	noScrollByDrag: false,
+	noScrollByWheel: false,
+	onScroll: nop,
+	onScrollStart: nop,
+	onScrollStop: nop,
+	overscrollEffectOn: {
+		arrowKey: false,
+		drag: true,
+		pageKey: false,
+		track: false,
+		wheel: true
+	},
+	scrollMode: 'native',
+	verticalScrollbar: 'auto'
+};
+
 /**
  * A Sandstone-styled Scroller, useScroll applied.
  *
@@ -53,7 +76,10 @@ let scrollerId = 0;
  * @ui
  * @public
  */
-let Scroller = ({'aria-label': ariaLabel, hoverToScroll, ...rest}) => {
+let Scroller = (props) => {
+	const scrollerProps = Object.assign({}, scrollerDefaultProps, props);
+	const {'aria-label': ariaLabel, hoverToScroll, ...rest} = scrollerProps;
+
 	const id = `scroller_${++scrollerId}_content`;
 
 	// Hooks
@@ -452,28 +478,7 @@ Scroller = Skinnable(
 	)
 );
 
-Scroller.defaultProps = {
-	'data-spotlight-container-disabled': false,
-	cbScrollTo: nop,
-	direction: 'both',
-	fadeOut: false,
-	focusableScrollbar: false,
-	horizontalScrollbar: 'auto',
-	noScrollByDrag: false,
-	noScrollByWheel: false,
-	onScroll: nop,
-	onScrollStart: nop,
-	onScrollStop: nop,
-	overscrollEffectOn: {
-		arrowKey: false,
-		drag: true,
-		pageKey: false,
-		track: false,
-		wheel: true
-	},
-	scrollMode: 'native',
-	verticalScrollbar: 'auto'
-};
+Scroller.defaultPropValues = scrollerDefaultProps;
 
 export default Scroller;
 export {

Slider/Slider.js

@@ -48,6 +48,17 @@ import {
 
 import componentCss from './Slider.module.less';
 
+const sliderDefaultProps = {
+	activateOnSelect: false,
+	active: false,
+	disabled: false,
+	keyFrequency: [1],
+	max: 100,
+	min: 0,
+	step: 1,
+	wheelInterval: 0
+};
+
 /**
  * Range-selection input component.
  *
@@ -59,20 +70,21 @@ import componentCss from './Slider.module.less';
  * @public
  */
 const SliderBase = (props) => {
-	const {active, className, css, disabled, focused, keyFrequency, showAnchor, ...rest} = props;
+	const sliderProps = Object.assign({}, sliderDefaultProps, props);
+	const {active, className, css, disabled, focused, keyFrequency, showAnchor, ...rest} = sliderProps;
 
 	validateSteppedOnce(p => p.knobStep, {
 		component: 'Slider',
 		stepName: 'knobStep',
 		valueName: 'max'
-	})(props);
+	})(sliderProps);
 
 	const step = validateSteppedOnce(p => p.step, {
 		component: 'Slider',
 		valueName: 'max'
-	})(props);
+	})(sliderProps);
 
-	const tooltip = props.tooltip === true ? ProgressBarTooltip : props.tooltip;
+	const tooltip = sliderProps.tooltip === true ? ProgressBarTooltip : sliderProps.tooltip;
 
 	const spotlightAccelerator = useRef();
 	const ref = useRef();
@@ -101,7 +113,7 @@ const SliderBase = (props) => {
 			forKey('enter'),
 			forward('onActivate')
 		)
-	}, props, spotlightAccelerator);
+	}, sliderProps, spotlightAccelerator);
 
 	const nativeEventHandlers = useHandlers({
 		onWheel: handle(
@@ -113,7 +125,7 @@ const SliderBase = (props) => {
 				handleDecrementByWheel
 			])
 		)
-	}, props, context);
+	}, sliderProps, context);
 
 	// if the props includes a css map, merge them together
 	let mergedCss = usePublicClassNames({componentCss, customCss: css, publicClassNames: true});
@@ -403,17 +415,6 @@ SliderBase.propTypes = /** @lends sandstone/Slider.SliderBase.prototype */ {
 	wheelInterval: PropTypes.number
 };
 
-SliderBase.defaultProps = {
-	activateOnSelect: false,
-	active: false,
-	disabled: false,
-	keyFrequency: [1],
-	max: 100,
-	min: 0,
-	step: 1,
-	wheelInterval: 0
-};
-
 /**
  * Sandstone-specific slider behaviors to apply to {@link sandstone/Slider.SliderBase|SliderBase}.
  *

Sprite/Sprite.js

@@ -201,26 +201,13 @@
 		width: PropTypes.number
 	},
 
-	defaultProps: {
-		columns: 1,
-		duration: 1000,
-		height: 120,
-		iterations: Infinity,
-		offsetLeft: 0,
-		offsetTop: 0,
-		orientation: 'horizontal',
-		paused: false,
-		rows: 1,
-		width: 120
-	},
-
 	styles: {
 		css,
 		className: 'sprite'
 	},
 
 	computed: {
-		style: ({offsetTop, offsetLeft, rows, columns, height, width, style}) => ({
+		style: ({offsetTop = 0, offsetLeft = 0, rows = 1, columns = 1, height = 120, width = 120, style}) => ({
 			...style,
 			'--sand-sprite-offset-top': scaleToRem(offsetTop),
 			'--sand-sprite-offset-left': scaleToRem(offsetLeft),
@@ -232,17 +219,17 @@
 	},
 
 	render: ({
-		columns,
-		duration,
-		height,
-		iterations,
+		columns = 1,
+		duration = 1000,
+		height = 120,
+		iterations = Infinity,
 		onSpriteAnimation,
-		orientation,
-		paused,
-		rows,
+		orientation = 'horizontal',
+		paused = false,
+		rows = 1,
 		stopped,
 		src,
-		width,
+		width = 120,
 		...rest
 	}) => {
 		delete rest.offsetTop;
@@ -309,7 +296,7 @@
 						{
 							easing: `steps(${frameCount}, end)`,
 							duration,
-							iterations
+							iterations: iterations || Infinity
 						}
 					);
 
@@ -363,6 +350,9 @@
 	}
 });
 
+SpriteBase.defaultPropValues = {
+	iterations: Infinity
+};
 
 export default SpriteBase;
 export {

VirtualList/VirtualList.js

@@ -23,6 +23,31 @@ import {useThemeVirtualList} from './useThemeVirtualList';
 
 const nop = () => {};
 
+const virtualListDefaultProps = {
+	'data-spotlight-container-disabled': false,
+	cbScrollTo: nop,
+	direction: 'vertical',
+	horizontalScrollbar: 'auto',
+	noAffordance: false,
+	noScrollByDrag: false,
+	noScrollByWheel: false,
+	onScroll: nop,
+	onScrollStart: nop,
+	onScrollStop: nop,
+	overscrollEffectOn: {
+		arrowKey: false,
+		drag: true,
+		pageKey: false,
+		track: false,
+		wheel: true
+	},
+	pageScroll: false,
+	role: 'list',
+	scrollMode: 'native',
+	verticalScrollbar: 'auto',
+	wrap: false
+};
+
 /**
  * A Sandstone-styled scrollable and spottable virtual list component.
  *
@@ -32,7 +57,10 @@ const nop = () => {};
  * @ui
  * @public
  */
-let VirtualList = ({itemSize, hoverToScroll, ...rest}) => {
+let VirtualList = (props) => {
+	const virtualListProps = Object.assign({}, virtualListDefaultProps, props);
+	const {itemSize, hoverToScroll, ...rest} = virtualListProps;
+
 	const itemSizeProps = itemSize && itemSize.minSize ?
 		{
 			itemSize: itemSize.minSize,
@@ -488,7 +516,9 @@ VirtualList = Skinnable(
 	)
 );
 
-VirtualList.defaultProps = {
+VirtualList.defaultPropValues = virtualListDefaultProps;
+
+const virtualGridListDefaultProps = {
 	'data-spotlight-container-disabled': false,
 	cbScrollTo: nop,
 	direction: 'vertical',
@@ -522,7 +552,10 @@ VirtualList.defaultProps = {
  * @ui
  * @public
  */
-let VirtualGridList = ({hoverToScroll, ...rest}) => {
+let VirtualGridList = (props) => {
+	const virtualGridListProps = Object.assign({}, virtualGridListDefaultProps, props);
+	const {hoverToScroll, ...rest} = virtualGridListProps;
+
 	const {
 		// Variables
 		scrollContentWrapper: ScrollContentWrapper,
@@ -967,30 +1000,7 @@ VirtualGridList = Skinnable(
 	)
 );
 
-VirtualGridList.defaultProps = {
-	'data-spotlight-container-disabled': false,
-	cbScrollTo: nop,
-	direction: 'vertical',
-	horizontalScrollbar: 'auto',
-	noAffordance: false,
-	noScrollByDrag: false,
-	noScrollByWheel: false,
-	onScroll: nop,
-	onScrollStart: nop,
-	onScrollStop: nop,
-	overscrollEffectOn: {
-		arrowKey: false,
-		drag: true,
-		pageKey: false,
-		track: false,
-		wheel: true
-	},
-	pageScroll: false,
-	role: 'list',
-	scrollMode: 'native',
-	verticalScrollbar: 'auto',
-	wrap: false
-};
+VirtualGridList.defaultPropValues = virtualGridListDefaultProps;
 
 export default VirtualList;
 export {