[core] Use immutable refs (mui#38762)

mnajdova · Sep 8, 2023 · f1e25f6 · f1e25f6
1 parent e1523a3
commit f1e25f6
Show file tree

Hide file tree

Showing 12 changed files with 15 additions and 15 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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);