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/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/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/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/ComboBox.mdx b/packages/react-aria-components/docs/ComboBox.mdx index ea7e5573332..4998aad7793 100644 --- a/packages/react-aria-components/docs/ComboBox.mdx +++ b/packages/react-aria-components/docs/ComboBox.mdx @@ -589,9 +589,40 @@ function Example() { } ``` +## Item actions + +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() { + 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 diff --git a/packages/react-aria-components/docs/Modal.mdx b/packages/react-aria-components/docs/Modal.mdx index eabc05c0d27..ef3f090acca 100644 --- a/packages/react-aria-components/docs/Modal.mdx +++ b/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%; } ``` diff --git a/packages/react-aria-components/src/index.ts b/packages/react-aria-components/src/index.ts index dc9bdfb3909..261de9ee278 100644 --- a/packages/react-aria-components/src/index.ts +++ b/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'; 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 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"