[core] Use runtime agnostic setTimeout type

docs/data/joy/components/input/DebouncedInput.js

@@ -10,10 +10,7 @@ function DebounceInput(props) {
   const timerRef = React.useRef();
 
   const handleChange = (event) => {
-    if (timerRef.current) {
-      clearTimeout(timerRef.current);
-    }
-
+    clearTimeout(timerRef.current);
     timerRef.current = setTimeout(() => {
       handleDebounce(event.target.value);
     }, debounceTimeout);

docs/data/joy/components/input/DebouncedInput.tsx

@@ -11,13 +11,10 @@ type DebounceProps = {
 function DebounceInput(props: InputProps & DebounceProps) {
   const { handleDebounce, debounceTimeout, ...rest } = props;
 
-  const timerRef = React.useRef<number>();
+  const timerRef = React.useRef<ReturnType<typeof setTimeout>>();
 
   const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    if (timerRef.current) {
-      clearTimeout(timerRef.current);
-    }
-
+    clearTimeout(timerRef.current);
     timerRef.current = setTimeout(() => {
       handleDebounce(event.target.value);
     }, debounceTimeout);

docs/data/material/components/progress/CircularIntegration.tsx

@@ -10,7 +10,7 @@ import SaveIcon from '@mui/icons-material/Save';
 export default function CircularIntegration() {
   const [loading, setLoading] = React.useState(false);
   const [success, setSuccess] = React.useState(false);
-  const timer = React.useRef<number>();
+  const timer = React.useRef<ReturnType<typeof setTimeout>>();
 
   const buttonSx = {
     ...(success && {

docs/data/material/components/progress/DelayingAppearance.tsx

@@ -8,7 +8,7 @@ import Typography from '@mui/material/Typography';
 export default function DelayingAppearance() {
   const [loading, setLoading] = React.useState(false);
   const [query, setQuery] = React.useState('idle');
-  const timerRef = React.useRef<number>();
+  const timerRef = React.useRef<ReturnType<typeof setTimeout>>();
 
   React.useEffect(
     () => () => {

docs/src/modules/utils/useClipboardCopy.ts

@@ -3,7 +3,7 @@ import clipboardCopy from 'clipboard-copy';
 
 export default function useClipboardCopy() {
   const [isCopied, setIsCopied] = React.useState(false);
-  const timeout = React.useRef<ReturnType<typeof setTimeout> | undefined>();
+  const timeout = React.useRef<ReturnType<typeof setTimeout>>();
   const mounted = React.useRef(false);
 
   React.useEffect(() => {

packages/mui-base/src/Unstable_Popup/Popup.test.tsx

@@ -13,7 +13,7 @@ function FakeTransition(props: React.PropsWithChildren<{}>) {
   const { requestedEnter, onExited } = useTransitionStateManager();
 
   React.useEffect(() => {
-    let timeoutId: NodeJS.Timeout | null = null;
+    let timeoutId: ReturnType<typeof setTimeout> | null = null;
     if (!requestedEnter) {
       timeoutId = setTimeout(() => {
         act(() => onExited());

packages/mui-utils/src/useTimeout/useTimeout.ts

@@ -7,23 +7,23 @@ export class Timeout {
     return new Timeout();
   }
 
-  currentId: number = 0;
+  currentId: ReturnType<typeof setTimeout> | null = null;
 
   /**
    * Executes `fn` after `delay`, clearing any previously scheduled call.
    */
   start(delay: number, fn: Function) {
     this.clear();
     this.currentId = setTimeout(() => {
-      this.currentId = 0;
+      this.currentId = null;
       fn();
-    }, delay) as unknown as number;
+    }, delay);
   }
 
   clear = () => {
-    if (this.currentId !== 0) {
+    if (this.currentId !== null) {
       clearTimeout(this.currentId);
-      this.currentId = 0;
+      this.currentId = null;
     }
   };