From 3ecc332ccda4893bd2a6386aaf38f9a5648d048e Mon Sep 17 00:00:00 2001 From: sai6855 Date: Tue, 2 Jul 2024 12:03:57 +0530 Subject: [PATCH 01/13] fix --- packages/mui-material/src/Tooltip/Tooltip.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mui-material/src/Tooltip/Tooltip.js b/packages/mui-material/src/Tooltip/Tooltip.js index a179afe021eaa4..5484c9f8eb0db5 100644 --- a/packages/mui-material/src/Tooltip/Tooltip.js +++ b/packages/mui-material/src/Tooltip/Tooltip.js @@ -544,7 +544,7 @@ const Tooltip = React.forwardRef(function Tooltip(inProps, ref) { document.removeEventListener('keydown', handleKeyDown); }; }, [handleClose, open]); - +console.log(children) const handleRef = useForkRef(children.ref, setChildNode, ref); // There is no point in displaying an empty tooltip. From 916c3a54b86260e3be434bcc663882f659c6902e Mon Sep 17 00:00:00 2001 From: sai6855 Date: Tue, 2 Jul 2024 12:12:38 +0530 Subject: [PATCH 02/13] fix --- packages/mui-material/src/Tooltip/Tooltip.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/mui-material/src/Tooltip/Tooltip.js b/packages/mui-material/src/Tooltip/Tooltip.js index 5484c9f8eb0db5..ab10a4647accf3 100644 --- a/packages/mui-material/src/Tooltip/Tooltip.js +++ b/packages/mui-material/src/Tooltip/Tooltip.js @@ -544,8 +544,8 @@ const Tooltip = React.forwardRef(function Tooltip(inProps, ref) { document.removeEventListener('keydown', handleKeyDown); }; }, [handleClose, open]); -console.log(children) - const handleRef = useForkRef(children.ref, setChildNode, ref); + + const handleRef = useForkRef(children.props.ref ?? children.ref, setChildNode, ref); // There is no point in displaying an empty tooltip. // So we exclude all falsy values, except 0, which is valid. From 9ee95923f01f1e3a9799bae5234a5260461ea2f7 Mon Sep 17 00:00:00 2001 From: sai6855 Date: Tue, 2 Jul 2024 12:40:24 +0530 Subject: [PATCH 03/13] fix tests --- packages/mui-material/src/Tooltip/Tooltip.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/mui-material/src/Tooltip/Tooltip.js b/packages/mui-material/src/Tooltip/Tooltip.js index ab10a4647accf3..b86e5fef66e141 100644 --- a/packages/mui-material/src/Tooltip/Tooltip.js +++ b/packages/mui-material/src/Tooltip/Tooltip.js @@ -545,7 +545,10 @@ const Tooltip = React.forwardRef(function Tooltip(inProps, ref) { }; }, [handleClose, open]); - const handleRef = useForkRef(children.props.ref ?? children.ref, setChildNode, ref); + // 'ref' is passed as prop in React 19, whereas 'ref' is directly attached to children in React 18 + // below check is to ensure 'ref' is accessible in both cases + const childRef = Object.keys(children.props).includes('ref') ? children.props.ref : children.ref; + const handleRef = useForkRef(childRef, setChildNode, ref); // There is no point in displaying an empty tooltip. // So we exclude all falsy values, except 0, which is valid. From 117305fd04425029c871544e0698a0c44aa1ebed Mon Sep 17 00:00:00 2001 From: sai6855 Date: Wed, 3 Jul 2024 11:28:09 +0530 Subject: [PATCH 04/13] add getChildRef util --- packages/mui-material/src/Fade/Fade.js | 3 ++- packages/mui-material/src/Grow/Grow.js | 3 ++- packages/mui-material/src/Slide/Slide.js | 3 ++- packages/mui-material/src/Tooltip/Tooltip.js | 6 ++---- packages/mui-material/src/Zoom/Zoom.js | 3 ++- packages/mui-material/src/utils/getChildRef.js | 5 +++++ 6 files changed, 15 insertions(+), 8 deletions(-) create mode 100644 packages/mui-material/src/utils/getChildRef.js diff --git a/packages/mui-material/src/Fade/Fade.js b/packages/mui-material/src/Fade/Fade.js index ad0f669096ccb8..d618b514bb2d7a 100644 --- a/packages/mui-material/src/Fade/Fade.js +++ b/packages/mui-material/src/Fade/Fade.js @@ -6,6 +6,7 @@ import elementAcceptingRef from '@mui/utils/elementAcceptingRef'; import { useTheme } from '../zero-styled'; import { reflow, getTransitionProps } from '../transitions/utils'; import useForkRef from '../utils/useForkRef'; +import getChildRef from '../utils/getChildRef'; const styles = { entering: { @@ -48,7 +49,7 @@ const Fade = React.forwardRef(function Fade(props, ref) { const enableStrictModeCompat = true; const nodeRef = React.useRef(null); - const handleRef = useForkRef(nodeRef, children.ref, ref); + const handleRef = useForkRef(nodeRef, getChildRef(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 d4f57bf40161fc..427166ec32c8ef 100644 --- a/packages/mui-material/src/Grow/Grow.js +++ b/packages/mui-material/src/Grow/Grow.js @@ -7,6 +7,7 @@ import { Transition } from 'react-transition-group'; import { useTheme } from '../zero-styled'; import { getTransitionProps, reflow } from '../transitions/utils'; import useForkRef from '../utils/useForkRef'; +import getChildRef from '../utils/getChildRef'; function getScale(value) { return `scale(${value}, ${value ** 2})`; @@ -61,7 +62,7 @@ const Grow = React.forwardRef(function Grow(props, ref) { const theme = useTheme(); const nodeRef = React.useRef(null); - const handleRef = useForkRef(nodeRef, children.ref, ref); + const handleRef = useForkRef(nodeRef, getChildRef(children), ref); const normalizedTransitionCallback = (callback) => (maybeIsAppearing) => { if (callback) { diff --git a/packages/mui-material/src/Slide/Slide.js b/packages/mui-material/src/Slide/Slide.js index 556ede01df8ff4..d669e811d6f115 100644 --- a/packages/mui-material/src/Slide/Slide.js +++ b/packages/mui-material/src/Slide/Slide.js @@ -10,6 +10,7 @@ import useForkRef from '../utils/useForkRef'; import { useTheme } from '../zero-styled'; import { reflow, getTransitionProps } from '../transitions/utils'; import { ownerWindow } from '../utils'; +import getChildRef from '../utils/getChildRef'; // Translate the node so it can't be seen on the screen. // Later, we're going to translate the node back to its original location with `none`. @@ -119,7 +120,7 @@ const Slide = React.forwardRef(function Slide(props, ref) { } = props; const childrenRef = React.useRef(null); - const handleRef = useForkRef(children.ref, childrenRef, ref); + const handleRef = useForkRef(getChildRef(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 b86e5fef66e141..5dbf3bf55eb9db 100644 --- a/packages/mui-material/src/Tooltip/Tooltip.js +++ b/packages/mui-material/src/Tooltip/Tooltip.js @@ -19,6 +19,7 @@ import useForkRef from '../utils/useForkRef'; import useId from '../utils/useId'; import useControlled from '../utils/useControlled'; import tooltipClasses, { getTooltipUtilityClass } from './tooltipClasses'; +import getChildRef from '../utils/getChildRef'; function round(value) { return Math.round(value * 1e5) / 1e5; @@ -545,10 +546,7 @@ const Tooltip = React.forwardRef(function Tooltip(inProps, ref) { }; }, [handleClose, open]); - // 'ref' is passed as prop in React 19, whereas 'ref' is directly attached to children in React 18 - // below check is to ensure 'ref' is accessible in both cases - const childRef = Object.keys(children.props).includes('ref') ? children.props.ref : children.ref; - const handleRef = useForkRef(childRef, setChildNode, ref); + const handleRef = useForkRef(getChildRef(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/Zoom/Zoom.js b/packages/mui-material/src/Zoom/Zoom.js index b93d79aab2a7df..7c90324999b1e5 100644 --- a/packages/mui-material/src/Zoom/Zoom.js +++ b/packages/mui-material/src/Zoom/Zoom.js @@ -6,6 +6,7 @@ import elementAcceptingRef from '@mui/utils/elementAcceptingRef'; import { useTheme } from '../zero-styled'; import { reflow, getTransitionProps } from '../transitions/utils'; import useForkRef from '../utils/useForkRef'; +import getChildRef from '../utils/getChildRef'; const styles = { entering: { @@ -48,7 +49,7 @@ const Zoom = React.forwardRef(function Zoom(props, ref) { } = props; const nodeRef = React.useRef(null); - const handleRef = useForkRef(nodeRef, children.ref, ref); + const handleRef = useForkRef(nodeRef, getChildRef(children), ref); const normalizedTransitionCallback = (callback) => (maybeIsAppearing) => { if (callback) { diff --git a/packages/mui-material/src/utils/getChildRef.js b/packages/mui-material/src/utils/getChildRef.js new file mode 100644 index 00000000000000..c60a83fbee9526 --- /dev/null +++ b/packages/mui-material/src/utils/getChildRef.js @@ -0,0 +1,5 @@ +export default function getChildRef(children) { + // 'ref' is passed as prop in React 19, whereas 'ref' is directly attached to children in React 18 + // below check is to ensure 'ref' is accessible in both cases + return Object.keys(children.props).includes('ref') ? children.props.ref : children.ref; +} From e7811580ba0f783be7164666243ec4f945d54505 Mon Sep 17 00:00:00 2001 From: sai6855 Date: Wed, 3 Jul 2024 11:45:50 +0530 Subject: [PATCH 05/13] show diego react error --- packages/mui-material/src/utils/getChildRef.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/mui-material/src/utils/getChildRef.js b/packages/mui-material/src/utils/getChildRef.js index c60a83fbee9526..3b02696f1cd37a 100644 --- a/packages/mui-material/src/utils/getChildRef.js +++ b/packages/mui-material/src/utils/getChildRef.js @@ -1,5 +1,6 @@ export default function getChildRef(children) { // 'ref' is passed as prop in React 19, whereas 'ref' is directly attached to children in React 18 // below check is to ensure 'ref' is accessible in both cases - return Object.keys(children.props).includes('ref') ? children.props.ref : children.ref; + // return Object.keys(children.props).includes('ref') ? children.props.ref : children.ref; + return children.props.ref ?? children.ref; } From a8e91905465f521c6e5a759bb9aaddfc6445bbc9 Mon Sep 17 00:00:00 2001 From: sai6855 Date: Wed, 3 Jul 2024 17:03:31 +0530 Subject: [PATCH 06/13] Revert "show diego react error" This reverts commit e7811580ba0f783be7164666243ec4f945d54505. --- packages/mui-material/src/utils/getChildRef.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/mui-material/src/utils/getChildRef.js b/packages/mui-material/src/utils/getChildRef.js index 3b02696f1cd37a..c60a83fbee9526 100644 --- a/packages/mui-material/src/utils/getChildRef.js +++ b/packages/mui-material/src/utils/getChildRef.js @@ -1,6 +1,5 @@ export default function getChildRef(children) { // 'ref' is passed as prop in React 19, whereas 'ref' is directly attached to children in React 18 // below check is to ensure 'ref' is accessible in both cases - // return Object.keys(children.props).includes('ref') ? children.props.ref : children.ref; - return children.props.ref ?? children.ref; + return Object.keys(children.props).includes('ref') ? children.props.ref : children.ref; } From ec910e507cd667a6d6ac4f1877cbd97c9556233b Mon Sep 17 00:00:00 2001 From: sai6855 Date: Wed, 3 Jul 2024 17:04:31 +0530 Subject: [PATCH 07/13] add getChildRef d.ts file --- packages/mui-material/src/utils/getChildRef.d.ts | 1 + 1 file changed, 1 insertion(+) create mode 100644 packages/mui-material/src/utils/getChildRef.d.ts diff --git a/packages/mui-material/src/utils/getChildRef.d.ts b/packages/mui-material/src/utils/getChildRef.d.ts new file mode 100644 index 00000000000000..12352be9af02da --- /dev/null +++ b/packages/mui-material/src/utils/getChildRef.d.ts @@ -0,0 +1 @@ +export default function getChildRef(children: React.ReactNode): React.Ref; From 1d5f95d9f53e5618cb434c54ee1cd2440f551630 Mon Sep 17 00:00:00 2001 From: sai6855 Date: Wed, 3 Jul 2024 17:15:08 +0530 Subject: [PATCH 08/13] handle chidlren edge cases --- packages/mui-material/src/utils/getChildRef.d.ts | 2 +- packages/mui-material/src/utils/getChildRef.js | 5 +++++ 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/packages/mui-material/src/utils/getChildRef.d.ts b/packages/mui-material/src/utils/getChildRef.d.ts index 12352be9af02da..01a61eb8136ed3 100644 --- a/packages/mui-material/src/utils/getChildRef.d.ts +++ b/packages/mui-material/src/utils/getChildRef.d.ts @@ -1 +1 @@ -export default function getChildRef(children: React.ReactNode): React.Ref; +export default function getChildRef(children: React.ReactNode): React.Ref | null; diff --git a/packages/mui-material/src/utils/getChildRef.js b/packages/mui-material/src/utils/getChildRef.js index c60a83fbee9526..48689e6ffef65d 100644 --- a/packages/mui-material/src/utils/getChildRef.js +++ b/packages/mui-material/src/utils/getChildRef.js @@ -1,4 +1,9 @@ +import * as React from 'react'; + export default function getChildRef(children) { + if (!children || !React.isValidElement(children) || React.Children.count(children) !== 1) { + return null; + } // 'ref' is passed as prop in React 19, whereas 'ref' is directly attached to children in React 18 // below check is to ensure 'ref' is accessible in both cases return Object.keys(children.props).includes('ref') ? children.props.ref : children.ref; From 7fa5eda85f1379dcc97a1c5d91aa0b12b9d3b823 Mon Sep 17 00:00:00 2001 From: sai6855 Date: Wed, 3 Jul 2024 17:19:20 +0530 Subject: [PATCH 09/13] fix type --- packages/mui-material/src/utils/getChildRef.d.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mui-material/src/utils/getChildRef.d.ts b/packages/mui-material/src/utils/getChildRef.d.ts index 01a61eb8136ed3..9fea0c7d91264d 100644 --- a/packages/mui-material/src/utils/getChildRef.d.ts +++ b/packages/mui-material/src/utils/getChildRef.d.ts @@ -1 +1 @@ -export default function getChildRef(children: React.ReactNode): React.Ref | null; +export default function getChildRef(children: React.ReactElement): React.Ref | null; From 2f926cd8cfa4d674064232c9e7dc2044eb08d817 Mon Sep 17 00:00:00 2001 From: sai6855 Date: Wed, 3 Jul 2024 22:11:36 +0530 Subject: [PATCH 10/13] update getChildRef logic --- packages/mui-material/src/utils/getChildRef.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mui-material/src/utils/getChildRef.js b/packages/mui-material/src/utils/getChildRef.js index 48689e6ffef65d..dc1d325a0fc6f9 100644 --- a/packages/mui-material/src/utils/getChildRef.js +++ b/packages/mui-material/src/utils/getChildRef.js @@ -6,5 +6,5 @@ export default function getChildRef(children) { } // 'ref' is passed as prop in React 19, whereas 'ref' is directly attached to children in React 18 // below check is to ensure 'ref' is accessible in both cases - return Object.keys(children.props).includes('ref') ? children.props.ref : children.ref; + return children.props.propertyIsEnumerable('ref') ? children.props.ref : children.ref; } From 5bc21fab32b7ab14c9abab8dcf802a68b7c2cf00 Mon Sep 17 00:00:00 2001 From: sai6855 Date: Sun, 7 Jul 2024 18:58:22 +0530 Subject: [PATCH 11/13] rename children to child --- packages/mui-material/src/utils/getChildRef.d.ts | 2 +- packages/mui-material/src/utils/getChildRef.js | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/mui-material/src/utils/getChildRef.d.ts b/packages/mui-material/src/utils/getChildRef.d.ts index 9fea0c7d91264d..c7e9c058d3e031 100644 --- a/packages/mui-material/src/utils/getChildRef.d.ts +++ b/packages/mui-material/src/utils/getChildRef.d.ts @@ -1 +1 @@ -export default function getChildRef(children: React.ReactElement): React.Ref | null; +export default function getChildRef(child: React.ReactElement): React.Ref | null; diff --git a/packages/mui-material/src/utils/getChildRef.js b/packages/mui-material/src/utils/getChildRef.js index dc1d325a0fc6f9..39d785ae5c89a0 100644 --- a/packages/mui-material/src/utils/getChildRef.js +++ b/packages/mui-material/src/utils/getChildRef.js @@ -1,10 +1,10 @@ import * as React from 'react'; -export default function getChildRef(children) { - if (!children || !React.isValidElement(children) || React.Children.count(children) !== 1) { +export default function getChildRef(child) { + if (!child || !React.isValidElement(child) || React.Child.count(child) !== 1) { return null; } - // 'ref' is passed as prop in React 19, whereas 'ref' is directly attached to children in React 18 + // 'ref' is passed as prop in React 19, whereas 'ref' is directly attached to child in React 18 // below check is to ensure 'ref' is accessible in both cases - return children.props.propertyIsEnumerable('ref') ? children.props.ref : children.ref; + return child.props.propertyIsEnumerable('ref') ? child.props.ref : child.ref; } From 916818e4fd47e7fd19924395a3ee6053d3d64402 Mon Sep 17 00:00:00 2001 From: sai6855 Date: Sun, 7 Jul 2024 19:02:34 +0530 Subject: [PATCH 12/13] remove checking child count --- packages/mui-material/src/utils/getChildRef.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mui-material/src/utils/getChildRef.js b/packages/mui-material/src/utils/getChildRef.js index 39d785ae5c89a0..42631ccc34d71f 100644 --- a/packages/mui-material/src/utils/getChildRef.js +++ b/packages/mui-material/src/utils/getChildRef.js @@ -1,7 +1,7 @@ import * as React from 'react'; export default function getChildRef(child) { - if (!child || !React.isValidElement(child) || React.Child.count(child) !== 1) { + if (!child || !React.isValidElement(child)) { return null; } // 'ref' is passed as prop in React 19, whereas 'ref' is directly attached to child in React 18 From 95a319bf6721d652bf7b9e07bf3563e81eca2a8b Mon Sep 17 00:00:00 2001 From: sai6855 Date: Sun, 7 Jul 2024 19:10:49 +0530 Subject: [PATCH 13/13] fix comment --- packages/mui-material/src/utils/getChildRef.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mui-material/src/utils/getChildRef.js b/packages/mui-material/src/utils/getChildRef.js index 42631ccc34d71f..a1d0c2aec5af0c 100644 --- a/packages/mui-material/src/utils/getChildRef.js +++ b/packages/mui-material/src/utils/getChildRef.js @@ -4,7 +4,7 @@ export default function getChildRef(child) { if (!child || !React.isValidElement(child)) { return null; } - // 'ref' is passed as prop in React 19, whereas 'ref' is directly attached to child in React 18 + // 'ref' is passed as prop in React 19, whereas 'ref' is directly attached to children in React 18 // below check is to ensure 'ref' is accessible in both cases return child.props.propertyIsEnumerable('ref') ? child.props.ref : child.ref; }