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 && (
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 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