Skip to content

Commit f773cef

Browse files
oliviertassinarioliviertassinari
committed
Revert "[Popover] Deprecate transition onX props (mui#22202)"
This reverts commit c360619.
1 parent a3e7b1d commit f773cef

File tree

6 files changed

+50
-195
lines changed

6 files changed

+50
-195
lines changed

‎docs/pages/api-docs/popover.md

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -40,12 +40,12 @@ The `MuiPopover` name can be used for providing [default props](/customization/g
4040
| <span class="prop-name">getContentAnchorEl</span> | <span class="prop-type">func</span> | | This function is called in order to retrieve the content anchor element. It's the opposite of the `anchorEl` prop. The content anchor element should be an element inside the popover. It's used to correctly scroll and set the position of the popover. The positioning strategy tries to make the content anchor element just above the anchor element. |
4141
| <span class="prop-name">marginThreshold</span> | <span class="prop-type">number</span> | <span class="prop-default">16</span> | Specifies how close to the edge of the window the popover can appear. |
4242
| <span class="prop-name">onClose</span> | <span class="prop-type">func</span> | | Callback fired when the component requests to be closed. |
43-
| ~~<span class="prop-name">onEnter</span>~~ | <span class="prop-type">func</span> | | *Deprecated*. Use the `TransitionProps` prop instead.<br><br>Callback fired before the component is entering. |
44-
| ~~<span class="prop-name">onEntered</span>~~ | <span class="prop-type">func</span> | | *Deprecated*. Use the `TransitionProps` prop instead.<br><br>Callback fired when the component has entered. |
45-
| ~~<span class="prop-name">onEntering</span>~~ | <span class="prop-type">func</span> | | *Deprecated*. Use the `TransitionProps` prop instead.<br><br>Callback fired when the component is entering. |
46-
| ~~<span class="prop-name">onExit</span>~~ | <span class="prop-type">func</span> | | *Deprecated*. Use the `TransitionProps` prop instead.<br><br>Callback fired before the component is exiting. |
47-
| ~~<span class="prop-name">onExited</span>~~ | <span class="prop-type">func</span> | | *Deprecated*. Use the `TransitionProps` prop instead.<br><br>Callback fired when the component has exited. |
48-
| ~~<span class="prop-name">onExiting</span>~~ | <span class="prop-type">func</span> | | *Deprecated*. Use the `TransitionProps` prop instead.<br><br>Callback fired when the component is exiting. |
43+
| <span class="prop-name">onEnter</span> | <span class="prop-type">func</span> | | Callback fired before the component is entering. |
44+
| <span class="prop-name">onEntered</span> | <span class="prop-type">func</span> | | Callback fired when the component has entered. |
45+
| <span class="prop-name">onEntering</span> | <span class="prop-type">func</span> | | Callback fired when the component is entering. |
46+
| <span class="prop-name">onExit</span> | <span class="prop-type">func</span> | | Callback fired before the component is exiting. |
47+
| <span class="prop-name">onExited</span> | <span class="prop-type">func</span> | | Callback fired when the component has exited. |
48+
| <span class="prop-name">onExiting</span> | <span class="prop-type">func</span> | | Callback fired when the component is exiting. |
4949
| <span class="prop-name required">open<abbr title="required">*</abbr></span> | <span class="prop-type">bool</span> | | If `true`, the popover is visible. |
5050
| <span class="prop-name">PaperProps</span> | <span class="prop-type">{ component?: element type }</span> | <span class="prop-default">{}</span> | Props applied to the [`Paper`](/api/paper/) element. |
5151
| <span class="prop-name">transformOrigin</span> | <span class="prop-type">{ horizontal: 'center'<br>&#124;&nbsp;'left'<br>&#124;&nbsp;'right'<br>&#124;&nbsp;number, vertical: 'bottom'<br>&#124;&nbsp;'center'<br>&#124;&nbsp;'top'<br>&#124;&nbsp;number }</span> | <span class="prop-default">{ vertical: 'top', horizontal: 'left',}</span> | This is the point on the popover which will attach to the anchor's origin.<br>Options: vertical: [top, center, bottom, x(px)]; horizontal: [left, center, right, x(px)]. |

‎packages/material-ui/src/Menu/Menu.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -135,7 +135,7 @@ const Menu = React.forwardRef(function Menu(props, ref) {
135135
getContentAnchorEl={getContentAnchorEl}
136136
classes={PopoverClasses}
137137
onClose={onClose}
138-
TransitionProps={{ onEntering: handleEntering }}
138+
onEntering={handleEntering}
139139
anchorOrigin={theme.direction === 'rtl' ? RTL_ORIGIN : LTR_ORIGIN}
140140
transformOrigin={theme.direction === 'rtl' ? RTL_ORIGIN : LTR_ORIGIN}
141141
PaperProps={{

‎packages/material-ui/src/Menu/Menu.test.js

Lines changed: 22 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -44,16 +44,14 @@ describe('<Menu />', () => {
4444

4545
const wrapper = mount(
4646
<Menu
47-
TransitionProps={{
48-
onEnter: handleEnter,
49-
onEntering: handleEntering,
50-
onEntered: () => {
51-
expect(handleEnter.callCount).to.equal(1);
52-
expect(handleEnter.args[0].length).to.equal(2);
53-
expect(handleEntering.callCount).to.equal(1);
54-
expect(handleEntering.args[0].length).to.equal(2);
55-
done();
56-
},
47+
onEnter={handleEnter}
48+
onEntering={handleEntering}
49+
onEntered={() => {
50+
expect(handleEnter.callCount).to.equal(1);
51+
expect(handleEnter.args[0].length).to.equal(2);
52+
expect(handleEntering.callCount).to.equal(1);
53+
expect(handleEntering.args[0].length).to.equal(2);
54+
done();
5755
}}
5856
{...defaultProps}
5957
/>,
@@ -72,16 +70,14 @@ describe('<Menu />', () => {
7270

7371
const wrapper = mount(
7472
<Menu
75-
TransitionProps={{
76-
onExit: handleExit,
77-
onExiting: handleExiting,
78-
onExited: () => {
79-
expect(handleExit.callCount).to.equal(1);
80-
expect(handleExit.args[0].length).to.equal(1);
81-
expect(handleExiting.callCount).to.equal(1);
82-
expect(handleExiting.args[0].length).to.equal(1);
83-
done();
84-
},
73+
onExit={handleExit}
74+
onExiting={handleExiting}
75+
onExited={() => {
76+
expect(handleExit.callCount).to.equal(1);
77+
expect(handleExit.args[0].length).to.equal(1);
78+
expect(handleExiting.callCount).to.equal(1);
79+
expect(handleExiting.args[0].length).to.equal(1);
80+
done();
8581
}}
8682
{...defaultProps}
8783
open
@@ -165,34 +161,28 @@ describe('<Menu />', () => {
165161
expect(false).to.equal(menuEl.contains(document.activeElement));
166162
});
167163

168-
it('should call TransitionProps.onEntering with element if exists', () => {
164+
it('should call props.onEntering with element if exists', () => {
169165
const onEnteringSpy = spy();
170-
const wrapper = mount(
171-
<Menu {...defaultProps} TransitionProps={{ onEntering: onEnteringSpy }} />,
172-
);
166+
const wrapper = mount(<Menu {...defaultProps} onEntering={onEnteringSpy} />);
173167
const popover = wrapper.find(Popover);
174168

175169
const elementForHandleEnter = { clientHeight: MENU_LIST_HEIGHT };
176170

177-
popover.props().TransitionProps.onEntering(elementForHandleEnter);
171+
popover.props().onEntering(elementForHandleEnter);
178172
expect(onEnteringSpy.callCount).to.equal(1);
179173
expect(onEnteringSpy.calledWith(elementForHandleEnter)).to.equal(true);
180174
});
181175

182-
it('should call TransitionProps.onEntering, disableAutoFocusItem', () => {
176+
it('should call props.onEntering, disableAutoFocusItem', () => {
183177
const onEnteringSpy = spy();
184178
const wrapper = mount(
185-
<Menu
186-
disableAutoFocusItem
187-
{...defaultProps}
188-
TransitionProps={{ onEntering: onEnteringSpy }}
189-
/>,
179+
<Menu disableAutoFocusItem {...defaultProps} onEntering={onEnteringSpy} />,
190180
);
191181
const popover = wrapper.find(Popover);
192182

193183
const elementForHandleEnter = { clientHeight: MENU_LIST_HEIGHT };
194184

195-
popover.props().TransitionProps.onEntering(elementForHandleEnter);
185+
popover.props().onEntering(elementForHandleEnter);
196186
expect(onEnteringSpy.callCount).to.equal(1);
197187
expect(onEnteringSpy.calledWith(elementForHandleEnter)).to.equal(true);
198188
});

‎packages/material-ui/src/Popover/Popover.js

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,6 @@ import clsx from 'clsx';
1212
import ownerDocument from '../utils/ownerDocument';
1313
import ownerWindow from '../utils/ownerWindow';
1414
import createChainedFunction from '../utils/createChainedFunction';
15-
import deprecatedPropType from '../utils/deprecatedPropType';
1615
import withStyles from '../styles/withStyles';
1716
import Modal from '../Modal';
1817
import Grow from '../Grow';
@@ -555,27 +554,27 @@ Popover.propTypes = {
555554
/**
556555
* Callback fired before the component is entering.
557556
*/
558-
onEnter: deprecatedPropType(PropTypes.func, 'Use the `TransitionProps` prop instead.'),
557+
onEnter: PropTypes.func,
559558
/**
560559
* Callback fired when the component has entered.
561560
*/
562-
onEntered: deprecatedPropType(PropTypes.func, 'Use the `TransitionProps` prop instead.'),
561+
onEntered: PropTypes.func,
563562
/**
564563
* Callback fired when the component is entering.
565564
*/
566-
onEntering: deprecatedPropType(PropTypes.func, 'Use the `TransitionProps` prop instead.'),
565+
onEntering: PropTypes.func,
567566
/**
568567
* Callback fired before the component is exiting.
569568
*/
570-
onExit: deprecatedPropType(PropTypes.func, 'Use the `TransitionProps` prop instead.'),
569+
onExit: PropTypes.func,
571570
/**
572571
* Callback fired when the component has exited.
573572
*/
574-
onExited: deprecatedPropType(PropTypes.func, 'Use the `TransitionProps` prop instead.'),
573+
onExited: PropTypes.func,
575574
/**
576575
* Callback fired when the component is exiting.
577576
*/
578-
onExiting: deprecatedPropType(PropTypes.func, 'Use the `TransitionProps` prop instead.'),
577+
onExiting: PropTypes.func,
579578
/**
580579
* If `true`, the popover is visible.
581580
*/

‎packages/material-ui/src/Popover/Popover.test.js

Lines changed: 14 additions & 148 deletions
Original file line numberDiff line numberDiff line change
@@ -215,7 +215,7 @@ describe('<Popover />', () => {
215215

216216
// transitions towards entered
217217
const wrapper = mount(
218-
<Popover {...defaultProps} open transitionDuration={0} TransitionProps={{ ...handlers }}>
218+
<Popover {...defaultProps} open transitionDuration={0} {...handlers}>
219219
<div />
220220
</Popover>,
221221
);
@@ -271,7 +271,7 @@ describe('<Popover />', () => {
271271
it('should set the inline styles for the enter phase', () => {
272272
const handleEntering = spy();
273273
const wrapper = mount(
274-
<Popover {...defaultProps} TransitionProps={{ onEntering: handleEntering }}>
274+
<Popover {...defaultProps} onEntering={handleEntering}>
275275
<div />
276276
</Popover>,
277277
);
@@ -335,11 +335,9 @@ describe('<Popover />', () => {
335335
anchorEl={anchorEl}
336336
anchorOrigin={anchorOrigin}
337337
transitionDuration={0}
338-
TransitionProps={{
339-
onEntered: () => {
340-
popoverEl = document.querySelector('[data-mui-test="Popover"]');
341-
resolve();
342-
},
338+
onEntered={() => {
339+
popoverEl = document.querySelector('[data-mui-test="Popover"]');
340+
resolve();
343341
}}
344342
>
345343
<div />
@@ -483,11 +481,9 @@ describe('<Popover />', () => {
483481
anchorPosition={anchorPosition}
484482
anchorOrigin={anchorOrigin}
485483
transitionDuration={0}
486-
TransitionProps={{
487-
onEntered: () => {
488-
popoverEl = document.querySelector('[data-mui-test="Popover"]');
489-
resolve();
490-
},
484+
onEntered={() => {
485+
popoverEl = document.querySelector('[data-mui-test="Popover"]');
486+
resolve();
491487
}}
492488
>
493489
<div />
@@ -529,11 +525,9 @@ describe('<Popover />', () => {
529525
{...defaultProps}
530526
anchorReference="none"
531527
transitionDuration={0}
532-
TransitionProps={{
533-
onEntered: () => {
534-
popoverEl = document.querySelector('[data-mui-test="Popover"]');
535-
resolve();
536-
},
528+
onEntered={() => {
529+
popoverEl = document.querySelector('[data-mui-test="Popover"]');
530+
resolve();
537531
}}
538532
PaperProps={{
539533
style: {
@@ -584,7 +578,7 @@ describe('<Popover />', () => {
584578
<Popover
585579
anchorEl={mockedAnchor}
586580
open
587-
TransitionProps={{ onEntering: handleEntering }}
581+
onEntering={handleEntering}
588582
transitionDuration={0}
589583
marginThreshold={8}
590584
>
@@ -669,7 +663,7 @@ describe('<Popover />', () => {
669663
<Popover
670664
anchorEl={anchorEl}
671665
open
672-
TransitionProps={{ onEntering: handleEntering }}
666+
onEntering={handleEntering}
673667
marginThreshold={marginThreshold}
674668
PaperProps={{ component: FakePaper }}
675669
>
@@ -791,7 +785,7 @@ describe('<Popover />', () => {
791785
mount(
792786
<Popover
793787
anchorEl={mockedAnchorEl}
794-
TransitionProps={{ onEntering: handleEntering }}
788+
onEntering={handleEntering}
795789
getContentAnchorEl={getContentAnchorEl}
796790
open
797791
>
@@ -828,15 +822,6 @@ describe('<Popover />', () => {
828822
});
829823

830824
describe('prop: TransitionProp', () => {
831-
beforeEach(() => {
832-
PropTypes.resetWarningCache();
833-
stub(console, 'error');
834-
});
835-
836-
afterEach(() => {
837-
console.error.restore();
838-
});
839-
840825
it('chains onEntering with the apparent onEntering prop', () => {
841826
const apparentHandler = spy();
842827
const transitionHandler = spy();
@@ -876,123 +861,4 @@ describe('<Popover />', () => {
876861
expect(transitionHandler.callCount).to.equal(1);
877862
});
878863
});
879-
880-
describe('deprecated transition callback props', () => {
881-
beforeEach(() => {
882-
PropTypes.resetWarningCache();
883-
stub(console, 'error');
884-
});
885-
886-
afterEach(() => {
887-
console.error.restore();
888-
});
889-
890-
describe('prop: onEnter', () => {
891-
it('issues a warning', () => {
892-
PropTypes.checkPropTypes(
893-
Popover.Naked.propTypes,
894-
{
895-
onEnter: () => [],
896-
},
897-
'prop',
898-
'Popover',
899-
);
900-
901-
expect(console.error.callCount).to.equal(2);
902-
expect(console.error.firstCall.args[0]).to.equal(
903-
'Warning: Failed prop type: The prop `onEnter` of `Popover` is deprecated. Use the `TransitionProps` prop instead.',
904-
);
905-
});
906-
});
907-
908-
describe('prop: onEntering', () => {
909-
it('issues a warning', () => {
910-
PropTypes.checkPropTypes(
911-
Popover.Naked.propTypes,
912-
{
913-
onEntering: () => [],
914-
},
915-
'prop',
916-
'Popover',
917-
);
918-
919-
expect(console.error.callCount).to.equal(2);
920-
expect(console.error.firstCall.args[0]).to.equal(
921-
'Warning: Failed prop type: The prop `onEntering` of `Popover` is deprecated. Use the `TransitionProps` prop instead.',
922-
);
923-
});
924-
});
925-
926-
describe('prop: onEntered', () => {
927-
it('issues a warning', () => {
928-
PropTypes.checkPropTypes(
929-
Popover.Naked.propTypes,
930-
{
931-
onEntered: () => [],
932-
},
933-
'prop',
934-
'Popover',
935-
);
936-
937-
expect(console.error.callCount).to.equal(2);
938-
expect(console.error.firstCall.args[0]).to.equal(
939-
'Warning: Failed prop type: The prop `onEntered` of `Popover` is deprecated. Use the `TransitionProps` prop instead.',
940-
);
941-
});
942-
});
943-
944-
describe('prop: onExit', () => {
945-
it('issues a warning', () => {
946-
PropTypes.checkPropTypes(
947-
Popover.Naked.propTypes,
948-
{
949-
onExit: () => [],
950-
},
951-
'prop',
952-
'Popover',
953-
);
954-
955-
expect(console.error.callCount).to.equal(2);
956-
expect(console.error.firstCall.args[0]).to.equal(
957-
'Warning: Failed prop type: The prop `onExit` of `Popover` is deprecated. Use the `TransitionProps` prop instead.',
958-
);
959-
});
960-
});
961-
962-
describe('prop: onExiting', () => {
963-
it('issues a warning', () => {
964-
PropTypes.checkPropTypes(
965-
Popover.Naked.propTypes,
966-
{
967-
onExiting: () => [],
968-
},
969-
'prop',
970-
'Popover',
971-
);
972-
973-
expect(console.error.callCount).to.equal(2);
974-
expect(console.error.firstCall.args[0]).to.equal(
975-
'Warning: Failed prop type: The prop `onExiting` of `Popover` is deprecated. Use the `TransitionProps` prop instead.',
976-
);
977-
});
978-
});
979-
980-
describe('prop: onExited', () => {
981-
it('issues a warning', () => {
982-
PropTypes.checkPropTypes(
983-
Popover.Naked.propTypes,
984-
{
985-
onExited: () => [],
986-
},
987-
'prop',
988-
'Popover',
989-
);
990-
991-
expect(console.error.callCount).to.equal(2);
992-
expect(console.error.firstCall.args[0]).to.equal(
993-
'Warning: Failed prop type: The prop `onExited` of `Popover` is deprecated. Use the `TransitionProps` prop instead.',
994-
);
995-
});
996-
});
997-
});
998864
});

‎packages/material-ui/src/Select/Select.test.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -540,7 +540,7 @@ describe('<Select />', () => {
540540
it('should apply additional props to the Menu component', () => {
541541
const onEntered = spy();
542542
const { getByRole } = render(
543-
<Select MenuProps={{ TransitionProps: { onEntered }, transitionDuration: 100 }} value="10">
543+
<Select MenuProps={{ onEntered, transitionDuration: 100 }} value="10">
544544
<MenuItem value="10">Ten</MenuItem>
545545
</Select>,
546546
);

0 commit comments

Comments
 (0)