feat: keyboard navigation in calendar

src/Calendar/Calendar.test.js

@@ -97,9 +97,6 @@ describe('<Calendar />', () => {
         const currentDateDisplayed = wrapper.state('currentDateDisplayed');
 
         expect(currentDateDisplayed.month()).toEqual(3);
-
-        // check that first of month is selected
-        expect(currentDateDisplayed.date()).toEqual(1);
     });
 
     test('click month from list with date range', () => {

src/DatePicker/DatePicker.js

@@ -2,7 +2,9 @@ import Button from '../Button/Button';
 import Calendar from '../Calendar/Calendar';
 import FormInput from '../Forms/FormInput';
 import InputGroup from '../InputGroup/InputGroup';
+import { isEnabledDate } from '../utils/dateUtils';
 import moment from 'moment';
+import Popover from '../Popover/Popover';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 
@@ -13,31 +15,15 @@ class DatePicker extends Component {
         const formattedDate = props.defaultValue.length > 0 ?
             moment(props.defaultValue, ISO_DATE_FORMAT).format(this.getLocaleDateFormat()) : '';
         this.state = {
-            hidden: true,
             selectedDate: formattedDate.length === 0 ? null : moment(formattedDate, this.getLocaleDateFormat()),
             arrSelectedDates: [],
             formattedDate
         };
 
         this.calendarRef = React.createRef();
+        this.popoverRef = React.createRef();
     }
 
-    componentDidMount() {
-        if (!this.props.disableStyles) {
-            require('fundamental-styles/dist/popover.css');
-        }
-    }
-
-    openCalendar = type => {
-        if (type === 'input') {
-            if (this.state.hidden) {
-                this.setState({ hidden: !this.state.hidden });
-            }
-        } else {
-            this.setState({ hidden: !this.state.hidden });
-        }
-    };
-
     modifyDate = (e) => {
         this.setState({ formattedDate: e.target.value });
     }
@@ -48,23 +34,8 @@ class DatePicker extends Component {
         }
     }
 
-    componentWillMount() {
-        document.addEventListener('mousedown', this.click, false);
-    }
-
-    componentWillUnmount() {
-        document.removeEventListener('mousedown', this.click, false);
-    }
-
-    click = e => {
-        if (this.component.contains(e.target)) {
-            return;
-        }
-        this.clickOutside();
-    };
-
     isDateValid = (date) => {
-        return date.isValid() && this.calendarRef.current.isEnabledDate(date);
+        return date.isValid() && isEnabledDate(date, this.props);
     }
 
     validateDates = () => {
@@ -122,22 +93,30 @@ class DatePicker extends Component {
 
     updateDate = (date) => {
         const longDateFormat = this.getLocaleDateFormat();
+        let closeCalendar = false;
 
         if (this.props.enableRangeSelection) {
             let formatDate = date[0].format(longDateFormat);
             if (!!date[1]) {
                 formatDate += '-' + date[1].format(longDateFormat);
+                closeCalendar = true;
             }
             this.setState({
                 arrSelectedDates: date,
                 formattedDate: formatDate
             });
         } else {
+            closeCalendar = true;
             this.setState({
                 selectedDate: date,
                 formattedDate: date.format(longDateFormat)
             });
         }
+
+        if (closeCalendar) {
+            const popover = this.popoverRef && this.popoverRef.current;
+            popover && popover.handleEscapeKey();
+        }
     }
 
     getLocaleDateFormat = () => moment.localeData(this.props.locale).longDateFormat('L');
@@ -152,6 +131,7 @@ class DatePicker extends Component {
     render() {
         const {
             blockedDates,
+            buttonLabel,
             buttonProps,
             className,
             compact,
@@ -166,6 +146,7 @@ class DatePicker extends Component {
             enableRangeSelection,
             inputProps,
             locale,
+            localizedText,
             onBlur,
             ...props
         } = this.props;
@@ -175,29 +156,8 @@ class DatePicker extends Component {
                 {...props}
                 className={className}
                 ref={component => (this.component = component)}>
-                <div className='fd-popover'>
-                    <div className='fd-popover__control'>
-                        <InputGroup compact={compact}>
-                            <FormInput
-                                {...inputProps}
-                                onBlur={this._handleBlur}
-                                onChange={this.modifyDate}
-                                onClick={() => this.openCalendar('input')}
-                                onKeyPress={this.sendUpdate}
-                                placeholder={this.getLocaleDateFormat()}
-                                value={this.state.formattedDate} />
-                            <InputGroup.Addon isButton>
-                                <Button {...buttonProps}
-                                    disableStyles={disableStyles}
-                                    glyph='calendar'
-                                    onClick={() => this.openCalendar()}
-                                    option='light' />
-                            </InputGroup.Addon>
-                        </InputGroup>
-                    </div>
-                    <div
-                        aria-hidden={this.state.hidden}
-                        className='fd-popover__body fd-popover__body--right fd-popover__body--no-arrow'>
+                <Popover
+                    body={
                         <Calendar
                             blockedDates={blockedDates}
                             customDate={
@@ -214,11 +174,36 @@ class DatePicker extends Component {
                             disableWeekends={disableWeekends}
                             disabledDates={disabledDates}
                             enableRangeSelection={enableRangeSelection}
+                            focusOnInit
                             locale={locale}
+                            localizedText={localizedText}
                             onChange={this.updateDate}
                             ref={this.calendarRef} />
-                    </div>
-                </div>
+                    }
+                    control={
+                        <InputGroup compact={compact}>
+                            <FormInput
+                                {...inputProps}
+                                onBlur={this._handleBlur}
+                                onChange={this.modifyDate}
+                                onKeyPress={this.sendUpdate}
+                                placeholder={this.getLocaleDateFormat()}
+                                value={this.state.formattedDate} />
+                            <InputGroup.Addon isButton>
+                                <Button {...buttonProps}
+                                    aria-label={buttonLabel}
+                                    disableStyles={disableStyles}
+                                    glyph='calendar'
+                                    option='light' />
+                            </InputGroup.Addon>
+                        </InputGroup>
+                    }
+                    disableKeyPressHandler
+                    disableStyles={disableStyles}
+                    noArrow
+                    onClickOutside={this.clickOutside}
+                    placement='bottom-end'
+                    ref={this.popoverRef} />
             </div>
         );
     }
@@ -228,6 +213,7 @@ DatePicker.displayName = 'DatePicker';
 
 DatePicker.propTypes = {
     ...Calendar.basePropTypes,
+    buttonLabel: PropTypes.string,
     buttonProps: PropTypes.object,
     compact: PropTypes.bool,
     defaultValue: PropTypes.string,
@@ -238,13 +224,15 @@ DatePicker.propTypes = {
 };
 
 DatePicker.defaultProps = {
+    buttonLabel: 'Choose date',
     defaultValue: '',
     locale: 'en',
     onBlur: () => {}
 };
 
 DatePicker.propDescriptions = {
     ...Calendar.propDescriptions,
+    buttonLabel: 'aria-label for datepicker button',
     defaultValue: 'Default value to be shown in the Datepicker. The only accepted format is the ISO format, i.e. YYYY-MM-DD',
     enableRangeSelection: 'Set to **true** to enable the selection of a date range (begin and end).',
     locale: 'Language code to set the locale.',

src/DatePicker/DatePicker.test.js

@@ -25,70 +25,6 @@ describe('<DatePicker />', () => {
         mount(compactRangeDatepicker);
     });
 
-    test('open/close by calendar icon button', () => {
-        wrapper = mount(defaultDatePicker);
-        expect(wrapper.state('hidden')).toBeTruthy();
-
-        wrapper
-            .find('button.fd-button--light.sap-icon--calendar')
-            .simulate('click', { type: 'input' });
-
-        expect(wrapper.state('hidden')).toBeFalsy();
-    });
-
-    test('open/close calendar', () => {
-        wrapper = mount(defaultDatePicker);
-        // check to make sure calendar is hidden
-        expect(wrapper.state('hidden')).toBeTruthy();
-
-        // click to show calendar
-        wrapper.find('input[type="text"]').simulate('click', { type: 'input' });
-
-        // check to make sure calendar is shown
-        expect(wrapper.state('hidden')).toBeFalsy();
-
-        // clicking on input text should keep calendar displayed
-        wrapper.find('input[type="text"]').simulate('click', { type: 'input' });
-
-        // check to make sure calendar is shown
-        expect(wrapper.state('hidden')).toBeFalsy();
-
-        // click to show calendar
-        wrapper.find('input[type="text"]').simulate('click', { type: '' });
-
-        // check to make sure calendar is shown
-        expect(wrapper.state('hidden')).toBeFalsy();
-    });
-
-    test('open/close range calendar', () => {
-        wrapper = mount(rangeDatePicker);
-        //open date picker calendar
-        expect(wrapper.state('hidden')).toBeTruthy();
-
-        // click to show calendar
-        wrapper.find('input[type="text"]').simulate('click', { type: 'input' });
-
-        // check to make sure calendar is shown
-        expect(wrapper.state('hidden')).toBeFalsy();
-
-        wrapper.instance().componentWillMount();
-
-        // click on body element
-        let event = new MouseEvent('mousedown', {
-            target: document.querySelector('body')
-        });
-        document.dispatchEvent(event);
-
-        // check to make sure calendar is hidden
-        expect(wrapper.state('hidden')).toBeTruthy();
-
-        // show date picker, select date range then close
-        wrapper.find('input[type="text"]').simulate('click', { type: '' });
-
-        // check to make sure calendar is shown
-        expect(wrapper.state('hidden')).toBeFalsy();
-    });
-
     test('start date and end date range', () => {
         wrapper = mount(rangeDatePicker);
         // set dates
@@ -306,7 +242,7 @@ describe('<DatePicker />', () => {
             const blur = jest.fn();
             const element = mount(<DatePicker onBlur={blur} />);
 
-            element.find('button.fd-button--light.sap-icon--calendar').simulate('click', { type: 'input' });
+            element.find('button.fd-button--light.sap-icon--calendar').simulate('click');
 
             element.find('table.fd-calendar__table tbody.fd-calendar__group tr.fd-calendar__row td.fd-calendar__item:not(.fd-calendar__item--other-month)')
                 .at(0)
@@ -323,7 +259,7 @@ describe('<DatePicker />', () => {
             const blur = jest.fn();
             const element = mount(<DatePicker onBlur={blur} />);
 
-            element.find('input[type="text"]').simulate('click', { type: 'input' });
+            element.find('input[type="text"]').simulate('click');
 
             let event = new MouseEvent('mousedown', { target: document.querySelector('body') });
             document.dispatchEvent(event);

src/utils/constants.js

@@ -139,3 +139,10 @@ export const POPPER_SIZING_TYPES_DESCRIPTION = `<ul>
 <li>"minTarget" - right edge aligns with target unless Popover content is bigger</li>
 <li>"maxTarget" - right edge aligns with target unless Popover content is smaller</li>
 </ul>`;
+
+export const GridSelector = {
+    ROW: 'tr, [role="row"]',
+    HEADER: 'th',
+    CELL: 'td, [role="gridcell"]',
+    FOCUSABLE: 'input:enabled, select, textarea, a[href], button, [tabindex], [role="button"]'
+};

src/utils/dateUtils.js

@@ -0,0 +1,46 @@
+import moment from 'moment';
+
+export const isDateBetween = (date, blockedDates, isRangeEnabled) => {
+    if (typeof blockedDates === 'undefined' || typeof blockedDates[0] === 'undefined' || typeof blockedDates[1] === 'undefined') {
+        return false;
+    }
+    if (typeof isRangeEnabled !== 'undefined' || isRangeEnabled) {
+        if (blockedDates[0].isAfter(blockedDates[1])) {
+            return blockedDates[1].isBefore(date) && blockedDates[0].isAfter(date);
+        }
+    }
+    return blockedDates[0].isBefore(date, 'day') && blockedDates[1].isAfter(date, 'day');
+};
+
+export const isDisabledWeekday = (date, weekDays) => {
+    if (!weekDays) {
+        return false;
+    }
+
+    const daysName = moment.weekdays();
+
+    return weekDays.indexOf(daysName[date.day()]) > -1;
+};
+
+export const isEnabledDate = (day, dateProps) => {
+    const {
+        disableWeekends,
+        disableAfterDate,
+        disableBeforeDate,
+        blockedDates,
+        disableWeekday,
+        disablePastDates,
+        disableFutureDates,
+        disabledDates
+    } = dateProps;
+    return (
+        !isDisabledWeekday(day, disableWeekday) &&
+        !(disableWeekends && (day.day() === 0 || day.day() === 6)) &&
+        !(disableBeforeDate && day.isBefore(moment(disableBeforeDate))) &&
+        !(disableAfterDate && day.isAfter(moment(disableAfterDate))) &&
+        !(disablePastDates && day.isBefore(moment(), 'day')) &&
+        !(disableFutureDates && day.isAfter(moment(), 'day')) &&
+        !isDateBetween(day, blockedDates && blockedDates.map(date => moment(date))) &&
+        !isDateBetween(day, disabledDates && disabledDates.map(date => moment(date)))
+    );
+};