Merge branch 'develop' into poc/WRR-287

.travis.yml

@@ -1,7 +1,8 @@
 dist: jammy
 language: node_js
 node_js:
-    - 21
+    - lts/*
+    - node
 sudo: false
 before_install:
     - sudo apt-get install build-essential libcairo2-dev libpango1.0-dev libjpeg-dev libgif-dev librsvg2-dev
@@ -13,6 +14,7 @@ install:
     - npm install
     - npm link
     - popd
+    - npm uninstall @enact/ui-test-utils --prefix packages/i18n
     - npm install
     - npm run bootstrap
     - npm run interlink

packages/sampler/package.json

@@ -16,21 +16,19 @@
     "@enact/core": "^5.0.0-alpha.3",
     "@enact/i18n": "^5.0.0-alpha.3",
     "@enact/spotlight": "^5.0.0-alpha.3",
-    "@enact/storybook-utils": "^6.0.0-rc.1",
+    "@enact/storybook-utils": "^6.0.0-rc.3",
     "@enact/ui": "^5.0.0-alpha.3",
     "@enact/webos": "^5.0.0-alpha.3",
-    "@storybook/addon-docs": "^8.2.4",
-    "@storybook/csf-tools": "^8.2.4",
-    "@storybook/manager-api": "^8.2.4",
-    "@storybook/react": "^8.2.4",
-    "@storybook/react-webpack5": "^8.2.4",
-    "@storybook/theming": "^8.2.4",
-    "babel-loader": "^9.2.1",
+    "@storybook/addon-docs": "^8.4.5",
+    "@storybook/csf-tools": "^8.4.5",
+    "@storybook/manager-api": "^8.4.5",
+    "@storybook/react-webpack5": "^8.4.5",
+    "@storybook/theming": "^8.4.5",
     "classnames": "^2.5.1",
     "ilib": "^14.20.0",
     "prop-types": "^15.8.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "storybook": "^8.2.4"
+    "storybook": "^8.4.5"
   }
 }

packages/spotlight/CHANGELOG.md

@@ -2,6 +2,12 @@
 
 The following is a curated list of changes in the Enact spotlight module, newest changes on the top.
 
+## [unreleased]
+
+### Added
+
+- `spotlight` an optional `options.preventScroll` parameter to `focus` function to prevent scrolling by focus
+
 ## [5.0.0-alpha.3] - 2024-12-02
 
 No significant changes.

packages/spotlight/src/spotlight.js

@@ -197,7 +197,7 @@ const Spotlight = (function () {
 		}
 	}
 
-	function focusElement (elem, containerIds, fromPointer) {
+	function focusElement (elem, containerIds, fromPointer, preventScroll) {
 		if (!elem) {
 			return false;
 		}
@@ -214,7 +214,7 @@ const Spotlight = (function () {
 			return true;
 		}
 
-		const focusOptions = isWithinOverflowContainer(elem, containerIds) ? {preventScroll: true} : null;
+		const focusOptions = preventScroll || isWithinOverflowContainer(elem, containerIds) ? {preventScroll: true} : null;
 
 		let silentFocus = function () {
 			elem.focus(focusOptions);
@@ -750,16 +750,19 @@ const Spotlight = (function () {
 		 * @param {String|Node} [elem] The spotlight ID or selector for either a spottable
 		 *  component or a spotlight container, or spottable node. If not supplied, the default
 		 *  container will be focused.
-		 * @param {Object} [containerOption] The object including `enterTo` and `toOuterContainer`.
-		 *  It works when the first parameter `elem` is either a spotlight container ID or a spotlight container node.
-		 * @param {('last-focused'|'default-element'|'topmost')} [containerOption.enterTo] Specifies preferred
+		 * @param {Object} [options] The object including `enterTo`, `toOuterContainer`, and `preventScroll`.
+		 *  `enterTo` and `toOuterContainer` work when the first parameter `elem` is either
+		 *  a spotlight container ID or a spotlight container node.
+		 * @param {('last-focused'|'default-element'|'topmost')} [options.enterTo] Specifies preferred
 		 *  `enterTo` configuration.
-		 * @param {Boolean} [containerOption.toOuterContainer] If the proper target is not found, search one
+		 * @param {Boolean} [options.toOuterContainer] If the proper target is not found, search one
 		 *  recursively to outer container.
+		 * @param {Boolean} [options.preventScroll] Prevents the focused element from an automatic scrolling
+		 *  into view after focusing the element.
 		 * @returns {Boolean} `true` if focus successful, `false` if not.
 		 * @public
 		 */
