2.0.11 release

.travis.yml

@@ -2,15 +2,17 @@ dist: focal
 language: node_js
 node_js:
     - lts/*
-    - node
+    - "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
+    - 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=develop --depth 1 https://github.com/enactjs/cli ../cli
+    - git clone --branch=master --depth 1 https://github.com/enactjs/cli ../cli
     - pushd ../cli
     - npm install
     - npm link

CHANGELOG.md

@@ -2,6 +2,16 @@
 
 The following is a curated list of changes in the Enact agate module, newest changes on the top.
 
+## [2.0.11] - 2024-07-22
+
+### Changed
+
+- `agate/ContextualPopupDecorator` and `agate/Dropdown` to have sibling DOM node as alternative to findDOMNode API which will be removed in React 19
+
+### Fixed
+
+- `agate/Panels` to animate properly when `cover` prop is `partial` horizontally
+
 ## [2.0.10] - 2024-03-18
 
 No significant changes.

CheckboxItem/CheckboxItem.module.less

@@ -23,15 +23,15 @@
 		}
 
 		.slotAfter {
-			-webkit-margin-start: @agate-checkboxitem-icon-margin-end;
-			-webkit-margin-end: @agate-checkboxitem-icon-margin-start;
+			margin-inline-start: @agate-checkboxitem-icon-margin-end;
+			margin-inline-end: @agate-checkboxitem-icon-margin-start;
 		}
 
 		.slotBefore {
 			display: flex;
 			align-items: center;
-			-webkit-margin-start: @agate-checkboxitem-icon-margin-start;
-			-webkit-margin-end: @agate-checkboxitem-icon-margin-end;
+			margin-inline-start: @agate-checkboxitem-icon-margin-start;
+			margin-inline-end: @agate-checkboxitem-icon-margin-end;
 		}
 
 		.focus({

ColorPicker/tests/ColorPicker-specs.js

@@ -18,7 +18,7 @@ describe('ColorPicker', () => {
 			</ColorPicker>
 		);
 
-		const actual = screen.getAllByRole('button')[0].nextElementSibling;
+		const actual = screen.getAllByRole('button')[0].nextElementSibling.nextElementSibling; // there is a dummy sibling by Spottable
 		const expected = 'right';
 
 		expect(actual).toHaveClass(expected);
@@ -31,7 +31,7 @@ describe('ColorPicker', () => {
 			</ColorPicker>
 		);
 
-		const actual = screen.getAllByRole('button')[0].nextElementSibling;
+		const actual = screen.getAllByRole('button')[0].nextElementSibling.nextElementSibling; // there is a dummy sibling by Spottable
 		const expected = 'down';
 
 		expect(actual).toHaveClass(expected);
@@ -44,7 +44,7 @@ describe('ColorPicker', () => {
 			</ColorPicker>
 		);
 
-		const actual = screen.getAllByRole('button')[0].nextElementSibling;
+		const actual = screen.getAllByRole('button')[0].nextElementSibling.nextElementSibling; // there is a dummy sibling by Spottable
 		const expected = 'up';
 
 		expect(actual).toHaveClass(expected);
@@ -168,7 +168,7 @@ describe('ColorPicker', () => {
 		// Extend color picker
 		await user.click(screen.getAllByRole('button')[0]);
 
-		const actual = screen.getAllByRole('button')[0].nextElementSibling;
+		const actual = screen.getAllByRole('button')[0].nextElementSibling.nextElementSibling; // there is a dummy sibling by Spottable
 		const expected = 'shown';
 
 		expect(actual).toHaveClass(expected);

ContextualPopupDecorator/ContextualPopup.module.less

@@ -11,8 +11,6 @@
 	.container {
 		position: absolute;
 		background-clip: padding-box;
-		-webkit-background-clip: padding-box;
-		-moz-background-clip: padding-box;
 		box-sizing: border-box;
 
 		&.none { /* Needed to prevent global class being added in the DOM */ }

ContextualPopupDecorator/ContextualPopupDecorator.js

@@ -11,6 +11,7 @@ import {on, off} from '@enact/core/dispatcher';
 import {handle, forProp, forKey, forward, stop} from '@enact/core/handle';
 import hoc from '@enact/core/hoc';
 import EnactPropTypes from '@enact/core/internal/prop-types';
+import {WithRef} from '@enact/core/internal/WithRef';
 import {extractAriaProps} from '@enact/core/util';
 import {I18nContextDecorator} from '@enact/i18n/I18nDecorator';
 import Spotlight, {getDirection} from '@enact/spotlight';
@@ -19,8 +20,7 @@ import FloatingLayer from '@enact/ui/FloatingLayer';
 import ri from '@enact/ui/resolution';
 import PropTypes from 'prop-types';
 import compose from 'ramda/src/compose';
