For <Carousel>, set direction on event

docs/examples/CarouselControlled.js

@@ -6,11 +6,11 @@ const ControlledCarousel = React.createClass({
     };
   },
 
-  handleSelect(selectedIndex, e, selectedDirection) {
-    alert('selected=' + selectedIndex + ', direction=' + selectedDirection);
+  handleSelect(selectedIndex, e) {
+    alert('selected=' + selectedIndex + ', direction=' + e.direction);
     this.setState({
       index: selectedIndex,
-      direction: selectedDirection
+      direction: e.direction
     });
   },
 

src/Carousel.js

@@ -282,8 +282,21 @@ let Carousel = React.createClass({
       let previousActiveIndex = this.getActiveIndex();
       direction = direction || this.getDirection(previousActiveIndex, index);
 
-      if (this.props.onSelect) {
-        this.props.onSelect(index, e, direction);
+      const { onSelect } = this.props;
+
+      if (onSelect) {
+        if (onSelect.length > 1) {
+          // React SyntheticEvents are pooled, so we need to remove this event
+          // from the pool to add a custom property. To avoid unnecessarily
+          // removing objects from the pool, only do this when the listener
+          // actually wants the event.
+          e.persist();
+          e.direction = direction;
+
+          onSelect(index, e);
+        } else {
+          onSelect(index);
+        }
       }
 
       if (this.props.activeIndex == null && index !== previousActiveIndex) {

test/CarouselSpec.js

@@ -50,8 +50,36 @@ describe('Carousel', () => {
   });
 
   it('Should call onSelect when indicator selected', (done) => {
-    function onSelect(index) {
-      assert.equal(index, 0);
+    function onSelect(index, ...args) {
+      expect(index).to.equal(0);
+
+      // By using rest arguments here, we can avoid triggering the logic to
+      // persist and decorate the event.
+      const [event] = args;
+      expect(event).to.not.exist;
+
+      done();
+    }
+
+    let instance = ReactTestUtils.renderIntoDocument(
+      <Carousel activeIndex={1} onSelect={onSelect}>
+        <Carousel.Item ref="item1">Item 1 content</Carousel.Item>
+        <Carousel.Item ref="item2">Item 2 content</Carousel.Item>
+      </Carousel>
+    );
+
+    ReactTestUtils.Simulate.click(
+      ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'carousel-indicators')
+        .getElementsByTagName('li')[0]
+    );
+  });
+
+  it('Should call onSelect with direction', (done) => {
+    function onSelect(index, event) {
+      expect(index).to.equal(0);
+      expect(event.direction).to.equal('prev');
+      expect(event.isPersistent()).to.be.true;
+
       done();
     }