From 9fc687a33007056cb186cc1864b6372a3639d5e7 Mon Sep 17 00:00:00 2001 From: Daniel Lu Date: Wed, 1 Oct 2025 10:12:38 -0700 Subject: [PATCH 01/10] chore: Update docs for new --page-height var and small audit fixes --- packages/dev/mcp/package.json | 1 - packages/react-aria-components/docs/Autocomplete.mdx | 2 +- packages/react-aria-components/docs/Modal.mdx | 12 ++++++++++-- 3 files changed, 11 insertions(+), 4 deletions(-) diff --git a/packages/dev/mcp/package.json b/packages/dev/mcp/package.json index 7b9f4df6829..88a78d1f6e9 100644 --- a/packages/dev/mcp/package.json +++ b/packages/dev/mcp/package.json @@ -16,7 +16,6 @@ "zod": "^3.23.8" }, "devDependencies": { - "@adobe/spectrum-css-temp": "3.0.0-alpha.1", "typescript": "^5.8.2" }, "engines": { diff --git a/packages/react-aria-components/docs/Autocomplete.mdx b/packages/react-aria-components/docs/Autocomplete.mdx index f52f6fe5dca..2f348f9c0d8 100644 --- a/packages/react-aria-components/docs/Autocomplete.mdx +++ b/packages/react-aria-components/docs/Autocomplete.mdx @@ -30,7 +30,7 @@ import {StarterKits} from '@react-spectrum/docs/src/StarterKits'; category: Pickers keywords: [autocomplete, search, menu, command palette, aria] type: component -preRelease: beta +preRelease: rc --- # Autocomplete diff --git a/packages/react-aria-components/docs/Modal.mdx b/packages/react-aria-components/docs/Modal.mdx index eabc05c0d27..8a9ab30b4a3 100644 --- a/packages/react-aria-components/docs/Modal.mdx +++ b/packages/react-aria-components/docs/Modal.mdx @@ -422,12 +422,20 @@ A `Modal` can be targeted with the `.react-aria-Modal` CSS selector, or by overr By default, `Modal` includes a builtin `ModalOverlay`, which renders a backdrop over the page when a modal is open. This can be targeted using the `.react-aria-ModalOverlay` CSS selector. To customize the `ModalOverlay` with a different class name or other attributes, render a `ModalOverlay` and place a `Modal` inside. -The `--visual-viewport-height` CSS custom property will be set on the `ModalOverlay`, which you can use to set the height to account for the virtual keyboard on mobile. +The `--visual-viewport-height` and `--page-height` CSS custom property will be set on the `ModalOverlay`, which you can use to set the height to account for the virtual keyboard on mobile. ```css render=false .react-aria-ModalOverlay { + position: absolute; + height: var(--page-height); +} + +.react-aria-Modal { position: fixed; - height: var(--visual-viewport-height); + max-height: var(--visual-viewport-height); + top: calc(var(--visual-viewport-height) / 2); + left: 50%; + translate: -50% -50%; } ``` From e41dcea987ef56c70d57c96b3b706e88adf6bac4 Mon Sep 17 00:00:00 2001 From: Daniel Lu Date: Wed, 1 Oct 2025 11:13:25 -0700 Subject: [PATCH 02/10] add row action example for RAC combobox docs --- .../react-aria-components/docs/ComboBox.mdx | 35 ++++++++++++++++++- 1 file changed, 34 insertions(+), 1 deletion(-) diff --git a/packages/react-aria-components/docs/ComboBox.mdx b/packages/react-aria-components/docs/ComboBox.mdx index ea7e5573332..ba13d400183 100644 --- a/packages/react-aria-components/docs/ComboBox.mdx +++ b/packages/react-aria-components/docs/ComboBox.mdx @@ -589,9 +589,42 @@ function Example() { } ``` +## Row actions + +By default, interacting with an item in a ComboBox selects it and updates the input value. Alternatively, items can also trigger a custom action instead via providing a `onAction` prop to the ListBoxItem. +As shown in the example below, a "Create" action is added for the current input value. Note that interacting with said item does not update selection or the input value. + +```tsx example +function Example() { + let [inputValue, setInputValue] = React.useState(''); + + return ( + + {/*- begin highlight -*/} + {inputValue.length > 0 && ( + alert('Creating ' + inputValue)}> + {`Create "${inputValue}"`} + + )} + {/*- end highlight -*/} + Aardvark + Cat + Dog + Kangaroo + Panda + Snake + + ); +} +``` + ## Links -By default, interacting with an item in a ComboBox selects it and updates the input value. Alternatively, items may be links to another page or website. This can be achieved by passing the `href` prop to the `` component. Interacting with link items navigates to the provided URL and does not update the selection or input value. +Items may be links to another page or website. This can be achieved by passing the `href` prop to the `` component. Interacting with link items navigates to the provided URL and does not update the selection or input value. ```tsx example From d25dac8ca7ed373524dadb405b68c8dc0dc08af3 Mon Sep 17 00:00:00 2001 From: Daniel Lu Date: Wed, 1 Oct 2025 11:21:17 -0700 Subject: [PATCH 03/10] clarify wording --- packages/react-aria-components/docs/Modal.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-aria-components/docs/Modal.mdx b/packages/react-aria-components/docs/Modal.mdx index 8a9ab30b4a3..63c65bc8ff5 100644 --- a/packages/react-aria-components/docs/Modal.mdx +++ b/packages/react-aria-components/docs/Modal.mdx @@ -422,7 +422,7 @@ A `Modal` can be targeted with the `.react-aria-Modal` CSS selector, or by overr By default, `Modal` includes a builtin `ModalOverlay`, which renders a backdrop over the page when a modal is open. This can be targeted using the `.react-aria-ModalOverlay` CSS selector. To customize the `ModalOverlay` with a different class name or other attributes, render a `ModalOverlay` and place a `Modal` inside. -The `--visual-viewport-height` and `--page-height` CSS custom property will be set on the `ModalOverlay`, which you can use to set the height to account for the virtual keyboard on mobile. +The `--page-height` and `--visual-viewport-height` CSS custom property will be set on the `ModalOverlay`, the latter of which you can use to set the height of the Modal to account for the virtual keyboard on mobile. ```css render=false .react-aria-ModalOverlay { From f44463e0725dab87902c4002d110629ff9361403 Mon Sep 17 00:00:00 2001 From: Daniel Lu Date: Wed, 1 Oct 2025 11:26:44 -0700 Subject: [PATCH 04/10] clarify wording --- packages/react-aria-components/docs/Modal.mdx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/react-aria-components/docs/Modal.mdx b/packages/react-aria-components/docs/Modal.mdx index 63c65bc8ff5..ef3f090acca 100644 --- a/packages/react-aria-components/docs/Modal.mdx +++ b/packages/react-aria-components/docs/Modal.mdx @@ -431,6 +431,7 @@ The `--page-height` and `--visual-viewport-height` CSS custom property will be s } .react-aria-Modal { + /* Center modal without adding a extra wrapping div. */ position: fixed; max-height: var(--visual-viewport-height); top: calc(var(--visual-viewport-height) / 2); From d87f169b52803c86a941125b4a3a7091c9bcd455 Mon Sep 17 00:00:00 2001 From: Daniel Lu Date: Wed, 1 Oct 2025 11:31:00 -0700 Subject: [PATCH 05/10] ugh yarn lock --- yarn.lock | 1 - 1 file changed, 1 deletion(-) diff --git a/yarn.lock b/yarn.lock index 04e951a25b3..641355725e9 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7211,7 +7211,6 @@ __metadata: version: 0.0.0-use.local resolution: "@react-spectrum/mcp@workspace:packages/dev/mcp" dependencies: - "@adobe/spectrum-css-temp": "npm:3.0.0-alpha.1" "@modelcontextprotocol/sdk": "npm:^1.17.3" "@swc/helpers": "npm:^0.5.0" fast-glob: "npm:^3.3.3" From 14432a6e95ce236de40f45815be3bac3ac5ad822 Mon Sep 17 00:00:00 2001 From: Daniel Lu Date: Wed, 1 Oct 2025 11:41:12 -0700 Subject: [PATCH 06/10] fix lint rule --- yarn.config.cjs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/yarn.config.cjs b/yarn.config.cjs index 2ae1ddeedab..87fc6cd0c17 100644 --- a/yarn.config.cjs +++ b/yarn.config.cjs @@ -55,7 +55,7 @@ function enforceConsistentDependenciesAcrossTheProject({Yarn}) { workspace.set('dependencies.@swc/helpers', '^0.5.0'); workspace.set('dependencies.@adobe/spectrum-css-temp'); - if (workspace.ident.startsWith('@react-spectrum') && !workspace.ident.endsWith('/utils')) { + if (workspace.ident.startsWith('@react-spectrum') && !workspace.ident.endsWith('/utils') && !workspace.ident.endsWith('/mcp')) { workspace.set('devDependencies.@adobe/spectrum-css-temp', '3.0.0-alpha.1'); } // these should not be in dependencies, but should be in dev or peer From 12808207bba5d83d304a597a6f14e28d7bb103aa Mon Sep 17 00:00:00 2001 From: Daniel Lu Date: Wed, 1 Oct 2025 11:46:56 -0700 Subject: [PATCH 07/10] fix docs type check --- packages/react-aria-components/docs/ComboBox.mdx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/react-aria-components/docs/ComboBox.mdx b/packages/react-aria-components/docs/ComboBox.mdx index ba13d400183..3c7fa844dd1 100644 --- a/packages/react-aria-components/docs/ComboBox.mdx +++ b/packages/react-aria-components/docs/ComboBox.mdx @@ -601,7 +601,6 @@ function Example() { return ( {/*- begin highlight -*/} From 14c976f7237bc723c63049907f944e7b019381eb Mon Sep 17 00:00:00 2001 From: Daniel Lu Date: Wed, 1 Oct 2025 12:51:59 -0700 Subject: [PATCH 08/10] update copy --- packages/react-aria-components/docs/ComboBox.mdx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/packages/react-aria-components/docs/ComboBox.mdx b/packages/react-aria-components/docs/ComboBox.mdx index 3c7fa844dd1..d0175721743 100644 --- a/packages/react-aria-components/docs/ComboBox.mdx +++ b/packages/react-aria-components/docs/ComboBox.mdx @@ -589,10 +589,9 @@ function Example() { } ``` -## Row actions +## Item actions -By default, interacting with an item in a ComboBox selects it and updates the input value. Alternatively, items can also trigger a custom action instead via providing a `onAction` prop to the ListBoxItem. -As shown in the example below, a "Create" action is added for the current input value. Note that interacting with said item does not update selection or the input value. +Use the `onAction` prop on a `` to perform a custom action when the item is selected. This example adds a "Create" action for the current input value. ```tsx example function Example() { From a261f76cf8da2cce9e72dee0945e24f50744732c Mon Sep 17 00:00:00 2001 From: Daniel Lu Date: Wed, 1 Oct 2025 15:16:26 -0700 Subject: [PATCH 09/10] copy update and removing unstable from collection exports --- packages/dev/s2-docs/pages/s2/ComboBox.mdx | 2 +- packages/react-aria-components/docs/ComboBox.mdx | 2 +- packages/react-aria-components/src/index.ts | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/dev/s2-docs/pages/s2/ComboBox.mdx b/packages/dev/s2-docs/pages/s2/ComboBox.mdx index 51213a1fc1e..ee261c88a6c 100644 --- a/packages/dev/s2-docs/pages/s2/ComboBox.mdx +++ b/packages/dev/s2-docs/pages/s2/ComboBox.mdx @@ -189,7 +189,7 @@ function Example() { ### Actions -Use the `onAction` prop on a `` to perform a custom action when the item is selected. This example adds a "Create" action for the current input value. +Use the `onAction` prop on a `` to perform a custom action when the item is pressed. This example adds a "Create" action for the current input value. ```tsx render "use client"; diff --git a/packages/react-aria-components/docs/ComboBox.mdx b/packages/react-aria-components/docs/ComboBox.mdx index d0175721743..4998aad7793 100644 --- a/packages/react-aria-components/docs/ComboBox.mdx +++ b/packages/react-aria-components/docs/ComboBox.mdx @@ -591,7 +591,7 @@ function Example() { ## Item actions -Use the `onAction` prop on a `` to perform a custom action when the item is selected. This example adds a "Create" action for the current input value. +Use the `onAction` prop on a `` to perform a custom action when the item is pressed. This example adds a "Create" action for the current input value. ```tsx example function Example() { diff --git a/packages/react-aria-components/src/index.ts b/packages/react-aria-components/src/index.ts index dc9bdfb3909..dd3d1db5a38 100644 --- a/packages/react-aria-components/src/index.ts +++ b/packages/react-aria-components/src/index.ts @@ -45,7 +45,7 @@ export {Header, HeaderContext} from './Header'; export {Heading} from './Heading'; export {Input, InputContext} from './Input'; export {Section, CollectionRendererContext, DefaultCollectionRenderer} from './Collection'; -export {Collection, createLeafComponent as UNSTABLE_createLeafComponent, createBranchComponent as UNSTABLE_createBranchComponent, CollectionBuilder as UNSTABLE_CollectionBuilder} from '@react-aria/collections'; +export {Collection, createLeafComponent, createBranchComponent, CollectionBuilder} from '@react-aria/collections'; export {Keyboard, KeyboardContext} from './Keyboard'; export {Label, LabelContext} from './Label'; export {Link, LinkContext} from './Link'; From caf95894063d51c7350fd4ebe7448c5b2d03917c Mon Sep 17 00:00:00 2001 From: Daniel Lu Date: Wed, 1 Oct 2025 16:06:56 -0700 Subject: [PATCH 10/10] prevent breaking change, update copy for one last example --- packages/dev/s2-docs/pages/react-aria/ComboBox.mdx | 2 +- packages/react-aria-components/src/index.ts | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/dev/s2-docs/pages/react-aria/ComboBox.mdx b/packages/dev/s2-docs/pages/react-aria/ComboBox.mdx index 32615e63185..7777582c57c 100644 --- a/packages/dev/s2-docs/pages/react-aria/ComboBox.mdx +++ b/packages/dev/s2-docs/pages/react-aria/ComboBox.mdx @@ -234,7 +234,7 @@ function ControlledComboBox() { ## Item actions -Use the `onAction` prop on a `` to perform a custom action when the item is selected. This example adds a "Create" action for the current input value. +Use the `onAction` prop on a `` to perform a custom action when the item is pressed. This example adds a "Create" action for the current input value. ```tsx render "use client"; diff --git a/packages/react-aria-components/src/index.ts b/packages/react-aria-components/src/index.ts index dd3d1db5a38..261de9ee278 100644 --- a/packages/react-aria-components/src/index.ts +++ b/packages/react-aria-components/src/index.ts @@ -45,6 +45,7 @@ export {Header, HeaderContext} from './Header'; export {Heading} from './Heading'; export {Input, InputContext} from './Input'; export {Section, CollectionRendererContext, DefaultCollectionRenderer} from './Collection'; +export {createLeafComponent as UNSTABLE_createLeafComponent, createBranchComponent as UNSTABLE_createBranchComponent, CollectionBuilder as UNSTABLE_CollectionBuilder} from '@react-aria/collections'; export {Collection, createLeafComponent, createBranchComponent, CollectionBuilder} from '@react-aria/collections'; export {Keyboard, KeyboardContext} from './Keyboard'; export {Label, LabelContext} from './Label';