Merge branch 'main' into new-nav

beta/src/components/Layout/Sidebar/SidebarRouteTree.tsx

@@ -64,7 +64,6 @@ function CollapseWrapper({
       className={cn(isExpanded ? 'opacity-100' : 'opacity-50')}
       style={{
         transition: `opacity ${duration}ms ease-in-out`,
-        animation: `nav-fadein ${duration}ms ease-in-out`,
       }}>
       <div {...getCollapseProps()}>{children}</div>
     </div>

beta/src/content/hooks/react/useDebugValue.md

@@ -100,7 +100,7 @@ This lets you avoid running potentially expensive formatting logic unless the co
 
 ### `useDebugValue(value, format?)` {/*usedebugvaluevalue-format*/}
 
-Call `useContext` at the top level of your [custom Hook](/learn/reusing-logic-with-custom-hooks) to display a readable debug value:
+Call `useDebugValue` at the top level of your [custom Hook](/learn/reusing-logic-with-custom-hooks) to display a readable debug value:
 
 ```js
 import { useDebugValue } from 'react';

beta/src/content/learn/reusing-logic-with-custom-hooks.md

@@ -1664,6 +1664,7 @@ function useAnimationLoop(isRunning, drawFrame) {
     }
 
     const startTime = performance.now();
+    let frameId = null;
 
     function tick(now) {
       const timePassed = now - startTime;

beta/src/styles/index.css

@@ -153,15 +153,6 @@
     display: none;
   }
 
-  @keyframes nav-fadein {
-    from {
-      opacity: 0.5;
-    }
-    to {
-      opacity: 1;
-    }
-  }
-
   /*
    * Hopefully when scrollbar-color lands everywhere,
    * (and not just in FF), we'll be able to keep just this.

content/docs/reference-react-component.md

@@ -125,7 +125,7 @@ When called, it should examine `this.props` and `this.state` and return one of t
 - **Arrays and fragments.** Let you return multiple elements from render. See the documentation on [fragments](/docs/fragments.html) for more details.
 - **Portals**. Let you render children into a different DOM subtree. See the documentation on [portals](/docs/portals.html) for more details.
 - **String and numbers.** These are rendered as text nodes in the DOM.
-- **Booleans or `null`**. Render nothing. (Mostly exists to support `return test && <Child />` pattern, where `test` is boolean.)
+- **Booleans or `null` or `undefined`**. Render nothing. (Mostly exists to support `return test && <Child />` pattern, where `test` is boolean).
 
 The `render()` function should be pure, meaning that it does not modify component state, it returns the same result each time it's invoked, and it does not directly interact with the browser.