From dfe7e782f0f7a7075e62367f1ef8d7730df4d8ce Mon Sep 17 00:00:00 2001 From: Fabian Hiller Date: Mon, 10 Aug 2026 11:27:30 -0400 Subject: [PATCH 1/3] docs: add Formisch to form libraries section of forms guide (#10410) * docs: add Formisch to form libraries section of forms guide * docs: remove Formisch example, keep link --- packages/dev/s2-docs/pages/react-aria/forms.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/dev/s2-docs/pages/react-aria/forms.mdx b/packages/dev/s2-docs/pages/react-aria/forms.mdx index a98a8385ee1..988a21c09f6 100644 --- a/packages/dev/s2-docs/pages/react-aria/forms.mdx +++ b/packages/dev/s2-docs/pages/react-aria/forms.mdx @@ -443,7 +443,7 @@ export async function action({request}: Route.ActionArgs) { ## Form libraries -In most cases, uncontrolled forms with the builtin validation features are sufficient. However, if you are building a truly complex form, or integrating React Aria components into an existing form, a separate form library such as [React Hook Form](https://react-hook-form.com/) or [Formik](https://formik.org/) may be helpful. +In most cases, uncontrolled forms with the builtin validation features are sufficient. However, if you are building a truly complex form, or integrating React Aria components into an existing form, a separate form library such as [React Hook Form](https://react-hook-form.com/), [Formik](https://formik.org/), or [Formisch](https://formisch.dev/) may be helpful. ### React Hook Form From 24c6dbbd5a991d68bdda0064019d3f9059c4bc0d Mon Sep 17 00:00:00 2001 From: Rob Snow Date: Tue, 11 Aug 2026 01:28:54 +1000 Subject: [PATCH 2/3] chore: Update spectrum tokens (#10415) * chore: update spectrum tokens * fix reliance on the tokens string order in the json and instead sort by number --- packages/@react-spectrum/s2/package.json | 2 +- packages/@react-spectrum/s2/style/tokens.ts | 30 ++++++++++++------- .../parcel-transformer-s2-icon/package.json | 2 +- yarn.lock | 12 ++++---- 4 files changed, 28 insertions(+), 18 deletions(-) diff --git a/packages/@react-spectrum/s2/package.json b/packages/@react-spectrum/s2/package.json index 7baa4455d24..9a0d78f5789 100644 --- a/packages/@react-spectrum/s2/package.json +++ b/packages/@react-spectrum/s2/package.json @@ -94,7 +94,7 @@ "react-stately": "3.49.0" }, "devDependencies": { - "@adobe/spectrum-tokens": "14.0.0", + "@adobe/spectrum-tokens": "14.15.0", "@react-aria/test-utils": "^1.0.0-alpha.8", "@storybook/jest": "^0.2.3", "@testing-library/dom": "^10.1.0", diff --git a/packages/@react-spectrum/s2/style/tokens.ts b/packages/@react-spectrum/s2/style/tokens.ts index c1b9e76783c..8f04d400e25 100644 --- a/packages/@react-spectrum/s2/style/tokens.ts +++ b/packages/@react-spectrum/s2/style/tokens.ts @@ -76,15 +76,28 @@ export function weirdColorToken(name: TokenName): ColorRef { type ReplaceColor = S extends `${infer S}-color-${infer N}` ? `${S}-${N}` : S; +// Collects all tokens matching `${scale}-` and returns them sorted by that +// trailing number. Object key order in the tokens JSON is not guaranteed to be numeric +// (e.g. `blue-1000` may have been emitted before `blue-900`), so we can't rely on insertion order. +function sortedScaleTokens(scale: string): string[] { + let re = new RegExp(`^${scale}-(\\d+)$`); + let matches: [string, number][] = []; + for (let token in tokens) { + let m = re.exec(token); + if (m) { + matches.push([token, Number(m[1])]); + } + } + matches.sort((a, b) => a[1] - b[1]); + return matches.map(([token]) => token); +} + export function colorScale( scale: S ): Record>, ReturnType> { 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 TokenName); - } + for (let token of sortedScaleTokens(scale)) { + res[token.replace('-color', '')] = colorToken(token as TokenName); } return res; } @@ -93,11 +106,8 @@ export function simpleColorScale( scale: S ): Record, string> { let res: any = {}; - let re = new RegExp(`^${scale}-\\d+$`); - for (let token in tokens) { - if (re.test(token)) { - res[token] = (tokens as any)[token].value; - } + for (let token of sortedScaleTokens(scale)) { + res[token] = (tokens as any)[token].value; } return res; } diff --git a/packages/dev/parcel-transformer-s2-icon/package.json b/packages/dev/parcel-transformer-s2-icon/package.json index 020764e4fa9..42f794f9e4a 100644 --- a/packages/dev/parcel-transformer-s2-icon/package.json +++ b/packages/dev/parcel-transformer-s2-icon/package.json @@ -11,7 +11,7 @@ "access": "public" }, "dependencies": { - "@adobe/spectrum-tokens": "14.0.0", + "@adobe/spectrum-tokens": "14.15.0", "@parcel/plugin": "^2.0.0", "@svgr/core": "^8.1.0", "@svgr/plugin-jsx": "^8.1.0", diff --git a/yarn.lock b/yarn.lock index 1b904da1b46..132bdb1a49e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -129,10 +129,10 @@ __metadata: languageName: unknown linkType: soft -"@adobe/spectrum-tokens@npm:14.0.0": - version: 14.0.0 - resolution: "@adobe/spectrum-tokens@npm:14.0.0" - checksum: 10c0/b94015d75786babf53144225fccfe3d989eb66e2ab5686e5e2feba73c49f83533e2ea0a7c4e9b0d47e5622d89bcad1b32cf39b61c2a6e3ae4690a20b79672b4c +"@adobe/spectrum-tokens@npm:14.15.0": + version: 14.15.0 + resolution: "@adobe/spectrum-tokens@npm:14.15.0" + checksum: 10c0/dc95e825a8d289208270d4132bb003e5cfabecb71d89912fffc15391ae6e4cf0c96d7fe1243a9dad48febf190f491b3c05def27da99f1465fa897472dc0ad10f languageName: node linkType: hard @@ -7964,7 +7964,7 @@ __metadata: version: 0.0.0-use.local resolution: "@react-spectrum/parcel-transformer-s2-icon@workspace:packages/dev/parcel-transformer-s2-icon" dependencies: - "@adobe/spectrum-tokens": "npm:14.0.0" + "@adobe/spectrum-tokens": "npm:14.15.0" "@parcel/plugin": "npm:^2.0.0" "@svgr/core": "npm:^8.1.0" "@svgr/plugin-jsx": "npm:^8.1.0" @@ -8111,7 +8111,7 @@ __metadata: version: 0.0.0-use.local resolution: "@react-spectrum/s2@workspace:packages/@react-spectrum/s2" dependencies: - "@adobe/spectrum-tokens": "npm:14.0.0" + "@adobe/spectrum-tokens": "npm:14.15.0" "@internationalized/date": "npm:^3.12.3" "@internationalized/number": "npm:^3.6.7" "@parcel/macros": "npm:^2.16.3" From 7c0765468a1d161ab9ac88ca9f1b54d3603a275c Mon Sep 17 00:00:00 2001 From: Alexander Kolesnik Date: Mon, 10 Aug 2026 19:39:19 +0300 Subject: [PATCH 3/3] fix: re-export FocusableElement, HoverEvent and KeyboardEvent types from react-aria-components (#10366) * fix: re-export FocusableElement, HoverEvent and KeyboardEvent types from react-aria-components * remove unnecessary test * Apply suggestion from @snowystinger --------- Co-authored-by: Rob Snow Co-authored-by: Rob Snow --- packages/react-aria-components/exports/index.ts | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/react-aria-components/exports/index.ts b/packages/react-aria-components/exports/index.ts index e72133c7b1d..b9c568ddb9f 100644 --- a/packages/react-aria-components/exports/index.ts +++ b/packages/react-aria-components/exports/index.ts @@ -580,7 +580,10 @@ export type { ItemDropTarget, RootDropTarget, TextDropItem, - PressEvent + PressEvent, + FocusableElement, + HoverEvent, + KeyboardEvent } from '@react-types/shared'; export type {CalendarState} from 'react-stately/useCalendarState'; export type {RangeCalendarState} from 'react-stately/useRangeCalendarState';