[pull] main from adobe:main

.parcelrc-build

@@ -10,7 +10,7 @@
     "packages/@react-spectrum/s2/{s2wf-icons,spectrum-illustrations}/**/*.svg": ["@react-spectrum/parcel-transformer-s2-icon"],
     // Disable PostCSS from running over style macro output
     "packages/@react-spectrum/s2/**/*.css": ["@parcel/transformer-css"],
-    "*.css": ["...", "parcel-transformer-css-env"],
+    "*.css": ["parcel-transformer-css-env", "..."],
     "*.svg": ["@parcel/transformer-svg-react"],
     "*.{js,mjs,jsm,jsx,es6,cjs,ts,tsx}": [
       "@parcel/transformer-js",

package.json

@@ -241,7 +241,7 @@
     "micromark-extension-mdxjs": "patch:micromark-extension-mdxjs@npm%3A1.0.0#~/.yarn/patches/micromark-extension-mdxjs-npm-1.0.0-d2b6b69e4a.patch",
     "remark-mdx": "patch:remark-mdx@npm%3A2.0.0-rc.2#~/.yarn/patches/remark-mdx-npm-2.0.0-rc.2-7a71234e1f.patch",
     "remark-parse": "patch:remark-parse@npm%3A10.0.1#~/.yarn/patches/remark-parse-npm-10.0.1-e654d7df78.patch",
-    "lightningcss": "1.30.1",
+    "lightningcss": "1.32.0",
     "react-server-dom-parcel": "canary",
     "react-test-renderer": "19.1.0",
     "@parcel/packager-react-static": "^2.16.3",

packages/@adobe/react-spectrum/exports/Toast.ts

@@ -14,4 +14,4 @@
 
 export {ToastContainer, ToastQueue} from '../src/toast/ToastContainer';
 
-export type {SpectrumToastOptions, SpectrumToastContainerProps} from '../src/toast/ToastContainer';
+export type {SpectrumToastOptions, SpectrumToastContainerProps, CloseFunction} from '../src/toast/ToastContainer';

packages/@adobe/react-spectrum/src/toast/ToastContainer.tsx

@@ -37,7 +37,7 @@ export interface SpectrumToastOptions extends ToastOptions, DOMProps {
   shouldCloseOnAction?: boolean
 }
 
-type CloseFunction = () => void;
+export type CloseFunction = () => void;
 
 function wrapInViewTransition(fn: () => void): void {
   if ('startViewTransition' in document) {

packages/@adobe/react-spectrum/test/table/TreeGridTable.test.tsx

@@ -692,42 +692,78 @@ describe('TableView with expandable rows', function () {
         expect(document.activeElement).toBe(getCell(treegrid, 'Row 1, Lvl 2, Foo'));
       });
 
-      it('should properly wrap focus with ArrowRight (RTL)', function () {
+      it('should move focus to parent if already collapsed (RTL)', function () {
         let treegrid = render(<ManyRowsExpandableTable />, undefined, 'ar-AE');
-        let row = treegrid.getAllByRole('row')[2];
+        let row1 = treegrid.getAllByRole('row')[1];
+        let row2 = treegrid.getAllByRole('row')[2];
         focusCell(treegrid, 'Row 1, Lvl 2, Foo');
         moveFocus('ArrowRight');
+        expect(document.activeElement).toBe(row2);
+        expect(row2).toContainElement(getCell(treegrid, 'Row 1, Lvl 2, Foo'));
+        // Focus doesn't move because Arrow Right on the row will collapse it here
+        moveFocus('ArrowRight');
+        expect(document.activeElement).toBe(row2);
+        moveFocus('ArrowRight');
+        expect(document.activeElement).toBe(row1);
+        moveFocus('ArrowRight');
+        expect(document.activeElement).toBe(row1);
+        moveFocus('ArrowRight');
+      });
+
+      it('should properly wrap focus with ArrowRight when top level row is collapsed (RTL)', function () {
+        let treegrid = render(<ManyRowsExpandableTable />, undefined, 'ar-AE');
+        let row = treegrid.getAllByRole('row')[4];
+        focusCell(treegrid, 'Row 2, Lvl 1, Foo');
+        moveFocus('ArrowRight');
         expect(document.activeElement).toBe(row);
-        expect(row).toContainElement(getCell(treegrid, 'Row 1, Lvl 2, Foo'));
-        // Focus doesn't move because Arrow Right on the row will collapse it
+        expect(row).toContainElement(getCell(treegrid, 'Row 2, Lvl 1, Foo'));
+        // Focus doesn't move because Arrow Right on the row will collapse it here
         moveFocus('ArrowRight');
         expect(document.activeElement).toBe(row);
         moveFocus('ArrowRight');
-        expect(document.activeElement).toBe(getCell(treegrid, 'Row 1, Lvl 2, Baz'));
+        expect(document.activeElement).toBe(getCell(treegrid, 'Row 2, Lvl 1, Baz'));
         moveFocus('ArrowRight');
-        expect(document.activeElement).toBe(getCell(treegrid, 'Row 1, Lvl 2, Bar'));
+        expect(document.activeElement).toBe(getCell(treegrid, 'Row 2, Lvl 1, Bar'));
         moveFocus('ArrowRight');
-        expect(document.activeElement).toBe(getCell(treegrid, 'Row 1, Lvl 2, Foo'));
+        expect(document.activeElement).toBe(getCell(treegrid, 'Row 2, Lvl 1, Foo'));
       });
     });
 
     describe('ArrowLeft', function () {
-      it('should properly wrap focus with ArrowLeft', function () {
+      it('should move focus to parent if already collapsed', function () {
         let treegrid = render(<ManyRowsExpandableTable />);
-        let row = treegrid.getAllByRole('row')[2];
+        let row1 = treegrid.getAllByRole('row')[1];
+        let row2 = treegrid.getAllByRole('row')[2];
         focusCell(treegrid, 'Row 1, Lvl 2, Foo');
         moveFocus('ArrowLeft');
+        expect(document.activeElement).toBe(row2);
+        expect(row2).toContainElement(getCell(treegrid, 'Row 1, Lvl 2, Foo'));
+        // Focus doesn't move because Arrow Left on the row will collapse it here
+        moveFocus('ArrowLeft');
+        expect(document.activeElement).toBe(row2);
+        moveFocus('ArrowLeft');
+        expect(document.activeElement).toBe(row1);
+        moveFocus('ArrowLeft');
+        expect(document.activeElement).toBe(row1);
+        moveFocus('ArrowLeft');
+      });
+
+      it('should properly wrap focus with ArrowLeft when top level row is collapsed', function () {
+        let treegrid = render(<ManyRowsExpandableTable />);
+        let row = treegrid.getAllByRole('row')[4];
+        focusCell(treegrid, 'Row 2, Lvl 1, Foo');
+        moveFocus('ArrowLeft');
         expect(document.activeElement).toBe(row);
-        expect(row).toContainElement(getCell(treegrid, 'Row 1, Lvl 2, Foo'));
+        expect(row).toContainElement(getCell(treegrid, 'Row 2, Lvl 1, Foo'));
         // Focus doesn't move because Arrow Left on the row will collapse it here
         moveFocus('ArrowLeft');
         expect(document.activeElement).toBe(row);
         moveFocus('ArrowLeft');
-        expect(document.activeElement).toBe(getCell(treegrid, 'Row 1, Lvl 2, Baz'));
+        expect(document.activeElement).toBe(getCell(treegrid, 'Row 2, Lvl 1, Baz'));
         moveFocus('ArrowLeft');
-        expect(document.activeElement).toBe(getCell(treegrid, 'Row 1, Lvl 2, Bar'));
+        expect(document.activeElement).toBe(getCell(treegrid, 'Row 2, Lvl 1, Bar'));
         moveFocus('ArrowLeft');
-        expect(document.activeElement).toBe(getCell(treegrid, 'Row 1, Lvl 2, Foo'));
+        expect(document.activeElement).toBe(getCell(treegrid, 'Row 2, Lvl 1, Foo'));
       });
 
       it('should properly wrap focus with ArrowLeft (RTL)', function () {

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

@@ -25,6 +25,8 @@ governing permissions and limitations under the License.
 }
 
 .spectrum-BaseButton {
+  composes: i18nFontFamily;
+
   /* Contain halo */
   position: relative;
 
@@ -69,8 +71,6 @@ governing permissions and limitations under the License.
 
   text-decoration: none;
 
-  composes: i18nFontFamily;
-
   line-height: var(--spectrum-button-line-height);
 
   user-select: none;

packages/@internationalized/date/src/CalendarDate.ts

@@ -17,6 +17,8 @@ import {dateTimeToString, dateToString, timeToString, zonedDateTimeToString} fro
 import {GregorianCalendar} from './calendars/GregorianCalendar';
 import {toCalendarDateTime, toDate, toZoned, zonedToDate} from './conversion';
 
+export type DateValue = CalendarDate | CalendarDateTime | ZonedDateTime;
+
 function shiftArgs(args: any[]) {
   let calendar: Calendar = typeof args[0] === 'object'
     ? args.shift()

packages/@internationalized/date/src/index.ts

@@ -27,6 +27,7 @@ export type {
   CycleOptions,
   CycleTimeOptions
 } from './types';
+export type {DateValue} from './CalendarDate';
 
 export {CalendarDate, CalendarDateTime, Time, ZonedDateTime} from './CalendarDate';
 export {GregorianCalendar} from './calendars/GregorianCalendar';

packages/@internationalized/date/src/queries.ts

@@ -11,12 +11,10 @@
  */
 
 import {AnyCalendarDate, AnyTime, Calendar} from './types';
-import {CalendarDate, CalendarDateTime, ZonedDateTime} from './CalendarDate';
+import {CalendarDate, CalendarDateTime, DateValue, ZonedDateTime} from './CalendarDate';
 import {fromAbsolute, toAbsolute, toCalendar, toCalendarDate} from './conversion';
 import {weekStartData} from './weekStartData';
 
-type DateValue = CalendarDate | CalendarDateTime | ZonedDateTime;
-
 /** Returns whether the given dates occur on the same day, regardless of the time or calendar system. */
 export function isSameDay(a: DateValue, b: DateValue): boolean {
   b = toCalendar(b, a.calendar);

packages/@react-spectrum/s2/src/page.macro.ts

@@ -26,7 +26,8 @@ export function generatePageStyles(this: MacroContext | void): void {
     this.addAsset({
       type: 'css',
       content: `:where(:root, :host) {
-        color-scheme: light dark;
+        --s2-color-scheme: light dark;
+        color-scheme: var(--s2-color-scheme);
         --s2-container-bg: ${colorToken(tokens['background-base-color'])};
         background: var(--s2-container-bg);
         --s2-scale: 1;
@@ -38,11 +39,11 @@ export function generatePageStyles(this: MacroContext | void): void {
         }
 
         &[data-color-scheme=light] {
-          color-scheme: light;
+          --s2-color-scheme: light;
         }
 
         &[data-color-scheme=dark] {
-          color-scheme: dark;
+          --s2-color-scheme: dark;
         }
 
         &[data-background=layer-1] {
@@ -57,8 +58,8 @@ export function generatePageStyles(this: MacroContext | void): void {
   }
 }
 
-// This generates a low specificity rule to define default values for
-// --lightningcss-light and --lightningcss-dark. This is used when rendering
+// This generates a low specificity rule to define a default value for
+// --s2-color-scheme. This is used when rendering
 // a <Provider> without setting a colorScheme prop, and when page.css is not present.
 // It is equivalent to setting `color-scheme: light dark`, but without overriding
 // the browser default for content outside the provider.
@@ -69,16 +70,10 @@ export function generateDefaultColorSchemeStyles(this: MacroContext | void): voi
       type: 'css',
       content: `@layer _.a {
         :where(:root, :host) {
-          --lightningcss-light: initial;
-          --lightningcss-dark: ;
+          --s2-color-scheme: light dark;
           --s2-scale: 1;
           --s2-font-size-base: 14;
 
-          @media (prefers-color-scheme: dark) {
-            --lightningcss-light: ;
-            --lightningcss-dark: initial;
-          }
-
           @media not ((hover: hover) and (pointer: fine)) {
             --s2-scale: 1.25;
             --s2-font-size-base: 17;

packages/@react-spectrum/s2/src/style-utils.ts

@@ -152,15 +152,17 @@ export const fieldInput = () => ({
  * ```
  */
 export const setColorScheme = () => ({
-  colorScheme: {
-    // Default to page color scheme if none is defined.
-    default: '[var(--lightningcss-light, light) var(--lightningcss-dark, dark)]',
-    colorScheme: {
-      'light dark': 'light dark',
-      light: 'light',
-      dark: 'dark'
+  '--s2-color-scheme': {
+    type: 'colorScheme',
+    value: {
+      colorScheme: {
+        'light dark': 'light dark',
+        light: 'light',
+        dark: 'dark'
+      }
     }
-  }
+  },
+  colorScheme: '--s2-color-scheme'
 } as const);
 
 export function staticColor(): Record<string, any> {

packages/@react-spectrum/s2/style/index.ts

@@ -86,7 +86,7 @@ export const focusRing = () => ({
   outlineOffset: 2
 } as const);
 
-interface IconStyle {
+export interface IconStyle {
   size?: 'XS' | 'S' | 'M' | 'L' |'XL',
   color?: 'white' | 'black' | 'accent' | 'neutral' | 'negative' | 'informative' | 'positive' | 'notice' | 'gray' | 'red' | 'orange' | 'yellow' | 'chartreuse' | 'celery' | 'green' | 'seafoam' | 'cyan' | 'blue' | 'indigo' | 'purple' | 'fuchsia' | 'magenta' | 'pink' | 'turquoise' | 'cinnamon' | 'brown' | 'silver',
   margin?: Spacing,

packages/@react-spectrum/s2/style/tokens.ts

@@ -13,9 +13,17 @@
 // package.json in this directory is not the real package.json. Lint rule not smart enough.
 import assert from 'assert';
 // eslint-disable-next-line rulesdir/imports
-import * as tokens from '@adobe/spectrum-tokens/dist/json/variables.json';
+import * as originalTokens from '@adobe/spectrum-tokens/dist/json/variables.json';
 
-export function getToken(name: keyof typeof tokens): string {
+// This forces TSC to inline the token keys instead of leaving a dependency on it.
+function keys<T extends Record<string, any>>(v: T): Record<keyof T, any> {
+  return v;
+}
+
+const tokens = keys(originalTokens);
+type TokenName = keyof typeof tokens;
+
+export function getToken(name: TokenName): string {
   return (tokens[name] as any).value;
 }
 
@@ -26,7 +34,7 @@ export interface ColorToken {
   forcedColors?: string
 }
 
-export function colorToken(name: keyof typeof tokens): ColorToken | ColorRef {
+export function colorToken(name: TokenName): ColorToken | ColorRef {
   let token = tokens[name] as typeof tokens['gray-25'] | typeof tokens['neutral-content-color-default'];
   if ('ref' in token) {
     return {
@@ -43,7 +51,7 @@ export function colorToken(name: keyof typeof tokens): ColorToken | ColorRef {
   };
 }
 
-export function rawColorToken(name: keyof typeof tokens): string {
+export function rawColorToken(name: TokenName): string {
   let token = tokens[name] as typeof tokens['gray-25'];
   return `light-dark(${token.sets.light.value}, ${token.sets.dark.value})`;
 }
@@ -55,7 +63,7 @@ export interface ColorRef {
   forcedColors?: string
 }
 
-export function weirdColorToken(name: keyof typeof tokens): ColorRef {
+export function weirdColorToken(name: TokenName): ColorRef {
   let token = tokens[name] as typeof tokens['accent-background-color-default'];
   return {
     type: 'ref',
@@ -66,18 +74,18 @@ export function weirdColorToken(name: keyof typeof tokens): ColorRef {
 
 type ReplaceColor<S extends string> = S extends `${infer S}-color-${infer N}` ? `${S}-${N}` : S;
 
-export function colorScale<S extends string>(scale: S): Record<ReplaceColor<Extract<keyof typeof tokens, `${S}-${number}`>>, ReturnType<typeof colorToken>> {
+export function colorScale<S extends string>(scale: S): Record<ReplaceColor<Extract<TokenName, `${S}-${number}`>>, ReturnType<typeof colorToken>> {
   let res: any = {};
   let re = new RegExp(`^${scale}-\\d+$`);
   for (let token in tokens) {
     if (re.test(token)) {
-      res[token.replace('-color', '')] = colorToken(token as keyof typeof tokens);
+      res[token.replace('-color', '')] = colorToken(token as TokenName);
     }
   }
   return res;
 }
 
-export function simpleColorScale<S extends string>(scale: S): Record<Extract<keyof typeof tokens, `${S}-${number}`>, string> {
+export function simpleColorScale<S extends string>(scale: S): Record<Extract<TokenName, `${S}-${number}`>, string> {
   let res: any = {};
   let re = new RegExp(`^${scale}-\\d+$`);
   for (let token in tokens) {
@@ -156,10 +164,10 @@ const indexes = {
 };
 
 /** Returns the index of a font token relative to font-size-100 (which is index 0). */
-export function fontSizeToken(name: keyof typeof tokens): number {
+export function fontSizeToken(name: TokenName): number {
   let token = tokens[name] as typeof tokens['font-size-100'] | typeof tokens['heading-size-m'];
   if ('ref' in token) {
-    name = token.ref.slice(1, -1) as keyof typeof tokens;
+    name = token.ref.slice(1, -1) as TokenName;
   }
 
   let index = indexes[name];

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

@@ -14,4 +14,4 @@
 
 export {ToastContainer, ToastQueue} from '@adobe/react-spectrum/Toast';
 
-export type {SpectrumToastOptions, SpectrumToastContainerProps} from '@adobe/react-spectrum/Toast';
+export type {SpectrumToastOptions, SpectrumToastContainerProps, CloseFunction} from '@adobe/react-spectrum/Toast';

packages/@react-stately/data/src/index.ts

@@ -15,5 +15,5 @@ export {useAsyncList} from 'react-stately/useAsyncList';
 export {useTreeData} from 'react-stately/useTreeData';
 export {useListData} from 'react-stately/useListData';
 export type {ListOptions, ListData} from 'react-stately/useListData';
-export type {AsyncListOptions, AsyncListData} from 'react-stately/useAsyncList';
+export type {AsyncListOptions, AsyncListData, AsyncListLoadFunction, AsyncListLoadOptions, AsyncListStateUpdate} from 'react-stately/useAsyncList';
 export type {TreeOptions, TreeData} from 'react-stately/useTreeData';

packages/dev/codemods/src/index.ts

@@ -2,6 +2,7 @@
 const {parseArgs} = require('node:util');
 import {s1_to_s2} from './s1-to-s2/src';
 import {use_monopackages} from './use-monopackages/src';
+import {use_subpaths} from './use-subpaths/src';
 
 interface JSCodeshiftOptions {
   /**
@@ -52,9 +53,12 @@ export interface UseMonopackagesCodemodOptions extends JSCodeshiftOptions {
   packages?: string
 }
 
-const codemods: Record<string, (options: S1ToS2CodemodOptions | UseMonopackagesCodemodOptions) => void> = {
+export interface UseSubpathsCodemodOptions extends JSCodeshiftOptions {}
+
+const codemods: Record<string, (options: S1ToS2CodemodOptions | UseMonopackagesCodemodOptions | UseSubpathsCodemodOptions) => void> = {
   's1-to-s2': s1_to_s2,
-  'use-monopackages': use_monopackages
+  'use-monopackages': use_monopackages,
+  'use-subpaths': use_subpaths
 };
 
 // https://github.com/facebook/jscodeshift?tab=readme-ov-file#usage-cli
@@ -103,6 +107,7 @@ async function main() {
     parser: 'tsx',
     ignorePattern: '**/node_modules/**',
     path: '.',
+    extensions: 'js,jsx,mjs,cjs,ts,tsx',
     ...values
   }));
 }