docs: Improve navigation experience (#9260)

* Remove v0 for now

* Fix mobile toc

* Improve controls on mobile

* Better use of space

* Fix some examples that are too wide on iPhone

* Disable tap highlight

* Link more components in API section

* Link to forms guide

* Hide render props table in S2

It's not clear what it is there

* Bring back bullets for related pages

* Attempt to improve prefetching

* Refactor router/skeleton

* Fix clicking card causing focus ring

* Smoother page transitions when using search menu

* Use view transition for mobile search menu

* Reset scroll position when switching tags

* Fix test

* Reset selected tag when search menu closes

* Fix view transition

* Fix scrolling on android

* Fix skeleton for component pages

* Fix infinite loop when closing search menu on RSP homepage

Author: devongovett

packages/@react-aria/interactions/src/useFocusVisible.ts

@@ -15,7 +15,7 @@
 // NOTICE file in the root directory of this source tree.
 // See https://github.com/facebook/react/tree/cc7c1aece46a6b69b41958d731e0fd27c94bfc6c/packages/react-interactions
 
-import {getOwnerDocument, getOwnerWindow, isMac, isVirtualClick} from '@react-aria/utils';
+import {getOwnerDocument, getOwnerWindow, isMac, isVirtualClick, openLink} from '@react-aria/utils';
 import {ignoreFocusEvent} from './utils';
 import {useEffect, useState} from 'react';
 import {useIsSSR} from '@react-aria/ssr';
@@ -68,7 +68,7 @@ function isValidKey(e: KeyboardEvent) {
 
 function handleKeyboardEvent(e: KeyboardEvent) {
   hasEventBeforeFocus = true;
-  if (isValidKey(e)) {
+  if (!(openLink as any).isOpening && isValidKey(e)) {
     currentModality = 'keyboard';
     triggerChangeHandlers('keyboard', e);
   }
@@ -83,7 +83,7 @@ function handlePointerEvent(e: PointerEvent | MouseEvent) {
 }
 
 function handleClickEvent(e: MouseEvent) {
-  if (isVirtualClick(e)) {
+  if (!(openLink as any).isOpening && isVirtualClick(e)) {
     hasEventBeforeFocus = true;
     currentModality = 'virtual';
   }

packages/@react-aria/utils/src/openLink.tsx

@@ -106,7 +106,7 @@ export function openLink(target: HTMLAnchorElement, modifiers: Modifiers, setOpe
   let event = isWebKit() && isMac() && !isIPad() && process.env.NODE_ENV !== 'test'
     // @ts-ignore - keyIdentifier is a non-standard property, but it's what webkit expects
     ? new KeyboardEvent('keydown', {keyIdentifier: 'Enter', metaKey, ctrlKey, altKey, shiftKey})
-    : new MouseEvent('click', {metaKey, ctrlKey, altKey, shiftKey, bubbles: true, cancelable: true});
+    : new MouseEvent('click', {metaKey, ctrlKey, altKey, shiftKey, detail: 1, bubbles: true, cancelable: true});
   (openLink as any).isOpening = setOpening;
   focusWithoutScrolling(target);
   target.dispatchEvent(event);

packages/@react-spectrum/s2/src/Calendar.tsx

@@ -141,7 +141,8 @@ const cellStyles = style({
     isOutsideMonth: 'none'
   },
   alignItems: 'center',
-  justifyContent: 'center'
+  justifyContent: 'center',
+  disableTapHighlight: true
 });
 
 const cellInnerStyles = style<CalendarCellRenderProps & {selectionMode: 'single' | 'range'}>({

packages/@react-spectrum/s2/src/CloseButton.tsx

@@ -76,7 +76,8 @@ const styles = style<CloseButtonProps & {isHovered: boolean, isFocusVisible: boo
     default: 'focus-ring',
     isStaticColor: 'transparent-overlay-1000',
     forcedColors: 'Highlight'
-  }
+  },
+  disableTapHighlight: true
 }, getAllowedOverrides());
 
 export const CloseButtonContext = createContext<ContextValue<Partial<CloseButtonProps>, FocusableRefValue<HTMLButtonElement>>>(null);

packages/@react-spectrum/s2/src/ColorSwatchPicker.tsx

@@ -90,7 +90,8 @@ function useWrapper(swatch: ReactElement, color: Color, rounding: ColorSwatchPro
             default: 'sm',
             full: 'full'
           }
-        }
+        },
+        disableTapHighlight: true
       })({...renderProps, rounding})}>
       {({isSelected}) => (<>
         {swatch}

packages/@react-spectrum/s2/src/DropZone.tsx

@@ -65,7 +65,8 @@ const dropzone = style<DropZoneRenderProps>({
     isFocusVisible: 'blue-800'
   },
   borderRadius: 'lg',
-  padding: 24
+  padding: 24,
+  boxSizing: 'border-box'
 }, getAllowedOverrides({height: true}));
 
 const banner = style({

packages/dev/s2-docs/pages/react-aria/Checkbox.mdx

@@ -66,7 +66,7 @@ function Example(props) {
 
 ## Forms
 
-Use the `name` and `value` props to submit the checkbox to the server. Set the `isRequired` prop to validate the user selects the checkbox, or implement custom client or server-side validation. See the Forms guide to learn more.
+Use the `name` and `value` props to submit the checkbox to the server. Set the `isRequired` prop to validate the user selects the checkbox, or implement custom client or server-side validation. See the [Forms](forms) guide to learn more.
 
 ```tsx render
 "use client";

packages/dev/s2-docs/pages/react-aria/CheckboxGroup.mdx

@@ -76,7 +76,7 @@ function Example() {
 
 ## Forms
 
-Use the `name` prop to submit the selected checkboxes to the server. Set the `isRequired` prop on the `<CheckboxGroup>` to validate the user selects at least one checkbox, or on individual checkboxes. See the Forms guide to learn more.
+Use the `name` prop to submit the selected checkboxes to the server. Set the `isRequired` prop on the `<CheckboxGroup>` to validate the user selects at least one checkbox, or on individual checkboxes. See the [Forms](forms) guide to learn more.
 
 ```tsx render
 "use client";

packages/dev/s2-docs/pages/react-aria/ColorField.mdx

@@ -105,7 +105,7 @@ function Example() {
 
 ## Forms
 
-Use the `name` prop to submit the text value to the server. Set the `isRequired` prop to validate the value, or implement custom client or server-side validation. See the Forms guide to learn more.
+Use the `name` prop to submit the text value to the server. Set the `isRequired` prop to validate the value, or implement custom client or server-side validation. See the [Forms](forms) guide to learn more.
 
 ```tsx render
 "use client";

packages/dev/s2-docs/pages/react-aria/ComboBox.mdx

@@ -287,7 +287,7 @@ function Example() {
 
 ## Forms
 
-Use the `name` prop to submit the `id` of the selected item to the server. Set the `isRequired` prop to validate that the user selects a value, or implement custom client or server-side validation. See the Forms guide to learn more.
+Use the `name` prop to submit the `id` of the selected item to the server. Set the `isRequired` prop to validate that the user selects a value, or implement custom client or server-side validation. See the [Forms](forms) guide to learn more.
 
 ```tsx render
 "use client";