WIP: SelectBox

[ktabors]

Closes RSP Component Milestones (view)

✅ 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:

RSP

[ktabors]

This is a branch of a branch. Creating a PR from original branch.

[ktabors]

Creating a new PR off of Dan's PR.

[rspbot]

Build successful! 🎉

• View the storybook
• View the storybook-19
• View the storybook-17
• View the storybook-16
• View the S2 storybook
• View the documentation

[rspbot]

## API Changes

react-aria-components

/react-aria-components:ListBoxSection

-ListBoxSection <T extends {}> {
-  aria-label?: string
-  children?: ReactNode | ({}) => ReactElement
-  className?: string
-  dependencies?: Array<any>
-  id?: Key
-  items?: Iterable<{}>
-  style?: CSSProperties
-  value?: {}
-}

/react-aria-components:MenuSection

-MenuSection <T extends {}> {
-  aria-label?: string
-  children?: ReactNode | ({}) => ReactElement
-  className?: string
-  defaultSelectedKeys?: 'all' | Iterable<Key>
-  dependencies?: Array<any>
-  disabledKeys?: Iterable<Key>
-  disallowEmptySelection?: boolean
-  id?: Key
-  items?: Iterable<{}>
-  onSelectionChange?: (Selection) => void
-  selectedKeys?: 'all' | Iterable<Key>
-  selectionMode?: SelectionMode
-  style?: CSSProperties
-  value?: {}
-}

/react-aria-components:ListBoxSectionProps

-ListBoxSectionProps <T> {
-  aria-label?: string
-  children?: ReactNode | (T) => ReactElement
-  className?: string
-  dependencies?: Array<any>
-  id?: Key
-  items?: Iterable<T>
-  style?: CSSProperties
-  value?: T
-}

/react-aria-components:MenuSectionProps

-MenuSectionProps <T> {
-  aria-label?: string
-  children?: ReactNode | (T) => ReactElement
-  className?: string
-  defaultSelectedKeys?: 'all' | Iterable<Key>
-  dependencies?: Array<any>
-  disabledKeys?: Iterable<Key>
-  disallowEmptySelection?: boolean
-  id?: Key
-  items?: Iterable<T>
-  onSelectionChange?: (Selection) => void
-  selectedKeys?: 'all' | Iterable<Key>
-  selectionMode?: SelectionMode
-  style?: CSSProperties
-  value?: T
-}

---

@react-aria/menu

/@react-aria/menu:AriaMenuItemProps

 AriaMenuItemProps {
   aria-controls?: string
   aria-expanded?: boolean | 'true' | 'false'
   aria-haspopup?: 'menu' | 'dialog'
   aria-label?: string
   closeOnSelect?: boolean = true
   id?: string
   isVirtualized?: boolean
   key?: Key
   onBlur?: (FocusEvent<Target>) => void
   onFocus?: (FocusEvent<Target>) => void
   onFocusChange?: (boolean) => void
   onHoverChange?: (boolean) => void
   onHoverEnd?: (HoverEvent) => void
   onHoverStart?: (HoverEvent) => void
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
   onPress?: (PressEvent) => void
   onPressChange?: (boolean) => void
   onPressEnd?: (PressEvent) => void
   onPressStart?: (PressEvent) => void
   onPressUp?: (PressEvent) => void
-  selectionManager?: SelectionManager
 }

---

@react-spectrum/s2

/@react-spectrum/s2:MenuSection

 MenuSection <T extends {}> {
   aria-label?: string
   children?: ReactNode | ({}) => ReactElement
   className?: string
-  defaultSelectedKeys?: 'all' | Iterable<Key>
   dependencies?: Array<any>
-  disabledKeys?: Iterable<Key>
-  disallowEmptySelection?: boolean
   id?: Key
   items?: Iterable<{}>
-  onSelectionChange?: (Selection) => void
-  selectedKeys?: 'all' | Iterable<Key>
-  selectionMode?: SelectionMode
   style?: CSSProperties
   value?: {}
 }

