@zendeskgarden/react-datepickers 8.46.0 → 8.48.0

package/dist/index.cjs.js

@@ -27,14 +27,12 @@ function _interopNamespace(e) {
         var d = Object.getOwnPropertyDescriptor(e, k);
         Object.defineProperty(n, k, d.get ? d : {
           enumerable: true,
-          get: function () {
-            return e[k];
-          }
+          get: function () { return e[k]; }
         });
       }
     });
   }
-  n['default'] = e;
+  n["default"] = e;
   return Object.freeze(n);
 }
 
@@ -48,14 +46,9 @@ function ownKeys(object, enumerableOnly) {
 
   if (Object.getOwnPropertySymbols) {
     var symbols = Object.getOwnPropertySymbols(object);
-
-    if (enumerableOnly) {
-      symbols = symbols.filter(function (sym) {
-        return Object.getOwnPropertyDescriptor(object, sym).enumerable;
-      });
-    }
-
-    keys.push.apply(keys, symbols);
+    enumerableOnly && (symbols = symbols.filter(function (sym) {
+      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+    })), keys.push.apply(keys, symbols);
   }
 
   return keys;
@@ -63,19 +56,12 @@ function ownKeys(object, enumerableOnly) {
 
 function _objectSpread2(target) {
   for (var i = 1; i < arguments.length; i++) {
-    var source = arguments[i] != null ? arguments[i] : {};
-
-    if (i % 2) {
-      ownKeys(Object(source), true).forEach(function (key) {
-        _defineProperty(target, key, source[key]);
-      });
-    } else if (Object.getOwnPropertyDescriptors) {
-      Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
-    } else {
-      ownKeys(Object(source)).forEach(function (key) {
-        Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
-      });
-    }
+    var source = null != arguments[i] ? arguments[i] : {};
+    i % 2 ? ownKeys(Object(source), !0).forEach(function (key) {
+      _defineProperty(target, key, source[key]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) {
+      Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+    });
   }
 
   return target;
@@ -114,6 +100,42 @@ function _extends$2() {
   return _extends$2.apply(this, arguments);
 }
 
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
+  }
+
+  return target;
+}
+
+function _objectWithoutProperties(source, excluded) {
+  if (source == null) return {};
+
+  var target = _objectWithoutPropertiesLoose(source, excluded);
+
+  var key, i;
+
+  if (Object.getOwnPropertySymbols) {
+    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+
+    for (i = 0; i < sourceSymbolKeys.length; i++) {
+      key = sourceSymbolKeys[i];
+      if (excluded.indexOf(key) >= 0) continue;
+      if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+      target[key] = source[key];
+    }
+  }
+
+  return target;
+}
+
 function _slicedToArray(arr, i) {
   return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
 }
@@ -392,9 +414,9 @@ function getDate(dirtyDate) {
 }
 
 var COMPONENT_ID$b = 'datepickers.menu';
-var StyledMenu = styled__default['default'].div.attrs({
+var StyledMenu = styled__default["default"].div.attrs({
   'data-garden-id': COMPONENT_ID$b,
-  'data-garden-version': '8.46.0'
+  'data-garden-version': '8.48.0'
 }).withConfig({
   displayName: "StyledMenu",
   componentId: "sc-1npbkk0-0"
@@ -406,7 +428,7 @@ StyledMenu.defaultProps = {
 };
 
 var COMPONENT_ID$a = 'datepickers.menu_wrapper';
-var StyledMenuWrapper = styled__default['default'].div.attrs(function (props) {
+var StyledMenuWrapper = styled__default["default"].div.attrs(function (props) {
   return {
     className: props.isAnimated && 'is-animated'
   };
@@ -438,7 +460,7 @@ var retrievePadding = function retrievePadding(_ref) {
   }
   return "margin: ".concat(value, "px;");
 };
-var StyledDatepicker = styled__default['default'].div.attrs({
+var StyledDatepicker = styled__default["default"].div.attrs({
   'data-garden-id': COMPONENT_ID$9
 }).withConfig({
   displayName: "StyledDatepicker",
@@ -457,7 +479,7 @@ StyledDatepicker.defaultProps = {
 };
 
 var COMPONENT_ID$8 = 'datepickers.range_calendar';
-var StyledRangeCalendar = styled__default['default'].div.attrs({
+var StyledRangeCalendar = styled__default["default"].div.attrs({
   'data-garden-id': COMPONENT_ID$8
 }).withConfig({
   displayName: "StyledRangeCalendar",
@@ -472,7 +494,7 @@ StyledRangeCalendar.defaultProps = {
 };
 
 var COMPONENT_ID$7 = 'datepickers.header';
-var StyledHeader = styled__default['default'].div.attrs({
+var StyledHeader = styled__default["default"].div.attrs({
   'data-garden-id': COMPONENT_ID$7
 }).withConfig({
   displayName: "StyledHeader",
@@ -500,7 +522,7 @@ var retrieveColor$1 = function retrieveColor(_ref2) {
   return styled.css([":hover{background-color:", ";color:", ";}:active{background-color:", ";color:", ";}color:", ";"], reactTheming.getColor('primaryHue', 600, theme, 0.08), theme.colors.foreground, reactTheming.getColor('primaryHue', 600, theme, 0.2), theme.colors.foreground, reactTheming.getColor('neutralHue', 600, theme));
 };
 var COMPONENT_ID$6 = 'datepickers.header_paddle';
-var StyledHeaderPaddle = styled__default['default'].div.attrs({
+var StyledHeaderPaddle = styled__default["default"].div.attrs({
   'data-garden-id': COMPONENT_ID$6
 }).withConfig({
   displayName: "StyledHeaderPaddle",
@@ -522,7 +544,7 @@ StyledHeaderPaddle.defaultProps = {
 };
 
 var COMPONENT_ID$5 = 'datepickers.header_label';
-var StyledHeaderLabel = styled__default['default'].div.attrs({
+var StyledHeaderLabel = styled__default["default"].div.attrs({
   'data-garden-id': COMPONENT_ID$5
 }).withConfig({
   displayName: "StyledHeaderLabel",
@@ -539,7 +561,7 @@ StyledHeaderLabel.defaultProps = {
 };
 
 var COMPONENT_ID$4 = 'datepickers.calendar';
-var StyledCalendar = styled__default['default'].div.attrs({
+var StyledCalendar = styled__default["default"].div.attrs({
   'data-garden-id': COMPONENT_ID$4
 }).withConfig({
   displayName: "StyledCalendar",
@@ -565,7 +587,7 @@ var retrieveSize = function retrieveSize(_ref) {
   }
   return styled.css(["width:", ";height:", ";"], size, size);
 };
-var StyledCalendarItem = styled__default['default'].div.attrs({
+var StyledCalendarItem = styled__default["default"].div.attrs({
   'data-garden-id': COMPONENT_ID$3
 }).withConfig({
   displayName: "StyledCalendarItem",
@@ -578,7 +600,7 @@ StyledCalendarItem.defaultProps = {
 };
 
 var COMPONENT_ID$2 = 'datepickers.day_label';
-var StyledDayLabel = styled__default['default'].div.attrs({
+var StyledDayLabel = styled__default["default"].div.attrs({
   'data-garden-id': COMPONENT_ID$2
 }).withConfig({
   displayName: "StyledDayLabel",
@@ -623,7 +645,7 @@ var retrieveColor = function retrieveColor(_ref2) {
   }
   return styled.css([""]);
 };
-var StyledHighlight = styled__default['default'].div.attrs({
+var StyledHighlight = styled__default["default"].div.attrs({
   'data-garden-id': COMPONENT_ID$1
 }).withConfig({
   displayName: "StyledHighlight",
@@ -656,7 +678,7 @@ var retrieveStyledDayColors = function retrieveStyledDayColors(_ref) {
   return styled.css(["background-color:", ";color:", ";", ""], backgroundColor, color, !isSelected && !isDisabled && "\n      :hover {\n        background-color: ".concat(reactTheming.getColor('primaryHue', 600, theme, 0.08), ";\n        color: ").concat(reactTheming.getColor('primaryHue', 800, theme), ";\n      }\n\n      :active {\n        background-color: ").concat(reactTheming.getColor('primaryHue', 600, theme, 0.2), ";\n        color: ").concat(reactTheming.getColor('primaryHue', 800, theme), ";\n      }\n  "));
 };
 var COMPONENT_ID = 'datepickers.day';
-var StyledDay = styled__default['default'].div.attrs(function (props) {
+var StyledDay = styled__default["default"].div.attrs(function (props) {
   return {
     'data-garden-id': COMPONENT_ID,
     'aria-disabled': props.isDisabled ? 'true' : 'false'
@@ -763,41 +785,41 @@ function getStartOfWeek(locale) {
   return 0;
 }
 
-function _extends$1() { _extends$1 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1.apply(this, arguments); }
+var _path$1;
 
-var _ref$1 = /*#__PURE__*/React__namespace.createElement("path", {
-  fill: "currentColor",
-  d: "M10.39 12.688a.5.5 0 01-.718.69l-.062-.066-4-5a.5.5 0 01-.054-.542l.054-.082 4-5a.5.5 0 01.83.55l-.05.074L6.641 8l3.75 4.688z"
-});
+function _extends$1() { _extends$1 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1.apply(this, arguments); }
 
-function SvgChevronLeftStroke(props) {
+var SvgChevronLeftStroke = function SvgChevronLeftStroke(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$1({
     xmlns: "http://www.w3.org/2000/svg",
     width: 16,
     height: 16,
-    viewBox: "0 0 16 16",
     focusable: "false",
-    role: "presentation"
-  }, props), _ref$1);
-}
+    viewBox: "0 0 16 16",
+    "aria-hidden": "true"
+  }, props), _path$1 || (_path$1 = /*#__PURE__*/React__namespace.createElement("path", {
+    fill: "currentColor",
+    d: "M10.39 12.688a.5.5 0 01-.718.69l-.062-.066-4-5a.5.5 0 01-.054-.542l.054-.082 4-5a.5.5 0 01.83.55l-.05.074L6.641 8l3.75 4.688z"
+  })));
+};
 
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+var _path;
 
-var _ref = /*#__PURE__*/React__namespace.createElement("path", {
-  fill: "currentColor",
-  d: "M5.61 3.312a.5.5 0 01.718-.69l.062.066 4 5a.5.5 0 01.054.542l-.054.082-4 5a.5.5 0 01-.83-.55l.05-.074L9.359 8l-3.75-4.688z"
-});
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-function SvgChevronRightStroke(props) {
+var SvgChevronRightStroke = function SvgChevronRightStroke(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",
     width: 16,
     height: 16,
-    viewBox: "0 0 16 16",
     focusable: "false",
-    role: "presentation"
-  }, props), _ref);
-}
+    viewBox: "0 0 16 16",
+    "aria-hidden": "true"
+  }, props), _path || (_path = /*#__PURE__*/React__namespace.createElement("path", {
+    fill: "currentColor",
+    d: "M5.61 3.312a.5.5 0 01.718-.69l.062.066 4 5a.5.5 0 01.054.542l-.054.082-4 5a.5.5 0 01-.83-.55l.05-.074L9.359 8l-3.75-4.688z"
+  })));
+};
 
 var MonthSelector = function MonthSelector(_ref) {
   var locale = _ref.locale,
@@ -812,28 +834,28 @@ var MonthSelector = function MonthSelector(_ref) {
     });
     return formatter.format(date);
   }, [locale]);
-  return React__default['default'].createElement(StyledHeader, {
+  return React__default["default"].createElement(StyledHeader, {
     isCompact: isCompact
-  }, React__default['default'].createElement(StyledHeaderPaddle, {
+  }, React__default["default"].createElement(StyledHeaderPaddle, {
     isCompact: isCompact,
     onClick: function onClick() {
       dispatch({
         type: 'PREVIEW_PREVIOUS_MONTH'
       });
     }
-  }, React__default['default'].createElement(SvgChevronLeftStroke, null)), React__default['default'].createElement(StyledHeaderLabel, {
+  }, React__default["default"].createElement(SvgChevronLeftStroke, null)), React__default["default"].createElement(StyledHeaderLabel, {
     isCompact: isCompact
-  }, headerLabelFormatter(state.previewDate)), React__default['default'].createElement(StyledHeaderPaddle, {
+  }, headerLabelFormatter(state.previewDate)), React__default["default"].createElement(StyledHeaderPaddle, {
     isCompact: isCompact,
     onClick: function onClick() {
       dispatch({
         type: 'PREVIEW_NEXT_MONTH'
       });
     }
-  }, React__default['default'].createElement(SvgChevronRightStroke, null)));
+  }, React__default["default"].createElement(SvgChevronRightStroke, null)));
 };
 
-var Calendar$1 = function Calendar(_ref) {
+var Calendar$1 = React.forwardRef(function (_ref, ref) {
   var value = _ref.value,
       minValue = _ref.minValue,
       maxValue = _ref.maxValue,
@@ -862,10 +884,10 @@ var Calendar$1 = function Calendar(_ref) {
     end: addDays(startDate, 6)
   }).map(function (date) {
     var formattedDayLabel = dayLabelFormatter(date);
-    return React__default['default'].createElement(StyledCalendarItem, {
+    return React__default["default"].createElement(StyledCalendarItem, {
       key: "day-label-".concat(formattedDayLabel),
       isCompact: isCompact
-    }, React__default['default'].createElement(StyledDayLabel, {
+    }, React__default["default"].createElement(StyledDayLabel, {
       isCompact: isCompact
     }, formattedDayLabel));
   });
@@ -884,10 +906,10 @@ var Calendar$1 = function Calendar(_ref) {
     if (maxValue !== undefined) {
       isDisabled = isDisabled || isAfter(date, maxValue) && !isSameDay(date, maxValue);
     }
-    return React__default['default'].createElement(StyledCalendarItem, {
+    return React__default["default"].createElement(StyledCalendarItem, {
       key: "day-".concat(itemsIndex),
       isCompact: isCompact
-    }, React__default['default'].createElement(StyledDay, {
+    }, React__default["default"].createElement(StyledDay, {
       isToday: isCurrentDate,
       isPreviousMonth: isPreviousMonth,
       isSelected: isSelected,
@@ -903,18 +925,20 @@ var Calendar$1 = function Calendar(_ref) {
       }
     }, formattedDayLabel));
   });
-  return React__default['default'].createElement(StyledDatepicker, {
+  return React__default["default"].createElement(StyledDatepicker, {
+    ref: ref,
     isCompact: isCompact,
     onMouseDown: function onMouseDown(e) {
       e.preventDefault();
     }
-  }, React__default['default'].createElement(MonthSelector, {
+  }, React__default["default"].createElement(MonthSelector, {
     locale: locale,
     isCompact: isCompact
-  }), React__default['default'].createElement(StyledCalendar, {
+  }), React__default["default"].createElement(StyledCalendar, {
     isCompact: isCompact
   }, dayLabels, items));
-};
+});
+Calendar$1.displayName = 'Calendar';
 
 function addMonths(dirtyDate, dirtyAmount) {
   requiredArgs(2, arguments);
@@ -3256,7 +3280,8 @@ function retrieveInitialState$1(initialProps) {
   };
 }
 
-var Datepicker = function Datepicker(props) {
+var _excluded = ["children", "placement", "popperModifiers", "eventsEnabled", "zIndex", "isAnimated", "refKey", "value", "isCompact", "onChange", "formatDate", "minValue", "maxValue", "locale", "customParseDate"];
+var Datepicker = React.forwardRef(function (props, calendarRef) {
   var children = props.children,
       placement = props.placement,
       popperModifiers = props.popperModifiers,
@@ -3271,7 +3296,8 @@ var Datepicker = function Datepicker(props) {
       minValue = props.minValue,
       maxValue = props.maxValue,
       locale = props.locale,
-      customParseDate = props.customParseDate;
+      customParseDate = props.customParseDate,
+      menuProps = _objectWithoutProperties(props, _excluded);
   var theme = React.useContext(styled.ThemeContext);
   var memoizedReducer = React.useCallback(datepickerReducer({
     value: value,
@@ -3329,13 +3355,13 @@ var Datepicker = function Datepicker(props) {
       dispatch: dispatch
     };
   }, [state, dispatch]);
-  return React__default['default'].createElement(DatepickerContext.Provider, {
+  return React__default["default"].createElement(DatepickerContext.Provider, {
     value: contextValue
-  }, React__default['default'].createElement(reactPopper.Manager, null, React__default['default'].createElement(reactPopper.Reference, null, function (_ref) {
+  }, React__default["default"].createElement(reactPopper.Manager, null, React__default["default"].createElement(reactPopper.Reference, null, function (_ref) {
     var _React$cloneElement;
     var ref = _ref.ref;
-    var childElement = React__default['default'].Children.only(children);
-    return React__default['default'].cloneElement(childElement, (_React$cloneElement = {}, _defineProperty(_React$cloneElement, refKey, function (refValue) {
+    var childElement = React__default["default"].Children.only(children);
+    return React__default["default"].cloneElement(childElement, (_React$cloneElement = {}, _defineProperty(_React$cloneElement, refKey, function (refValue) {
       ref(refValue);
       inputRef.current = refValue;
     }), _defineProperty(_React$cloneElement, "onMouseDown", containerUtilities.composeEventHandlers(childElement.props.onMouseDown, function () {
@@ -3376,7 +3402,7 @@ var Datepicker = function Datepicker(props) {
           break;
       }
     })), _defineProperty(_React$cloneElement, "autoComplete", 'off'), _defineProperty(_React$cloneElement, "value", state.inputValue), _React$cloneElement));
-  }), React__default['default'].createElement(reactPopper.Popper, {
+  }), React__default["default"].createElement(reactPopper.Popper, {
     placement: popperPlacement,
     modifiers: popperModifiers
     ,
@@ -3387,14 +3413,15 @@ var Datepicker = function Datepicker(props) {
         scheduleUpdate = _ref2.scheduleUpdate,
         currentPlacement = _ref2.placement;
     scheduleUpdateRef.current = scheduleUpdate;
-    return React__default['default'].createElement(StyledMenuWrapper, {
+    return React__default["default"].createElement(StyledMenuWrapper, {
       ref: ref,
       style: style,
       isHidden: !state.isOpen,
       isAnimated: isAnimated && (state.isOpen || isVisible),
       placement: currentPlacement,
       zIndex: zIndex
-    }, React__default['default'].createElement(StyledMenu, null, React__default['default'].createElement(Calendar$1, {
+    }, (state.isOpen || isVisible) && React__default["default"].createElement(StyledMenu, menuProps, React__default["default"].createElement(Calendar$1, {
+      ref: calendarRef,
       isCompact: isCompact,
       value: value,
       minValue: minValue,
@@ -3402,22 +3429,23 @@ var Datepicker = function Datepicker(props) {
       locale: locale
     })));
   })));
-};
+});
+Datepicker.displayName = 'Datepicker';
 Datepicker.propTypes = {
-  value: PropTypes__default['default'].any,
-  onChange: PropTypes__default['default'].any,
-  formatDate: PropTypes__default['default'].func,
-  locale: PropTypes__default['default'].any,
-  minValue: PropTypes__default['default'].any,
-  maxValue: PropTypes__default['default'].any,
-  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']),
-  popperModifiers: PropTypes__default['default'].any,
-  isAnimated: PropTypes__default['default'].bool,
-  eventsEnabled: PropTypes__default['default'].bool,
-  zIndex: PropTypes__default['default'].number
+  value: PropTypes__default["default"].any,
+  onChange: PropTypes__default["default"].any,
+  formatDate: PropTypes__default["default"].func,
+  locale: PropTypes__default["default"].any,
+  minValue: PropTypes__default["default"].any,
+  maxValue: PropTypes__default["default"].any,
+  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']),
+  popperModifiers: PropTypes__default["default"].any,
+  isAnimated: PropTypes__default["default"].bool,
+  eventsEnabled: PropTypes__default["default"].bool,
+  zIndex: PropTypes__default["default"].number
 };
 Datepicker.defaultProps = {
   placement: 'bottom-start',
@@ -3770,8 +3798,8 @@ var Start = function Start(props) {
     });
     props.children.props.onBlur && props.children.props.onBlur(e);
   }, [dispatch, props.children]);
-  var childElement = React__default['default'].Children.only(props.children);
-  return React__default['default'].cloneElement(childElement, {
+  var childElement = React__default["default"].Children.only(props.children);
+  return React__default["default"].cloneElement(childElement, {
     value: state.startInputValue,
     ref: startInputRef,
     onChange: containerUtilities.composeEventHandlers(childElement.props.onChange, onChangeCallback),
@@ -3814,8 +3842,8 @@ var End = function End(props) {
     });
     props.children.props.onBlur && props.children.props.onBlur(e);
   }, [dispatch, props.children]);
-  var childElement = React__default['default'].Children.only(props.children);
-  return React__default['default'].cloneElement(childElement, {
+  var childElement = React__default["default"].Children.only(props.children);
+  return React__default["default"].cloneElement(childElement, {
     value: state.endInputValue,
     ref: endInputRef,
     onChange: containerUtilities.composeEventHandlers(childElement.props.onChange, onChangeCallback),
@@ -3831,7 +3859,7 @@ function subDays(dirtyDate, dirtyAmount) {
   return addDays(dirtyDate, -amount);
 }
 
-var Month = function Month(_ref) {
+var Month = React.forwardRef(function (_ref, ref) {
   var locale = _ref.locale,
       displayDate = _ref.displayDate,
       isCompact = _ref.isCompact,
@@ -3876,10 +3904,10 @@ var Month = function Month(_ref) {
     end: addDays(startDate, 6)
   }).map(function (date) {
     var formattedDayLabel = dayLabelFormatter(date);
-    return React__default['default'].createElement(StyledCalendarItem, {
+    return React__default["default"].createElement(StyledCalendarItem, {
       key: "day-label-".concat(formattedDayLabel),
       isCompact: isCompact
-    }, React__default['default'].createElement(StyledDayLabel, {
+    }, React__default["default"].createElement(StyledDayLabel, {
       isCompact: isCompact
     }, formattedDayLabel));
   });
@@ -3891,10 +3919,10 @@ var Month = function Month(_ref) {
     var isCurrentDate = isToday(date);
     var isPreviousMonth = !isSameMonth(date, displayDate);
     if (isPreviousMonth) {
-      return React__default['default'].createElement(StyledCalendarItem, {
+      return React__default["default"].createElement(StyledCalendarItem, {
         key: "day-".concat(itemsIndex),
         isCompact: isCompact
-      }, React__default['default'].createElement(StyledDay, {
+      }, React__default["default"].createElement(StyledDay, {
         isCompact: isCompact,
         isPreviousMonth: true,
         isDisabled: true
@@ -3939,14 +3967,14 @@ var Month = function Month(_ref) {
         isInvalidDateRange = isInvalidDateRange || compareAsc(endValue, maxValue) === 1;
       }
     }
-    return React__default['default'].createElement(StyledCalendarItem, {
+    return React__default["default"].createElement(StyledCalendarItem, {
       key: "day-".concat(itemsIndex),
       isCompact: isCompact
-    }, React__default['default'].createElement(StyledHighlight, {
+    }, React__default["default"].createElement(StyledHighlight, {
       isHighlighted: !isInvalidDateRange && isHighlighted && !isDisabled,
       isStart: !isInvalidDateRange && isHighlightStart,
       isEnd: !isInvalidDateRange && isHighlightEnd
-    }), React__default['default'].createElement(StyledDay, {
+    }), React__default["default"].createElement(StyledDay, {
       isToday: isCurrentDate,
       isPreviousMonth: isPreviousMonth,
       isSelected: !isInvalidDateRange && isSelected,
@@ -3970,14 +3998,15 @@ var Month = function Month(_ref) {
       }
     }, formattedDayLabel));
   });
-  return React__default['default'].createElement(StyledDatepicker, {
+  return React__default["default"].createElement(StyledDatepicker, {
+    ref: ref,
     isCompact: isCompact,
     onMouseDown: function onMouseDown(e) {
       e.preventDefault();
     }
-  }, React__default['default'].createElement(StyledHeader, {
+  }, React__default["default"].createElement(StyledHeader, {
     isCompact: isCompact
-  }, React__default['default'].createElement(StyledHeaderPaddle, {
+  }, React__default["default"].createElement(StyledHeaderPaddle, {
     isCompact: isCompact,
     onClick: function onClick() {
       dispatch({
@@ -3985,9 +4014,9 @@ var Month = function Month(_ref) {
       });
     },
     isHidden: isPreviousHidden
-  }, React__default['default'].createElement(SvgChevronLeftStroke, null)), React__default['default'].createElement(StyledHeaderLabel, {
+  }, React__default["default"].createElement(SvgChevronLeftStroke, null)), React__default["default"].createElement(StyledHeaderLabel, {
     isCompact: isCompact
-  }, headerLabelFormatter(displayDate)), React__default['default'].createElement(StyledHeaderPaddle, {
+  }, headerLabelFormatter(displayDate)), React__default["default"].createElement(StyledHeaderPaddle, {
     isCompact: isCompact,
     isHidden: isNextHidden,
     onClick: function onClick() {
@@ -3995,7 +4024,7 @@ var Month = function Month(_ref) {
         type: 'PREVIEW_NEXT_MONTH'
       });
     }
-  }, React__default['default'].createElement(SvgChevronRightStroke, null))), React__default['default'].createElement(StyledCalendar, {
+  }, React__default["default"].createElement(SvgChevronRightStroke, null))), React__default["default"].createElement(StyledCalendar, {
     isCompact: isCompact,
     onMouseLeave: function onMouseLeave() {
       dispatch({
@@ -4004,9 +4033,10 @@ var Month = function Month(_ref) {
       });
     }
   }, dayLabels, items));
-};
+});
+Month.displayName = 'Month';
 
-var Calendar = function Calendar(props) {
+var Calendar = React.forwardRef(function (props, ref) {
   var _useDatepickerRangeCo = useDatepickerContext(),
       state = _useDatepickerRangeCo.state,
       dispatch = _useDatepickerRangeCo.dispatch,
@@ -4017,10 +4047,11 @@ var Calendar = function Calendar(props) {
       startValue = _useDatepickerRangeCo.startValue,
       endValue = _useDatepickerRangeCo.endValue,
       onChange = _useDatepickerRangeCo.onChange;
-  return React__default['default'].createElement(StyledRangeCalendar, _extends$2({
+  return React__default["default"].createElement(StyledRangeCalendar, _extends$2({
+    ref: ref,
     "data-garden-id": "datepickers.range",
-    "data-garden-version": '8.46.0'
-  }, props), React__default['default'].createElement(Month, {
+    "data-garden-version": '8.48.0'
+  }, props), React__default["default"].createElement(Month, {
     locale: locale,
     displayDate: state.previewDate,
     isCompact: isCompact,
@@ -4032,7 +4063,7 @@ var Calendar = function Calendar(props) {
     endValue: endValue,
     onChange: onChange,
     hoverDate: state.hoverDate
-  }), React__default['default'].createElement(Month, {
+  }), React__default["default"].createElement(Month, {
     locale: locale,
     displayDate: addMonths(state.previewDate, 1),
     isCompact: isCompact,
@@ -4045,9 +4076,10 @@ var Calendar = function Calendar(props) {
     onChange: onChange,
     hoverDate: state.hoverDate
   }));
-};
+});
+Calendar.displayName = 'Calendar';
 
-var DatepickerRange = function DatepickerRange(props) {
+var DatepickerRangeComponent = function DatepickerRangeComponent(props) {
   var startValue = props.startValue,
       locale = props.locale,
       formatDate = props.formatDate,
@@ -4109,28 +4141,29 @@ var DatepickerRange = function DatepickerRange(props) {
       endInputRef: endInputRef
     };
   }, [state, dispatch, isCompact, locale, minValue, maxValue, startValue, endValue, onChange, startInputRef, endInputRef]);
-  return React__default['default'].createElement(DatepickerRangeContext.Provider, {
+  return React__default["default"].createElement(DatepickerRangeContext.Provider, {
     value: value
   }, children);
 };
-DatepickerRange.Start = Start;
-DatepickerRange.End = End;
-DatepickerRange.Calendar = Calendar;
-DatepickerRange.propTypes = {
-  locale: PropTypes__default['default'].string,
-  startValue: PropTypes__default['default'].instanceOf(Date),
-  endValue: PropTypes__default['default'].instanceOf(Date),
-  minValue: PropTypes__default['default'].instanceOf(Date),
-  maxValue: PropTypes__default['default'].instanceOf(Date),
-  onChange: PropTypes__default['default'].func,
-  formatDate: PropTypes__default['default'].func,
-  customParseDate: PropTypes__default['default'].func,
-  isCompact: PropTypes__default['default'].bool
+DatepickerRangeComponent.propTypes = {
+  locale: PropTypes__default["default"].string,
+  startValue: PropTypes__default["default"].instanceOf(Date),
+  endValue: PropTypes__default["default"].instanceOf(Date),
+  minValue: PropTypes__default["default"].instanceOf(Date),
+  maxValue: PropTypes__default["default"].instanceOf(Date),
+  onChange: PropTypes__default["default"].func,
+  formatDate: PropTypes__default["default"].func,
+  customParseDate: PropTypes__default["default"].func,
+  isCompact: PropTypes__default["default"].bool
 };
-DatepickerRange.defaultProps = {
+DatepickerRangeComponent.defaultProps = {
   locale: 'en-US',
   isCompact: false
 };
+var DatepickerRange = DatepickerRangeComponent;
+DatepickerRange.Calendar = Calendar;
+DatepickerRange.End = End;
+DatepickerRange.Start = Start;
 
 exports.Datepicker = Datepicker;
 exports.DatepickerRange = DatepickerRange;

package/dist/index.esm.js

@@ -6,7 +6,7 @@
  */
 
 import * as React from 'react';
-import React__default, { createContext, useContext, useCallback, useReducer, useRef, useEffect, useState, useMemo } from 'react';
+import React__default, { createContext, useContext, useCallback, forwardRef, useReducer, useRef, useEffect, useState, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import styled, { css, ThemeContext } from 'styled-components';
 import { Manager, Reference, Popper } from 'react-popper';
@@ -18,14 +18,9 @@ function ownKeys(object, enumerableOnly) {
 
   if (Object.getOwnPropertySymbols) {
     var symbols = Object.getOwnPropertySymbols(object);
-
-    if (enumerableOnly) {
-      symbols = symbols.filter(function (sym) {
-        return Object.getOwnPropertyDescriptor(object, sym).enumerable;
-      });
-    }
-
-    keys.push.apply(keys, symbols);
+    enumerableOnly && (symbols = symbols.filter(function (sym) {
+      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+    })), keys.push.apply(keys, symbols);
   }
 
   return keys;
@@ -33,19 +28,12 @@ function ownKeys(object, enumerableOnly) {
 
 function _objectSpread2(target) {
   for (var i = 1; i < arguments.length; i++) {
-    var source = arguments[i] != null ? arguments[i] : {};
-
-    if (i % 2) {
-      ownKeys(Object(source), true).forEach(function (key) {
-        _defineProperty(target, key, source[key]);
-      });
-    } else if (Object.getOwnPropertyDescriptors) {
-      Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
-    } else {
-      ownKeys(Object(source)).forEach(function (key) {
-        Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
-      });
-    }
+    var source = null != arguments[i] ? arguments[i] : {};
+    i % 2 ? ownKeys(Object(source), !0).forEach(function (key) {
+      _defineProperty(target, key, source[key]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) {
+      Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+    });
   }
 
   return target;
@@ -84,6 +72,42 @@ function _extends$2() {
   return _extends$2.apply(this, arguments);
 }
 
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
+  }
+
+  return target;
+}
+
+function _objectWithoutProperties(source, excluded) {
+  if (source == null) return {};
+
+  var target = _objectWithoutPropertiesLoose(source, excluded);
+
+  var key, i;
+
+  if (Object.getOwnPropertySymbols) {
+    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+
+    for (i = 0; i < sourceSymbolKeys.length; i++) {
+      key = sourceSymbolKeys[i];
+      if (excluded.indexOf(key) >= 0) continue;
+      if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+      target[key] = source[key];
+    }
+  }
+
+  return target;
+}
+
 function _slicedToArray(arr, i) {
   return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
 }
@@ -364,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.46.0'
+  'data-garden-version': '8.48.0'
 }).withConfig({
   displayName: "StyledMenu",
   componentId: "sc-1npbkk0-0"
@@ -733,41 +757,41 @@ function getStartOfWeek(locale) {
   return 0;
 }
 
-function _extends$1() { _extends$1 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1.apply(this, arguments); }
+var _path$1;
 
-var _ref$1 = /*#__PURE__*/React.createElement("path", {
-  fill: "currentColor",
-  d: "M10.39 12.688a.5.5 0 01-.718.69l-.062-.066-4-5a.5.5 0 01-.054-.542l.054-.082 4-5a.5.5 0 01.83.55l-.05.074L6.641 8l3.75 4.688z"
-});
+function _extends$1() { _extends$1 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1.apply(this, arguments); }
 
-function SvgChevronLeftStroke(props) {
+var SvgChevronLeftStroke = function SvgChevronLeftStroke(props) {
   return /*#__PURE__*/React.createElement("svg", _extends$1({
     xmlns: "http://www.w3.org/2000/svg",
     width: 16,
     height: 16,
-    viewBox: "0 0 16 16",
     focusable: "false",
-    role: "presentation"
-  }, props), _ref$1);
-}
+    viewBox: "0 0 16 16",
+    "aria-hidden": "true"
+  }, props), _path$1 || (_path$1 = /*#__PURE__*/React.createElement("path", {
+    fill: "currentColor",
+    d: "M10.39 12.688a.5.5 0 01-.718.69l-.062-.066-4-5a.5.5 0 01-.054-.542l.054-.082 4-5a.5.5 0 01.83.55l-.05.074L6.641 8l3.75 4.688z"
+  })));
+};
 
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+var _path;
 
-var _ref = /*#__PURE__*/React.createElement("path", {
-  fill: "currentColor",
-  d: "M5.61 3.312a.5.5 0 01.718-.69l.062.066 4 5a.5.5 0 01.054.542l-.054.082-4 5a.5.5 0 01-.83-.55l.05-.074L9.359 8l-3.75-4.688z"
-});
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-function SvgChevronRightStroke(props) {
+var SvgChevronRightStroke = function SvgChevronRightStroke(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",
     width: 16,
     height: 16,
-    viewBox: "0 0 16 16",
     focusable: "false",
-    role: "presentation"
-  }, props), _ref);
-}
+    viewBox: "0 0 16 16",
+    "aria-hidden": "true"
+  }, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
+    fill: "currentColor",
+    d: "M5.61 3.312a.5.5 0 01.718-.69l.062.066 4 5a.5.5 0 01.054.542l-.054.082-4 5a.5.5 0 01-.83-.55l.05-.074L9.359 8l-3.75-4.688z"
+  })));
+};
 
 var MonthSelector = function MonthSelector(_ref) {
   var locale = _ref.locale,
@@ -803,7 +827,7 @@ var MonthSelector = function MonthSelector(_ref) {
   }, React__default.createElement(SvgChevronRightStroke, null)));
 };
 
-var Calendar$1 = function Calendar(_ref) {
+var Calendar$1 = forwardRef(function (_ref, ref) {
   var value = _ref.value,
       minValue = _ref.minValue,
       maxValue = _ref.maxValue,
@@ -874,6 +898,7 @@ var Calendar$1 = function Calendar(_ref) {
     }, formattedDayLabel));
   });
   return React__default.createElement(StyledDatepicker, {
+    ref: ref,
     isCompact: isCompact,
     onMouseDown: function onMouseDown(e) {
       e.preventDefault();
@@ -884,7 +909,8 @@ var Calendar$1 = function Calendar(_ref) {
   }), React__default.createElement(StyledCalendar, {
     isCompact: isCompact
   }, dayLabels, items));
-};
+});
+Calendar$1.displayName = 'Calendar';
 
 function addMonths(dirtyDate, dirtyAmount) {
   requiredArgs(2, arguments);
@@ -3226,7 +3252,8 @@ function retrieveInitialState$1(initialProps) {
   };
 }
 
-var Datepicker = function Datepicker(props) {
+var _excluded = ["children", "placement", "popperModifiers", "eventsEnabled", "zIndex", "isAnimated", "refKey", "value", "isCompact", "onChange", "formatDate", "minValue", "maxValue", "locale", "customParseDate"];
+var Datepicker = forwardRef(function (props, calendarRef) {
   var children = props.children,
       placement = props.placement,
       popperModifiers = props.popperModifiers,
@@ -3241,7 +3268,8 @@ var Datepicker = function Datepicker(props) {
       minValue = props.minValue,
       maxValue = props.maxValue,
       locale = props.locale,
-      customParseDate = props.customParseDate;
+      customParseDate = props.customParseDate,
+      menuProps = _objectWithoutProperties(props, _excluded);
   var theme = useContext(ThemeContext);
   var memoizedReducer = useCallback(datepickerReducer({
     value: value,
@@ -3364,7 +3392,8 @@ var Datepicker = function Datepicker(props) {
       isAnimated: isAnimated && (state.isOpen || isVisible),
       placement: currentPlacement,
       zIndex: zIndex
-    }, React__default.createElement(StyledMenu, null, React__default.createElement(Calendar$1, {
+    }, (state.isOpen || isVisible) && React__default.createElement(StyledMenu, menuProps, React__default.createElement(Calendar$1, {
+      ref: calendarRef,
       isCompact: isCompact,
       value: value,
       minValue: minValue,
@@ -3372,7 +3401,8 @@ var Datepicker = function Datepicker(props) {
       locale: locale
     })));
   })));
-};
+});
+Datepicker.displayName = 'Datepicker';
 Datepicker.propTypes = {
   value: PropTypes.any,
   onChange: PropTypes.any,
@@ -3801,7 +3831,7 @@ function subDays(dirtyDate, dirtyAmount) {
   return addDays(dirtyDate, -amount);
 }
 
-var Month = function Month(_ref) {
+var Month = forwardRef(function (_ref, ref) {
   var locale = _ref.locale,
       displayDate = _ref.displayDate,
       isCompact = _ref.isCompact,
@@ -3941,6 +3971,7 @@ var Month = function Month(_ref) {
     }, formattedDayLabel));
   });
   return React__default.createElement(StyledDatepicker, {
+    ref: ref,
     isCompact: isCompact,
     onMouseDown: function onMouseDown(e) {
       e.preventDefault();
@@ -3974,9 +4005,10 @@ var Month = function Month(_ref) {
       });
     }
   }, dayLabels, items));
-};
+});
+Month.displayName = 'Month';
 
-var Calendar = function Calendar(props) {
+var Calendar = forwardRef(function (props, ref) {
   var _useDatepickerRangeCo = useDatepickerContext(),
       state = _useDatepickerRangeCo.state,
       dispatch = _useDatepickerRangeCo.dispatch,
@@ -3988,8 +4020,9 @@ var Calendar = function Calendar(props) {
       endValue = _useDatepickerRangeCo.endValue,
       onChange = _useDatepickerRangeCo.onChange;
   return React__default.createElement(StyledRangeCalendar, _extends$2({
+    ref: ref,
     "data-garden-id": "datepickers.range",
-    "data-garden-version": '8.46.0'
+    "data-garden-version": '8.48.0'
   }, props), React__default.createElement(Month, {
     locale: locale,
     displayDate: state.previewDate,
@@ -4015,9 +4048,10 @@ var Calendar = function Calendar(props) {
     onChange: onChange,
     hoverDate: state.hoverDate
   }));
-};
+});
+Calendar.displayName = 'Calendar';
 
-var DatepickerRange = function DatepickerRange(props) {
+var DatepickerRangeComponent = function DatepickerRangeComponent(props) {
   var startValue = props.startValue,
       locale = props.locale,
       formatDate = props.formatDate,
@@ -4083,10 +4117,7 @@ var DatepickerRange = function DatepickerRange(props) {
     value: value
   }, children);
 };
-DatepickerRange.Start = Start;
-DatepickerRange.End = End;
-DatepickerRange.Calendar = Calendar;
-DatepickerRange.propTypes = {
+DatepickerRangeComponent.propTypes = {
   locale: PropTypes.string,
   startValue: PropTypes.instanceOf(Date),
   endValue: PropTypes.instanceOf(Date),
@@ -4097,9 +4128,13 @@ DatepickerRange.propTypes = {
   customParseDate: PropTypes.func,
   isCompact: PropTypes.bool
 };
-DatepickerRange.defaultProps = {
+DatepickerRangeComponent.defaultProps = {
   locale: 'en-US',
   isCompact: false
 };
+var DatepickerRange = DatepickerRangeComponent;
+DatepickerRange.Calendar = Calendar;
+DatepickerRange.End = End;
+DatepickerRange.Start = Start;
 
 export { Datepicker, DatepickerRange };

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

@@ -4,10 +4,13 @@
  * 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 from 'react';
+import React, { HTMLAttributes } from 'react';
 import { Modifiers } from 'popper.js';
 import { GARDEN_PLACEMENT } from './utils/garden-placements';
-export interface IDatepickerProps {
+/**
+ * @extends HTMLAttributes<HTMLDivElement>
+ */
+export interface IDatepickerProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
     /**
      * Sets the selected date
      */
@@ -74,4 +77,4 @@ export interface IDatepickerProps {
      */
     zIndex?: number;
 }
-export declare const Datepicker: React.FunctionComponent<IDatepickerProps>;
+export declare const Datepicker: React.ForwardRefExoticComponent<IDatepickerProps & React.RefAttributes<HTMLDivElement>>;

package/dist/typings/elements/Datepicker/components/Calendar.d.ts

@@ -4,13 +4,13 @@
  * 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 from 'react';
-interface ICalendarProps {
+import React, { HTMLAttributes } from 'react';
+interface ICalendarProps extends HTMLAttributes<HTMLDivElement> {
     value?: Date;
     minValue?: Date;
     maxValue?: Date;
     isCompact?: boolean;
     locale?: string;
 }
-declare const Calendar: React.FunctionComponent<ICalendarProps>;
-export default Calendar;
+export declare const Calendar: React.ForwardRefExoticComponent<ICalendarProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/dist/typings/elements/Datepicker/components/MonthSelector.d.ts

@@ -9,5 +9,5 @@ interface IMonthSelectorProps {
     locale?: string;
     isCompact: boolean;
 }
-declare const MonthSelector: React.FunctionComponent<IMonthSelectorProps>;
-export default MonthSelector;
+export declare const MonthSelector: React.FunctionComponent<IMonthSelectorProps>;
+export {};

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

@@ -4,8 +4,11 @@
  * 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, { PropsWithChildren } from 'react';
+import { PropsWithChildren } from 'react';
 import PropTypes from 'prop-types';
+import { Start } from './components/Start';
+import { End } from './components/End';
+import { Calendar } from './components/Calendar';
 export interface IDatepickerRangeProps {
     /**
      * Applies locale-based formatting.
@@ -60,9 +63,6 @@ export interface IDatepickerRangeProps {
 }
 export declare const DatepickerRange: {
     (props: PropsWithChildren<IDatepickerRangeProps>): JSX.Element;
-    Start: (props: React.PropsWithChildren<React.HTMLAttributes<HTMLInputElement>>) => React.ReactElement<any, string | ((props: any) => React.ReactElement<any, any> | null) | (new (props: any) => React.Component<any, any, any>)>;
-    End: (props: React.PropsWithChildren<React.HTMLAttributes<HTMLInputElement>>) => React.ReactElement<any, string | ((props: any) => React.ReactElement<any, any> | null) | (new (props: any) => React.Component<any, any, any>)>;
-    Calendar: React.FunctionComponent<React.HTMLAttributes<HTMLDivElement>>;
     propTypes: {
         locale: PropTypes.Requireable<string>;
         startValue: PropTypes.Requireable<Date>;
@@ -78,4 +78,8 @@ export declare const DatepickerRange: {
         locale: string;
         isCompact: boolean;
     };
+} & {
+    Calendar: typeof Calendar;
+    End: typeof End;
+    Start: typeof Start;
 };

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

@@ -4,6 +4,8 @@
  * 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';
-declare const Calendar: React.FunctionComponent<HTMLAttributes<HTMLDivElement>>;
-export default Calendar;
+import React from 'react';
+/**
+ * @extends HTMLAttributes<HTMLDivElement>
+ */
+export declare const Calendar: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;

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

@@ -5,5 +5,4 @@
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
 import React, { PropsWithChildren, HTMLAttributes } from 'react';
-declare const End: (props: PropsWithChildren<HTMLAttributes<HTMLInputElement>>) => React.ReactElement<any, string | ((props: any) => React.ReactElement<any, any> | null) | (new (props: any) => React.Component<any, any, any>)>;
-export default End;
+export declare const End: (props: PropsWithChildren<HTMLAttributes<HTMLInputElement>>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;

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

@@ -4,9 +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 from 'react';
+import React, { HTMLAttributes } from 'react';
 import { DatepickerRangeAction } from '../utils/datepicker-range-reducer';
-declare const Month: React.FunctionComponent<{
+interface IMonthProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
     locale?: string;
     displayDate: Date;
     isCompact?: boolean;
@@ -22,5 +22,6 @@ declare const Month: React.FunctionComponent<{
         endValue?: Date;
     }) => void;
     hoverDate?: Date;
-}>;
-export default Month;
+}
+export declare const Month: React.ForwardRefExoticComponent<IMonthProps & React.RefAttributes<HTMLDivElement>>;
+export {};

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

@@ -5,5 +5,4 @@
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
 import React, { PropsWithChildren, HTMLAttributes } from 'react';
-declare const Start: (props: PropsWithChildren<HTMLAttributes<HTMLInputElement>>) => React.ReactElement<any, string | ((props: any) => React.ReactElement<any, any> | null) | (new (props: any) => React.Component<any, any, any>)>;
-export default Start;
+export declare const Start: (props: PropsWithChildren<HTMLAttributes<HTMLInputElement>>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zendeskgarden/react-datepickers",
-  "version": "8.46.0",
+  "version": "8.48.0",
   "description": "Components relating to datepickers in the Garden Design System",
   "license": "Apache-2.0",
   "author": "Zendesk Garden <garden@zendesk.com>",
@@ -21,7 +21,7 @@
   "sideEffects": false,
   "types": "dist/typings/index.d.ts",
   "dependencies": {
-    "@zendeskgarden/container-utilities": "^0.6.0",
+    "@zendeskgarden/container-utilities": "^0.7.0",
     "date-fns": "^2.0.0-beta.2",
     "prop-types": "^15.5.7",
     "react-popper": "^1.3.4"
@@ -33,7 +33,7 @@
     "styled-components": "^4.2.0 || ^5.0.0"
   },
   "devDependencies": {
-    "@zendeskgarden/react-theming": "^8.46.0",
+    "@zendeskgarden/react-theming": "^8.48.0",
     "@zendeskgarden/svg-icons": "6.30.2"
   },
   "keywords": [
@@ -46,5 +46,5 @@
     "access": "public"
   },
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "9e577b188009344c7ad0a035749930a4e19e400a"
+  "gitHead": "75f36aee62043004650c3eb2e1583b98a87d71f8"
 }