-import {Component} from 'react';
-import ReactDOM from 'react-dom';
+import {Component, createRef} from 'react';
 
 import {ContextualPopup} from './ContextualPopup';
 
@@ -71,6 +71,7 @@ const ContextualPopupContainer = SpotlightContainerDecorator(
 
 const Decorator = hoc(defaultConfig, (config, Wrapped) => {
 	const {noArrow, noSkin, openProp} = config;
+	const WrappedWithRef = WithRef(Wrapped);
 
 	return class extends Component {
 		static displayName = 'ContextualPopupDecorator';
@@ -272,6 +273,7 @@ const Decorator = hoc(defaultConfig, (config, Wrapped) => {
 
 			this.overflow = {};
 			this.adjustedDirection = this.props.direction;
+			this.clientSiblingRef = createRef();
 
 			this.MARGIN = noArrow ? 0 : ri.scale(9);
 			this.ARROW_WIDTH = noArrow ? 0 : ri.scale(30); // svg arrow width. used for arrow positioning
@@ -553,9 +555,9 @@ const Decorator = hoc(defaultConfig, (config, Wrapped) => {
 		 * @returns {undefined}
 		 */
 		positionContextualPopup = () => {
-			if (this.containerNode && this.clientNode) {
+			if (this.containerNode && this.clientSiblingRef?.current) {
 				const containerNode = this.containerNode.getBoundingClientRect();
-				const {top, left, bottom, right, width, height} = this.clientNode.getBoundingClientRect();
+				const {top, left, bottom, right, width, height} = this.clientSiblingRef.current.getBoundingClientRect();
 				const clientNode = {top, left, bottom, right, width, height};
 				clientNode.left = this.props.rtl ? window.innerWidth - right : left;
 				clientNode.right = this.props.rtl ? window.innerWidth - left : right;
@@ -578,10 +580,6 @@ const Decorator = hoc(defaultConfig, (config, Wrapped) => {
 			this.containerNode = node;
 		};
 
-		getClientNode = (node) => {
-			this.clientNode = ReactDOM.findDOMNode(node); // eslint-disable-line react/no-find-dom-node
-		};
-
 		handle = handle.bind(this);
 
 		handleKeyUp = this.handle(
@@ -729,7 +727,7 @@ const Decorator = hoc(defaultConfig, (config, Wrapped) => {
 							<PopupComponent {...popupPropsRef} />
 						</ContextualPopupContainer>
 					</FloatingLayer>
-					<Wrapped ref={this.getClientNode} {...rest} />
+					<WrappedWithRef {...rest} outermostRef={this.clientSiblingRef} referrerName="ContextualPopup" />
 				</div>
 			);
 		}

Dropdown/Dropdown.js

@@ -54,7 +54,7 @@ const DropdownButtonBase = kind({
 
 	propTypes: /** @lends agate/Dropdown.DropdownButtonBase.prototype */ {
 		/**
-		 * Forwards a reference to the this component.
+		 * Forwards a reference to this component.
 		 *
 		 * @type {Object|Function}
 		 * @private

Dropdown/DropdownList.js

@@ -2,12 +2,12 @@ import {forward} from '@enact/core/handle';
 import hoc from '@enact/core/hoc';
 import kind from '@enact/core/kind';
 import EnactPropTypes from '@enact/core/internal/prop-types';
+import {WithRef} from '@enact/core/internal/WithRef';
 import Spotlight from '@enact/spotlight';
 import ri from '@enact/ui/resolution';
 import PropTypes from 'prop-types';
 import compose from 'ramda/src/compose';
-import {Component} from 'react';
-import ReactDOM from 'react-dom';
+import {Component, createRef} from 'react';
 
 import {compareChildren} from '../internal/util';
 import Item from '../Item';
@@ -124,12 +124,14 @@ const DropdownListBase = kind({
 			const data = child.children;
 			const ItemComponent = (skin === 'silicon') ? RadioItem : Item;
 			const itemProps = (skin === 'silicon') ? {className: css.dropDownListItem, css, selected: isSelected, size: 'small'} : {css, selected: isSelected};
+			const {key, ...restChild} = {...child};
 
 			return (
 				<ItemComponent
 					{...rest}
-					{...child}
+					{...restChild}
 					data-selected={isSelected}
+					key={key}
 					// eslint-disable-next-line react/jsx-no-bind
 					onClick={() => forward('onSelect', {data, selected: index}, props)}
 					{...itemProps}
@@ -181,6 +183,8 @@ const ReadyState = {
  * @private
  */
 const DropdownListSpotlightDecorator = hoc((config, Wrapped) => {
+	const WrappedWithRef = WithRef(Wrapped);
+
 	return class extends Component {
 		static displayName = 'DropdownListSpotlightDecorator';
 
@@ -210,15 +214,8 @@ const DropdownListSpotlightDecorator = hoc((config, Wrapped) => {
 				prevSelectedKey: getKey(props),
 				ready: isSelectedValid(props) ? ReadyState.INIT : ReadyState.DONE
 			};
-		}
 
-		componentDidMount () {
-			// eslint-disable-next-line react/no-find-dom-node
-			this.node = ReactDOM.findDOMNode(this);
-			Spotlight.set(this.node.dataset.spotlightId, {
-				defaultElement: '[data-selected="true"]',
-				enterTo: 'default-element'
-			});
+			this.clientSiblingRef = createRef(null);
 		}
 
 		componentDidUpdate () {
@@ -286,8 +283,10 @@ const DropdownListSpotlightDecorator = hoc((config, Wrapped) => {
 
 		handleFocus = (ev) => {
 			const current = ev.target;
+			const dropdownListNode = this.clientSiblingRef?.current;
+
 			if (this.state.ready === ReadyState.DONE && !Spotlight.getPointerMode() &&
-				current.dataset['index'] != null && this.node.contains(current)
+				current.dataset['index'] != null && dropdownListNode.contains(current)
 			) {
 				const focusedIndex = Number(current.dataset['index']);
 				const lastFocusedKey = getKey({children: this.props.children, selected: focusedIndex});
@@ -301,11 +300,7 @@ const DropdownListSpotlightDecorator = hoc((config, Wrapped) => {
 
 		render () {
 			return (
-				<Wrapped
-					{...this.props}
-					onFocus={this.handleFocus}
-					scrollTo={this.setScrollTo}
-				/>
+				<WrappedWithRef {...this.props} onFocus={this.handleFocus} outermostRef={this.clientSiblingRef} referrerName="DropdownList" scrollTo={this.setScrollTo} />
 			);
 		}
 	};

Input/Input.module.less

@@ -44,15 +44,15 @@
 			}
 
 			&[type=number] {
-				-moz-appearance: textfield;
+				appearance: textfield;
 
 				&::-webkit-inner-spin-button,
 				&::-webkit-outer-spin-button {
-					-webkit-appearance: none;
+					appearance: none;
 				}
 
 				&:hover {
-					-moz-appearance: none;
+					appearance: none;
 				}
 			}
 

MediaPlayer/tests/MediaPlayer-specs.js

@@ -277,7 +277,7 @@ describe('MediaPlayer', () => {
 				</MediaPlayer>
 			);
 			const repeatButton = screen.getByLabelText('Repeat');
-			const controlsFrame = screen.getByTestId('media-player').children.item(3);
+			const controlsFrame = screen.getByTestId('media-player').children.item(4);
 
 			await user.click(repeatButton);
 
@@ -292,7 +292,7 @@ describe('MediaPlayer', () => {
 				</MediaPlayer>
 			);
 			const repeatButton = screen.getByLabelText('Repeat');
-			const controlsFrame = screen.getByTestId('media-player').children.item(3);
+			const controlsFrame = screen.getByTestId('media-player').children.item(4);
 
 			await user.click(repeatButton);
 			await user.click(repeatButton);
@@ -308,7 +308,7 @@ describe('MediaPlayer', () => {
 				</MediaPlayer>
 			);
 			const repeatButton = screen.getByLabelText('Repeat');
-			const controlsFrame = screen.getByTestId('media-player').children.item(3);
+			const controlsFrame = screen.getByTestId('media-player').children.item(4);
 
 			await user.click(repeatButton);
 			await user.click(repeatButton);

Panels/Panels.module.less

@@ -59,14 +59,28 @@
 			top: @agate-panels-controls-top;
 			.position-start-end(auto, @agate-panel-h-padding);
 			.padding-start-end(@agate-panels-controls-padding-start, initial);
-			.remove-margin-on-edge-children();
+
+			> :first-child {
+				margin-inline-start: 0;
+			}
+
+			> :nth-last-child(2) {
+				margin-inline-end: 0;
+			}
+		}
+
+		.viewport {
+			&.transitioning {
+				clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
+			}
 		}
 
 		&.partial {
 			background-color: @agate-panels-partial-bg-color;
 			background-image: @agate-panels-partial-bg-image;
 			height: @agate-panels-partial-height;
 			width: @agate-panels-partial-width;
+			overflow: hidden;
 		}
 
 		&.breadcrumbPanels {
@@ -85,7 +99,6 @@
 
 			.viewport {
 				&.transitioning {
-					-webkit-clip-path: polygon(@agate-panels-breadcrumb-width 0, 100% 0, 100% 100%, @agate-panels-breadcrumb-width 100%);
 					clip-path: polygon(@agate-panels-breadcrumb-width 0, 100% 0, 100% 100%, @agate-panels-breadcrumb-width 100%);
 				}