Add onKeyDown prop to ListBoxItem for custom keyboard handling

Author: hasegawa-101

packages/react-aria-components/docs/ListBox.mdx

@@ -409,6 +409,46 @@ By default, link items in a ListBox are not selectable, and only perform navigat
 
 The `<ListBoxItem>` component works with frameworks and client side routers like [Next.js](https://nextjs.org/) and [React Router](https://reactrouter.com/en/main). As with other React Aria components that support links, this works via the <TypeLink links={docs.links} type={docs.exports.RouterProvider} /> component at the root of your app. See the [client side routing guide](routing.html) to learn how to set this up.
 
+## Custom keyboard handling
+
+ListBox supports custom keyboard event handling on individual items via the `onKeyDown` prop on `ListBoxItem`. This enables you to implement additional keyboard interactions beyond the built-in selection and navigation behavior, such as deleting items with the <Keyboard>Backspace</Keyboard> or <Keyboard>Delete</Keyboard> keys.
+
+```tsx example
+import {useListData} from 'react-stately';
+
+function Example() {
+  let list = useListData({
+    initialItems: [
+      {id: 1, name: 'Item 1'},
+      {id: 2, name: 'Item 2'},
+      {id: 3, name: 'Item 3'},
+      {id: 4, name: 'Item 4'},
+      {id: 5, name: 'Item 5'}
+    ]
+  });
+
+  let handleKeyDown = (key: React.Key) => (e: React.KeyboardEvent) => {
+    if (e.key === 'Delete' || e.key === 'Backspace') {
+      e.preventDefault();
+      list.remove(key);
+    }
+  };
+
+  return (
+    <ListBox
+      aria-label="ListBox with delete support"
+      selectionMode="single"
+      items={list.items}>
+      {item => (
+        <ListBoxItem onKeyDown={handleKeyDown(item.id)}>
+          {item.name}
+        </ListBoxItem>
+      )}
+    </ListBox>
+  );
+}
+```
+
 ## Sections
 
 ListBox supports sections in order to group options. Sections can be used by wrapping groups of items in a `ListBoxSection` element. A `<Header>` element may also be included to label the section.

packages/react-aria-components/src/ListBox.tsx

@@ -356,7 +356,9 @@ export interface ListBoxItemProps<T = object> extends RenderProps<ListBoxItemRen
    * Handler that is called when a user performs an action on the item. The exact user event depends on
    * the collection's `selectionBehavior` prop and the interaction modality.
    */
-  onAction?: () => void
+  onAction?: () => void,
+  /** Handler that is called when a key is pressed on the item. */
+  onKeyDown?: (e: React.KeyboardEvent) => void
 }
 
 /**
@@ -379,6 +381,8 @@ export const ListBoxItem = /*#__PURE__*/ createLeafComponent(ItemNode, function
     onHoverEnd: item.props.onHoverEnd
   });
 
+  let keyDownProps = props.onKeyDown ? {onKeyDown: props.onKeyDown} : undefined;
+
   let draggableItem: DraggableItemResult | null = null;
   if (dragState && dragAndDropHooks) {
     draggableItem = dragAndDropHooks.useDraggableItem!({key: item.key, hasAction: states.hasAction}, dragState);
@@ -422,7 +426,7 @@ export const ListBoxItem = /*#__PURE__*/ createLeafComponent(ItemNode, function
 
   return (
     <ElementType
-      {...mergeProps(DOMProps, renderProps, optionProps, hoverProps, draggableItem?.dragProps, droppableItem?.dropProps)}
+      {...mergeProps(DOMProps, renderProps, optionProps, hoverProps, keyDownProps, draggableItem?.dragProps, droppableItem?.dropProps)}
       ref={ref}
       data-allows-dragging={!!dragState || undefined}
       data-selected={states.isSelected || undefined}

packages/react-aria-components/stories/ListBox.stories.tsx

@@ -12,6 +12,8 @@
 
 import {action} from '@storybook/addon-actions';
 import {Collection, DropIndicator, GridLayout, Header, ListBox, ListBoxItem, ListBoxProps, ListBoxSection, ListLayout, Separator, Text, useDragAndDrop, Virtualizer, WaterfallLayout} from 'react-aria-components';
+import {Key} from '@react-types/shared';
+import {Keyboard} from '@react-spectrum/text';
 import {ListBoxLoadMoreItem} from '../';
 import {LoadingSpinner, MyListBoxItem} from './utils';
 import {Meta, StoryFn, StoryObj} from '@storybook/react';
@@ -808,3 +810,44 @@ export let VirtualizedListBoxDndOnAction: ListBoxStory = () => {
   );
 };
 
+export const ListBoxWithKeyboardDelete: ListBoxStory = () => {
+  let initialItems = [
+    {id: 1, name: 'Item 1'},
+    {id: 2, name: 'Item 2'},
+    {id: 3, name: 'Item 3'},
+    {id: 4, name: 'Item 4'},
+    {id: 5, name: 'Item 5'}
+  ];
+
+  let list = useListData({
+    initialItems
+  });
+
+  let handleKeyDown = (key: Key) => (e: React.KeyboardEvent) => {
+    if (e.key === 'Delete' || e.key === 'Backspace') {
+      e.preventDefault();
+      list.remove(key);
+      action('onDelete')(key);
+    }
+  };
+
+  return (
+    <div style={{display: 'flex', flexDirection: 'column',alignItems: 'center', gap: 12}}>
+      <div style={{padding: 12, background: '#f0f0f0', borderRadius: 4}}>
+        Press <Keyboard>Delete</Keyboard> or <Keyboard>Backspace</Keyboard> to remove the focused item.
+      </div>
+      <ListBox
+        className={styles.menu}
+        aria-label="ListBox with delete support"
+        selectionMode="single"
+        items={list.items}>
+        {item => (
+          <MyListBoxItem onKeyDown={handleKeyDown(item.id)}>
+            {item.name}
+          </MyListBoxItem>
+        )}
+      </ListBox>
+    </div>
+  );
+};
+