docs: shouldCloseOnSelect, interactOutsideBehavior, and new viewport css vars (adobe#9855)

LFDanLu · web-flow · commit 352fa199fd84 · 2026-03-30T20:07:44.000Z
* add control for select shouldCloseOnSelect to initial example

* add new viewport/page width css vars

* add interactOutsideBehavior docs

* add interactOutsideBehavior to DateRangePicker

* copy update

* review comments
diff --git 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<T extends DateValue> extends
   Omit<AriaDateRangePickerProps<T>, 'children' | 'className' | 'style' | 'render' | keyof GlobalDOMAttributes>,
-  Pick<RangeCalendarProps<T>, 'createCalendar' | 'pageBehavior' | 'firstDayOfWeek' | 'isDateUnavailable'>,
+  Pick<RangeCalendarProps<T>, 'createCalendar' | 'pageBehavior' | 'firstDayOfWeek' | 'isDateUnavailable' | 'interactOutsideBehavior'>,
   Pick<PopoverProps, 'shouldFlip'>,
   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
               <RangeCalendar
                 visibleMonths={maxVisibleMonths}
                 createCalendar={createCalendar}
+                interactOutsideBehavior={interactOutsideBehavior}
                 errorMessage={errorMessage} />
               {showTimeField && (
                 <div className={style({display: 'flex', gap: 16, contain: 'inline-size', marginTop: 24})}>
diff --git a/packages/dev/s2-docs/pages/react-aria/Modal.mdx b/packages/dev/s2-docs/pages/react-aria/Modal.mdx
@@ -211,7 +211,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 `<body>` 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 `<body>` element. Useful for sizing and positioning the modal backdrop.',
+    '--page-width': 'The width of the `<body>` element. Useful for sizing and positioning the modal backdrop.'
   }} />
 
 ### Dialog
diff --git 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"]} />
   <VisualExample
     component={TailwindRangeCalendar}
     docs={vanillaDocs.exports.RangeCalendar}
     links={vanillaDocs.links}
-    props={['isDisabled']}
+    props={['isDisabled', 'interactOutsideBehavior']}
     type="tailwind"
     files={["starters/tailwind/src/RangeCalendar.tsx"]} />
 </ExampleSwitcher>
diff --git a/packages/dev/s2-docs/pages/s2/RangeCalendar.mdx b/packages/dev/s2-docs/pages/s2/RangeCalendar.mdx
@@ -15,7 +15,7 @@ export const description = 'Allows a user to select a contiguous range of dates.
   component={RangeCalendar}
   docs={docs.exports.RangeCalendar}
   links={docs.links}
-  props={['visibleMonths', 'pageBehavior', 'firstDayOfWeek', 'isDisabled']}
+  props={['visibleMonths', 'pageBehavior', 'firstDayOfWeek', 'isDisabled', 'interactOutsideBehavior']}
   initialProps={{'aria-label': 'Trip dates'}}
   controlOptions={{
     visibleMonths: {
@@ -44,7 +44,7 @@ function Example() {
     end: parseDate('2025-02-12')
   });
   let formatter = useDateFormatter({ dateStyle: 'long' });
-  
+
   return (
     <>
       <RangeCalendar
