8000 [material-ui] Cherry pick ref accessing PRs (#44543) · mui/material-ui@6003187 · GitHub
[go: up one dir, main page]
Skip t 8000 o content

Commit 6003187

Browse files
DiegoAndaiDiegoAndai
authored
[material-ui] Cherry pick ref accessing PRs (#44543)
1 parent 9172305 commit 6003187

File tree

19 files changed

+114
-29
lines changed

19 files changed

+114
-29
lines changed

‎packages/mui-base/src/ClickAwayListener/ClickAwayListener.tsx

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import {
77
unstable_ownerDocument as ownerDocument,
88
unstable_useForkRef as useForkRef,
99
unstable_useEventCallback as useEventCallback,
10+
unstable_getReactElementRef as getReactElementRef,
1011
} from '@mui/utils';
1112

1213
// TODO: return `EventHandlerName extends `on${infer EventName}` ? Lowercase<EventName> : never` once generatePropTypes runs with TS 4.1
@@ -94,11 +95,7 @@ function ClickAwayListener(props: ClickAwayListenerProps): React.JSX.Element {
9495
};
9596
}, []);
9697

97-
const handleRef = useForkRef(
98-
// @ts-expect-error TODO upstream fix
99-
children.ref,
100-
nodeRef,
101-
);
98+
const handleRef = useForkRef(getReactElementRef(children), nodeRef);
10299

103100
// The handler doesn't take event.defaultPrevented into account:
104101
//

‎packages/mui-base/src/FocusTrap/FocusTrap.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import {
77
elementAcceptingRef,
88
unstable_useForkRef as useForkRef,
99
unstable_ownerDocument as ownerDocument,
10+
unstable_getReactElementRef as getReactElementRef,
1011
} from '@mui/utils';
1112
import { FocusTrapProps } from './FocusTrap.types';
1213

