From 3c83c7d133d88fadf6490c4721ffd9a2bb6dee44 Mon Sep 17 00:00:00 2001 From: sai chand <60743144+sai6855@users.noreply.github.com> Date: Thu, 19 Sep 2024 20:50:33 +0530 Subject: [PATCH] [material-ui] Improve getReactElementRef() utils (#43022) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Aarón García Hervás --- .../ClickAwayListener/ClickAwayListener.tsx | 4 +- packages/mui-base/src/FocusTrap/FocusTrap.tsx | 4 +- packages/mui-base/src/Portal/Portal.tsx | 8 +++- packages/mui-joy/src/Tooltip/Tooltip.tsx | 4 +- .../ClickAwayListener/ClickAwayListener.tsx | 4 +- packages/mui-material/src/Fade/Fade.js | 4 +- packages/mui-material/src/Grow/Grow.js | 4 +- packages/mui-material/src/Portal/Portal.tsx | 8 +++- packages/mui-material/src/Select/Select.js | 4 +- packages/mui-material/src/Slide/Slide.js | 4 +- packages/mui-material/src/Tooltip/Tooltip.js | 4 +- .../src/Unstable_TrapFocus/FocusTrap.tsx | 4 +- packages/mui-material/src/Zoom/Zoom.js | 4 +- .../getReactElementRef.spec.tsx | 19 +++++++++ .../getReactElementRef.test.tsx | 39 +++++++++++++++++++ .../getReactElementRef/getReactElementRef.ts | 20 ++++++++++ .../mui-utils/src/getReactElementRef/index.ts | 1 + .../src/getReactNodeRef/getReactNodeRef.ts | 22 ----------- .../mui-utils/src/getReactNodeRef/index.ts | 1 - packages/mui-utils/src/index.ts | 2 +- .../src/useForkRef/useForkRef.test.js | 4 +- 21 files changed, 116 insertions(+), 52 deletions(-) create mode 100644 packages/mui-utils/src/getReactElementRef/getReactElementRef.spec.tsx create mode 100644 packages/mui-utils/src/getReactElementRef/getReactElementRef.test.tsx create mode 100644 packages/mui-utils/src/getReactElementRef/getReactElementRef.ts create mode 100644 packages/mui-utils/src/getReactElementRef/index.ts delete mode 100644 packages/mui-utils/src/getReactNodeRef/getReactNodeRef.ts delete mode 100644 packages/mui-utils/src/getReactNodeRef/index.ts diff --git a/packages/mui-base/src/ClickAwayListener/ClickAwayListener.tsx b/packages/mui-base/src/ClickAwayListener/ClickAwayListener.tsx index 8f6fe7e07c8f54..e84ca9b1382b42 100644 --- a/packages/mui-base/src/ClickAwayListener/ClickAwayListener.tsx +++ b/packages/mui-base/src/ClickAwayListener/ClickAwayListener.tsx @@ -7,7 +7,7 @@ import { unstable_ownerDocument as ownerDocument, unstable_useForkRef as useForkRef, unstable_useEventCallback as useEventCallback, - unstable_getReactNodeRef as getReactNodeRef, + unstable_getReactElementRef as getReactElementRef, } from '@mui/utils'; // TODO: return `EventHandlerName extends `on${infer EventName}` ? Lowercase : never` once generatePropTypes runs with TS 4.1 @@ -95,7 +95,7 @@ function ClickAwayListener(props: ClickAwayListenerProps): React.JSX.Element { }; }, []); - const handleRef = useForkRef(getReactNodeRef(children), nodeRef); + const handleRef = useForkRef(getReactElementRef(children), nodeRef); // The handler doesn't take event.defaultPrevented into account: // diff --git a/packages/mui-base/src/FocusTrap/FocusTrap.tsx b/packages/mui-base/src/FocusTrap/FocusTrap.tsx index 84b918c2b4079b..70fed1b257a706 100644 --- a/packages/mui-base/src/FocusTrap/FocusTrap.tsx +++ b/packages/mui-base/src/FocusTrap/FocusTrap.tsx @@ -7,7 +7,7 @@ import { elementAcceptingRef, unstable_useForkRef as useForkRef, unstable_ownerDocument as ownerDocument, - unstable_getReactNodeRef as getReactNodeRef, + unstable_getReactElementRef as getReactElementRef, } from '@mui/utils'; import { FocusTrapProps } from './FocusTrap.types'; @@ -153,7 +153,7 @@ function FocusTrap(props: FocusTrapProps): React.JSX.Element { const activated = React.useRef(false); const rootRef = React.useRef(null); - const handleRef = useForkRef(getReactNodeRef(children), rootRef); + const handleRef = useForkRef(getReactElementRef(children), rootRef); const lastKeydown = React.useRef(null); React.useEffect(() => { diff --git a/packages/mui-base/src/Portal/Portal.tsx b/packages/mui-base/src/Portal/Portal.tsx index 89588fa288ce7d..830b229d8eb175 100644 --- a/packages/mui-base/src/Portal/Portal.tsx +++ b/packages/mui-base/src/Portal/Portal.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import * as ReactDOM from 'react-dom'; import PropTypes from 'prop-types'; -import getReactNodeRef from '@mui/utils/getReactNodeRef'; +import getReactElementRef from '@mui/utils/getReactElementRef'; import { exactProp, HTMLElementType, @@ -34,7 +34,11 @@ const Portal = React.forwardRef(function Portal( ) { const { children, container, disablePortal = false } = props; const [mountNode, setMountNode] = React.useState>(null); - const handleRef = useForkRef(getReactNodeRef(children), forwardedRef); + + const handleRef = useForkRef( + React.isValidElement(children) ? getReactElementRef(children) : null, + forwardedRef, + ); useEnhancedEffect(() => { if (!disablePortal) { diff --git a/packages/mui-joy/src/Tooltip/Tooltip.tsx b/packages/mui-joy/src/Tooltip/Tooltip.tsx index 50b77460533588..6e7108824554a4 100644 --- a/packages/mui-joy/src/Tooltip/Tooltip.tsx +++ b/packages/mui-joy/src/Tooltip/Tooltip.tsx @@ -11,7 +11,7 @@ import { unstable_useId as useId, unstable_useTimeout as useTimeout, unstable_Timeout as Timeout, - unstable_getReactNodeRef as getReactNodeRef, + unstable_getReactElementRef as getReactElementRef, } from '@mui/utils'; import { Popper, unstable_composeClasses as composeClasses } from '@mui/base'; import { OverridableComponent } from '@mui/types'; @@ -416,7 +416,7 @@ const Tooltip = React.forwardRef(function Tooltip(inProps, ref) { }, [handleClose, open]); const handleUseRef = useForkRef(setChildNode, ref); - const handleRef = useForkRef(getReactNodeRef(children), handleUseRef); + const handleRef = useForkRef(getReactElementRef(children), handleUseRef); // There is no point in displaying an empty tooltip. if (typeof title !== 'number' && !title) { diff --git a/packages/mui-material/src/ClickAwayListener/ClickAwayListener.tsx b/packages/mui-material/src/ClickAwayListener/ClickAwayListener.tsx index 5b1aa759ee8ad3..6a695e84f78352 100644 --- a/packages/mui-material/src/ClickAwayListener/ClickAwayListener.tsx +++ b/packages/mui-material/src/ClickAwayListener/ClickAwayListener.tsx @@ -8,7 +8,7 @@ import { unstable_useForkRef as useForkRef, unstable_useEventCallback as useEventCallback, } from '@mui/utils'; -import getReactNodeRef from '@mui/utils/getReactNodeRef'; +import getReactElementRef from '@mui/utils/getReactElementRef'; // TODO: return `EventHandlerName extends `on${infer EventName}` ? Lowercase : never` once generatePropTypes runs with TS 4.1 function mapEventPropToEvent( @@ -96,7 +96,7 @@ function ClickAwayListener(props: ClickAwayListenerProps): React.JSX.Element { }; }, []); - const handleRef = useForkRef(getReactNodeRef(children), nodeRef); + const handleRef = useForkRef(getReactElementRef(children), nodeRef); // The handler doesn't take event.defaultPrevented into account: // diff --git a/packages/mui-material/src/Fade/Fade.js b/packages/mui-material/src/Fade/Fade.js index e4fd1d6f6db0aa..ce32b7da5c0729 100644 --- a/packages/mui-material/src/Fade/Fade.js +++ b/packages/mui-material/src/Fade/Fade.js @@ -3,7 +3,7 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import { Transition } from 'react-transition-group'; import elementAcceptingRef from '@mui/utils/elementAcceptingRef'; -import getReactNodeRef from '@mui/utils/getReactNodeRef'; +import getReactElementRef from '@mui/utils/getReactElementRef'; import { useTheme } from '../zero-styled'; import { reflow, getTransitionProps } from '../transitions/utils'; import useForkRef from '../utils/useForkRef'; @@ -49,7 +49,7 @@ const Fade = React.forwardRef(function Fade(props, ref) { const enableStrictModeCompat = true; const nodeRef = React.useRef(null); - const handleRef = useForkRef(nodeRef, getReactNodeRef(children), ref); + const handleRef = useForkRef(nodeRef, getReactElementRef(children), ref); const normalizedTransitionCallback = (callback) => (maybeIsAppearing) => { if (callback) { diff --git a/packages/mui-material/src/Grow/Grow.js b/packages/mui-material/src/Grow/Grow.js index ef350420968f1c..5e5964f32de264 100644 --- a/packages/mui-material/src/Grow/Grow.js +++ b/packages/mui-material/src/Grow/Grow.js @@ -3,7 +3,7 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import useTimeout from '@mui/utils/useTimeout'; import elementAcceptingRef from '@mui/utils/elementAcceptingRef'; -import getReactNodeRef from '@mui/utils/getReactNodeRef'; +import getReactElementRef from '@mui/utils/getReactElementRef'; import { Transition } from 'react-transition-group'; import { useTheme } from '../zero-styled'; import { getTransitionProps, reflow } from '../transitions/utils'; @@ -62,7 +62,7 @@ const Grow = React.forwardRef(function Grow(props, ref) { const theme = useTheme(); const nodeRef = React.useRef(null); - const handleRef = useForkRef(nodeRef, getReactNodeRef(children), ref); + const handleRef = useForkRef(nodeRef, getReactElementRef(children), ref); const normalizedTransitionCallback = (callback) => (maybeIsAppearing) => { if (callback) { diff --git a/packages/mui-material/src/Portal/Portal.tsx b/packages/mui-material/src/Portal/Portal.tsx index b6aff42416c348..8bd141d8a5f858 100644 --- a/packages/mui-material/src/Portal/Portal.tsx +++ b/packages/mui-material/src/Portal/Portal.tsx @@ -8,7 +8,7 @@ import { unstable_useEnhancedEffect as useEnhancedEffect, unstable_useForkRef as useForkRef, unstable_setRef as setRef, - unstable_getReactNodeRef as getReactNodeRef, + unstable_getReactElementRef as getReactElementRef, } from '@mui/utils'; import { PortalProps } from './Portal.types'; @@ -34,7 +34,11 @@ const Portal = React.forwardRef(function Portal( ) { const { children, container, disablePortal = false } = props; const [mountNode, setMountNode] = React.useState>(null); - const handleRef = useForkRef(getReactNodeRef(children), forwardedRef); + + const handleRef = useForkRef( + React.isValidElement(children) ? getReactElementRef(children) : null, + forwardedRef, + ); useEnhancedEffect(() => { if (!disablePortal) { diff --git a/packages/mui-material/src/Select/Select.js b/packages/mui-material/src/Select/Select.js index 298de307b0c32a..46985fa13a0efc 100644 --- a/packages/mui-material/src/Select/Select.js +++ b/packages/mui-material/src/Select/Select.js @@ -3,7 +3,7 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import clsx from 'clsx'; import deepmerge from '@mui/utils/deepmerge'; -import getReactNodeRef from '@mui/utils/getReactNodeRef'; +import getReactElementRef from '@mui/utils/getReactElementRef'; import SelectInput from './SelectInput'; import formControlState from '../FormControl/formControlState'; import useFormControl from '../FormControl/useFormControl'; @@ -86,7 +86,7 @@ const Select = React.forwardRef(function Select(inProps, ref) { filled: , }[variant]; - const inputComponentRef = useForkRef(ref, getReactNodeRef(InputComponent)); + const inputComponentRef = useForkRef(ref, getReactElementRef(InputComponent)); return ( diff --git a/packages/mui-material/src/Slide/Slide.js b/packages/mui-material/src/Slide/Slide.js index 13505aea527426..b408f23f357261 100644 --- a/packages/mui-material/src/Slide/Slide.js +++ b/packages/mui-material/src/Slide/Slide.js @@ -5,7 +5,7 @@ import { Transition } from 'react-transition-group'; import chainPropTypes from '@mui/utils/chainPropTypes'; import HTMLElementType from '@mui/utils/HTMLElementType'; import elementAcceptingRef from '@mui/utils/elementAcceptingRef'; -import getReactNodeRef from '@mui/utils/getReactNodeRef'; +import getReactElementRef from '@mui/utils/getReactElementRef'; import debounce from '../utils/debounce'; import useForkRef from '../utils/useForkRef'; import { useTheme } from '../zero-styled'; @@ -120,7 +120,7 @@ const Slide = React.forwardRef(function Slide(props, ref) { } = props; const childrenRef = React.useRef(null); - const handleRef = useForkRef(getReactNodeRef(children), childrenRef, ref); + const handleRef = useForkRef(getReactElementRef(children), childrenRef, ref); const normalizedTransitionCallback = (callback) => (isAppearing) => { if (callback) { diff --git a/packages/mui-material/src/Tooltip/Tooltip.js b/packages/mui-material/src/Tooltip/Tooltip.js index aed1a9b045b325..fa067ab0558c9c 100644 --- a/packages/mui-material/src/Tooltip/Tooltip.js +++ b/packages/mui-material/src/Tooltip/Tooltip.js @@ -9,7 +9,7 @@ import { alpha } from '@mui/system/colorManipulator'; import { useRtl } from '@mui/system/RtlProvider'; import isFocusVisible from '@mui/utils/isFocusVisible'; import appendOwnerState from '@mui/utils/appendOwnerState'; -import getReactNodeRef from '@mui/utils/getReactNodeRef'; +import getReactElementRef from '@mui/utils/getReactElementRef'; import { styled, useTheme } from '../zero-styled'; import memoTheme from '../utils/memoTheme'; import { useDefaultProps } from '../DefaultPropsProvider'; @@ -555,7 +555,7 @@ const Tooltip = React.forwardRef(function Tooltip(inProps, ref) { }; }, [handleClose, open]); - const handleRef = useForkRef(getReactNodeRef(children), setChildNode, ref); + const handleRef = useForkRef(getReactElementRef(children), setChildNode, ref); // There is no point in displaying an empty tooltip. // So we exclude all falsy values, except 0, which is valid. diff --git a/packages/mui-material/src/Unstable_TrapFocus/FocusTrap.tsx b/packages/mui-material/src/Unstable_TrapFocus/FocusTrap.tsx index 4a16ae62bd0e6a..0f6085f5b9f1d9 100644 --- a/packages/mui-material/src/Unstable_TrapFocus/FocusTrap.tsx +++ b/packages/mui-material/src/Unstable_TrapFocus/FocusTrap.tsx @@ -7,7 +7,7 @@ import { elementAcceptingRef, unstable_useForkRef as useForkRef, unstable_ownerDocument as ownerDocument, - unstable_getReactNodeRef as getReactNodeRef, + unstable_getReactElementRef as getReactElementRef, } from '@mui/utils'; import { FocusTrapProps } from './FocusTrap.types'; @@ -145,7 +145,7 @@ function FocusTrap(props: FocusTrapProps): React.JSX.Element { const activated = React.useRef(false); const rootRef = React.useRef(null); - const handleRef = useForkRef(getReactNodeRef(children), rootRef); + const handleRef = useForkRef(getReactElementRef(children), rootRef); const lastKeydown = React.useRef(null); React.useEffect(() => { diff --git a/packages/mui-material/src/Zoom/Zoom.js b/packages/mui-material/src/Zoom/Zoom.js index b2d79c3bde2fed..105817e6f4ae11 100644 --- a/packages/mui-material/src/Zoom/Zoom.js +++ b/packages/mui-material/src/Zoom/Zoom.js @@ -3,7 +3,7 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import { Transition } from 'react-transition-group'; import elementAcceptingRef from '@mui/utils/elementAcceptingRef'; -import getReactNodeRef from '@mui/utils/getReactNodeRef'; +import getReactElementRef from '@mui/utils/getReactElementRef'; import { useTheme } from '../zero-styled'; import { reflow, getTransitionProps } from '../transitions/utils'; import useForkRef from '../utils/useForkRef'; @@ -49,7 +49,7 @@ const Zoom = React.forwardRef(function Zoom(props, ref) { } = props; const nodeRef = React.useRef(null); - const handleRef = useForkRef(nodeRef, getReactNodeRef(children), ref); + const handleRef = useForkRef(nodeRef, getReactElementRef(children), ref); const normalizedTransitionCallback = (callback) => (maybeIsAppearing) => { if (callback) { diff --git a/packages/mui-utils/src/getReactElementRef/getReactElementRef.spec.tsx b/packages/mui-utils/src/getReactElementRef/getReactElementRef.spec.tsx new file mode 100644 index 00000000000000..434cf59fba109a --- /dev/null +++ b/packages/mui-utils/src/getReactElementRef/getReactElementRef.spec.tsx @@ -0,0 +1,19 @@ +import getReactElementRef from '@mui/utils/getReactElementRef'; +import * as React from 'react'; + +// @ts-expect-error +getReactElementRef(false); + +// @ts-expect-error +getReactElementRef(null); + +// @ts-expect-error +getReactElementRef(undefined); + +// @ts-expect-error +getReactElementRef(1); + +// @ts-expect-error +getReactElementRef([
,
]); + +getReactElementRef(
); diff --git a/packages/mui-utils/src/getReactElementRef/getReactElementRef.test.tsx b/packages/mui-utils/src/getReactElementRef/getReactElementRef.test.tsx new file mode 100644 index 00000000000000..d0abe2e3d7ed93 --- /dev/null +++ b/packages/mui-utils/src/getReactElementRef/getReactElementRef.test.tsx @@ -0,0 +1,39 @@ +import { expect } from 'chai'; +import getReactElementRef from '@mui/utils/getReactElementRef'; +import * as React from 'react'; + +describe('getReactElementRef', () => { + it('should return undefined when not used correctly', () => { + // @ts-expect-error + expect(getReactElementRef(false)).to.equal(undefined); + // @ts-expect-error + expect(getReactElementRef()).to.equal(undefined); + // @ts-expect-error + expect(getReactElementRef(1)).to.equal(undefined); + + const children = [
,
]; + // @ts-expect-error + expect(getReactElementRef(children)).to.equal(undefined); + }); + + it('should return the ref of a React element', () => { + const ref = React.createRef(); + const element =
; + expect(getReactElementRef(element)).to.equal(ref); + }); + + it('should return null for a fragment', () => { + const element = ( + +

Hello

+

Hello

+ + ); + expect(getReactElementRef(element)).to.equal(null); + }); + + it('should return null for element with no ref', () => { + const element =
; + expect(getReactElementRef(element)).to.equal(null); + }); +}); diff --git a/packages/mui-utils/src/getReactElementRef/getReactElementRef.ts b/packages/mui-utils/src/getReactElementRef/getReactElementRef.ts new file mode 100644 index 00000000000000..fbdacefa82dbd1 --- /dev/null +++ b/packages/mui-utils/src/getReactElementRef/getReactElementRef.ts @@ -0,0 +1,20 @@ +import * as React from 'react'; + +/** + * Returns the ref of a React element handling differences between React 19 and older versions. + * It will throw runtime error if the element is not a valid React element. + * + * @param element React.ReactElement + * @returns React.Ref | null | undefined + */ +export default function getReactElementRef( + element: React.ReactElement, +): React.Ref | null | undefined { + // 'ref' is passed as prop in React 19, whereas 'ref' is directly attached to children in older versions + if (parseInt(React.version, 10) >= 19) { + return element.props?.ref; + } + // @ts-expect-error element.ref is not included in the ReactElement type + // https://github.com/DefinitelyTyped/DefinitelyTyped/discussions/70189 + return element?.ref; +} diff --git a/packages/mui-utils/src/getReactElementRef/index.ts b/packages/mui-utils/src/getReactElementRef/index.ts new file mode 100644 index 00000000000000..e71d03be6f7988 --- /dev/null +++ b/packages/mui-utils/src/getReactElementRef/index.ts @@ -0,0 +1 @@ +export { default } from './getReactElementRef'; diff --git a/packages/mui-utils/src/getReactNodeRef/getReactNodeRef.ts b/packages/mui-utils/src/getReactNodeRef/getReactNodeRef.ts deleted file mode 100644 index 6da044530bec50..00000000000000 --- a/packages/mui-utils/src/getReactNodeRef/getReactNodeRef.ts +++ /dev/null @@ -1,22 +0,0 @@ -import * as React from 'react'; - -/** - * Returns the ref of a React node handling differences between React 19 and older versions. - * It will return null if the node is not a valid React element. - * - * @param element React.ReactNode - * @returns React.Ref | null - */ -export default function getReactNodeRef(element: React.ReactNode): React.Ref | null { - if (!element || !React.isValidElement(element)) { - return null; - } - - // 'ref' is passed as prop in React 19, whereas 'ref' is directly attached to children in older versions - return (element.props as any).propertyIsEnumerable('ref') - ? (element.props as any).ref - : // @ts-expect-error element.ref is not included in the ReactElement type - // We cannot check for it, but isValidElement is true at this point - // https://github.com/DefinitelyTyped/DefinitelyTyped/discussions/70189 - element.ref; -} diff --git a/packages/mui-utils/src/getReactNodeRef/index.ts b/packages/mui-utils/src/getReactNodeRef/index.ts deleted file mode 100644 index 4b8dbacb937578..00000000000000 --- a/packages/mui-utils/src/getReactNodeRef/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default } from './getReactNodeRef'; diff --git a/packages/mui-utils/src/index.ts b/packages/mui-utils/src/index.ts index 0cd2308d8650e5..e62a34808a4252 100644 --- a/packages/mui-utils/src/index.ts +++ b/packages/mui-utils/src/index.ts @@ -45,5 +45,5 @@ export { default as unstable_useSlotProps } from './useSlotProps'; export type { UseSlotPropsParameters, UseSlotPropsResult } from './useSlotProps'; export { default as unstable_resolveComponentProps } from './resolveComponentProps'; export { default as unstable_extractEventHandlers } from './extractEventHandlers'; -export { default as unstable_getReactNodeRef } from './getReactNodeRef'; +export { default as unstable_getReactElementRef } from './getReactElementRef'; export * from './types'; diff --git a/packages/mui-utils/src/useForkRef/useForkRef.test.js b/packages/mui-utils/src/useForkRef/useForkRef.test.js index 74a6b97d09348e..464aa88ada4ad5 100644 --- a/packages/mui-utils/src/useForkRef/useForkRef.test.js +++ b/packages/mui-utils/src/useForkRef/useForkRef.test.js @@ -2,7 +2,7 @@ import * as React from 'react'; import { expect } from 'chai'; import { createRenderer, screen } from '@mui/internal-test-utils'; import useForkRef from './useForkRef'; -import getReactNodeRef from '../getReactNodeRef'; +import getReactElementRef from '../getReactElementRef'; describe('useForkRef', () => { const { render } = createRenderer(); @@ -48,7 +48,7 @@ describe('useForkRef', () => { it('does nothing if none of the forked branches requires a ref', () => { const Outer = React.forwardRef(function Outer(props, ref) { const { children } = props; - const handleRef = useForkRef(getReactNodeRef(children), ref); + const handleRef = useForkRef(getReactElementRef(children), ref); return React.cloneElement(children, { ref: handleRef }); });