Merge branch 'main' into 7887-add-shouldSelectOnPressUp-prop-to-GridList

Author: YumiChen

.storybook-s2/docs/Intro.jsx

@@ -176,6 +176,8 @@ function App() {
 <Provider background="base">
   {/* your app */}
 </Provider>`)}</Pre>
+        <H3>Usage with older React Spectrum versions</H3>
+        <P>See Adobe internal documentation.</P>
         <H2>Styling</H2>
         <P>React Spectrum v3 supported a limited set of <Link href="https://react-spectrum.adobe.com/react-spectrum/styling.html" target="_blank">style props</Link> for layout and positioning using Spectrum-defined values. In Spectrum 2, we’re improving on this by offering a much more flexible style macro. This offers additional Spectrum tokens, improves performance by generating CSS at build time rather than runtime, and works with any DOM element for use in custom components.</P>
         <P><Link href="https://parceljs.org/features/macros/" target="_blank">Macros</Link> are a new bundler feature that enable functions to run at build time. The React Spectrum <Code>style</Code> macro uses this to generate CSS that can be applied to any DOM element or component. Import the <Code>style</Code> macro using the with <Code>{`{type: 'macro'}`}</Code> <Link href="https://github.com/tc39/proposal-import-attributes" target="_blank">import attribute</Link>, and pass the result to the <Code>styles</Code> prop of any React Spectrum component to provide it with styles.</P>
@@ -238,8 +240,12 @@ function YourComponent() {
         <Pre>{highlight(`/* YourComponent.css */
 .your-unsafe-class {
   background: red;
-}
-`, 'CSS')}</Pre>
+}`, 'CSS')}</Pre>
+        <H3>CSS Resets</H3>
+        <P>CSS resets are strongly discouraged. Global CSS selectors can unintentionally affect elements that were not intended, leading to style clashes. Since Spectrum 2 uses <Link href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Cascade_layers" target="_blank">CSS cascade layers</Link>, global CSS outside a <Code>@layer</Code> will override S2's CSS. Therefore, if you cannot remove your CSS reset, it must be placed in a lower layer. This can be done by declaring your reset layer before the <Code>_</Code> layer used by S2.</P>
+        <Pre>{highlight(`/* App.css */
+@layer reset, _;
+@import "reset.css" layer(reset);`)}</Pre>
       </main>
     </div>
   )

.storybook-s2/docs/Migrating.jsx

