chore(Carousel): pass active index onActiveIndexChange (#16118)

* chore(Carousel): pass active index onActiveIndexChange * chore(Carousel): add changelog * chore(Carousel): add test
microsoft · Dec 2, 2020 · f4a9623 · f4a9623
1 parent bc3349b
commit f4a9623
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 1 deletion.
diff --git a/packages/fluentui/CHANGELOG.md b/packages/fluentui/CHANGELOG.md
@@ -59,6 +59,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Fix `Dropdown` to not break new lines for button trigger after listbox was introduced wrapping selected items @assuncaocharles ([#15898](https://github.com/microsoft/fluentui/pull/15898))
 - Fix `Input` content overlaping with `Icon` @assuncaocharles ([#16083](https://github.com/microsoft/fluentui/pull/16083))
 - Fix `variables` not being propagated in `Carousel` @assuncaocharles ([#16084](https://github.com/microsoft/fluentui/pull/16084))
+- Fix `Carousel` `onActiveIndexChange` to contain `activeIndex` @assuncaocharles ([#16118](https://github.com/microsoft/fluentui/pull/16118))
 
 ### Features
 - `Tree`: added `useTree` hook @yuanboxue-amber ([#15831](https://github.com/microsoft/fluentui/pull/15831))

diff --git a/packages/fluentui/react-northstar/src/components/Carousel/Carousel.tsx b/packages/fluentui/react-northstar/src/components/Carousel/Carousel.tsx
@@ -262,7 +262,7 @@ export const Carousel: ComponentWithAs<'div', CarouselProps> &
 
     actions.setIndexes(nextActiveIndex, lastActiveIndex);
 
-    _.invoke(props, 'onActiveIndexChange', e, props);
+    _.invoke(props, 'onActiveIndexChange', e, { ...props, activeIndex: index });
 
     if (focusItem) {
       focusItemAtIndex(nextActiveIndex);

diff --git a/packages/fluentui/react-northstar/test/specs/components/Carousel/Carousel-test.tsx b/packages/fluentui/react-northstar/test/specs/components/Carousel/Carousel-test.tsx
@@ -79,6 +79,19 @@ describe('Carousel', () => {
       expect(pagination.getDOMNode().textContent).toBe(`2 of ${items.length}`);
     });
 
+    it('should pass activeIndex onActiveIndexChange', () => {
+      const onActiveIndexChange = jest.fn();
+      const wrapper = renderCarousel({ onActiveIndexChange });
+      const paddleNext = getPaddleNextWrapper(wrapper);
+
+      paddleNext.simulate('click');
+
+      expect(onActiveIndexChange).toHaveBeenCalledWith(
+        expect.objectContaining({ type: 'click' }),
+        expect.objectContaining({ activeIndex: 1 }),
+      );
+    });
+
     it('should decrese at paddle previous press', () => {
       const wrapper = renderCarousel({ defaultActiveIndex: 3 });
       const paddlePrevious = getPaddlePreviousWrapper(wrapper);