Support onAction and isDisabled on item elements

[devongovett]

Relates to #5058 #5459

This adds support for the onAction and isDisabled props directly on collection items in addition to the existing collection-level onAction and disabledKeys. In some cases it can be easier to set these props at an item level, for example with static collections (e.g. common in menus). If both are provided, an item is disabled if either the isDisabled prop is set or its key is in disabledKeys, and both onAction handlers are called.

Note that while this is implemented in the hooks, these props are only in the TS definitions for RAC and not RSP (or the older stately collections). Since RSP uses a single <Item> component across all components, we can't easily add props to some components but not others. In RAC we separated these out into separate components so this is possible.

[rspbot]

Build successful! 🎉

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

[devongovett]

yeah it shouldn't break because disabledKeys is still there, but just won't support the new feature until migrating.

what about isSelected?

[snowystinger]

what about isSelected?

did we want to support the same kind of thing? is that possible? I have a vague feeling it wasn't possible, but can't recall why

[devongovett]

you mean isSelected on individual items? I think that's not possible because multiple items can be selected at once, so onSelectionChange really needs to be on the root level. Makes sense to keep selectedKeys at the same level.

[rspbot]

Build successful! 🎉

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

[rspbot]

Build successful! 🎉

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

[rspbot]

## API Changes

unknown top level export { type: 'any' } unknown top level export { type: 'any' } unknown top level export { type: 'any' } unknown top level export { type: 'any' } unknown top level export { type: 'any', access: 'private' } unknown top level export { type: 'any', access: 'private' } unknown top level export { type: 'any' } unknown top level export { type: 'any' } unknown top level export { type: 'any' } unknown top level export { type: 'any' } unknown top level export { type: 'any' } unknown top level export { type: 'any' } unknown top level export { type: 'identifier', name: 'Column' } unknown top level export { type: 'identifier', name: 'Column' } unknown type { type: 'link' } unknown type { type: 'link' } unknown type { type: 'link' } unknown type { type: 'link' } unknown type { type: 'link' } unknown type { type: 'link' } unknown top level export { type: 'any' } unknown top level export { type: 'any' } unknown top level export { type: 'any' } unknown top level export { type: 'any' } unknown top level export { type: 'any' } unknown top level export { type: 'any' }

@react-aria/grid

GridKeyboardDelegateOptions

 GridKeyboardDelegateOptions<C, T> {
   collator?: Intl.Collator
   collection: C
   direction: Direction
+  disabledBehavior?: DisabledBehavior
   disabledKeys: Set<Key>
   focusMode?: 'row' | 'cell'
   layout?: Layout<Node<T>>
   ref?: RefObject<HTMLElement>
 

it changed:

• GridKeyboardDelegate

---