baseui 11.0.1 → 11.0.2

package/datepicker/calendar.js

@@ -333,12 +333,12 @@ var Calendar = /*#__PURE__*/function (_React$Component) {
     _defineProperty(_assertThisInitialized(_this), "handleDateChange", function (data) {
       var _this$props$onChange = _this.props.onChange,
           onChange = _this$props$onChange === void 0 ? function (params) {} : _this$props$onChange;
-      var updatedDate = data.date; // We'll need to update the date in time values of internal state
-
-      var newTimeState = _toConsumableArray(_this.state.time); // Apply the currently selected time values (saved in state) to the updated date
-
+      var updatedDate = data.date; // Apply the currently selected time values (saved in state) to the updated date
 
       if (Array.isArray(data.date)) {
+        // We'll need to update the date in time values of internal state
+        var newTimeState = _toConsumableArray(_this.state.time);
+
         var start = data.date[0] ? _this.dateHelpers.applyDateToTime(newTimeState[0], data.date[0]) : null;
         var end = data.date[1] ? _this.dateHelpers.applyDateToTime(newTimeState[1], data.date[1]) : null;
         newTimeState[0] = start;
@@ -348,16 +348,21 @@ var Calendar = /*#__PURE__*/function (_React$Component) {
           newTimeState[1] = end;
         } else {
           updatedDate = [start];
-        }
+        } // Update the date in time values of internal state
+
+
+        _this.setState({
+          time: newTimeState
+        });
       } else if (!Array.isArray(_this.props.value) && data.date) {
-        newTimeState[0] = _this.dateHelpers.applyDateToTime(newTimeState[0], data.date);
-        updatedDate = newTimeState[0];
-      } // Update the date in time values of internal state
+        var _newTimeState = _this.dateHelpers.applyDateToTime(_this.state.time[0], data.date);
 
+        updatedDate = _newTimeState; // Update the date in time values of internal state
 
-      _this.setState({
-        time: newTimeState
-      });
+        _this.setState({
+          time: [_newTimeState]
+        });
+      }
 
       onChange({
         date: updatedDate

package/datepicker/calendar.js.flow

@@ -22,7 +22,7 @@ import {
 import dateFnsAdapter from './utils/date-fns-adapter.js';
 import DateHelpers from './utils/date-helpers.js';
 import { getOverrides, mergeOverrides } from '../helpers/overrides.js';
-import type { CalendarPropsT, CalendarInternalState, DateValueT } from './types.js';
+import type { CalendarPropsT, CalendarInternalState } from './types.js';
 import { DENSITY, ORIENTATION } from './constants.js';
 
 export default class Calendar<T = Date> extends React.Component<
@@ -134,7 +134,7 @@ export default class Calendar<T = Date> extends React.Component<
     return monthDelta >= 0 && monthDelta < (this.props.monthsShown || 1);
   }
 
-  getSingleDate(value: DateValueT<T>): ?T {
+  getSingleDate(value: ?T | $ReadOnlyArray<?T>): ?T {
     // need to check this.props.range but flow would complain
     // at the return value in the else clause
     if (Array.isArray(value)) {
@@ -339,13 +339,13 @@ export default class Calendar<T = Date> extends React.Component<
 
   /** Responsible for merging time values into date values. Note: the 'Day' component
    * determines how the days themselves change when a new day is selected. */
-  handleDateChange: ({ date: DateValueT<T> }) => void = (data) => {
+  handleDateChange: ({ +date: ?T | Array<?T> }) => void = (data) => {
     const { onChange = (params) => {} } = this.props;
     let updatedDate = data.date;
-    // We'll need to update the date in time values of internal state
-    const newTimeState = [...this.state.time];
     // Apply the currently selected time values (saved in state) to the updated date
     if (Array.isArray(data.date)) {
+      // We'll need to update the date in time values of internal state
+      const newTimeState = [...this.state.time];
       const start = data.date[0]
         ? this.dateHelpers.applyDateToTime(newTimeState[0], data.date[0])
         : null;
@@ -359,13 +359,16 @@ export default class Calendar<T = Date> extends React.Component<
       } else {
         updatedDate = [start];
       }
+      // Update the date in time values of internal state
+      this.setState({ time: newTimeState });
     } else if (!Array.isArray(this.props.value) && data.date) {
-      newTimeState[0] = this.dateHelpers.applyDateToTime(newTimeState[0], data.date);
-      updatedDate = newTimeState[0];
+      const newTimeState = this.dateHelpers.applyDateToTime(this.state.time[0], data.date);
+      updatedDate = newTimeState;
+
+      // Update the date in time values of internal state
+      this.setState({ time: [newTimeState] });
     }
 
-    // Update the date in time values of internal state
-    this.setState({ time: newTimeState });
     onChange({ date: updatedDate });
   };
 

package/datepicker/datepicker.js

@@ -37,6 +37,10 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
 function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
 
 function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -45,10 +49,6 @@ function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && Symbol.it
 
 function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
@@ -126,7 +126,39 @@ var Datepicker = /*#__PURE__*/function (_React$Component) {
 
     _defineProperty(_assertThisInitialized(_this), "dateHelpers", void 0);
 
-    _defineProperty(_assertThisInitialized(_this), "onChange", function (data) {
+    _defineProperty(_assertThisInitialized(_this), "handleChange", function (date) {
+      var onChange = _this.props.onChange;
+      var onRangeChange = _this.props.onRangeChange;
+
+      if (Array.isArray(date)) {
+        if (onChange && date.every(Boolean)) {
+          // flowlint-next-line unclear-type:off
+          onChange({
+            date: date
+          });
+        }
+
+        if (onRangeChange) {
+          onRangeChange({
+            date: _toConsumableArray(date)
+          });
+        }
+      } else {
+        if (onChange) {
+          onChange({
+            date: date
+          });
+        }
+
+        if (onRangeChange) {
+          onRangeChange({
+            date: date
+          });
+        }
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "onCalendarSelect", function (data) {
       var isOpen = false;
       var isPseudoFocused = false;
       var calendarFocused = false;
@@ -203,9 +235,7 @@ var Datepicker = /*#__PURE__*/function (_React$Component) {
         inputValue: _this.formatDisplayValue(nextDate)
       }));
 
-      _this.props.onChange && _this.props.onChange({
-        date: nextDate
-      });
+      _this.handleChange(nextDate);
     });
 
     _defineProperty(_assertThisInitialized(_this), "formatDisplayValue", function (date) {
@@ -309,16 +339,10 @@ var Datepicker = /*#__PURE__*/function (_React$Component) {
       var formatString = _this.normalizeDashes(_this.props.formatString);
 
       if (typeof mask === 'string' && inputValue === mask.replace(/9/g, ' ') || inputValue.length === 0) {
-        if (_this.props.onChange) {
-          if (_this.props.range) {
-            _this.props.onChange({
-              date: []
-            });
-          } else {
-            _this.props.onChange({
-              date: null
-            });
-          }
+        if (_this.props.range) {
+          _this.handleChange([]);
+        } else {
+          _this.handleChange(null);
         }
       }
 
@@ -349,19 +373,13 @@ var Datepicker = /*#__PURE__*/function (_React$Component) {
           endDate = parseDateString(right);
         }
 
-        var onChange = _this.props.onChange;
-
-        if (onChange) {
-          var datesValid = _this.dateHelpers.isValid(startDate) && _this.dateHelpers.isValid(endDate); // added equal case so that times within the same day can be expressed
+        var datesValid = _this.dateHelpers.isValid(startDate) && _this.dateHelpers.isValid(endDate); // added equal case so that times within the same day can be expressed
 
 
-          var rangeValid = _this.dateHelpers.isAfter(endDate, startDate) || _this.dateHelpers.isEqual(startDate, endDate);
+        var rangeValid = _this.dateHelpers.isAfter(endDate, startDate) || _this.dateHelpers.isEqual(startDate, endDate);
 
-          if (datesValid && rangeValid) {
-            onChange({
-              date: [startDate, endDate]
-            });
-          }
+        if (datesValid && rangeValid) {
+          _this.handleChange([startDate, endDate]);
         }
       } else {
         var dateString = _this.normalizeDashes(inputValue);
@@ -379,11 +397,10 @@ var Datepicker = /*#__PURE__*/function (_React$Component) {
 
         var _this$props3 = _this.props,
             displayValueAtRangeIndex = _this$props3.displayValueAtRangeIndex,
-            _onChange = _this$props3.onChange,
             range = _this$props3.range,
             value = _this$props3.value;
 
-        if (date && _this.dateHelpers.isValid(date) && _onChange) {
+        if (date && _this.dateHelpers.isValid(date)) {
           if (range && Array.isArray(value) && typeof displayValueAtRangeIndex === 'number') {
             var _value = _slicedToArray(value, 2),
                 _left = _value[0],
@@ -393,22 +410,16 @@ var Datepicker = /*#__PURE__*/function (_React$Component) {
               _left = date;
 
               if (!_right) {
-                _onChange({
-                  date: [_left]
-                });
+                _this.handleChange([_left]);
               } else {
                 if (_this.dateHelpers.isAfter(_right, _left) || _this.dateHelpers.isEqual(_left, _right)) {
-                  _onChange({
-                    date: [_left, _right]
-                  });
+                  _this.handleChange([_left, _right]);
                 } else {
                   // Is resetting back to previous value appropriate? Invalid range is not
                   // communicated to the user, but if it was not reset the text value would
                   // show one value and date value another. This seems a bit better but clearly
                   // has a downside.
-                  _onChange({
-                    date: _toConsumableArray(value)
-                  });
+                  _this.handleChange(_toConsumableArray(value));
                 }
               }
             } else if (displayValueAtRangeIndex === 1) {
@@ -416,26 +427,18 @@ var Datepicker = /*#__PURE__*/function (_React$Component) {
 
               if (!_left) {
                 // If start value is not defined, set start/end to the same day.
-                _onChange({
-                  date: [_right, _right]
-                });
+                _this.handleChange([_right, _right]);
               } else {
                 if (_this.dateHelpers.isAfter(_right, _left) || _this.dateHelpers.isEqual(_left, _right)) {
-                  _onChange({
-                    date: [_left, _right]
-                  });
+                  _this.handleChange([_left, _right]);
                 } else {
                   // See comment above about resetting dates on invalid range
-                  _onChange({
-                    date: _toConsumableArray(value)
-                  });
+                  _this.handleChange(_toConsumableArray(value));
                 }
               }
             }
           } else {
-            _onChange({
-              date: date
-            });
+            _this.handleChange(date);
           }
         }
       }
@@ -552,11 +555,6 @@ var Datepicker = /*#__PURE__*/function (_React$Component) {
           endDate = _split2$2 === void 0 ? '' : _split2$2;
 
       var value = inputRole === _constants.INPUT_ROLE.startDate ? startDate : inputRole === _constants.INPUT_ROLE.endDate ? endDate : this.state.inputValue;
-
-      var onChange = function onChange(event) {
-        return _this3.handleInputChange(event, inputRole);
-      };
-
       return /*#__PURE__*/React.createElement(InputComponent, _extends({
         "aria-disabled": this.props.disabled,
         "aria-label": this.props['aria-label'] || (this.props.range ? locale.datepicker.ariaLabelRange : locale.datepicker.ariaLabel),
@@ -573,7 +571,9 @@ var Datepicker = /*#__PURE__*/function (_React$Component) {
         },
         onBlur: this.handleInputBlur,
         onKeyDown: this.handleKeyDown,
-        onChange: onChange,
+        onChange: function onChange(event) {
+          return _this3.handleInputChange(event, inputRole);
+        },
         placeholder: placeholder,
         mask: this.getMask(),
         required: this.props.required,
@@ -633,7 +633,7 @@ var Datepicker = /*#__PURE__*/function (_React$Component) {
             trapTabbing: true,
             value: _this4.props.value
           }, _this4.props, {
-            onChange: _this4.onChange,
+            onChange: _this4.onCalendarSelect,
             selectedInput: _this4.state.selectedInput,
             hasLockedBehavior: _this4.hasLockedBehavior()
           }))

package/datepicker/datepicker.js.flow

@@ -19,7 +19,7 @@ import {
   StyledStartDate,
   StyledEndDate,
 } from './styled-components.js';
-import type { DatepickerPropsT, DateValueT, InputRoleT } from './types.js';
+import type { DatepickerPropsT, InputRoleT } from './types.js';
 import DateHelpers from './utils/date-helpers.js';
 import dateFnsAdapter from './utils/date-fns-adapter.js';
 import type { LocaleT } from '../locale/types.js';
@@ -78,7 +78,31 @@ export default class Datepicker<T = Date> extends React.Component<DatepickerProp
     };
   }
 
-  onChange: ({ date: DateValueT<T> }) => void = (data) => {
+  handleChange: (?T | $ReadOnlyArray<?T>) => void = (date) => {
+    const onChange = this.props.onChange;
+    const onRangeChange = this.props.onRangeChange;
+
+    if (Array.isArray(date)) {
+      if (onChange && date.every(Boolean)) {
+        // flowlint-next-line unclear-type:off
+        onChange({ date: ((date: any): Array<T>) });
+      }
+
+      if (onRangeChange) {
+        onRangeChange({ date: [...date] });
+      }
+    } else {
+      if (onChange) {
+        onChange({ date });
+      }
+
+      if (onRangeChange) {
+        onRangeChange({ date });
+      }
+    }
+  };
+
+  onCalendarSelect: ({ +date: ?T | Array<?T> }) => void = (data) => {
     let isOpen = false;
     let isPseudoFocused = false;
     let calendarFocused = false;
@@ -150,14 +174,14 @@ export default class Datepicker<T = Date> extends React.Component<DatepickerProp
       inputValue: this.formatDisplayValue(nextDate),
     });
 
-    this.props.onChange && this.props.onChange({ date: nextDate });
+    this.handleChange(nextDate);
   };
 
   getNullDatePlaceholder(formatString: string) {
     return (this.getMask() || formatString).split(INPUT_DELIMITER)[0].replace(/[0-9]|[a-z]/g, ' ');
   }
 
-  formatDate(date: DateValueT<T>, formatString: string) {
+  formatDate(date: ?T | $ReadOnlyArray<?T>, formatString: string) {
     const format = (date: T) => {
       if (formatString === DEFAULT_DATE_FORMAT) {
         return this.dateHelpers.format(date, 'slashDate', this.props.locale);
@@ -180,7 +204,7 @@ export default class Datepicker<T = Date> extends React.Component<DatepickerProp
     }
   }
 
-  formatDisplayValue: (DateValueT<T>) => string = (date: DateValueT<T>) => {
+  formatDisplayValue: (?T | $ReadOnlyArray<?T>) => string = (date) => {
     const { displayValueAtRangeIndex, formatDisplayValue, range } = this.props;
     const formatString = this.normalizeDashes(this.props.formatString);
 
@@ -278,12 +302,10 @@ export default class Datepicker<T = Date> extends React.Component<DatepickerProp
       (typeof mask === 'string' && inputValue === mask.replace(/9/g, ' ')) ||
       inputValue.length === 0
     ) {
-      if (this.props.onChange) {
-        if (this.props.range) {
-          this.props.onChange({ date: [] });
-        } else {
-          this.props.onChange({ date: null });
-        }
+      if (this.props.range) {
+        this.handleChange([]);
+      } else {
+        this.handleChange(null);
       }
     }
 
@@ -307,18 +329,15 @@ export default class Datepicker<T = Date> extends React.Component<DatepickerProp
         endDate = parseDateString(right);
       }
 
-      const onChange = this.props.onChange;
-      if (onChange) {
-        const datesValid = this.dateHelpers.isValid(startDate) && this.dateHelpers.isValid(endDate);
+      const datesValid = this.dateHelpers.isValid(startDate) && this.dateHelpers.isValid(endDate);
 
-        // added equal case so that times within the same day can be expressed
-        const rangeValid =
-          this.dateHelpers.isAfter(endDate, startDate) ||
-          this.dateHelpers.isEqual(startDate, endDate);
+      // added equal case so that times within the same day can be expressed
+      const rangeValid =
+        this.dateHelpers.isAfter(endDate, startDate) ||
+        this.dateHelpers.isEqual(startDate, endDate);
 
-        if (datesValid && rangeValid) {
-          onChange({ date: [startDate, endDate] });
-        }
+      if (datesValid && rangeValid) {
+        this.handleChange([startDate, endDate]);
       }
     } else {
       const dateString = this.normalizeDashes(inputValue);
@@ -333,41 +352,41 @@ export default class Datepicker<T = Date> extends React.Component<DatepickerProp
         date = parseDateString(dateString);
       }
 
-      const { displayValueAtRangeIndex, onChange, range, value } = this.props;
-      if (date && this.dateHelpers.isValid(date) && onChange) {
+      const { displayValueAtRangeIndex, range, value } = this.props;
+      if (date && this.dateHelpers.isValid(date)) {
         if (range && Array.isArray(value) && typeof displayValueAtRangeIndex === 'number') {
           let [left, right] = value;
           if (displayValueAtRangeIndex === 0) {
             left = date;
             if (!right) {
-              onChange({ date: [left] });
+              this.handleChange([left]);
             } else {
               if (this.dateHelpers.isAfter(right, left) || this.dateHelpers.isEqual(left, right)) {
-                onChange({ date: [left, right] });
+                this.handleChange([left, right]);
               } else {
                 // Is resetting back to previous value appropriate? Invalid range is not
                 // communicated to the user, but if it was not reset the text value would
                 // show one value and date value another. This seems a bit better but clearly
                 // has a downside.
-                onChange({ date: [...value] });
+                this.handleChange([...value]);
               }
             }
           } else if (displayValueAtRangeIndex === 1) {
             right = date;
             if (!left) {
               // If start value is not defined, set start/end to the same day.
-              onChange({ date: [right, right] });
+              this.handleChange([right, right]);
             } else {
               if (this.dateHelpers.isAfter(right, left) || this.dateHelpers.isEqual(left, right)) {
-                onChange({ date: [left, right] });
+                this.handleChange([left, right]);
               } else {
                 // See comment above about resetting dates on invalid range
-                onChange({ date: [...value] });
+                this.handleChange([...value]);
               }
             }
           }
         } else {
-          onChange({ date });
+          this.handleChange(date);
         }
       }
     }
@@ -439,8 +458,6 @@ export default class Datepicker<T = Date> extends React.Component<DatepickerProp
         ? endDate
         : this.state.inputValue;
 
-    const onChange = (event) => this.handleInputChange(event, inputRole);
-
     return (
       <InputComponent
         aria-disabled={this.props.disabled}
@@ -459,7 +476,7 @@ export default class Datepicker<T = Date> extends React.Component<DatepickerProp
         onFocus={() => this.open(inputRole)}
         onBlur={this.handleInputBlur}
         onKeyDown={this.handleKeyDown}
-        onChange={onChange}
+        onChange={(event) => this.handleInputChange(event, inputRole)}
         placeholder={placeholder}
         mask={this.getMask()}
         required={this.props.required}
@@ -499,7 +516,7 @@ export default class Datepicker<T = Date> extends React.Component<DatepickerProp
                   trapTabbing={true}
                   value={this.props.value}
                   {...this.props}
-                  onChange={this.onChange}
+                  onChange={this.onCalendarSelect}
                   selectedInput={this.state.selectedInput}
                   hasLockedBehavior={this.hasLockedBehavior()}
                 />

package/datepicker/stateful-calendar.js

@@ -19,6 +19,8 @@ function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return
 
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
@@ -56,7 +58,10 @@ var StatefulComponent = /*#__PURE__*/function (_React$Component) {
     key: "render",
     value: function render() {
       return /*#__PURE__*/React.createElement(_statefulContainer.default, this.props, function (extendedProps) {
-        return /*#__PURE__*/React.createElement(_calendar.default, extendedProps);
+        return /*#__PURE__*/React.createElement(_calendar.default, _extends({}, extendedProps, {
+          // flowlint-next-line unclear-type:off
+          onChange: extendedProps.onChange
+        }));
       });
     }
   }]);

package/datepicker/stateful-calendar.js.flow

@@ -18,10 +18,17 @@ class StatefulComponent<T = Date> extends React.Component<PropsT<T>> {
     stateReducer: (type, nextState) => nextState,
     onSelect: () => {},
   };
+
   render() {
     return (
       <StatefulContainer {...this.props}>
-        {(extendedProps) => <Calendar {...extendedProps} />}
+        {(extendedProps) => (
+          <Calendar
+            {...extendedProps}
+            // flowlint-next-line unclear-type:off
+            onChange={(extendedProps.onChange: any)}
+          />
+        )}
       </StatefulContainer>
     );
   }

package/datepicker/stateful-container.js

@@ -64,8 +64,29 @@ var StatefulContainer = /*#__PURE__*/function (_React$Component) {
         value: date
       });
 
-      if (typeof _this.props.onChange === 'function') {
-        _this.props.onChange(data);
+      var onChange = _this.props.onChange;
+
+      if (onChange) {
+        if (Array.isArray(date)) {
+          if (date.every(Boolean)) {
+            // flowlint-next-line unclear-type:off
+            onChange({
+              date: date
+            });
+          }
+        } else {
+          onChange({
+            date: date
+          });
+        }
+      }
+
+      var onRangeChange = _this.props.onRangeChange;
+
+      if (onRangeChange) {
+        onRangeChange({
+          date: date
+        });
       }
     });
 

package/datepicker/stateful-container.js.flow

@@ -14,7 +14,6 @@ import type {
   StatefulContainerPropsT,
   StateChangeTypeT,
   StateReducerT,
-  DateValueT,
 } from './types.js';
 
 type InputProps<T> = CalendarPropsT<T> | DatepickerPropsT<T>;
@@ -34,11 +33,25 @@ class StatefulContainer<T = Date> extends React.Component<PropsT<T>, ContainerSt
     this.state = { value, ...props.initialState };
   }
 
-  onChange: ({ date: DateValueT<T> }) => mixed = (data) => {
+  onChange: ({ +date: ?T | Array<?T> }) => mixed = (data) => {
     const { date } = data;
     this.internalSetState(STATE_CHANGE_TYPE.change, { value: date });
-    if (typeof this.props.onChange === 'function') {
-      this.props.onChange(data);
+
+    const onChange = this.props.onChange;
+    if (onChange) {
+      if (Array.isArray(date)) {
+        if (date.every(Boolean)) {
+          // flowlint-next-line unclear-type:off
+          onChange({ date: ((date: any): Array<T>) });
+        }
+      } else {
+        onChange({ date });
+      }
+    }
+
+    const onRangeChange = this.props.onRangeChange;
+    if (onRangeChange) {
+      onRangeChange({ date });
     }
   };
 

package/datepicker/stateful-datepicker.js

@@ -19,6 +19,8 @@ function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return
 
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
@@ -56,7 +58,10 @@ var StatefulComponent = /*#__PURE__*/function (_React$Component) {
     key: "render",
     value: function render() {
       return /*#__PURE__*/React.createElement(_statefulContainer.default, this.props, function (extendedProps) {
-        return /*#__PURE__*/React.createElement(_datepicker.default, extendedProps);
+        return /*#__PURE__*/React.createElement(_datepicker.default, _extends({}, extendedProps, {
+          // flowlint-next-line unclear-type:off
+          onChange: extendedProps.onChange
+        }));
       });
     }
   }]);

package/datepicker/stateful-datepicker.js.flow

@@ -21,7 +21,13 @@ class StatefulComponent<T = Date> extends React.Component<PropsT<T>> {
   render() {
     return (
       <StatefulContainer {...this.props}>
-        {(extendedProps) => <Datepicker {...extendedProps} />}
+        {(extendedProps) => (
+          <Datepicker
+            {...extendedProps}
+            // flowlint-next-line unclear-type:off
+            onChange={(extendedProps.onChange: any)}
+          />
+        )}
       </StatefulContainer>
     );
   }