fix(content-switcher): call onChange with correct data with keyboard

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

@@ -156,4 +156,74 @@ describe('ContentSwitcher', () => {
       expect(secondChild.props().selected).toEqual(true);
     });
   });
+
+  describe('onChange', () => {
+    it('should call `onChange` with the newly selected switch data when using a keyboard', () => {
+      const onChange = jest.fn();
+      const wrapper = mount(
+        <ContentSwitcher onChange={onChange}>
+          <Switch name="first" text="first" />
+          <Switch name="second" text="second" />
+          <Switch name="third" text="third" />
+        </ContentSwitcher>
+      );
+
+      wrapper.find({ name: 'first' }).simulate('keydown', {
+        key: 'ArrowRight',
+      });
+      expect(onChange).toHaveBeenCalledTimes(1);
+      expect(onChange).toHaveBeenLastCalledWith({
+        index: 1,
+        name: 'second',
+        text: 'second',
+        key: 'ArrowRight',
+      });
+
+      wrapper.find({ name: 'second' }).simulate('keydown', {
+        key: 'ArrowRight',
+      });
+      expect(onChange).toHaveBeenLastCalledWith({
+        index: 2,
+        name: 'third',
+        text: 'third',
+        key: 'ArrowRight',
+      });
+
+      wrapper.find({ name: 'third' }).simulate('keydown', {
+        key: 'ArrowRight',
+      });
+      expect(onChange).toHaveBeenLastCalledWith({
+        index: 0,
+        name: 'first',
+        text: 'first',
+        key: 'ArrowRight',
+      });
+    });
+
+    it('should call `onChange` with the newly selected switch data when using a mouse', () => {
+      const onChange = jest.fn();
+      const wrapper = mount(
+        <ContentSwitcher onChange={onChange}>
+          <Switch name="first" text="first" />
+          <Switch name="second" text="second" />
+          <Switch name="third" text="third" />
+        </ContentSwitcher>
+      );
+
+      wrapper.find({ name: 'second' }).simulate('click');
+      expect(onChange).toHaveBeenCalledTimes(1);
+      expect(onChange).toHaveBeenLastCalledWith({
+        index: 1,
+        name: 'second',
+        text: 'second',
+      });
+
+      wrapper.find({ name: 'third' }).simulate('click');
+      expect(onChange).toHaveBeenLastCalledWith({
+        index: 2,
+        name: 'third',
+        text: 'third',
+      });
+    });
+  });
 });

packages/react/src/components/ContentSwitcher/ContentSwitcher.js

@@ -81,6 +81,7 @@ export default class ContentSwitcher extends React.Component {
 
     if (matches(data, [keys.ArrowRight, keys.ArrowLeft])) {
       const nextIndex = getNextIndex(key, index, this.props.children.length);
+      const children = React.Children.toArray(this.props.children);
       if (selectionMode === 'manual') {
         const switchRef = this._switchRefs[nextIndex];
         switchRef && switchRef.focus();
@@ -90,9 +91,15 @@ export default class ContentSwitcher extends React.Component {
             selectedIndex: nextIndex,
           },
           () => {
-            const switchRef = this._switchRefs[nextIndex];
+            const child = children[this.state.selectedIndex];
+            const switchRef = this._switchRefs[this.state.selectedIndex];
             switchRef && switchRef.focus();
-            this.props.onChange(data);
+            this.props.onChange({
+              ...data,
+              index: this.state.selectedIndex,
+              name: child.props.name,
+              text: child.props.text,
+            });
           }
         );
       }