@zendeskgarden/react-datepickers 8.48.2 → 8.49.2

package/dist/index.cjs.js

@@ -416,7 +416,7 @@ function getDate(dirtyDate) {
 var COMPONENT_ID$b = 'datepickers.menu';
 var StyledMenu = styled__default["default"].div.attrs({
   'data-garden-id': COMPONENT_ID$b,
-  'data-garden-version': '8.48.2'
+  'data-garden-version': '8.49.2'
 }).withConfig({
   displayName: "StyledMenu",
   componentId: "sc-1npbkk0-0"
@@ -3510,7 +3510,6 @@ var datepickerRangeReducer = function datepickerRangeReducer(_ref3) {
       endValue = _ref3.endValue,
       locale = _ref3.locale,
       formatDate = _ref3.formatDate,
-      onChange = _ref3.onChange,
       customParseDate = _ref3.customParseDate;
   return function (state, action) {
     switch (action.type) {
@@ -3556,12 +3555,6 @@ var datepickerRangeReducer = function datepickerRangeReducer(_ref3) {
               inputValue: state.startInputValue
             });
           }
-          if (onChange && parsedDate && isValid(parsedDate) && !isSameDay(parsedDate, startValue)) {
-            onChange({
-              startValue: parsedDate,
-              endValue: endValue
-            });
-          }
           var startInputValue = formatValue({
             value: parsedDate,
             locale: locale,
@@ -3586,12 +3579,6 @@ var datepickerRangeReducer = function datepickerRangeReducer(_ref3) {
               inputValue: state.endInputValue
             });
           }
-          if (onChange && _parsedDate && isValid(_parsedDate) && !isSameDay(_parsedDate, endValue)) {
-            onChange({
-              startValue: startValue,
-              endValue: _parsedDate
-            });
-          }
           var endInputValue = formatValue({
             value: _parsedDate,
             locale: locale,
@@ -3649,54 +3636,54 @@ var datepickerRangeReducer = function datepickerRangeReducer(_ref3) {
           });
         }
       case 'CLICK_DATE':
-        if (onChange) {
-          if (state.isStartFocused) {
-            if (endValue !== undefined && (isBefore(action.value, endValue) || isSameDay(action.value, endValue))) {
-              onChange({
-                startValue: action.value,
-                endValue: endValue
-              });
-            } else {
-              onChange({
-                startValue: action.value,
-                endValue: undefined
-              });
-            }
-          } else if (state.isEndFocused) {
-            if (startValue !== undefined && (isAfter(action.value, startValue) || isSameDay(action.value, startValue))) {
-              onChange({
-                startValue: startValue,
-                endValue: action.value
-              });
-            } else {
-              onChange({
-                startValue: action.value,
-                endValue: undefined
-              });
-            }
-          } else if (startValue === undefined) {
-            onChange({
-              startValue: action.value,
-              endValue: undefined
+        if (state.isStartFocused) {
+          if (endValue !== undefined && (isBefore(action.value, endValue) || isSameDay(action.value, endValue))) {
+            return _objectSpread2(_objectSpread2({}, state), {}, {
+              startInputValue: formatValue({
+                value: action.value
+              })
             });
-          } else if (endValue === undefined) {
-            if (isBefore(action.value, startValue)) {
-              onChange({
-                startValue: action.value,
-                endValue: undefined
-              });
-            } else {
-              onChange({
-                startValue: startValue,
-                endValue: action.value
-              });
-            }
-          } else {
-            onChange({
-              startValue: action.value,
-              endValue: undefined
+          }
+          return _objectSpread2(_objectSpread2({}, state), {}, {
+            startInputValue: formatValue({
+              value: action.value
+            }),
+            endInputValue: undefined
+          });
+        } else if (state.isEndFocused) {
+          if (startValue !== undefined && (isAfter(action.value, startValue) || isSameDay(action.value, startValue))) {
+            return _objectSpread2(_objectSpread2({}, state), {}, {
+              endInputValue: formatValue({
+                value: action.value
+              })
+            });
+          }
+          return _objectSpread2(_objectSpread2({}, state), {}, {
+            startInputValue: formatValue({
+              value: action.value
+            })
+          });
+        } else if (startValue === undefined) {
+          return _objectSpread2(_objectSpread2({}, state), {}, {
+            startInputValue: formatValue({
+              value: action.value
+            }),
+            endInputValue: undefined
+          });
+        } else if (endValue === undefined) {
+          if (isBefore(action.value, startValue)) {
+            return _objectSpread2(_objectSpread2({}, state), {}, {
+              startInputValue: formatValue({
+                value: action.value
+              }),
+              endInputValue: undefined
             });
           }
+          return _objectSpread2(_objectSpread2({}, state), {}, {
+            endInputValue: formatValue({
+              value: action.value
+            })
+          });
         }
         return state;
       case 'START_INPUT_ONCHANGE':
@@ -3769,7 +3756,11 @@ var Start = function Start(props) {
   var _useDatepickerRangeCo = useDatepickerContext(),
       state = _useDatepickerRangeCo.state,
       dispatch = _useDatepickerRangeCo.dispatch,
-      startInputRef = _useDatepickerRangeCo.startInputRef;
+      onChange = _useDatepickerRangeCo.onChange,
+      startValue = _useDatepickerRangeCo.startValue,
+      endValue = _useDatepickerRangeCo.endValue,
+      startInputRef = _useDatepickerRangeCo.startInputRef,
+      customParseDate = _useDatepickerRangeCo.customParseDate;
   var onChangeCallback = React.useCallback(function (e) {
     dispatch({
       type: 'START_INPUT_ONCHANGE',
@@ -3783,24 +3774,39 @@ var Start = function Start(props) {
     });
     props.children.props.onFocus && props.children.props.onFocus(e);
   }, [dispatch, props.children]);
+  var handleBlur = React.useCallback(function () {
+    var parsedDate;
+    if (customParseDate) {
+      parsedDate = customParseDate(state.startInputValue);
+    } else {
+      parsedDate = parseInputValue({
+        inputValue: state.startInputValue
+      });
+    }
+    dispatch({
+      type: 'START_BLUR'
+    });
+    if (parsedDate && isValid(parsedDate) && !isSameDay(parsedDate, startValue)) {
+      onChange && onChange({
+        startValue: parsedDate,
+        endValue: endValue
+      });
+    }
+  }, [dispatch, onChange, startValue, endValue, customParseDate, state.startInputValue]);
   var onKeyDownCallback = React.useCallback(function (e) {
     if (e.keyCode === containerUtilities.KEY_CODES.ENTER) {
-      dispatch({
-        type: 'START_BLUR'
-      });
       e.preventDefault();
+      handleBlur();
     }
     props.children.props.onKeyDown && props.children.props.onKeyDown(e);
-  }, [dispatch, props.children]);
+  }, [handleBlur, props.children]);
   var onBlurCallback = React.useCallback(function (e) {
-    dispatch({
-      type: 'START_BLUR'
-    });
+    handleBlur();
     props.children.props.onBlur && props.children.props.onBlur(e);
-  }, [dispatch, props.children]);
+  }, [handleBlur, props.children]);
   var childElement = React__default["default"].Children.only(props.children);
   return React__default["default"].cloneElement(childElement, {
-    value: state.startInputValue,
+    value: state.startInputValue || '',
     ref: startInputRef,
     onChange: containerUtilities.composeEventHandlers(childElement.props.onChange, onChangeCallback),
     onFocus: containerUtilities.composeEventHandlers(childElement.props.onFocus, onFocusCallback),
@@ -3814,7 +3820,11 @@ var End = function End(props) {
   var _useDatepickerRangeCo = useDatepickerContext(),
       state = _useDatepickerRangeCo.state,
       dispatch = _useDatepickerRangeCo.dispatch,
-      endInputRef = _useDatepickerRangeCo.endInputRef;
+      onChange = _useDatepickerRangeCo.onChange,
+      startValue = _useDatepickerRangeCo.startValue,
+      endValue = _useDatepickerRangeCo.endValue,
+      endInputRef = _useDatepickerRangeCo.endInputRef,
+      customParseDate = _useDatepickerRangeCo.customParseDate;
   var onChangeCallback = React.useCallback(function (e) {
     dispatch({
       type: 'END_INPUT_ONCHANGE',
@@ -3828,24 +3838,39 @@ var End = function End(props) {
     });
     props.children.props.onFocus && props.children.props.onFocus(e);
   }, [dispatch, props.children]);
+  var handleBlur = React.useCallback(function () {
+    dispatch({
+      type: 'END_BLUR'
+    });
+    var parsedDate;
+    if (customParseDate) {
+      parsedDate = customParseDate(state.endInputValue);
+    } else {
+      parsedDate = parseInputValue({
+        inputValue: state.endInputValue
+      });
+    }
+    if (onChange && parsedDate && isValid(parsedDate) && !isSameDay(parsedDate, endValue)) {
+      onChange && onChange({
+        startValue: startValue,
+        endValue: parsedDate
+      });
+    }
+  }, [dispatch, onChange, startValue, endValue, customParseDate, state.endInputValue]);
   var onKeydownCallback = React.useCallback(function (e) {
     if (e.keyCode === containerUtilities.KEY_CODES.ENTER) {
-      dispatch({
-        type: 'END_BLUR'
-      });
+      handleBlur();
       e.preventDefault();
     }
     props.children.props.onKeyDown && props.children.props.onKeyDown(e);
-  }, [dispatch, props.children]);
+  }, [handleBlur, props.children]);
   var onBlurCallback = React.useCallback(function (e) {
-    dispatch({
-      type: 'END_BLUR'
-    });
+    handleBlur();
     props.children.props.onBlur && props.children.props.onBlur(e);
-  }, [dispatch, props.children]);
+  }, [handleBlur, props.children]);
   var childElement = React__default["default"].Children.only(props.children);
   return React__default["default"].cloneElement(childElement, {
-    value: state.endInputValue,
+    value: state.endInputValue || '',
     ref: endInputRef,
     onChange: containerUtilities.composeEventHandlers(childElement.props.onChange, onChangeCallback),
     onFocus: containerUtilities.composeEventHandlers(childElement.props.onFocus, onFocusCallback),
@@ -3873,6 +3898,9 @@ var Month = React.forwardRef(function (_ref, ref) {
       startValue = _ref.startValue,
       endValue = _ref.endValue,
       hoverDate = _ref.hoverDate;
+  var _useDatepickerRangeCo = useDatepickerContext(),
+      state = _useDatepickerRangeCo.state,
+      onChange = _useDatepickerRangeCo.onChange;
   var headerLabelFormatter = React.useCallback(function (date) {
     var formatter = new Intl.DateTimeFormat(locale, {
       month: 'long',
@@ -3988,6 +4016,55 @@ var Month = React.forwardRef(function (_ref, ref) {
             type: 'CLICK_DATE',
             value: date
           });
+          if (onChange) {
+            if (state.isStartFocused) {
+              if (endValue !== undefined && (isBefore(date, endValue) || isSameDay(date, endValue))) {
+                onChange({
+                  startValue: date,
+                  endValue: endValue
+                });
+              } else {
+                onChange({
+                  startValue: date,
+                  endValue: undefined
+                });
+              }
+            } else if (state.isEndFocused) {
+              if (startValue !== undefined && (isAfter(date, startValue) || isSameDay(date, startValue))) {
+                onChange({
+                  startValue: startValue,
+                  endValue: date
+                });
+              } else {
+                onChange({
+                  startValue: date,
+                  endValue: undefined
+                });
+              }
+            } else if (startValue === undefined) {
+              onChange({
+                startValue: date,
+                endValue: undefined
+              });
+            } else if (endValue === undefined) {
+              if (isBefore(date, startValue)) {
+                onChange({
+                  startValue: date,
+                  endValue: undefined
+                });
+              } else {
+                onChange({
+                  startValue: startValue,
+                  endValue: date
+                });
+              }
+            } else {
+              onChange({
+                startValue: date,
+                endValue: undefined
+              });
+            }
+          }
         }
       },
       onMouseEnter: function onMouseEnter() {
@@ -4047,12 +4124,11 @@ var Calendar = React.forwardRef(function (props, ref) {
       minValue = _useDatepickerRangeCo.minValue,
       maxValue = _useDatepickerRangeCo.maxValue,
       startValue = _useDatepickerRangeCo.startValue,
-      endValue = _useDatepickerRangeCo.endValue,
-      onChange = _useDatepickerRangeCo.onChange;
+      endValue = _useDatepickerRangeCo.endValue;
   return React__default["default"].createElement(StyledRangeCalendar, _extends$2({
     ref: ref,
     "data-garden-id": "datepickers.range",
-    "data-garden-version": '8.48.2'
+    "data-garden-version": '8.49.2'
   }, props), React__default["default"].createElement(Month, {
     locale: locale,
     displayDate: state.previewDate,
@@ -4063,7 +4139,6 @@ var Calendar = React.forwardRef(function (props, ref) {
     maxValue: maxValue,
     startValue: startValue,
     endValue: endValue,
-    onChange: onChange,
     hoverDate: state.hoverDate
   }), React__default["default"].createElement(Month, {
     locale: locale,
@@ -4075,7 +4150,6 @@ var Calendar = React.forwardRef(function (props, ref) {
     maxValue: maxValue,
     startValue: startValue,
     endValue: endValue,
-    onChange: onChange,
     hoverDate: state.hoverDate
   }));
 });
@@ -4097,7 +4171,6 @@ var DatepickerRangeComponent = function DatepickerRangeComponent(props) {
     locale: locale,
     formatDate: formatDate,
     endValue: endValue,
-    onChange: onChange,
     customParseDate: customParseDate
   }), [startValue, endValue, locale, formatDate, onChange, customParseDate]);
   var _useReducer = React.useReducer(reducer, retrieveInitialState(props)),
@@ -4140,9 +4213,10 @@ var DatepickerRangeComponent = function DatepickerRangeComponent(props) {
       endValue: endValue,
       onChange: onChange,
       startInputRef: startInputRef,
-      endInputRef: endInputRef
+      endInputRef: endInputRef,
+      customParseDate: customParseDate
     };
-  }, [state, dispatch, isCompact, locale, minValue, maxValue, startValue, endValue, onChange, startInputRef, endInputRef]);
+  }, [state, dispatch, isCompact, locale, minValue, maxValue, startValue, endValue, onChange, startInputRef, endInputRef, customParseDate]);
   return React__default["default"].createElement(DatepickerRangeContext.Provider, {
     value: value
   }, children);

package/dist/index.esm.js

@@ -388,7 +388,7 @@ function getDate(dirtyDate) {
 var COMPONENT_ID$b = 'datepickers.menu';
 var StyledMenu = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$b,
-  'data-garden-version': '8.48.2'
+  'data-garden-version': '8.49.2'
 }).withConfig({
   displayName: "StyledMenu",
   componentId: "sc-1npbkk0-0"
@@ -3482,7 +3482,6 @@ var datepickerRangeReducer = function datepickerRangeReducer(_ref3) {
       endValue = _ref3.endValue,
       locale = _ref3.locale,
       formatDate = _ref3.formatDate,
-      onChange = _ref3.onChange,
       customParseDate = _ref3.customParseDate;
   return function (state, action) {
     switch (action.type) {
@@ -3528,12 +3527,6 @@ var datepickerRangeReducer = function datepickerRangeReducer(_ref3) {
               inputValue: state.startInputValue
             });
           }
-          if (onChange && parsedDate && isValid(parsedDate) && !isSameDay(parsedDate, startValue)) {
-            onChange({
-              startValue: parsedDate,
-              endValue: endValue
-            });
-          }
           var startInputValue = formatValue({
             value: parsedDate,
             locale: locale,
@@ -3558,12 +3551,6 @@ var datepickerRangeReducer = function datepickerRangeReducer(_ref3) {
               inputValue: state.endInputValue
             });
           }
-          if (onChange && _parsedDate && isValid(_parsedDate) && !isSameDay(_parsedDate, endValue)) {
-            onChange({
-              startValue: startValue,
-              endValue: _parsedDate
-            });
-          }
           var endInputValue = formatValue({
             value: _parsedDate,
             locale: locale,
@@ -3621,54 +3608,54 @@ var datepickerRangeReducer = function datepickerRangeReducer(_ref3) {
           });
         }
       case 'CLICK_DATE':
-        if (onChange) {
-          if (state.isStartFocused) {
-            if (endValue !== undefined && (isBefore(action.value, endValue) || isSameDay(action.value, endValue))) {
-              onChange({
-                startValue: action.value,
-                endValue: endValue
-              });
-            } else {
-              onChange({
-                startValue: action.value,
-                endValue: undefined
-              });
-            }
-          } else if (state.isEndFocused) {
-            if (startValue !== undefined && (isAfter(action.value, startValue) || isSameDay(action.value, startValue))) {
-              onChange({
-                startValue: startValue,
-                endValue: action.value
-              });
-            } else {
-              onChange({
-                startValue: action.value,
-                endValue: undefined
-              });
-            }
-          } else if (startValue === undefined) {
-            onChange({
-              startValue: action.value,
-              endValue: undefined
+        if (state.isStartFocused) {
+          if (endValue !== undefined && (isBefore(action.value, endValue) || isSameDay(action.value, endValue))) {
+            return _objectSpread2(_objectSpread2({}, state), {}, {
+              startInputValue: formatValue({
+                value: action.value
+              })
             });
-          } else if (endValue === undefined) {
-            if (isBefore(action.value, startValue)) {
-              onChange({
-                startValue: action.value,
-                endValue: undefined
-              });
-            } else {
-              onChange({
-                startValue: startValue,
-                endValue: action.value
-              });
-            }
-          } else {
-            onChange({
-              startValue: action.value,
-              endValue: undefined
+          }
+          return _objectSpread2(_objectSpread2({}, state), {}, {
+            startInputValue: formatValue({
+              value: action.value
+            }),
+            endInputValue: undefined
+          });
+        } else if (state.isEndFocused) {
+          if (startValue !== undefined && (isAfter(action.value, startValue) || isSameDay(action.value, startValue))) {
+            return _objectSpread2(_objectSpread2({}, state), {}, {
+              endInputValue: formatValue({
+                value: action.value
+              })
+            });
+          }
+          return _objectSpread2(_objectSpread2({}, state), {}, {
+            startInputValue: formatValue({
+              value: action.value
+            })
+          });
+        } else if (startValue === undefined) {
+          return _objectSpread2(_objectSpread2({}, state), {}, {
+            startInputValue: formatValue({
+              value: action.value
+            }),
+            endInputValue: undefined
+          });
+        } else if (endValue === undefined) {
+          if (isBefore(action.value, startValue)) {
+            return _objectSpread2(_objectSpread2({}, state), {}, {
+              startInputValue: formatValue({
+                value: action.value
+              }),
+              endInputValue: undefined
             });
           }
+          return _objectSpread2(_objectSpread2({}, state), {}, {
+            endInputValue: formatValue({
+              value: action.value
+            })
+          });
         }
         return state;
       case 'START_INPUT_ONCHANGE':
@@ -3741,7 +3728,11 @@ var Start = function Start(props) {
   var _useDatepickerRangeCo = useDatepickerContext(),
       state = _useDatepickerRangeCo.state,
       dispatch = _useDatepickerRangeCo.dispatch,
-      startInputRef = _useDatepickerRangeCo.startInputRef;
+      onChange = _useDatepickerRangeCo.onChange,
+      startValue = _useDatepickerRangeCo.startValue,
+      endValue = _useDatepickerRangeCo.endValue,
+      startInputRef = _useDatepickerRangeCo.startInputRef,
+      customParseDate = _useDatepickerRangeCo.customParseDate;
   var onChangeCallback = useCallback(function (e) {
     dispatch({
       type: 'START_INPUT_ONCHANGE',
@@ -3755,24 +3746,39 @@ var Start = function Start(props) {
     });
     props.children.props.onFocus && props.children.props.onFocus(e);
   }, [dispatch, props.children]);
+  var handleBlur = useCallback(function () {
+    var parsedDate;
+    if (customParseDate) {
+      parsedDate = customParseDate(state.startInputValue);
+    } else {
+      parsedDate = parseInputValue({
+        inputValue: state.startInputValue
+      });
+    }
+    dispatch({
+      type: 'START_BLUR'
+    });
+    if (parsedDate && isValid(parsedDate) && !isSameDay(parsedDate, startValue)) {
+      onChange && onChange({
+        startValue: parsedDate,
+        endValue: endValue
+      });
+    }
+  }, [dispatch, onChange, startValue, endValue, customParseDate, state.startInputValue]);
   var onKeyDownCallback = useCallback(function (e) {
     if (e.keyCode === KEY_CODES.ENTER) {
-      dispatch({
-        type: 'START_BLUR'
-      });
       e.preventDefault();
+      handleBlur();
     }
     props.children.props.onKeyDown && props.children.props.onKeyDown(e);
-  }, [dispatch, props.children]);
+  }, [handleBlur, props.children]);
   var onBlurCallback = useCallback(function (e) {
-    dispatch({
-      type: 'START_BLUR'
-    });
+    handleBlur();
     props.children.props.onBlur && props.children.props.onBlur(e);
-  }, [dispatch, props.children]);
+  }, [handleBlur, props.children]);
   var childElement = React__default.Children.only(props.children);
   return React__default.cloneElement(childElement, {
-    value: state.startInputValue,
+    value: state.startInputValue || '',
     ref: startInputRef,
     onChange: composeEventHandlers(childElement.props.onChange, onChangeCallback),
     onFocus: composeEventHandlers(childElement.props.onFocus, onFocusCallback),
@@ -3786,7 +3792,11 @@ var End = function End(props) {
   var _useDatepickerRangeCo = useDatepickerContext(),
       state = _useDatepickerRangeCo.state,
       dispatch = _useDatepickerRangeCo.dispatch,
-      endInputRef = _useDatepickerRangeCo.endInputRef;
+      onChange = _useDatepickerRangeCo.onChange,
+      startValue = _useDatepickerRangeCo.startValue,
+      endValue = _useDatepickerRangeCo.endValue,
+      endInputRef = _useDatepickerRangeCo.endInputRef,
+      customParseDate = _useDatepickerRangeCo.customParseDate;
   var onChangeCallback = useCallback(function (e) {
     dispatch({
       type: 'END_INPUT_ONCHANGE',
@@ -3800,24 +3810,39 @@ var End = function End(props) {
     });
     props.children.props.onFocus && props.children.props.onFocus(e);
   }, [dispatch, props.children]);
+  var handleBlur = useCallback(function () {
+    dispatch({
+      type: 'END_BLUR'
+    });
+    var parsedDate;
+    if (customParseDate) {
+      parsedDate = customParseDate(state.endInputValue);
+    } else {
+      parsedDate = parseInputValue({
+        inputValue: state.endInputValue
+      });
+    }
+    if (onChange && parsedDate && isValid(parsedDate) && !isSameDay(parsedDate, endValue)) {
+      onChange && onChange({
+        startValue: startValue,
+        endValue: parsedDate
+      });
+    }
+  }, [dispatch, onChange, startValue, endValue, customParseDate, state.endInputValue]);
   var onKeydownCallback = useCallback(function (e) {
     if (e.keyCode === KEY_CODES.ENTER) {
-      dispatch({
-        type: 'END_BLUR'
-      });
+      handleBlur();
       e.preventDefault();
     }
     props.children.props.onKeyDown && props.children.props.onKeyDown(e);
-  }, [dispatch, props.children]);
+  }, [handleBlur, props.children]);
   var onBlurCallback = useCallback(function (e) {
-    dispatch({
-      type: 'END_BLUR'
-    });
+    handleBlur();
     props.children.props.onBlur && props.children.props.onBlur(e);
-  }, [dispatch, props.children]);
+  }, [handleBlur, props.children]);
   var childElement = React__default.Children.only(props.children);
   return React__default.cloneElement(childElement, {
-    value: state.endInputValue,
+    value: state.endInputValue || '',
     ref: endInputRef,
     onChange: composeEventHandlers(childElement.props.onChange, onChangeCallback),
     onFocus: composeEventHandlers(childElement.props.onFocus, onFocusCallback),
@@ -3845,6 +3870,9 @@ var Month = forwardRef(function (_ref, ref) {
       startValue = _ref.startValue,
       endValue = _ref.endValue,
       hoverDate = _ref.hoverDate;
+  var _useDatepickerRangeCo = useDatepickerContext(),
+      state = _useDatepickerRangeCo.state,
+      onChange = _useDatepickerRangeCo.onChange;
   var headerLabelFormatter = useCallback(function (date) {
     var formatter = new Intl.DateTimeFormat(locale, {
       month: 'long',
@@ -3960,6 +3988,55 @@ var Month = forwardRef(function (_ref, ref) {
             type: 'CLICK_DATE',
             value: date
           });
+          if (onChange) {
+            if (state.isStartFocused) {
+              if (endValue !== undefined && (isBefore(date, endValue) || isSameDay(date, endValue))) {
+                onChange({
+                  startValue: date,
+                  endValue: endValue
+                });
+              } else {
+                onChange({
+                  startValue: date,
+                  endValue: undefined
+                });
+              }
+            } else if (state.isEndFocused) {
+              if (startValue !== undefined && (isAfter(date, startValue) || isSameDay(date, startValue))) {
+                onChange({
+                  startValue: startValue,
+                  endValue: date
+                });
+              } else {
+                onChange({
+                  startValue: date,
+                  endValue: undefined
+                });
+              }
+            } else if (startValue === undefined) {
+              onChange({
+                startValue: date,
+                endValue: undefined
+              });
+            } else if (endValue === undefined) {
+              if (isBefore(date, startValue)) {
+                onChange({
+                  startValue: date,
+                  endValue: undefined
+                });
+              } else {
+                onChange({
+                  startValue: startValue,
+                  endValue: date
+                });
+              }
+            } else {
+              onChange({
+                startValue: date,
+                endValue: undefined
+              });
+            }
+          }
         }
       },
       onMouseEnter: function onMouseEnter() {
@@ -4019,12 +4096,11 @@ var Calendar = forwardRef(function (props, ref) {
       minValue = _useDatepickerRangeCo.minValue,
       maxValue = _useDatepickerRangeCo.maxValue,
       startValue = _useDatepickerRangeCo.startValue,
-      endValue = _useDatepickerRangeCo.endValue,
-      onChange = _useDatepickerRangeCo.onChange;
+      endValue = _useDatepickerRangeCo.endValue;
   return React__default.createElement(StyledRangeCalendar, _extends$2({
     ref: ref,
     "data-garden-id": "datepickers.range",
-    "data-garden-version": '8.48.2'
+    "data-garden-version": '8.49.2'
   }, props), React__default.createElement(Month, {
     locale: locale,
     displayDate: state.previewDate,
@@ -4035,7 +4111,6 @@ var Calendar = forwardRef(function (props, ref) {
     maxValue: maxValue,
     startValue: startValue,
     endValue: endValue,
-    onChange: onChange,
     hoverDate: state.hoverDate
   }), React__default.createElement(Month, {
     locale: locale,
@@ -4047,7 +4122,6 @@ var Calendar = forwardRef(function (props, ref) {
     maxValue: maxValue,
     startValue: startValue,
     endValue: endValue,
-    onChange: onChange,
     hoverDate: state.hoverDate
   }));
 });
@@ -4069,7 +4143,6 @@ var DatepickerRangeComponent = function DatepickerRangeComponent(props) {
     locale: locale,
     formatDate: formatDate,
     endValue: endValue,
-    onChange: onChange,
     customParseDate: customParseDate
   }), [startValue, endValue, locale, formatDate, onChange, customParseDate]);
   var _useReducer = useReducer(reducer, retrieveInitialState(props)),
@@ -4112,9 +4185,10 @@ var DatepickerRangeComponent = function DatepickerRangeComponent(props) {
       endValue: endValue,
       onChange: onChange,
       startInputRef: startInputRef,
-      endInputRef: endInputRef
+      endInputRef: endInputRef,
+      customParseDate: customParseDate
     };
-  }, [state, dispatch, isCompact, locale, minValue, maxValue, startValue, endValue, onChange, startInputRef, endInputRef]);
+  }, [state, dispatch, isCompact, locale, minValue, maxValue, startValue, endValue, onChange, startInputRef, endInputRef, customParseDate]);
   return React__default.createElement(DatepickerRangeContext.Provider, {
     value: value
   }, children);

package/dist/typings/elements/DatepickerRange/components/Month.d.ts

@@ -17,10 +17,6 @@ interface IMonthProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
     maxValue?: Date;
     startValue?: Date;
     endValue?: Date;
-    onChange?: (values: {
-        startValue?: Date;
-        endValue?: Date;
-    }) => void;
     hoverDate?: Date;
 }
 export declare const Month: React.ForwardRefExoticComponent<IMonthProps & React.RefAttributes<HTMLDivElement>>;

package/dist/typings/elements/DatepickerRange/utils/datepicker-range-reducer.d.ts

@@ -13,6 +13,20 @@ export interface IDatepickerRangeState {
     startInputValue?: string;
     endInputValue?: string;
 }
+/**
+ * Format date value to a localized string
+ */
+export declare function formatValue({ value, locale, formatDate }: {
+    value?: Date;
+    formatDate?: any;
+    locale?: string;
+}): string;
+/**
+ * Parse string input value using current locale and date formats
+ */
+export declare function parseInputValue({ inputValue }: {
+    inputValue?: string;
+}): Date;
 export declare type DatepickerRangeAction = {
     type: 'HOVER_DATE';
     value?: Date;
@@ -44,15 +58,11 @@ export declare type DatepickerRangeAction = {
     type: 'CONTROLLED_END_VALUE_CHANGE';
     value?: Date;
 };
-export declare const datepickerRangeReducer: ({ startValue, endValue, locale, formatDate, onChange, customParseDate }: {
+export declare const datepickerRangeReducer: ({ startValue, endValue, locale, formatDate, customParseDate }: {
     startValue?: Date | undefined;
     endValue?: Date | undefined;
     locale?: string | undefined;
     formatDate?: any;
-    onChange?: ((values: {
-        startValue?: Date | undefined;
-        endValue?: Date | undefined;
-    }) => void) | undefined;
     customParseDate?: ((inputValue?: string | undefined) => Date) | undefined;
 }) => (state: IDatepickerRangeState, action: DatepickerRangeAction) => IDatepickerRangeState;
 /**

package/dist/typings/elements/DatepickerRange/utils/useDatepickerRangeContext.d.ts

@@ -21,6 +21,7 @@ export interface IDatepickerRangeContext {
     }) => void;
     startInputRef: MutableRefObject<HTMLInputElement | undefined>;
     endInputRef: MutableRefObject<HTMLInputElement | undefined>;
+    customParseDate?: (inputValue?: string) => Date;
 }
 export declare const DatepickerRangeContext: import("react").Context<IDatepickerRangeContext | undefined>;
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zendeskgarden/react-datepickers",
-  "version": "8.48.2",
+  "version": "8.49.2",
   "description": "Components relating to datepickers in the Garden Design System",
   "license": "Apache-2.0",
   "author": "Zendesk Garden <garden@zendesk.com>",
@@ -33,7 +33,7 @@
     "styled-components": "^4.2.0 || ^5.0.0"
   },
   "devDependencies": {
-    "@zendeskgarden/react-theming": "^8.48.2",
+    "@zendeskgarden/react-theming": "^8.49.2",
     "@zendeskgarden/svg-icons": "6.30.2"
   },
   "keywords": [
@@ -46,5 +46,5 @@
     "access": "public"
   },
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "c514c351b0973fe1f9853853c536d4fac10f4ce4"
+  "gitHead": "fd7769285a2f4bc1169c63f4db57a85a6e793027"
 }