[WIP] fix: RAC Tree DnD follow-up #8152

reidbarber · 2025-04-28T17:01:15Z

Closes

✅ Pull Request Checklist:

Included link to corresponding React Spectrum GitHub Issue.
Added/updated unit tests and storybook for this change (for new code or code which already has tests).
Filled out test instructions.
Updated documentation (if it already exists for this component).
Looked at the Accessibility Practices for this feature - Aria Practices

📝 Test Instructions:

🧢 Your Project:

* GW coachmark * fix TS errors * remove unrelated files, update yarn.lock * remove unneeded import * lint fix * more lint fixes * remove old stories * remove unused import * fix yarn lock * API changes to bring in line with other s2 components * Cleanup to get merged * fix lint and tests * remove from exports entirely --------- Co-authored-by: Robert Snow <rsnow@adobe.com> Co-authored-by: Robert Snow <snowystinger@gmail.com>

rspbot · 2025-04-28T17:35:16Z

Build successful! 🎉

…8118) * refactor: Generate stable style macro class names between versions * fix chromatic issues

rspbot · 2025-04-28T18:04:46Z

Build successful! 🎉

rspbot · 2025-04-28T18:04:48Z

## API Changes

react-aria-components

/react-aria-components:Select

 Select <T extends {} = {
   
 }> {
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoComplete?: string
   autoFocus?: boolean
   children?: ReactNode | ((SelectRenderProps & {
     defaultChildren: ReactNode | undefined
 })) => ReactNode
   className?: string | ((SelectRenderProps & {
     defaultClassName: string | undefined
 })) => string
   defaultOpen?: boolean
   defaultSelectedKey?: Key
   disabledKeys?: Iterable<Key>
   excludeFromTabOrder?: boolean
   id?: string
   isDisabled?: boolean
   isInvalid?: boolean
   isOpen?: boolean
   isRequired?: boolean
   name?: string
   onBlur?: (FocusEvent<Target>) => void
   onFocus?: (FocusEvent<Target>) => void
   onFocusChange?: (boolean) => void
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
   onOpenChange?: (boolean) => void
-  onSelectionChange?: (Key | null) => void
+  onSelectionChange?: (Key) => void
   placeholder?: string = 'Select an item' (localized)
   selectedKey?: Key | null
   slot?: string | null
   style?: CSSProperties | ((SelectRenderProps & {
 })) => CSSProperties | undefined
   validate?: (Key) => ValidationError | boolean | null | undefined
   validationBehavior?: 'native' | 'aria' = 'native'
 }

/react-aria-components:SelectProps

 SelectProps <T extends {} = {
   
 }> {
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoComplete?: string
   autoFocus?: boolean
   children?: ReactNode | ((SelectRenderProps & {
     defaultChildren: ReactNode | undefined
 })) => ReactNode
   className?: string | ((SelectRenderProps & {
     defaultClassName: string | undefined
 })) => string
   defaultOpen?: boolean
   defaultSelectedKey?: Key
   disabledKeys?: Iterable<Key>
   excludeFromTabOrder?: boolean
   id?: string
   isDisabled?: boolean
   isInvalid?: boolean
   isOpen?: boolean
   isRequired?: boolean
   name?: string
   onBlur?: (FocusEvent<Target>) => void
   onFocus?: (FocusEvent<Target>) => void
   onFocusChange?: (boolean) => void
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
   onOpenChange?: (boolean) => void
-  onSelectionChange?: (Key | null) => void
+  onSelectionChange?: (Key) => void
   placeholder?: string = 'Select an item' (localized)
   selectedKey?: Key | null
   slot?: string | null
   style?: CSSProperties | ((SelectRenderProps & {
 })) => CSSProperties | undefined
   validate?: (Key) => ValidationError | boolean | null | undefined
   validationBehavior?: 'native' | 'aria' = 'native'
 }

@react-aria/select

