Merge branch 'main' into upgrade-sb-8-2

# Conflicts:
#	package.json

Author: snowystinger

.circleci/comment.js

@@ -53,6 +53,7 @@ async function run() {
       [RAC Tailwind Example](https://reactspectrum.blob.core.windows.net/reactspectrum/${process.env.CIRCLE_SHA1}/verdaccio/rac-tailwind/index.html)
       [RAC Spectrum + Tailwind Example](https://reactspectrum.blob.core.windows.net/reactspectrum/${process.env.CIRCLE_SHA1}/verdaccio/rac-spectrum-tailwind/index.html)
       [S2 Parcel Example](https://reactspectrum.blob.core.windows.net/reactspectrum/${process.env.CIRCLE_SHA1}/verdaccio/s2-parcel-example/index.html)
+      [S2 Custom Icons](https://reactspectrum.blob.core.windows.net/reactspectrum/${process.env.CIRCLE_SHA1}/verdaccio/icon-builder-fixture/index.html)
       [S2 Webpack Example](https://reactspectrum.blob.core.windows.net/reactspectrum/${process.env.CIRCLE_SHA1}/verdaccio/s2-webpack-5-example/index.html)
       [CRA Test App Size](https://reactspectrum.blob.core.windows.net/reactspectrum/${process.env.CIRCLE_SHA1}/verdaccio/publish-stats/build-stats.txt)
       [NextJS App Size](https://reactspectrum.blob.core.windows.net/reactspectrum/${process.env.CIRCLE_SHA1}/verdaccio/publish-stats/next-build-stats.txt)

.circleci/config.yml

@@ -685,6 +685,11 @@ jobs:
           environment:
             VERDACCIO_STORAGE_PATH: /tmp/verdaccio-workspace/storage
 
+      - persist_to_workspace:
+          root: verdaccio_dist
+          paths:
+            - '*/verdaccio/icon-builder-fixture'
+
   v-publish-stats:
     executor: rsp
     steps:

.parcelrc-build

@@ -16,7 +16,7 @@
       "@parcel/transformer-react-refresh-wrap"
     ]
   },
-  "namers": ["parcel-namer-s2", "parcel-namer-intl", "..."],
+  "namers": ["@react-spectrum/parcel-namer-s2", "parcel-namer-intl", "..."],
   "optimizers": {
     "**/spectrum-theme.cjs": ["parcel-optimizer-strict-mode"]
   }

eslint.config.mjs

@@ -52,6 +52,7 @@ export default [{
         "packages/dev/optimize-locales-plugin/LocalesPlugin.d.ts",
         "examples/**/*",
         "starters/**/*",
+        "scripts/icon-builder-fixture/**/*",
         "packages/@react-spectrum/s2/icon.d.ts",
         "packages/@react-spectrum/s2/spectrum-illustrations",
         "packages/dev/parcel-config-storybook/*",

package.json

@@ -98,6 +98,7 @@
     "@parcel/transformer-inline-string": "^2.14.0",
     "@parcel/transformer-svg-react": "^2.14.0",
     "@parcel/transformer-typescript-types": "^2.14.0",
+    "@react-spectrum/parcel-namer-s2": "^1.0.0",
     "@react-spectrum/s2-icon-builder": "^0.2.0",
     "@spectrum-css/component-builder": "workspace:^",
     "@spectrum-css/vars": "^2.3.0",
@@ -220,6 +221,9 @@
     "@babel/traverse": "7.24.1",
     "@babel/types": "7.24.0",
     "@mdx-js/react": "2.0.0-rc.2",
+    "@parcel/transformer-react-refresh-wrap": "2.14.0",
+    "@parcel/transformer-js": "2.14.0",
+    "@parcel/codeframe": "2.14.0",
     "postcss": "8.4.24",
     "postcss-custom-properties": "13.2.0",
     "postcss-import": "15.1.0",
@@ -231,8 +235,6 @@
     "recast": "0.23.6",
     "ast-types": "0.16.1",
     "svgo": "^3",
-    "react": "18.3.1",
-    "react-dom": "18.3.1",
     "@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",
     "@types/node@npm:*": "^22",
     "@types/node@npm:^18.0.0": "^22",

packages/@react-aria/selection/src/ListKeyboardDelegate.ts

@@ -78,7 +78,7 @@ export class ListKeyboardDelegate<T> implements KeyboardDelegate {
     let nextKey = key;
     while (nextKey != null) {
       let item = this.collection.getItem(nextKey);
-      if (item?.type === 'loader' || (item?.type === 'item' && !this.isDisabled(item))) {
+      if (item?.type === 'item' && !this.isDisabled(item)) {
         return nextKey;
       }
 

packages/@react-aria/test-utils/src/combobox.ts

@@ -55,14 +55,17 @@ export class ComboBoxTester {
     if (trigger) {
       this._trigger = trigger;
     } else {
-      let trigger = within(root).queryByRole('button', {hidden: true});
-      if (trigger) {
-        this._trigger = trigger;
-      } else {
-        // For cases like https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-select-only/ where the combobox
-        // is also the trigger button
-        this._trigger = this._combobox;
+      let buttons = within(root).queryAllByRole('button', {hidden: true});
+
+      if (buttons.length === 1) {
+        trigger = buttons[0];
+      } else if (buttons.length > 1) {
+        trigger = buttons.find(button => button.hasAttribute('aria-haspopup'));
       }
+
+      // For cases like https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-select-only/ where the combobox
+      // is also the trigger button
+      this._trigger = trigger || this._combobox;
     }
   }
 

packages/@react-aria/test-utils/src/events.ts

@@ -14,6 +14,37 @@ import {act, fireEvent} from '@testing-library/react';
 import {UserOpts} from './types';
 
 export const DEFAULT_LONG_PRESS_TIME = 500;
+function testPlatform(re: RegExp) {
+  return typeof window !== 'undefined' && window.navigator != null
+    ? re.test(window.navigator['userAgentData']?.platform || window.navigator.platform)
+    : false;
+}
+
+function cached(fn: () => boolean) {
+  if (process.env.NODE_ENV === 'test') {
+    return fn;
+  }
+
+  let res: boolean | null = null;
+  return () => {
+    if (res == null) {
+      res = fn();
+    }
+    return res;
+  };
+}
+
+const isMac = cached(function () {
+  return testPlatform(/^Mac/i);
+});
+
+export function getAltKey(): 'Alt' | 'ControlLeft' {
+  return isMac() ? 'Alt' : 'ControlLeft';
+}
+
+export function getMetaKey(): 'MetaLeft' | 'ControlLeft' {
+  return isMac() ? 'MetaLeft' : 'ControlLeft';
+}
 
 /**
  * Simulates a "long press" event on a element.
@@ -58,9 +89,10 @@ export async function triggerLongPress(opts: {element: HTMLElement, advanceTimer
 }
 
 // Docs cannot handle the types that userEvent actually declares, so hopefully this sub set is okay
-export async function pressElement(user: {click: (element: Element) => Promise<void>, keyboard: (keys: string) => Promise<void>, pointer: (opts: {target: Element, keys: string}) => Promise<void>}, element: HTMLElement, interactionType: UserOpts['interactionType']): Promise<void> {
+export async function pressElement(user: {click: (element: Element) => Promise<void>, keyboard: (keys: string) => Promise<void>, pointer: (opts: {target: Element, keys: string, coords?: any}) => Promise<void>}, element: HTMLElement, interactionType: UserOpts['interactionType']): Promise<void> {
   if (interactionType === 'mouse') {
-    await user.click(element);
+    // Add coords with pressure so this isn't detected as a virtual click
+    await user.pointer({target: element, keys: '[MouseLeft]', coords: {pressure: .5}});
   } else if (interactionType === 'keyboard') {
     // TODO: For the keyboard flow, I wonder if it would be reasonable to just do fireEvent directly on the obtained row node or if we should
     // stick to simulting an actual user's keyboard operations as closely as possible

packages/@react-aria/test-utils/src/gridlist.ts

@@ -11,8 +11,8 @@
  */
 
 import {act, within} from '@testing-library/react';
+import {getAltKey, getMetaKey, pressElement, triggerLongPress} from './events';
 import {GridListTesterOpts, GridRowActionOpts, ToggleGridRowOpts, UserOpts} from './types';
-import {pressElement, triggerLongPress} from './events';
 
 interface GridListToggleRowOpts extends ToggleGridRowOpts {}
 interface GridListRowActionOpts extends GridRowActionOpts {}
@@ -57,20 +57,21 @@ export class GridListTester {
   }
 
   // TODO: RTL
-  private async keyboardNavigateToRow(opts: {row: HTMLElement}) {
-    let {row} = opts;
+  private async keyboardNavigateToRow(opts: {row: HTMLElement, selectionOnNav?: 'default' | 'none'}) {
+    let {row, selectionOnNav = 'default'} = opts;
+    let altKey = getAltKey();
     let rows = this.rows;
     let targetIndex = rows.indexOf(row);
     if (targetIndex === -1) {
       throw new Error('Option provided is not in the gridlist');
     }
 
-    if (document.activeElement !== this._gridlist || !this._gridlist.contains(document.activeElement)) {
+    if (document.activeElement !== this._gridlist && !this._gridlist.contains(document.activeElement)) {
       act(() => this._gridlist.focus());
     }
 
     if (document.activeElement === this._gridlist) {
-      await this.user.keyboard('[ArrowDown]');
+      await this.user.keyboard(`${selectionOnNav === 'none' ? `[${altKey}>]` : ''}[ArrowDown]${selectionOnNav === 'none' ? `[/${altKey}]` : ''}`);
     } else if (this._gridlist.contains(document.activeElement) && document.activeElement!.getAttribute('role') !== 'row') {
       do {
         await this.user.keyboard('[ArrowLeft]');
@@ -82,22 +83,33 @@ export class GridListTester {
     }
     let direction = targetIndex > currIndex ? 'down' : 'up';
 
+    if (selectionOnNav === 'none') {
+      await this.user.keyboard(`[${altKey}>]`);
+    }
     for (let i = 0; i < Math.abs(targetIndex - currIndex); i++) {
       await this.user.keyboard(`[${direction === 'down' ? 'ArrowDown' : 'ArrowUp'}]`);
     }
+    if (selectionOnNav === 'none') {
+      await this.user.keyboard(`[/${altKey}]`);
+    }
   };
 
   /**
    * Toggles the selection for the specified gridlist row. Defaults to using the interaction type set on the gridlist tester.
+   * Note that this will endevor to always add/remove JUST the provided row to the set of selected rows.
    */
   async toggleRowSelection(opts: GridListToggleRowOpts): Promise<void> {
     let {
       row,
       needsLongPress,
       checkboxSelection = true,
-      interactionType = this._interactionType
+      interactionType = this._interactionType,
+      selectionBehavior = 'toggle'
     } = opts;
 
+    let altKey = getAltKey();
+    let metaKey = getMetaKey();
+
     if (typeof row === 'string' || typeof row === 'number') {
       row = this.findRow({rowIndexOrText: row});
     }
@@ -116,9 +128,15 @@ export class GridListTester {
 
     // this would be better than the check to do nothing in events.ts
     // also, it'd be good to be able to trigger selection on the row instead of having to go to the checkbox directly
-    if (interactionType === 'keyboard' && !checkboxSelection) {
-      await this.keyboardNavigateToRow({row});
-      await this.user.keyboard('{Space}');
+    if (interactionType === 'keyboard' && (!checkboxSelection || !rowCheckbox)) {
+      await this.keyboardNavigateToRow({row, selectionOnNav: selectionBehavior === 'replace' ? 'none' : 'default'});
+      if (selectionBehavior === 'replace') {
+        await this.user.keyboard(`[${altKey}>]`);
+      }
+      await this.user.keyboard('[Space]');
+      if (selectionBehavior === 'replace') {
+        await this.user.keyboard(`[/${altKey}]`);
+      }
       return;
     }
     if (rowCheckbox && checkboxSelection) {
@@ -132,9 +150,14 @@ export class GridListTester {
 
         // Note that long press interactions with rows is strictly touch only for grid rows
         await triggerLongPress({element: cell, advanceTimer: this._advanceTimer, pointerOpts: {pointerType: 'touch'}});
-
       } else {
-        await pressElement(this.user, cell, interactionType);
+        if (selectionBehavior === 'replace' && interactionType !== 'touch') {
+          await this.user.keyboard(`[${metaKey}>]`);
+        }
+        await pressElement(this.user, row, interactionType);
+        if (selectionBehavior === 'replace' && interactionType !== 'touch') {
+          await this.user.keyboard(`[/${metaKey}]`);
+        }
       }
     }
   }
@@ -166,7 +189,7 @@ export class GridListTester {
         return;
       }
 
-      await this.keyboardNavigateToRow({row});
+      await this.keyboardNavigateToRow({row, selectionOnNav: 'none'});
       await this.user.keyboard('[Enter]');
     } else {
       await pressElement(this.user, row, interactionType);

packages/@react-aria/test-utils/src/listbox.ts

@@ -11,8 +11,8 @@
  */
 
 import {act, within} from '@testing-library/react';
+import {getAltKey, getMetaKey, pressElement, triggerLongPress} from './events';
 import {ListBoxTesterOpts, UserOpts} from './types';
-import {pressElement, triggerLongPress} from './events';
 
 interface ListBoxToggleOptionOpts {
   /**
@@ -31,7 +31,16 @@ interface ListBoxToggleOptionOpts {
   /**
    * Whether the option needs to be long pressed to be selected. Depends on the listbox's implementation.
    */
-  needsLongPress?: boolean
+  needsLongPress?: boolean,
+  /**
+   * Whether the listbox has a selectionBehavior of "toggle" or "replace" (aka highlight selection). This affects the user operations
+   * required to toggle option selection by adding modifier keys during user actions, useful when performing multi-option selection in a "selectionBehavior: 'replace'" listbox.
+   * If you would like to still simulate user actions (aka press) without these modifiers keys for a "selectionBehavior: replace" listbox, simply omit this option.
+   * See the [RAC Listbox docs](https://react-spectrum.adobe.com/react-aria/ListBox.html#selection-behavior) for more info on this behavior.
+   *
+   * @default 'toggle'
+   */
+    selectionBehavior?: 'toggle' | 'replace'
 }
 
 interface ListBoxOptionActionOpts extends Omit<ListBoxToggleOptionOpts, 'keyboardActivation' | 'needsLongPress'> {
@@ -85,44 +94,51 @@ export class ListBoxTester {
 
   // TODO: this is basically the same as menu except for the error message, refactor later so that they share
   // TODO: this also doesn't support grid layout yet
-  private async keyboardNavigateToOption(opts: {option: HTMLElement}) {
-    let {option} = opts;
+  private async keyboardNavigateToOption(opts: {option: HTMLElement, selectionOnNav?: 'default' | 'none'}) {
+    let {option, selectionOnNav = 'default'} = opts;
+    let altKey = getAltKey();
     let options = this.options();
     let targetIndex = options.indexOf(option);
     if (targetIndex === -1) {
       throw new Error('Option provided is not in the listbox');
     }
 
-    if (document.activeElement !== this._listbox || !this._listbox.contains(document.activeElement)) {
+    if (document.activeElement !== this._listbox && !this._listbox.contains(document.activeElement)) {
       act(() => this._listbox.focus());
-    }
-
-    await this.user.keyboard('[ArrowDown]');
-
-    // TODO: not sure about doing same while loop that exists in other implementations of keyboardNavigateToOption,
-    // feels like it could break easily
-    if (document.activeElement?.getAttribute('role') !== 'option') {
-      await act(async () => {
-        option.focus();
-      });
+      await this.user.keyboard(`${selectionOnNav === 'none' ? `[${altKey}>]` : ''}[ArrowDown]${selectionOnNav === 'none' ? `[/${altKey}]` : ''}`);
     }
 
     let currIndex = options.indexOf(document.activeElement as HTMLElement);
     if (currIndex === -1) {
       throw new Error('ActiveElement is not in the listbox');
     }
-    let direction = targetIndex > currIndex ? 'down' : 'up';
 
+    let direction = targetIndex > currIndex ? 'down' : 'up';
+    if (selectionOnNav === 'none') {
+      await this.user.keyboard(`[${altKey}>]`);
+    }
     for (let i = 0; i < Math.abs(targetIndex - currIndex); i++) {
       await this.user.keyboard(`[${direction === 'down' ? 'ArrowDown' : 'ArrowUp'}]`);
     }
+    if (selectionOnNav === 'none') {
+      await this.user.keyboard(`[/${altKey}]`);
+    }
   };
 
   /**
    * Toggles the selection for the specified listbox option. Defaults to using the interaction type set on the listbox tester.
    */
   async toggleOptionSelection(opts: ListBoxToggleOptionOpts): Promise<void> {
-    let {option, needsLongPress, keyboardActivation = 'Enter', interactionType = this._interactionType} = opts;
+    let {
+      option,
+      needsLongPress,
+      keyboardActivation = 'Enter',
+      interactionType = this._interactionType,
+      selectionBehavior = 'toggle'
+    } = opts;
+
+    let altKey = getAltKey();
+    let metaKey = getMetaKey();
 
     if (typeof option === 'string' || typeof option === 'number') {
       option = this.findOption({optionIndexOrText: option});
@@ -137,8 +153,14 @@ export class ListBoxTester {
         return;
       }
 
-      await this.keyboardNavigateToOption({option});
+      await this.keyboardNavigateToOption({option, selectionOnNav: selectionBehavior === 'replace' ? 'none' : 'default'});
+      if (selectionBehavior === 'replace') {
+        await this.user.keyboard(`[${altKey}>]`);
+      }
       await this.user.keyboard(`[${keyboardActivation}]`);
+      if (selectionBehavior === 'replace') {
+        await this.user.keyboard(`[/${altKey}]`);
+      }
     } else {
       if (needsLongPress && interactionType === 'touch') {
         if (this._advanceTimer == null) {
@@ -147,7 +169,13 @@ export class ListBoxTester {
 
         await triggerLongPress({element: option, advanceTimer: this._advanceTimer, pointerOpts: {pointerType: 'touch'}});
       } else {
+        if (selectionBehavior === 'replace' && interactionType !== 'touch') {
+          await this.user.keyboard(`[${metaKey}>]`);
+        }
         await pressElement(this.user, option, interactionType);
+        if (selectionBehavior === 'replace' && interactionType !== 'touch') {
+          await this.user.keyboard(`[/${metaKey}]`);
+        }
       }
     }
   }
@@ -177,7 +205,7 @@ export class ListBoxTester {
         return;
       }
 
-      await this.keyboardNavigateToOption({option});
+      await this.keyboardNavigateToOption({option, selectionOnNav: 'none'});
       await this.user.keyboard('[Enter]');
     } else {
       await pressElement(this.user, option, interactionType);