add back Stepperfield prop desructuring, fix onChange prop handling a…

…nd onStepChange type description

packages/react/src/primitives/StepperField/StepperField.tsx

@@ -25,24 +25,27 @@ const StepperFieldPrimitive: Primitive<StepperFieldProps, 'input'> = (
 ) => {
   const {
     className,
+    // destructure to prevent `defaultValue` from being passed to underlying `Input` via `_rest`
+    defaultValue,
     descriptiveText,
     errorMessage,
     hasError = false,
     id,
+    inputStyles,
     isDisabled,
     isReadOnly,
     isRequired,
     increaseButtonLabel = ComponentText.StepperField.increaseButtonLabel,
     decreaseButtonLabel = ComponentText.StepperField.decreaseButtonLabel,
     label,
     labelHidden = false,
+    // destructure to prevent `onStepChange` from being passed to underlying `Input` via `_rest`
+    onStepChange,
     size,
-    variation,
     testId,
-    inputStyles,
-
     // this is only required in useStepper hook but deconstruct here to remove its existence in rest
     value: controlledValue,
+    variation,
     ..._rest
   } = props;
 
@@ -64,7 +67,7 @@ const StepperFieldPrimitive: Primitive<StepperFieldProps, 'input'> = (
     setInputValue,
     shouldDisableDecreaseButton,
     shouldDisableIncreaseButton,
-  } = useStepper(props);
+  } = useStepper({ ...props, defaultValue, onStepChange });
 
   React.useEffect(() => {
     const isControlled = controlledValue !== undefined;

packages/react/src/primitives/StepperField/__tests__/useStepper.test.tsx

@@ -103,4 +103,20 @@ describe('useStepper: ', () => {
     );
     expect(result.current.value).toEqual(5);
   });
+
+  it('should call the onChange prop when provided', () => {
+    const onChange = jest.fn();
+    const { result } = renderHook(() =>
+      useStepper({
+        label,
+        value: 10,
+        onChange,
+      })
+    );
+    const mockMouseEvent = {
+      target: {},
+    } as React.ChangeEvent<HTMLInputElement>;
+    act(() => result.current.handleOnChange(mockMouseEvent));
+    expect(onChange).toBeCalledTimes(1);
+  });
 });

packages/react/src/primitives/StepperField/useStepper.ts

@@ -57,10 +57,11 @@ export const useStepper = ({
   min = Number.MIN_SAFE_INTEGER,
   isDisabled,
   isReadOnly,
+  onChange,
   onDecrease,
   onIncrease,
   onStepChange,
-}: StepperFieldProps): UseStepper => {
+}: StepperFieldProps & { onChange?: ChangeHandler }): UseStepper => {
   const isControlled = controlledValue !== undefined;
 
   // Make sure max value is greater than or equal to min value
@@ -90,9 +91,16 @@ export const useStepper = ({
   const [inputValue, setInputValue] = React.useState<InputValue>(value);
 
   const handleOnChange: React.ChangeEventHandler<HTMLInputElement> =
-    React.useCallback((event) => {
-      setInputValue(event.target.value);
-    }, []);
+    React.useCallback(
+      (event) => {
+        setInputValue(event.target.value);
+
+        if (typeof onChange === 'function') {
+          onChange(event);
+        }
+      },
+      [onChange]
+    );
 
   const handleOnBlur: React.FocusEventHandler<HTMLInputElement> =
     React.useCallback(

packages/react/src/primitives/types/stepperField.ts

@@ -57,9 +57,7 @@ export interface StepperFieldProps extends TextFieldProps {
 
   /**
    * @description
-   * TODO:
-   * Extends StepperField props from Omit<TextFieldProps, 'onChange'>, after removing [key: string]: any from the base type
-   * and rename onStepChange to onChange
+   * Event handler called with the current step value when it is updated
    */
   onStepChange?: (value: number) => void;