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

# Conflicts:
#	packages/@react-aria/focus/src/FocusScope.tsx
#	packages/@react-aria/test-utils/src/table.ts

Author: devongovett

.storybook-s2/docs/Icons.jsx

@@ -6,7 +6,7 @@ import {highlight} from './highlight' with {type: 'macro'};
 
 export function Icons() {
   return (
-    <div className={style({marginX: 'auto'})}>
+    <div className={'sb-unstyled ' + style({marginX: 'auto'})}>
       <div className={style({marginX: 48})}>
         <h1 className={style({font: 'heading-2xl', marginBottom: 48})}>
           Workflow icons

.storybook-s2/docs/Illustrations.jsx

@@ -11,7 +11,7 @@ import { useState } from 'react';
 export function Illustrations() {
   let [gradientStyle, setStyle] = useState('generic1');
   return (
-    <div className={style({marginX: 'auto'})}>
+    <div className={'sb-unstyled ' + style({marginX: 'auto'})}>
       <div className={style({marginX: 48})}>
         <h1 className={style({font: 'heading-2xl', marginBottom: 48})}>
           Illustrations

.storybook-s2/docs/Intro.jsx

@@ -13,7 +13,7 @@ import {H2, H3, H4, P, Pre, Code, Strong, Link} from './typography';
 
 export function Docs() {
   return (
-    <div className={style({marginX: 'auto', marginY: 48})}>
+    <div className={'sb-unstyled ' + style({marginX: 'auto', marginY: 48})}>
       <header
         style={{
           backgroundImage: `url(${new URL('wallpaper_collaborative_S2_desktop.webp', import.meta.url).toString()})`,
@@ -228,7 +228,7 @@ import {ActionButton} from '@react-spectrum/s2';
         </ul>
         <H3>UNSAFE Style Overrides</H3>
         <P>We highly discourage overriding the styles of React Spectrum components because it may break at any time when we change our implementation, making it difficult for you to update in the future. Consider using <Link href="https://react-spectrum.adobe.com/react-aria/" target="_blank">React Aria Components</Link> with our <Link href="?path=/docs/style-macro--docs" target="_top">style macro</Link> to build a custom component with Spectrum styles instead.</P>
-        <P>That said, just like in React Spectrum v3, the <Code>UNSAFE_className</Code> and <Code>UNSAFE_style</Code> props are supported on Spectrum 2 components as last-resort escape hatches. However, unlike in v3, UNSAFE_classNames must be placed in a special <Code>UNSAFE_overrides</Code> <Link href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Cascade_layers" target="_blank">CSS cascade layer</Link>. This guarentees that your overrides will always win over other styles on the page, no matter the order or specificity of the selector.</P>
+        <P>That said, just like in React Spectrum v3, the <Code>UNSAFE_className</Code> and <Code>UNSAFE_style</Code> props are supported on Spectrum 2 components as last-resort escape hatches.</P>
         <Pre>{highlight(`/* YourComponent.tsx */
 import {Button} from '@react-spectrum/s2';
 import './YourComponent.css';
@@ -237,12 +237,10 @@ function YourComponent() {
   return <Button UNSAFE_className="your-unsafe-class">Button</Button>;
 }`)}</Pre>
         <Pre>{highlight(`/* YourComponent.css */
-@layer UNSAFE_overrides {
-  /* Wrap all UNSAFE_className rules in this layer. */
-  .your-unsafe-class {
-    background: red;
-  }
-}`, 'CSS')}</Pre>
+.your-unsafe-class {
+  background: red;
+}
+`, 'CSS')}</Pre>
       </main>
     </div>
   )

.storybook-s2/docs/MDXLayout.jsx

@@ -19,7 +19,7 @@ const mdxComponents = {
 
 export function MDXLayout({children}) {
   return (
-    <div className={style({marginX: 'auto'})}>
+    <div className={'sb-unstyled ' + style({marginX: 'auto'})}>
       <main className={style({marginX: 48})}>
         <MDXProvider components={mdxComponents}>
           {children}

.storybook-s2/docs/Migrating.jsx

@@ -3,7 +3,7 @@ import {P, Code, Pre, H3, H2, Link} from './typography';
 
 export function Migrating() {
   return (
-    <div className={style({marginX: 'auto', fontFamily: 'sans'})}>
+    <div className={'sb-unstyled ' + style({marginX: 'auto', fontFamily: 'sans'})}>
       <div className={style({marginX: 48})}>
         <h1 className={style({font: 'heading-2xl', marginBottom: 48})}>
           Migrating to Spectrum 2
@@ -44,6 +44,17 @@ export function Migrating() {
           <li className={style({font: 'body', marginY: 8})}>Add <Code>allowsMultipleExpanded</Code> to allow multiple <Code>Disclosure</Code> components to be expanded at once (previously default behavior)</li>
         </ul>
 
+        <H3>ActionBar</H3>
+        <ul className="sb-unstyled">
+          <li className={style({font: 'body', marginY: 8})}>Remove <Code>ActionBarContainer</Code> and move <Code>ActionBar</Code> to <Code>renderActionBar</Code> prop of <Code>TableView</Code> or <Code>CardView</Code></li>
+          <li className={style({font: 'body', marginY: 8})}>Update <Code>Item</Code> to <Code>ActionButton</Code></li>
+          <li className={style({font: 'body', marginY: 8})}>Update root level <Code>onAction</Code> to be called via <Code>onPress</Code> on each <Code>ActionButton</Code></li>
+          <li className={style({font: 'body', marginY: 8})}>Apply <Code>isDisabled</Code> directly on each <Code>ActionButton</Code> or <Code>ToggleButton</Code> instead of root level <Code>disabledKeys</Code></li>
+          <li className={style({font: 'body', marginY: 8})}>Update <Code>key</Code> to be <Code>id</Code> (and keep <Code>key</Code> if rendered inside <Code>array.map</Code>)</li>
+          <li className={style({font: 'body', marginY: 8})}>Convert dynamic collections render function to <Code>items.map</Code></li>
+          <li className={style({font: 'body', marginY: 8})}>[PENDING] Comment out <Code>buttonLabelBehavior</Code> (it has not been implemented yet)</li>
+        </ul>
+
         <H3>ActionButton</H3>
         <P>No updates needed.</P>
 
@@ -338,6 +349,17 @@ export function Migrating() {
         <H3>Switch</H3>
         <P>No updates needed.</P>
 
+        <H3>TableView</H3>
+        <ul className="sb-unstyled">
+          <li className={style({font: 'body', marginY: 8})}>For <Code>Column</Code> and <Code>Row</Code>: Update <Code>key</Code> to be <Code>id</Code> (and keep <Code>key</Code> if rendered inside <Code>array.map</Code>)</li>
+          <li className={style({font: 'body', marginY: 8})}>For dynamic tables, pass a <Code>columns</Code> prop into <Code>Row</Code></li>
+          <li className={style({font: 'body', marginY: 8})}>For <Code>Row</Code>: Update dynamic render function to pass in <Code>column</Code> instead of <Code>columnKey</Code></li>
+          <li className={style({font: 'body', marginY: 8})}>[PENDING] Comment out <Code>UNSTABLE_allowsExpandableRows</Code> (it has not been implemented yet)</li>
+          <li className={style({font: 'body', marginY: 8})}>[PENDING] Comment out <Code>UNSTABLE_onExpandedChange</Code> (it has not been implemented yet)</li>
+          <li className={style({font: 'body', marginY: 8})}>[PENDING] Comment out <Code>UNSTABLE_expandedKeys</Code> (it has not been implemented yet)</li>
+          <li className={style({font: 'body', marginY: 8})}>[PENDING] Comment out <Code>UNSTABLE_defaultExpandedKeys</Code> (it has not been implemented yet)</li>
+        </ul>
+
         <H3>Tabs</H3>
         <ul className="sb-unstyled">
           <li className={style({font: 'body', marginY: 8})}>Inside <Code>TabList</Code>: Update <Code>Item</Code> to be <Code>Tab</Code></li>

.storybook-s2/docs/Release Notes.mdx

@@ -4,6 +4,25 @@ export default MDXLayout;
 
 # Release Notes
 
+## v0.6.0
+
+### New Components
+
+* [ActionBar](?path=/docs/actionbar--docs)
+
+### Updates
+
+* [Button](?path=/docs/button--docs): Add `genai` and `premium` gradient variants
+* [Menu](?path=/docs/menu--docs): Add `hideLinkOutIcon` prop, update alignment of items in different sections, and show checkmark on selected items that are links.
+* Added `staticColor="auto"` option to [ActionButton](?path=/docs/actionbutton--docs), [ToggleButton](?path=/docs/togglebutton--docs), [Divider](?path=/docs/divider--docs), [Meter](?path=/docs/meter--docs), [ProgressBar](?path=/docs/progressbar--docs), and [Link](?path=/docs/link--docs)
+* [ContextualHelp](?path=/docs/contextualhelp--docs): Fix alignment with field labels
+* [InlineAlert](?path=/docs/inlinealert--docs): Remove maximum width
+* [CheckboxGroup](?path=/docs/checkboxgroup--docs): Fix `isRequired` within a Form
+
+### Codemods
+
+* Added TableView codemods
+
 ## v0.5.0
 
 In this release we have updated our Dialog and DialogTrigger APIs to improve layout flexibility for custom dialogs and popovers. Dialog has been split into four components:

.storybook-s2/docs/StyleMacro.jsx

@@ -6,7 +6,7 @@ import {Colors} from './Colors';
 
 export function StyleMacro() {
   return (
-    <div className={style({marginX: 'auto'})}>
+    <div className={'sb-unstyled ' + style({marginX: 'auto'})}>
       <header
         className={style({
           paddingX: 48,

examples/rac-tailwind/src/App.js

@@ -1,7 +1,7 @@
 import { ArrowUpIcon, BellIcon, CheckCircleIcon, CheckIcon, ChevronUpDownIcon } from '@heroicons/react/20/solid';
 import { ChatBubbleOvalLeftEllipsisIcon, ExclamationTriangleIcon } from '@heroicons/react/24/outline';
 import { useMemo, useState } from 'react';
-import { Button, Cell, Collection, Column, ComboBox, DateInput, DatePicker, DateSegment, Dialog, DialogTrigger, Group, Header, Heading, Input, Label, ListBox, ListBoxItem, Menu, MenuItem, MenuTrigger, Modal, ModalOverlay, OverlayArrow, Popover, ProgressBar, Radio, RadioGroup, Row, Section, Select, SelectValue, Separator, Slider, SliderOutput, SliderThumb, SliderTrack, Switch, Tab, Table, TableBody, TableHeader, TabList, TabPanel, Tabs, Text } from 'react-aria-components';
+import { UNSTABLE_Autocomplete as Autocomplete, Button, Cell, Collection, Column, ComboBox, DateInput, DatePicker, DateSegment, Dialog, DialogTrigger, Group, Header, Heading, Input, Label, ListBox, ListBoxItem, Menu, MenuItem, MenuTrigger, Modal, ModalOverlay, OverlayArrow, Popover, ProgressBar, Radio, RadioGroup, Row, SearchField, Section, Select, SelectValue, Separator, Slider, SliderOutput, SliderThumb, SliderTrack, Switch, Tab, Table, TableBody, TableHeader, TabList, TabPanel, Tabs, Text, useFilter} from 'react-aria-components';
 import { useAsyncList } from 'react-stately';
 import { people } from './people.js';
 import stocks from './stocks.json';
@@ -29,6 +29,7 @@ export function App() {
         <ImageGridExample />
         <ComboBoxExample />
         <ProgressBarExample />
+        <AutocompleteExample />
       </div>
     </>
   );
@@ -549,3 +550,31 @@ function StockRow(props) {
 function StockCell(props) {
   return <Cell {...props} className={`px-4 py-2 text-sm ${props.className} data-[focus-visible]:outline data-[focus-visible]:outline-2 data-[focus-visible]:outline-slate-600 data-[focus-visible]:-outline-offset-4 group-aria-selected:data-[focus-visible]:outline-white`} />;
 }
+
+function AutocompleteExample() {
+  let {contains} = useFilter({sensitivity: 'base'});
+  return (
+    <div className="bg-gradient-to-r from-sky-400 to-cyan-400 p-8 rounded-lg flex justify-center flex-col">
+      <Autocomplete filter={contains} className="flex flex-col gap-1 w-5/6">
+        <SearchField>
+          <Label className="text-sm text-black">Contacts</Label>
+          <div className="relative w-full cursor-default overflow-hidden rounded-lg bg-white bg-opacity-90 focus-within:bg-opacity-100 transition text-left shadow-md [&:has([data-focus-visible])]:ring-2 [&:has([data-focus-visible])]:ring-black sm:text-sm">
+            <Input className="w-full border-none py-2 pl-3 pr-2 sm:text-sm leading-5 text-gray-900 bg-transparent outline-none" />
+          </div>
+        </SearchField>
+        <div className="h-[300px] py-2 rounded-lg flex justify-center">
+          <ListBox aria-label="Contacts" selectionMode="multiple" selectionBehavior="replace" className="w-72 max-h-[290px] overflow-auto outline-none bg-white text-gray-700 p-2 flex flex-col gap-2 rounded-lg shadow scroll-pb-2 scroll-pt-7">
+            <ContactSection title="Favorites">
+              <Contact id="wade" name="Tony Baldwin" handle="@tony" avatar="https://images.unsplash.com/photo-1633332755192-727a05c4013d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" />
+              <Contact id="arelene" name="Julienne Langstrath" handle="@jlangstrath" avatar="https://images.unsplash.com/photo-1580489944761-15a19d654956?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" />
+              <Contact id="tom" name="Roberto Gonzalez" handle="@rgonzalez" avatar="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" />
+            </ContactSection>
+            <ContactSection title="All Contacts" items={people}>
+              {item => <Contact name={item.name} handle={item.username} avatar={item.avatar} />}
+            </ContactSection>
+          </ListBox>
+        </div>
+      </Autocomplete>
+    </div>
+  );
+}

examples/rsp-cra-18/package.json

@@ -21,6 +21,7 @@
     "@types/react": "^18",
     "@types/react-dom": "^18",
     "react": "^18.1.0",
+    "react-aria-components": "latest",
     "react-dom": "^18.1.0",
     "react-scripts": "5.0.1",
     "typescript": "5.0.4",

examples/rsp-cra-18/src/App.tsx

@@ -15,6 +15,7 @@ import StatusExamples from './sections/StatusExamples';
 import ContentExamples from './sections/ContentExamples';
 import PickerExamples from './sections/PickerExamples';
 import DragAndDropExamples from './sections/DragAndDropExamples';
+import {AutocompleteExample} from './AutocompleteExample';
 
 let columns = [
   {name: 'Foo', key: 'foo'},
@@ -61,6 +62,7 @@ function App() {
             }
           </TableBody>
         </TableView>
+        <AutocompleteExample />
         <ButtonExamples />
         <CollectionExamples />
         <ColorExamples />