3.0.0-alpha.4 release

.github/PULL_REQUEST_TEMPLATE.md

@@ -1,7 +1,7 @@
 ### Checklist
 
-* [ ] I have read and understand the [contribution guide](http://enactjs.com/docs/developer-guide/contributing/)
-* [ ] A [CHANGELOG entry](http://enactjs.com/docs/developer-guide/contributing/changelogs/) is included
+* [ ] I have read and understand the [contribution guide](https://enactjs.com/docs/developer-guide/contributing/)
+* [ ] A [CHANGELOG entry](https://enactjs.com/docs/developer-guide/contributing/changelogs/) is included
 * [ ] At least one test case is included for this feature or bug fix
 * [ ] Documentation was added or is not needed
 * [ ] This is an API breaking change

.travis.yml

@@ -1,29 +1,30 @@
 dist: jammy
 language: node_js
 node_js:
-    - 21
+    - lts/*
+    - node
 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
-    - echo "deb [ arch=amd64,arm64 signed-by=/usr/share/keyrings/mongodb-server-4.4.gpg ] https://repo.mongodb.org/apt/ubuntu focal/mongodb-org/4.4 multiverse" | sudo tee /etc/apt/sources.list.d/mongodb-org-4.4.list
     - sudo apt-get update
     - sudo apt-get install build-essential libcairo2-dev libpango1.0-dev libjpeg-dev libgif-dev librsvg2-dev
 install:
     - npm config set prefer-offline false
     - npm install -g codecov
-    - git clone --branch=master --depth 1 https://github.com/enactjs/cli ../cli
+    - git clone --branch=develop --depth 1 https://github.com/enactjs/cli ../cli
     - pushd ../cli
     - npm install
     - npm link
     - popd
     - git clone --branch=develop --depth 1 https://github.com/enactjs/enact ../enact
     - pushd ../enact
+    - npm uninstall @enact/ui-test-utils --prefix packages/i18n
     - npm install
     - npm run lerna exec -- --ignore enact-sampler --concurrency 1 -- npm --no-package-lock install
     - npm run lerna exec -- --ignore enact-sampler --concurrency 1 -- npm --no-package-lock link
     - npm run interlink
     - popd
     - rm -fr node_modules/@enact
+    - npm uninstall @enact/ui-test-utils
     - npm install
     - enact link
 script:

Alert/Alert.module.less

@@ -138,23 +138,27 @@
 
 			/* Override colors inside overlay type Alert */
 			--sand-bg-color: @sand-alert-overlay-bg-color;
-			--sand-text-color-rgb: @sand-alert-overlay-text-color-rgb;
+			--sand-text-color: @sand-alert-overlay-text-color;
 			--sand-text-sub-color: @sand-alert-overlay-text-sub-color;
 			--sand-focus-text-color: @sand-alert-overlay-focus-text-color;
 			--sand-disabled-selected-color: @sand-alert-overlay-disabled-selected-color;
 			--sand-disabled-selected-bg-color: @sand-alert-overlay-disabled-selected-bg-color;
 			--sand-disabled-selected-focus-color: @sand-alert-overlay-disabled-selected-focus-color;
 			--sand-disabled-selected-focus-bg-color: @sand-alert-overlay-disabled-selected-focus-bg-color;
-			--sand-progress-color-rgb: @sand-alert-overlay-progress-color-rgb;
-			--sand-progress-bg-color-rgb: @sand-alert-overlay-progress-bg-color-rgb;
-			--sand-progress-bg-color-alpha: @sand-alert-overlay-progress-bg-color-alpha;
+			--sand-progress-color: @sand-alert-overlay-progress-color;
+			--sand-progress-bg-color: @sand-alert-overlay-progress-bg-color;
+			--sand-progress-bg-color-opacity: @sand-alert-overlay-progress-bg-color-opacity;
 			--sand-checkbox-color: @sand-alert-overlay-checkbox-color;
 			--sand-checkbox-disabled-selected-text-color: @sand-alert-overlay-checkbox-disabled-selected-text-color;
 			--sand-formcheckboxitem-focus-text-color: @sand-alert-overlay-formcheckboxitem-focus-text-color;
 			--sand-item-disabled-focus-bg-color: @sand-alert-overlay-item-disabled-focus-bg-color;
 
-			background-color: rgb(@sand-alert-overlay-bg-color-rgb, @sand-alert-overlay-bg-color-opacity);
+			background-color: ~"color(from" @sand-alert-overlay-bg-color ~"srgb r g b /" @sand-alert-overlay-bg-color-opacity ~")";
 			box-shadow: @sand-alert-overlay-shadow;
+
+			:global(.noAnimation) & {
+				box-shadow: none;
+			}
 		}
 	});
 }