-		focus: function (elem, containerOption = {}) {
+		focus: function (elem, options = {}) {
 			let target = elem;
 			let wasContainerId = false;
 			let currentContainerNode = null;
@@ -768,7 +771,7 @@ const Spotlight = (function () {
 				target = getTargetByContainer();
 			} else if (typeof elem === 'string') {
 				if (getContainerConfig(elem)) {
-					target = getTargetByContainer(elem, containerOption.enterTo);
+					target = getTargetByContainer(elem, options.enterTo);
 					wasContainerId = true;
 					currentContainerNode = getContainerNode(elem);
 				} else if (/^[\w\d-]+$/.test(elem)) {
@@ -778,14 +781,14 @@ const Spotlight = (function () {
 					target = getTargetBySelector(elem);
 				}
 			} else if (isContainer(elem)) {
-				target = getTargetByContainer(getContainerId(elem), containerOption.enterTo);
+				target = getTargetByContainer(getContainerId(elem), options.enterTo);
 				currentContainerNode = elem;
 			}
 
 			const nextContainerIds = getContainersForNode(target);
 			const nextContainerId = last(nextContainerIds);
 			if (isNavigable(target, nextContainerId, true)) {
-				const focused = focusElement(target, nextContainerIds);
+				const focused = focusElement(target, nextContainerIds, false, options.preventScroll);
 
 				if (!focused && wasContainerId) {
 					setLastContainer(elem);
@@ -798,11 +801,11 @@ const Spotlight = (function () {
 				setLastContainer(elem);
 			}
 
-			if (containerOption.toOuterContainer && currentContainerNode) {
+			if (options.toOuterContainer && currentContainerNode) {
 				const outerContainer = getContainersForNode(currentContainerNode.parentElement).pop();
 
 				if (outerContainer) {
-					return this.focus(outerContainer, containerOption);
+					return this.focus(outerContainer, options);
 				}
 			}
 

packages/spotlight/src/tests/spotlight-specs.js

@@ -138,6 +138,16 @@ describe('Spotlight', () => {
 				expect(fn).toBeCalled();
 			}
 		));
+
+		test('should pass preventScroll option', testScenario(
+			scenarios.complexTree,
+			(root) => {
+				const fn = mockFocus(root.querySelector('[data-spotlight-id="s1"]'));
+				Spotlight.focus('s1', {preventScroll: true});
+
+				expect(fn).toHaveBeenCalledWith({preventScroll: true});
+			}
+		));
 	});
 
 	describe('#move', () => {

packages/ui/CHANGELOG.md

@@ -2,6 +2,12 @@
 
 The following is a curated list of changes in the Enact ui module, newest changes on the top.
 
+## [unreleased]
+
+### Fixed
+
+- `ui/VirtualList` to not abnormally scroll when `dataSize` and `itemSizes` changed
+
 ## [5.0.0-alpha.3] - 2024-12-02
 
 ### Fixed
@@ -1446,7 +1452,6 @@ libraries.
 
 - Renamed `ui/Group` prop `select` to `childSelect` and added prop `select` to support selection types
 
-
 ## [1.0.0-alpha.2] - 2016-10-21
 
 This version includes a lot of refactoring from the previous release. Developers need to switch to the new enact-dev command-line tool.

packages/ui/VirtualList/VirtualListBasic.js

@@ -407,7 +407,7 @@ class VirtualListBasic extends Component {
 			prevProps.overhang !== this.props.overhang ||
 			prevProps.spacing !== this.props.spacing ||
 			!equals(prevProps.itemSize, this.props.itemSize) ||
-			!shallowEqual(prevProps.itemSizes, this.props.itemSizes)
+			(!this.hasDataSizeChanged && !shallowEqual(prevProps.itemSizes, this.props.itemSizes))
 		) {
 			const {x, y} = this.getXY(this.scrollPosition, 0);
 

packages/ui/styles/mixins.less

@@ -154,9 +154,7 @@
 }
 
 .vendor-opacity(@opacity) {
-	@opacity-ie: (@opacity * 100);	// Less doesn't like math inside `alpha`
 	opacity: @opacity;
-	filter: alpha(opacity=@opacity-ie);
 }
 
 // Shorthand for positioning code

packages/ui/useScroll/useScroll.js

@@ -132,6 +132,7 @@ const useScrollBase = (props) => {
 	delete rest.onScrollStart;
 	delete rest.onScrollStop;
 	delete rest.onWheel;
+	delete rest.preventScroll; // scrollMode 'native'
 	delete rest.removeEventListeners;
 	delete rest.scrollStopOnScroll; // scrollMode 'native'
 	delete rest.scrollTo;
@@ -812,6 +813,7 @@ const useScrollBase = (props) => {
 				scrollByPage(ev.keyCode);
 			}
 		} else {
+			props.preventScroll?.(ev);
 			forward('onKeyDown', ev, props);
 		}
 	}