react-day-picker 7.3.2 → 7.4.0

package/CHANGELOG.md

@@ -1,3 +1,22 @@
+## [v7.4](https://github.com/gpbl/react-day-picker/tree/v7.4.0) (2019-10-20)
+
+#### DayPicker
+* Fix text wrapping on `.DayPicker-Day` default style (#824)
+* Add `focus()` method for focusing the `DayPicker` wrapper element (#761)
+
+#### DayPickerInput
+
+* When DayPicker input state is controlled, correctly set the input text if the `value` prop updates ([#816](https://github.com/gpbl/react-day-picker/issues/816) by [MitchRivet](https://github.com/MitchRivet))
+* Fix DayPickerInput value does not recompute on `locale` change (fix #938) (#939)
+* Set overlayHasFocus to false in hideAfterDayClick (#941)
+
+#### Typings
+
+* Improve typings, use TypeScript 3.1 (#929)
+* Add formatDate and parseDate to typings (#873)
+* Make `format` optional (#923)
+* Remove `initialMonth` from `defaultProps` (#874)
+
 ### [v7.3.2](https://github.com/gpbl/react-day-picker/tree/v7.3.2) (2019-08-08)
 
 Updates for TypeScript users:

package/LICENSE

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2014 Giampaolo Bellavite
+Copyright (c) 2014-2019 Giampaolo Bellavite
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
@@ -19,4 +19,3 @@ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 SOFTWARE.
-

package/lib/daypicker.js

@@ -1029,6 +1029,11 @@ var DayPicker = exports.DayPicker = function (_Component) {
       var nextMonth = DateUtils.addMonths(this.state.currentMonth, -12);
       this.showMonth(nextMonth);
     }
+  }, {
+    key: 'focus',
+    value: function focus() {
+      this.wrapper.focus();
+    }
   }, {
     key: 'focusFirstDayOfMonth',
     value: function focusFirstDayOfMonth() {
@@ -1232,6 +1237,9 @@ var DayPicker = exports.DayPicker = function (_Component) {
           'div',
           {
             className: this.props.classNames.wrapper,
+            ref: function ref(el) {
+              return _this7.wrapper = el;
+            },
             tabIndex: this.props.canChangeMonth && typeof this.props.tabIndex !== 'undefined' ? this.props.tabIndex : -1,
             onKeyDown: this.handleKeyDown,
             onFocus: this.props.onFocus,
@@ -1252,7 +1260,7 @@ var DayPicker = exports.DayPicker = function (_Component) {
   return DayPicker;
 }(_react.Component);
 
-DayPicker.VERSION = '7.3.2';
+DayPicker.VERSION = '7.4.0';
 DayPicker.propTypes = {
   // Rendering months
   initialMonth: _propTypes2.default.instanceOf(Date),
@@ -2502,9 +2510,10 @@ var DayPickerInput = function (_React$Component) {
           format = _props.format,
           dayPickerProps = _props.dayPickerProps;
 
-      // Update the input value if the `value` prop has changed
+      // Update the input value if `value`, `dayPickerProps.locale` or `format`
+      // props have changed
 
-      if (value !== prevProps.value) {
+      if (value !== prevProps.value || dayPickerProps.locale !== prevProps.dayPickerProps.locale || format !== prevProps.format) {
         if ((0, _DateUtils.isDate)(value)) {
           newState.value = formatDate(value, format, dayPickerProps.locale);
         } else {
@@ -2558,14 +2567,17 @@ var DayPickerInput = function (_React$Component) {
     value: function getInitialStateFromProps(props) {
       var dayPickerProps = props.dayPickerProps,
           formatDate = props.formatDate,
-          format = props.format;
+          format = props.format,
+          typedValue = props.typedValue;
       var value = props.value;
 
       if (props.value && (0, _DateUtils.isDate)(props.value)) {
         value = formatDate(props.value, format, dayPickerProps.locale);
       }
+
       return {
         value: value,
+        typedValue: typedValue,
         month: this.getInitialMonthFromProps(props),
         selectedDays: dayPickerProps.selectedDays
       };
@@ -2599,7 +2611,7 @@ var DayPickerInput = function (_React$Component) {
           dayPickerProps = _props2.dayPickerProps,
           onDayChange = _props2.onDayChange;
 
-      this.setState({ month: day, value: value, typedValue: undefined }, function () {
+      this.setState({ month: day, value: value, typedValue: '' }, function () {
         if (callback) {
           callback();
         }
@@ -2679,7 +2691,8 @@ var DayPickerInput = function (_React$Component) {
         return;
       }
       this.hideTimeout = setTimeout(function () {
-        return _this5.hideDayPicker();
+        _this5.overlayHasFocus = false;
+        _this5.hideDayPicker();
       }, HIDE_TIMEOUT);
     }
   }, {
@@ -2768,7 +2781,7 @@ var DayPickerInput = function (_React$Component) {
       var value = e.target.value;
 
       if (value.trim() === '') {
-        this.setState({ value: value, typedValue: undefined });
+        this.setState({ value: value, typedValue: '' });
         if (onDayChange) onDayChange(undefined, {}, this);
         return;
       }
@@ -2851,7 +2864,9 @@ var DayPickerInput = function (_React$Component) {
         } else if (selectedDays) {
           selectedDays = null;
         }
-        this.setState({ value: '', typedValue: undefined, selectedDays: selectedDays }, this.hideAfterDayClick);
+
+        this.setState({ value: '', typedValue: '', selectedDays: selectedDays }, this.hideAfterDayClick);
+
         if (onDayChange) {
           onDayChange(undefined, modifiers, this);
         }
@@ -2939,7 +2954,7 @@ var DayPickerInput = function (_React$Component) {
           },
           placeholder: this.props.placeholder
         }, inputProps, {
-          value: this.state.typedValue || this.state.value,
+          value: this.state.value || this.state.typedValue,
           onChange: this.handleInputChange,
           onFocus: this.handleInputFocus,
           onBlur: this.handleInputBlur,
@@ -2964,6 +2979,7 @@ DayPickerInput.propTypes = {
 
   formatDate: _propTypes2.default.func,
   parseDate: _propTypes2.default.func,
+  typedValue: _propTypes2.default.string,
 
   showOverlay: _propTypes2.default.bool,
   dayPickerProps: _propTypes2.default.object,
@@ -2992,6 +3008,7 @@ DayPickerInput.propTypes = {
 DayPickerInput.defaultProps = {
   dayPickerProps: {},
   value: '',
+  typedValue: '',
   placeholder: 'YYYY-M-D',
   format: 'L',
   formatDate: defaultFormat,