docs: Update docs for new --page-height var and ComboBox actions (#8955)

* chore: Update docs for new --page-height var and small audit fixes

* add row action example for RAC combobox docs

* clarify wording

* clarify wording

* ugh yarn lock

* fix lint rule

* fix docs type check

* update copy

* copy update and removing unstable from collection exports

* prevent breaking change, update copy for one last example

Author: LFDanLu

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": {

packages/dev/s2-docs/pages/react-aria/ComboBox.mdx

@@ -234,7 +234,7 @@ function ControlledComboBox() {
 
 ## Item actions
 
-Use the `onAction` prop on a `<ListBoxItem>` 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 `<ListBoxItem>` 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";

packages/dev/s2-docs/pages/s2/ComboBox.mdx

@@ -189,7 +189,7 @@ function Example() {
 
 ### Actions
 
-Use the `onAction` prop on a `<ComboBoxItem>` 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 `<ComboBoxItem>` 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";

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

packages/react-aria-components/docs/ComboBox.mdx

@@ -589,9 +589,40 @@ function Example() {
 }
 ```
 
+## Item actions
+
+Use the `onAction` prop on a `<ListBoxItem>` 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() {
+  let [inputValue, setInputValue] = React.useState('');
+
+  return (
+    <MyComboBox
+      label="Favorite Animal"
+      inputValue={inputValue}
+      onInputChange={setInputValue}>
+      {/*- begin highlight -*/}
+      {inputValue.length > 0 && (
+        <ListBoxItem onAction={() => alert('Creating ' + inputValue)}>
+          {`Create "${inputValue}"`}
+        </ListBoxItem>
+      )}
+      {/*- end highlight -*/}
+      <ListBoxItem>Aardvark</ListBoxItem>
+      <ListBoxItem>Cat</ListBoxItem>
+      <ListBoxItem>Dog</ListBoxItem>
+      <ListBoxItem>Kangaroo</ListBoxItem>
+      <ListBoxItem>Panda</ListBoxItem>
+      <ListBoxItem>Snake</ListBoxItem>
+    </MyComboBox>
+  );
+}
+```
+
 ## 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 `<ListBoxItem>` 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 `<ListBoxItem>` component. Interacting with link items navigates to the provided URL and does not update the selection or input value.
 
 ```tsx example
 <MyComboBox label="Tech company websites">

packages/react-aria-components/docs/Modal.mdx

@@ -422,12 +422,21 @@ 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 `--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 {
+  position: absolute;
+  height: var(--page-height);
+}
+
+.react-aria-Modal {
+  /* Center modal without adding a extra wrapping div. */
   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%;
 }
 ```
 

packages/react-aria-components/src/index.ts

@@ -45,7 +45,8 @@ 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 {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';

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

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"