/@react-spectrum/s2:MenuSectionProps

 MenuSectionProps <T extends {}> {
   aria-label?: string
   children?: ReactNode | ({}) => ReactElement
   className?: string
-  defaultSelectedKeys?: 'all' | Iterable<Key>
   dependencies?: Array<any>
-  disabledKeys?: Iterable<Key>
-  disallowEmptySelection?: boolean
   id?: Key
   items?: Iterable<{}>
-  onSelectionChange?: (Selection) => void
-  selectedKeys?: 'all' | Iterable<Key>
-  selectionMode?: SelectionMode
   style?: CSSProperties
   value?: {}
 }

/@react-spectrum/s2:SelectBox

+SelectBox {
+  UNSAFE_className?: string
+  UNSAFE_style?: CSSProperties
+  children: ReactNode | (SelectBoxProps) => ReactNode
+  download?: boolean | string
+  href?: Href
+  hrefLang?: string
+  id?: Key
+  isDisabled?: boolean
+  onAction?: () => void
+  ping?: string
+  referrerPolicy?: HTMLAttributeReferrerPolicy
+  rel?: string
+  routerOptions?: RouterOptions
+  styles?: StylesProp
+  target?: HTMLAttributeAnchorTarget
+  textValue?: string
+  value: string
+}

/@react-spectrum/s2:SelectBoxGroup

+SelectBoxGroup <T extends {}> {
+  UNSAFE_className?: string
+  UNSAFE_style?: CSSProperties
+  aria-describedby?: string
+  aria-details?: string
+  aria-label?: string
+  aria-labelledby?: string
+  children?: ReactNode
+  defaultSelectedKeys?: 'all' | Iterable<Key>
+  defaultValue?: Array<string>
+  dependencies?: Array<any>
+  disabledBehavior?: DisabledBehavior
+  disabledKeys?: Iterable<Key>
+  disallowEmptySelection?: boolean
+  id?: string
+  isDisabled?: boolean
+  isRequired?: boolean
+  items?: Iterable<T>
+  label?: ReactNode
+  onAction?: (Key) => void
+  onChange?: (Array<string>) => void
+  onScroll?: (UIEvent<Element>) => void
+  orientation?: Orientation
+  renderEmptyState?: (GridListRenderProps) => ReactNode
+  selectedKeys?: 'all' | Iterable<Key>
+  selectionMode?: SelectionMode
+  size?: 'XS' | 'S' | 'M' | 'L' | 'XL'
+  slot?: string | null
+  value?: Array<string>
+}

---

@react-stately/selection

/@react-stately/selection:SelectionManager

 SelectionManager {
   canSelectItem: (Key) => void
   childFocusStrategy: FocusStrategy
   clearSelection: () => void
-  collection: Collection<Node<unknown>>
   constructor: (Collection<Node<unknown>>, MultipleSelectionState, SelectionManagerOptions) => void
   disabledBehavior: DisabledBehavior
   disabledKeys: Set<Key>
   disallowEmptySelection: boolean
   firstSelectedKey: Key | null
   focusedKey: Key
   getItemProps: (Key) => void
   isDisabled: (Key) => void
   isEmpty: boolean
   isFocused: boolean
   isLink: (Key) => void
   isSelectAll: boolean
   isSelected: (Key) => void
   isSelectionEqual: (Set<Key>) => void
   lastSelectedKey: Key | null
   rawSelection: Selection
   replaceSelection: (Key) => void
   select: (Key, PressEvent | LongPressEvent | PointerEvent) => void
   selectAll: () => void
   selectedKeys: Set<Key>
   selectionBehavior: SelectionBehavior
   selectionMode: SelectionMode
   setFocused: (boolean) => void
   setFocusedKey: (Key | null, FocusStrategy) => void
   setSelectedKeys: (Iterable<Key>) => void
   setSelectionBehavior: (SelectionBehavior) => void
   toggleSelectAll: () => void
   toggleSelection: (Key) => void
 }

---

[yihuiliao]

closing in favor of #8541