Merge pull request #544 from reactjs/sync-b9eea4da

Sync with react.dev @ b9eea4d

.eslintrc

@@ -5,7 +5,8 @@
   "plugins": ["@typescript-eslint"],
   "rules": {
     "no-unused-vars": "off",
-    "@typescript-eslint/no-unused-vars": "warn"
+    "@typescript-eslint/no-unused-vars": ["error", { "varsIgnorePattern": "^_" }],
+    "react-hooks/exhaustive-deps": "error"
   },
   "env": {
     "node": true,

src/components/Layout/HomeContent.js

@@ -3,32 +3,29 @@
  */
 
 import {
-  Fragment,
   Suspense,
   createContext,
   memo,
   useContext,
   useEffect,
   useId,
-  useReducer,
   useRef,
   useState,
   useTransition,
 } from 'react';
 
-import BlogCard from 'components/MDX/BlogCard';
-import ButtonLink from '../ButtonLink';
-import CodeBlock from 'components/MDX/CodeBlock';
+import cn from 'classnames';
 import {ExternalLink} from 'components/ExternalLink';
 import {IconChevron} from 'components/Icon/IconChevron';
-import {IconNavArrow} from 'components/Icon/IconNavArrow';
-import {IconRestart} from '../Icon/IconRestart';
 import {IconSearch} from 'components/Icon/IconSearch';
-import Link from 'components/MDX/Link';
 import {Logo} from 'components/Logo';
+import BlogCard from 'components/MDX/BlogCard';
+import CodeBlock from 'components/MDX/CodeBlock';
+import Link from 'components/MDX/Link';
 import NextLink from 'next/link';
-import cn from 'classnames';
 import sidebarBlog from '../../sidebarBlog.json';
+import ButtonLink from '../ButtonLink';
+import {IconRestart} from '../Icon/IconRestart';
 
 function Section({children, background = null}) {
   return (
@@ -67,14 +64,6 @@ function Para({children}) {
   );
 }
 
-function Left({children}) {
-  return (
-    <div className="px-5 lg:px-0 max-w-4xl lg:text-left text-white text-opacity-80">
-      {children}
-    </div>
-  );
-}
-
 function Center({children}) {
   return (
     <div className="px-5 lg:px-0 max-w-4xl lg:text-center text-white text-opacity-80 flex flex-col items-center justify-center">
@@ -90,19 +79,23 @@ function FullBleed({children}) {
 }
 
 function CurrentTime() {
-  const msPerMinute = 60 * 1000;
-  const date = new Date();
-  let nextMinute = Math.floor(+date / msPerMinute + 1) * msPerMinute;
-
+  const [date, setDate] = useState(new Date());
   const currentTime = date.toLocaleTimeString([], {
     hour: 'numeric',
     minute: 'numeric',
   });
-  let [, forceUpdate] = useReducer((n) => n + 1, 0);
   useEffect(() => {
-    const timeout = setTimeout(forceUpdate, nextMinute - Date.now());
+    const msPerMinute = 60 * 1000;
+    let nextMinute = Math.floor(+date / msPerMinute + 1) * msPerMinute;
+
+    const timeout = setTimeout(() => {
+      if (Date.now() > nextMinute) {
+        setDate(new Date());
+      }
+    }, nextMinute - Date.now());
     return () => clearTimeout(timeout);
   }, [date]);
+
   return <span suppressHydrationWarning>{currentTime}</span>;
 }
 
@@ -834,7 +827,7 @@ function ExampleLayout({
         .filter((s) => s !== null);
       setOverlayStyles(nextOverlayStyles);
     }
-  }, [activeArea]);
+  }, [activeArea, hoverTopOffset]);
   return (
     <div className="lg:pl-10 lg:pr-5 w-full">
       <div className="mt-12 mb-2 lg:my-16 max-w-7xl mx-auto flex flex-col w-full lg:rounded-2xl lg:bg-card lg:dark:bg-card-dark">
@@ -1214,7 +1207,7 @@ function useNestedScrollLock(ref) {
       window.removeEventListener('scroll', handleScroll);
       clearInterval(interval);
     };
-  }, []);
+  }, [ref]);
 }
 
 function ExamplePanel({
@@ -1223,7 +1216,6 @@ function ExamplePanel({
   noShadow,
   height,
   contentMarginTop,
-  activeArea,
 }) {
   return (
     <div

src/components/Layout/Sidebar/SidebarLink.tsx

@@ -54,6 +54,7 @@ export function SidebarLink({
       ref={ref}
       title={title}
       target={target}
+      passHref
       aria-current={selected ? 'page' : undefined}
       className={cn(
         'p-2 pr-2 w-full rounded-none lg:rounded-r-2xl text-left hover:bg-gray-5 dark:hover:bg-gray-80 relative flex items-center justify-between',

src/components/Layout/SidebarNav/SidebarNav.tsx

@@ -5,7 +5,6 @@
 import {Suspense} from 'react';
 import * as React from 'react';
 import cn from 'classnames';
-import {Search} from 'components/Search';
 import {Feedback} from '../Feedback';
 import {SidebarRouteTree} from '../Sidebar/SidebarRouteTree';
 import type {RouteItem} from '../getRouteMeta';

src/components/Layout/TopNav/TopNav.tsx

@@ -4,6 +4,7 @@
 
 import * as React from 'react';
 
+import {disableBodyScroll, enableBodyScroll} from 'body-scroll-lock';
 import {
   Suspense,
   startTransition,
@@ -12,20 +13,18 @@ import {
   useRef,
   useState,
 } from 'react';
-import {disableBodyScroll, enableBodyScroll} from 'body-scroll-lock';
 
-import {Feedback} from '../Feedback';
+import cn from 'classnames';
 import {IconClose} from 'components/Icon/IconClose';
 import {IconHamburger} from 'components/Icon/IconHamburger';
 import {IconSearch} from 'components/Icon/IconSearch';
-import {Logo} from '../../Logo';
-import NextLink from 'next/link';
-import type {RouteItem} from '../getRouteMeta';
 import {Search} from 'components/Search';
-import {SidebarLink} from '../Sidebar';
-import {SidebarRouteTree} from '../Sidebar/SidebarRouteTree';
-import cn from 'classnames';
+import NextLink from 'next/link';
 import {useRouter} from 'next/router';
+import {Logo} from '../../Logo';
+import {Feedback} from '../Feedback';
+import {SidebarRouteTree} from '../Sidebar/SidebarRouteTree';
+import type {RouteItem} from '../getRouteMeta';
 
 declare global {
   interface Window {

src/components/Layout/getRouteMeta.tsx

@@ -68,7 +68,7 @@ export function getRouteMeta(cleanedPath: string, routeTree: RouteItem) {
     currentIndex: 0,
   };
   buildRouteMeta(cleanedPath, routeTree, ctx);
-  const {currentIndex, ...meta} = ctx;
+  const {currentIndex: _, ...meta} = ctx;
   return {
     ...meta,
     breadcrumbs: breadcrumbs.length > 0 ? breadcrumbs : [routeTree],

src/components/MDX/BlogCard.tsx

@@ -18,6 +18,7 @@ function BlogCard({title, badge, date, icon, url, children}: BlogCardProps) {
   return (
     <Link
       href={url as string}
+      passHref
       className="block h-full w-full rounded-2xl outline-none focus:outline-none focus-visible:outline focus-visible:outline-link focus:outline-offset-2 focus-visible:dark:focus:outline-link-dark">
       <div className="justify-between p-5 sm:p-5 cursor-pointer w-full h-full flex flex-col flex-1 shadow-secondary-button-stroke dark:shadow-secondary-button-stroke-dark hover:bg-gray-40/5 active:bg-gray-40/10  hover:dark:bg-gray-60/5 active:dark:bg-gray-60/10 rounded-2xl text-xl text-primary dark:text-primary-dark leading-relaxed">
         <div className="flex flex-row gap-3 w-full">

src/components/MDX/MDXComponents.tsx

@@ -369,7 +369,8 @@ function YouTubeIframe(props: any) {
 }
 
 function Image(props: any) {
-  return <img className="max-w-[calc(min(700px,100%))]" {...props} />;
+  const {alt, ...rest} = props;
+  return <img alt={alt} className="max-w-[calc(min(700px,100%))]" {...rest} />;
 }
 
 export const MDXComponents = {

src/components/MDX/Sandpack/CustomPreset.tsx

@@ -54,7 +54,6 @@ export const CustomPreset = memo(function CustomPreset({
 
 const SandboxShell = memo(function SandboxShell({
   showDevTools,
-  onDevToolsLoad,
   devToolsLoaded,
   providedFiles,
   lintErrors,

src/components/MDX/Sandpack/NavigationBar.tsx

@@ -90,15 +90,17 @@ export function NavigationBar({providedFiles}: {providedFiles: Array<string>}) {
     } else {
       return;
     }
-  }, [isMultiFile]);
+
+    // Note: in a real useEvent, onContainerResize would be omitted.
+  }, [isMultiFile, onContainerResize]);
 
   const handleReset = () => {
     /**
      * resetAllFiles must come first, otherwise
-     * the previous content will appears for a second
+     * the previous content will appear for a second
      * when the iframe loads.
      *
-     * Plus, it should only prompts if there's any file changes
+     * Plus, it should only prompt if there's any file changes
      */
     if (
       sandpack.editorState === 'dirty' &&

src/components/MDX/Sandpack/Preview.tsx

@@ -49,7 +49,6 @@ export function Preview({
     errorScreenRegisteredRef,
     openInCSBRegisteredRef,
     loadingScreenRegisteredRef,
-    status,
   } = sandpack;
 
   if (

src/components/MDX/TeamMember.tsx

@@ -7,7 +7,6 @@ import Image from 'next/image';
 import {IconTwitter} from '../Icon/IconTwitter';
 import {IconGitHub} from '../Icon/IconGitHub';
 import {ExternalLink} from '../ExternalLink';
-import {IconNewPage} from 'components/Icon/IconNewPage';
 import {H3} from './Heading';
 import {IconLink} from 'components/Icon/IconLink';
 

src/components/Search.tsx

@@ -5,11 +5,10 @@
 import Head from 'next/head';
 import Link from 'next/link';
 import Router from 'next/router';
-import {lazy, useCallback, useEffect} from 'react';
+import {lazy, useEffect} from 'react';
 import * as React from 'react';
 import {createPortal} from 'react-dom';
 import {siteConfig} from 'siteConfig';
-import cn from 'classnames';
 
 export interface SearchProps {
   appId?: string;

src/hooks/usePendingRoute.ts

@@ -33,7 +33,7 @@ const usePendingRoute = () => {
       events.off('routeChangeComplete', handleRouteChangeComplete);
       clearTimeout(routeTransitionTimer);
     };
-  }, []);
+  }, [events]);
 
   return pendingRoute;
 };