@@ -152,8 +153,7 @@ function FocusTrap(props: FocusTrapProps): React.JSX.Element {
152153
const activated = React.useRef(false);
153154

154155
const rootRef = React.useRef<HTMLElement>(null);
155-
// @ts-expect-error TODO upstream fix
156-
const handleRef = useForkRef(children.ref, rootRef);
156+
const handleRef = useForkRef(getReactElementRef(children), rootRef);
157157
const lastKeydown = React.useRef<KeyboardEvent | null>(null);
158158

159159
React.useEffect(() => {

‎packages/mui-base/src/Portal/Portal.tsx

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
22
import * as React from 'react';
33
import * as ReactDOM from 'react-dom';
44
import PropTypes from 'prop-types';
5+
import getReactElementRef from '@mui/utils/getReactElementRef';
56
import {
67
exactProp,
78
HTMLElementType,
@@ -33,8 +34,11 @@ const Portal = React.forwardRef(function Portal(
3334
) {
3435
const { children, container, disablePortal = false } = props;
3536
const [mountNode, setMountNode] = React.useState<ReturnType<typeof getContainer>>(null);
36-
// @ts-expect-error TODO upstream fix
37-
const handleRef = useForkRef(React.isValidElement(children) ? children.ref : null, forwardedRef);
37+
38+
const handleRef = useForkRef(
39+
React.isValidElement(children) ? getReactElementRef(children) : null,
40+
forwardedRef,
41+
);
3842

3943
useEnhancedEffect(() => {
4044
if (!disablePortal) {

‎packages/mui-joy/src/Tooltip/Tooltip.tsx

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import {
1111
unstable_useId as useId,
1212
unstable_useTimeout as useTimeout,
1313
unstable_Timeout as Timeout,
14+
unstable_getReactElementRef as getReactElementRef,
1415
} from '@mui/utils';
1516
import { Popper, unstable_composeClasses as composeClasses } from '@mui/base';
1617
import { OverridableComponent } from '@mui/types';
@@ -424,10 +425,7 @@ const Tooltip = React.forwardRef(function Tooltip(inProps, ref) {
424425

425426
const handleUseRef = useForkRef(setChildNode, ref);
426427
const handleFocusRef = useForkRef<Element>(focusVisibleRef, handleUseRef);
427-
const handleRef = useForkRef(
428-
(children as unknown as { ref: React.Ref<HTMLElement> }).ref,
429-
handleFocusRef,
430-
);
428+
const handleRef = useForkRef(getReactElementRef(children), handleFocusRef);
431429

432430
// There is no point in displaying an empty tooltip.
433431
if (typeof title !== 'number' && !title) {

‎packages/mui-material/src/ClickAwayListener/ClickAwayListener.tsx

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import {
88
unstable_useForkRef as useForkRef,
99
unstable_useEventCallback as useEventCallback,
1010
} from '@mui/utils';
11+
import getReactElementRef from '@mui/utils/getReactElementRef';
1112

1213
// TODO: return `EventHandlerName extends `on${infer EventName}` ? Lowercase<EventName> : never` once generatePropTypes runs with TS 4.1
1314
function mapEventPropToEvent(
@@ -95,11 +96,7 @@ function ClickAwayListener(props: ClickAwayListenerProps): JSX.Element {
9596
};
9697
}, []);
9798

98-
const handleRef = useForkRef(
99-
// @ts-expect-error TODO upstream fix
100-
children.ref,
101-
nodeRef,
102-
);
99+
const handleRef = useForkRef(getReactElementRef(children), nodeRef);
103100

104101
// The handler doesn't take event.defaultPrevented into account:
105102
//

‎packages/mui-material/src/Fade/Fade.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import * as React from 'react';
33
import PropTypes from 'prop-types';
44
import { Transition } from 'react-transition-group';
55
import elementAcceptingRef from '@mui/utils/elementAcceptingRef';
6+
import getReactElementRef from '@mui/utils/getReactElementRef';
67
import useTheme from '../styles/useTheme';
78
import { reflow, getTransitionProps } from '../transitions/utils';
89
import useForkRef from '../utils/useForkRef';
@@ -48,7 +49,7 @@ const Fade = React.forwardRef(function Fade(props, ref) {
4849

4950
const enableStrictModeCompat = true;
5051
const nodeRef = React.useRef(null);
51-
const handleRef = useForkRef(nodeRef, children.ref, ref);
52+
const handleRef = useForkRef(nodeRef, getReactElementRef(children), ref);
5253

5354
const normalizedTransitionCallback = (callback) => (maybeIsAppearing) => {
5455
if (callback) {

‎packages/mui-material/src/Grow/Grow.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import * as React from 'react';
33
import PropTypes from 'prop-types';
44
import useTimeout from '@mui/utils/useTimeout';
55
import elementAcceptingRef from '@mui/utils/elementAcceptingRef';
6+
import getReactElementRef from '@mui/utils/getReactElementRef';
67
import { Transition } from 'react-transition-group';
78
import useTheme from '../styles/useTheme';
89
import { getTransitionProps, reflow } from '../transitions/utils';
@@ -61,7 +62,7 @@ const Grow = React.forwardRef(function Grow(props, ref) {
6162
const theme = useTheme();
6263

6364
const nodeRef = React.useRef(null);
64-
const handleRef = useForkRef(nodeRef, children.ref, ref);
65+
const handleRef = useForkRef(nodeRef, getReactElementRef(children), ref);
6566

6667
const normalizedTransitionCallback = (callback) => (maybeIsAppearing) => {
6768
if (callback) {

‎packages/mui-material/src/Portal/Portal.tsx

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import {
88
unstable_useEnhancedEffect as useEnhancedEffect,
99
unstable_useForkRef as useForkRef,
1010
unstable_setRef as setRef,
11+
unstable_getReactElementRef as getReactElementRef,
1112
} from '@mui/utils';
1213
import { PortalProps } from './Portal.types';
1314

@@ -33,8 +34,11 @@ const Portal = React.forwardRef(function Portal(
3334
) {
3435
const { children, container, disablePortal = false } = props;
3536
const [mountNode, setMountNode] = React.useState<ReturnType<typeof getContainer>>(null);
36-
// @ts-expect-error TODO upstream fix
37-
const handleRef = useForkRef(React.isValidElement(children) ? children.ref : null, forwardedRef);
37+
38+
const handleRef = useForkRef(
39+
React.isValidElement(children) ? getReactElementRef(children) : null,
40+
forwardedRef,
41+
);
3842

3943
useEnhancedEffect(() => {
4044
if (!disablePortal) {

‎packages/mui-material/src/Select/Select.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import * as React from 'react';
33
import PropTypes from 'prop-types';
44
import clsx from 'clsx';
55
import deepmerge from '@mui/utils/deepmerge';
6+
import getReactElementRef from '@mui/utils/getReactElementRef';
67
import SelectInput from './SelectInput';
78
import formControlState from '../FormControl/formControlState';
89
import useFormControl from '../FormControl/useFormControl';
@@ -84,7 +85,7 @@ const Select = React.forwardRef(function Select(inProps, ref) {
8485
filled: <StyledFilledInput ownerState={ownerState} />,
8586
}[variant];
8687

87-
const inputComponentRef = useForkRef(ref, InputComponent.ref);
88+
const inputComponentRef = useForkRef(ref, getReactElementRef(InputComponent));
8889

8990
return (
9091
<React.Fragment>

‎packages/mui-material/src/Slide/Slide.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { Transition } from 'react-transition-group';
55
import chainPropTypes from '@mui/utils/chainPropTypes';
66
import HTMLElementType from '@mui/utils/HTMLElementType';
77
import elementAcceptingRef from '@mui/utils/elementAcceptingRef';
8+
import getReactElementRef from '@mui/utils/getReactElementRef';
89
import debounce from '../utils/debounce';
910
import useForkRef from '../utils/useForkRef';
1011
import useTheme from '../styles/useTheme';
@@ -119,7 +120,7 @@ const Slide = React.forwardRef(function Slide(props, ref) {
119120
} = props;
120121

121122
const childrenRef = React.useRef(null);
122-
const handleRef = useForkRef(children.ref, childrenRef, ref);
123+
const handleRef = useForkRef(getReactElementRef(children), childrenRef, ref);
123124

124125
const normalizedTransitionCallback = (callback) => (isAppearing) => {
125126
if (callback) {

0 commit comments

Comments
 (0)
0