2.7.15 release

CHANGELOG.md

@@ -2,6 +2,17 @@
 
 The following is a curated list of changes in the Enact sandstone module, newest changes on the top.
 
+## [2.7.15] - 2024-03-05
+
+### Added
+
+- `sandstone/Scroller.ContentContainerDecorator` to allow component to be a scroll target when its descendant is focused
+
+### Fixed
+
+- `sandstone/VirtualList` to show the focused item properly when switching from pointer mode to 5-way mode
+- `sandstone/VirtualList.VirtualGridList` to show the focused item fully when focus moves via 5-way keys inside a list
+
 ## [2.7.14] - 2024-01-23
 
 No significant changes.

Scroller/ContentContainerDecorator.js

@@ -0,0 +1,22 @@
+import hoc from '@enact/core/hoc';
+import SpotlightContainerDecorator from '@enact/spotlight/SpotlightContainerDecorator';
+
+const defaultConfig = {
+	positionTargetOnFocus: true
+};
+
+/**
+ * Wraps a component to be a scroll target when its descendants get focused.
+ *
+ * @hoc
+ * @memberof sandstone/Scroller
+ * @public
+ */
+const ContentContainerDecorator = hoc(defaultConfig, (config, Wrapped) => {
+	return SpotlightContainerDecorator(config, Wrapped);
+});
+
+export default ContentContainerDecorator;
+export {
+	ContentContainerDecorator
+};

Scroller/Scroller.js

@@ -31,6 +31,7 @@ import Scrollbar from '../useScroll/Scrollbar';
 import ScrollbarPlaceholder from '../useScroll/ScrollbarPlaceholder';
 import Skinnable from '../Skinnable';
 
+import {ContentContainerDecorator} from './ContentContainerDecorator';
 import {EditableShape, EditableWrapper} from './EditableWrapper';
 import useThemeScroller from './useThemeScroller';
 
@@ -70,7 +71,7 @@ let Scroller = ({'aria-label': ariaLabel, hoverToScroll, ...rest}) => {
 		horizontalScrollbarProps,
 		verticalScrollbarProps,
 		hoverToScrollProps
-	} = useScroll(rest);
+	} = useScroll({...rest, scrollToContentContainerOnFocus: true});
 
 	const {
 		className,
@@ -476,5 +477,6 @@ Scroller.defaultProps = {
 
 export default Scroller;
 export {
+	ContentContainerDecorator,
 	Scroller
 };

Scroller/tests/ContentContainerDecorator-specs.js

@@ -0,0 +1,26 @@
+import '@testing-library/jest-dom';
+import {getContainerConfig, getContainerId} from '@enact/spotlight/src/container';
+import {render, screen} from '@testing-library/react';
+
+import {ContentContainerDecorator} from '../Scroller';
+
+describe('ContentContainerDecorator', () => {
+	test(
+		'should set \'positionTargetOnFocus\' container config to true',
+		() => {
+			const Container = ContentContainerDecorator('div');
+
+			render(
+				<Container data-testid="container-id" />
+			);
+
+			const containerId = getContainerId(screen.getByTestId('container-id'));
+			const containerConfig = getContainerConfig(containerId);
+
+			const actual = containerConfig.positionTargetOnFocus;
+			const expected = true;
+
+			expect(actual).toBe(expected);
+		}
+	);
+});

VirtualList/useEvent.js

@@ -15,6 +15,7 @@ const
 	isPageDown = is('pageDown'),
 	isRight = is('right'),
 	isUp = is('up'),
+	isPointerHide = is('pointerHide'),
 	getNumberValue = (index) => {
 		// using '+ operator' for string > number conversion based on performance: https://jsperf.com/convert-string-to-number-techniques/7
 		let number = +index;
@@ -194,13 +195,21 @@ const useEventKey = (props, instances, context) => {
 								directions.left && column === 0 ||
 								directions.right && (!focusableScrollbar || !isScrollbarVisible) && (column === dimensionToExtent - 1 || index === dataSize - 1 && row === 0);
 
-							/* istanbul ignore if */
-							if (repeat && isLeaving) { // if focus is about to leave items by holding down an arrowy key
-								ev.preventDefault();
-								if (spotlightId && !getContainerConfig(spotlightId)?.continue5WayHold) {
-									ev.stopPropagation();
+							/* istanbul ignore next */
+							if (isLeaving) {
+								if (repeat) { // if focus is about to leave items by holding down an arrowy key
+									ev.preventDefault();
+									if (spotlightId && !getContainerConfig(spotlightId)?.continue5WayHold) {
+										ev.stopPropagation();
+									}
+								} else if (!candidate && ev.timeStamp - mutableRef.current.pointerHideTimeStamp < 30) {
+									// No candidate
+									// Spotlight will focus the same item again, then a list scrolls to show the focused item
+									// 30 is an arbitrary value
+									target.blur();
+									mutableRef.current.pointerHideTimeStamp = 0;
 								}
-							} else if (!isLeaving) {
+							} else {
 								handleDirectionKeyDown(ev, 'keyDown', {direction, keyCode, repeat, target});
 							}
 						}
@@ -214,6 +223,9 @@ const useEventKey = (props, instances, context) => {
 				}
 			} else if (isPageUp(keyCode) || isPageDown(keyCode)) {
 				handlePageUpDownKeyDown();
+			} else if (isPointerHide(keyCode)) {
+				/* istanbul ignore next */
+				mutableRef.current.pointerHideTimeStamp = ev.timeStamp;
 			}
 		}
 

VirtualList/useThemeVirtualList.js

@@ -262,7 +262,7 @@ const useSpottable = (props, instances) => {
 		const {pageScroll, direction} = props;
 		const {state: {numOfItems}, primary} = scrollContentHandle.current;
 		const allowAffordance = !(noAffordance || direction === 'horizontal');
-		const offsetToClientEnd = primary.clientSize - primary.gridSize - (!allowAffordance ? 0 : ri.scale(affordanceSize));
+		const offsetToClientEnd = primary.clientSize - (snapToCenter ? primary.gridSize : primary.itemSize) - (!allowAffordance ? 0 : ri.scale(affordanceSize));
 		const focusedIndex = getNumberValue(item.getAttribute(dataIndexAttribute));
 		const offsetToCenter = snapToCenter ? (primary.clientSize / 2 - primary.gridSize / 2) : 0;