react-spectrum TS Strict Stately List

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:

Jun 19 '24 06:06 snowystinger

Build successful! 🎉

Jun 21 '24 06:06 rspbot

Build successful! 🎉

Jun 30 '24 00:06 rspbot

Build successful! 🎉

Jul 22 '24 04:07 rspbot

Build successful! 🎉

Jul 25 '24 23:07 rspbot

Build successful! 🎉

Jul 29 '24 21:07 rspbot

Build successful! 🎉

Aug 03 '24 08:08 rspbot

Build successful! 🎉

Aug 05 '24 01:08 rspbot

Build successful! 🎉

Aug 05 '24 01:08 rspbot

Build successful! 🎉

Aug 08 '24 00:08 rspbot

Build successful! 🎉

Aug 08 '24 01:08 rspbot

Build successful! 🎉

Aug 08 '24 02:08 rspbot

Build successful! 🎉

Aug 13 '24 22:08 rspbot

Build successful! 🎉

Aug 14 '24 07:08 rspbot

Build successful! 🎉

Aug 16 '24 22:08 rspbot

Build successful! 🎉

Aug 19 '24 00:08 rspbot

Build successful! 🎉

Aug 21 '24 06:08 rspbot

## API Changes

@react-aria/tabs

useTabPanel

changed by:

TabListState
MultipleSelectionState

 useTabPanel <T> {
   props: AriaTabPanelProps
-  state: TabListState<T>
+  state: TabListState<T> | null
   ref: RefObject<Element | null>
   returnVal: undefined
 }

@react-spectrum/tabs

TabPanels

