From 4f76d5743a17493ddd520dd0d5f5e2bc194ffdd6 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari <olivier.tassinari@gmail.com> Date: Mon, 4 Sep 2023 22:35:25 +0200 Subject: [PATCH] [core] Use immutable refs (#38762) --- docs/src/modules/components/DemoEditor.tsx | 4 ++-- packages/mui-base/src/Popper/Popper.tsx | 2 +- packages/mui-base/src/Select/Select.tsx | 2 +- packages/mui-base/src/useMenu/useMenu.ts | 2 +- packages/mui-base/src/useSelect/useSelect.ts | 2 +- packages/mui-joy/src/Button/Button.tsx | 2 +- packages/mui-joy/src/Chip/Chip.tsx | 2 +- packages/mui-joy/src/ChipDelete/ChipDelete.tsx | 2 +- packages/mui-joy/src/FormHelperText/FormHelperText.tsx | 2 +- packages/mui-joy/src/IconButton/IconButton.tsx | 2 +- packages/mui-joy/src/ListItemButton/ListItemButton.tsx | 2 +- packages/mui-joy/src/Select/Select.tsx | 6 +++--- 12 files changed, 15 insertions(+), 15 deletions(-) diff --git a/docs/src/modules/components/DemoEditor.tsx b/docs/src/modules/components/DemoEditor.tsx index 766becb31bbcce..fb658c44ac5460 100644 --- a/docs/src/modules/components/DemoEditor.tsx +++ b/docs/src/modules/components/DemoEditor.tsx @@ -81,8 +81,8 @@ export default function DemoEditor(props: DemoEditorProps) { const { language, value, onChange, copyButtonProps, children, id, ...other } = props; const t = useTranslate(); const contextTheme = useTheme(); - const wrapperRef = React.useRef<HTMLElement | null>(null); - const enterRef = React.useRef<HTMLElement | null>(null); + const wrapperRef = React.useRef<HTMLElement>(null); + const enterRef = React.useRef<HTMLElement>(null); const handlers = useCodeCopy(); React.useEffect(() => { diff --git a/packages/mui-base/src/Popper/Popper.tsx b/packages/mui-base/src/Popper/Popper.tsx index 7ae7898921b13a..b7a44861a4fcf6 100644 --- a/packages/mui-base/src/Popper/Popper.tsx +++ b/packages/mui-base/src/Popper/Popper.tsx @@ -96,7 +96,7 @@ const PopperTooltip = React.forwardRef(function PopperTooltip< ...other } = props; - const tooltipRef = React.useRef<HTMLElement | null>(null); + const tooltipRef = React.useRef<HTMLElement>(null); const ownRef = useForkRef(tooltipRef, forwardedRef); const popperRef = React.useRef<Instance | null>(null); diff --git a/packages/mui-base/src/Select/Select.tsx b/packages/mui-base/src/Select/Select.tsx index 07f41eb6f9ea31..a74e8ba2fcf6d8 100644 --- a/packages/mui-base/src/Select/Select.tsx +++ b/packages/mui-base/src/Select/Select.tsx @@ -96,7 +96,7 @@ const Select = React.forwardRef(function Select< renderValueProp ?? defaultRenderValue; const [buttonDefined, setButtonDefined] = React.useState(false); - const buttonRef = React.useRef<HTMLElement | null>(null); + const buttonRef = React.useRef<HTMLElement>(null); const listboxRef = React.useRef<HTMLElement>(null); const Button = slots.root ?? 'button'; diff --git a/packages/mui-base/src/useMenu/useMenu.ts b/packages/mui-base/src/useMenu/useMenu.ts index dbed403af6df12..11064c9b3830aa 100644 --- a/packages/mui-base/src/useMenu/useMenu.ts +++ b/packages/mui-base/src/useMenu/useMenu.ts @@ -38,7 +38,7 @@ const FALLBACK_MENU_CONTEXT: DropdownContextValue = { export function useMenu(parameters: UseMenuParameters = {}): UseMenuReturnValue { const { listboxRef: listboxRefProp, onItemsChange, id: idParam } = parameters; - const rootRef = React.useRef<HTMLElement | null>(null); + const rootRef = React.useRef<HTMLElement>(null); const handleRef = useForkRef(rootRef, listboxRefProp); const listboxId = useId(idParam) ?? ''; diff --git a/packages/mui-base/src/useSelect/useSelect.ts b/packages/mui-base/src/useSelect/useSelect.ts index 14ddc5db7966db..03fb06affc6a99 100644 --- a/packages/mui-base/src/useSelect/useSelect.ts +++ b/packages/mui-base/src/useSelect/useSelect.ts @@ -107,7 +107,7 @@ function useSelect<OptionValue, Multiple extends boolean = false>( const buttonRef = React.useRef<HTMLElement>(null); const handleButtonRef = useForkRef(buttonRefProp, buttonRef); - const listboxRef = React.useRef<HTMLElement | null>(null); + const listboxRef = React.useRef<HTMLElement>(null); const listboxId = useId(listboxIdProp); let defaultValue: OptionValue[] | undefined; diff --git a/packages/mui-joy/src/Button/Button.tsx b/packages/mui-joy/src/Button/Button.tsx index 4c5ab66482fb96..3d8649e709bc99 100644 --- a/packages/mui-joy/src/Button/Button.tsx +++ b/packages/mui-joy/src/Button/Button.tsx @@ -217,7 +217,7 @@ const Button = React.forwardRef(function Button(inProps, ref) { const color = getColor(inProps.color, buttonGroup.color || colorProp); const disabled = inProps.disabled ?? (buttonGroup.disabled || disabledProp || loading); - const buttonRef = React.useRef<HTMLElement | null>(null); + const buttonRef = React.useRef<HTMLElement>(null); const handleRef = useForkRef(buttonRef, ref); const { focusVisible, setFocusVisible, getRootProps } = useButton({ diff --git a/packages/mui-joy/src/Chip/Chip.tsx b/packages/mui-joy/src/Chip/Chip.tsx index 3d6d99d0dea6fd..f35a558d540138 100644 --- a/packages/mui-joy/src/Chip/Chip.tsx +++ b/packages/mui-joy/src/Chip/Chip.tsx @@ -248,7 +248,7 @@ const Chip = React.forwardRef(function Chip(inProps, ref) { const resolvedActionProps = typeof slotProps.action === 'function' ? slotProps.action(ownerState) : slotProps.action; - const actionRef = React.useRef<HTMLElement | null>(null); + const actionRef = React.useRef<HTMLElement>(null); const { focusVisible, getRootProps } = useButton({ ...resolvedActionProps, disabled, diff --git a/packages/mui-joy/src/ChipDelete/ChipDelete.tsx b/packages/mui-joy/src/ChipDelete/ChipDelete.tsx index 0eb1f0f189c433..72648ede7bb177 100644 --- a/packages/mui-joy/src/ChipDelete/ChipDelete.tsx +++ b/packages/mui-joy/src/ChipDelete/ChipDelete.tsx @@ -82,7 +82,7 @@ const ChipDelete = React.forwardRef(function ChipDelete(inProps, ref) { const color = getColor(inProps.color, inheritedColor); const disabled = disabledProp ?? chipContext.disabled; - const buttonRef = React.useRef<HTMLElement | null>(null); + const buttonRef = React.useRef<HTMLElement>(null); const handleRef = useForkRef(buttonRef, ref); const { focusVisible, getRootProps } = useButton({ diff --git a/packages/mui-joy/src/FormHelperText/FormHelperText.tsx b/packages/mui-joy/src/FormHelperText/FormHelperText.tsx index aa65cc813517a3..a58a9c7be802b3 100644 --- a/packages/mui-joy/src/FormHelperText/FormHelperText.tsx +++ b/packages/mui-joy/src/FormHelperText/FormHelperText.tsx @@ -58,7 +58,7 @@ const FormHelperText = React.forwardRef(function FormHelperText(inProps, ref) { }); const { children, component, slots = {}, slotProps = {}, ...other } = props; - const rootRef = React.useRef<HTMLElement | null>(null); + const rootRef = React.useRef<HTMLElement>(null); const handleRef = useForkRef(rootRef, ref); const formControl = React.useContext(FormControlContext); const setHelperText = formControl?.setHelperText; diff --git a/packages/mui-joy/src/IconButton/IconButton.tsx b/packages/mui-joy/src/IconButton/IconButton.tsx index 4f58b7cc481afa..fe092f39d82baf 100644 --- a/packages/mui-joy/src/IconButton/IconButton.tsx +++ b/packages/mui-joy/src/IconButton/IconButton.tsx @@ -147,7 +147,7 @@ const IconButton = React.forwardRef(function IconButton(inProps, ref) { const color = getColor(inProps.color, buttonGroup.color || colorProp); const disabled = inProps.disabled ?? (buttonGroup.disabled || disabledProp); - const buttonRef = React.useRef<HTMLElement | null>(null); + const buttonRef = React.useRef<HTMLElement>(null); const handleRef = useForkRef(buttonRef, ref); const { focusVisible, setFocusVisible, getRootProps } = useButton({ diff --git a/packages/mui-joy/src/ListItemButton/ListItemButton.tsx b/packages/mui-joy/src/ListItemButton/ListItemButton.tsx index c4e390afeaf8f0..0463696dac13a6 100644 --- a/packages/mui-joy/src/ListItemButton/ListItemButton.tsx +++ b/packages/mui-joy/src/ListItemButton/ListItemButton.tsx @@ -154,7 +154,7 @@ const ListItemButton = React.forwardRef(function ListItemButton(inProps, ref) { const { getColor } = useColorInversion(variant); const color = getColor(inProps.color, colorProp); - const buttonRef = React.useRef<HTMLElement | null>(null); + const buttonRef = React.useRef<HTMLElement>(null); const handleRef = useForkRef(buttonRef, ref); const { focusVisible, setFocusVisible, getRootProps } = useButton({ diff --git a/packages/mui-joy/src/Select/Select.tsx b/packages/mui-joy/src/Select/Select.tsx index 8870f2827c8813..d27104fec683f5 100644 --- a/packages/mui-joy/src/Select/Select.tsx +++ b/packages/mui-joy/src/Select/Select.tsx @@ -386,9 +386,9 @@ const Select = React.forwardRef(function Select<TValue extends {}>( const renderValue = renderValueProp ?? defaultRenderSingleValue; const [anchorEl, setAnchorEl] = React.useState<HTMLElement | null>(null); - const rootRef = React.useRef<HTMLElement | null>(null); - const buttonRef = React.useRef<HTMLElement | null>(null); - const listboxRef = React.useRef<HTMLElement | null>(null); + const rootRef = React.useRef<HTMLElement>(null); + const buttonRef = React.useRef<HTMLElement>(null); + const listboxRef = React.useRef<HTMLElement>(null); const handleRef = useForkRef(ref, rootRef);