From 39e9c85359347a3a3e6e8c7ef04cdf1824c21eee Mon Sep 17 00:00:00 2001 From: Daniel Lu Date: Fri, 27 Mar 2026 11:21:48 -0700 Subject: [PATCH 1/4] add control for select shouldCloseOnSelect to initial example --- packages/dev/s2-docs/pages/react-aria/Select.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/dev/s2-docs/pages/react-aria/Select.mdx b/packages/dev/s2-docs/pages/react-aria/Select.mdx index d1b93746eb8..eb778552d5c 100644 --- a/packages/dev/s2-docs/pages/react-aria/Select.mdx +++ b/packages/dev/s2-docs/pages/react-aria/Select.mdx @@ -19,7 +19,7 @@ export const description = 'Displays a collapsible list of options and allows a {docs.exports.Select.description} - ```tsx render docs={vanillaDocs.exports.Select} links={docs.links} props={['label', 'placeholder', 'selectionMode', 'isDisabled']} initialProps={{label: 'Favorite Animal'}} type="vanilla" files={["starters/docs/src/Select.tsx", "starters/docs/src/Select.css"]} + ```tsx render docs={vanillaDocs.exports.Select} links={docs.links} props={['label', 'placeholder', 'selectionMode', 'isDisabled', 'shouldCloseOnSelect']} initialProps={{label: 'Favorite Animal', shouldCloseOnSelect: true}} type="vanilla" files={["starters/docs/src/Select.tsx", "starters/docs/src/Select.css"]} "use client"; import {Select, SelectItem} from 'vanilla-starter/Select'; From 4eadcdd8ca0f1f3369df19be2906a0e48a0d885a Mon Sep 17 00:00:00 2001 From: Daniel Lu Date: Fri, 27 Mar 2026 11:35:34 -0700 Subject: [PATCH 2/4] add new viewport/page width css vars --- packages/dev/s2-docs/pages/react-aria/Modal.mdx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/dev/s2-docs/pages/react-aria/Modal.mdx b/packages/dev/s2-docs/pages/react-aria/Modal.mdx index feb0c630070..d2f98994776 100644 --- a/packages/dev/s2-docs/pages/react-aria/Modal.mdx +++ b/packages/dev/s2-docs/pages/react-aria/Modal.mdx @@ -212,7 +212,9 @@ const CustomTrigger = React.forwardRef((props, ref) => ( showDescription cssVariables={{ '--visual-viewport-height': 'The height of the [Visual Viewport](https://developer.mozilla.org/en-US/docs/Web/API/Visual_Viewport_API), i.e. space above the software keyboard.', - '--page-height': 'The height of the `` element. Useful for sizing the modal backdrop.' + '--visual-viewport-width': 'The width of the [Visual Viewport](https://developer.mozilla.org/en-US/docs/Web/API/Visual_Viewport_API).', + '--page-height': 'The height of the `` element. Useful for sizing and positioning the modal backdrop.', + '--page-width': 'The width of the `` element. Useful for sizing and positioning the modal backdrop.' }} /> ### Dialog From da16155fd5f378d8864c291d143f78ded19584c9 Mon Sep 17 00:00:00 2001 From: Daniel Lu Date: Fri, 27 Mar 2026 12:02:49 -0700 Subject: [PATCH 3/4] add interactOutsideBehavior docs --- .../pages/react-aria/RangeCalendar.mdx | 21 +++++++++++++++++ .../dev/s2-docs/pages/s2/RangeCalendar.mdx | 23 ++++++++++++++++++- 2 files changed, 43 insertions(+), 1 deletion(-) diff --git a/packages/dev/s2-docs/pages/react-aria/RangeCalendar.mdx b/packages/dev/s2-docs/pages/react-aria/RangeCalendar.mdx index b3619afbed7..28113f912e3 100644 --- a/packages/dev/s2-docs/pages/react-aria/RangeCalendar.mdx +++ b/packages/dev/s2-docs/pages/react-aria/RangeCalendar.mdx @@ -339,6 +339,27 @@ import {ChevronLeft, ChevronRight} from 'lucide-react'; ``` +## Interact outside behavior + +Use the `interactOutsideBehavior` prop to control what happens when a range selection is in progress and the user interacts outside the calendar. + +```tsx render docs={docs.exports.RangeCalendar} links={docs.links} props={['interactOutsideBehavior']} initialProps={{interactOutsideBehavior: 'select'}} +"use client"; +import {RangeCalendar} from 'vanilla-starter/RangeCalendar'; +import {parseDate} from '@internationalized/date'; + + +``` + ## API +``` + ## API From 8f7c95ba84eec2e7d87b6255415049ffef77af9c Mon Sep 17 00:00:00 2001 From: Daniel Lu Date: Fri, 27 Mar 2026 15:08:18 -0700 Subject: [PATCH 4/4] add interactOutsideBehavior to DateRangePicker --- packages/@react-spectrum/s2/src/DateRangePicker.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/@react-spectrum/s2/src/DateRangePicker.tsx b/packages/@react-spectrum/s2/src/DateRangePicker.tsx index e72004f6eb3..8124f178eb4 100644 --- a/packages/@react-spectrum/s2/src/DateRangePicker.tsx +++ b/packages/@react-spectrum/s2/src/DateRangePicker.tsx @@ -35,7 +35,7 @@ import {useSpectrumContextProps} from './useSpectrumContextProps'; export interface DateRangePickerProps extends Omit, 'children' | 'className' | 'style' | 'render' | keyof GlobalDOMAttributes>, - Pick, 'createCalendar' | 'pageBehavior' | 'firstDayOfWeek' | 'isDateUnavailable'>, + Pick, 'createCalendar' | 'pageBehavior' | 'firstDayOfWeek' | 'isDateUnavailable' | 'interactOutsideBehavior'>, Pick, StyleProps, SpectrumLabelableProps, @@ -84,6 +84,7 @@ export const DateRangePicker = /*#__PURE__*/ (forwardRef as forwardRefType)(func placeholderValue, maxVisibleMonths = 1, createCalendar, + interactOutsideBehavior, ...dateFieldProps } = props; let formContext = useContext(FormContext); @@ -154,6 +155,7 @@ export const DateRangePicker = /*#__PURE__*/ (forwardRef as forwardRefType)(func {showTimeField && (