revert findDOMNode() deletion and use cli feature/enact_v5 branch

.travis.yml

@@ -9,7 +9,7 @@ before_install:
 install:
     - npm config set prefer-offline false
     - npm install -g codecov
-    - git clone --branch=feature/WRQ-21653 --depth 1 https://github.com/enactjs/cli ../cli
+    - git clone --branch=feature/enact_v5 --depth 1 https://github.com/enactjs/cli ../cli
     - pushd ../cli
     - npm install --force
     - npm link

packages/spotlight/Spottable/Spottable.js

@@ -13,6 +13,7 @@ import EnactPropTypes from '@enact/core/internal/prop-types';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import {Component} from 'react';
+import ReactDOM from 'react-dom';
 
 import {spottableClass, useSpottable} from './useSpottable';
 
@@ -267,6 +268,8 @@ const Spottable = hoc(defaultConfig, (config, Wrapped) => {
 	// eslint-disable-next-line no-shadow
 	class Spottable extends Component {
 		componentDidMount () {
+			// eslint-disable-next-line react/no-find-dom-node
+			this.node = ReactDOM.findDOMNode(this);
 			this.forceUpdate();
 		}
 

packages/spotlight/Spottable/tests/useSpot-specs.js

@@ -4,6 +4,7 @@ import '@testing-library/jest-dom';
 import {fireEvent, render, screen} from '@testing-library/react';
 import classNames from 'classnames';
 import {Component} from 'react';
+import ReactDOM from 'react-dom';
 
 import Spotlight from '../../src/spotlight.js';
 import useSpottable from '../useSpottable';
@@ -83,6 +84,8 @@ describe('useSpottable', () => {
 
 	class SpottableComponent extends Component {
 		componentDidMount () {
+			// eslint-disable-next-line react/no-find-dom-node
+			this.node = ReactDOM.findDOMNode(this);
 		}
 
 		get componentRef () {

packages/ui/Placeholder/PlaceholderControllerDecorator.js

@@ -3,6 +3,7 @@ import hoc from '@enact/core/hoc';
 import {Job} from '@enact/core/util';
 import Registry from '@enact/core/internal/Registry';
 import {createContext, Component} from 'react';
+import ReactDOM from 'react-dom';
 
 /**
  * Default config for `PlaceholderControllerDecorator`.
@@ -84,6 +85,8 @@ const PlaceholderControllerDecorator = hoc(defaultConfig, (config, Wrapped) => {
 				this.bounds = Object.assign({}, bounds);
 			} else {
 				// Allowing findDOMNode for HOCs versus adding extra ref props
+				// eslint-disable-next-line	react/no-find-dom-node
+				this.node = ReactDOM.findDOMNode(this);
 				this.bounds = {
 					height: this.node.offsetHeight,
 					width: this.node.offsetWidth

packages/ui/Scrollable/Scrollbar.js

@@ -2,6 +2,7 @@ import classNames from 'classnames';
 import {Job} from '@enact/core/util';
 import PropTypes from 'prop-types';
 import {createRef, PureComponent, Component} from 'react';
+import ReactDOM from 'react-dom';
 
 import ri from '../resolution';
 
@@ -22,8 +23,8 @@ const
  * @param {String} variable - CSS Variable property.
  * @param {String} value - CSS Variable value.
  */
-const setCSSVariable = (element, variable, value) => { // eslint-disable-line no-unused-vars
-	// ReactDOM.findDOMNode(element).style.setProperty(variable, value); // eslint-disable-line react/no-find-dom-node
+const setCSSVariable = (element, variable, value) => {
+	ReactDOM.findDOMNode(element).style.setProperty(variable, value); // eslint-disable-line react/no-find-dom-node
 };
 
 /**

packages/ui/ViewManager/View.js

@@ -5,6 +5,7 @@
 import {Job} from '@enact/core/util';
 import {cloneElement, Children, Component} from 'react';
 import PropTypes from 'prop-types';
+import ReactDOM from 'react-dom';
 
 import {shape} from './Arranger';
 
@@ -258,6 +259,8 @@ class View extends Component {
 
 		// Need to ensure that we have a valid node reference before we animation. Sometimes, React
 		// will replace the node after mount causing a reference cached there to be invalid.
+		// eslint-disable-next-line react/no-find-dom-node
+		this.node = ReactDOM.findDOMNode(this);
 
 		if (this.animation && this.animation.playState !== 'finished' && this.changeDirection) {
 			this.animation.reverse();

packages/ui/resolution/ResolutionDecorator.js

@@ -5,6 +5,7 @@
  */
 
 import {Component} from 'react';
+import ReactDOM from 'react-dom';
 import PropTypes from 'prop-types';
 import hoc from '@enact/core/hoc';
 
@@ -111,6 +112,8 @@ const ResolutionDecorator = hoc(defaultConfig, (config, Wrapped) => {
 
 		componentDidMount () {
 			if (config.dynamic) window.addEventListener('resize', this.handleResize);
+			// eslint-disable-next-line react/no-find-dom-node
+			this.rootNode = ReactDOM.findDOMNode(this);
 		}
 
 		componentWillUnmount () {