chore: upgrade react-popper

output/components.eslint.txt

@@ -55,10 +55,6 @@
 /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
-   67:6  error  Static HTML elements with event handlers require a role            jsx-a11y/no-static-element-interactions
-  108: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
   91:2  error  defaultProp "required" has no corresponding propTypes declaration  react/default-props-match-prop-types
 
@@ -307,5 +303,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)
+✖ 146 problems (126 errors, 20 warnings)
   7 errors and 0 warnings potentially fixable with the `--fix` option.

packages/components/.storybook/addons.js

@@ -1,3 +1,2 @@
 import '@storybook/addon-actions/register';
-import '@storybook/addon-a11y/register';
 import 'storybook-addon-i18next/register';

packages/components/.storybook/config.js

@@ -3,7 +3,6 @@ import '@talend/bootstrap-theme/src/theme/theme.scss';
 import React from 'react';
 
 import { configure, addDecorator } from '@storybook/react';
-import { withA11y } from '@storybook/addon-a11y';
 import { withI18next } from 'storybook-addon-i18next';
 import { locales as tuiLocales } from '@talend/locales-tui/locales';
 
@@ -20,7 +19,6 @@ addDecorator(
 		languages,
 	}),
 );
-addDecorator(withA11y);
 
 addDecorator(storyFn => (
 	<>

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,6 @@
     "react-draggable": "^3.3.0",
     "react-grid-layout": "0.16.6",
     "react-immutable-proptypes": "^2.1.0",
-    "react-popper": "^1.3.7",
     "react-transition-group": "^2.3.1",
     "react-use": "^13.27.0",
     "react-virtualized": "9.21.0",
@@ -67,7 +67,6 @@
     "uuid": "^3.4.0"
   },
   "devDependencies": {
-    "@storybook/addon-a11y": "^5.3.1",
     "@storybook/addon-actions": "^5.3.1",
     "@storybook/addons": "^5.3.1",
     "@storybook/react": "^5.3.1",

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

@@ -3,14 +3,14 @@ import PropTypes from 'prop-types';
 import omit from 'lodash/omit';
 import uuid from 'uuid';
 import classnames from 'classnames';
-import { Popper } from 'react-popper';
 
 import FocusManager from '../../FocusManager';
 import { focusOnCalendar } from '../../Gesture/withCalendarGesture';
 
 import DatePicker from '../Date';
 import TimeZone from '../TimeZone';
 import useInputPickerHandlers from '../hooks/useInputPickerHandlers';
+import { usePopper } from '../../usePopper';
 
 import theme from './InputDatePicker.scss';
 
@@ -38,43 +38,29 @@ export default function InputDatePicker(props) {
 
 	const inputRef = useRef(null);
 	const containerRef = useRef(null);
-
+	const ref = useRef();
 	const handlers = useInputPickerHandlers({
 		handleBlur: props.onBlur,
 		handleChange: props.onChange,
 		handleKeyDown: () => focusOnCalendar(containerRef.current),
 	});
+	usePopper(inputRef, ref, {
+		modifiers: [
+			{ name: 'hide', enabled: false },
+			{ name: 'preventOverflow', enabled: false },
+		],
+		placement: handlers.getPopperPlacement(inputRef.current),
+		strategy: 'fixed',
+	});
 
 	const inputProps = omit(props, PROPS_TO_OMIT_FOR_INPUT);
 	const datePicker = [
 		<DatePicker.Input {...inputProps} id={`${props.id}-input`} key="input" inputRef={inputRef} />,
 		handlers.showPicker && (
-			<Popper
-				key="popper"
-				modifiers={{
-					hide: {
-						enabled: false,
-					},
-					preventOverflow: {
-						enabled: false,
-					},
-				}}
-				placement={handlers.getPopperPlacement(inputRef.current)}
-				positionFixed
-				referenceElement={inputRef.current}
-			>
-				{({ ref, style }) => (
-					<div
-						id={popoverId}
-						className={theme.popper}
-						style={style}
-						ref={ref}
-						onMouseDown={onMouseDown}
-					>
-						<DatePicker.Picker {...props} />
-					</div>
-				)}
-			</Popper>
+			// eslint-disable-next-line jsx-a11y/no-static-element-interactions
+			<div id={popoverId} className={theme.popper} ref={ref} onMouseDown={onMouseDown}>
+				<DatePicker.Picker {...props} />
+			</div>
 		),
 		!props.hideTimezone && props.timezone && <TimeZone key="timezone" timezone={props.timezone} />,
 	].filter(Boolean);
@@ -118,4 +104,5 @@ InputDatePicker.propTypes = {
 	timezone: PropTypes.string,
 	hideTimezone: PropTypes.bool,
 	useUTC: PropTypes.bool,
+	required: PropTypes.bool,
 };

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

@@ -2,7 +2,6 @@ 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 FocusManager from '../../FocusManager';
 import { focusOnCalendar } from '../../Gesture/withCalendarGesture';
@@ -14,6 +13,7 @@ import useInputPickerHandlers from '../hooks/useInputPickerHandlers';
 
 import getDefaultT from '../../translate';
 
+import { usePopper } from '../../usePopper';
 import theme from './InputDateRangePicker.scss';
 
 const PROPS_TO_OMIT_FOR_INPUT = ['id', 'dateFormat', 'onBlur', 'onChange', 't'];
@@ -25,6 +25,7 @@ export default function InputDateRangePicker(props) {
 	const endDateInputRef = useRef(null);
 	const containerRef = useRef(null);
 	const [inputRef, setInputRef] = useState(null);
+	const pickerRef = useRef();
 
 	const handlers = useInputPickerHandlers({
 		handleBlur: props.onBlur,
@@ -50,6 +51,14 @@ export default function InputDateRangePicker(props) {
 		}
 		handlers.onChange(event, payload, inputRef.current);
 	}
+	usePopper(inputRef, pickerRef, {
+		modifiers: [
+			{ name: 'hide', enabled: false },
+			{ name: 'preventOverflow', enabled: false },
+		],
+		placement: inputRef ? handlers.getPopperPlacement(inputRef.current) : 'bottom-start',
+		strategy: 'fixed',
+	});
 	return (
 		<DateRange.Manager
 			startDate={props.startDate}
@@ -93,26 +102,9 @@ export default function InputDateRangePicker(props) {
 								ref={endDateInputRef}
 							/>
 							{handlers.showPicker && inputRef && (
-								<Popper
-									key="popper"
-									modifiers={{
-										hide: {
-											enabled: false,
-										},
-										preventOverflow: {
-											enabled: false,
-										},
-									}}
-									placement={handlers.getPopperPlacement(inputRef.current)}
-									positionFixed
-									referenceElement={inputRef.current}
-								>
-									{({ ref, style }) => (
-										<div id={popoverId} className={theme.popper} style={style} ref={ref}>
-											<DateRange.Picker {...props} focusedInput={getFocusedInput()} />
-										</div>
-									)}
-								</Popper>
+								<div id={popoverId} className={theme.popper} ref={pickerRef}>
+									<DateRange.Picker {...props} focusedInput={getFocusedInput()} />
+								</div>
 							)}
 						</FocusManager>
 					);

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

@@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import omit from 'lodash/omit';
 import uuid from 'uuid';
-import { Popper } from 'react-popper';
 
 import FocusManager from '../../FocusManager';
 import Time from '../Time';
@@ -12,6 +11,7 @@ import TimeZone from '../TimeZone';
 import theme from './InputTimePicker.scss';
 import useInputPickerHandlers from '../hooks/useInputPickerHandlers';
 import focusOnTime from '../gesture/timePickerGesture';
+import { usePopper } from '../../usePopper';
 
 const PROPS_TO_OMIT_FOR_INPUT = [
 	'id',
@@ -28,42 +28,28 @@ export default function InputTimePicker(props) {
 
 	const inputRef = useRef(null);
 	const containerRef = useRef(null);
+	const ref = useRef(null);
 
 	const handlers = useInputPickerHandlers({
 		handleBlur: props.onBlur,
 		handleChange: props.onChange,
 		handleKeyDown: () => focusOnTime(containerRef.current),
 	});
-
+	usePopper(inputRef, ref, {
+		modifiers: [
+			{ name: 'hide', enabled: false },
+			{ name: 'preventOverflow', enabled: false },
+		],
+		placement: inputRef ? handlers.getPopperPlacement(inputRef.current) : 'bottom-start',
+		strategy: 'fixed',
+	});
 	const inputProps = omit(props, PROPS_TO_OMIT_FOR_INPUT);
 	const timePicker = [
-		<Time.Input
-			{...inputProps}
-			id={`${props.id}-input`}
-			key="input"
-			inputRef={inputRef}
-		/>,
+		<Time.Input {...inputProps} id={`${props.id}-input`} key="input" inputRef={inputRef} />,
 		handlers.showPicker && (
-			<Popper
-				key="popper"
-				modifiers={{
-					hide: {
-						enabled: false,
-					},
-					preventOverflow: {
-						enabled: false,
-					},
-				}}
-				placement={handlers.getPopperPlacement(inputRef.current)}
-				positionFixed
-				referenceElement={inputRef.current}
-			>
-				{({ ref, style }) => (
-					<div id={popoverId} className={theme.popper} style={style} ref={ref}>
-						<Time.Picker {...props} />
-					</div>
-				)}
-			</Popper>
+			<div id={popoverId} className={theme.popper} ref={ref}>
+				<Time.Picker {...props} />
+			</div>
 		),
 		props.timezone && <TimeZone key="timezone" timezone={props.timezone} />,
 	].filter(Boolean);

packages/components/src/DateTimePickers/LegacyDateTimePickers/InputDateTimePicker/InputDateTimePicker.component.js

@@ -4,12 +4,12 @@ import PropTypes from 'prop-types';
 import omit from 'lodash/omit';
 import keycode from 'keycode';
 import uuid from 'uuid';
-import { Popper } from 'react-popper';
 
 import FocusManager from '../../../FocusManager';
 import { DateTimeContext } from '../DateTime/Context';
 import DateTime from '../DateTime';
 import { focusOnCalendar } from '../../../Gesture/withCalendarGesture';
+import { usePopper } from '../../../usePopper';
 
 import theme from './InputDateTimePicker.scss';
 
@@ -30,6 +30,33 @@ function onMouseDown(event) {
 	event.stopPropagation();
 }
 
+function Popper(props) {
+	const ref = React.useRef();
+	usePopper(props.inputRef, ref, {
+		modifiers: [
+			{ name: 'hide', enabled: false },
+			{ name: 'preventOverflow', enabled: false },
+		],
+		placement: props.getPopperPlacement(),
+		strategy: 'fixed',
+	});
+	return (
+		<div id={props.popoverId} className={theme.popper} ref={ref} onMouseDown={onMouseDown}>
+			<DateTime.Picker />
+			{props.formMode && <DateTime.Validation />}
+		</div>
+	);
+}
+Popper.propTypes = {
+	formMode: PropTypes.bool.isRequired,
+	popoverId: PropTypes.string.isRequired,
+	getPopperPlacement: PropTypes.func.isRequired,
+	inputRef: PropTypes.oneOfType([
+		PropTypes.func,
+		PropTypes.shape({ current: PropTypes.instanceOf(HTMLInputElement) }),
+	]),
+};
+
 class InputDateTimePicker extends React.Component {
 	static propTypes = {
 		id: PropTypes.string.isRequired,
@@ -168,32 +195,12 @@ class InputDateTimePicker extends React.Component {
 			/>,
 			this.state.showPicker && (
 				<Popper
-					key="popper"
-					modifiers={{
-						hide: {
-							enabled: false,
-						},
-						preventOverflow: {
-							enabled: false,
-						},
-					}}
-					placement={this.getPopperPlacement()}
-					positionFixed
-					referenceElement={this.inputRef}
-				>
-					{({ ref, style }) => (
-						<div
-							id={this.popoverId}
-							className={theme.popper}
-							style={style}
-							ref={ref}
-							onMouseDown={onMouseDown}
-						>
-							<DateTime.Picker />
-							{this.props.formMode && <DateTime.Validation />}
-						</div>
-					)}
-				</Popper>
+					inputRef={this.inputRef}
+					popoverId={this.popoverId}
+					onMouseDown={this.onMouseDown}
+					formMode={this.formMode}
+					getPopperPlacement={this.getPopperPlacement}
+				/>
 			),
 		].filter(Boolean);