-TabPanels <T> {
+TabPanels <T extends {}> {
   UNSAFE_className?: string
   UNSAFE_style?: CSSProperties
   alignSelf?: Responsive<'auto' | 'normal' | 'start' | 'end' | 'center' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'stretch'>
   bottom?: Responsive<DimensionValue>
-  children: CollectionChildren<T>
+  children: CollectionChildren<{}>
   end?: Responsive<DimensionValue>
   flex?: Responsive<string | number | boolean>
   flexBasis?: Responsive<number | string>
   flexGrow?: 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
   isHidden?: Responsive<boolean>
   justifySelf?: Responsive<'auto' | 'normal' | 'start' | 'end' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'center' | 'left' | 'right' | 'stretch'>
   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>
   order?: Responsive<number>
   position?: Responsive<'static' | 'relative' | 'absolute' | 'fixed' | 'sticky'>
   right?: Responsive<DimensionValue>
   start?: Responsive<DimensionValue>
   top?: Responsive<DimensionValue>
   width?: Responsive<DimensionValue>
   zIndex?: Responsive<number>
 }

@react-stately/combobox

ComboBoxState

changed by:

MultipleSelectionState

 ComboBoxState <T> {
   close: () => void
   collection: Collection<Node<T>>
   commit: () => void
   commitValidation: () => void
   disabledKeys: Set<Key>
   displayValidation: ValidationResult
-  focusStrategy: FocusStrategy
+  focusStrategy: FocusStrategy | null
   inputValue: string
   isFocused: boolean
   isOpen: boolean
   open: (FocusStrategy | null, MenuTriggerAction) => void
   realtimeValidation: ValidationResult
   resetValidation: () => void
   revert: () => void
   selectedItem: Node<T> | null
-  selectedKey: Key
+  selectedKey: Key | null
   selectionManager: SelectionManager
   setFocused: (boolean) => void
   setInputValue: (string) => void
   setOpen: (boolean) => void
   toggle: (FocusStrategy | null, MenuTriggerAction) => void
   updateValidation: (ValidationResult) => void
 }

it changed

useSearchAutocomplete
useComboBox
useComboBoxState

@react-stately/list

SingleSelectListState

changed by:

MultipleSelectionState

 SingleSelectListState <T> {
   collection: Collection<Node<T>>
   disabledKeys: Set<Key>
   selectedItem: Node<T> | null
-  selectedKey: Key
+  selectedKey: Key | null
   selectionManager: SelectionManager
   setSelectedKey: (Key | null) => void
 }

it changed

useSingleSelectListState

@react-stately/select

SelectState

changed by:

MultipleSelectionState

 SelectState <T> {
   close: () => void
   collection: Collection<Node<T>>
   commitValidation: () => void
   disabledKeys: Set<Key>
   displayValidation: ValidationResult
-  focusStrategy: FocusStrategy
+  focusStrategy: FocusStrategy | null
   isFocused: boolean
   isOpen: boolean
   open: (FocusStrategy | null) => void
   realtimeValidation: ValidationResult
   resetValidation: () => void
   selectedItem: Node<T> | null
-  selectedKey: Key
+  selectedKey: Key | null
   selectionManager: SelectionManager
   setFocused: (boolean) => void
   setOpen: (boolean) => void
   setSelectedKey: (Key | null) => void
   updateValidation: (ValidationResult) => void
 }

it changed

useSelect
useHiddenSelect
HiddenSelect
HiddenSelectProps
useSelectState

@react-stately/selection

FocusState

 FocusState {
   childFocusStrategy: FocusStrategy
   focusedKey: Key
   isFocused: boolean
   setFocused: (boolean) => void
-  setFocusedKey: (Key, FocusStrategy) => void
+  setFocusedKey: (Key | null, FocusStrategy) => void
 }

SingleSelectionState

 SingleSelectionState {
   childFocusStrategy: FocusStrategy
   disallowEmptySelection?: boolean
   focusedKey: Key
   isFocused: boolean
   selectedKey: Key
   setFocused: (boolean) => void
-  setFocusedKey: (Key, FocusStrategy) => void
+  setFocusedKey: (Key | null, FocusStrategy) => void
   setSelectedKey: (Key | null) => void
 }

MultipleSelectionState

 MultipleSelectionState {
   childFocusStrategy: FocusStrategy
   disabledBehavior: DisabledBehavior
   disabledKeys: Set<Key>
   disallowEmptySelection: boolean
   focusedKey: Key
   isFocused: boolean
   selectedKeys: Selection
   selectionBehavior: SelectionBehavior
   selectionMode: SelectionMode
   setFocused: (boolean) => void
-  setFocusedKey: (Key, FocusStrategy) => void
+  setFocusedKey: (Key | null, FocusStrategy) => void
   setSelectedKeys: (Selection) => void
   setSelectionBehavior: (SelectionBehavior) => void
 }

it changed

useMultipleSelectionState
SelectionManager
ComboBoxState
useSearchAutocomplete
useComboBox
useComboBoxState
GridState
useGrid
useGridRow
useGridCell
useGridSelectionCheckbox
useGridState
ListState
ColorSwatchPickerRenderProps
ColorSwatchPicker
ColorSwatchPickerProps
GridListRenderProps
GridList
GridListProps
ListBoxRenderProps
ListBox
ListBoxProps
TagListRenderProps
TagList
TagListProps
useActionGroup
useActionGroupItem
useGridList
useGridListItem
useGridListSelectionCheckbox
useListBox
useOption
getItemId
useTag
useTagGroup
ListBoxBase
useListState
SingleSelectListState
useSingleSelectListState
SelectState
useSelect
useHiddenSelect
HiddenSelect
HiddenSelectProps
useSelectState
StepListState
useStepList
useStepListItem
useStepListState
TableState
TableRenderProps
Table
TableProps
useTable
useTableColumnHeader
useTableRow
useTableHeaderRow
useTableCell
useTableSelectionCheckbox
useTableSelectAllCheckbox
TableColumnResizeState
useTableColumnResize
useTableColumnResizeState
useTableColumnResizeState
useTableState
TreeGridState
useTable
useTableRow
UNSTABLE_useTreeGridState
TabListState
TabListRenderProps
TabList
TabListProps
TabPanelRenderProps
TabPanel
TabPanelProps
useTab
useTabPanel
useTabList
useTabListState
TreeState
TreeRenderProps
UNSTABLE_Tree
TreeProps
useTreeState
useAccordionItem
useAccordion
useGridListItem
useMenu
useMenuItem
useTreeGridList
useTreeGridListItem
useTreeState

MultipleSelectionManager

 MultipleSelectionManager {
   canSelectItem: (Key) => boolean
   childFocusStrategy: FocusStrategy
   clearSelection: () => void
   disabledBehavior: DisabledBehavior
   disabledKeys: Set<Key>
   disallowEmptySelection?: boolean
   extendSelection: (Key) => void
   firstSelectedKey: Key | null
   focusedKey: Key
   getItemProps: (Key) => any
   isDisabled: (Key) => boolean
   isEmpty: boolean
   isFocused: boolean
   isLink: (Key) => boolean
   isSelectAll: boolean
   isSelected: (Key) => boolean
   isSelectionEqual: (Set<Key>) => boolean
   lastSelectedKey: Key | null
   replaceSelection: (Key) => void
   select: (Key, PressEvent | LongPressEvent | PointerEvent) => void
   selectAll: () => void
   selectedKeys: Set<Key>
   selectionBehavior: SelectionBehavior
   selectionMode: SelectionMode
   setFocused: (boolean) => void
-  setFocusedKey: (Key, FocusStrategy) => void
+  setFocusedKey: (Key | null, FocusStrategy) => void
   setSelectedKeys: (Iterable<Key>) => void
   setSelectionBehavior: (SelectionBehavior) => void
   toggleSelectAll: () => void
   toggleSelection: (Key) => void

it changed

HighlightSelectionDescriptionProps
useHighlightSelectionDescription
AriaSelectableCollectionOptions
useSelectableCollection
AriaSelectableListOptions
useSelectableList
SelectableItemOptions
useSelectableItem
AriaTypeSelectOptions
useTypeSelect
DraggableCollectionStateOptions
useDraggableCollectionState
DraggableCollectionState
useDraggableItem
useDraggableCollection
useDraggableCollectionState
DroppableCollectionStateOptions
useDroppableCollectionState
DroppableCollectionState
useDroppableCollection
useDroppableItem
useDropIndicator
useDroppableCollectionState

@react-stately/steplist

StepListState

changed by:

MultipleSelectionState

 StepListState <T> {
   collection: Collection<Node<T>>
   disabledKeys: Set<Key>
   isCompleted: (Key) => boolean
   isSelectable: (Key) => boolean
   lastCompletedStep?: Key
   selectedItem: Node<T> | null
-  selectedKey: Key
+  selectedKey: Key | null
   selectionManager: SelectionManager
   setLastCompletedStep: (Key) => void
   setSelectedKey: (Key | null) => void
 }

it changed

useStepList
useStepListItem
useStepListState

@react-stately/tabs

TabListState

changed by:

MultipleSelectionState

 TabListState <T> {
   collection: Collection<Node<T>>
   disabledKeys: Set<Key>
   isDisabled: boolean
   selectedItem: Node<T> | null
-  selectedKey: Key
+  selectedKey: Key | null
   selectionManager: SelectionManager
   setSelectedKey: (Key | null) => void
 }

it changed

TabListRenderProps
TabList
TabListProps
TabPanelRenderProps
TabPanel
TabPanelProps
useTab
useTabPanel
useTabList
useTabListState

Aug 21 '24 06:08 rspbot