fix(NumberInput): pass down event change value (#8243)

* fix: pass value to onChange handler

* chore: add example to story

* Update packages/react/src/components/NumberInput/NumberInput-story.js

Co-authored-by: emyarod <emyarod@users.noreply.github.com>

* Update packages/react/src/components/NumberInput/NumberInput-story.js

Co-authored-by: emyarod <emyarod@users.noreply.github.com>

* fix: pass value without breaking change

* fix: use num input props for story

* fix: add props back to numinput

* chore: update num test

* Update packages/react/src/components/NumberInput/NumberInput-story.js

Co-authored-by: emyarod <emyarod@users.noreply.github.com>

* fix: return same data for events

* chore: update num input test

* chore: remove duplicate prop

* fix: revert story changes

Co-authored-by: emyarod <emyarod@users.noreply.github.com>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

Author: 3 people

packages/react/src/components/NumberInput/NumberInput-test.js

@@ -411,9 +411,10 @@ describe('NumberInput', () => {
       });
 
       it('should invoke onClick when up arrow is clicked', () => {
+        wrapper.setProps({ value: 1 });
         upArrow.simulate('click');
         expect(onClick).toBeCalled();
-        expect(onClick).toHaveBeenCalledWith(expect.anything(), 'up');
+        expect(onClick).toHaveBeenCalledWith(expect.anything(), 'up', 2);
       });
 
       it('should only increase the value on up arrow click if value is less than max', () => {
@@ -466,13 +467,16 @@ describe('NumberInput', () => {
         downArrow.simulate('click');
         expect(onClick).toBeCalled();
         expect(onChange).toBeCalled();
-        expect(onClick).toHaveBeenCalledWith(expect.anything(), 'down');
+        expect(onClick).toHaveBeenCalledWith(expect.anything(), 'down', 0);
       });
 
       it('should invoke onChange when numberInput is changed', () => {
         input.simulate('change');
         expect(onChange).toBeCalled();
-        expect(onChange).toHaveBeenCalledWith(expect.anything());
+        expect(onChange).toHaveBeenCalledWith(
+          expect.anything(),
+          expect.anything()
+        );
       });
     });
   });

packages/react/src/components/NumberInput/NumberInput.js

@@ -249,16 +249,18 @@ class NumberInput extends Component {
     if (!disabled) {
       evt.persist();
       evt.imaginaryTarget = this._inputRef;
+      const prevValue = this.state.value;
       const value = evt.target.value;
+      const direction = prevValue < value ? 'up' : 'down';
       this.setState(
         {
           value,
         },
         () => {
           if (useControlledStateWithValue) {
-            onChange(evt, { value });
+            onChange(evt, { value, direction });
           } else if (onChange) {
-            onChange(evt);
+            onChange(evt, { value, direction });
           }
         }
       );
@@ -286,12 +288,14 @@ class NumberInput extends Component {
           value,
         },
         () => {
+          //TO-DO v11: update these events to return the same things --> evt, {value, direction}
           if (useControlledStateWithValue) {
             onClick && onClick(evt, { value, direction });
             onChange && onChange(evt, { value, direction });
           } else {
-            onClick && onClick(evt, direction);
-            onChange && onChange(evt, direction);
+            // value added as a 3rd argument rather than in same obj so it doesn't break in v10
+            onClick && onClick(evt, direction, value);
+            onChange && onChange(evt, direction, value);
           }
         }
       );