Quantity Selector Component

Build a React quantity selector component for an e-commerce shopping cart. The component should allow users to adjust product quantities using keyboard navigation and validation.

Requirements

Component Behavior

Create a QuantitySelector component with the following features:

1. Numeric Input: Accept numeric values representing product quantities
2. Range Constraints: Minimum quantity of 1, maximum quantity of 99
3. Step Control: Allow increment/decrement by 1 unit
4. Keyboard Support:
   • Arrow Up key increases the quantity by 1
   • Arrow Down key decreases the quantity by 1
   • Enter key confirms the quantity and triggers a callback
5. Validation: Ensure quantities stay within the valid range (1-99)

Component Interface

The component should accept these props:

• value: Current quantity (controlled component)
• onChange: Callback function called when quantity changes
• onConfirm: Callback function called when user presses Enter key

Test Cases

• When the user presses Arrow Up on quantity 5, it increases to 6 @test
• When the user presses Arrow Down on quantity 5, it decreases to 4 @test
• When the user presses Enter on quantity 7, the onConfirm callback is called with value 7 @test
• When at maximum quantity (99) and user presses Arrow Up, quantity remains at 99 @test

Implementation

@generates

API

export interface QuantitySelectorProps {
  value: number;
  onChange: (value: number | null) => void;
  onConfirm: (value: number) => void;
}

export function QuantitySelector(props: QuantitySelectorProps): JSX.Element;

Dependencies { .dependencies }

@rc-component/input-number { .dependency }

Provides numeric input functionality with step controls and keyboard navigation support.

react { .dependency }

React library for building the component.