@zendeskgarden/react-datepickers 9.15.8 → 9.16.0

package/dist/esm/elements/DatePicker/DatePicker.js

@@ -53,10 +53,8 @@ const DatePicker = forwardRef((props, calendarRef) => {
   const memoizedReducer = useCallback(datepickerReducer({
     value,
     formatDate,
-    locale,
-    customParseDate,
-    onChange
-  }), [value, formatDate, locale, onChange, customParseDate]);
+    locale
+  }), [value, formatDate, locale]);
   const [state, dispatch] = useReducer(memoizedReducer, retrieveInitialState(props));
   const triggerRef = useRef(null);
   const floatingRef = useRef(null);
@@ -133,13 +131,17 @@ const DatePicker = forwardRef((props, calendarRef) => {
     minValue: minValue,
     maxValue: maxValue,
     locale: locale,
-    weekStartsOn: weekStartsOn
+    weekStartsOn: weekStartsOn,
+    onChange: onChange
   })));
   return React__default.createElement(React__default.Fragment, null, React__default.createElement(Input, {
     element: Child,
     dispatch: dispatch,
     state: state,
     refKey: refKey,
+    value: value,
+    onChange: onChange,
+    customParseDate: customParseDate,
     ref: mergeRefs([triggerRef, Child.ref ? Child.ref : null])
   }), React__default.createElement(DatePickerContext.Provider, {
     value: contextValue

package/dist/esm/elements/DatePicker/components/Calendar.js

@@ -39,7 +39,8 @@ const Calendar$1 = forwardRef(({
   maxValue,
   isCompact,
   locale,
-  weekStartsOn
+  weekStartsOn,
+  onChange
 }, ref) => {
   const {
     state,
@@ -98,6 +99,9 @@ const Calendar$1 = forwardRef(({
       "aria-disabled": isDisabled || undefined,
       onClick: () => {
         if (!isDisabled) {
+          if (onChange && !isSameDay(value, date)) {
+            onChange(date);
+          }
           dispatch({
             type: 'SELECT_DATE',
             value: date

package/dist/esm/elements/DatePicker/components/Input.js

@@ -5,13 +5,19 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import { forwardRef, useRef, cloneElement } from 'react';
+import { isValid } from 'date-fns/isValid';
+import { isSameDay } from 'date-fns/isSameDay';
 import { composeEventHandlers, KEYS } from '@zendeskgarden/container-utilities';
+import { parseInputValue } from '../utils/date-picker-reducer.js';
 
 const Input = forwardRef(({
   element,
   dispatch,
   state,
-  refKey
+  refKey,
+  value,
+  onChange,
+  customParseDate
 }, ref) => {
   const isInputMouseDownRef = useRef(false);
   const handleBlur = () => {
@@ -20,9 +26,17 @@ const Input = forwardRef(({
     });
   };
   const handleChange = e => {
+    const inputValue = e.target.value;
+    const currentDate = parseInputValue({
+      inputValue,
+      customParseDate
+    });
+    if (onChange && currentDate && isValid(currentDate) && !isSameDay(value, currentDate)) {
+      onChange(currentDate);
+    }
     dispatch({
       type: 'MANUALLY_UPDATE_INPUT',
-      value: e.target.value
+      value: inputValue
     });
   };
   const handleClick = () => {

package/dist/esm/elements/DatePicker/utils/date-picker-reducer.js

@@ -9,7 +9,6 @@ import { subMonths } from 'date-fns/subMonths';
 import { isValid } from 'date-fns/isValid';
 import { parse } from 'date-fns/parse';
 import { isBefore } from 'date-fns/isBefore';
-import { isSameDay } from 'date-fns/isSameDay';
 
 function parseInputValue$1({
   inputValue,
@@ -53,9 +52,7 @@ function formatInputValue({
 const datepickerReducer = ({
   value,
   formatDate,
-  locale,
-  customParseDate,
-  onChange
+  locale
 }) => (state, action) => {
   switch (action.type) {
     case 'OPEN':
@@ -96,13 +93,6 @@ const datepickerReducer = ({
     case 'MANUALLY_UPDATE_INPUT':
       {
         const inputValue = action.value;
-        const currentDate = parseInputValue$1({
-          inputValue,
-          customParseDate
-        });
-        if (onChange && currentDate && isValid(currentDate) && !isSameDay(value, currentDate)) {
-          onChange(currentDate);
-        }
         return {
           ...state,
           isOpen: true,
@@ -142,9 +132,6 @@ const datepickerReducer = ({
           locale,
           formatDate
         });
-        if (onChange && action.value && isValid(action.value) && !isSameDay(value, action.value)) {
-          onChange(action.value);
-        }
         return {
           ...state,
           isOpen: false,
@@ -179,4 +166,4 @@ function retrieveInitialState$1(initialProps) {
   };
 }
 
-export { datepickerReducer, retrieveInitialState$1 as retrieveInitialState };
+export { datepickerReducer, parseInputValue$1 as parseInputValue, retrieveInitialState$1 as retrieveInitialState };

package/dist/esm/elements/DatePickerRange/components/Calendar.js

@@ -28,7 +28,7 @@ const Calendar = forwardRef((props, ref) => {
   return React__default.createElement(StyledRangeCalendar, Object.assign({
     ref: ref,
     "data-garden-id": "datepickers.range",
-    "data-garden-version": '9.15.8'
+    "data-garden-version": '9.16.0'
   }, props), React__default.createElement(Month, {
     displayDate: state.previewDate,
     isNextHidden: true

package/dist/esm/styled/StyledCalendar.js

@@ -10,7 +10,7 @@ import { componentStyles } from '@zendeskgarden/react-theming';
 const COMPONENT_ID$4 = 'datepickers.calendar';
 const StyledCalendar = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '9.15.8'
+  'data-garden-version': '9.16.0'
 }).withConfig({
   displayName: "StyledCalendar",
   componentId: "sc-g5hoe8-0"

package/dist/esm/styled/StyledCalendarItem.js

@@ -22,7 +22,7 @@ const sizeStyles$2 = ({
 };
 const StyledCalendarItem = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '9.15.8'
+  'data-garden-version': '9.16.0'
 }).withConfig({
   displayName: "StyledCalendarItem",
   componentId: "sc-143w8wb-0"

package/dist/esm/styled/StyledDatePicker.js

@@ -26,7 +26,7 @@ const colorStyles$3 = ({
 };
 const StyledDatePicker = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$9,
-  'data-garden-version': '9.15.8'
+  'data-garden-version': '9.16.0'
 }).withConfig({
   displayName: "StyledDatePicker",
   componentId: "sc-15hwqzh-0"

package/dist/esm/styled/StyledDay.js

@@ -82,7 +82,7 @@ const colorStyles = ({
 const COMPONENT_ID = 'datepickers.day';
 const StyledDay = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.15.8'
+  'data-garden-version': '9.16.0'
 }).withConfig({
   displayName: "StyledDay",
   componentId: "sc-v42uk5-0"

package/dist/esm/styled/StyledDayLabel.js

@@ -10,7 +10,7 @@ import { componentStyles } from '@zendeskgarden/react-theming';
 const COMPONENT_ID$2 = 'datepickers.day_label';
 const StyledDayLabel = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '9.15.8'
+  'data-garden-version': '9.16.0'
 }).withConfig({
   displayName: "StyledDayLabel",
   componentId: "sc-9bh1p7-0"

package/dist/esm/styled/StyledHeader.js

@@ -10,7 +10,7 @@ import { componentStyles } from '@zendeskgarden/react-theming';
 const COMPONENT_ID$7 = 'datepickers.header';
 const StyledHeader = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$7,
-  'data-garden-version': '9.15.8'
+  'data-garden-version': '9.16.0'
 }).withConfig({
   displayName: "StyledHeader",
   componentId: "sc-upq318-0"

package/dist/esm/styled/StyledHeaderLabel.js

@@ -10,7 +10,7 @@ import { componentStyles } from '@zendeskgarden/react-theming';
 const COMPONENT_ID$5 = 'datepickers.header_label';
 const StyledHeaderLabel = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '9.15.8'
+  'data-garden-version': '9.16.0'
 }).withConfig({
   displayName: "StyledHeaderLabel",
   componentId: "sc-1ryf5ub-0"

package/dist/esm/styled/StyledHeaderPaddle.js

@@ -57,7 +57,7 @@ const colorStyles$2 = ({
 const COMPONENT_ID$6 = 'datepickers.header_paddle';
 const StyledHeaderPaddle = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$6,
-  'data-garden-version': '9.15.8'
+  'data-garden-version': '9.16.0'
 }).withConfig({
   displayName: "StyledHeaderPaddle",
   componentId: "sc-2oqh0g-0"

package/dist/esm/styled/StyledHighlight.js

@@ -42,7 +42,7 @@ const colorStyles$1 = ({
 };
 const StyledHighlight = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '9.15.8'
+  'data-garden-version': '9.16.0'
 }).withConfig({
   displayName: "StyledHighlight",
   componentId: "sc-16vr32x-0"

package/dist/esm/styled/StyledMenu.js

@@ -10,7 +10,7 @@ import { componentStyles } from '@zendeskgarden/react-theming';
 const COMPONENT_ID$b = 'datepickers.menu';
 const StyledMenu = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$b,
-  'data-garden-version': '9.15.8'
+  'data-garden-version': '9.16.0'
 }).withConfig({
   displayName: "StyledMenu",
   componentId: "sc-1npbkk0-0"

package/dist/esm/styled/StyledMenuWrapper.js

@@ -10,7 +10,7 @@ import { menuStyles, getMenuPosition, componentStyles } from '@zendeskgarden/rea
 const COMPONENT_ID$a = 'datepickers.menu_wrapper';
 const StyledMenuWrapper = styled.div.attrs(props => ({
   'data-garden-id': COMPONENT_ID$a,
-  'data-garden-version': '9.15.8',
+  'data-garden-version': '9.16.0',
   className: props.$isAnimated ? 'is-animated' : undefined
 })).withConfig({
   displayName: "StyledMenuWrapper",

package/dist/esm/styled/StyledRangeCalendar.js

@@ -11,7 +11,7 @@ import { componentStyles } from '@zendeskgarden/react-theming';
 const COMPONENT_ID$8 = 'datepickers.range_calendar';
 const StyledRangeCalendar = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$8,
-  'data-garden-version': '9.15.8'
+  'data-garden-version': '9.16.0'
 }).withConfig({
   displayName: "StyledRangeCalendar",
   componentId: "sc-1og46sy-0"

package/dist/index.cjs.js

@@ -63,7 +63,7 @@ const PLACEMENT = ['auto', ...reactTheming.PLACEMENT];
 const COMPONENT_ID$b = 'datepickers.menu';
 const StyledMenu = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$b,
-  'data-garden-version': '9.15.8'
+  'data-garden-version': '9.16.0'
 }).withConfig({
   displayName: "StyledMenu",
   componentId: "sc-1npbkk0-0"
@@ -72,7 +72,7 @@ const StyledMenu = styled__default.default.div.attrs({
 const COMPONENT_ID$a = 'datepickers.menu_wrapper';
 const StyledMenuWrapper = styled__default.default.div.attrs(props => ({
   'data-garden-id': COMPONENT_ID$a,
-  'data-garden-version': '9.15.8',
+  'data-garden-version': '9.16.0',
   className: props.$isAnimated ? 'is-animated' : undefined
 })).withConfig({
   displayName: "StyledMenuWrapper",
@@ -104,7 +104,7 @@ const colorStyles$3 = ({
 };
 const StyledDatePicker = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$9,
-  'data-garden-version': '9.15.8'
+  'data-garden-version': '9.16.0'
 }).withConfig({
   displayName: "StyledDatePicker",
   componentId: "sc-15hwqzh-0"
@@ -113,7 +113,7 @@ const StyledDatePicker = styled__default.default.div.attrs({
 const COMPONENT_ID$8 = 'datepickers.range_calendar';
 const StyledRangeCalendar = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$8,
-  'data-garden-version': '9.15.8'
+  'data-garden-version': '9.16.0'
 }).withConfig({
   displayName: "StyledRangeCalendar",
   componentId: "sc-1og46sy-0"
@@ -122,7 +122,7 @@ const StyledRangeCalendar = styled__default.default.div.attrs({
 const COMPONENT_ID$7 = 'datepickers.header';
 const StyledHeader = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$7,
-  'data-garden-version': '9.15.8'
+  'data-garden-version': '9.16.0'
 }).withConfig({
   displayName: "StyledHeader",
   componentId: "sc-upq318-0"
@@ -178,7 +178,7 @@ const colorStyles$2 = ({
 const COMPONENT_ID$6 = 'datepickers.header_paddle';
 const StyledHeaderPaddle = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$6,
-  'data-garden-version': '9.15.8'
+  'data-garden-version': '9.16.0'
 }).withConfig({
   displayName: "StyledHeaderPaddle",
   componentId: "sc-2oqh0g-0"
@@ -187,7 +187,7 @@ const StyledHeaderPaddle = styled__default.default.div.attrs({
 const COMPONENT_ID$5 = 'datepickers.header_label';
 const StyledHeaderLabel = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '9.15.8'
+  'data-garden-version': '9.16.0'
 }).withConfig({
   displayName: "StyledHeaderLabel",
   componentId: "sc-1ryf5ub-0"
@@ -196,7 +196,7 @@ const StyledHeaderLabel = styled__default.default.div.attrs({
 const COMPONENT_ID$4 = 'datepickers.calendar';
 const StyledCalendar = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '9.15.8'
+  'data-garden-version': '9.16.0'
 }).withConfig({
   displayName: "StyledCalendar",
   componentId: "sc-g5hoe8-0"
@@ -217,7 +217,7 @@ const sizeStyles$2 = ({
 };
 const StyledCalendarItem = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '9.15.8'
+  'data-garden-version': '9.16.0'
 }).withConfig({
   displayName: "StyledCalendarItem",
   componentId: "sc-143w8wb-0"
@@ -226,7 +226,7 @@ const StyledCalendarItem = styled__default.default.div.attrs({
 const COMPONENT_ID$2 = 'datepickers.day_label';
 const StyledDayLabel = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '9.15.8'
+  'data-garden-version': '9.16.0'
 }).withConfig({
   displayName: "StyledDayLabel",
   componentId: "sc-9bh1p7-0"
@@ -267,7 +267,7 @@ const colorStyles$1 = ({
 };
 const StyledHighlight = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '9.15.8'
+  'data-garden-version': '9.16.0'
 }).withConfig({
   displayName: "StyledHighlight",
   componentId: "sc-16vr32x-0"
@@ -348,7 +348,7 @@ const colorStyles = ({
 const COMPONENT_ID = 'datepickers.day';
 const StyledDay = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.15.8'
+  'data-garden-version': '9.16.0'
 }).withConfig({
   displayName: "StyledDay",
   componentId: "sc-v42uk5-0"
@@ -514,7 +514,8 @@ const Calendar$1 = React.forwardRef(({
   maxValue,
   isCompact,
   locale,
-  weekStartsOn
+  weekStartsOn,
+  onChange
 }, ref) => {
   const {
     state,
@@ -573,6 +574,9 @@ const Calendar$1 = React.forwardRef(({
       "aria-disabled": isDisabled || undefined,
       onClick: () => {
         if (!isDisabled) {
+          if (onChange && !isSameDay.isSameDay(value, date)) {
+            onChange(date);
+          }
           dispatch({
             type: 'SELECT_DATE',
             value: date
@@ -638,9 +642,7 @@ function formatInputValue({
 const datepickerReducer = ({
   value,
   formatDate,
-  locale,
-  customParseDate,
-  onChange
+  locale
 }) => (state, action) => {
   switch (action.type) {
     case 'OPEN':
@@ -681,13 +683,6 @@ const datepickerReducer = ({
     case 'MANUALLY_UPDATE_INPUT':
       {
         const inputValue = action.value;
-        const currentDate = parseInputValue$1({
-          inputValue,
-          customParseDate
-        });
-        if (onChange && currentDate && isValid.isValid(currentDate) && !isSameDay.isSameDay(value, currentDate)) {
-          onChange(currentDate);
-        }
         return {
           ...state,
           isOpen: true,
@@ -727,9 +722,6 @@ const datepickerReducer = ({
           locale,
           formatDate
         });
-        if (onChange && action.value && isValid.isValid(action.value) && !isSameDay.isSameDay(value, action.value)) {
-          onChange(action.value);
-        }
         return {
           ...state,
           isOpen: false,
@@ -768,7 +760,10 @@ const Input = React.forwardRef(({
   element,
   dispatch,
   state,
-  refKey
+  refKey,
+  value,
+  onChange,
+  customParseDate
 }, ref) => {
   const isInputMouseDownRef = React.useRef(false);
   const handleBlur = () => {
@@ -777,9 +772,17 @@ const Input = React.forwardRef(({
     });
   };
   const handleChange = e => {
+    const inputValue = e.target.value;
+    const currentDate = parseInputValue$1({
+      inputValue,
+      customParseDate
+    });
+    if (onChange && currentDate && isValid.isValid(currentDate) && !isSameDay.isSameDay(value, currentDate)) {
+      onChange(currentDate);
+    }
     dispatch({
       type: 'MANUALLY_UPDATE_INPUT',
-      value: e.target.value
+      value: inputValue
     });
   };
   const handleClick = () => {
@@ -852,10 +855,8 @@ const DatePicker = React.forwardRef((props, calendarRef) => {
   const memoizedReducer = React.useCallback(datepickerReducer({
     value,
     formatDate,
-    locale,
-    customParseDate,
-    onChange
-  }), [value, formatDate, locale, onChange, customParseDate]);
+    locale
+  }), [value, formatDate, locale]);
   const [state, dispatch] = React.useReducer(memoizedReducer, retrieveInitialState$1(props));
   const triggerRef = React.useRef(null);
   const floatingRef = React.useRef(null);
@@ -932,13 +933,17 @@ const DatePicker = React.forwardRef((props, calendarRef) => {
     minValue: minValue,
     maxValue: maxValue,
     locale: locale,
-    weekStartsOn: weekStartsOn
+    weekStartsOn: weekStartsOn,
+    onChange: onChange
   })));
   return React__namespace.default.createElement(React__namespace.default.Fragment, null, React__namespace.default.createElement(Input, {
     element: Child,
     dispatch: dispatch,
     state: state,
     refKey: refKey,
+    value: value,
+    onChange: onChange,
+    customParseDate: customParseDate,
     ref: reactMergeRefs.mergeRefs([triggerRef, Child.ref ? Child.ref : null])
   }), React__namespace.default.createElement(DatePickerContext.Provider, {
     value: contextValue
@@ -1631,7 +1636,7 @@ const Calendar = React.forwardRef((props, ref) => {
   return React__namespace.default.createElement(StyledRangeCalendar, Object.assign({
     ref: ref,
     "data-garden-id": "datepickers.range",
-    "data-garden-version": '9.15.8'
+    "data-garden-version": '9.16.0'
   }, props), React__namespace.default.createElement(Month, {
     displayDate: state.previewDate,
     isNextHidden: true

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

@@ -6,13 +6,14 @@
  */
 import React, { HTMLAttributes } from 'react';
 import { DateFnsIndex } from '../../../utils/calendar-utils';
-interface ICalendarProps extends HTMLAttributes<HTMLDivElement> {
+interface ICalendarProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
     value?: Date;
     minValue?: Date;
     maxValue?: Date;
     isCompact?: boolean;
     locale?: string;
     weekStartsOn?: DateFnsIndex;
+    onChange?: (date: Date) => void;
 }
 export declare const Calendar: React.ForwardRefExoticComponent<ICalendarProps & React.RefAttributes<HTMLDivElement>>;
 export {};

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

@@ -11,6 +11,9 @@ interface IInputProps {
     element: ReactElement & RefAttributes<HTMLInputElement>;
     refKey: string;
     state: IDatePickerState;
+    value?: Date;
+    onChange?: (date: Date) => void;
+    customParseDate?: (inputValue: string) => Date;
 }
 export declare const Input: import("react").ForwardRefExoticComponent<IInputProps & RefAttributes<HTMLInputElement>>;
 export {};

package/dist/typings/elements/DatePicker/utils/date-picker-reducer.d.ts

@@ -10,6 +10,13 @@ export interface IDatePickerState {
     previewDate: Date;
     inputValue: string;
 }
+/**
+ * Parse string input value using current locale and date formats
+ */
+export declare function parseInputValue({ inputValue, customParseDate }: {
+    inputValue: string;
+    customParseDate?: (value: string) => Date;
+}): Date;
 export type DatePickerAction = {
     type: 'OPEN';
 } | {
@@ -30,12 +37,10 @@ export type DatePickerAction = {
     type: 'SELECT_DATE';
     value: Date;
 };
-export declare const datepickerReducer: ({ value, formatDate, locale, customParseDate, onChange }: {
+export declare const datepickerReducer: ({ value, formatDate, locale }: {
     value?: Date;
     formatDate?: (date: Date) => string;
     locale: any;
-    customParseDate?: (inputValue: string) => Date;
-    onChange?: (date: Date) => void;
 }) => (state: IDatePickerState, action: DatePickerAction) => IDatePickerState;
 /**
  * Retrieve initial state for the DatePicker reducer

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zendeskgarden/react-datepickers",
-  "version": "9.15.8",
+  "version": "9.16.0",
   "description": "Components relating to datepickers in the Garden Design System",
   "license": "Apache-2.0",
   "author": "Zendesk Garden <garden@zendesk.com>",
@@ -34,7 +34,7 @@
     "styled-components": "^5.3.1 || ^6.0.0"
   },
   "devDependencies": {
-    "@zendeskgarden/react-theming": "^9.15.8",
+    "@zendeskgarden/react-theming": "^9.16.0",
     "@zendeskgarden/svg-icons": "7.6.0"
   },
   "keywords": [
@@ -47,5 +47,5 @@
     "access": "public"
   },
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "d82f80c4b56f8c2e3cd40a475dfffda5eac7ac37"
+  "gitHead": "26dc6a8cf9650e9214896d6994a4f3fba1e63541"
 }