Merge branch 'develop' into feature/WRR-9115

.travis.yml

@@ -1,7 +1,7 @@
 dist: jammy
 language: node_js
 node_js:
-    - lts/*
+    - 21
 sudo: false
 before_install:
     - curl -fsSL https://www.mongodb.org/static/pgp/server-4.4.asc | sudo gpg -o /usr/share/keyrings/mongodb-server-4.4.gpg --dearmor

CHANGELOG.md

@@ -4,6 +4,12 @@ The following is a curated list of changes in the Enact sandstone module, newest
 
 ## [unreleased]
 
+### Fixed
+
+- `sandstone/Scroller` to focus properly when the spottable node is bigger than the size of viewport by voice control
+
+## [3.0.0-alpha.3] - 2024-12-02
+
 ### Added
 
 - `sandstone/Icon` supported icon list, adding new icons `ai`, `alert01`, and `alert02`
@@ -21,6 +27,49 @@ The following is a curated list of changes in the Enact sandstone module, newest
 - `sandstone/Scroller` to focus content area properly on supported platforms when `focusableScrollbar` prop is `byEnter`
 - `sandstone/Scroller` to focus properly when the spottable node is bigger than the size of viewport by voice control
 - `sandstone/Scroller` with `editable` prop to move an item via 5-way keys properly in pointer mode
+- `sandstone/Slider` to not show console error when dragging with touch
+
+## [2.9.5] - 2024-11-19
+
+### Added
+
+- `sandstone/Icon` supported icon list, adding new icons `ai`, `alert01`, and `alert02`
+
+### Fixed
+
+- `sandstone/ContextualPopupDecorator` to update popup position properly when the screen orientation change
+- `sandstone/Input` keypad layout when `type` prop is `number` or `passwordnumber` and the screen is in portrait mode or `popupType` prop is `overlay` and in large text mode
+- `sandstone/Slider` to not show console error when dragging with touch
+
+## [2.7.19] - 2024-11-15
+
+### Fixed
+
+- `sandstone/ContextualPopupDecorator` to update popup position properly when the screen orientation change
+- `sandstone/Input` keypad layout when `type` prop is `number` or `passwordnumber` and the screen is in portrait mode or `popupType` prop is `overlay` and in large text mode
+
+## [2.9.4] - 2024-10-29
+
+### Fixed
+
+- `sandstone/IconItem` to restart marquee after done editing in `sandstone/Scroller` with `editable` prop
+- `sandstone/PageViews` and `sandstone/QuickGuidePanels` dot page indicators to be aligned center
+- `sandstone/Scroller` to focus content area properly on supported platforms when `focusableScrollbar` prop is `byEnter`
+- `sandstone/Scroller` with `editable` prop to move an item via 5-way keys properly in pointer mode
+
+## [2.9.3] - 2024-10-15
+
+### Added
+
+- `sandstone/MediaControls` props `jumpBackwardAriaLabel` and `jumpForwardAriaLabel` to override aria-label of jumpButtons
+- `sandstone/PageViews` prop `autoFocus` to set whether focus element automatically or not
+
+### Fixed
+
+- `sandstone/PageViews` to not clip the shadow of navigation buttons when `fullContents` prop is `true`
+- `sandstone/Scroller` to focus the topmost element after scroll by voice control
+- `sandstone/Scroller` to read out properly when `sandstone/Panels` has `sandstone/Scroller` with `focusableScrollbar`
+- `sandstone/VideoPlayer` to show only the mini feedback when pressing play/pause key
 
 ## [3.0.0-alpha.2] - 2024-10-08
 

DayPicker/DaySelectorDecorator.js

@@ -1,11 +1,11 @@
 import {forwardCustom} from '@enact/core/handle';
 import hoc from '@enact/core/hoc';
-import {coerceArray, memoize} from '@enact/core/util';
+import {coerceArray, memoize, setDefaultProps} from '@enact/core/util';
 import ilib from '@enact/i18n';
 import DateFmt from 'ilib/lib/DateFmt';
 import LocaleInfo from 'ilib/lib/LocaleInfo';
 import PropTypes from 'prop-types';
-import {Component} from 'react';
+import {useCallback} from 'react';
 
 import $L from '../internal/$L';
 
@@ -190,6 +190,11 @@ function getSelectedDayString (selected, noneText = '', dayNameLength = 'long')
 	}
 }
 
+const daySelectorDecoratorDefaultProps = {
+	dayNameLength: 'long',
+	disabled: false
+};
+
 /**
  * Applies Sandstone specific behaviors to {@link sandstone/DayPicker.DayPicker|DayPicker}.
  *
@@ -203,113 +208,102 @@ function getSelectedDayString (selected, noneText = '', dayNameLength = 'long')
  * @private
  */
 const DaySelectorDecorator = hoc((config, Wrapped) => {
-	return class extends Component {
-
-		static displayName = 'DaySelectorDecorator';
-
-		static propTypes = /** @lends sandstone/DayPicker.DaySelectorDecorator.prototype */ {
-			/**
-			 * The "aria-label" for the selector.
-			 *
-			 * @memberof sandstone/DayPicker.DaySelectorDecorator.prototype
-			 * @type {String}
-			 * @private
-			 */
-			'aria-label': PropTypes.string,
-
-			/**
-			 * The format for names of days.
-			 *
-			 * @type {('short'|'medium'|'long'|'full')}
-			 * @default 'long'
-			 * @public
-			 */
-			dayNameLength: PropTypes.oneOf(['short', 'medium', 'long', 'full']),
-
-			/**
-			 * Applies a disabled style and prevents interacting with the component.
-			 *
-			 * @type {Boolean}
-			 * @default false
-			 * @public
-			 */
-			disabled: PropTypes.bool,
-
-			/**
-			 * Current locale.
-			 *
-			 * @type {String}
-			 * @public
-			 */
-			locale: PropTypes.string,
-
-			/**
-			 * Called when an day is selected or unselected.
-			 *
-			 * The event payload will be an object with the following members:
-			 * * `selected` - An array of numbers representing the selected days, 0 indexed
-			 * * `content` - Localized string representing the selected days
-			 *
-			 * @type {Function}
-			 * @public
-			 */
-			onSelect: PropTypes.func,
-
-			/**
-			 * An array of numbers (0-indexed) representing the selected days of the week.
-			 *
-			 * @type {Number|Number[]}
-			 * @public
-			 */
-			selected: PropTypes.oneOfType([PropTypes.number, PropTypes.arrayOf(PropTypes.number)])
-		};
-
-		static defaultProps = {
-			dayNameLength: 'long',
-			disabled: false
-		};
+	const DaySelector = (props) => {
+		const daySelectorDecoratorProps = setDefaultProps(props, daySelectorDecoratorDefaultProps);
+		const {dayNameLength, locale, selected, ...rest} = daySelectorDecoratorProps;
 
-		handleSelect = ({selected}) => {
-			const {dayNameLength, locale} = this.props;
-			const state = getLocaleState(dayNameLength, locale);
+		const state = getLocaleState(dayNameLength, locale);
+		const localSelected = localizeSelected(selected, state);
+		const abbreviatedDayNames = orderDays(state.abbreviatedDayNames, state);
+		const fullDayNames = orderDays(state.fullDayNames, state);
 
+		const handleSelect = useCallback(({selected: selectedDay}) => {
 			// adjust the selected value beforehand so getSelectedDayString always operates on the
 			// standard, "Sunday as index 0" format
-			selected = generalizeSelected(selected, state);
-			const content = getSelectedDayString(selected, '', dayNameLength);
-
-			forwardCustom('onSelect', () => ({selected, content}))(null, this.props);
-		};
+			const generalSelected = generalizeSelected(selectedDay, state);
+			const content = getSelectedDayString(generalSelected, '', dayNameLength);
+
+			forwardCustom('onSelect', () => ({selected: generalSelected, content}))(null, daySelectorDecoratorProps);
+		}, [dayNameLength, daySelectorDecoratorProps, state]);
+
+		return (
+			<Wrapped
+				{...rest}
+				onSelect={handleSelect}
+				selected={localSelected}
+			>
+				{abbreviatedDayNames.map((children, index) => ({
+					children,
+					// "short" dayNameLength can result in the same name so adding index
+					key: `${index} ${children}`,
+					'aria-label': fullDayNames[index]
+				}))}
+			</Wrapped>
+		);
+	};
 
-		render () {
-			const {dayNameLength, locale, selected, ...rest} = this.props;
-			const state = getLocaleState(dayNameLength, locale);
-
-			const localSelected = localizeSelected(selected, state);
-			const abbreviatedDayNames = orderDays(state.abbreviatedDayNames, state);
-			const fullDayNames = orderDays(state.fullDayNames, state);
-
-			delete rest.everyDayText;
-			delete rest.everyWeekdayText;
-			delete rest.everyWeekendText;
-			delete rest.selected;
-
-			return (
-				<Wrapped
-					{...rest}
-					onSelect={this.handleSelect}
-					selected={localSelected}
-				>
-					{abbreviatedDayNames.map((children, index) => ({
-						children,
-						// "short" dayNameLength can result in the same name so adding index
-						key: `${index} ${children}`,
-						'aria-label': fullDayNames[index]
-					}))}
-				</Wrapped>
-			);
-		}
+	DaySelector.displayName = 'DaySelectorDecorator';
+
+	DaySelector.propTypes = /** @lends sandstone/DayPicker.DaySelectorDecorator.prototype */ {
+		/**
+		 * The "aria-label" for the selector.
+		 *
+		 * @memberof sandstone/DayPicker.DaySelectorDecorator.prototype
+		 * @type {String}
+		 * @private
+		 */
+		'aria-label': PropTypes.string,
+
+		/**
+		 * The format for names of days.
+		 *
+		 * @type {('short'|'medium'|'long'|'full')}
+		 * @default 'long'
+		 * @public
+		 */
+		dayNameLength: PropTypes.oneOf(['short', 'medium', 'long', 'full']),
+
+		/**
+		 * Applies a disabled style and prevents interacting with the component.
+		 *
+		 * @type {Boolean}
+		 * @default false
+		 * @public
+		 */
+		disabled: PropTypes.bool,
+
+		/**
+		 * Current locale.
+		 *
+		 * @type {String}
+		 * @public
+		 */
+		locale: PropTypes.string,
+
+		/**
+		 * Called when an day is selected or unselected.
+		 *
+		 * The event payload will be an object with the following members:
+		 * * `selected` - An array of numbers representing the selected days, 0 indexed
+		 * * `content` - Localized string representing the selected days
+		 *
+		 * @type {Function}
+		 * @public
+		 */
+		onSelect: PropTypes.func,
+
+		/**
+		 * An array of numbers (0-indexed) representing the selected days of the week.
+		 *
+		 * @type {Number|Number[]}
+		 * @public
+		 */
+		selected: PropTypes.oneOfType([PropTypes.number, PropTypes.arrayOf(PropTypes.number)])
 	};
+
+	DaySelector.defaultPropValues = daySelectorDecoratorDefaultProps;
+
+	return DaySelector;
 });
 
 export default DaySelectorDecorator;

Slider/SliderBehaviorDecorator.js

@@ -1,10 +1,9 @@
 import {forward, forwardCustom} from '@enact/core/handle';
 import hoc from '@enact/core/hoc';
-import platform from '@enact/core/platform';
 import Pause from '@enact/spotlight/Pause';
 import IString from 'ilib/lib/IString';
 import PropTypes from 'prop-types';
-import {Component, createRef} from 'react';
+import {Component} from 'react';
 
 import $L from '../internal/$L';
 
@@ -69,7 +68,6 @@ const SliderBehaviorDecorator = hoc(defaultConfig, (config, Wrapped) => {
 			this.handleFocus = this.handleFocus.bind(this);
 			this.handleSpotlightEvents = this.handleSpotlightEvents.bind(this);
 			this.bounds = {};
-			this.sliderRef = createRef();
 
 			this.state = {
 				active: false,
@@ -109,14 +107,6 @@ const SliderBehaviorDecorator = hoc(defaultConfig, (config, Wrapped) => {
 			return valueText;
 		}
 
-		focusSlider () {
-			let slider = this.sliderRef.current.node;
-			if (slider.getAttribute('role') !== 'slider') {
-				slider = slider.querySelector('[role="slider"]');
-			}
-			slider.focus();
-		}
-
 		handleActivate () {
 			forwardCustom('onActivate')(null, this.props);
 			this.setState(toggleActive);
@@ -131,10 +121,6 @@ const SliderBehaviorDecorator = hoc(defaultConfig, (config, Wrapped) => {
 		}
 
 		handleDragStart () {
-			// on platforms with a touchscreen, we want to focus slider when dragging begins
-			if (platform.touchScreen) {
-				this.focusSlider();
-			}
 			this.paused.pause();
 			this.setState({dragging: true});
 		}
@@ -187,7 +173,6 @@ const SliderBehaviorDecorator = hoc(defaultConfig, (config, Wrapped) => {
 					onDragStart={this.handleDragStart}
 					onDragEnd={this.handleDragEnd}
 					onFocus={this.handleFocus}
-					ref={this.sliderRef}
 				/>
 			);
 		}