@zendeskgarden/react-datepickers 9.12.3 → 9.12.4

package/dist/index.cjs.js

@@ -63,7 +63,7 @@ const PLACEMENT = ['auto', ...reactTheming.PLACEMENT];
 const COMPONENT_ID$b = 'datepickers.menu';
 const StyledMenu = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$b,
-  'data-garden-version': '9.12.3'
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledMenu",
   componentId: "sc-1npbkk0-0"
@@ -72,7 +72,7 @@ const StyledMenu = styled__default.default.div.attrs({
 const COMPONENT_ID$a = 'datepickers.menu_wrapper';
 const StyledMenuWrapper = styled__default.default.div.attrs(props => ({
   'data-garden-id': COMPONENT_ID$a,
-  'data-garden-version': '9.12.3',
+  'data-garden-version': '9.12.4',
   className: props.$isAnimated ? 'is-animated' : undefined
 })).withConfig({
   displayName: "StyledMenuWrapper",
@@ -86,18 +86,16 @@ const StyledMenuWrapper = styled__default.default.div.attrs(props => ({
 }), reactTheming.componentStyles);
 
 const COMPONENT_ID$9 = 'datepickers.datepicker';
-const sizeStyles$4 = _ref => {
-  let {
-    $isCompact,
-    theme
-  } = _ref;
+const sizeStyles$4 = ({
+  $isCompact,
+  theme
+}) => {
   const margin = theme.space.base * ($isCompact ? 4 : 5);
   return styled.css(["margin:", "px;"], margin);
 };
-const colorStyles$3 = _ref2 => {
-  let {
-    theme
-  } = _ref2;
+const colorStyles$3 = ({
+  theme
+}) => {
   const foreground = reactTheming.getColor({
     variable: 'foreground.default',
     theme
@@ -106,7 +104,7 @@ const colorStyles$3 = _ref2 => {
 };
 const StyledDatePicker = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$9,
-  'data-garden-version': '9.12.3'
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledDatePicker",
   componentId: "sc-15hwqzh-0"
@@ -115,7 +113,7 @@ const StyledDatePicker = styled__default.default.div.attrs({
 const COMPONENT_ID$8 = 'datepickers.range_calendar';
 const StyledRangeCalendar = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$8,
-  'data-garden-version': '9.12.3'
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledRangeCalendar",
   componentId: "sc-1og46sy-0"
@@ -124,25 +122,23 @@ const StyledRangeCalendar = styled__default.default.div.attrs({
 const COMPONENT_ID$7 = 'datepickers.header';
 const StyledHeader = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$7,
-  'data-garden-version': '9.12.3'
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledHeader",
   componentId: "sc-upq318-0"
 })(["display:flex;width:", "px;", ";"], props => props.$isCompact ? props.theme.space.base * 56 : props.theme.space.base * 70, reactTheming.componentStyles);
 
-const sizeStyles$3 = _ref => {
-  let {
-    $isCompact,
-    theme
-  } = _ref;
+const sizeStyles$3 = ({
+  $isCompact,
+  theme
+}) => {
   const iconSize = theme.iconSizes.md;
   const size = theme.space.base * ($isCompact ? 8 : 10);
   return styled.css(["width:", "px;height:", "px;svg{width:", ";height:", ";}"], size, size, iconSize, iconSize);
 };
-const colorStyles$2 = _ref2 => {
-  let {
-    theme
-  } = _ref2;
+const colorStyles$2 = ({
+  theme
+}) => {
   const foreground = reactTheming.getColor({
     variable: 'foreground.subtle',
     theme
@@ -182,7 +178,7 @@ const colorStyles$2 = _ref2 => {
 const COMPONENT_ID$6 = 'datepickers.header_paddle';
 const StyledHeaderPaddle = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$6,
-  'data-garden-version': '9.12.3'
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledHeaderPaddle",
   componentId: "sc-2oqh0g-0"
@@ -191,7 +187,7 @@ const StyledHeaderPaddle = styled__default.default.div.attrs({
 const COMPONENT_ID$5 = 'datepickers.header_label';
 const StyledHeaderLabel = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '9.12.3'
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledHeaderLabel",
   componentId: "sc-1ryf5ub-0"
@@ -200,18 +196,17 @@ const StyledHeaderLabel = styled__default.default.div.attrs({
 const COMPONENT_ID$4 = 'datepickers.calendar';
 const StyledCalendar = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '9.12.3'
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledCalendar",
   componentId: "sc-g5hoe8-0"
 })(["width:", "px;", ";"], props => props.$isCompact ? props.theme.space.base * 56 : props.theme.space.base * 70, reactTheming.componentStyles);
 
 const COMPONENT_ID$3 = 'datepickers.calendar_item';
-const sizeStyles$2 = _ref => {
-  let {
-    $isCompact,
-    theme
-  } = _ref;
+const sizeStyles$2 = ({
+  $isCompact,
+  theme
+}) => {
   let size;
   if ($isCompact) {
     size = `${theme.space.base * 8}px`;
@@ -222,7 +217,7 @@ const sizeStyles$2 = _ref => {
 };
 const StyledCalendarItem = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '9.12.3'
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledCalendarItem",
   componentId: "sc-143w8wb-0"
@@ -231,19 +226,18 @@ const StyledCalendarItem = styled__default.default.div.attrs({
 const COMPONENT_ID$2 = 'datepickers.day_label';
 const StyledDayLabel = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '9.12.3'
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledDayLabel",
   componentId: "sc-9bh1p7-0"
 })(["display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-size:", ";font-weight:", ";", ";"], props => props.$isCompact ? props.theme.fontSizes.sm : props.theme.fontSizes.md, props => props.theme.fontWeights.semibold, reactTheming.componentStyles);
 
 const COMPONENT_ID$1 = 'datepickers.highlight';
-const sizeStyles$1 = _ref => {
-  let {
-    theme,
-    $isEnd,
-    $isStart
-  } = _ref;
+const sizeStyles$1 = ({
+  theme,
+  $isEnd,
+  $isStart
+}) => {
   let borderRadius;
   const startValue = '0 50% 50% 0;';
   const endValue = '50% 0 0 50%;';
@@ -261,11 +255,10 @@ const sizeStyles$1 = _ref => {
   }
   return styled.css(["border-radius:", ";width:100%;height:100%;"], borderRadius);
 };
-const colorStyles$1 = _ref2 => {
-  let {
-    $isHighlighted,
-    theme
-  } = _ref2;
+const colorStyles$1 = ({
+  $isHighlighted,
+  theme
+}) => {
   return styled.css(["background-color:", ";"], $isHighlighted && reactTheming.getColor({
     variable: 'background.primaryEmphasis',
     transparency: theme.opacity[100],
@@ -274,7 +267,7 @@ const colorStyles$1 = _ref2 => {
 };
 const StyledHighlight = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '9.12.3'
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledHighlight",
   componentId: "sc-16vr32x-0"
@@ -283,13 +276,12 @@ const StyledHighlight = styled__default.default.div.attrs({
 const sizeStyles = () => {
   return styled.css(["border-radius:50%;width:100%;height:100%;"]);
 };
-const colorStyles = _ref => {
-  let {
-    $isToday,
-    $isPreviousMonth,
-    theme,
-    ...props
-  } = _ref;
+const colorStyles = ({
+  $isToday,
+  $isPreviousMonth,
+  theme,
+  ...props
+}) => {
   const isSelected = props['aria-selected'];
   const isDisabled = props['aria-disabled'];
   let backgroundColor = 'inherit';
@@ -356,7 +348,7 @@ const colorStyles = _ref => {
 const COMPONENT_ID = 'datepickers.day';
 const StyledDay = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.12.3'
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledDay",
   componentId: "sc-v42uk5-0"
@@ -480,11 +472,10 @@ var SvgChevronRightStroke = function SvgChevronRightStroke(props) {
   })));
 };
 
-const MonthSelector = _ref => {
-  let {
-    locale,
-    isCompact
-  } = _ref;
+const MonthSelector = ({
+  locale,
+  isCompact
+}) => {
   const {
     state,
     dispatch
@@ -517,15 +508,14 @@ const MonthSelector = _ref => {
   }, React__namespace.default.createElement(SvgChevronRightStroke, null)));
 };
 
-const Calendar$1 = React.forwardRef((_ref, ref) => {
-  let {
-    value,
-    minValue,
-    maxValue,
-    isCompact,
-    locale,
-    weekStartsOn
-  } = _ref;
+const Calendar$1 = React.forwardRef(({
+  value,
+  minValue,
+  maxValue,
+  isCompact,
+  locale,
+  weekStartsOn
+}, ref) => {
   const {
     state,
     dispatch
@@ -606,11 +596,10 @@ const Calendar$1 = React.forwardRef((_ref, ref) => {
 });
 Calendar$1.displayName = 'Calendar';
 
-function parseInputValue$1(_ref) {
-  let {
-    inputValue,
-    customParseDate
-  } = _ref;
+function parseInputValue$1({
+  inputValue,
+  customParseDate
+}) {
   if (customParseDate) {
     return customParseDate(inputValue);
   }
@@ -629,12 +618,11 @@ function parseInputValue$1(_ref) {
   }
   return new Date(NaN);
 }
-function formatInputValue(_ref2) {
-  let {
-    date,
-    locale,
-    formatDate
-  } = _ref2;
+function formatInputValue({
+  date,
+  locale,
+  formatDate
+}) {
   if (!date) {
     return '';
   }
@@ -647,113 +635,110 @@ function formatInputValue(_ref2) {
     year: 'numeric'
   }).format(date);
 }
-const datepickerReducer = _ref3 => {
-  let {
-    value,
-    formatDate,
-    locale,
-    customParseDate,
-    onChange
-  } = _ref3;
-  return (state, action) => {
-    switch (action.type) {
-      case 'OPEN':
+const datepickerReducer = ({
+  value,
+  formatDate,
+  locale,
+  customParseDate,
+  onChange
+}) => (state, action) => {
+  switch (action.type) {
+    case 'OPEN':
+      return {
+        ...state,
+        isOpen: true,
+        previewDate: value || new Date()
+      };
+    case 'CLOSE':
+      {
+        const inputValue = formatInputValue({
+          date: value,
+          locale,
+          formatDate
+        });
         return {
           ...state,
-          isOpen: true,
-          previewDate: value || new Date()
+          isOpen: false,
+          inputValue
         };
-      case 'CLOSE':
-        {
-          const inputValue = formatInputValue({
-            date: value,
-            locale,
-            formatDate
-          });
-          return {
-            ...state,
-            isOpen: false,
-            inputValue
-          };
-        }
-      case 'PREVIEW_NEXT_MONTH':
-        {
-          const previewDate = addMonths.addMonths(state.previewDate, 1);
-          return {
-            ...state,
-            previewDate
-          };
-        }
-      case 'PREVIEW_PREVIOUS_MONTH':
-        {
-          const previewDate = subMonths.subMonths(state.previewDate, 1);
-          return {
-            ...state,
-            previewDate
-          };
-        }
-      case 'MANUALLY_UPDATE_INPUT':
-        {
-          const inputValue = action.value;
-          const currentDate = parseInputValue$1({
-            inputValue,
-            customParseDate
-          });
-          if (onChange && currentDate && isValid.isValid(currentDate) && !isSameDay.isSameDay(value, currentDate)) {
-            onChange(currentDate);
-          }
-          return {
-            ...state,
-            isOpen: true,
-            inputValue
-          };
-        }
-      case 'CONTROLLED_VALUE_CHANGE':
-        {
-          const previewDate = action.value || new Date();
-          const inputValue = formatInputValue({
-            date: action.value,
-            locale,
-            formatDate
-          });
-          return {
-            ...state,
-            previewDate,
-            inputValue
-          };
-        }
-      case 'CONTROLLED_LOCALE_CHANGE':
-        {
-          const inputValue = formatInputValue({
-            date: value,
-            locale,
-            formatDate
-          });
-          return {
-            ...state,
-            inputValue
-          };
+      }
+    case 'PREVIEW_NEXT_MONTH':
+      {
+        const previewDate = addMonths.addMonths(state.previewDate, 1);
+        return {
+          ...state,
+          previewDate
+        };
+      }
+    case 'PREVIEW_PREVIOUS_MONTH':
+      {
+        const previewDate = subMonths.subMonths(state.previewDate, 1);
+        return {
+          ...state,
+          previewDate
+        };
+      }
+    case 'MANUALLY_UPDATE_INPUT':
+      {
+        const inputValue = action.value;
+        const currentDate = parseInputValue$1({
+          inputValue,
+          customParseDate
+        });
+        if (onChange && currentDate && isValid.isValid(currentDate) && !isSameDay.isSameDay(value, currentDate)) {
+          onChange(currentDate);
         }
-      case 'SELECT_DATE':
-        {
-          const inputValue = formatInputValue({
-            date: action.value,
-            locale,
-            formatDate
-          });
-          if (onChange && action.value && isValid.isValid(action.value) && !isSameDay.isSameDay(value, action.value)) {
-            onChange(action.value);
-          }
-          return {
-            ...state,
-            isOpen: false,
-            inputValue
-          };
+        return {
+          ...state,
+          isOpen: true,
+          inputValue
+        };
+      }
+    case 'CONTROLLED_VALUE_CHANGE':
+      {
+        const previewDate = action.value || new Date();
+        const inputValue = formatInputValue({
+          date: action.value,
+          locale,
+          formatDate
+        });
+        return {
+          ...state,
+          previewDate,
+          inputValue
+        };
+      }
+    case 'CONTROLLED_LOCALE_CHANGE':
+      {
+        const inputValue = formatInputValue({
+          date: value,
+          locale,
+          formatDate
+        });
+        return {
+          ...state,
+          inputValue
+        };
+      }
+    case 'SELECT_DATE':
+      {
+        const inputValue = formatInputValue({
+          date: action.value,
+          locale,
+          formatDate
+        });
+        if (onChange && action.value && isValid.isValid(action.value) && !isSameDay.isSameDay(value, action.value)) {
+          onChange(action.value);
         }
-      default:
-        throw new Error();
-    }
-  };
+        return {
+          ...state,
+          isOpen: false,
+          inputValue
+        };
+      }
+    default:
+      throw new Error();
+  }
 };
 function retrieveInitialState$1(initialProps) {
   let previewDate = initialProps.value;
@@ -779,13 +764,12 @@ function retrieveInitialState$1(initialProps) {
   };
 }
 
-const Input = React.forwardRef((_ref, ref) => {
-  let {
-    element,
-    dispatch,
-    state,
-    refKey
-  } = _ref;
+const Input = React.forwardRef(({
+  element,
+  dispatch,
+  state,
+  refKey
+}, ref) => {
   const isInputMouseDownRef = React.useRef(false);
   const handleBlur = () => {
     dispatch({
@@ -978,12 +962,11 @@ DatePicker.propTypes = {
   zIndex: PropTypes__default.default.number
 };
 
-function formatValue(_ref) {
-  let {
-    value,
-    locale,
-    formatDate
-  } = _ref;
+function formatValue({
+  value,
+  locale,
+  formatDate
+}) {
   let stringValue = '';
   if (value !== undefined && isValid.isValid(value)) {
     if (formatDate) {
@@ -998,10 +981,9 @@ function formatValue(_ref) {
   }
   return stringValue;
 }
-function parseInputValue(_ref2) {
-  let {
-    inputValue
-  } = _ref2;
+function parseInputValue({
+  inputValue
+}) {
   const MINIMUM_DATE = new Date(1001, 0, 0);
   let tryParseDate = parse.parse(inputValue || '', 'P', new Date());
   if (isValid.isValid(tryParseDate) && !isBefore.isBefore(tryParseDate, MINIMUM_DATE)) {
@@ -1017,177 +999,184 @@ function parseInputValue(_ref2) {
   }
   return new Date(NaN);
 }
-const datepickerRangeReducer = _ref3 => {
-  let {
-    startValue,
-    endValue,
-    locale,
-    formatDate,
-    customParseDate
-  } = _ref3;
-  return (state, action) => {
-    switch (action.type) {
-      case 'START_FOCUS':
-        {
-          let previewDate = state.previewDate;
-          if (startValue) {
-            if (compareAsc.compareAsc(startValue, startOfMonth.startOfMonth(state.previewDate)) === 1 && compareAsc.compareAsc(startValue, addMonths.addMonths(endOfMonth.endOfMonth(state.previewDate), 1)) === -1) {
-              previewDate = state.previewDate;
-            } else {
-              previewDate = startOfMonth.startOfMonth(startValue);
-            }
-          }
-          return {
-            ...state,
-            previewDate,
-            isStartFocused: true,
-            isEndFocused: false
-          };
-        }
-      case 'END_FOCUS':
-        {
-          let previewDate = state.previewDate;
-          if (endValue) {
-            if (compareAsc.compareAsc(endValue, startOfMonth.startOfMonth(state.previewDate)) === 1 && compareAsc.compareAsc(endValue, addMonths.addMonths(endOfMonth.endOfMonth(state.previewDate), 1)) === -1) {
-              previewDate = state.previewDate;
-            } else {
-              previewDate = startOfMonth.startOfMonth(endValue);
-            }
-          }
-          return {
-            ...state,
-            previewDate,
-            isEndFocused: true,
-            isStartFocused: false
-          };
-        }
-      case 'START_BLUR':
-        {
-          let parsedDate;
-          if (customParseDate) {
-            parsedDate = customParseDate(state.startInputValue);
+const datepickerRangeReducer = ({
+  startValue,
+  endValue,
+  locale,
+  formatDate,
+  customParseDate
+}) => (state, action) => {
+  switch (action.type) {
+    case 'START_FOCUS':
+      {
+        let previewDate = state.previewDate;
+        if (startValue) {
+          if (compareAsc.compareAsc(startValue, startOfMonth.startOfMonth(state.previewDate)) === 1 && compareAsc.compareAsc(startValue, addMonths.addMonths(endOfMonth.endOfMonth(state.previewDate), 1)) === -1) {
+            previewDate = state.previewDate;
           } else {
-            parsedDate = parseInputValue({
-              inputValue: state.startInputValue
-            });
+            previewDate = startOfMonth.startOfMonth(startValue);
           }
-          const startInputValue = formatValue({
-            value: parsedDate,
-            locale,
-            formatDate
-          });
-          return {
-            ...state,
-            startInputValue: startInputValue || formatValue({
-              value: startValue,
-              locale,
-              formatDate
-            }),
-            isStartFocused: false
-          };
         }
-      case 'END_BLUR':
-        {
-          let parsedDate;
-          if (customParseDate) {
-            parsedDate = customParseDate(state.endInputValue);
+        return {
+          ...state,
+          previewDate,
+          isStartFocused: true,
+          isEndFocused: false
+        };
+      }
+    case 'END_FOCUS':
+      {
+        let previewDate = state.previewDate;
+        if (endValue) {
+          if (compareAsc.compareAsc(endValue, startOfMonth.startOfMonth(state.previewDate)) === 1 && compareAsc.compareAsc(endValue, addMonths.addMonths(endOfMonth.endOfMonth(state.previewDate), 1)) === -1) {
+            previewDate = state.previewDate;
           } else {
-            parsedDate = parseInputValue({
-              inputValue: state.endInputValue
-            });
+            previewDate = startOfMonth.startOfMonth(endValue);
           }
-          const endInputValue = formatValue({
-            value: parsedDate,
-            locale,
-            formatDate
-          }) || formatValue({
-            value: endValue,
-            locale,
-            formatDate
-          });
-          return {
-            ...state,
-            endInputValue,
-            isEndFocused: false
-          };
         }
-      case 'CONTROLLED_START_VALUE_CHANGE':
-        {
-          const startInputValue = formatValue({
-            value: action.value,
-            locale,
-            formatDate
+        return {
+          ...state,
+          previewDate,
+          isEndFocused: true,
+          isStartFocused: false
+        };
+      }
+    case 'START_BLUR':
+      {
+        let parsedDate;
+        if (customParseDate) {
+          parsedDate = customParseDate(state.startInputValue);
+        } else {
+          parsedDate = parseInputValue({
+            inputValue: state.startInputValue
           });
-          let previewDate = state.previewDate;
-          if (action.value) {
-            if (compareAsc.compareAsc(action.value, startOfMonth.startOfMonth(state.previewDate)) === 1 && compareAsc.compareAsc(action.value, addMonths.addMonths(endOfMonth.endOfMonth(state.previewDate), 1)) === -1) {
-              previewDate = state.previewDate;
-            } else {
-              previewDate = startOfMonth.startOfMonth(action.value);
-            }
-          }
-          return {
-            ...state,
-            startInputValue,
-            hoverDate: undefined,
-            previewDate
-          };
         }
-      case 'CONTROLLED_END_VALUE_CHANGE':
-        {
-          const endInputValue = formatValue({
-            value: action.value,
+        const startInputValue = formatValue({
+          value: parsedDate,
+          locale,
+          formatDate
+        });
+        return {
+          ...state,
+          startInputValue: startInputValue || formatValue({
+            value: startValue,
             locale,
             formatDate
+          }),
+          isStartFocused: false
+        };
+      }
+    case 'END_BLUR':
+      {
+        let parsedDate;
+        if (customParseDate) {
+          parsedDate = customParseDate(state.endInputValue);
+        } else {
+          parsedDate = parseInputValue({
+            inputValue: state.endInputValue
           });
-          let previewDate = state.previewDate;
-          if (action.value) {
-            if (compareAsc.compareAsc(action.value, startOfMonth.startOfMonth(state.previewDate)) === 1 && compareAsc.compareAsc(action.value, addMonths.addMonths(endOfMonth.endOfMonth(state.previewDate), 1)) === -1) {
-              previewDate = state.previewDate;
-            } else {
-              previewDate = startOfMonth.startOfMonth(action.value);
-            }
+        }
+        const endInputValue = formatValue({
+          value: parsedDate,
+          locale,
+          formatDate
+        }) || formatValue({
+          value: endValue,
+          locale,
+          formatDate
+        });
+        return {
+          ...state,
+          endInputValue,
+          isEndFocused: false
+        };
+      }
+    case 'CONTROLLED_START_VALUE_CHANGE':
+      {
+        const startInputValue = formatValue({
+          value: action.value,
+          locale,
+          formatDate
+        });
+        let previewDate = state.previewDate;
+        if (action.value) {
+          if (compareAsc.compareAsc(action.value, startOfMonth.startOfMonth(state.previewDate)) === 1 && compareAsc.compareAsc(action.value, addMonths.addMonths(endOfMonth.endOfMonth(state.previewDate), 1)) === -1) {
+            previewDate = state.previewDate;
+          } else {
+            previewDate = startOfMonth.startOfMonth(action.value);
           }
-          return {
-            ...state,
-            endInputValue,
-            hoverDate: undefined,
-            previewDate
-          };
         }
-      case 'CLICK_DATE':
-        if (state.isStartFocused) {
-          if (endValue !== undefined && (isBefore.isBefore(action.value, endValue) || isSameDay.isSameDay(action.value, endValue))) {
-            return {
-              ...state,
-              startInputValue: formatValue({
-                value: action.value
-              })
-            };
+        return {
+          ...state,
+          startInputValue,
+          hoverDate: undefined,
+          previewDate
+        };
+      }
+    case 'CONTROLLED_END_VALUE_CHANGE':
+      {
+        const endInputValue = formatValue({
+          value: action.value,
+          locale,
+          formatDate
+        });
+        let previewDate = state.previewDate;
+        if (action.value) {
+          if (compareAsc.compareAsc(action.value, startOfMonth.startOfMonth(state.previewDate)) === 1 && compareAsc.compareAsc(action.value, addMonths.addMonths(endOfMonth.endOfMonth(state.previewDate), 1)) === -1) {
+            previewDate = state.previewDate;
+          } else {
+            previewDate = startOfMonth.startOfMonth(action.value);
           }
+        }
+        return {
+          ...state,
+          endInputValue,
+          hoverDate: undefined,
+          previewDate
+        };
+      }
+    case 'CLICK_DATE':
+      if (state.isStartFocused) {
+        if (endValue !== undefined && (isBefore.isBefore(action.value, endValue) || isSameDay.isSameDay(action.value, endValue))) {
           return {
             ...state,
             startInputValue: formatValue({
               value: action.value
-            }),
-            endInputValue: undefined
+            })
           };
-        } else if (state.isEndFocused) {
-          if (startValue !== undefined && (isAfter.isAfter(action.value, startValue) || isSameDay.isSameDay(action.value, startValue))) {
-            return {
-              ...state,
-              endInputValue: formatValue({
-                value: action.value
-              })
-            };
-          }
+        }
+        return {
+          ...state,
+          startInputValue: formatValue({
+            value: action.value
+          }),
+          endInputValue: undefined
+        };
+      } else if (state.isEndFocused) {
+        if (startValue !== undefined && (isAfter.isAfter(action.value, startValue) || isSameDay.isSameDay(action.value, startValue))) {
           return {
             ...state,
-            startInputValue: formatValue({
+            endInputValue: formatValue({
               value: action.value
             })
           };
-        } else if (startValue === undefined) {
+        }
+        return {
+          ...state,
+          startInputValue: formatValue({
+            value: action.value
+          })
+        };
+      } else if (startValue === undefined) {
+        return {
+          ...state,
+          startInputValue: formatValue({
+            value: action.value
+          }),
+          endInputValue: undefined
+        };
+      } else if (endValue === undefined) {
+        if (isBefore.isBefore(action.value, startValue)) {
           return {
             ...state,
             startInputValue: formatValue({
@@ -1195,65 +1184,55 @@ const datepickerRangeReducer = _ref3 => {
             }),
             endInputValue: undefined
           };
-        } else if (endValue === undefined) {
-          if (isBefore.isBefore(action.value, startValue)) {
-            return {
-              ...state,
-              startInputValue: formatValue({
-                value: action.value
-              }),
-              endInputValue: undefined
-            };
-          }
-          return {
-            ...state,
-            endInputValue: formatValue({
-              value: action.value
-            })
-          };
-        }
-        return state;
-      case 'START_INPUT_ONCHANGE':
-        {
-          return {
-            ...state,
-            startInputValue: action.value
-          };
-        }
-      case 'END_INPUT_ONCHANGE':
-        {
-          return {
-            ...state,
-            endInputValue: action.value
-          };
         }
-      case 'HOVER_DATE':
         return {
           ...state,
-          hoverDate: action.value
+          endInputValue: formatValue({
+            value: action.value
+          })
         };
-      case 'PREVIEW_NEXT_MONTH':
-        {
-          const previewDate = addMonths.addMonths(state.previewDate, 1);
-          return {
-            ...state,
-            previewDate,
-            hoverDate: undefined
-          };
-        }
-      case 'PREVIEW_PREVIOUS_MONTH':
-        {
-          const previewDate = subMonths.subMonths(state.previewDate, 1);
-          return {
-            ...state,
-            previewDate,
-            hoverDate: undefined
-          };
-        }
-      default:
-        throw new Error();
-    }
-  };
+      }
+      return state;
+    case 'START_INPUT_ONCHANGE':
+      {
+        return {
+          ...state,
+          startInputValue: action.value
+        };
+      }
+    case 'END_INPUT_ONCHANGE':
+      {
+        return {
+          ...state,
+          endInputValue: action.value
+        };
+      }
+    case 'HOVER_DATE':
+      return {
+        ...state,
+        hoverDate: action.value
+      };
+    case 'PREVIEW_NEXT_MONTH':
+      {
+        const previewDate = addMonths.addMonths(state.previewDate, 1);
+        return {
+          ...state,
+          previewDate,
+          hoverDate: undefined
+        };
+      }
+    case 'PREVIEW_PREVIOUS_MONTH':
+      {
+        const previewDate = subMonths.subMonths(state.previewDate, 1);
+        return {
+          ...state,
+          previewDate,
+          hoverDate: undefined
+        };
+      }
+    default:
+      throw new Error();
+  }
 };
 function retrieveInitialState(initialProps) {
   let previewDate = initialProps.startValue;
@@ -1414,12 +1393,11 @@ const End = props => {
 };
 End.displayName = 'DatePickerRange.End';
 
-const Month = React.forwardRef((_ref, ref) => {
-  let {
-    displayDate,
-    isPreviousHidden,
-    isNextHidden
-  } = _ref;
+const Month = React.forwardRef(({
+  displayDate,
+  isPreviousHidden,
+  isNextHidden
+}, ref) => {
   const {
     state,
     dispatch,
@@ -1653,7 +1631,7 @@ const Calendar = React.forwardRef((props, ref) => {
   return React__namespace.default.createElement(StyledRangeCalendar, Object.assign({
     ref: ref,
     "data-garden-id": "datepickers.range",
-    "data-garden-version": '9.12.3'
+    "data-garden-version": '9.12.4'
   }, props), React__namespace.default.createElement(Month, {
     displayDate: state.previewDate,
     isNextHidden: true