@zendeskgarden/react-datepickers 8.47.2 → 8.48.0

package/dist/index.cjs.js

@@ -100,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();
 }
@@ -380,7 +416,7 @@ function getDate(dirtyDate) {
 var COMPONENT_ID$b = 'datepickers.menu';
 var StyledMenu = styled__default["default"].div.attrs({
   'data-garden-id': COMPONENT_ID$b,
-  'data-garden-version': '8.47.2'
+  'data-garden-version': '8.48.0'
 }).withConfig({
   displayName: "StyledMenu",
   componentId: "sc-1npbkk0-0"
@@ -819,7 +855,7 @@ var MonthSelector = function MonthSelector(_ref) {
   }, 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,
@@ -890,6 +926,7 @@ var Calendar$1 = function Calendar(_ref) {
     }, formattedDayLabel));
   });
   return React__default["default"].createElement(StyledDatepicker, {
+    ref: ref,
     isCompact: isCompact,
     onMouseDown: function onMouseDown(e) {
       e.preventDefault();
@@ -900,7 +937,8 @@ var Calendar$1 = function Calendar(_ref) {
   }), React__default["default"].createElement(StyledCalendar, {
     isCompact: isCompact
   }, dayLabels, items));
-};
+});
+Calendar$1.displayName = 'Calendar';
 
 function addMonths(dirtyDate, dirtyAmount) {
   requiredArgs(2, arguments);
@@ -3242,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,
@@ -3257,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,
@@ -3380,7 +3420,8 @@ var Datepicker = function Datepicker(props) {
       isAnimated: isAnimated && (state.isOpen || isVisible),
       placement: currentPlacement,
       zIndex: zIndex
-    }, (state.isOpen || isVisible) && 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,
@@ -3388,7 +3429,8 @@ var Datepicker = function Datepicker(props) {
       locale: locale
     })));
   })));
-};
+});
+Datepicker.displayName = 'Datepicker';
 Datepicker.propTypes = {
   value: PropTypes__default["default"].any,
   onChange: PropTypes__default["default"].any,
@@ -3817,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,
@@ -3957,6 +3999,7 @@ var Month = function Month(_ref) {
     }, formattedDayLabel));
   });
   return React__default["default"].createElement(StyledDatepicker, {
+    ref: ref,
     isCompact: isCompact,
     onMouseDown: function onMouseDown(e) {
       e.preventDefault();
@@ -3990,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,
@@ -4004,8 +4048,9 @@ var Calendar = function Calendar(props) {
       endValue = _useDatepickerRangeCo.endValue,
       onChange = _useDatepickerRangeCo.onChange;
   return React__default["default"].createElement(StyledRangeCalendar, _extends$2({
+    ref: ref,
     "data-garden-id": "datepickers.range",
-    "data-garden-version": '8.47.2'
+    "data-garden-version": '8.48.0'
   }, props), React__default["default"].createElement(Month, {
     locale: locale,
     displayDate: state.previewDate,
@@ -4031,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,
@@ -4099,10 +4145,7 @@ var DatepickerRange = function DatepickerRange(props) {
     value: value
   }, children);
 };
-DatepickerRange.Start = Start;
-DatepickerRange.End = End;
-DatepickerRange.Calendar = Calendar;
-DatepickerRange.propTypes = {
+DatepickerRangeComponent.propTypes = {
   locale: PropTypes__default["default"].string,
   startValue: PropTypes__default["default"].instanceOf(Date),
   endValue: PropTypes__default["default"].instanceOf(Date),
@@ -4113,10 +4156,14 @@ DatepickerRange.propTypes = {
   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';
@@ -72,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();
 }
@@ -352,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.47.2'
+  'data-garden-version': '8.48.0'
 }).withConfig({
   displayName: "StyledMenu",
   componentId: "sc-1npbkk0-0"
@@ -791,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,
@@ -862,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();
@@ -872,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);
@@ -3214,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,
@@ -3229,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,
@@ -3352,7 +3392,8 @@ var Datepicker = function Datepicker(props) {
       isAnimated: isAnimated && (state.isOpen || isVisible),
       placement: currentPlacement,
       zIndex: zIndex
-    }, (state.isOpen || isVisible) && 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,
@@ -3360,7 +3401,8 @@ var Datepicker = function Datepicker(props) {
       locale: locale
     })));
   })));
-};
+});
+Datepicker.displayName = 'Datepicker';
 Datepicker.propTypes = {
   value: PropTypes.any,
   onChange: PropTypes.any,
@@ -3789,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,
@@ -3929,6 +3971,7 @@ var Month = function Month(_ref) {
     }, formattedDayLabel));
   });
   return React__default.createElement(StyledDatepicker, {
+    ref: ref,
     isCompact: isCompact,
     onMouseDown: function onMouseDown(e) {
       e.preventDefault();
@@ -3962,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,
@@ -3976,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.47.2'
+    "data-garden-version": '8.48.0'
   }, props), React__default.createElement(Month, {
     locale: locale,
     displayDate: state.previewDate,
@@ -4003,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,
@@ -4071,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),
@@ -4085,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 | React.JSXElementConstructor<any>>;
-    End: (props: React.PropsWithChildren<React.HTMLAttributes<HTMLInputElement>>) => React.ReactElement<any, string | React.JSXElementConstructor<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 | React.JSXElementConstructor<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 | React.JSXElementConstructor<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.47.2",
+  "version": "8.48.0",
   "description": "Components relating to datepickers in the Garden Design System",
   "license": "Apache-2.0",
   "author": "Zendesk Garden <garden@zendesk.com>",
@@ -33,7 +33,7 @@
     "styled-components": "^4.2.0 || ^5.0.0"
   },
   "devDependencies": {
-    "@zendeskgarden/react-theming": "^8.47.2",
+    "@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": "41cb43f285760417ae2145e47eca0e4a600455ab"
+  "gitHead": "75f36aee62043004650c3eb2e1583b98a87d71f8"
 }