From 940fdf5676df7e7ebbaff9a51cb1a971f382c122 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Sun, 24 Sep 2023 17:04:39 +0200 Subject: [PATCH] [core] Improve ref type definition (#38903) --- docs/data/joy/components/menu/MenuListComposition.js | 4 +--- docs/data/joy/components/menu/MenuListComposition.tsx | 8 +++----- docs/src/components/action/Highlighter.tsx | 2 +- docs/src/components/action/More.tsx | 2 +- docs/src/components/header/HeaderNavBar.tsx | 4 ++-- docs/src/components/header/HeaderNavDropdown.tsx | 4 ++-- docs/src/components/home/ElementPointer.tsx | 4 ++-- docs/src/layouts/HeroContainer.tsx | 2 +- examples/joy-ui-vite-ts/src/main.tsx | 2 +- examples/material-ui-vite-ts/src/main.tsx | 2 +- packages/mui-base/src/FocusTrap/FocusTrap.tsx | 2 +- packages/mui-base/src/unstable_useModal/useModal.ts | 6 +++--- packages/mui-base/src/useSelect/useSelect.ts | 2 +- packages/mui-joy/src/Modal/Modal.test.tsx | 4 ++-- 14 files changed, 22 insertions(+), 26 deletions(-) diff --git a/docs/data/joy/components/menu/MenuListComposition.js b/docs/data/joy/components/menu/MenuListComposition.js index 6aa7030b069326..4a6a9b8efb7866 100644 --- 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 index 24c681f5d635c6..00cb70f5597925 100644 --- 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(null); +export default function MenuListComposition() { + const buttonRef = React.useRef(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 index 59a3702ca3ae76..445b7c68cbad18 100644 --- 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); + const ref = React.useRef(null); return ( (null); + const ref = React.useRef(null); return ( (null); const [subMenuIndex, setSubMenuIndex] = React.useState(null); const navRef = React.useRef(null); - const productsMenuRef = React.useRef(null); - const docsMenuRef = React.useRef(null); + const productsMenuRef = React.useRef(null); + const docsMenuRef = React.useRef(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 index 1e21620d95a852..75f9b96d346aff 100644 --- 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(null); + const hambugerRef = React.useRef(null); return ( { - 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 index 34a7dd0ef64747..080021cf201a31 100644 --- a/docs/src/components/home/ElementPointer.tsx +++ b/docs/src/components/home/ElementPointer.tsx @@ -10,7 +10,7 @@ export const withPointer = ( options: { id: string; name: string }, ) => { function WithPointer(props: object) { - const root = React.useRef(null); + const root = React.useRef(null); const handleMouseOver = React.useContext(PointerContext); return ( @@ -42,7 +42,7 @@ export default function PointerContainer({ onElementChange, ...props }: BoxProps & { onElementChange?: (data: Data) => void }) { - const container = React.useRef(null); + const container = React.useRef(null); const [data, setData] = React.useState({ id: null, name: null, diff --git a/docs/src/layouts/HeroContainer.tsx b/docs/src/layouts/HeroContainer.tsx index a7349e519b8716..134f5d14f2bf87 100644 --- 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); + const frame = React.useRef(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 index d5fe9b428e6267..405de14368ded5 100644 --- 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( , diff --git a/examples/material-ui-vite-ts/src/main.tsx b/examples/material-ui-vite-ts/src/main.tsx index 5d4993b42b79ec..df3e3df3da87cb 100644 --- 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( diff --git a/packages/mui-base/src/FocusTrap/FocusTrap.tsx b/packages/mui-base/src/FocusTrap/FocusTrap.tsx index 5031afd9fc5783..22e80ed671ce9a 100644 --- 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 index c7043630cf0cc6..b947383ab62229 100644 --- 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); - const modalRef = React.useRef(null); + const modalRef = React.useRef(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 index 265b70099168fb..129af312e77556 100644 --- a/packages/mui-base/src/useSelect/useSelect.ts +++ b/packages/mui-base/src/useSelect/useSelect.ts @@ -320,7 +320,7 @@ function useSelect( 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 index 3d79c7b8cd6969..9fc9e945b954b5 100644 --- a/packages/mui-joy/src/Modal/Modal.test.tsx +++ b/packages/mui-joy/src/Modal/Modal.test.tsx @@ -382,11 +382,11 @@ describe('', () => { // see "DemoFrame" in our docs for a documented implementation function IFrame(props: React.PropsWithChildren<{}>) { const { children } = props; - const frameRef = React.useRef(null); + const frameRef = React.useRef(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();