@zendeskgarden/react-datepickers 9.0.0-next.1 → 9.0.0-next.3

package/dist/index.esm.js

@@ -6,11 +6,12 @@
  */
 
 import * as React from 'react';
-import React__default, { createContext, useContext, useCallback, forwardRef, useReducer, useRef, useEffect, useState, useMemo } from 'react';
+import React__default, { createContext, useContext, useCallback, forwardRef, useRef, cloneElement, useReducer, useState, useMemo, useEffect } from 'react';
 import PropTypes from 'prop-types';
+import { mergeRefs } from 'react-merge-refs';
 import styled, { css, ThemeContext } from 'styled-components';
-import { Manager, Reference, Popper } from 'react-popper';
-import { composeEventHandlers, KEYS } from '@zendeskgarden/container-utilities';
+import { useFloating, autoPlacement, flip, autoUpdate } from '@floating-ui/react-dom';
+import { PLACEMENT as PLACEMENT$1, retrieveComponentStyles, DEFAULT_THEME, menuStyles, getMenuPosition, getColor, getFloatingPlacements } from '@zendeskgarden/react-theming';
 import { startOfMonth } from 'date-fns/startOfMonth';
 import { endOfMonth } from 'date-fns/endOfMonth';
 import { startOfWeek } from 'date-fns/startOfWeek';
@@ -23,71 +24,21 @@ import { isSameMonth } from 'date-fns/isSameMonth';
 import { isBefore } from 'date-fns/isBefore';
 import { isAfter } from 'date-fns/isAfter';
 import { getDate } from 'date-fns/getDate';
-import { retrieveComponentStyles, DEFAULT_THEME, menuStyles, getColor } from '@zendeskgarden/react-theming';
 import { addMonths } from 'date-fns/addMonths';
 import { subMonths } from 'date-fns/subMonths';
 import { isValid } from 'date-fns/isValid';
 import { parse } from 'date-fns/parse';
+import { composeEventHandlers, KEYS } from '@zendeskgarden/container-utilities';
 import { compareAsc } from 'date-fns/compareAsc';
 import { subDays } from 'date-fns/subDays';
 
 const WEEK_STARTS_ON = [0, 1, 2, 3, 4, 5, 6];
-const SHARED_PLACEMENT = ['auto', 'top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end'];
-const PLACEMENT = [...SHARED_PLACEMENT, 'end', 'end-top', 'end-bottom', 'start', 'start-top', 'start-bottom'];
-
-function getPopperPlacement(gardenPlacement) {
-  switch (gardenPlacement) {
-    case 'end':
-      return 'right';
-    case 'end-top':
-      return 'right-start';
-    case 'end-bottom':
-      return 'right-end';
-    case 'start':
-      return 'left';
-    case 'start-top':
-      return 'left-start';
-    case 'start-bottom':
-      return 'left-end';
-    default:
-      return gardenPlacement;
-  }
-}
-function getRtlPopperPlacement(gardenPlacement) {
-  const popperPlacement = getPopperPlacement(gardenPlacement);
-  switch (popperPlacement) {
-    case 'left':
-      return 'right';
-    case 'left-start':
-      return 'right-start';
-    case 'left-end':
-      return 'right-end';
-    case 'top-start':
-      return 'top-end';
-    case 'top-end':
-      return 'top-start';
-    case 'right':
-      return 'left';
-    case 'right-start':
-      return 'left-start';
-    case 'right-end':
-      return 'left-end';
-    case 'bottom-start':
-      return 'bottom-end';
-    case 'bottom-end':
-      return 'bottom-start';
-    default:
-      return popperPlacement;
-  }
-}
-function getMenuPosition(popperPlacement) {
-  return popperPlacement ? popperPlacement.split('-')[0] : 'bottom';
-}
+const PLACEMENT = ['auto', ...PLACEMENT$1];
 
 const COMPONENT_ID$b = 'datepickers.menu';
 const StyledMenu = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$b,
