[core] Improve ref type definition (mui#38903)

mnajdova · Sep 25, 2023 · 940fdf5 · 940fdf5
1 parent 0da5035
commit 940fdf5
Show file tree

Hide file tree

Showing 14 changed files with 22 additions and 26 deletions.
diff --git a/docs/data/joy/components/menu/MenuListComposition.js b/docs/data/joy/components/menu/MenuListComposition.js
@@ -22,9 +22,7 @@ export default function MenuListComposition() {
     if (event.key === 'Tab') {
       setOpen(false);
     } else if (event.key === 'Escape') {
-      if (buttonRef.current) {
-        buttonRef.current?.focus();
-      }
+      buttonRef.current.focus();
       setOpen(false);
     }
   };

diff --git a/docs/data/joy/components/menu/MenuListComposition.tsx b/docs/data/joy/components/menu/MenuListComposition.tsx
@@ -10,8 +10,8 @@ const Popup = styled(Popper)({
   zIndex: 1000,
 });
 
-export default function MenuListComposition(): JSX.Element {
-  const buttonRef = React.useRef<HTMLButtonElement | null>(null);
+export default function MenuListComposition() {
+  const buttonRef = React.useRef<HTMLButtonElement>(null);
   const [open, setOpen] = React.useState(false);
 
   const handleClose = () => {
@@ -22,9 +22,7 @@ export default function MenuListComposition(): JSX.Element {
     if (event.key === 'Tab') {
       setOpen(false);
     } else if (event.key === 'Escape') {
-      if (buttonRef.current) {
-        buttonRef.current?.focus();
-      }
+      buttonRef.current!.focus();
       setOpen(false);
     }
   };

diff --git a/docs/src/components/action/Highlighter.tsx b/docs/src/components/action/Highlighter.tsx
@@ -12,7 +12,7 @@ export default function Highlighter({
   selectedBg?: 'white' | 'comfort';
   selected?: boolean;
 } & ButtonBaseProps) {
-  const ref = React.useRef<null | HTMLButtonElement>(null);
+  const ref = React.useRef<HTMLButtonElement>(null);
   return (
     <ButtonBase
       component="span"

diff --git a/docs/src/components/action/More.tsx b/docs/src/components/action/More.tsx
@@ -7,7 +7,7 @@ import AddCircleRoundedIcon from '@mui/icons-material/AddCircleRounded';
 import KeyboardArrowRightRounded from '@mui/icons-material/KeyboardArrowRightRounded';
 
 export default (function More(props: ButtonBaseProps) {
-  const ref = React.useRef<null | HTMLButtonElement>(null);
+  const ref = React.useRef<HTMLButtonElement>(null);
   return (
     <ButtonBase
       ref={ref}

diff --git a/docs/src/components/header/HeaderNavBar.tsx b/docs/src/components/header/HeaderNavBar.tsx
@@ -151,8 +151,8 @@ export default function HeaderNavBar() {
   const [subMenuOpen, setSubMenuOpen] = React.useState<null | 'products' | 'docs'>(null);
   const [subMenuIndex, setSubMenuIndex] = React.useState<number | null>(null);
   const navRef = React.useRef<HTMLUListElement | null>(null);
-  const productsMenuRef = React.useRef<HTMLButtonElement | null>(null);
-  const docsMenuRef = React.useRef<HTMLButtonElement | null>(null);
+  const productsMenuRef = React.useRef<HTMLButtonElement>(null);
+  const docsMenuRef = React.useRef<HTMLButtonElement>(null);
   React.useEffect(() => {
     if (typeof subMenuIndex === 'number') {
       document.getElementById(PRODUCT_IDS[subMenuIndex])?.focus();

diff --git a/docs/src/components/header/HeaderNavDropdown.tsx b/docs/src/components/header/HeaderNavDropdown.tsx
@@ -121,7 +121,7 @@ export default function HeaderNavDropdown() {
   const [open, setOpen] = React.useState(false);
   const [productsOpen, setProductsOpen] = React.useState(true);
   const [docsOpen, setDocsOpen] = React.useState(false);
-  const hambugerRef = React.useRef<HTMLButtonElement | null>(null);
+  const hambugerRef = React.useRef<HTMLButtonElement>(null);
   return (
     <React.Fragment>
       <IconButton
@@ -150,7 +150,7 @@ export default function HeaderNavDropdown() {
       </IconButton>
       <ClickAwayListener
         onClickAway={(event) => {
-          if (hambugerRef.current && !hambugerRef.current.contains(event.target as Node)) {
+          if (!hambugerRef.current!.contains(event.target as Node)) {
             setOpen(false);
           }
         }}

diff --git a/docs/src/components/home/ElementPointer.tsx b/docs/src/components/home/ElementPointer.tsx
@@ -10,7 +10,7 @@ export const withPointer = <T extends React.ElementType>(
   options: { id: string; name: string },
 ) => {
   function WithPointer(props: object) {
-    const root = React.useRef<null | HTMLElement>(null);
+    const root = React.useRef<HTMLElement>(null);
     const handleMouseOver = React.useContext(PointerContext);
     return (
       <React.Fragment>
@@ -42,7 +42,7 @@ export default function PointerContainer({
   onElementChange,
   ...props
 }: BoxProps & { onElementChange?: (data: Data) => void }) {
-  const container = React.useRef<null | HTMLDivElement>(null);
+  const container = React.useRef<HTMLDivElement>(null);
   const [data, setData] = React.useState<Data>({
     id: null,
     name: null,

diff --git a/docs/src/layouts/HeroContainer.tsx b/docs/src/layouts/HeroContainer.tsx
@@ -23,7 +23,7 @@ export default function HeroContainer(props: HeroContainerProps) {
     right,
     rightSx,
   } = props;
-  const frame = React.useRef<null | HTMLDivElement>(null);
+  const frame = React.useRef<HTMLDivElement>(null);
 
   useEnhancedEffect(() => {
     let obs: undefined | MutationObserver;

diff --git a/examples/joy-ui-vite-ts/src/main.tsx b/examples/joy-ui-vite-ts/src/main.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import * as ReactDOM from 'react-dom/client';
 import App from './App';
 
-ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
+ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
     <App />
   </React.StrictMode>,

diff --git a/examples/material-ui-vite-ts/src/main.tsx b/examples/material-ui-vite-ts/src/main.tsx
@@ -5,7 +5,7 @@ import { CssBaseline } from '@mui/material';
 import theme from './theme';
 import App from './App';
 
-ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
+ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
     <ThemeProvider theme={theme}>
       <CssBaseline />

diff --git a/packages/mui-base/src/FocusTrap/FocusTrap.tsx b/packages/mui-base/src/FocusTrap/FocusTrap.tsx
@@ -283,7 +283,7 @@ function FocusTrap(props: FocusTrapProps): JSX.Element {
         doc.activeElement === sentinelStart.current ||
         doc.activeElement === sentinelEnd.current
       ) {
-        tabbable = getTabbable(rootRef.current as HTMLElement);
+        tabbable = getTabbable(rootRef.current!);
       }
 
       // one of the sentinel nodes was focused, so move the focus

diff --git a/packages/mui-base/src/unstable_useModal/useModal.ts b/packages/mui-base/src/unstable_useModal/useModal.ts
@@ -55,7 +55,7 @@ export function useModal(parameters: UseModalParameters): UseModalReturnValue {
   // @ts-ignore internal logic
   const modal = React.useRef<{ modalRef: HTMLDivElement; mount: HTMLElement }>({});
   const mountNodeRef = React.useRef<null | HTMLElement>(null);
-  const modalRef = React.useRef<null | HTMLDivElement>(null);
+  const modalRef = React.useRef<HTMLDivElement>(null);
   const handleRef = useForkRef(modalRef, rootRef);
   const [exited, setExited] = React.useState(!open);
   const hasTransition = getHasTransition(children);
@@ -67,8 +67,8 @@ export function useModal(parameters: UseModalParameters): UseModalReturnValue {
 
   const getDoc = () => ownerDocument(mountNodeRef.current);
   const getModal = () => {
-    modal.current.modalRef = modalRef.current as HTMLDivElement;
-    modal.current.mount = mountNodeRef.current as HTMLElement;
+    modal.current.modalRef = modalRef.current!;
+    modal.current.mount = mountNodeRef.current!;
     return modal.current;
   };
 

diff --git a/packages/mui-base/src/useSelect/useSelect.ts b/packages/mui-base/src/useSelect/useSelect.ts
@@ -320,7 +320,7 @@ function useSelect<OptionValue, Multiple extends boolean = false>(
         return;
       }
 
-      const listboxClientRect = (listboxRef.current as HTMLElement).getBoundingClientRect();
+      const listboxClientRect = listboxRef.current.getBoundingClientRect();
       const optionClientRect = optionRef.current.getBoundingClientRect();
 
       if (optionClientRect.top < listboxClientRect.top) {

diff --git a/packages/mui-joy/src/Modal/Modal.test.tsx b/packages/mui-joy/src/Modal/Modal.test.tsx
@@ -382,11 +382,11 @@ describe('<Modal />', () => {
         // see "DemoFrame" in our docs for a documented implementation
         function IFrame(props: React.PropsWithChildren<{}>) {
           const { children } = props;
-          const frameRef = React.useRef<null | HTMLIFrameElement>(null);
+          const frameRef = React.useRef<HTMLIFrameElement>(null);
           const [iframeLoaded, onLoad] = React.useReducer(() => true, false);
 
           React.useEffect(() => {
-            const document = frameRef.current?.contentDocument;
+            const document = frameRef.current!.contentDocument;
 
             if (document != null && document.readyState === 'complete' && !iframeLoaded) {
               onLoad();