docs: S2 docs layout + general improvements (#9159)

* close SearchMenu on client navigation

* add footer

* made Nav and ToC widths static

* fix min-height issue on mobile

* show Toast if route can't load

* add toast for clipboard copy failures

* fix React insertion effect

* improve markdown menu

* add skeleton loading for client routing

* copy update

* remote extra startTransitions and use use hook

* improve skeleton loading and optimistic render link selection + ToC

* add delay to showing skeleton

* fix getPageInfo logic

* try fixing getPageInfo again

* try fixing normalizePathname on build

* add prefetch onPressStart

* revert optimistic UI and show error toast if fetch fails

* fix skeleton title

* don't clear targetPathname until new navigation

* move prefetch to a global pointerover listener

* close search menu when navigation starts

* show skeleton loading immediately when navigation starts

* re-use tag group in SearchMenu and MobileSearchMenu

* fix and extract out search logic

* remove blog and releases index pages from search

* reduce size of icons in dnd blog post example

* fix Forms password example

* centralize search logic

* add escapeKeyBehavior="none" to tag groups

* fix toc scroll mask

* simplify pathname logic

* remove promises from prefetch cache once resolved

* use useOptimistic

* use fetchRSC promise as loading source

* avoid navigation race conditions

* prefetch on focus (same as pointerover)

* function for checking if client link

* fix search results sorting for All tag

* add message to currentAbortController.abort

* lint

Author: reidbarber

packages/dev/s2-docs/pages/react-aria/blog/DragBetweenListsExample.tsx

@@ -85,7 +85,7 @@ function BidirectionalDnDListBox(props) {
       style={{width: 300, height: 300, overflow: 'auto'}}>
       {item => (
         <ListBoxItem textValue={item.name} style={{display: 'flex', alignItems: 'center', gap: 8, flexDirection: 'row', justifyContent: 'flex-start'}}>
-          {item.type === 'folder' ? <Folder /> : <File />}
+          {item.type === 'folder' ? <Folder size={16} /> : <File size={16} />}
           <span>{item.name}</span>
         </ListBoxItem>
       )}

packages/dev/s2-docs/pages/react-aria/blog/index.mdx

@@ -14,7 +14,7 @@ export default Layout;
 
 export const section = 'Blog';
 export const title = 'Blog';
-
+export const hideFromSearch = true;
 export const tags = ['blog', 'articles', 'posts'];
 
 # Blog

packages/dev/s2-docs/pages/react-aria/releases/index.mdx

@@ -14,6 +14,7 @@ export default Layout;
 export const section = 'Releases';
 export const tags = ['changelog', 'versions', 'updates'];
 export const title = 'Releases';
+export const hideFromSearch = true;
 
 # Releases
 

packages/dev/s2-docs/pages/s2/forms.mdx

@@ -240,6 +240,7 @@ function Example() {
 
   return (
     <TextField
+      type="password"
       label="Password"
       placeholder="Choose a password"
       /*- begin highlight -*/

packages/dev/s2-docs/pages/s2/releases/index.mdx

@@ -14,6 +14,7 @@ export default Layout;
 export const section = 'Releases';
 export const tags = ['changelog', 'versions', 'updates'];
 export const title = 'Releases';
+export const hideFromSearch = true;
 
 # Releases
 

packages/dev/s2-docs/src/CodePlatter.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import {ActionButton, ActionButtonGroup, Button, ButtonGroup, Content, createIcon, Dialog, DialogContainer, Heading, Link, Menu, MenuItem, MenuTrigger, Text, Tooltip, TooltipTrigger} from '@react-spectrum/s2';
+import {ActionButton, ActionButtonGroup, Button, ButtonGroup, Content, createIcon, Dialog, DialogContainer, Heading, Link, Menu, MenuItem, MenuTrigger, Text, UNSTABLE_ToastQueue as ToastQueue, Tooltip, TooltipTrigger} from '@react-spectrum/s2';
 import {CopyButton} from './CopyButton';
 import {createCodeSandbox, getCodeSandboxFiles} from './CodeSandbox';
 import {createStackBlitz} from './StackBlitz';
@@ -120,7 +120,9 @@ export function CodePlatter({children, type, showCoachMark}: CodePlatterProps) {
                     if (node instanceof HTMLHeadingElement && node.id) {
                       url.hash = '#' + node.id;
                     }
-                    navigator.clipboard.writeText(url.toString());
+                    navigator.clipboard.writeText(url.toString()).catch(() => {
+                      ToastQueue.negative('Failed to copy link.');
+                    });
                   }}>
                   <LinkIcon />
                   <Text slot="label">Copy link</Text>
@@ -300,7 +302,9 @@ function ShadcnDialog({registryUrl}) {
           <Button
             variant="accent"
             onPress={() => {
-              navigator.clipboard.writeText(preRef.current!.textContent!);
+              navigator.clipboard.writeText(preRef.current!.textContent!).catch(() => {
+                ToastQueue.negative('Failed to copy command. Please try again.');
+              });
               close();
             }}>
             Copy and close

packages/dev/s2-docs/src/CopyButton.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import {ActionButton, Tooltip, TooltipTrigger} from '@react-spectrum/s2';
+import {ActionButton, UNSTABLE_ToastQueue as ToastQueue, Tooltip, TooltipTrigger} from '@react-spectrum/s2';
 import CheckmarkCircle from '@react-spectrum/s2/icons/CheckmarkCircle';
 import Copy from '@react-spectrum/s2/icons/Copy';
 import React, {useEffect, useRef, useState} from 'react';
@@ -44,7 +44,7 @@ export function CopyButton({text, getText, ariaLabel = 'Copy', tooltip = 'Copy',
       setIsCopied(true);
       timeout.current = setTimeout(() => setIsCopied(false), 2000);
     }).catch(() => {
-      // noop
+      ToastQueue.negative('Failed to copy.');
     });
   };
 

packages/dev/s2-docs/src/Header.tsx

@@ -6,7 +6,6 @@ import BetaApp from '@react-spectrum/s2/icons/BetaApp';
 import {flushSync} from 'react-dom';
 import {getLibraryFromPage, getLibraryIcon, getLibraryLabel} from './library';
 import GithubLogo from './icons/GithubLogo';
-import {MarkdownMenu} from './MarkdownMenu';
 // @ts-ignore
 import {PageProps} from '@parcel/rsc';
 import React, {CSSProperties, useId, useState} from 'react';
@@ -115,7 +114,6 @@ export default function Header(props: PageProps) {
               <BetaApp />
               <Text>Beta Preview</Text>
             </Badge>
-            <MarkdownMenu url={currentPage.url} />
             <ActionButton aria-label="React Spectrum GitHub repo" size="L" isQuiet onPress={() => window.open('https://github.com/adobe/react-spectrum', '_blank', 'noopener,noreferrer')}>
               <GithubLogo />
             </ActionButton>

packages/dev/s2-docs/src/IconSearchView.tsx

@@ -4,7 +4,7 @@
 import {Autocomplete, GridLayout, ListBox, ListBoxItem, Size, useFilter, Virtualizer} from 'react-aria-components';
 import CheckmarkCircle from '@react-spectrum/s2/icons/CheckmarkCircle';
 import Close from '@react-spectrum/s2/icons/Close';
-import {Content, Heading, IllustratedMessage, pressScale, SearchField, Skeleton, Text} from '@react-spectrum/s2';
+import {Content, Heading, IllustratedMessage, pressScale, SearchField, Skeleton, Text, UNSTABLE_ToastQueue as ToastQueue} from '@react-spectrum/s2';
 import {focusRing, iconStyle, style} from '@react-spectrum/s2/style' with {type: 'macro'};
 import {iconAliases} from './iconAliases.js';
 // @ts-ignore
@@ -50,7 +50,7 @@ export function useCopyImport() {
       setCopiedId(id);
       timeout.current = setTimeout(() => setCopiedId(null), 2000);
     }).catch(() => {
-      // noop
+      ToastQueue.negative('Failed to copy import statement.');
     });
   }, []);
 
@@ -124,16 +124,17 @@ const itemStyle = style({
 });
 
 interface IconSearchViewProps {
-  filteredItems: typeof iconList
+  filteredItems: typeof iconList,
+  listBoxClassName?: string
 }
 
-export function IconSearchView({filteredItems}: IconSearchViewProps) {
+export function IconSearchView({filteredItems, listBoxClassName}: IconSearchViewProps) {
   let {copiedId, handleCopyImport} = useCopyImport();
 
   return (
     <>
       <CopyInfoMessage />
-      <IconListBox items={filteredItems} copiedId={copiedId} onAction={handleCopyImport} />
+      <IconListBox items={filteredItems} copiedId={copiedId} onAction={handleCopyImport} listBoxClassName={listBoxClassName} />
     </>
   );
 }
@@ -218,7 +219,7 @@ export function IconSearchSkeleton() {
         <ListBox
           items={mockItems}
           layout="grid"
-          className={style({width: '100%', scrollPaddingY: 4, overflow: 'auto'})}>
+          className={style({flexGrow: 1, overflow: 'auto', width: '100%', scrollPaddingY: 4})}>
           {(item) => <SkeletonIconItem item={item} />}
         </ListBox>
       </Virtualizer>

packages/dev/s2-docs/src/IllustrationCards.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import {Autocomplete, GridLayout, ListBox, ListBoxItem, Size, useFilter, Virtualizer} from 'react-aria-components';
-import {Content, Heading, IllustratedMessage, pressScale, ProgressCircle, Radio, RadioGroup, SearchField, SegmentedControl, SegmentedControlItem, Text} from '@react-spectrum/s2';
+import {Content, Heading, IllustratedMessage, pressScale, ProgressCircle, Radio, RadioGroup, SearchField, SegmentedControl, SegmentedControlItem, Text, UNSTABLE_ToastQueue as ToastQueue} from '@react-spectrum/s2';
 import {focusRing, style} from '@react-spectrum/s2/style' with {type: 'macro'};
 // @ts-ignore
 import Gradient from '@react-spectrum/s2/icons/Gradient';
@@ -100,7 +100,7 @@ let handleCopyImport = (id: string, variant: string, gradientStyle: string) => {
   navigator.clipboard.writeText(importText).then(() => {
     // noop
   }).catch(() => {
-    // noop
+    ToastQueue.negative('Failed to copy import statement.');
   });
 };