/@react-aria/select:AriaSelectOptions

 AriaSelectOptions <T> {
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoComplete?: string
   autoFocus?: boolean
   defaultOpen?: boolean
   defaultSelectedKey?: Key
   description?: ReactNode
   disabledKeys?: Iterable<Key>
   errorMessage?: ReactNode | (ValidationResult) => ReactNode
   excludeFromTabOrder?: boolean
   id?: string
   isDisabled?: boolean
   isInvalid?: boolean
   isOpen?: boolean
   isRequired?: boolean
   items?: Iterable<T>
   keyboardDelegate?: KeyboardDelegate
   label?: ReactNode
   name?: string
   onBlur?: (FocusEvent<Target>) => void
   onFocus?: (FocusEvent<Target>) => void
   onFocusChange?: (boolean) => void
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
   onOpenChange?: (boolean) => void
-  onSelectionChange?: (Key | null) => void
+  onSelectionChange?: (Key) => void
   placeholder?: string
   selectedKey?: Key | null
   validate?: (Key) => ValidationError | boolean | null | undefined
   validationBehavior?: 'aria' | 'native' = 'aria'

/@react-aria/select:AriaSelectProps

 AriaSelectProps <T> {
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoComplete?: string
   autoFocus?: boolean
   children: CollectionChildren<T>
   defaultOpen?: boolean
   defaultSelectedKey?: Key
   description?: ReactNode
   disabledKeys?: Iterable<Key>
   errorMessage?: ReactNode | (ValidationResult) => ReactNode
   excludeFromTabOrder?: boolean
   id?: string
   isDisabled?: boolean
   isInvalid?: boolean
   isOpen?: boolean
   isRequired?: boolean
   items?: Iterable<T>
   label?: ReactNode
   name?: string
   onBlur?: (FocusEvent<Target>) => void
   onFocus?: (FocusEvent<Target>) => void
   onFocusChange?: (boolean) => void
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
   onOpenChange?: (boolean) => void
-  onSelectionChange?: (Key | null) => void
+  onSelectionChange?: (Key) => void
   placeholder?: string
   selectedKey?: Key | null
   validate?: (Key) => ValidationError | boolean | null | undefined
   validationBehavior?: 'aria' | 'native' = 'aria'

@react-aria/steplist

/@react-aria/steplist:AriaStepListProps

 AriaStepListProps <T> {
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   children: CollectionChildren<T>
   defaultLastCompletedStep?: Key
   defaultSelectedKey?: Key
   disabledKeys?: Iterable<Key>
   disallowEmptySelection?: boolean
   id?: string
   isDisabled?: boolean
   isReadOnly?: boolean
   items?: Iterable<T>
   lastCompletedStep?: Key
   onLastCompletedStepChange?: (Key | null) => void
-  onSelectionChange?: (Key | null) => void
+  onSelectionChange?: (Key) => void
   selectedKey?: Key | null
 }

@react-spectrum/picker

/@react-spectrum/picker:Picker

 Picker <T extends {}> {
   UNSAFE_className?: string
   UNSAFE_style?: CSSProperties
   align?: Alignment = 'start'
   alignSelf?: Responsive<'auto' | 'normal' | 'start' | 'end' | 'center' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'stretch'>
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoComplete?: string
   autoFocus?: boolean
   bottom?: Responsive<DimensionValue>
   children: CollectionChildren<{}>
   contextualHelp?: ReactNode
   defaultOpen?: boolean
   defaultSelectedKey?: Key
   description?: ReactNode
   direction?: 'bottom' | 'top' = 'bottom'
   disabledKeys?: Iterable<Key>
   end?: Responsive<DimensionValue>
   errorMessage?: ReactNode | (ValidationResult) => ReactNode
   excludeFromTabOrder?: boolean
   flex?: Responsive<string | number | boolean>
   flexBasis?: Responsive<number | string>
   flexGrow?: Responsive<number>
   flexShrink?: Responsive<number>
   gridArea?: Responsive<string>
   gridColumn?: Responsive<string>
   gridColumnEnd?: Responsive<string>
   gridColumnStart?: Responsive<string>
   gridRow?: Responsive<string>
   gridRowEnd?: Responsive<string>
   gridRowStart?: Responsive<string>
   height?: Responsive<DimensionValue>
   id?: string
   isDisabled?: boolean
   isHidden?: Responsive<boolean>
   isInvalid?: boolean
   isLoading?: boolean
   isOpen?: boolean
   isQuiet?: boolean
   isRequired?: boolean
   items?: Iterable<{}>
   justifySelf?: Responsive<'auto' | 'normal' | 'start' | 'end' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'center' | 'left' | 'right' | 'stretch'>
   label?: ReactNode
   labelAlign?: Alignment = 'start'
   labelPosition?: LabelPosition = 'top'
   left?: Responsive<DimensionValue>
   margin?: Responsive<DimensionValue>
   marginBottom?: Responsive<DimensionValue>
   marginEnd?: Responsive<DimensionValue>
   marginStart?: Responsive<DimensionValue>
   marginTop?: Responsive<DimensionValue>
   marginX?: Responsive<DimensionValue>
   marginY?: Responsive<DimensionValue>
   maxHeight?: Responsive<DimensionValue>
   maxWidth?: Responsive<DimensionValue>
   menuWidth?: DimensionValue
   minHeight?: Responsive<DimensionValue>
   minWidth?: Responsive<DimensionValue>
   name?: string
   necessityIndicator?: NecessityIndicator = 'icon'
   onBlur?: (FocusEvent<Target>) => void
   onFocus?: (FocusEvent<Target>) => void
   onFocusChange?: (boolean) => void
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
   onLoadMore?: () => any
   onOpenChange?: (boolean) => void
-  onSelectionChange?: (Key | null) => void
+  onSelectionChange?: (Key) => void
   order?: Responsive<number>
   placeholder?: string
   position?: Responsive<'static' | 'relative' | 'absolute' | 'fixed' | 'sticky'>
   right?: Responsive<DimensionValue>
   shouldFlip?: boolean = true
   start?: Responsive<DimensionValue>
   top?: Responsive<DimensionValue>
   validate?: (Key) => ValidationError | boolean | null | undefined
   validationBehavior?: 'aria' | 'native' = 'aria'
   width?: Responsive<DimensionValue>
   zIndex?: Responsive<number>
 }

/@react-spectrum/picker:SpectrumPickerProps

 SpectrumPickerProps <T> {
   UNSAFE_className?: string
   UNSAFE_style?: CSSProperties
   align?: Alignment = 'start'
   alignSelf?: Responsive<'auto' | 'normal' | 'start' | 'end' | 'center' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'stretch'>
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoComplete?: string
   autoFocus?: boolean
   bottom?: Responsive<DimensionValue>
   children: CollectionChildren<T>
   contextualHelp?: ReactNode
   defaultOpen?: boolean
   defaultSelectedKey?: Key
   description?: ReactNode
   direction?: 'bottom' | 'top' = 'bottom'
   disabledKeys?: Iterable<Key>
   end?: Responsive<DimensionValue>
   errorMessage?: ReactNode | (ValidationResult) => ReactNode
   excludeFromTabOrder?: boolean
   flex?: Responsive<string | number | boolean>
   flexBasis?: Responsive<number | string>
   flexGrow?: Responsive<number>
   flexShrink?: Responsive<number>
   gridArea?: Responsive<string>
   gridColumn?: Responsive<string>
   gridColumnEnd?: Responsive<string>
   gridColumnStart?: Responsive<string>
   gridRow?: Responsive<string>
   gridRowEnd?: Responsive<string>
   gridRowStart?: Responsive<string>
   height?: Responsive<DimensionValue>
   id?: string
   isDisabled?: boolean
   isHidden?: Responsive<boolean>
   isInvalid?: boolean
   isLoading?: boolean
   isOpen?: boolean
   isQuiet?: boolean
   isRequired?: boolean
   items?: Iterable<T>
   justifySelf?: Responsive<'auto' | 'normal' | 'start' | 'end' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'center' | 'left' | 'right' | 'stretch'>
   label?: ReactNode
   labelAlign?: Alignment = 'start'
   labelPosition?: LabelPosition = 'top'
   left?: Responsive<DimensionValue>
   margin?: Responsive<DimensionValue>
   marginBottom?: Responsive<DimensionValue>
   marginEnd?: Responsive<DimensionValue>
   marginStart?: Responsive<DimensionValue>
   marginTop?: Responsive<DimensionValue>
   marginX?: Responsive<DimensionValue>
   marginY?: Responsive<DimensionValue>
   maxHeight?: Responsive<DimensionValue>
   maxWidth?: Responsive<DimensionValue>
   menuWidth?: DimensionValue
   minHeight?: Responsive<DimensionValue>
   minWidth?: Responsive<DimensionValue>
   name?: string
   necessityIndicator?: NecessityIndicator = 'icon'
   onBlur?: (FocusEvent<Target>) => void
   onFocus?: (FocusEvent<Target>) => void
   onFocusChange?: (boolean) => void
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
   onLoadMore?: () => any
   onOpenChange?: (boolean) => void
-  onSelectionChange?: (Key | null) => void
+  onSelectionChange?: (Key) => void
   order?: Responsive<number>
   placeholder?: string
   position?: Responsive<'static' | 'relative' | 'absolute' | 'fixed' | 'sticky'>
   right?: Responsive<DimensionValue>
   shouldFlip?: boolean = true
   start?: Responsive<DimensionValue>
   top?: Responsive<DimensionValue>
   validate?: (Key) => ValidationError | boolean | null | undefined
   validationBehavior?: 'aria' | 'native' = 'aria'
   width?: Responsive<DimensionValue>
   zIndex?: Responsive<number>
 }

@react-spectrum/s2

/@react-spectrum/s2:Picker

 Picker <T extends {}> {
   UNSAFE_className?: UnsafeClassName
   UNSAFE_style?: CSSProperties
   align?: 'start' | 'end' = 'start'
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoComplete?: string
   autoFocus?: boolean
   children: ReactNode | ({}) => ReactNode
   contextualHelp?: ReactNode
   defaultOpen?: boolean
   defaultSelectedKey?: Key
   description?: ReactNode
   direction?: 'bottom' | 'top' = 'bottom'
   disabledKeys?: Iterable<Key>
   errorMessage?: ReactNode | (ValidationResult) => ReactNode
   excludeFromTabOrder?: boolean
   id?: string
   isDisabled?: boolean
   isInvalid?: boolean
   isOpen?: boolean
   isRequired?: boolean
   items?: Iterable<T>
   label?: ReactNode
   labelAlign?: Alignment = 'start'
   labelPosition?: LabelPosition = 'top'
   menuWidth?: number
   name?: string
   necessityIndicator?: NecessityIndicator = 'icon'
   onBlur?: (FocusEvent<Target>) => void
   onFocus?: (FocusEvent<Target>) => void
   onFocusChange?: (boolean) => void
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
   onOpenChange?: (boolean) => void
-  onSelectionChange?: (Key | null) => void
+  onSelectionChange?: (Key) => void
   placeholder?: string = 'Select an item' (localized)
   selectedKey?: Key | null
   shouldFlip?: boolean = true
   size?: 'S' | 'M' | 'L' | 'XL' = 'M'
   styles?: StylesProp
   validate?: (Key) => ValidationError | boolean | null | undefined
   validationBehavior?: 'native' | 'aria' = 'native'
 }

/@react-spectrum/s2:PickerProps

 PickerProps <T extends {}> {
   UNSAFE_className?: UnsafeClassName
   UNSAFE_style?: CSSProperties
   align?: 'start' | 'end' = 'start'
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoComplete?: string
   autoFocus?: boolean
   children: ReactNode | ({}) => ReactNode
   contextualHelp?: ReactNode
   defaultOpen?: boolean
   defaultSelectedKey?: Key
   description?: ReactNode
   direction?: 'bottom' | 'top' = 'bottom'
   disabledKeys?: Iterable<Key>
   errorMessage?: ReactNode | (ValidationResult) => ReactNode
   excludeFromTabOrder?: boolean
   id?: string
   isDisabled?: boolean
   isInvalid?: boolean
   isOpen?: boolean
   isRequired?: boolean
   items?: Iterable<T>
   label?: ReactNode
   labelAlign?: Alignment = 'start'
   labelPosition?: LabelPosition = 'top'
   menuWidth?: number
   name?: string
   necessityIndicator?: NecessityIndicator = 'icon'
   onBlur?: (FocusEvent<Target>) => void
   onFocus?: (FocusEvent<Target>) => void
   onFocusChange?: (boolean) => void
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
   onOpenChange?: (boolean) => void
-  onSelectionChange?: (Key | null) => void
+  onSelectionChange?: (Key) => void
   placeholder?: string = 'Select an item' (localized)
   selectedKey?: Key | null
   shouldFlip?: boolean = true
   size?: 'S' | 'M' | 'L' | 'XL' = 'M'
   styles?: StylesProp
   validate?: (Key) => ValidationError | boolean | null | undefined
   validationBehavior?: 'native' | 'aria' = 'native'
 }

@react-spectrum/steplist

/@react-spectrum/steplist:StepList

 StepList <T extends {}> {
   UNSAFE_className?: string
   UNSAFE_style?: CSSProperties
   alignSelf?: Responsive<'auto' | 'normal' | 'start' | 'end' | 'center' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'stretch'>
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   bottom?: Responsive<DimensionValue>
   children: CollectionChildren<{}>
   defaultLastCompletedStep?: Key
   defaultSelectedKey?: Key
   disabledKeys?: Iterable<Key>
   disallowEmptySelection?: boolean
   end?: Responsive<DimensionValue>
   flex?: Responsive<string | number | boolean>
   flexBasis?: Responsive<number | string>
   flexGrow?: Responsive<number>
   flexShrink?: Responsive<number>
   gridArea?: Responsive<string>
   gridColumn?: Responsive<string>
   gridColumnEnd?: Responsive<string>
   gridColumnStart?: Responsive<string>
   gridRow?: Responsive<string>
   gridRowEnd?: Responsive<string>
   gridRowStart?: Responsive<string>
   height?: Responsive<DimensionValue>
   id?: string
   isDisabled?: boolean
   isEmphasized?: boolean = false
   isHidden?: Responsive<boolean>
   isReadOnly?: boolean
   items?: Iterable<{}>
   justifySelf?: Responsive<'auto' | 'normal' | 'start' | 'end' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'center' | 'left' | 'right' | 'stretch'>
   lastCompletedStep?: Key
   left?: Responsive<DimensionValue>
   margin?: Responsive<DimensionValue>
   marginBottom?: Responsive<DimensionValue>
   marginEnd?: Responsive<DimensionValue>
   marginStart?: Responsive<DimensionValue>
   marginTop?: Responsive<DimensionValue>
   marginX?: Responsive<DimensionValue>
   marginY?: Responsive<DimensionValue>
   maxHeight?: Responsive<DimensionValue>
   maxWidth?: Responsive<DimensionValue>
   minHeight?: Responsive<DimensionValue>
   minWidth?: Responsive<DimensionValue>
   onLastCompletedStepChange?: (Key | null) => void
-  onSelectionChange?: (Key | null) => void
+  onSelectionChange?: (Key) => void
   order?: Responsive<number>
   orientation?: Orientation = 'horizontal'
   position?: Responsive<'static' | 'relative' | 'absolute' | 'fixed' | 'sticky'>
   right?: Responsive<DimensionValue>
   size?: 'S' | 'M' | 'L' | 'XL' = 'M'
   start?: Responsive<DimensionValue>
   top?: Responsive<DimensionValue>
   width?: Responsive<DimensionValue>
   zIndex?: Responsive<number>
 }

/@react-spectrum/steplist:SpectrumStepListProps

 SpectrumStepListProps <T> {
   UNSAFE_className?: string
   UNSAFE_style?: CSSProperties
   alignSelf?: Responsive<'auto' | 'normal' | 'start' | 'end' | 'center' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'stretch'>
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   bottom?: Responsive<DimensionValue>
   children: CollectionChildren<T>
   defaultLastCompletedStep?: Key
   defaultSelectedKey?: Key
   disabledKeys?: Iterable<Key>
   disallowEmptySelection?: boolean
   end?: Responsive<DimensionValue>
   flex?: Responsive<string | number | boolean>
   flexBasis?: Responsive<number | string>
   flexGrow?: Responsive<number>
   flexShrink?: Responsive<number>
   gridArea?: Responsive<string>
   gridColumn?: Responsive<string>
   gridColumnEnd?: Responsive<string>
   gridColumnStart?: Responsive<string>
   gridRow?: Responsive<string>
   gridRowEnd?: Responsive<string>
   gridRowStart?: Responsive<string>
   height?: Responsive<DimensionValue>
   id?: string
   isDisabled?: boolean
   isEmphasized?: boolean = false
   isHidden?: Responsive<boolean>
   isReadOnly?: boolean
   items?: Iterable<T>
   justifySelf?: Responsive<'auto' | 'normal' | 'start' | 'end' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'center' | 'left' | 'right' | 'stretch'>
   lastCompletedStep?: Key
   left?: Responsive<DimensionValue>
   margin?: Responsive<DimensionValue>
   marginBottom?: Responsive<DimensionValue>
   marginEnd?: Responsive<DimensionValue>
   marginStart?: Responsive<DimensionValue>
   marginTop?: Responsive<DimensionValue>
   marginX?: Responsive<DimensionValue>
   marginY?: Responsive<DimensionValue>
   maxHeight?: Responsive<DimensionValue>
   maxWidth?: Responsive<DimensionValue>
   minHeight?: Responsive<DimensionValue>
   minWidth?: Responsive<DimensionValue>
   onLastCompletedStepChange?: (Key | null) => void
-  onSelectionChange?: (Key | null) => void
+  onSelectionChange?: (Key) => void
   order?: Responsive<number>
   orientation?: Orientation = 'horizontal'
   position?: Responsive<'static' | 'relative' | 'absolute' | 'fixed' | 'sticky'>
   right?: Responsive<DimensionValue>
   size?: 'S' | 'M' | 'L' | 'XL' = 'M'
   start?: Responsive<DimensionValue>
   top?: Responsive<DimensionValue>
   width?: Responsive<DimensionValue>
   zIndex?: Responsive<number>
 }

@react-stately/data

/@react-stately/data:TreeData

 TreeData <T extends {}> {
   append: (Key | null, Array<{}>) => void
+  getDescendantKeys: (TreeNode<{}>) => Array<Key>
   getItem: (Key) => TreeNode<{}> | undefined
   insert: (Key | null, number, Array<{}>) => void
   insertAfter: (Key, Array<{}>) => void
   insertBefore: (Key, Array<{}>) => void
   move: (Key, Key | null, number) => void
   moveAfter: (Key, Iterable<Key>) => void
   moveBefore: (Key, Iterable<Key>) => void
   prepend: (Key | null, Array<{}>) => void
   remove: (Array<Key>) => void
   removeSelectedItems: () => void
   selectedKeys: Set<Key>
   setSelectedKeys: (Set<Key>) => void
   update: (Key, {}) => void
 }

@react-stately/list

/@react-stately/list:SingleSelectListProps

 SingleSelectListProps <T> {
   collection?: Collection<Node<T>>
   defaultSelectedKey?: Key
   filter?: (Iterable<Node<T>>) => Iterable<Node<T>>
-  onSelectionChange?: (Key | null) => void
+  onSelectionChange?: (Key) => void
   selectedKey?: Key | null
 }

@react-stately/select

/@react-stately/select:SelectProps

 SelectProps <T> {
   autoFocus?: boolean
   children: CollectionChildren<T>
   defaultOpen?: boolean
   defaultSelectedKey?: Key
   description?: ReactNode
   disabledKeys?: Iterable<Key>
   errorMessage?: ReactNode | (ValidationResult) => ReactNode
   isDisabled?: boolean
   isInvalid?: boolean
   isOpen?: boolean
   isRequired?: boolean
   items?: Iterable<T>
   label?: ReactNode
   onBlur?: (FocusEvent<Target>) => void
   onFocus?: (FocusEvent<Target>) => void
   onFocusChange?: (boolean) => void
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
   onOpenChange?: (boolean) => void
-  onSelectionChange?: (Key | null) => void
+  onSelectionChange?: (Key) => void
   placeholder?: string
   selectedKey?: Key | null
   validate?: (Key) => ValidationError | boolean | null | undefined
   validationBehavior?: 'aria' | 'native' = 'aria'

/@react-stately/select:SelectStateOptions

 SelectStateOptions <T> {
   autoFocus?: boolean
   collection?: Collection<Node<T>>
   defaultOpen?: boolean
   defaultSelectedKey?: Key
   description?: ReactNode
   disabledKeys?: Iterable<Key>
   errorMessage?: ReactNode | (ValidationResult) => ReactNode
   isDisabled?: boolean
   isInvalid?: boolean
   isOpen?: boolean
   isRequired?: boolean
   items?: Iterable<T>
   label?: ReactNode
   onBlur?: (FocusEvent<Target>) => void
   onFocus?: (FocusEvent<Target>) => void
   onFocusChange?: (boolean) => void
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
   onOpenChange?: (boolean) => void
-  onSelectionChange?: (Key | null) => void
+  onSelectionChange?: (Key) => void
   placeholder?: string
   selectedKey?: Key | null
   validate?: (Key) => ValidationError | boolean | null | undefined
   validationBehavior?: 'aria' | 'native' = 'aria'

@react-stately/steplist

/@react-stately/steplist:StepListProps

 StepListProps <T> {
   children: CollectionChildren<T>
   defaultLastCompletedStep?: Key
   defaultSelectedKey?: Key
   disabledKeys?: Iterable<Key>
   disallowEmptySelection?: boolean
   isDisabled?: boolean
   isReadOnly?: boolean
   items?: Iterable<T>
   lastCompletedStep?: Key
   onLastCompletedStepChange?: (Key | null) => void
-  onSelectionChange?: (Key | null) => void
+  onSelectionChange?: (Key) => void
   selectedKey?: Key | null
 }

#8153)

* fix(overlays): Correct the PortalProvider typings * fix typings --------- Co-authored-by: Reid Barber <reid@reidbarber.com>

* Remove columns for now, and reduce spacing scale * use rems for media queries * use px instead of rems for padding and absolute positioning * use rems for icon sizes and support size prop * use rems for checkbox and radio borders * more component-specific rem fixes * support percentages and viewport units by default * support arbitrary aspect ratios * support math functions and css-wide keywords without bracket syntax * update property data * fix test * icon colors * Remove runtime conditions from color properties in theme, use baseColor macro instead * Move control styles to shared macros * inherit doesn't need brackets anymore * update property data * sort properties by number of generated rules rather than absolute frequency of usage using the same value many time results in only one rule, so shouldn't be counted more than once * Add shorter mappings for some common custom properties * update snapshots * Fix color with opacity

* Update to Node 22 * go to node 20 instead * fix formatting test * run verdaccio build * turn off verdaccio build * try limiting concurrent tests * try to debug on ci where error happens more * keep debugging * try a longer timeout * remove debugging * turn on verdaccio build * fix lint * update yarn lock * fix verdaccio and tsdiffer * fix node corepack * fix forkpoint * try to fix buildWebsite * turn verdaccio build back off * fix rebase * turn on verdaccio on CI * turn off verdaccio again and remove concurrency restriction * turn back on verdaccio * fix spectrum-css local builder * remove obselete patch * fix lint and flakey ssr * remove verdaccio * update to latest node 20 * remove leftovers

* fix: keep more compatible React component types * revert v3 explicit change * add react-aria components as well * fix remaining

* initial codemod refactor * fix TableView * fix selectionStyle * fix key to id * clean up comments * lint * clean up * update README.md * improve transform function/option names * update action group comments

…8200) * add global touch-action style for pressable elements * remove :where() * add comment back * add story to test * check viewport meta tag * update story * move constant * const for data attribute * remove meta viewport check

reidbarber · 2025-05-13T19:22:38Z

Closing in favor of #8229

jluyau and others added 8 commits April 22, 2025 20:53

fix: spelling mistake in style macros list-style-type (#8124)

2e9061d

chore: add portal provider to react-aria monopackage (#8135)

9fe5629

chore: TS update 5.8 (#8061)

63d4359

support dropping on items

16ab6bf

remove extraneous onKeyDown

145a58f

fix imports

532ec4c

fix onInsert call

f87e28b

refactor: Generate stable style macro class names between versions (#…

1dd65ff

…8118) * refactor: Generate stable style macro class names between versions * fix chromatic issues

reidbarber changed the title ~~fix: RAC Tree DnD follow-up~~ [WIP] fix: RAC Tree DnD follow-up Apr 28, 2025

add back condition and fix tests

c7c55cc

reidbarber and others added 5 commits April 30, 2025 14:25

add story for shouldAcceptItemDrop

74acbf9

fix rows in story

2951a95

Fix menu keyboard shortcut icons background color when hovered/focused (

6328d20

#8153)

update optimize-locales plugin types (#8087)

e3b138d

fix ColorSlider className (#8190)

542e48d

reidbarber added the release label May 5, 2025

reidbarber and others added 10 commits May 6, 2025 10:49

use expand button as activate button

76debfe

doc(RAC): FileType docs TypeScript fix (#8172)

d1c5587

fix: Correct the PortalProvider's getContainer typings (#8185)

b07a79d

* fix(overlays): Correct the PortalProvider typings * fix typings --------- Co-authored-by: Reid Barber <reid@reidbarber.com>

fix: react types backwards compat (#8099)

804cc82

* fix: keep more compatible React component types * revert v3 explicit change * add react-aria components as well * fix remaining

chore: Refactor codemods (#8056)

0548d30

* initial codemod refactor * fix TableView * fix selectionStyle * fix key to id * clean up comments * lint * clean up * update README.md * improve transform function/option names * update action group comments

fix(s2): Update dialog sizes (#8202)

e8bf328

Merge remote-tracking branch 'origin/main' into rac-tree-dnd-follow-up

4a371ec

reidbarber closed this May 13, 2025

reidbarber removed the release label May 13, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[WIP] fix: RAC Tree DnD follow-up #8152

[WIP] fix: RAC Tree DnD follow-up #8152

reidbarber commented Apr 28, 2025

rspbot commented Apr 28, 2025

rspbot commented Apr 28, 2025

rspbot commented Apr 28, 2025

reidbarber commented May 13, 2025

[WIP] fix: RAC Tree DnD follow-up #8152

[WIP] fix: RAC Tree DnD follow-up #8152

Conversation

reidbarber commented Apr 28, 2025

✅ Pull Request Checklist:

📝 Test Instructions:

🧢 Your Project:

rspbot commented Apr 28, 2025

rspbot commented Apr 28, 2025

rspbot commented Apr 28, 2025

react-aria-components

/react-aria-components:Select

/react-aria-components:SelectProps

@react-aria/select

/@react-aria/select:AriaSelectOptions

/@react-aria/select:AriaSelectProps

@react-aria/steplist

/@react-aria/steplist:AriaStepListProps

@react-spectrum/picker

/@react-spectrum/picker:Picker

/@react-spectrum/picker:SpectrumPickerProps

@react-spectrum/s2

/@react-spectrum/s2:Picker

/@react-spectrum/s2:PickerProps

@react-spectrum/steplist

/@react-spectrum/steplist:StepList

/@react-spectrum/steplist:SpectrumStepListProps

@react-stately/data

/@react-stately/data:TreeData

@react-stately/list

/@react-stately/list:SingleSelectListProps

@react-stately/select

/@react-stately/select:SelectProps

/@react-stately/select:SelectStateOptions

@react-stately/steplist

/@react-stately/steplist:StepListProps

reidbarber commented May 13, 2025