chore(components): migrate react-popper to v2

output/components.eslint.txt

@@ -55,16 +55,11 @@
 /home/travis/build/Talend/ui/packages/components/src/DateTimePickers/DateTimeRange/Manager/Manager.component.js
   26:5  warning  React Hook useEffect has missing dependencies: 'state.endDateTime' and 'state.startDateTime'. Either include them or remove the dependency array  react-hooks/exhaustive-deps
 
-/home/travis/build/Talend/ui/packages/components/src/DateTimePickers/InputDatePicker/InputDatePicker.component.js
-   68:6  error  Static HTML elements with event handlers require a role            jsx-a11y/no-static-element-interactions
-  109:2  error  defaultProp "required" has no corresponding propTypes declaration  react/default-props-match-prop-types
-
 /home/travis/build/Talend/ui/packages/components/src/DateTimePickers/InputDateTimePicker/InputDateTimePicker.component.js
   94:2  error  defaultProp "required" has no corresponding propTypes declaration  react/default-props-match-prop-types
 
 /home/travis/build/Talend/ui/packages/components/src/DateTimePickers/InputDateTimeRangePicker/InputDateTimeRangePicker.component.js
-  37:2  warning  The 'showHorizontalAndTest' function makes the dependencies of useEffect Hook (at line 53) change on every render. To fix this, wrap the 'showHorizontalAndTest' definition into its own useCallback() Hook  react-hooks/exhaustive-deps
-  57:5  warning  React Hook useEffect has a missing dependency: 'showHorizontalAndTest'. Either include it or remove the dependency array                                                                                     react-hooks/exhaustive-deps
+  59:5  warning  React Hook useEffect has a missing dependency: 'showHorizontalAndTest'. Either include it or remove the dependency array  react-hooks/exhaustive-deps
 
 /home/travis/build/Talend/ui/packages/components/src/DateTimePickers/LegacyDateTimePickers/DateTime/Manager/Manager.component.js
    79:2   error  componentWillReceiveProps is deprecated since React 16.9.0, use UNSAFE_componentWillReceiveProps instead, see https://reactjs.org/docs/react-component.html#unsafe_componentwillreceiveprops. Use https://github.com/reactjs/react-codemod#rename-unsafe-lifecycles to automatically update your components  react/no-deprecated
@@ -307,5 +302,5 @@
   673:44  error  ["icon"] is better written in dot notation       dot-notation
   679:56  error  ["resizable"] is better written in dot notation  dot-notation
 
-✖ 148 problems (128 errors, 20 warnings)
+✖ 145 problems (126 errors, 19 warnings)
   7 errors and 0 warnings potentially fixable with the `--fix` option.

packages/components/package.json