@@ -411,6 +411,12 @@ export function Migrating() {
           <li className={style({font: 'body', marginY: 8})}>Update placement prop to be have one value (i.e. Update <Code>placement="bottom left"</Code> to be <Code>placement="bottom"</Code>)</li>
         </ul>
 
+        <H3>TreeView</H3>
+        <P>If migrating from TreeView version 3.0.0-beta.3 or before, please do the following. Otherwise, no updates needed.</P>
+        <ul className="sb-unstyled">
+          <li className={style({font: 'body', marginY: 8})}> Update content within <Code>TreeViewItem</Code> to be wrapped in <Code>TreeViewContentItem</Code></li>
+        </ul>
+
         <H3>View</H3>
         <ul className="sb-unstyled">
           <li className={style({font: 'body', marginY: 8})}>Update <Code>View</Code> to be a <Code>div</Code> and apply styles using the style macro</li>

.storybook-s2/docs/Release Notes.mdx

@@ -4,6 +4,35 @@ export default MDXLayout;
 
 # Release Notes
 
+## v0.7.0
+
+### New Components
+
+* [TreeView](?path=/docs/treeview--docs)
+
+### Updates
+
+* [Badge](?path=/docs/badge--docs): Add `overflowMode` prop, fix icon alignment, update typo from `variant="charteuse"` to `variant="chartreuse"`
+* [CardView](?path=/docs/cardview--docs): Fix styling when using `renderActionBar`
+* Image: Add `fetchPriority` prop
+* [Menu](?path=/docs/menu--docs): Fix menu item's focus rings from exceeding popover boundaries
+* [Tabs](?path=/docs/tabs--docs): Add collapse behavior
+* Remove `all: revert-layer` from style macro generated CSS to fix Safari issues
+* Remove references to CSS `flex` shorthand. Please use `flexGrow`, `flexBasis`, and `flexShrink` instead.
+
+### Codemods
+
+* Update S2 icon migration map
+* Handle margin/padding shorthands in style props codemod
+
+### Important CSS update
+
+In this release, we have made significant changes to the way our Style Macro generates CSS in order to fix issues with Safari. The Style Macro uses [CSS Cascade Layers](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Cascade_layers) to avoid CSS specificity and ordering issues. However, this means global CSS declared outside a `@layer`, such as CSS resets, will take precedence over S2's CSS. To avoid this, we previously used [all: revert-layer](https://developer.mozilla.org/en-US/docs/Web/CSS/revert-layer). Unfortunately, due to numerous bugs in Safari 18, this caused rendering issues in our components.
+
+To fix these Safari issues, we have removed `all: revert-layer` in this release. This means that global CSS will now take precedence over S2's styles. **If you are using a CSS reset on the same page as S2 components, you will need to remove it** or put it in a `@layer` of its own. See [the docs](?path=/docs/intro--docs#css-resets) for more information.
+
+**If you are using a version older than React Spectrum v3 on the same page, you must update to the latest version.** See the Adobe internal documentation for more details.
+
 ## v0.6.0
 
 ### New Components

.storybook-s2/manager.js

@@ -0,0 +1,5 @@
+import {addons} from '@storybook/manager-api';
+
+addons.setConfig({
+  enableShortcuts: false
+});

package.json

@@ -235,7 +235,7 @@
     "recast": "0.23.6",
     "ast-types": "0.16.1",
     "svgo": "^3",
-    "@testing-library/user-event@npm:^14.4.0": "patch:@testing-library/user-event@npm%3A14.6.1#~/.yarn/patches/@testing-library-user-event-npm-14.6.1-5da7e1d4e2.patch"
+    "@testing-library/user-event": "patch:@testing-library/user-event@npm%3A14.6.1#~/.yarn/patches/@testing-library-user-event-npm-14.6.1-5da7e1d4e2.patch"
   },
   "@parcel/transformer-css": {
     "cssModules": {

packages/@adobe/react-spectrum/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adobe/react-spectrum",
-  "version": "3.39.0",
+  "version": "3.40.1",
   "description": "Spectrum UI components in React",
   "license": "Apache-2.0",
   "main": "dist/main.js",
@@ -38,66 +38,68 @@
   },
   "dependencies": {
     "@internationalized/string": "^3.2.5",
-    "@react-aria/i18n": "^3.12.5",
+    "@react-aria/collections": "3.0.0-beta.1",
+    "@react-aria/i18n": "^3.12.7",
     "@react-aria/ssr": "^3.9.7",
-    "@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/tree": "^3.0.0-beta.3",
-    "@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",
+    "@react-aria/utils": "^3.28.1",
+    "@react-aria/visually-hidden": "^3.8.21",
+    "@react-spectrum/accordion": "^3.0.4",
+    "@react-spectrum/actionbar": "^3.6.5",
+    "@react-spectrum/actiongroup": "^3.10.13",
+    "@react-spectrum/avatar": "^3.0.20",
+    "@react-spectrum/badge": "^3.1.21",
+    "@react-spectrum/breadcrumbs": "^3.9.15",
+    "@react-spectrum/button": "^3.16.12",
+    "@react-spectrum/buttongroup": "^3.6.20",
+    "@react-spectrum/calendar": "^3.6.2",
+    "@react-spectrum/checkbox": "^3.9.14",
+    "@react-spectrum/color": "^3.0.5",
+    "@react-spectrum/combobox": "^3.15.1",
+    "@react-spectrum/contextualhelp": "^3.6.19",
+    "@react-spectrum/datepicker": "^3.13.1",
+    "@react-spectrum/dialog": "^3.8.19",
+    "@react-spectrum/divider": "^3.5.21",
+    "@react-spectrum/dnd": "^3.5.3",
+    "@react-spectrum/dropzone": "^3.0.9",
+    "@react-spectrum/filetrigger": "^3.0.9",
+    "@react-spectrum/form": "^3.7.13",
+    "@react-spectrum/icon": "^3.8.3",
+    "@react-spectrum/illustratedmessage": "^3.5.8",
+    "@react-spectrum/image": "^3.5.9",
+    "@react-spectrum/inlinealert": "^3.2.13",
+    "@react-spectrum/labeledvalue": "^3.2.1",
+    "@react-spectrum/layout": "^3.6.13",
+    "@react-spectrum/link": "^3.6.15",
+    "@react-spectrum/list": "^3.9.3",
+    "@react-spectrum/listbox": "^3.14.3",
+    "@react-spectrum/menu": "^3.21.3",
+    "@react-spectrum/meter": "^3.5.8",
+    "@react-spectrum/numberfield": "^3.9.11",
+    "@react-spectrum/overlays": "^5.7.3",
+    "@react-spectrum/picker": "^3.15.7",
+    "@react-spectrum/progress": "^3.7.14",
+    "@react-spectrum/provider": "^3.10.3",
+    "@react-spectrum/radio": "^3.7.14",
+    "@react-spectrum/searchfield": "^3.8.14",
+    "@react-spectrum/slider": "^3.7.3",
+    "@react-spectrum/statuslight": "^3.5.20",
+    "@react-spectrum/switch": "^3.5.13",
+    "@react-spectrum/table": "^3.16.1",
+    "@react-spectrum/tabs": "^3.8.18",
+    "@react-spectrum/tag": "^3.2.14",
+    "@react-spectrum/text": "^3.5.13",
+    "@react-spectrum/textfield": "^3.13.1",
+    "@react-spectrum/theme-dark": "^3.5.16",
+    "@react-spectrum/theme-default": "^3.5.16",
+    "@react-spectrum/theme-light": "^3.4.16",
+    "@react-spectrum/toast": "^3.0.1",
+    "@react-spectrum/tooltip": "^3.7.3",
+    "@react-spectrum/tree": "^3.0.1",
+    "@react-spectrum/view": "^3.6.17",
+    "@react-spectrum/well": "^3.4.21",
+    "@react-stately/collections": "^3.12.2",
+    "@react-stately/data": "^3.12.2",
+    "@react-types/shared": "^3.28.0",
     "client-only": "^0.0.1"
   },
   "publishConfig": {

packages/@adobe/react-spectrum/src/index.ts

@@ -61,6 +61,7 @@ export {TextArea, TextField} from '@react-spectrum/textfield';
 export {theme as darkTheme} from '@react-spectrum/theme-dark';
 export {theme as defaultTheme} from '@react-spectrum/theme-default';
 export {theme as lightTheme} from '@react-spectrum/theme-light';
+export {ToastContainer, ToastQueue} from '@react-spectrum/toast';
 export {Tooltip, TooltipTrigger} from '@react-spectrum/tooltip';
 export {TreeView, TreeViewItem, TreeViewItemContent} from '@react-spectrum/tree';
 export {Content, Footer, Header, View} from '@react-spectrum/view';
@@ -71,6 +72,7 @@ export {VisuallyHidden} from '@react-aria/visually-hidden';
 export {useCollator, useDateFormatter, useFilter, useLocale, useLocalizedStringFormatter, useMessageFormatter, useNumberFormatter} from '@react-aria/i18n';
 export {SSRProvider} from '@react-aria/ssr';
 export {useDragAndDrop, DIRECTORY_DRAG_TYPE} from '@react-spectrum/dnd';
+export {Collection} from '@react-aria/collections';
 
 export type {SpectrumActionBarContainerProps, SpectrumActionBarProps} from '@react-spectrum/actionbar';
 export type {SpectrumActionGroupProps} from '@react-spectrum/actiongroup';
@@ -115,6 +117,7 @@ export type {SpectrumTableProps, SpectrumColumnProps, TableHeaderProps, TableBod
 export type {SpectrumTabListProps, SpectrumTabPanelsProps, SpectrumTabsProps} from '@react-spectrum/tabs';
 export type {SpectrumTagGroupProps} from '@react-spectrum/tag';
 export type {SpectrumTextFieldProps, SpectrumTextAreaProps} from '@react-spectrum/textfield';
+export type {SpectrumToastContainerProps, SpectrumToastOptions} from '@react-spectrum/toast';
 export type {SpectrumTooltipProps, SpectrumTooltipTriggerProps} from '@react-spectrum/tooltip';
 export type {SpectrumTreeViewProps, SpectrumTreeViewItemProps, SpectrumTreeViewItemContentProps} from '@react-spectrum/tree';
 export type {ContentProps, FooterProps, HeaderProps, ViewProps} from '@react-spectrum/view';

packages/@adobe/spectrum-css-temp/components/checkbox/index.css

@@ -67,6 +67,8 @@ governing permissions and limitations under the License.
   opacity: .0001;
   z-index: 1;
 
+  /* prevent double click event due to browser waiting to fire double tap */
+  touch-action: manipulation;
   cursor: default;
 
   &:disabled {

packages/@adobe/spectrum-css-temp/components/inputgroup/skin.css

@@ -20,6 +20,10 @@ governing permissions and limitations under the License.
     }
   }
 
+  .spectrum-InputGroup-input:focus {
+    border-color: var(--spectrum-textfield-border-color);
+  }
+
   &.is-focused {
     &:not(.spectrum-InputGroup--invalid):not(.is-disabled) {
       .spectrum-InputGroup-input {
@@ -48,7 +52,8 @@ governing permissions and limitations under the License.
 
   &.spectrum-InputGroup--invalid {
     .spectrum-FieldButton:before,
-    .spectrum-InputGroup-input {
+    .spectrum-InputGroup-input,
+    .spectrum-InputGroup-input:focus {
       border-color: var(--spectrum-textfield-border-color-error);
     }
 

packages/@adobe/spectrum-css-temp/components/toggle/index.css

@@ -56,6 +56,8 @@ governing permissions and limitations under the License.
   opacity: .0001;
   z-index: 1;
 
+  /* prevent double click event due to browser waiting to fire double tap */
+  touch-action: manipulation;
   cursor: default;
 
   &:checked + .spectrum-ToggleSwitch-switch {