Merge branch 'main' of github.com:adobe/react-spectrum into style_macro_docs

Author: LFDanLu

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

@@ -51,6 +51,10 @@ export interface ProviderProps extends UnsafeStyles {
 
 export const ColorSchemeContext = createContext<ColorScheme | 'light dark' | null>(null);
 
+/**
+ * Provider is the container for all React Spectrum components.
+ * It loads the font and sets the colorScheme, locale, and other application level settings.
+ */
 export function Provider(props: ProviderProps): JSX.Element {
   let result = <ProviderInner {...props} />;
   let parentColorScheme = useContext(ColorSchemeContext);

packages/dev/s2-docs/pages/react-aria/DropTarget.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import React, {JSX} from 'react';
+import React, {JSX, ReactNode} from 'react';
 import type {TextDropItem} from '@react-aria/dnd';
 import {useDrop} from '@react-aria/dnd';
 
@@ -18,7 +18,7 @@ export function DropTarget() {
       let items = await Promise.all(
         (e.items as TextDropItem[])
           .filter(item => item.kind === 'text' && (item.types.has('text/plain') || item.types.has('my-app-custom-type')))
-          .map(async item => {
+          .map(async (item: TextDropItem) => {
             if (item.types.has('my-app-custom-type')) {
               return JSON.parse(await item.getText('my-app-custom-type'));
             } else {
@@ -30,16 +30,16 @@ export function DropTarget() {
     }
   });
 
-  let message: JSX.Element[] = [<div>{`Drop here`}</div>];
+  let message: ReactNode = <div key="drop here">'Drop here'</div>;
   if (dropped) {
     message = dropped.map((d, index) => {
-      let m = d.message;
+      let m: ReactNode = d.message;
       if (d.style === 'bold') {
-        message = [<strong>{m}</strong>];
+        m = <strong key={index}>{m}</strong>;
       } else if (d.style === 'italic') {
-        message = [<em>{m}</em>];
+        m = <em key={index}>{m}</em>;
       }
-      return <div key={index}>{message}</div>;
+      return <div key={index}>{m}</div>;
     });
   }
 

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

@@ -13,7 +13,7 @@ import {GroupedPropTable} from '../../src/PropTable';
 import {FunctionAPI} from '../../src/FunctionAPI';
 import docs from 'docs:@react-aria/focus';
 
-export const section = 'Focus';
+export const section = 'Interactions';
 
 # FocusRing
 
@@ -29,10 +29,6 @@ switching in from a different tab, we show the focus ring.
 
 If CSS classes are not being used for styling, see [useFocusRing](useFocusRing.html) for a hooks version.
 
-## Props
-
-<PropTable links={docs.links} component={docs.exports.FocusRing} />
-
 ## Example
 
 This example shows how to use `<FocusRing>` to apply a CSS class when keyboard focus is on a button.
@@ -46,3 +42,7 @@ import './FocusRingExample.css';
   <button className="button">Test</button>
 </FocusRing>
 ```
+
+## API
+
+<PropTable links={docs.links} component={docs.exports.FocusRing} />

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

@@ -13,7 +13,7 @@ import {GroupedPropTable} from '../../src/PropTable';
 import {FunctionAPI} from '../../src/FunctionAPI';
 import docs from 'docs:@react-aria/focus';
 
-export const section = 'Focus';
+export const section = 'Interactions';
 
 # FocusScope
 
@@ -34,17 +34,6 @@ in combination with a FocusScope to programmatically move focus within the scope
 arrow key navigation could be implemented by handling keyboard events and using a focus manager
 to move focus to the next and previous elements.
 
-## Props
-
-<PropTable links={docs.links} component={docs.exports.FocusScope} />
-
-## FocusManager Interface
-
-To get a focus manager, call the <TypeLink links={docs.links} type={docs.exports.useFocusManager} /> hook
-from a component within the FocusScope. A focus manager supports the following methods:
-
-<ClassAPI links={docs.links} class={docs.exports.FocusManager} />
-
 ## Example
 
 A basic example of a focus scope that contains focus within it is below. Clicking the "Open"
@@ -128,3 +117,16 @@ function ToolbarButton(props) {
   <ToolbarButton>Paste</ToolbarButton>
 </Toolbar>
 ```
+
+## API
+
+### Props
+
+<PropTable links={docs.links} component={docs.exports.FocusScope} />
+
+### FocusManager Interface
+
+To get a focus manager, call the <TypeLink links={docs.links} type={docs.exports.useFocusManager} /> hook
+from a component within the FocusScope. A focus manager supports the following methods:
+
+<ClassAPI links={docs.links} class={docs.exports.FocusManager} />

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

@@ -12,7 +12,7 @@ export default Layout;
 import {FunctionAPI} from '../../src/FunctionAPI';
 import docs from 'docs:@react-aria/i18n';
 
-export const section = 'Internationalization';
+export const section = 'Utilities';
 export const description = 'Implementing collections in React Aria';
 
 
@@ -25,10 +25,6 @@ with a locale defined by your application (e.g. application setting). This shoul
 your entire application in the provider, which will be cause all child elements to receive the new locale
 information via [useLocale](useLocale.html).
 
-## Props
-
-<PropTable component={docs.exports.I18nProvider} links={docs.links} />
-
 ## Example
 
 ```tsx
@@ -38,3 +34,7 @@ import {I18nProvider} from '@react-aria/i18n';
   <YourApp />
 </I18nProvider>
 ```
+
+## Props
+
+<PropTable component={docs.exports.I18nProvider} links={docs.links} />

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

@@ -12,7 +12,7 @@ export default Layout;
 import docs from 'docs:@react-aria/overlays';
 import {FunctionAPI} from '../../src/FunctionAPI';
 
-export const section = 'Server Side Rendering';
+export const section = 'Utilities';
 
 # PortalProvider
 
@@ -32,10 +32,6 @@ outside of any possible overflow or stacking contexts. We envision `UNSAFE_Porta
 elements into a single container at the root of the app or to control the order of children of the `body` element, but you may have use cases
 that need to do otherwise.
 
-## Props
-
-<PropTable links={docs.links} component={docs.exports.UNSAFE_PortalProvider} />
-
 ## Example
 
 The example below shows how you can use `UNSAFE_PortalProvider` to portal your Toasts to an arbitrary container. Note that
@@ -169,3 +165,8 @@ function MyOverlay(props) {
   return ReactDOM.createPortal(children, getContainer());
 }
 ```
+
+## Props
+
+<PropTable links={docs.links} component={docs.exports.UNSAFE_PortalProvider} />
+

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

@@ -11,7 +11,7 @@ import {Layout} from '../../src/Layout';
 export default Layout;
 import docs from 'docs:@react-aria/ssr';
 
-export const section = 'Server Side Rendering';
+export const section = 'Utilities';
 export const description = 'Implementing collections in React Aria';
 
 # SSRProvider
@@ -26,10 +26,6 @@ See the [server side rendering](ssr.html) docs for more information.
 **Note**: if you're using React 18 or newer, `SSRProvider` is not necessary and can be removed from your app. React Aria uses the
 [React.useId](https://react.dev/reference/react/useId) hook internally when using React 18, which ensures ids are consistent.
 
-## Props
-
-<PropTable component={docs.exports.SSRProvider} links={docs.links} />
-
 ## Example
 
 ```tsx
@@ -39,3 +35,7 @@ import {SSRProvider} from '@react-aria/ssr';
   <YourApp />
 </SSRProvider>
 ```
+
+## Props
+
+<PropTable component={docs.exports.SSRProvider} links={docs.links} />

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

@@ -18,32 +18,29 @@ export const section = 'Utilities';
 
 <PageDescription>{docs.exports.VisuallyHidden.description}</PageDescription>
 
-## Introduction
-
-`VisuallyHidden` is a utility component that can be used to hide its children visually,
-while keeping them visible to screen readers and other assistive technology. This would
-typically be used when you want to take advantage of the behavior and semantics of a
-native element like a checkbox or radio button, but replace it with a custom styled
-element visually.
-
-## Props
-
-<PropTable links={docs.links} component={docs.exports.VisuallyHidden} />
+## Gotchas
 
-{/* not implemented yet */}
-{/* ## Example
+VisuallyHidden is positioned absolutely, so it needs a positioned ancestor. Otherwise, it will be positioned relative to the nearest positioned ancestor, which may be the body, causing undesired scroll bars to appear.
 
-See [useRadioGroup](useRadioGroup.html#styling) and [useCheckbox](useCheckbox.html#styling)
-for examples of using `VisuallyHidden` to hide native form elements visually. */}
+```tsx
+<label style={{position: 'relative'}}>
+  <VisuallyHidden>
+    <input type="checkbox" />
+  </VisuallyHidden>
+  <span>Subscribe to our newsletter</span>
+</label>
+```
 
-## Hook
+##  Hook
 
 In order to allow additional rendering flexibility, the `useVisuallyHidden` hook can be
 used in custom components instead of the `VisuallyHidden` component. It supports the same
 options as the component, and returns props to spread onto the element that should be hidden.
 
 <FunctionAPI links={docs.links} function={docs.exports.useVisuallyHidden} />
 
+### Example
+
 ```tsx
 import {useVisuallyHidden} from '@react-aria/visually-hidden';
 
@@ -52,16 +49,12 @@ let {visuallyHiddenProps} = useVisuallyHidden();
 <div {...visuallyHiddenProps}>I am hidden</div>
 ```
 
-## Gotchas
+## API
 
-VisuallyHidden is positioned absolutely, so it needs a positioned ancestor. Otherwise, it will be positioned relative to the nearest positioned ancestor, which may be the body, causing undesired scroll bars to appear.
+<PropTable links={docs.links} component={docs.exports.VisuallyHidden} />
 
-```tsx
-<label style={{position: 'relative'}}>
-  <VisuallyHidden>
-    <input type="checkbox" />
-  </VisuallyHidden>
-  <span>Subscribe to our newsletter</span>
-</label>
-```
+{/* not implemented yet */}
+{/* ## Example
 
+See [useRadioGroup](useRadioGroup.html#styling) and [useCheckbox](useCheckbox.html#styling)
+for examples of using `VisuallyHidden` to hide native form elements visually. */}

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

@@ -18,16 +18,11 @@ export const section = 'Utilities';
 
 <PageDescription>{docs.exports.mergeProps.description}</PageDescription>
 
-## API
-
-<FunctionAPI function={docs.exports.mergeProps} links={docs.links} />
-
 ## Introduction
 
 `mergeProps` is a utility function that combines multiple props objects together in a smart way.
 This can be useful when you need to combine the results of multiple react-aria hooks onto a single
-element. For example, both hooks may return the same event handlers, class names, or ids, and only
-one of these can be applied. `mergeProps` handles combining these props together so that multiple
+element. `mergeProps` handles combining these props together so that multiple
 event handlers will be chained, multiple classes will be combined, and ids will be deduplicated.
 For all other props, the last prop object overrides all previous ones.
 
@@ -68,3 +63,7 @@ let merged = {
   }
 };
 ```
+
+## API
+
+<FunctionAPI function={docs.exports.mergeProps} links={docs.links} />

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

@@ -13,7 +13,7 @@ export default Layout;
 import docs from 'docs:@react-spectrum/s2';
 import {Time} from '../../../src/ReleasesList';
 
-export const section = '';
+export const section = 'Releases';
 export const tags = ['release', 'React Aria'];
 export const date = 'December 20, 2023';
 export const title = 'v1.0.0';