enactjs · MikyungKim · May 22, 2024 · May 16, 2024 · May 17, 2024 · May 20, 2024
diff --git a/packages/core/package.json b/packages/core/package.json
@@ -36,9 +36,9 @@
     "invariant": "^2.2.4",
     "prop-types": "^15.8.1",
     "ramda": "^0.29.1",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-is": "^18.2.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-is": "^18.3.1",
     "warning": "^4.0.3"
   }
 }
diff --git a/packages/i18n/package.json b/packages/i18n/package.json
@@ -51,8 +51,8 @@
     "@enact/core": "^4.9.0-alpha.1",
     "prop-types": "^15.8.1",
     "ramda": "^0.29.1",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "xhr": "^2.6.0"
   },
   "peerDependencies": {

diff --git a/packages/sampler/package.json b/packages/sampler/package.json
@@ -28,7 +28,7 @@
     "classnames": "^2.5.1",
     "ilib": "14.19.0",
     "prop-types": "^15.8.1",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
   }
 }
diff --git a/packages/spotlight/SpotlightContainerDecorator/SpotlightContainerDecorator.js b/packages/spotlight/SpotlightContainerDecorator/SpotlightContainerDecorator.js
@@ -180,7 +180,7 @@ const SpotlightContainerDecorator = hoc(defaultConfig, (config, Wrapped) => {
 
 	// eslint-disable-next-line no-shadow
 	function SpotlightContainerDecorator (props) {
-		const {spotlightDisabled, spotlightId, spotlightMuted, spotlightRestrict, ...rest} = props;
+		const {spotlightDisabled = false, spotlightId, spotlightMuted = false, spotlightRestrict = 'self-first', ...rest} = props;
 
 		const spotlightContainer = useSpotlightContainer({
 			id: spotlightId,
@@ -250,12 +250,6 @@ const SpotlightContainerDecorator = hoc(defaultConfig, (config, Wrapped) => {
 		spotlightRestrict: PropTypes.oneOf(['none', 'self-first', 'self-only'])
 	};
 
-	SpotlightContainerDecorator.defaultProps = {
-		spotlightDisabled: false,
-		spotlightMuted: false,
-		spotlightRestrict: 'self-first'
-	};
-
 	// Wrapping with a React.Component to maintain ref support
 	return class SpotlightContainerDecoratorAdapter extends Component {
 		render () {

diff --git a/packages/spotlight/package.json b/packages/spotlight/package.json
@@ -29,8 +29,8 @@
     "classnames": "^2.5.1",
     "prop-types": "^15.8.1",
     "ramda": "^0.29.1",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "warning": "^4.0.3"
   }
 }
diff --git a/packages/ui/Repeater/Repeater.js b/packages/ui/Repeater/Repeater.js
@@ -124,7 +124,8 @@ const RepeaterBase = kind({
 				}
 				if (indexProp) props[indexProp] = index;
 
-				return <Component {...props} />;
+				const {key, ...rest} = {...props};
+				return <Component key={key} {...rest} />;
 			});
 		}
 	},

diff --git a/packages/ui/Scroller/Scroller.js b/packages/ui/Scroller/Scroller.js
@@ -18,6 +18,24 @@ import ScrollerBase from './UiScrollerBase';
 
 const nop = () => {};
 
+const scrollerDefaultProps = {
+	cbScrollTo: nop,
+	direction: 'both',
+	horizontalScrollbar: 'auto',
+	noScrollByDrag: false,
+	noScrollByWheel: false,
+	onScroll: nop,
+	onScrollStart: nop,
+	onScrollStop: nop,
+	overscrollEffectOn: {
+		drag: false,
+		pageKey: false,
+		wheel: false
+	},
+	scrollMode: 'translate',
+	verticalScrollbar: 'auto'
+};
+
 /**
  * An unstyled scroller.
  *
@@ -35,6 +53,8 @@ const nop = () => {};
 const Scroller = (props) => {
 	// Hooks
 
+	const scrollerProps = Object.assign({}, scrollerDefaultProps, props);
+
 	const {
 		scrollContentHandle,
 		scrollContentWrapper: ScrollContentWrapper,
@@ -48,7 +68,7 @@ const Scroller = (props) => {
 		scrollContentProps,
 		verticalScrollbarProps,
 		horizontalScrollbarProps
-	} = useScroll(props);
+	} = useScroll(scrollerProps);
 
 	// Return
 
@@ -257,23 +277,7 @@ Scroller.propTypes = /** @lends ui/Scroller.Scroller.prototype */ {
 	verticalScrollbar: PropTypes.oneOf(['auto', 'visible', 'hidden'])
 };
 
-Scroller.defaultProps = {
-	cbScrollTo: nop,
-	direction: 'both',
-	horizontalScrollbar: 'auto',
-	noScrollByDrag: false,
-	noScrollByWheel: false,
-	onScroll: nop,
-	onScrollStart: nop,
-	onScrollStop: nop,
-	overscrollEffectOn: {
-		drag: false,
-		pageKey: false,
-		wheel: false
-	},
-	scrollMode: 'translate',
-	verticalScrollbar: 'auto'
-};
+Scroller.defaultPropValues = scrollerDefaultProps;
 
 export default Scroller;
 export {

diff --git a/packages/ui/Slottable/tests/Slottable-specs.js b/packages/ui/Slottable/tests/Slottable-specs.js
@@ -240,18 +240,14 @@ describe('Slottable Specs', () => {
 	});
 
 	test('should allow downstream component to have default value for unset slot', () => {
-		function ComponentBase ({a}) {
+		function ComponentBase ({a = 'Default A'}) {
 			return (
 				<div data-testid="slottable">
 					{a}
 				</div>
 			);
 		}
 
-		ComponentBase.defaultProps = {
-			a: 'Default A'
-		};
-
 		const Component = Slottable({slots: ['a']}, ComponentBase);
 
 		render(<Component />);

diff --git a/packages/ui/Toggleable/Toggleable.js b/packages/ui/Toggleable/Toggleable.js
@@ -152,13 +152,14 @@ const ToggleableHOC = hoc(defaultConfig, (config, Wrapped) => {
 		)
 	};
 
-	function Toggleable (props) {
+	function Toggleable ({disabled = false, ...rest}) {
+		const props = {disabled, ...rest};
 		const updated = {...props};
 		const propSelected = props[prop];
 
 		const hook = useToggle({
 			defaultSelected: props[defaultPropKey],
-			disabled: props.disabled,
+			disabled,
 			onToggle: (ev) => forwardCustom(toggle, adapter)(ev, props),
 			prop,
 
@@ -253,10 +254,6 @@ const ToggleableHOC = hoc(defaultConfig, (config, Wrapped) => {
 		[toggle]: PropTypes.func
 	};
 
-	Toggleable.defaultProps = {
-		disabled: false
-	};
-
 	return Toggleable;
 });
 

diff --git a/packages/ui/Touchable/Touchable.js b/packages/ui/Touchable/Touchable.js
@@ -109,7 +109,8 @@ const Touchable = hoc(defaultConfig, (config, Wrapped) => {
 
 	// eslint-disable-next-line no-shadow
 	const Touchable = forwardRef((props, ref) => {
-		const {configForHook, propsForWrapped} = selectProps(props);
+		const {disabled = false, noResume = false, ...rest} = props;
+		const {configForHook, propsForWrapped} = selectProps({disabled, noResume, ...rest});
 		const hook = useTouch({getActive: !!activeProp, ...configForHook});
 
 		Object.assign(propsForWrapped, hook.handlers);
@@ -369,11 +370,6 @@ const Touchable = hoc(defaultConfig, (config, Wrapped) => {
 		pinchConfig: pinchConfigPropType
 	};
 
-	Touchable.defaultProps = {
-		disabled: false,
-		noResume: false
-	};
-
 	Touchable.displayName = 'Touchable';
 
 	return Touchable;

diff --git a/packages/ui/VirtualList/VirtualList.js b/packages/ui/VirtualList/VirtualList.js
@@ -21,6 +21,25 @@ import {gridListItemSizeShape, itemSizesShape, VirtualListBasic} from './Virtual
 
 const nop = () => {};
 
+const virtualListDefaultProps = {
+	cbScrollTo: nop,
+	direction: 'vertical',
+	horizontalScrollbar: 'auto',
+	noScrollByDrag: false,
+	noScrollByWheel: false,
+	onScroll: nop,
+	onScrollStart: nop,
+	onScrollStop: nop,
+	overscrollEffectOn: {
+		drag: false,
+		pageKey: false,
+		wheel: false
+	},
+	role: 'list',
+    	scrollMode: 'translate',
+	verticalScrollbar: 'auto'
+};
+
 /**
  * An unstyled scrollable virtual list component with touch support.
  *
@@ -33,6 +52,8 @@ const nop = () => {};
 const VirtualList = (props) => {
 	// Hooks
 
+	const virtualListProps = Object.assign({}, virtualListDefaultProps, props);
+
 	const {
 		scrollContentHandle,
 		scrollContentWrapper: ScrollContentWrapper,
@@ -46,7 +67,7 @@ const VirtualList = (props) => {
 		scrollContentProps,
 		verticalScrollbarProps,
 		horizontalScrollbarProps
-	} = useScroll(props);
+	} = useScroll(virtualListProps);
 
 	// Render
 
@@ -276,7 +297,9 @@ VirtualList.propTypes = /** @lends ui/VirtualList.VirtualList.prototype */ {
 	verticalScrollbar: PropTypes.oneOf(['auto', 'visible', 'hidden'])
 };
 
-VirtualList.defaultProps = {
+VirtualList.defaultPropValues = virtualListDefaultProps;
+
+const virtualGridListDefaultProps = {
 	cbScrollTo: nop,
 	direction: 'vertical',
 	horizontalScrollbar: 'auto',
@@ -305,6 +328,8 @@ VirtualList.defaultProps = {
  * @public
  */
 const VirtualGridList = (props) => {
+	const virtualGridListProps = Object.assign({}, virtualGridListDefaultProps, props);
+
 	const {
 		scrollContentHandle,
 		scrollContentWrapper: ScrollContentWrapper,
@@ -318,7 +343,7 @@ const VirtualGridList = (props) => {
 		scrollContentProps,
 		verticalScrollbarProps,
 		horizontalScrollbarProps
-	} = useScroll(props);
+	} = useScroll(virtualGridListProps);
 
 	return (
 		<ResizeContext.Provider {...resizeContextProps}>
@@ -546,24 +571,7 @@ VirtualGridList.propTypes = /** @lends ui/VirtualList.VirtualGridList.prototype
 	verticalScrollbar: PropTypes.oneOf(['auto', 'visible', 'hidden'])
 };
 
-VirtualGridList.defaultProps = {
-	cbScrollTo: nop,
-	direction: 'vertical',
-	horizontalScrollbar: 'auto',
-	noScrollByDrag: false,
-	noScrollByWheel: false,
-	onScroll: nop,
-	onScrollStart: nop,
-	onScrollStop: nop,
-	overscrollEffectOn: {
-		drag: false,
-		pageKey: false,
-		wheel: false
-	},
-	role: 'list',
-	scrollMode: 'translate',
-	verticalScrollbar: 'auto'
-};
+VirtualGridList.defaultPropValues = virtualGridListDefaultProps;
 
 export default VirtualList;
 export {

diff --git a/packages/ui/package.json b/packages/ui/package.json
@@ -38,9 +38,9 @@
     "invariant": "^2.2.4",
     "prop-types": "^15.8.1",
     "ramda": "^0.29.1",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-is": "^18.2.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-is": "^18.3.1",
     "warning": "^4.0.3"
   }
 }
diff --git a/packages/ui/useScroll/Scrollbar.js b/packages/ui/useScroll/Scrollbar.js
@@ -125,7 +125,8 @@ const useScrollbar = (props) => {
  * @ui
  * @private
  */
-const Scrollbar = memo((props) => {
+const Scrollbar = memo(({corner = false, css = componentCss, minThumbSize = 18, vertical = true, ...rest}) => {
+	const props = {corner, css, minThumbSize, vertical, ...rest};
 	const {
 		restProps,
 		scrollbarProps,
@@ -197,13 +198,6 @@ Scrollbar.propTypes = /** @lends ui/useScroll.Scrollbar.prototype */ {
 	vertical: PropTypes.bool
 };
 
-Scrollbar.defaultProps = {
-	corner: false,
-	css: componentCss,
-	minThumbSize: 18,
-	vertical: true
-};
-
 export default Scrollbar;
 export {
 	Scrollbar,

diff --git a/packages/ui/useScroll/ScrollbarTrack.js b/packages/ui/useScroll/ScrollbarTrack.js
@@ -14,7 +14,7 @@ import css from './ScrollbarTrack.module.less';
  */
 const ScrollbarTrack = forwardRef((props, ref) => {
 	const
-		{vertical, ...rest} = props,
+		{vertical = true, ...rest} = props,
 		className = classNames(css.scrollbarTrack, vertical ? css.vertical : null);
 
 	return <div {...rest} className={className} ref={ref} />;
@@ -31,10 +31,6 @@ ScrollbarTrack.propTypes = /** @lends ui/useScroll.ScrollbarTrack.prototype */ {
 	vertical: PropTypes.bool
 };
 
-ScrollbarTrack.defaultProps = {
-	vertical: true
-};
-
 const MemoizedScrollbarTrack = memo(ScrollbarTrack);
 
 MemoizedScrollbarTrack.displayName = 'ui:ScrollbarTrack';

diff --git a/packages/webos/package.json b/packages/webos/package.json
@@ -34,7 +34,7 @@
   "dependencies": {
     "@enact/core": "^4.9.0-alpha.1",
     "prop-types": "^15.8.1",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
   }
 }