-  'data-garden-version': '9.0.0-next.1'
+  'data-garden-version': '9.0.0-next.3'
 }).withConfig({
   displayName: "StyledMenu",
   componentId: "sc-1npbkk0-0"
@@ -102,7 +53,7 @@ const StyledMenuWrapper = styled.div.attrs(props => ({
 })).withConfig({
   displayName: "StyledMenuWrapper",
   componentId: "sc-6fowoz-0"
-})(["", ";", ";"], props => menuStyles(getMenuPosition(props.placement), {
+})(["top:0;left:0;", ";", ";"], props => menuStyles(getMenuPosition(props.placement), {
   theme: props.theme,
   hidden: props.isHidden,
   margin: `${props.theme.space.base}px`,
@@ -125,13 +76,13 @@ const retrievePadding = _ref => {
   }
   return `margin: ${value}px;`;
 };
-const StyledDatepicker = styled.div.attrs({
+const StyledDatePicker = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$9
 }).withConfig({
-  displayName: "StyledDatepicker",
-  componentId: "sc-w3zqsp-0"
+  displayName: "StyledDatePicker",
+  componentId: "sc-15hwqzh-0"
 })(["direction:", ";", " background-color:", ";color:", ";", ";"], props => props.theme.rtl && 'rtl', retrievePadding, props => props.theme.colors.background, props => props.theme.colors.foreground, props => retrieveComponentStyles(COMPONENT_ID$9, props));
-StyledDatepicker.defaultProps = {
+StyledDatePicker.defaultProps = {
   theme: DEFAULT_THEME
 };
 
@@ -141,7 +92,7 @@ const StyledRangeCalendar = styled.div.attrs({
 }).withConfig({
   displayName: "StyledRangeCalendar",
   componentId: "sc-1og46sy-0"
-})(["display:flex;overflow:auto;", "{margin:0;", "}", ";"], StyledDatepicker, props => props.theme.rtl ? `&:last-of-type {margin-right: ${props.theme.space.base * 5}px}` : `&:first-of-type {margin-right: ${props.theme.space.base * 5}px}`, props => retrieveComponentStyles(COMPONENT_ID$8, props));
+})(["display:flex;overflow:auto;", "{margin:0;", "}", ";"], StyledDatePicker, props => props.theme.rtl ? `&:last-of-type {margin-right: ${props.theme.space.base * 5}px}` : `&:first-of-type {margin-right: ${props.theme.space.base * 5}px}`, props => retrieveComponentStyles(COMPONENT_ID$8, props));
 StyledRangeCalendar.defaultProps = {
   theme: DEFAULT_THEME
 };
@@ -326,9 +277,9 @@ StyledDay.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-const DatepickerContext = createContext(undefined);
-const useDatepickerContext$1 = () => {
-  return useContext(DatepickerContext);
+const DatePickerContext = createContext(undefined);
+const useDatePickerContext$1 = () => {
+  return useContext(DatePickerContext);
 };
 
 const REGION_MAPPINGS = {
@@ -452,7 +403,7 @@ const MonthSelector = _ref => {
   const {
     state,
     dispatch
-  } = useDatepickerContext$1();
+  } = useDatePickerContext$1();
   const headerLabelFormatter = useCallback(date => {
     const formatter = new Intl.DateTimeFormat(locale, {
       month: 'long',
@@ -493,7 +444,7 @@ const Calendar$1 = forwardRef((_ref, ref) => {
   const {
     state,
     dispatch
-  } = useDatepickerContext$1();
+  } = useDatePickerContext$1();
   const preferredWeekStartsOn = weekStartsOn || getStartOfWeek(locale);
   const monthStartDate = startOfMonth(state.previewDate);
   const monthEndDate = endOfMonth(monthStartDate);
@@ -555,7 +506,7 @@ const Calendar$1 = forwardRef((_ref, ref) => {
       }
     }, formattedDayLabel));
   });
-  return React__default.createElement(StyledDatepicker, {
+  return React__default.createElement(StyledDatePicker, {
     ref: ref,
     isCompact: isCompact,
     onMouseDown: e => {
@@ -743,12 +694,76 @@ function retrieveInitialState$1(initialProps) {
   };
 }
 
-const Datepicker = forwardRef((props, calendarRef) => {
+const Input = forwardRef((_ref, ref) => {
+  let {
+    element,
+    dispatch,
+    state,
+    refKey
+  } = _ref;
+  const isInputMouseDownRef = useRef(false);
+  const handleBlur = () => {
+    dispatch({
+      type: 'CLOSE'
+    });
+  };
+  const handleChange = e => {
+    dispatch({
+      type: 'MANUALLY_UPDATE_INPUT',
+      value: e.target.value
+    });
+  };
+  const handleClick = () => {
+    if (isInputMouseDownRef.current && !state.isOpen) {
+      dispatch({
+        type: 'OPEN'
+      });
+    }
+  };
+  const handleKeyDown = e => {
+    switch (e.key) {
+      case KEYS.ESCAPE:
+      case KEYS.ENTER:
+        dispatch({
+          type: 'CLOSE'
+        });
+        break;
+      case KEYS.UP:
+      case KEYS.DOWN:
+      case KEYS.SPACE:
+        dispatch({
+          type: 'OPEN'
+        });
+        break;
+    }
+  };
+  const handleMouseDown = () => {
+    isInputMouseDownRef.current = true;
+  };
+  const handleMouseUp = () => {
+    setTimeout(() => {
+      isInputMouseDownRef.current = false;
+    }, 0);
+  };
+  return cloneElement(element, {
+    [refKey]: ref,
+    onMouseDown: composeEventHandlers(element.props.onMouseDown, handleMouseDown),
+    onMouseUp: composeEventHandlers(element.props.onMouseUp, handleMouseUp),
+    onClick: composeEventHandlers(element.props.onClick, handleClick),
+    onBlur: composeEventHandlers(element.props.onBlur, handleBlur),
+    onChange: composeEventHandlers(element.props.onChange, handleChange),
+    onKeyDown: composeEventHandlers(element.props.onKeyDown, handleKeyDown),
+    autoComplete: 'off',
+    value: state.inputValue
+  });
+});
+Input.displayName = 'Input';
+
+const PLACEMENT_DEFAULT = 'bottom-start';
+const DatePicker = forwardRef((props, calendarRef) => {
   const {
     children,
-    placement,
-    popperModifiers,
-    eventsEnabled,
+    placement: _placement,
     zIndex,
     isAnimated,
     refKey,
@@ -763,7 +778,7 @@ const Datepicker = forwardRef((props, calendarRef) => {
     customParseDate,
     ...menuProps
   } = props;
-  const theme = useContext(ThemeContext);
+  const theme = useContext(ThemeContext) || DEFAULT_THEME;
   const memoizedReducer = useCallback(datepickerReducer({
     value,
     formatDate,
@@ -772,15 +787,39 @@ const Datepicker = forwardRef((props, calendarRef) => {
     onChange
   }), [value, formatDate, locale, onChange, customParseDate]);
   const [state, dispatch] = useReducer(memoizedReducer, retrieveInitialState$1(props));
-  const scheduleUpdateRef = useRef(undefined);
-  const inputRef = useRef(null);
-  const isInputMouseDownRef = useRef(false);
-  useEffect(() => {
-    if (state.isOpen && scheduleUpdateRef.current) {
-      scheduleUpdateRef.current();
+  const triggerRef = useRef(null);
+  const floatingRef = useRef(null);
+  const [isVisible, setIsVisible] = useState(state.isOpen);
+  const contextValue = useMemo(() => ({
+    state,
+    dispatch
+  }), [state, dispatch]);
+  const [floatingPlacement] = getFloatingPlacements(theme, _placement === 'auto' ? PLACEMENT_DEFAULT : _placement);
+  const {
+    refs,
+    placement,
+    update,
+    floatingStyles: {
+      transform
     }
+  } = useFloating({
+    elements: {
+      reference: triggerRef?.current,
+      floating: floatingRef?.current
+    },
+    placement: floatingPlacement,
+    middleware: [_placement === 'auto' ? autoPlacement() : flip()]
   });
-  const [isVisible, setIsVisible] = useState(state.isOpen);
+  const Child = React__default.Children.only(children);
+  useEffect(() => {
+    let cleanup;
+    if (state.isOpen && refs.reference.current && refs.floating.current) {
+      cleanup = autoUpdate(refs.reference.current, refs.floating.current, update, {
+        elementResize: typeof ResizeObserver === 'function'
+      });
+    }
+    return () => cleanup && cleanup();
+  }, [state.isOpen, refs.reference, refs.floating, update]);
   useEffect(() => {
     let timeout;
     if (state.isOpen) {
@@ -803,102 +842,35 @@ const Datepicker = forwardRef((props, calendarRef) => {
       type: 'CONTROLLED_LOCALE_CHANGE'
     });
   }, [locale]);
-  const popperPlacement = theme.rtl ? getRtlPopperPlacement(placement) : getPopperPlacement(placement);
-  const contextValue = useMemo(() => ({
-    state,
-    dispatch
-  }), [state, dispatch]);
-  return React__default.createElement(DatepickerContext.Provider, {
+  return React__default.createElement(React__default.Fragment, null, React__default.createElement(Input, {
+    element: Child,
+    dispatch: dispatch,
+    state: state,
+    refKey: refKey,
+    ref: mergeRefs([triggerRef, Child.ref ? Child.ref : null])
+  }), React__default.createElement(DatePickerContext.Provider, {
     value: contextValue
-  }, React__default.createElement(Manager, null, React__default.createElement(Reference, null, _ref => {
-    let {
-      ref
-    } = _ref;
-    const childElement = React__default.Children.only(children);
-    return React__default.cloneElement(childElement, {
-      [refKey]: refValue => {
-        ref(refValue);
-        inputRef.current = refValue;
-      },
-      onMouseDown: composeEventHandlers(childElement.props.onMouseDown, () => {
-        isInputMouseDownRef.current = true;
-      }),
-      onMouseUp: composeEventHandlers(childElement.props.onMouseUp, () => {
-        setTimeout(() => {
-          isInputMouseDownRef.current = false;
-        }, 0);
-      }),
-      onClick: composeEventHandlers(childElement.props.onClick, () => {
-        if (isInputMouseDownRef.current && !state.isOpen) {
-          dispatch({
-            type: 'OPEN'
-          });
-        }
-      }),
-      onBlur: composeEventHandlers(childElement.props.onBlur, () => {
-        dispatch({
-          type: 'CLOSE'
-        });
-      }),
-      onChange: composeEventHandlers(childElement.props.onChange, e => {
-        dispatch({
-          type: 'MANUALLY_UPDATE_INPUT',
-          value: e.target.value
-        });
-      }),
-      onKeyDown: composeEventHandlers(childElement.props.onKeyDown, e => {
-        switch (e.key) {
-          case KEYS.ESCAPE:
-          case KEYS.ENTER:
-            dispatch({
-              type: 'CLOSE'
-            });
-            break;
-          case KEYS.UP:
-          case KEYS.DOWN:
-          case KEYS.SPACE:
-            dispatch({
-              type: 'OPEN'
-            });
-            break;
-        }
-      }),
-      autoComplete: 'off',
-      value: state.inputValue
-    });
-  }), React__default.createElement(Popper, {
-    placement: popperPlacement,
-    modifiers: popperModifiers
-    ,
-    eventsEnabled: state.isOpen && eventsEnabled
-  }, _ref2 => {
-    let {
-      ref,
-      style,
-      scheduleUpdate,
-      placement: currentPlacement
-    } = _ref2;
-    scheduleUpdateRef.current = scheduleUpdate;
-    return React__default.createElement(StyledMenuWrapper, {
-      ref: ref,
-      style: style,
-      isHidden: !state.isOpen,
-      isAnimated: isAnimated && (state.isOpen || isVisible),
-      placement: currentPlacement,
-      zIndex: zIndex
-    }, (state.isOpen || isVisible) && React__default.createElement(StyledMenu, menuProps, React__default.createElement(Calendar$1, {
-      ref: calendarRef,
-      isCompact: isCompact,
-      value: value,
-      minValue: minValue,
-      maxValue: maxValue,
-      locale: locale,
-      weekStartsOn: weekStartsOn
-    })));
-  })));
+  }, React__default.createElement(StyledMenuWrapper, {
+    ref: floatingRef,
+    style: {
+      transform
+    },
+    isHidden: !state.isOpen,
+    isAnimated: isAnimated && (state.isOpen || isVisible),
+    placement: placement,
+    zIndex: zIndex
+  }, (state.isOpen || isVisible) && React__default.createElement(StyledMenu, menuProps, React__default.createElement(Calendar$1, {
+    ref: calendarRef,
+    isCompact: isCompact,
+    value: value,
+    minValue: minValue,
+    maxValue: maxValue,
+    locale: locale,
+    weekStartsOn: weekStartsOn
+  })))));
 });
-Datepicker.displayName = 'Datepicker';
-Datepicker.propTypes = {
+DatePicker.displayName = 'DatePicker';
+DatePicker.propTypes = {
   value: PropTypes.any,
   onChange: PropTypes.any,
   formatDate: PropTypes.func,
@@ -910,16 +882,13 @@ Datepicker.propTypes = {
   customParseDate: PropTypes.any,
   refKey: PropTypes.string,
   placement: PropTypes.oneOf(PLACEMENT),
-  popperModifiers: PropTypes.any,
   isAnimated: PropTypes.bool,
-  eventsEnabled: PropTypes.bool,
   zIndex: PropTypes.number
 };
-Datepicker.defaultProps = {
-  placement: 'bottom-start',
+DatePicker.defaultProps = {
+  placement: PLACEMENT_DEFAULT,
   refKey: 'ref',
   isAnimated: true,
-  eventsEnabled: true,
   zIndex: 1000,
   locale: 'en-US'
 };
@@ -1225,9 +1194,9 @@ function retrieveInitialState(initialProps) {
   };
 }
 
-const DatepickerRangeContext = createContext(undefined);
-const useDatepickerContext = () => {
-  return useContext(DatepickerRangeContext);
+const DatePickerRangeContext = createContext(undefined);
+const useDatePickerContext = () => {
+  return useContext(DatePickerRangeContext);
 };
 
 const Start = props => {
@@ -1239,7 +1208,7 @@ const Start = props => {
     endValue,
     startInputRef,
     customParseDate
-  } = useDatepickerContext();
+  } = useDatePickerContext();
   const onChangeCallback = useCallback(e => {
     dispatch({
       type: 'START_INPUT_ONCHANGE',
@@ -1293,7 +1262,7 @@ const Start = props => {
     onBlur: composeEventHandlers(childElement.props.onBlur, onBlurCallback)
   });
 };
-Start.displayName = 'DatepickerRange.Start';
+Start.displayName = 'DatePickerRange.Start';
 
 const End = props => {
   const {
@@ -1304,7 +1273,7 @@ const End = props => {
     endValue,
     endInputRef,
     customParseDate
-  } = useDatepickerContext();
+  } = useDatePickerContext();
   const onChangeCallback = useCallback(e => {
     dispatch({
       type: 'END_INPUT_ONCHANGE',
@@ -1358,7 +1327,7 @@ const End = props => {
     onBlur: composeEventHandlers(childElement.props.onBlur, onBlurCallback)
   });
 };
-End.displayName = 'DatepickerRange.End';
+End.displayName = 'DatePickerRange.End';
 
 function _extends() {
   _extends = Object.assign ? Object.assign.bind() : function (target) {
@@ -1392,7 +1361,7 @@ const Month = forwardRef((_ref, ref) => {
     startValue,
     endValue,
     onChange
-  } = useDatepickerContext();
+  } = useDatePickerContext();
   const headerLabelFormatter = useCallback(date => {
     const formatter = new Intl.DateTimeFormat(locale, {
       month: 'long',
@@ -1569,7 +1538,7 @@ const Month = forwardRef((_ref, ref) => {
       }
     }, formattedDayLabel));
   });
-  return React__default.createElement(StyledDatepicker, {
+  return React__default.createElement(StyledDatePicker, {
     ref: ref,
     isCompact: isCompact,
     onMouseDown: e => {
@@ -1610,11 +1579,11 @@ Month.displayName = 'Month';
 const Calendar = forwardRef((props, ref) => {
   const {
     state
-  } = useDatepickerContext();
+  } = useDatePickerContext();
   return React__default.createElement(StyledRangeCalendar, _extends({
     ref: ref,
     "data-garden-id": "datepickers.range",
-    "data-garden-version": '9.0.0-next.1'
+    "data-garden-version": '9.0.0-next.3'
   }, props), React__default.createElement(Month, {
     displayDate: state.previewDate,
     isNextHidden: true
@@ -1623,9 +1592,9 @@ const Calendar = forwardRef((props, ref) => {
     isPreviousHidden: true
   }));
 });
-Calendar.displayName = 'DatepickerRange.Calendar';
+Calendar.displayName = 'DatePickerRange.Calendar';
 
-const DatepickerRangeComponent = props => {
+const DatePickerRangeComponent = props => {
   const {
     startValue,
     locale,
@@ -1686,11 +1655,11 @@ const DatepickerRangeComponent = props => {
     endInputRef,
     customParseDate
   }), [state, dispatch, isCompact, locale, weekStartsOn, minValue, maxValue, startValue, endValue, onChange, startInputRef, endInputRef, customParseDate]);
-  return React__default.createElement(DatepickerRangeContext.Provider, {
+  return React__default.createElement(DatePickerRangeContext.Provider, {
     value: value
   }, children);
 };
-DatepickerRangeComponent.propTypes = {
+DatePickerRangeComponent.propTypes = {
   locale: PropTypes.string,
   weekStartsOn: PropTypes.number,
   startValue: PropTypes.instanceOf(Date),
@@ -1702,13 +1671,13 @@ DatepickerRangeComponent.propTypes = {
   customParseDate: PropTypes.func,
   isCompact: PropTypes.bool
 };
-DatepickerRangeComponent.defaultProps = {
+DatePickerRangeComponent.defaultProps = {
   locale: 'en-US',
   isCompact: false
 };
-const DatepickerRange = DatepickerRangeComponent;
-DatepickerRange.Calendar = Calendar;
-DatepickerRange.End = End;
-DatepickerRange.Start = Start;
+const DatePickerRange = DatePickerRangeComponent;
+DatePickerRange.Calendar = Calendar;
+DatePickerRange.End = End;
+DatePickerRange.Start = Start;
 
-export { Datepicker, DatepickerRange };
+export { DatePicker, DatePickerRange };

package/dist/typings/elements/{Datepicker/Datepicker.d.ts → DatePicker/DatePicker.d.ts}

@@ -5,8 +5,8 @@
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
 import React from 'react';
-import { IDatepickerProps } from '../../types';
+import { IDatePickerProps } from '../../types';
 /**
  * @extends HTMLAttributes<HTMLDivElement>
  */
-export declare const Datepicker: React.ForwardRefExoticComponent<IDatepickerProps & React.RefAttributes<HTMLDivElement>>;
+export declare const DatePicker: React.ForwardRefExoticComponent<IDatePickerProps & React.RefAttributes<HTMLDivElement>>;

package/dist/typings/elements/DatePicker/components/Input.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Copyright Zendesk, Inc.
+ *
+ * Use of this source code is governed under the Apache License, Version 2.0
+ * found at http://www.apache.org/licenses/LICENSE-2.0.
+ */
+import { Dispatch, ReactElement, RefAttributes } from 'react';
+import { DatePickerAction, IDatePickerState } from '../utils/date-picker-reducer';
+interface IInputProps {
+    dispatch: Dispatch<DatePickerAction>;
+    element: ReactElement & RefAttributes<HTMLInputElement>;
+    refKey: string;
+    state: IDatePickerState;
+}
+export declare const Input: import("react").ForwardRefExoticComponent<IInputProps & RefAttributes<HTMLInputElement>>;
+export {};

package/dist/typings/elements/{Datepicker/utils/datepicker-reducer.d.ts → DatePicker/utils/date-picker-reducer.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 { IDatepickerProps } from '../../../types';
-export interface IDatepickerState {
+import { IDatePickerProps } from '../../../types';
+export interface IDatePickerState {
     isOpen: boolean;
     previewDate: Date;
     inputValue: string;
 }
-export type DatepickerAction = {
+export type DatePickerAction = {
     type: 'OPEN';
 } | {
     type: 'CLOSE';
@@ -36,8 +36,8 @@ export declare const datepickerReducer: ({ value, formatDate, locale, customPars
     locale: any;
     customParseDate?: ((inputValue: string) => Date) | undefined;
     onChange?: ((date: Date) => void) | undefined;
-}) => (state: IDatepickerState, action: DatepickerAction) => IDatepickerState;
+}) => (state: IDatePickerState, action: DatePickerAction) => IDatePickerState;
 /**
- * Retrieve initial state for the Datepicker reducer
+ * Retrieve initial state for the DatePicker reducer
  */
-export declare function retrieveInitialState(initialProps: IDatepickerProps): IDatepickerState;
+export declare function retrieveInitialState(initialProps: IDatePickerProps): IDatePickerState;

package/dist/typings/elements/DatePicker/utils/useDatePickerContext.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Copyright Zendesk, Inc.
+ *
+ * Use of this source code is governed under the Apache License, Version 2.0
+ * found at http://www.apache.org/licenses/LICENSE-2.0.
+ */
+/// <reference types="react" />
+import { IDatePickerState, DatePickerAction } from './date-picker-reducer';
+export interface IDatePickerContext {
+    state: IDatePickerState;
+    dispatch: React.Dispatch<DatePickerAction>;
+}
+export declare const DatePickerContext: import("react").Context<IDatePickerContext | undefined>;
+/**
+ * Retrieve Dropdown component context
+ */
+declare const useDatePickerContext: () => IDatePickerContext;
+export default useDatePickerContext;

package/dist/typings/elements/{DatepickerRange/DatepickerRange.d.ts → DatePickerRange/DatePickerRange.d.ts}

@@ -6,12 +6,12 @@
  */
 import React, { PropsWithChildren } from 'react';
 import PropTypes from 'prop-types';
-import { IDatepickerRangeProps } from '../../types';
+import { IDatePickerRangeProps } from '../../types';
 import { Start } from './components/Start';
 import { End } from './components/End';
 import { Calendar } from './components/Calendar';
-export declare const DatepickerRange: {
-    (props: PropsWithChildren<IDatepickerRangeProps>): React.JSX.Element;
+export declare const DatePickerRange: {
+    (props: PropsWithChildren<IDatePickerRangeProps>): React.JSX.Element;
     propTypes: {
         locale: PropTypes.Requireable<string>;
         weekStartsOn: PropTypes.Requireable<number>;