Button/Button.module.less

@@ -422,6 +422,47 @@
 			});
 		}
 
+		:global(.noAnimation) & {
+			.focus({
+				.bg {
+					.sand-button-focus-bg-colors(@shadow: {
+						box-shadow: none;
+					});
+				}
+
+				&.focusExpand {
+					.bg {
+						.sand-bg-colors({
+							transform: none;
+						});
+					}
+
+					&.small .bg {
+						.sand-bg-colors({
+							transform: none;
+						});
+					}
+
+					&.pressed,
+					&:active {
+						.bg {
+							.sand-bg-colors({
+								transform: none;
+							});
+						}
+
+						&.small {
+							.bg {
+								.sand-bg-colors({
+									transform: none;
+								});
+							}
+						}
+					}
+				}
+			});
+		}
+
 		.sand-disabled({
 			.client {
 				.sand-disabled-colors();

CHANGELOG.md

@@ -2,6 +2,60 @@
 
 The following is a curated list of changes in the Enact sandstone module, newest changes on the top.
 
+## [3.0.0-alpha.4] - 2025-01-21
+
+- Update dependencies including React 19.0.0
+
+### Added
+
+- `sandstone/Icon` supported icon list, adding new icon `calibration`
+- `sandstone/Pageviews` `pageIndicatorPosition` prop to set the position of the page indicator
+
+### Changed
+
+- CSS variables with suffix '-rgb' to without suffix and its value to hex format
+
+### Fixed
+
+- `sandstone/ContextualPopupDecorator` to update popup position properly when the DOM tree changes
+- `sandstone/Scroller` to focus properly when the spottable node is bigger than the size of viewport by voice control
+- `sandstone/Scroller` to prevent the native scrolling behavior caused by keydown events when a popup is open
+- `sandstone/TooltipDecorator` to hide a tooltip when tapping outside of disabled component
+
+## [2.9.7] - 2025-01-16
+
+### Fixed
+
+- `sandstone/ContextualPopupDecorator` to update popup position properly when the DOM tree changes
+
+## [2.7.21] - 2024-12-31
+
+### Fixed
+
+- `sandstone/Scroller` with `editable` prop to support touch input
+- `sandstone/TooltipDecorator` to hide a tooltip when tapping outside of disabled component
+
+## [2.7.20] - 2024-12-17
+
+### Added
+
+- `sandstone/Icon` supported icon list, adding new icon `calibration`
+
+## [2.9.6] - 2024-12-11
+
+### Added
+
+- `sandstone/Icon` supported icon list, adding new icon `calibration`
+
+### Changed
+
+- `sandstone/QuickGuidePanels` to read out more details according to the latest UX guide
+
+### Fixed
+
+- `sandstone/Scroller` to focus properly when the spottable node is bigger than the size of viewport by voice control
+- `sandstone/Scroller` to prevent the native scrolling behavior caused by keydown events when a popup is open
+
 ## [3.0.0-alpha.3] - 2024-12-02
 
 ### Added
@@ -309,7 +363,7 @@ No significant changes.
 
 ### Fixed
 
-- `sandstone/Dropdown' to focus properly the first option and the last option via page up and page down
+- `sandstone/Dropdown` to focus properly the first option and the last option via page up and page down
 - `sandstone/QuickGuidePanels` to not lose focus when the last view is displayed
 
 ## [2.7.5] - 2023-08-04

Checkbox/Checkbox.js

@@ -146,7 +146,7 @@ const CheckboxBase = kind({
 
 	computed: {
 		className: ({indeterminate, selected, standalone, styler}) => styler.append({selected, standalone, indeterminate}),
-		children: ({indeterminate, indeterminateIcon, children}) => (indeterminate ? indeterminateIcon : children) // This controls which icon to use, an not that icon's visual presence.
+		children: ({indeterminate, indeterminateIcon, children}) => (indeterminate ? indeterminateIcon : children) // This controls which icon to use, and not that icon's visual presence.
 	},
 
 	render: ({children, css, disabled, selected, ...rest}) => {

Checkbox/Checkbox.module.less

@@ -128,7 +128,7 @@
 	line-height: 0;
 
 	.icon {
-		margin: 0;	// Needed to apply here insetad of on `.checkbox` due to .icon.size precedence :(
+		margin: 0;	// Needed to apply here instead of on `.checkbox` due to .icon.size precedence :(
 		border-radius: @sand-checkbox-border-radius;
 		position: relative;
 		text-align: center;
@@ -171,6 +171,14 @@
 			@checkbox-focus();
 		});
 
+		:global(.noAnimation) & {
+			.focus({
+				.bg {
+					box-shadow: none;
+				}
+			})
+		}
+
 		// Disabled
 		.sand-disabled({
 			.icon {
@@ -195,6 +203,14 @@
 			@checkbox-focus();
 		}
 	});
+
+	:global(.noAnimation) & {
+		.focus({
+			& .checkbox .bg {
+				box-shadow: none;
+			}
+		});
+	}
 });
 
 .applySkins({

ContextualMenuDecorator/ContextualMenuDecorator.js

@@ -62,7 +62,7 @@ const ScrollingRepeater = ({className, ...rest}) => (
 );
 
 const ContextualMenuDecoratorBase = hoc(defaultConfig, (config, Wrapped) => {
-	// we might not need Skinnable at all here. If we want to skin the popup and it's defined as a
+	// we might not need Skinnable at all here. If we want to skin the popup, and it's defined as a
 	// private component in this module, we can wrap it with skinnable and style it as needed there.
 	const Component = Skinnable(
 		ContextualPopupDecorator(

ContextualPopupDecorator/ContextualPopup.module.less

@@ -77,6 +77,10 @@
 			background-color: @sand-contextualpopup-bg-color;
 			border-radius: @sand-contextualpopup-border-radius;
 			box-shadow: @sand-contextualpopup-shadow;
+
+			:global(.noAnimation) & {
+				box-shadow: none;
+			}
 		}
 
 		.arrow {

ContextualPopupDecorator/ContextualPopupDecorator.js

@@ -1,4 +1,4 @@
-/* global ResizeObserver */
+/* global MutationObserver ResizeObserver */
 
 /**
  * A higher-order component to add a Sandstone styled popup to a component.
@@ -22,7 +22,7 @@ import FloatingLayer from '@enact/ui/FloatingLayer';
 import ri from '@enact/ui/resolution';
 import compose from 'ramda/src/compose';
 import PropTypes from 'prop-types';
-import {Component, Fragment, createRef} from 'react';
+import {Component, createRef} from 'react';
 
 import {ContextualPopup} from './ContextualPopup';
 import HolePunchScrim from './HolePunchScrim';
@@ -301,6 +301,12 @@ const Decorator = hoc(defaultConfig, (config, Wrapped) => {
 					this.positionContextualPopup();
 				});
 			}
+
+			if (typeof MutationObserver === 'function') {
+				this.mutationObserver = new MutationObserver(() => {
+					this.positionContextualPopup();
+				});
+			}
 		}
 
 		getSnapshotBeforeUpdate (prevProps, prevState) {
@@ -313,7 +319,7 @@ const Decorator = hoc(defaultConfig, (config, Wrapped) => {
 				snapshot.shouldSpotActivator = (
 					// isn't set
 					!current ||
-					// is on the activator and we want to re-spot it so a11y read out can occur
+					// is on the activator, and we want to re-spot it so a11y read out can occur
 					current === prevState.activator ||
 					// is within the popup
 					this.containerNode.contains(current)
@@ -355,10 +361,15 @@ const Decorator = hoc(defaultConfig, (config, Wrapped) => {
 				this.resizeObserver.disconnect();
 				this.resizeObserver = null;
 			}
+
+			if (this.mutationObserver) {
+				this.mutationObserver.disconnect();
+				this.mutationObserver = null;
+			}
 		}
 
 		generateId = () => {
-			return Math.random().toString(36).substr(2, 8);
+			return Math.random().toString(36).substring(2, 10);
 		};
 
 		getContainerNodeWidth () {
@@ -619,6 +630,14 @@ const Decorator = hoc(defaultConfig, (config, Wrapped) => {
 					this.resizeObserver.disconnect();
 				}
 			}
+
+			if (this.mutationObserver) {
+				if (node) {
+					this.mutationObserver.observe(document.body, {attributes: false, childList: true, subtree: true});
+				} else {
+					this.mutationObserver.disconnect();
+				}
+			}
 		};
 
 		handle = handle.bind(this);
@@ -768,7 +787,7 @@ const Decorator = hoc(defaultConfig, (config, Wrapped) => {
 						open={open}
 						scrimType={scrimType}
 					>
-						<Fragment>
+						<div>
 							{holepunchScrim ? <HolePunchScrim holeBounds={holeBounds} /> : null}
 							<ContextualPopupContainer
 								{...ariaProps}
@@ -787,7 +806,7 @@ const Decorator = hoc(defaultConfig, (config, Wrapped) => {
 							>
 								<PopupComponent {...popupPropsRef} />
 							</ContextualPopupContainer>
-						</Fragment>
+						</div>
 					</FloatingLayer>
 					<WrappedWithRef {...rest} outermostRef={this.clientSiblingRef} referrerName="ContextualPopup" />
 				</div>

ContextualPopupDecorator/tests/ContextualPopupDecorator-specs.js

@@ -499,7 +499,7 @@ describe('ContextualPopupDecorator Specs', () => {
 			</Root>
 		);
 
-		const scrimDivSecond = screen.getByRole('alert').previousElementSibling;
+		const scrimDivSecond = screen.getByRole('alert').parentElement.previousElementSibling;
 		const expectedSecond = 'transparent';
 
 		expect(scrimDivFirst).toHaveClass(expectedFirst);

DatePicker/DatePicker.js

@@ -161,7 +161,7 @@ const DatePicker = Pure(
  * @function
  * @memberof sandstone/DatePicker
  * @param {Date} date `Date` to convert
- * @returns {String?} Converted date or `null` if `date` is invalid
+ * @returns {String|null} Converted date or `null` if `date` is invalid
  */
 const dateToLocaleString = (date) => {
 	if (!date) {

DayPicker/DayPicker.js

@@ -54,7 +54,7 @@ const DayPickerBase = kind({
 		disabled: PropTypes.bool,
 
 		/**
-		 * Called when an day is selected or unselected.
+		 * Called when a 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 where Sunday

DayPicker/DaySelectorDecorator.js

@@ -281,7 +281,7 @@ const DaySelectorDecorator = hoc((config, Wrapped) => {
 		locale: PropTypes.string,
 
 		/**
-		 * Called when an day is selected or unselected.
+		 * Called when a 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

DayPicker/tests/DayPicker-specs.js

@@ -29,7 +29,7 @@ describe('DayPicker', () => {
 		// We need to change the locale to firstDayOfWeek !== 0.
 		// If firstDayOfWeek === 0, the number type check conditional statement
 		// is skipped due to the fast execution path of localizeSelected(), which
-		// reduces code coverage..
+		// reduces code coverage.
 		ilib.setLocale('es-ES');
 
 		render(<DayPicker locale="es-ES" selected={1} />);