From 39e9c85359347a3a3e6e8c7ef04cdf1824c21eee Mon Sep 17 00:00:00 2001 From: Daniel Lu Date: Fri, 27 Mar 2026 11:21:48 -0700 Subject: [PATCH 1/6] 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/6] 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/6] 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/6] 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 && (
From 19768bac8935a6af5b130e2b51aab0d540ac48ca Mon Sep 17 00:00:00 2001 From: Daniel Lu Date: Mon, 30 Mar 2026 10:02:53 -0700 Subject: [PATCH 5/6] copy update --- packages/dev/s2-docs/pages/react-aria/RangeCalendar.mdx | 2 +- packages/dev/s2-docs/pages/s2/RangeCalendar.mdx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/dev/s2-docs/pages/react-aria/RangeCalendar.mdx b/packages/dev/s2-docs/pages/react-aria/RangeCalendar.mdx index 28113f912e3..91c7e0a89b6 100644 --- a/packages/dev/s2-docs/pages/react-aria/RangeCalendar.mdx +++ b/packages/dev/s2-docs/pages/react-aria/RangeCalendar.mdx @@ -341,7 +341,7 @@ 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. +Use the `interactOutsideBehavior` prop to control what happens when a range selection is in progress and the user interacts outside the available dates. ```tsx render docs={docs.exports.RangeCalendar} links={docs.links} props={['interactOutsideBehavior']} initialProps={{interactOutsideBehavior: 'select'}} "use client"; diff --git a/packages/dev/s2-docs/pages/s2/RangeCalendar.mdx b/packages/dev/s2-docs/pages/s2/RangeCalendar.mdx index 7efce0cdaa4..0acec0fd5f5 100644 --- a/packages/dev/s2-docs/pages/s2/RangeCalendar.mdx +++ b/packages/dev/s2-docs/pages/s2/RangeCalendar.mdx @@ -245,7 +245,7 @@ function Example() { ## 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. +Use the `interactOutsideBehavior` prop to control what happens when a range selection is in progress and the user interacts outside the available dates. ```tsx render docs={docs.exports.RangeCalendar} links={docs.links} props={['interactOutsideBehavior']} initialProps={{interactOutsideBehavior: 'select'}} type="s2" "use client"; From 0e4927b8374db6b14e7c61a176320c97c5d4302a Mon Sep 17 00:00:00 2001 From: Daniel Lu Date: Mon, 30 Mar 2026 11:30:17 -0700 Subject: [PATCH 6/6] review comments --- .../pages/react-aria/RangeCalendar.mdx | 25 ++----------------- .../dev/s2-docs/pages/react-aria/Select.mdx | 2 +- .../dev/s2-docs/pages/s2/RangeCalendar.mdx | 23 +---------------- 3 files changed, 4 insertions(+), 46 deletions(-) diff --git a/packages/dev/s2-docs/pages/react-aria/RangeCalendar.mdx b/packages/dev/s2-docs/pages/react-aria/RangeCalendar.mdx index 91c7e0a89b6..e3dfb8b4c90 100644 --- a/packages/dev/s2-docs/pages/react-aria/RangeCalendar.mdx +++ b/packages/dev/s2-docs/pages/react-aria/RangeCalendar.mdx @@ -21,14 +21,14 @@ export const description = 'Displays one or more date grids and allows users to component={VanillaRangeCalendar} docs={vanillaDocs.exports.RangeCalendar} links={vanillaDocs.links} - props={['isDisabled']} + props={['isDisabled', 'interactOutsideBehavior']} type="vanilla" files={["starters/docs/src/RangeCalendar.tsx", "starters/docs/src/RangeCalendar.css"]} /> @@ -339,27 +339,6 @@ 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 available dates. - -```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