Add onFocus and onBlur to CalendarDay

src/components/CalendarDay.jsx

@@ -24,6 +24,8 @@ const propTypes = forbidExtraProps({
   onDayClick: PropTypes.func,
   onDayMouseEnter: PropTypes.func,
   onDayMouseLeave: PropTypes.func,
+  onDayFocus: PropTypes.func,
+  onDayBlur: PropTypes.func,
   renderDayContents: PropTypes.func,
   ariaLabelFormat: PropTypes.string,
 
@@ -41,6 +43,8 @@ const defaultProps = {
   onDayClick() {},
   onDayMouseEnter() {},
   onDayMouseLeave() {},
+  onDayFocus() {},
+  onDayBlur() {},
   renderDayContents: null,
   ariaLabelFormat: 'dddd, LL',
 
@@ -83,6 +87,16 @@ class CalendarDay extends React.PureComponent {
     onDayMouseLeave(day, e);
   }
 
+  onDayFocus(day, e) {
+    const { onDayFocus } = this.props;
+    onDayFocus(day, e);
+  }
+
+  onDayBlur(day, e) {
+    const { onDayBlur } = this.props;
+    onDayBlur(day, e);
+  }
+
   onKeyDown(day, e) {
     const { onDayClick } = this.props;
 
@@ -159,6 +173,8 @@ class CalendarDay extends React.PureComponent {
         onMouseEnter={(e) => { this.onDayMouseEnter(day, e); }}
         onMouseLeave={(e) => { this.onDayMouseLeave(day, e); }}
         onMouseUp={(e) => { e.currentTarget.blur(); }}
+        onFocus={(e) => { this.onDayFocus(day, e); }}
+        onBlur={(e) => { this.onDayBlur(day, e); }}
         onClick={(e) => { this.onDayClick(day, e); }}
         onKeyDown={(e) => { this.onKeyDown(day, e); }}
         tabIndex={tabIndex}

test/components/CalendarDay_spec.jsx

@@ -341,4 +341,44 @@ describe('CalendarDay', () => {
       expect(onMouseLeaveStub).to.have.property('callCount', 1);
     });
   });
+
+  describe('#onDayFocus', () => {
+    let onDayFocusSpy;
+    beforeEach(() => {
+      onDayFocusSpy = sinon.spy(PureCalendarDay.prototype, 'onDayFocus');
+    });
+
+    it('gets triggered by focus', () => {
+      const wrapper = shallow(<CalendarDay />).dive();
+      wrapper.simulate('focus');
+      expect(onDayFocusSpy).to.have.property('callCount', 1);
+    });
+
+    it('calls props.onDayFocus', () => {
+      const onDayFocusStub = sinon.stub();
+      const wrapper = shallow(<CalendarDay onDayFocus={onDayFocusStub} />).dive();
+      wrapper.instance().onDayFocus();
+      expect(onDayFocusStub).to.have.property('callCount', 1);
+    });
+  });
+
+  describe('#onDayBlur', () => {
+    let onDayBlurSpy;
+    beforeEach(() => {
+      onDayBlurSpy = sinon.spy(PureCalendarDay.prototype, 'onDayBlur');
+    });
+
+    it('gets triggered by blur', () => {
+      const wrapper = shallow(<CalendarDay />).dive();
+      wrapper.simulate('blur');
+      expect(onDayBlurSpy).to.have.property('callCount', 1);
+    });
+
+    it('calls props.onDayBlur', () => {
+      const onDayBlurStub = sinon.stub();
+      const wrapper = shallow(<CalendarDay onDayBlur={onDayBlurStub} />).dive();
+      wrapper.instance().onDayBlur();
+      expect(onDayBlurStub).to.have.property('callCount', 1);
+    });
+  });
 });