Merge branch 'main' into s2-treeview

# Conflicts: # packages/@react-spectrum/s2/package.json # yarn.lock
adobe · Jan 16, 2025 · 02f8244 · 02f8244
2 parents d5c2b1c + 1286a65
commit 02f8244
Show file tree

Hide file tree

Showing 247 changed files with 3,311 additions and 2,927 deletions.
diff --git a/.storybook-s2/docs/Icons.jsx b/.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

diff --git a/.storybook-s2/docs/Illustrations.jsx b/.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

diff --git a/.storybook-s2/docs/Intro.jsx b/.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>
   )

diff --git a/.storybook-s2/docs/MDXLayout.jsx b/.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}

diff --git a/.storybook-s2/docs/Migrating.jsx b/.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>
 

diff --git a/.storybook-s2/docs/Release Notes.mdx b/.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:

diff --git a/.storybook-s2/docs/StyleMacro.jsx b/.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,

diff --git a/packages/@adobe/react-spectrum/package.json b/packages/@adobe/react-spectrum/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@adobe/react-spectrum",
-  "version": "3.38.1",
+  "version": "3.39.0",
   "description": "Spectrum UI components in React",
   "license": "Apache-2.0",
   "main": "dist/main.js",
@@ -38,65 +38,65 @@
   },
   "dependencies": {
     "@internationalized/string": "^3.2.5",
-    "@react-aria/i18n": "^3.12.4",
+    "@react-aria/i18n": "^3.12.5",
     "@react-aria/ssr": "^3.9.7",
-    "@react-aria/utils": "^3.26.0",
-    "@react-aria/visually-hidden": "^3.8.18",
-    "@react-spectrum/accordion": "^3.0.1",
-    "@react-spectrum/actionbar": "^3.6.2",
-    "@react-spectrum/actiongroup": "^3.10.10",
-    "@react-spectrum/avatar": "^3.0.17",
-    "@react-spectrum/badge": "^3.1.18",
-    "@react-spectrum/breadcrumbs": "^3.9.12",
-    "@react-spectrum/button": "^3.16.9",
-    "@react-spectrum/buttongroup": "^3.6.17",
-    "@react-spectrum/calendar": "^3.5.0",
-    "@react-spectrum/checkbox": "^3.9.11",
-    "@react-spectrum/color": "^3.0.2",
-    "@react-spectrum/combobox": "^3.14.0",
-    "@react-spectrum/contextualhelp": "^3.6.16",
-    "@react-spectrum/datepicker": "^3.11.0",
-    "@react-spectrum/dialog": "^3.8.16",
-    "@react-spectrum/divider": "^3.5.18",
-    "@react-spectrum/dnd": "^3.5.0",
-    "@react-spectrum/dropzone": "^3.0.6",
-    "@react-spectrum/filetrigger": "^3.0.6",
-    "@react-spectrum/form": "^3.7.10",
-    "@react-spectrum/icon": "^3.8.0",
-    "@react-spectrum/illustratedmessage": "^3.5.5",
-    "@react-spectrum/image": "^3.5.6",
-    "@react-spectrum/inlinealert": "^3.2.10",
-    "@react-spectrum/labeledvalue": "^3.1.18",
-    "@react-spectrum/layout": "^3.6.10",
-    "@react-spectrum/link": "^3.6.12",
-    "@react-spectrum/list": "^3.9.0",
-    "@react-spectrum/listbox": "^3.14.0",
-    "@react-spectrum/menu": "^3.21.0",
-    "@react-spectrum/meter": "^3.5.5",
-    "@react-spectrum/numberfield": "^3.9.8",
-    "@react-spectrum/overlays": "^5.7.0",
-    "@react-spectrum/picker": "^3.15.4",
-    "@react-spectrum/progress": "^3.7.11",
-    "@react-spectrum/provider": "^3.10.0",
-    "@react-spectrum/radio": "^3.7.11",
-    "@react-spectrum/searchfield": "^3.8.11",
-    "@react-spectrum/slider": "^3.7.0",
-    "@react-spectrum/statuslight": "^3.5.17",
-    "@react-spectrum/switch": "^3.5.10",
-    "@react-spectrum/table": "^3.15.0",
-    "@react-spectrum/tabs": "^3.8.15",
-    "@react-spectrum/tag": "^3.2.11",
-    "@react-spectrum/text": "^3.5.10",
-    "@react-spectrum/textfield": "^3.12.7",
-    "@react-spectrum/theme-dark": "^3.5.14",
-    "@react-spectrum/theme-default": "^3.5.14",
-    "@react-spectrum/theme-light": "^3.4.14",
-    "@react-spectrum/tooltip": "^3.7.0",
-    "@react-spectrum/view": "^3.6.14",
-    "@react-spectrum/well": "^3.4.18",
-    "@react-stately/collections": "^3.12.0",
-    "@react-stately/data": "^3.12.0",
-    "@react-types/shared": "^3.26.0",
+    "@react-aria/utils": "^3.27.0",
+    "@react-aria/visually-hidden": "^3.8.19",
+    "@react-spectrum/accordion": "^3.0.2",
+    "@react-spectrum/actionbar": "^3.6.3",
+    "@react-spectrum/actiongroup": "^3.10.11",
+    "@react-spectrum/avatar": "^3.0.18",
+    "@react-spectrum/badge": "^3.1.19",
+    "@react-spectrum/breadcrumbs": "^3.9.13",
+    "@react-spectrum/button": "^3.16.10",
+    "@react-spectrum/buttongroup": "^3.6.18",
+    "@react-spectrum/calendar": "^3.6.0",
+    "@react-spectrum/checkbox": "^3.9.12",
+    "@react-spectrum/color": "^3.0.3",
+    "@react-spectrum/combobox": "^3.14.1",
+    "@react-spectrum/contextualhelp": "^3.6.17",
+    "@react-spectrum/datepicker": "^3.12.0",
+    "@react-spectrum/dialog": "^3.8.17",
+    "@react-spectrum/divider": "^3.5.19",
+    "@react-spectrum/dnd": "^3.5.1",
+    "@react-spectrum/dropzone": "^3.0.7",
+    "@react-spectrum/filetrigger": "^3.0.7",
+    "@react-spectrum/form": "^3.7.11",
+    "@react-spectrum/icon": "^3.8.1",
+    "@react-spectrum/illustratedmessage": "^3.5.6",
+    "@react-spectrum/image": "^3.5.7",
+    "@react-spectrum/inlinealert": "^3.2.11",
+    "@react-spectrum/labeledvalue": "^3.1.19",
+    "@react-spectrum/layout": "^3.6.11",
+    "@react-spectrum/link": "^3.6.13",
+    "@react-spectrum/list": "^3.9.1",
+    "@react-spectrum/listbox": "^3.14.1",
+    "@react-spectrum/menu": "^3.21.1",
+    "@react-spectrum/meter": "^3.5.6",
+    "@react-spectrum/numberfield": "^3.9.9",
+    "@react-spectrum/overlays": "^5.7.1",
+    "@react-spectrum/picker": "^3.15.5",
+    "@react-spectrum/progress": "^3.7.12",
+    "@react-spectrum/provider": "^3.10.1",
+    "@react-spectrum/radio": "^3.7.12",
+    "@react-spectrum/searchfield": "^3.8.12",
+    "@react-spectrum/slider": "^3.7.1",
+    "@react-spectrum/statuslight": "^3.5.18",
+    "@react-spectrum/switch": "^3.5.11",
+    "@react-spectrum/table": "^3.15.1",
+    "@react-spectrum/tabs": "^3.8.16",
+    "@react-spectrum/tag": "^3.2.12",
+    "@react-spectrum/text": "^3.5.11",
+    "@react-spectrum/textfield": "^3.12.8",
+    "@react-spectrum/theme-dark": "^3.5.15",
+    "@react-spectrum/theme-default": "^3.5.15",
+    "@react-spectrum/theme-light": "^3.4.15",
+    "@react-spectrum/tooltip": "^3.7.1",
+    "@react-spectrum/view": "^3.6.15",
+    "@react-spectrum/well": "^3.4.19",
+    "@react-stately/collections": "^3.12.1",
+    "@react-stately/data": "^3.12.1",
+    "@react-types/shared": "^3.27.0",
     "client-only": "^0.0.1"
   },
   "publishConfig": {

diff --git a/packages/@internationalized/date/package.json b/packages/@internationalized/date/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@internationalized/date",
-  "version": "3.6.0",
+  "version": "3.7.0",
   "description": "Internationalized calendar, date, and time manipulation utilities",
   "license": "Apache-2.0",
   "main": "dist/main.js",

diff --git a/packages/@react-aria/accordion/package.json b/packages/@react-aria/accordion/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@react-aria/accordion",
-  "version": "3.0.0-alpha.36",
+  "version": "3.0.0-alpha.37",
   "description": "Spectrum UI components in React",
   "license": "Apache-2.0",
   "main": "dist/main.js",
@@ -22,12 +22,12 @@
     "url": "https://github.com/adobe/react-spectrum"
   },
   "dependencies": {
-    "@react-aria/button": "^3.11.0",
-    "@react-aria/selection": "^3.21.0",
-    "@react-aria/utils": "^3.26.0",
-    "@react-stately/tree": "^3.8.6",
-    "@react-types/accordion": "3.0.0-alpha.25",
-    "@react-types/shared": "^3.26.0",
+    "@react-aria/button": "^3.11.1",
+    "@react-aria/selection": "^3.22.0",
+    "@react-aria/utils": "^3.27.0",
+    "@react-stately/tree": "^3.8.7",
+    "@react-types/accordion": "3.0.0-alpha.26",
+    "@react-types/shared": "^3.27.0",
     "@swc/helpers": "^0.5.0"
   },
   "peerDependencies": {

diff --git a/packages/@react-aria/actiongroup/package.json b/packages/@react-aria/actiongroup/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@react-aria/actiongroup",
-  "version": "3.7.11",
+  "version": "3.7.12",
   "description": "Spectrum UI components in React",
   "license": "Apache-2.0",
   "main": "dist/main.js",
@@ -22,13 +22,13 @@
     "url": "https://github.com/adobe/react-spectrum"
   },
   "dependencies": {
-    "@react-aria/focus": "^3.19.0",
-    "@react-aria/i18n": "^3.12.4",
-    "@react-aria/interactions": "^3.22.5",
-    "@react-aria/utils": "^3.26.0",
-    "@react-stately/list": "^3.11.1",
-    "@react-types/actiongroup": "^3.4.13",
-    "@react-types/shared": "^3.26.0",
+    "@react-aria/focus": "^3.19.1",
+    "@react-aria/i18n": "^3.12.5",
+    "@react-aria/interactions": "^3.23.0",
+    "@react-aria/utils": "^3.27.0",
+    "@react-stately/list": "^3.11.2",
+    "@react-types/actiongroup": "^3.4.14",
+    "@react-types/shared": "^3.27.0",
     "@swc/helpers": "^0.5.0"
   },
   "peerDependencies": {

diff --git a/packages/@react-aria/autocomplete/package.json b/packages/@react-aria/autocomplete/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@react-aria/autocomplete",
-  "version": "3.0.0-alpha.36",
+  "version": "3.0.0-alpha.37",
   "description": "Spectrum UI components in React",
   "license": "Apache-2.0",
   "main": "dist/main.js",
@@ -22,18 +22,18 @@
     "url": "https://github.com/adobe/react-spectrum"
   },
   "dependencies": {
-    "@react-aria/combobox": "^3.11.0",
-    "@react-aria/i18n": "^3.12.3",
-    "@react-aria/interactions": "^3.22.5",
-    "@react-aria/listbox": "^3.13.6",
-    "@react-aria/searchfield": "^3.7.11",
-    "@react-aria/textfield": "^3.15.0",
-    "@react-aria/utils": "^3.26.0",
-    "@react-stately/autocomplete": "3.0.0-alpha.1",
-    "@react-stately/combobox": "^3.10.1",
-    "@react-types/autocomplete": "3.0.0-alpha.27",
-    "@react-types/button": "^3.10.1",
-    "@react-types/shared": "^3.26.0",
+    "@react-aria/combobox": "^3.11.1",
+    "@react-aria/i18n": "^3.12.5",
+    "@react-aria/interactions": "^3.23.0",
+    "@react-aria/listbox": "^3.14.0",
+    "@react-aria/searchfield": "^3.8.0",
+    "@react-aria/textfield": "^3.16.0",
+    "@react-aria/utils": "^3.27.0",
+    "@react-stately/autocomplete": "3.0.0-alpha.0",
+    "@react-stately/combobox": "^3.10.2",
+    "@react-types/autocomplete": "3.0.0-alpha.28",
+    "@react-types/button": "^3.10.2",
+    "@react-types/shared": "^3.27.0",
     "@swc/helpers": "^0.5.0"
   },
   "peerDependencies": {

diff --git a/packages/@react-aria/breadcrumbs/package.json b/packages/@react-aria/breadcrumbs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@react-aria/breadcrumbs",
-  "version": "3.5.19",
+  "version": "3.5.20",
   "description": "Spectrum UI components in React",
   "license": "Apache-2.0",
   "main": "dist/main.js",
@@ -22,11 +22,11 @@
     "url": "https://github.com/adobe/react-spectrum"
   },
   "dependencies": {
-    "@react-aria/i18n": "^3.12.4",
-    "@react-aria/link": "^3.7.7",
-    "@react-aria/utils": "^3.26.0",
-    "@react-types/breadcrumbs": "^3.7.9",
-    "@react-types/shared": "^3.26.0",
+    "@react-aria/i18n": "^3.12.5",
+    "@react-aria/link": "^3.7.8",
+    "@react-aria/utils": "^3.27.0",
+    "@react-types/breadcrumbs": "^3.7.10",
+    "@react-types/shared": "^3.27.0",
     "@swc/helpers": "^0.5.0"
   },
   "peerDependencies": {