From 345fa12dc4c5a953e9c4b80ba4d4fd4d518c7c6f Mon Sep 17 00:00:00 2001 From: Greg Signal Date: Mon, 15 May 2023 15:34:20 +0200 Subject: [PATCH] chore: use react-popper 2.x in bootstrap4 packages (permits React 18 support) (#3642) * chore: use react-popper 2.x (react 18 support) * downgrade react-popper a little + fix modifiers BC * tweak tests * fix rendering in bootstrap 4 * tests * typo * default value for iterable --------- Co-authored-by: Vasily Strelyaev --- .../components/popover.jsx | 15 +++++++++- .../components/popover.test.jsx | 8 ++--- .../dx-react-chart-bootstrap4/package.json | 2 +- .../src/templates/tooltip/overlay.jsx | 15 ++++++++-- .../src/templates/tooltip/overlay.test.jsx | 30 +++++++++++++++---- packages/dx-react-chart-demos/package.json | 2 +- .../demo-sources/export/bootstrap4/demo.jsx | 11 +++++++ .../src/templates/tooltip/overlay.jsx | 26 ++++++++++++++-- .../dx-react-grid-bootstrap4/package.json | 2 +- packages/dx-styles/dx-chart-bs4.scss | 10 +++++++ yarn.lock | 15 +++++++++- 11 files changed, 115 insertions(+), 21 deletions(-) diff --git a/packages/dx-react-bootstrap4/components/popover.jsx b/packages/dx-react-bootstrap4/components/popover.jsx index 2c327769ca..a51cb03d0d 100644 --- a/packages/dx-react-bootstrap4/components/popover.jsx +++ b/packages/dx-react-bootstrap4/components/popover.jsx @@ -77,11 +77,24 @@ export class Popover extends React.PureComponent { renderPopper() { const { children, target, renderInBody, - arrowComponent: ArrowComponent, ...restProps + arrowComponent: ArrowComponent, modifiers = [], + ...restProps } = this.props; + + const popperModifiers = [ + { + name: 'offset', + options: { + offset: [0, 8], + }, + }, + ...modifiers, + ]; + return ( {({ diff --git a/packages/dx-react-bootstrap4/components/popover.test.jsx b/packages/dx-react-bootstrap4/components/popover.test.jsx index bea45ad92a..553788135a 100644 --- a/packages/dx-react-bootstrap4/components/popover.test.jsx +++ b/packages/dx-react-bootstrap4/components/popover.test.jsx @@ -50,7 +50,7 @@ describe('BS4 Popover', () => { ); expect(tree.root.children).toHaveLength(1); - expect(tree.root.find(Popper)).not.toBeNull(); + expect(tree.root.findByType(Popper)).not.toBeNull(); }); it('should render correct elements', () => { @@ -59,10 +59,10 @@ describe('BS4 Popover', () => { ), container); - expect(tree.root.findByProps({className:'popover show bs-popover-undefined'})).not.toBeNull(); - expect(tree.root.findByProps({className:'popover show bs-popover-undefined'}).children).toHaveLength(2); + expect(tree.root.findByProps({className:'popover show bs-popover-bottom'})).not.toBeNull(); + expect(tree.root.findByProps({className:'popover show bs-popover-bottom'}).children).toHaveLength(2); expect(tree.root.findAllByProps({className:'.arrow'})).not.toBeNull(); - expect(tree.root.findByProps({className:'popover-inner'}).parent.props.className).toBe('popover show bs-popover-undefined'); + expect(tree.root.findByProps({className:'popover-inner'}).parent.props.className).toBe('popover show bs-popover-bottom'); expect(tree.root.findByProps({className:'popover-inner'}).find(Content)).not.toBeNull(); }); diff --git a/packages/dx-react-chart-bootstrap4/package.json b/packages/dx-react-chart-bootstrap4/package.json index 63502a04e9..ac59c934c0 100644 --- a/packages/dx-react-chart-bootstrap4/package.json +++ b/packages/dx-react-chart-bootstrap4/package.json @@ -94,7 +94,7 @@ "dependencies": { "clsx": "^1.0.4", "prop-types": "^15.7.2", - "react-popper": "^1.3.11" + "react-popper": "~2.2.5" }, "peerDependencies": { "@devexpress/dx-chart-core": "4.0.3", diff --git a/packages/dx-react-chart-bootstrap4/src/templates/tooltip/overlay.jsx b/packages/dx-react-chart-bootstrap4/src/templates/tooltip/overlay.jsx index 79fc0f0944..e284c33ff3 100644 --- a/packages/dx-react-chart-bootstrap4/src/templates/tooltip/overlay.jsx +++ b/packages/dx-react-chart-bootstrap4/src/templates/tooltip/overlay.jsx @@ -3,9 +3,18 @@ import PropTypes from 'prop-types'; import { RIGHT, TOP } from '@devexpress/dx-chart-core'; import { Popover } from '../../../../dx-react-bootstrap4/components'; -const popperModifiers = { - flip: { enabled: false }, -}; +const popperModifiers = [ + { + name: 'flip', + enabled: false, + }, + { + name: 'preventOverflow', + options: { + altAxis: true, + }, + }, +]; export class Overlay extends React.PureComponent { render() { diff --git a/packages/dx-react-chart-bootstrap4/src/templates/tooltip/overlay.test.jsx b/packages/dx-react-chart-bootstrap4/src/templates/tooltip/overlay.test.jsx index 04bbba259d..c1dbaeab9c 100644 --- a/packages/dx-react-chart-bootstrap4/src/templates/tooltip/overlay.test.jsx +++ b/packages/dx-react-chart-bootstrap4/src/templates/tooltip/overlay.test.jsx @@ -26,9 +26,18 @@ describe('Overlay', () => { placement: 'top', isOpen: true, target: 'test-target', - modifiers: { - flip: { enabled: false }, - }, + modifiers: [ + { + name: 'flip', + enabled: false, + }, + { + name: 'preventOverflow', + options: { + altAxis: true, + }, + }, + ], }); expect(tree.root.findByProps({ className: 'content' })).toBeTruthy(); }); @@ -46,9 +55,18 @@ describe('Overlay', () => { placement: 'right', isOpen: true, target: 'test-target', - modifiers: { - flip: { enabled: false }, - }, + modifiers: [ + { + name: 'flip', + enabled: false, + }, + { + name: 'preventOverflow', + options: { + altAxis: true, + }, + }, + ], }); }); }); diff --git a/packages/dx-react-chart-demos/package.json b/packages/dx-react-chart-demos/package.json index 05630a815f..38f38f2bad 100644 --- a/packages/dx-react-chart-demos/package.json +++ b/packages/dx-react-chart-demos/package.json @@ -55,7 +55,7 @@ "react-bootstrap": "=0.33.1", "react-dom": "^17.0.2", "react-frame-component": "^4.1.3", - "react-popper": "^1.3.11", + "react-popper": "~2.2.5", "react-redux": "^7.2.4", "react-router-dom": "^5.2.0", "redux": "^4.0.4", diff --git a/packages/dx-react-chart-demos/src/demo-sources/export/bootstrap4/demo.jsx b/packages/dx-react-chart-demos/src/demo-sources/export/bootstrap4/demo.jsx index fb8c7975ed..55694770dd 100644 --- a/packages/dx-react-chart-demos/src/demo-sources/export/bootstrap4/demo.jsx +++ b/packages/dx-react-chart-demos/src/demo-sources/export/bootstrap4/demo.jsx @@ -141,6 +141,16 @@ const Export = () => { handleClose(); action(chart); }; + + const modifiers = [ + { + name: 'offset', + options: { + offset: [0, 8], + }, + }, + ]; + return (