docs: shouldCloseOnSelect, interactOutsideBehavior, and new viewport css vars #9855
Merged
docs: shouldCloseOnSelect, interactOutsideBehavior, and new viewport css vars #9855
Conversation
|
Build successful! 🎉 |
reidbarber
previously approved these changes
Mar 27, 2026
reidbarber
reviewed
Mar 27, 2026
| </RangeCalendar> | ||
| ``` | ||
|
|
||
| ## Interact outside behavior |
Member
There was a problem hiding this comment.
I'd be ok just having this in the prop table, not sure what other people think.
Member
There was a problem hiding this comment.
agree. Add it as a prop control to the top example as well.
|
Build successful! 🎉 |
LFDanLu
added
documentation
|
|
||
| ## 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. |
Member
There was a problem hiding this comment.
Suggested change
| 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. |
|
|
||
| ## 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. |
|
Build successful! 🎉 |
devongovett
reviewed
Mar 30, 2026
|
|
||
| <ExampleSwitcher> | ||
| ```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"]} |
Member
There was a problem hiding this comment.
This results in weird behavior because then multi-select will also close on select which is not the default. I say just omit this. It's a rare use case.
|
Build successful! 🎉 |
## API Changes
react-aria-components/react-aria-components:TableLayout TableLayout <O extends TableLayoutProps = TableLayoutProps, T> {
- constructor: (TableLayoutProps) => void
+ constructor: (ListLayoutOptions) => void
getContentSize: () => Size
getDropTargetFromPoint: (number, number, (DropTarget) => boolean) => DropTarget | null
getDropTargetLayoutInfo: (ItemDropTarget) => LayoutInfo
getLayoutInfo: (Key) => LayoutInfo | null
shouldInvalidate: (Rect, Rect) => boolean
shouldInvalidateLayoutOptions: (TableLayoutProps, TableLayoutProps) => boolean
update: (InvalidationContext<TableLayoutProps>) => void
updateItemSize: (Key, Size) => boolean
useLayoutOptions: () => TableLayoutProps
virtualizer: Virtualizer<{}, any> | null
}/react-aria-components:ListLayoutOptions ListLayoutOptions {
dropIndicatorThickness?: number = 2
- estimatedHeadingSize?: number
- estimatedRowSize?: number
+ estimatedHeadingHeight?: number
+ estimatedRowHeight?: number
gap?: number = 0
- headingSize?: number = 48
- loaderSize?: number = 48
+ headingHeight?: number = 48
+ loaderHeight?: number = 48
orientation?: Orientation = 'vertical'
padding?: number = 0
- rowSize?: number = 48
+ rowHeight?: number = 48
}/react-aria-components:TableLayoutProps-TableLayoutProps {
- columnWidths?: Map<Key, number>
- dropIndicatorThickness?: number = 2
- estimatedHeadingHeight?: number
- estimatedRowHeight?: number
- gap?: number = 0
- headingHeight?: number = 48
- loaderHeight?: number = 48
- padding?: number = 0
- rowHeight?: number = 48
-}@react-spectrum/s2/@react-spectrum/s2:DateRangePicker DateRangePicker <T extends DateValue> {
UNSAFE_className?: UnsafeClassName
UNSAFE_style?: CSSProperties
allowsNonContiguousRanges?: boolean
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
autoFocus?: boolean
contextualHelp?: ReactNode
createCalendar?: (CalendarIdentifier) => Calendar
defaultOpen?: boolean
defaultValue?: RangeValue<DateValue> | null
description?: ReactNode
endName?: string
errorMessage?: ReactNode
firstDayOfWeek?: 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat'
form?: string
granularity?: Granularity
hideTimeZone?: boolean = false
hourCycle?: number | number
id?: string
+ interactOutsideBehavior?: 'clear' | 'reset' | 'select' = 'select'
isDateUnavailable?: (DateValue) => boolean
isDisabled?: boolean
isInvalid?: boolean
isOpen?: boolean
isRequired?: boolean
label?: ReactNode
labelAlign?: Alignment = 'start'
labelPosition?: LabelPosition = 'top'
maxValue?: DateValue | null
maxVisibleMonths?: number = 1
minValue?: DateValue | null
necessityIndicator?: NecessityIndicator = 'icon'
onBlur?: (FocusEvent<Target>) => void
onChange?: (RangeValue<MappedDateValue<DateValue>> | null) => void
onFocus?: (FocusEvent<Target>) => void
onFocusChange?: (boolean) => void
onKeyDown?: (KeyboardEvent) => void
onKeyUp?: (KeyboardEvent) => void
onOpenChange?: (boolean) => void
pageBehavior?: PageBehavior = visible
placeholderValue?: DateValue | null
shouldCloseOnSelect?: boolean | () => boolean = true
shouldFlip?: boolean = true
shouldForceLeadingZeros?: boolean
size?: 'S' | 'M' | 'L' | 'XL' = 'M'
slot?: string | null
startName?: string
styles?: StylesProp
validate?: (RangeValue<MappedDateValue<DateValue>>) => ValidationError | boolean | null | undefined
validationBehavior?: 'native' | 'aria' = 'native'
value?: RangeValue<DateValue> | null
}/@react-spectrum/s2:ListView ListView <T extends {}> {
UNSAFE_className?: UnsafeClassName
UNSAFE_style?: CSSProperties
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
autoFocus?: boolean | FocusStrategy
children: ReactNode | ({}) => ReactNode
defaultSelectedKeys?: 'all' | Iterable<Key>
dependencies?: ReadonlyArray<any>
disabledBehavior?: DisabledBehavior = "all"
disabledKeys?: Iterable<Key>
disallowEmptySelection?: boolean
disallowTypeAhead?: boolean = false
escapeKeyBehavior?: 'clearSelection' | 'none' = 'clearSelection'
hideLinkOutIcon?: boolean
id?: string
isQuiet?: boolean
items?: Iterable<T>
loadingState?: LoadingState
onAction?: (Key) => void
onLoadMore?: () => void
onSelectionChange?: (Selection) => void
+ orientation?: Orientation = 'vertical'
overflowMode?: 'wrap' | 'truncate' = 'truncate'
renderActionBar?: ('all' | Set<Key>) => ReactElement
renderEmptyState?: (GridListRenderProps) => ReactNode
selectedKeys?: 'all' | Iterable<Key>
selectionStyle?: 'highlight' | 'checkbox' = 'checkbox'
shouldSelectOnPressUp?: boolean
slot?: string | null
styles?: StylesPropWithHeight
}/@react-spectrum/s2:DateRangePickerProps DateRangePickerProps <T extends DateValue> {
UNSAFE_className?: UnsafeClassName
UNSAFE_style?: CSSProperties
allowsNonContiguousRanges?: boolean
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
autoFocus?: boolean
contextualHelp?: ReactNode
createCalendar?: (CalendarIdentifier) => Calendar
defaultOpen?: boolean
defaultValue?: RangeValue<DateValue> | null
description?: ReactNode
endName?: string
errorMessage?: ReactNode
firstDayOfWeek?: 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat'
form?: string
granularity?: Granularity
hideTimeZone?: boolean = false
hourCycle?: number | number
id?: string
+ interactOutsideBehavior?: 'clear' | 'reset' | 'select' = 'select'
isDateUnavailable?: (DateValue) => boolean
isDisabled?: boolean
isInvalid?: boolean
isOpen?: boolean
isRequired?: boolean
label?: ReactNode
labelAlign?: Alignment = 'start'
labelPosition?: LabelPosition = 'top'
maxValue?: DateValue | null
maxVisibleMonths?: number = 1
minValue?: DateValue | null
necessityIndicator?: NecessityIndicator = 'icon'
onBlur?: (FocusEvent<Target>) => void
onChange?: (RangeValue<MappedDateValue<DateValue>> | null) => void
onFocus?: (FocusEvent<Target>) => void
onFocusChange?: (boolean) => void
onKeyDown?: (KeyboardEvent) => void
onKeyUp?: (KeyboardEvent) => void
onOpenChange?: (boolean) => void
pageBehavior?: PageBehavior = visible
placeholderValue?: DateValue | null
shouldCloseOnSelect?: boolean | () => boolean = true
shouldFlip?: boolean = true
shouldForceLeadingZeros?: boolean
size?: 'S' | 'M' | 'L' | 'XL' = 'M'
slot?: string | null
startName?: string
styles?: StylesProp
validate?: (RangeValue<MappedDateValue<DateValue>>) => ValidationError | boolean | null | undefined
validationBehavior?: 'native' | 'aria' = 'native'
value?: RangeValue<DateValue> | null
}/@react-spectrum/s2:ListViewProps ListViewProps <T> {
UNSAFE_className?: UnsafeClassName
UNSAFE_style?: CSSProperties
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
autoFocus?: boolean | FocusStrategy
children: ReactNode | (T) => ReactNode
defaultSelectedKeys?: 'all' | Iterable<Key>
dependencies?: ReadonlyArray<any>
disabledBehavior?: DisabledBehavior = "all"
disabledKeys?: Iterable<Key>
disallowEmptySelection?: boolean
disallowTypeAhead?: boolean = false
escapeKeyBehavior?: 'clearSelection' | 'none' = 'clearSelection'
hideLinkOutIcon?: boolean
id?: string
isQuiet?: boolean
items?: Iterable<T>
loadingState?: LoadingState
onAction?: (Key) => void
onLoadMore?: () => void
onSelectionChange?: (Selection) => void
+ orientation?: Orientation = 'vertical'
overflowMode?: 'wrap' | 'truncate' = 'truncate'
renderActionBar?: ('all' | Set<Key>) => ReactElement
renderEmptyState?: (GridListRenderProps) => ReactNode
selectedKeys?: 'all' | Iterable<Key>
selectionStyle?: 'highlight' | 'checkbox' = 'checkbox'
shouldSelectOnPressUp?: boolean
slot?: string | null
styles?: StylesPropWithHeight
}@react-stately/layout/@react-stately/layout:TableLayout TableLayout <O extends TableLayoutProps = TableLayoutProps, T> {
- constructor: (TableLayoutProps) => void
+ constructor: (ListLayoutOptions) => void
getContentSize: () => Size
getDropTargetFromPoint: (number, number, (DropTarget) => boolean) => DropTarget | null
getDropTargetLayoutInfo: (ItemDropTarget) => LayoutInfo
getLayoutInfo: (Key) => LayoutInfo | null
shouldInvalidate: (Rect, Rect) => boolean
shouldInvalidateLayoutOptions: (TableLayoutProps, TableLayoutProps) => boolean
update: (InvalidationContext<TableLayoutProps>) => void
updateItemSize: (Key, Size) => boolean
virtualizer: Virtualizer<{}, any> | null
}/@react-stately/layout:ListLayoutOptions ListLayoutOptions {
dropIndicatorThickness?: number = 2
- estimatedHeadingSize?: number
- estimatedRowSize?: number
+ estimatedHeadingHeight?: number
+ estimatedRowHeight?: number
gap?: number = 0
- headingSize?: number = 48
- loaderSize?: number = 48
+ headingHeight?: number = 48
+ loaderHeight?: number = 48
orientation?: Orientation = 'vertical'
padding?: number = 0
- rowSize?: number = 48
+ rowHeight?: number = 48
}/@react-stately/layout:TableLayoutProps TableLayoutProps {
columnWidths?: Map<Key, number>
dropIndicatorThickness?: number = 2
estimatedHeadingHeight?: number
estimatedRowHeight?: number
gap?: number = 0
headingHeight?: number = 48
loaderHeight?: number = 48
+ orientation?: Orientation = 'vertical'
padding?: number = 0
rowHeight?: number = 48
} |
devongovett
approved these changes
Mar 30, 2026
snowystinger
approved these changes
Mar 30, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
5 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Part of release audit, open to opinions if these should be added or not
✅ Pull Request Checklist:
📝 Test Instructions:
🧢 Your Project:
RSP