@zendeskgarden/react-datepickers 8.49.1 → 8.49.4

package/dist/index.cjs.js

@@ -195,6 +195,9 @@ function _nonIterableRest() {
   throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
 
+var SHARED_PLACEMENT = ['auto', 'top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end'];
+var PLACEMENT = [].concat(SHARED_PLACEMENT, ['end', 'end-top', 'end-bottom', 'start', 'start-top', 'start-bottom']);
+
 function getPopperPlacement(gardenPlacement) {
   switch (gardenPlacement) {
     case 'end':
@@ -416,7 +419,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.49.1'
+  'data-garden-version': '8.49.4'
 }).withConfig({
   displayName: "StyledMenu",
   componentId: "sc-1npbkk0-0"
@@ -3441,7 +3444,7 @@ Datepicker.propTypes = {
   isCompact: PropTypes__default["default"].bool,
   customParseDate: PropTypes__default["default"].any,
   refKey: PropTypes__default["default"].string,
-  placement: PropTypes__default["default"].oneOf(['auto', 'top', 'top-start', 'top-end', 'end', 'end-top', 'end-bottom', 'bottom', 'bottom-start', 'bottom-end', 'start', 'start-top', 'start-bottom']),
+  placement: PropTypes__default["default"].oneOf(PLACEMENT),
   popperModifiers: PropTypes__default["default"].any,
   isAnimated: PropTypes__default["default"].bool,
   eventsEnabled: PropTypes__default["default"].bool,
@@ -3510,7 +3513,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 +3558,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 +3582,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 +3639,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 +3759,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 +3777,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 +3823,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 +3841,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),
@@ -3862,17 +3890,19 @@ function subDays(dirtyDate, dirtyAmount) {
 }
 
 var Month = React.forwardRef(function (_ref, ref) {
-  var locale = _ref.locale,
-      displayDate = _ref.displayDate,
-      isCompact = _ref.isCompact,
+  var displayDate = _ref.displayDate,
       isPreviousHidden = _ref.isPreviousHidden,
-      isNextHidden = _ref.isNextHidden,
-      dispatch = _ref.dispatch,
-      minValue = _ref.minValue,
-      maxValue = _ref.maxValue,
-      startValue = _ref.startValue,
-      endValue = _ref.endValue,
-      hoverDate = _ref.hoverDate;
+      isNextHidden = _ref.isNextHidden;
+  var _useDatepickerRangeCo = useDatepickerContext(),
+      state = _useDatepickerRangeCo.state,
+      dispatch = _useDatepickerRangeCo.dispatch,
+      locale = _useDatepickerRangeCo.locale,
+      isCompact = _useDatepickerRangeCo.isCompact,
+      minValue = _useDatepickerRangeCo.minValue,
+      maxValue = _useDatepickerRangeCo.maxValue,
+      startValue = _useDatepickerRangeCo.startValue,
+      endValue = _useDatepickerRangeCo.endValue,
+      onChange = _useDatepickerRangeCo.onChange;
   var headerLabelFormatter = React.useCallback(function (date) {
     var formatter = new Intl.DateTimeFormat(locale, {
       month: 'long',
@@ -3947,11 +3977,11 @@ var Month = React.forwardRef(function (_ref, ref) {
     var isHighlighted = false;
     if (startValue !== undefined && endValue !== undefined) {
       isHighlighted = (isAfter(date, startValue) || isSameDay(date, startValue)) && (isBefore(date, endValue) || isSameDay(date, endValue)) && !isSameDay(startValue, endValue);
-    } else if (startValue !== undefined && hoverDate !== undefined) {
-      isHighlighted = (isAfter(date, startValue) || isSameDay(date, startValue)) && (isBefore(date, hoverDate) || isSameDay(date, hoverDate));
+    } else if (startValue !== undefined && state.hoverDate !== undefined) {
+      isHighlighted = (isAfter(date, startValue) || isSameDay(date, startValue)) && (isBefore(date, state.hoverDate) || isSameDay(date, state.hoverDate));
     }
     var isHighlightStart = isHighlighted && startValue && isSameDay(date, startValue) || false;
-    var isHighlightEnd = isHighlighted && endValue && isSameDay(date, endValue) || hoverDate && isSameDay(date, hoverDate) && !isBefore(date, endValue) || false;
+    var isHighlightEnd = isHighlighted && endValue && isSameDay(date, endValue) || state.hoverDate && isSameDay(date, state.hoverDate) && !isBefore(date, endValue) || false;
     var isInvalidDateRange = endValue && startValue && compareAsc(endValue, startValue) === -1 || false;
     if (minValue) {
       if (startValue) {
@@ -3988,6 +4018,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() {
@@ -4040,43 +4119,17 @@ Month.displayName = 'Month';
 
 var Calendar = React.forwardRef(function (props, ref) {
   var _useDatepickerRangeCo = useDatepickerContext(),
-      state = _useDatepickerRangeCo.state,
-      dispatch = _useDatepickerRangeCo.dispatch,
-      locale = _useDatepickerRangeCo.locale,
-      isCompact = _useDatepickerRangeCo.isCompact,
-      minValue = _useDatepickerRangeCo.minValue,
-      maxValue = _useDatepickerRangeCo.maxValue,
-      startValue = _useDatepickerRangeCo.startValue,
-      endValue = _useDatepickerRangeCo.endValue,
-      onChange = _useDatepickerRangeCo.onChange;
+      state = _useDatepickerRangeCo.state;
   return React__default["default"].createElement(StyledRangeCalendar, _extends$2({
     ref: ref,
     "data-garden-id": "datepickers.range",
-    "data-garden-version": '8.49.1'
+    "data-garden-version": '8.49.4'
   }, props), React__default["default"].createElement(Month, {
-    locale: locale,
     displayDate: state.previewDate,
-    isCompact: isCompact,
-    isNextHidden: true,
-    dispatch: dispatch,
-    minValue: minValue,
-    maxValue: maxValue,
-    startValue: startValue,
-    endValue: endValue,
-    onChange: onChange,
-    hoverDate: state.hoverDate
+    isNextHidden: true
   }), React__default["default"].createElement(Month, {
-    locale: locale,
     displayDate: addMonths(state.previewDate, 1),
-    isCompact: isCompact,
-    isPreviousHidden: true,
-    dispatch: dispatch,
-    minValue: minValue,
-    maxValue: maxValue,
-    startValue: startValue,
-    endValue: endValue,
-    onChange: onChange,
-    hoverDate: state.hoverDate
+    isPreviousHidden: true
   }));
 });
 Calendar.displayName = 'DatepickerRange.Calendar';
@@ -4097,7 +4150,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 +4192,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

@@ -167,6 +167,9 @@ function _nonIterableRest() {
   throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
 
+var SHARED_PLACEMENT = ['auto', 'top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end'];
+var PLACEMENT = [].concat(SHARED_PLACEMENT, ['end', 'end-top', 'end-bottom', 'start', 'start-top', 'start-bottom']);
+
 function getPopperPlacement(gardenPlacement) {
   switch (gardenPlacement) {
     case 'end':
@@ -388,7 +391,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.49.1'
+  'data-garden-version': '8.49.4'
 }).withConfig({
   displayName: "StyledMenu",
   componentId: "sc-1npbkk0-0"
@@ -3413,7 +3416,7 @@ Datepicker.propTypes = {
   isCompact: PropTypes.bool,
   customParseDate: PropTypes.any,
   refKey: PropTypes.string,
-  placement: PropTypes.oneOf(['auto', 'top', 'top-start', 'top-end', 'end', 'end-top', 'end-bottom', 'bottom', 'bottom-start', 'bottom-end', 'start', 'start-top', 'start-bottom']),
+  placement: PropTypes.oneOf(PLACEMENT),
   popperModifiers: PropTypes.any,
   isAnimated: PropTypes.bool,
   eventsEnabled: PropTypes.bool,
@@ -3482,7 +3485,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 +3530,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 +3554,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 +3611,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 +3731,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 +3749,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 +3795,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 +3813,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),
@@ -3834,17 +3862,19 @@ function subDays(dirtyDate, dirtyAmount) {
 }
 
 var Month = forwardRef(function (_ref, ref) {
-  var locale = _ref.locale,
-      displayDate = _ref.displayDate,
-      isCompact = _ref.isCompact,
+  var displayDate = _ref.displayDate,
       isPreviousHidden = _ref.isPreviousHidden,
-      isNextHidden = _ref.isNextHidden,
-      dispatch = _ref.dispatch,
-      minValue = _ref.minValue,
-      maxValue = _ref.maxValue,
-      startValue = _ref.startValue,
-      endValue = _ref.endValue,
-      hoverDate = _ref.hoverDate;
+      isNextHidden = _ref.isNextHidden;
+  var _useDatepickerRangeCo = useDatepickerContext(),
+      state = _useDatepickerRangeCo.state,
+      dispatch = _useDatepickerRangeCo.dispatch,
+      locale = _useDatepickerRangeCo.locale,
+      isCompact = _useDatepickerRangeCo.isCompact,
+      minValue = _useDatepickerRangeCo.minValue,
+      maxValue = _useDatepickerRangeCo.maxValue,
+      startValue = _useDatepickerRangeCo.startValue,
+      endValue = _useDatepickerRangeCo.endValue,
+      onChange = _useDatepickerRangeCo.onChange;
   var headerLabelFormatter = useCallback(function (date) {
     var formatter = new Intl.DateTimeFormat(locale, {
       month: 'long',
@@ -3919,11 +3949,11 @@ var Month = forwardRef(function (_ref, ref) {
     var isHighlighted = false;
     if (startValue !== undefined && endValue !== undefined) {
       isHighlighted = (isAfter(date, startValue) || isSameDay(date, startValue)) && (isBefore(date, endValue) || isSameDay(date, endValue)) && !isSameDay(startValue, endValue);
-    } else if (startValue !== undefined && hoverDate !== undefined) {
-      isHighlighted = (isAfter(date, startValue) || isSameDay(date, startValue)) && (isBefore(date, hoverDate) || isSameDay(date, hoverDate));
+    } else if (startValue !== undefined && state.hoverDate !== undefined) {
+      isHighlighted = (isAfter(date, startValue) || isSameDay(date, startValue)) && (isBefore(date, state.hoverDate) || isSameDay(date, state.hoverDate));
     }
     var isHighlightStart = isHighlighted && startValue && isSameDay(date, startValue) || false;
-    var isHighlightEnd = isHighlighted && endValue && isSameDay(date, endValue) || hoverDate && isSameDay(date, hoverDate) && !isBefore(date, endValue) || false;
+    var isHighlightEnd = isHighlighted && endValue && isSameDay(date, endValue) || state.hoverDate && isSameDay(date, state.hoverDate) && !isBefore(date, endValue) || false;
     var isInvalidDateRange = endValue && startValue && compareAsc(endValue, startValue) === -1 || false;
     if (minValue) {
       if (startValue) {
@@ -3960,6 +3990,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() {
@@ -4012,43 +4091,17 @@ Month.displayName = 'Month';
 
 var Calendar = forwardRef(function (props, ref) {
   var _useDatepickerRangeCo = useDatepickerContext(),
-      state = _useDatepickerRangeCo.state,
-      dispatch = _useDatepickerRangeCo.dispatch,
-      locale = _useDatepickerRangeCo.locale,
-      isCompact = _useDatepickerRangeCo.isCompact,
-      minValue = _useDatepickerRangeCo.minValue,
-      maxValue = _useDatepickerRangeCo.maxValue,
-      startValue = _useDatepickerRangeCo.startValue,
-      endValue = _useDatepickerRangeCo.endValue,
-      onChange = _useDatepickerRangeCo.onChange;
+      state = _useDatepickerRangeCo.state;
   return React__default.createElement(StyledRangeCalendar, _extends$2({
     ref: ref,
     "data-garden-id": "datepickers.range",
-    "data-garden-version": '8.49.1'
+    "data-garden-version": '8.49.4'
   }, props), React__default.createElement(Month, {
-    locale: locale,
     displayDate: state.previewDate,
-    isCompact: isCompact,
-    isNextHidden: true,
-    dispatch: dispatch,
-    minValue: minValue,
-    maxValue: maxValue,
-    startValue: startValue,
-    endValue: endValue,
-    onChange: onChange,
-    hoverDate: state.hoverDate
+    isNextHidden: true
   }), React__default.createElement(Month, {
-    locale: locale,
     displayDate: addMonths(state.previewDate, 1),
-    isCompact: isCompact,
-    isPreviousHidden: true,
-    dispatch: dispatch,
-    minValue: minValue,
-    maxValue: maxValue,
-    startValue: startValue,
-    endValue: endValue,
-    onChange: onChange,
-    hoverDate: state.hoverDate
+    isPreviousHidden: true
   }));
 });
 Calendar.displayName = 'DatepickerRange.Calendar';
@@ -4069,7 +4122,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 +4164,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/Datepicker/Datepicker.d.ts

@@ -4,77 +4,9 @@
  * Use of this source code is governed under the Apache License, Version 2.0
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
-import React, { HTMLAttributes } from 'react';
-import { Modifiers } from 'popper.js';
-import { GARDEN_PLACEMENT } from './utils/garden-placements';
+import React from 'react';
+import { IDatepickerProps } from '../../types';
 /**
  * @extends HTMLAttributes<HTMLDivElement>
  */
-export interface IDatepickerProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
-    /**
-     * Sets the selected date
-     */
-    value?: Date;
-    /**
-     * Handles date change
-     *
-     * @param {Date} date The selected date
-     */
-    onChange?: (date: Date) => void;
-    /**
-     * Customizes the input element's date formatting
-     *
-     *  @param {Date} date The selected date
-     *  @returns {string} a formatted date string
-     */
-    formatDate?: (date: Date) => string;
-    /**
-     * Applies locale-based formatting.
-     * Accepts all valid `Intl` [locales](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#Locale_identification_and_negotiation).
-     */
-    locale?: string;
-    /**
-     * Disables dates before this value on the calendar
-     */
-    minValue?: Date;
-    /**
-     * Disables dates after this value on the calendar
-     */
-    maxValue?: Date;
-    /**
-     * Applies compact styling
-     */
-    isCompact?: boolean;
-    /**
-     * Overrides default date parsing
-     *
-     * @param {string} inputValue A localized input value
-     * @returns {Date} the parsed date
-     */
-    customParseDate?: (inputValue: string) => Date;
-    /**
-     * Defines the ref key used to position the calendar
-     */
-    refKey?: string;
-    /**
-     * Adjusts the position of the calendar
-     **/
-    placement?: GARDEN_PLACEMENT;
-    /**
-     * Passes configuration options to the [Popper instance](https://popper.js.org/docs/v2/modifiers/)
-     */
-    popperModifiers?: Modifiers;
-    /**
-     * Animates the calendar
-     */
-    isAnimated?: boolean;
-    /**
-     * Allows the calendar to reposition during browser resize events
-     */
-    eventsEnabled?: boolean;
-    /**
-     * Sets the `z-index` of the calendar
-     */
-    zIndex?: number;
-}
 export declare const Datepicker: React.ForwardRefExoticComponent<IDatepickerProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -4,7 +4,7 @@
  * Use of this source code is governed under the Apache License, Version 2.0
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
-import { IDatepickerProps } from '../Datepicker';
+import { IDatepickerProps } from '../../../types';
 export interface IDatepickerState {
     isOpen: boolean;
     previewDate: Date;

package/dist/typings/elements/Datepicker/utils/garden-placements.d.ts

@@ -4,22 +4,18 @@
  * Use of this source code is governed under the Apache License, Version 2.0
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
-import { MENU_POSITION } from '@zendeskgarden/react-theming';
-declare type SHARED_PLACEMENT = 'auto' | 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end';
-export declare type GARDEN_PLACEMENT = SHARED_PLACEMENT | 'end' | 'end-top' | 'end-bottom' | 'start' | 'start-top' | 'start-bottom';
-export declare type POPPER_PLACEMENT = SHARED_PLACEMENT | 'right' | 'right-start' | 'right-end' | 'left' | 'left-start' | 'left-end';
+import { GardenPlacement, PopperPlacement } from '../../../types';
 /**
  * Convert Garden RTL aware placement to Popper.JS valid placement
  */
-export declare function getPopperPlacement(gardenPlacement: GARDEN_PLACEMENT): POPPER_PLACEMENT;
+export declare function getPopperPlacement(gardenPlacement: GardenPlacement): PopperPlacement;
 /**
  * Convert Garden RTL aware placement to RTL equivalent Popper.JS placement
  * @param {String} gardenPlacement
  */
-export declare function getRtlPopperPlacement(gardenPlacement: GARDEN_PLACEMENT): POPPER_PLACEMENT;
+export declare function getRtlPopperPlacement(gardenPlacement: GardenPlacement): PopperPlacement;
 /**
  * Convert Popper.JS placement to corresponding menu position
  * @param {String} popperPlacement
  */
-export declare function getMenuPosition(popperPlacement?: POPPER_PLACEMENT): MENU_POSITION;
-export {};
+export declare function getMenuPosition(popperPlacement?: PopperPlacement): "top" | "bottom" | "right" | "left";

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

@@ -6,61 +6,10 @@
  */
 import { PropsWithChildren } from 'react';
 import PropTypes from 'prop-types';
+import { IDatepickerRangeProps } from '../../types';
 import { Start } from './components/Start';
 import { End } from './components/End';
 import { Calendar } from './components/Calendar';
-export interface IDatepickerRangeProps {
-    /**
-     * Applies locale-based formatting.
-     * Accepts all valid `Intl` [locales](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#Locale_identification_and_negotiation).
-     */
-    locale?: string;
-    /**
-     * Sets the start date
-     */
-    startValue?: Date;
-    /**
-     * Sets the end date
-     */
-    endValue?: Date;
-    /**
-     * Disables dates before this value on the calendar
-     */
-    minValue?: Date;
-    /**
-     * Disables dates after this value on the calendar
-     */
-    maxValue?: Date;
-    /**
-     * Handles start and end date changes
-     *
-     * @param {Object} values The selected dates
-     * @param {Date} [values.startValue] Optional start date
-     * @param {Date} [values.endValue] Optional end date
-     */
-    onChange?: (values: {
-        startValue?: Date;
-        endValue?: Date;
-    }) => void;
-    /**
-     * Adjusts the input element's date formatting
-     *
-     *  @param {Date} date The selected date
-     *  @returns {string} a formatted date string
-     */
-    formatDate?: (date: Date) => string;
-    /**
-     * Overrides the default date parsing
-     *
-     * @param {string} inputValue A date string
-     * @returns {Date} the parsed date
-     */
-    customParseDate?: (inputValue?: string) => Date;
-    /**
-     * Applies compact styling
-     */
-    isCompact?: boolean;
-}
 export declare const DatepickerRange: {
     (props: PropsWithChildren<IDatepickerRangeProps>): JSX.Element;
     propTypes: {

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

@@ -5,23 +5,10 @@
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
 import React, { HTMLAttributes } from 'react';
-import { DatepickerRangeAction } from '../utils/datepicker-range-reducer';
 interface IMonthProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
-    locale?: string;
     displayDate: Date;
-    isCompact?: boolean;
     isPreviousHidden?: boolean;
     isNextHidden?: boolean;
-    dispatch: React.Dispatch<DatepickerRangeAction>;
-    minValue?: Date;
-    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>>;
 export {};

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

@@ -4,7 +4,7 @@
  * Use of this source code is governed under the Apache License, Version 2.0
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
-import { IDatepickerRangeProps } from '../DatepickerRange';
+import { IDatepickerRangeProps } from '../../../types';
 export interface IDatepickerRangeState {
     previewDate: Date;
     hoverDate?: Date;
@@ -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/dist/typings/index.d.ts

@@ -5,7 +5,7 @@
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
 export { Datepicker } from './elements/Datepicker/Datepicker';
-export type { IDatepickerProps } from './elements/Datepicker/Datepicker';
 export { DatepickerRange } from './elements/DatepickerRange/DatepickerRange';
-export type { IDatepickerRangeProps } from './elements/DatepickerRange/DatepickerRange';
-export type { GARDEN_PLACEMENT } from './elements/Datepicker/utils/garden-placements';
+export type { IDatepickerProps, IDatepickerRangeProps, 
+/** @deprecated type can be dereferenced via IDatePickerProps['placement'] */
+GardenPlacement as GARDEN_PLACEMENT } from './types';

package/dist/typings/styled/StyledMenuWrapper.d.ts

@@ -4,12 +4,12 @@
  * Use of this source code is governed under the Apache License, Version 2.0
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
-import { POPPER_PLACEMENT } from '../elements/Datepicker/utils/garden-placements';
+import { PopperPlacement } from '../types';
 interface IStyledMenuWrapperProps {
     isHidden?: boolean;
     isAnimated?: boolean;
     zIndex?: number;
-    placement?: POPPER_PLACEMENT;
+    placement?: PopperPlacement;
 }
 export declare const StyledMenuWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, IStyledMenuWrapperProps, never>;
 export {};

package/dist/typings/types/index.d.ts

@@ -0,0 +1,107 @@
+/**
+ * Copyright Zendesk, Inc.
+ *
+ * Use of this source code is governed under the Apache License, Version 2.0
+ * found at http://www.apache.org/licenses/LICENSE-2.0.
+ */
+import { HTMLAttributes } from 'react';
+import { Modifiers } from 'popper.js';
+export declare const PLACEMENT: readonly ["auto", "top", "top-start", "top-end", "bottom", "bottom-start", "bottom-end", "end", "end-top", "end-bottom", "start", "start-top", "start-bottom"];
+export declare const POPPER_PLACEMENT: readonly ["auto", "top", "top-start", "top-end", "bottom", "bottom-start", "bottom-end", "right", "right-start", "right-end", "left", "left-start", "left-end"];
+export declare type GardenPlacement = typeof PLACEMENT[number];
+export declare type PopperPlacement = typeof POPPER_PLACEMENT[number];
+export interface IDatepickerProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
+    /**
+     * Sets the selected date
+     */
+    value?: Date;
+    /**
+     * Handles date change
+     *
+     * @param {Date} date The selected date
+     */
+    onChange?: (date: Date) => void;
+    /**
+     * Customizes the input element's date formatting
+     *
+     *  @param {Date} date The selected date
+     *  @returns {string} a formatted date string
+     */
+    formatDate?: (date: Date) => string;
+    /**
+     * Applies locale-based formatting.
+     * Accepts all valid `Intl` [locales](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#Locale_identification_and_negotiation).
+     */
+    locale?: string;
+    /**
+     * Disables dates before this value on the calendar
+     */
+    minValue?: Date;
+    /**
+     * Disables dates after this value on the calendar
+     */
+    maxValue?: Date;
+    /**
+     * Applies compact styling
+     */
+    isCompact?: boolean;
+    /**
+     * Overrides default date parsing
+     *
+     * @param {string} inputValue A localized input value
+     * @returns {Date} the parsed date
+     */
+    customParseDate?: (inputValue: string) => Date;
+    /**
+     * Defines the ref key used to position the calendar
+     */
+    refKey?: string;
+    /**
+     * Adjusts the position of the calendar
+     **/
+    placement?: GardenPlacement;
+    /**
+     * Passes configuration options to the [Popper instance](https://popper.js.org/docs/v2/modifiers/)
+     */
+    popperModifiers?: Modifiers;
+    /**
+     * Animates the calendar
+     */
+    isAnimated?: boolean;
+    /**
+     * Allows the calendar to reposition during browser resize events
+     */
+    eventsEnabled?: boolean;
+    /**
+     * Sets the `z-index` of the calendar
+     */
+    zIndex?: number;
+}
+export interface IDatepickerRangeProps extends Pick<IDatepickerProps, 'locale' | 'minValue' | 'maxValue' | 'formatDate' | 'isCompact'> {
+    /**
+     * Sets the start date
+     */
+    startValue?: Date;
+    /**
+     * Sets the end date
+     */
+    endValue?: Date;
+    /**
+     * Handles start and end date changes
+     *
+     * @param {Object} values The selected dates
+     * @param {Date} [values.startValue] Optional start date
+     * @param {Date} [values.endValue] Optional end date
+     */
+    onChange?: (values: {
+        startValue?: Date;
+        endValue?: Date;
+    }) => void;
+    /**
+     * Overrides the default date parsing
+     *
+     * @param {string} inputValue A date string
+     * @returns {Date} the parsed date
+     */
+    customParseDate?: (inputValue?: string) => Date;
+}

package/package.json

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