@@ -34,6 +34,7 @@
     "url": "https://github.com/Talend/ui.git"
   },
   "dependencies": {
+    "@popperjs/core": "^2.6.0",
     "ally.js": "^1.4.1",
     "classnames": "^2.2.5",
     "d3": "^6.3.0",
@@ -54,7 +55,7 @@
     "react-draggable": "^3.3.0",
     "react-grid-layout": "0.16.6",
     "react-immutable-proptypes": "^2.1.0",
-    "react-popper": "^1.3.7",
+    "react-popper": "^2.2.4",
     "react-transition-group": "^2.3.1",
     "react-use": "^13.27.0",
     "react-virtualized": "9.21.0",

packages/components/src/DateTimePickers/InputDatePicker/InputDatePicker.component.js

@@ -1,9 +1,9 @@
-import React, { useRef } from 'react';
+import React, { useRef, useState } from 'react';
 import PropTypes from 'prop-types';
 import omit from 'lodash/omit';
 import uuid from 'uuid';
 import classnames from 'classnames';
-import { Popper } from 'react-popper';
+import { usePopper } from 'react-popper';
 
 import FocusManager from '../../FocusManager';
 import { focusOnCalendar } from '../../Gesture/withCalendarGesture';
@@ -39,6 +39,17 @@ export default function InputDatePicker(props) {
 	const inputRef = useRef(null);
 	const containerRef = useRef(null);
 
+	const [referenceElement, setReferenceElement] = useState(null);
+	const [popperElement, setPopperElement] = useState(null);
+	const { styles, attributes } = usePopper(referenceElement, popperElement, {
+		modifiers: [
+			{ name: 'hide', enabled: false },
+			{ name: 'preventOverflow', enabled: false },
+		],
+		strategy: 'fixed',
+		placement: 'bottom-start',
+	});
+
 	const handlers = useInputPickerHandlers({
 		disabled: props.disabled,
 		handleBlur: props.onBlur,
@@ -48,34 +59,25 @@ export default function InputDatePicker(props) {
 
 	const inputProps = omit(props, PROPS_TO_OMIT_FOR_INPUT);
 	const datePicker = [
-		<DatePicker.Input {...inputProps} id={`${props.id}-input`} key="input" inputRef={inputRef} />,
+		<DatePicker.Input
+			{...inputProps}
+			id={`${props.id}-input`}
+			key="input"
+			inputRef={setReferenceElement}
+		/>,
 		handlers.showPicker && (
-			<Popper
-				key="popper"
-				modifiers={{
-					hide: {
-						enabled: false,
-					},
-					preventOverflow: {
-						enabled: false,
-					},
-				}}
-				placement={handlers.getPopperPlacement(inputRef.current)}
-				positionFixed
-				referenceElement={inputRef.current}
+			// eslint-disable-next-line jsx-a11y/interactive-supports-focus
+			<div
+				id={popoverId}
+				role="button"
+				className={theme.popper}
+				ref={setPopperElement}
+				style={styles.popper}
+				{...attributes.popper}
+				onMouseDown={onMouseDown}
 			>
-				{({ ref, style }) => (
-					<div
-						id={popoverId}
-						className={theme.popper}
-						style={style}
-						ref={ref}
-						onMouseDown={onMouseDown}
-					>
-						<DatePicker.Picker {...props} />
-					</div>
-				)}
-			</Popper>
+				<DatePicker.Picker {...props} />
+			</div>
 		),
 		!props.hideTimezone && props.timezone && <TimeZone key="timezone" timezone={props.timezone} />,
 	].filter(Boolean);
@@ -119,5 +121,6 @@ InputDatePicker.propTypes = {
 	timezone: PropTypes.string,
 	hideTimezone: PropTypes.bool,
 	useUTC: PropTypes.bool,
+	required: PropTypes.bool,
 	disabled: PropTypes.bool,
 };

packages/components/src/DateTimePickers/InputDateRangePicker/InputDateRangePicker.component.js

@@ -2,7 +2,7 @@ import React, { useRef, useState } from 'react';
 import PropTypes from 'prop-types';
 import omit from 'lodash/omit';
 import classnames from 'classnames';
-import { Popper } from 'react-popper';
+import { usePopper } from 'react-popper';
 
 import FocusManager from '../../FocusManager';
 import { focusOnCalendar } from '../../Gesture/withCalendarGesture';
@@ -24,7 +24,17 @@ export default function InputDateRangePicker(props) {
 	const startDateInputRef = useRef(null);
 	const endDateInputRef = useRef(null);
 	const containerRef = useRef(null);
-	const [inputRef, setInputRef] = useState(null);
+
+	const [referenceElement, setReferenceElement] = useState(null);
+	const [popperElement, setPopperElement] = useState(null);
+	const { styles, attributes } = usePopper(referenceElement, popperElement, {
+		modifiers: [
+			{ name: 'hide', enabled: false },
+			{ name: 'preventOverflow', enabled: false },
+		],
+		strategy: 'fixed',
+		placement: 'bottom-start',
+	});
 
 	const handlers = useInputPickerHandlers({
 		handleBlur: props.onBlur,
@@ -35,10 +45,10 @@ export default function InputDateRangePicker(props) {
 	const inputProps = omit(props, PROPS_TO_OMIT_FOR_INPUT);
 
 	function getFocusedInput() {
-		if (inputRef === startDateInputRef) {
+		if (referenceElement === startDateInputRef.current) {
 			return 'startDate';
 		}
-		if (inputRef === endDateInputRef) {
+		if (referenceElement === endDateInputRef.current) {
 			return 'endDate';
 		}
 		return null;
@@ -48,7 +58,7 @@ export default function InputDateRangePicker(props) {
 		if (payload.origin === 'START_PICKER' && endDateInputRef) {
 			endDateInputRef.current.focus();
 		}
-		handlers.onChange(event, payload, inputRef.current);
+		handlers.onChange(event, payload, referenceElement);
 	}
 	return (
 		<DateRange.Manager
@@ -68,15 +78,15 @@ export default function InputDateRangePicker(props) {
 							onFocusIn={handlers.onFocus}
 							onFocusOut={handlers.onBlur}
 							onKeyDown={event => {
-								handlers.onKeyDown(event, inputRef.current);
+								handlers.onKeyDown(event, referenceElement);
 							}}
 						>
 							<DateRange.Input
 								{...inputProps}
 								id={`${props.id}-start-input`}
 								date={startDate}
 								onChange={onStartChange}
-								onFocus={() => setInputRef(startDateInputRef)}
+								onFocus={() => setReferenceElement(startDateInputRef.current)}
 								label={props.t('TC_DATE_PICKER_RANGE_FROM', { defaultValue: 'From' })}
 								ref={startDateInputRef}
 							/>
@@ -88,31 +98,20 @@ export default function InputDateRangePicker(props) {
 								id={`${props.id}-end-input`}
 								date={endDate}
 								onChange={onEndChange}
-								onFocus={() => setInputRef(endDateInputRef)}
+								onFocus={() => setReferenceElement(endDateInputRef.current)}
 								label={props.t('TC_DATE_PICKER__RANGE_TO', { defaultValue: 'To' })}
 								ref={endDateInputRef}
 							/>
-							{handlers.showPicker && inputRef && (
-								<Popper
-									key="popper"
-									modifiers={{
-										hide: {
-											enabled: false,
-										},
-										preventOverflow: {
-											enabled: false,
-										},
-									}}
-									placement={handlers.getPopperPlacement(inputRef.current)}
-									positionFixed
-									referenceElement={inputRef.current}
+							{handlers.showPicker && (
+								<div
+									id={popoverId}
+									className={theme.popper}
+									ref={setPopperElement}
+									style={styles.popper}
+									{...attributes.popper}
 								>
-									{({ ref, style }) => (
-										<div id={popoverId} className={theme.popper} style={style} ref={ref}>
-											<DateRange.Picker {...props} focusedInput={getFocusedInput()} />
-										</div>
-									)}
-								</Popper>
+									<DateRange.Picker {...props} focusedInput={getFocusedInput()} />
+								</div>
 							)}
 						</FocusManager>
 					);

packages/components/src/DateTimePickers/InputDateTimePicker/__snapshots__/InputDateTimePicker.component.test.js.snap

@@ -78,19 +78,7 @@ exports[`InputDateTimePicker should render 1`] = `
               >
                 <Date.Input
                   id="my-picker-date-picker-input"
-                  inputRef={
-                    Object {
-                      "current": <input
-                        autocomplete="off"
-                        class="form-control"
-                        id="my-picker-date-picker-input"
-                        placeholder="YYYY-MM-DD"
-                        style="width: 47px;"
-                        type="text"
-                        value="2017-04-04"
-                      />,
-                    }
-                  }
+                  inputRef={[Function]}
                   key="input"
                 >
                   <InputSizer
@@ -104,19 +92,7 @@ exports[`InputDateTimePicker should render 1`] = `
                       forceNotifyByEnter={true}
                       forceNotifyOnBlur={true}
                       id="my-picker-date-picker-input"
-                      inputRef={
-                        Object {
-                          "current": <input
-                            autocomplete="off"
-                            class="form-control"
-                            id="my-picker-date-picker-input"
-                            placeholder="YYYY-MM-DD"
-                            style="width: 47px;"
-                            type="text"
-                            value="2017-04-04"
-                          />,
-                        }
-                      }
+                      inputRef={[Function]}
                       minLength={0}
                       onChange={[Function]}
                       placeholder="YYYY-MM-DD"
@@ -227,20 +203,7 @@ exports[`InputDateTimePicker should render 1`] = `
               >
                 <Time.Input
                   id="my-picker-time-picker-input"
-                  inputRef={
-                    Object {
-                      "current": <input
-                        autocomplete="off"
-                        class="form-control theme-time-picker-input"
-                        id="my-picker-time-picker-input"
-                        maxlength="8"
-                        placeholder="HH:mm:ss"
-                        style="width: 47px;"
-                        type="text"
-                        value="15:27:00"
-                      />,
-                    }
-                  }
+                  inputRef={[Function]}
                   key="input"
                 >
                   <InputSizer
@@ -254,20 +217,7 @@ exports[`InputDateTimePicker should render 1`] = `
                       forceNotifyByEnter={true}
                       forceNotifyOnBlur={true}
                       id="my-picker-time-picker-input"
-                      inputRef={
-                        Object {
-                          "current": <input
-                            autocomplete="off"
-                            class="form-control theme-time-picker-input"
-                            id="my-picker-time-picker-input"
-                            maxlength="8"
-                            placeholder="HH:mm:ss"
-                            style="width: 47px;"
-                            type="text"
-                            value="15:27:00"
-                          />,
-                        }
-                      }
+                      inputRef={[Function]}
                       maxLength={8}
                       minLength={0}
                       onChange={[Function]}

packages/components/src/DateTimePickers/InputDateTimeRangePicker/InputDateTimeRangePicker.component.js

@@ -34,18 +34,20 @@ function InputDateTimeRangePicker(props) {
 		? classnames(theme['range-picker-vertical'], 'range-picker-vertical')
 		: classnames(theme['range-picker'], 'range-picker');
 
-	function showHorizontalAndTest() {
-		if (vertical) {
-			setVertical(false);
-		}
-		// delay for the display to update
-		setTimeout(() => {
-			const rangeContainer = containerRef.current;
-			if (rangeContainer && rangeContainer.scrollWidth > rangeContainer.offsetWidth) {
-				setVertical(true);
+	const showHorizontalAndTest = React.useMemo(() => {
+		return function showHorizontal() {
+			if (vertical) {
+				setVertical(false);
 			}
-		});
-	}
+			// delay for the display to update
+			setTimeout(() => {
+				const rangeContainer = containerRef.current;
+				if (rangeContainer && rangeContainer.scrollWidth > rangeContainer.offsetWidth) {
+					setVertical(true);
+				}
+			});
+		};
+	}, [vertical]);
 
 	useEffect(() => {
 		const resizeListener = window.addEventListener('resize', debounce(showHorizontalAndTest, 200));