@zendeskgarden/react-datepickers 9.0.0-next.7 → 9.0.0-next.8

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

@@ -0,0 +1,101 @@
+/**
+* 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 React__default, { useCallback, useReducer, useRef, useEffect, useMemo } from 'react';
+import PropTypes from 'prop-types';
+import { datepickerRangeReducer, retrieveInitialState } from './utils/date-picker-range-reducer.js';
+import { DatePickerRangeContext } from './utils/useDatePickerRangeContext.js';
+import { Start } from './components/Start.js';
+import { End } from './components/End.js';
+import { Calendar } from './components/Calendar.js';
+
+const DatePickerRangeComponent = props => {
+  const {
+    startValue,
+    locale,
+    weekStartsOn,
+    formatDate,
+    endValue,
+    onChange,
+    customParseDate,
+    isCompact,
+    minValue,
+    maxValue,
+    children
+  } = props;
+  const reducer = useCallback(datepickerRangeReducer({
+    startValue,
+    locale,
+    formatDate,
+    endValue,
+    customParseDate
+  }), [startValue, endValue, locale, formatDate, onChange, customParseDate]);
+  const [state, dispatch] = useReducer(reducer, retrieveInitialState(props));
+  const previousStartValue = useRef(startValue);
+  const previousEndValue = useRef(endValue);
+  const startInputRef = useRef();
+  const endInputRef = useRef();
+  useEffect(() => {
+    dispatch({
+      type: 'CONTROLLED_START_VALUE_CHANGE',
+      value: startValue
+    });
+    if (endInputRef.current && previousStartValue.current !== startValue && startValue !== undefined) {
+      endInputRef.current.focus();
+    }
+    previousStartValue.current = startValue;
+  }, [props, startValue]);
+  useEffect(() => {
+    dispatch({
+      type: 'CONTROLLED_END_VALUE_CHANGE',
+      value: endValue
+    });
+    if (startInputRef.current && previousEndValue.current !== endValue && endValue !== undefined) {
+      startInputRef.current.focus();
+    }
+    previousEndValue.current = endValue;
+  }, [props, endValue]);
+  const value = useMemo(() => ({
+    state,
+    dispatch,
+    isCompact,
+    locale,
+    weekStartsOn,
+    minValue,
+    maxValue,
+    startValue,
+    endValue,
+    onChange,
+    startInputRef,
+    endInputRef,
+    customParseDate
+  }), [state, dispatch, isCompact, locale, weekStartsOn, minValue, maxValue, startValue, endValue, onChange, startInputRef, endInputRef, customParseDate]);
+  return React__default.createElement(DatePickerRangeContext.Provider, {
+    value: value
+  }, children);
+};
+DatePickerRangeComponent.propTypes = {
+  locale: PropTypes.string,
+  weekStartsOn: PropTypes.number,
+  startValue: PropTypes.instanceOf(Date),
+  endValue: PropTypes.instanceOf(Date),
+  minValue: PropTypes.instanceOf(Date),
+  maxValue: PropTypes.instanceOf(Date),
+  onChange: PropTypes.func,
+  formatDate: PropTypes.func,
+  customParseDate: PropTypes.func,
+  isCompact: PropTypes.bool
+};
+DatePickerRangeComponent.defaultProps = {
+  locale: 'en-US',
+  isCompact: false
+};
+const DatePickerRange = DatePickerRangeComponent;
+DatePickerRange.Calendar = Calendar;
+DatePickerRange.End = End;
+DatePickerRange.Start = Start;
+
+export { DatePickerRange };

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

@@ -0,0 +1,42 @@
+/**
+* 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 React__default, { forwardRef } from 'react';
+import { addMonths } from 'date-fns/addMonths';
+import '../../../styled/StyledMenu.js';
+import '../../../styled/StyledMenuWrapper.js';
+import '../../../styled/StyledDatePicker.js';
+import { StyledRangeCalendar } from '../../../styled/StyledRangeCalendar.js';
+import '../../../styled/StyledHeader.js';
+import '../../../styled/StyledHeaderPaddle.js';
+import '../../../styled/StyledHeaderLabel.js';
+import '../../../styled/StyledCalendar.js';
+import '../../../styled/StyledCalendarItem.js';
+import '../../../styled/StyledDayLabel.js';
+import '../../../styled/StyledHighlight.js';
+import '../../../styled/StyledDay.js';
+import useDatePickerContext from '../utils/useDatePickerRangeContext.js';
+import { Month } from './Month.js';
+
+const Calendar = forwardRef((props, ref) => {
+  const {
+    state
+  } = useDatePickerContext();
+  return React__default.createElement(StyledRangeCalendar, Object.assign({
+    ref: ref,
+    "data-garden-id": "datepickers.range",
+    "data-garden-version": '9.0.0-next.8'
+  }, props), React__default.createElement(Month, {
+    displayDate: state.previewDate,
+    isNextHidden: true
+  }), React__default.createElement(Month, {
+    displayDate: addMonths(state.previewDate, 1),
+    isPreviousHidden: true
+  }));
+});
+Calendar.displayName = 'DatePickerRange.Calendar';
+
+export { Calendar };

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

@@ -0,0 +1,79 @@
+/**
+* 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 React__default, { useCallback } from 'react';
+import { KEYS, composeEventHandlers } from '@zendeskgarden/container-utilities';
+import { isValid } from 'date-fns/isValid';
+import { isSameDay } from 'date-fns/isSameDay';
+import { parseInputValue } from '../utils/date-picker-range-reducer.js';
+import useDatePickerContext from '../utils/useDatePickerRangeContext.js';
+
+const End = props => {
+  const {
+    state,
+    dispatch,
+    onChange,
+    startValue,
+    endValue,
+    endInputRef,
+    customParseDate
+  } = useDatePickerContext();
+  const onChangeCallback = useCallback(e => {
+    dispatch({
+      type: 'END_INPUT_ONCHANGE',
+      value: e.target.value
+    });
+    props.children.props.onChange && props.children.props.onChange(e);
+  }, [dispatch, props.children]);
+  const onFocusCallback = useCallback(e => {
+    dispatch({
+      type: 'END_FOCUS'
+    });
+    props.children.props.onFocus && props.children.props.onFocus(e);
+  }, [dispatch, props.children]);
+  const handleBlur = useCallback(() => {
+    dispatch({
+      type: 'END_BLUR'
+    });
+    let parsedDate;
+    if (customParseDate) {
+      parsedDate = customParseDate(state.endInputValue);
+    } else {
+      parsedDate = parseInputValue({
+        inputValue: state.endInputValue
+      });
+    }
+    if (onChange && parsedDate && isValid(parsedDate) && !isSameDay(parsedDate, endValue)) {
+      onChange && onChange({
+        startValue,
+        endValue: parsedDate
+      });
+    }
+  }, [dispatch, onChange, startValue, endValue, customParseDate, state.endInputValue]);
+  const onKeydownCallback = useCallback(e => {
+    if (e.key === KEYS.ENTER) {
+      handleBlur();
+      e.preventDefault();
+    }
+    props.children.props.onKeyDown && props.children.props.onKeyDown(e);
+  }, [handleBlur, props.children]);
+  const onBlurCallback = useCallback(e => {
+    handleBlur();
+    props.children.props.onBlur && props.children.props.onBlur(e);
+  }, [handleBlur, props.children]);
+  const childElement = React__default.Children.only(props.children);
+  return React__default.cloneElement(childElement, {
+    value: state.endInputValue || '',
+    ref: endInputRef,
+    onChange: composeEventHandlers(childElement.props.onChange, onChangeCallback),
+    onFocus: composeEventHandlers(childElement.props.onFocus, onFocusCallback),
+    onKeyDown: composeEventHandlers(childElement.props.onKeyDown, onKeydownCallback),
+    onBlur: composeEventHandlers(childElement.props.onBlur, onBlurCallback)
+  });
+};
+End.displayName = 'DatePickerRange.End';
+
+export { End };

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

@@ -0,0 +1,270 @@
+/**
+* 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 React__default, { forwardRef, useCallback } from 'react';
+import { startOfMonth } from 'date-fns/startOfMonth';
+import { endOfMonth } from 'date-fns/endOfMonth';
+import { startOfWeek } from 'date-fns/startOfWeek';
+import { endOfWeek } from 'date-fns/endOfWeek';
+import { eachDayOfInterval } from 'date-fns/eachDayOfInterval';
+import { addDays } from 'date-fns/addDays';
+import { isToday } from 'date-fns/isToday';
+import { isSameDay } from 'date-fns/isSameDay';
+import { isSameMonth } from 'date-fns/isSameMonth';
+import { isBefore } from 'date-fns/isBefore';
+import { isAfter } from 'date-fns/isAfter';
+import { subDays } from 'date-fns/subDays';
+import { compareAsc } from 'date-fns/compareAsc';
+import SvgChevronLeftStroke from '../../../node_modules/@zendeskgarden/svg-icons/src/16/chevron-left-stroke.svg.js';
+import SvgChevronRightStroke from '../../../node_modules/@zendeskgarden/svg-icons/src/16/chevron-right-stroke.svg.js';
+import '../../../styled/StyledMenu.js';
+import '../../../styled/StyledMenuWrapper.js';
+import { StyledDatePicker } from '../../../styled/StyledDatePicker.js';
+import '../../../styled/StyledRangeCalendar.js';
+import { StyledHeader } from '../../../styled/StyledHeader.js';
+import { StyledHeaderPaddle } from '../../../styled/StyledHeaderPaddle.js';
+import { StyledHeaderLabel } from '../../../styled/StyledHeaderLabel.js';
+import { StyledCalendar } from '../../../styled/StyledCalendar.js';
+import { StyledCalendarItem } from '../../../styled/StyledCalendarItem.js';
+import { StyledDayLabel } from '../../../styled/StyledDayLabel.js';
+import { StyledHighlight } from '../../../styled/StyledHighlight.js';
+import { StyledDay } from '../../../styled/StyledDay.js';
+import { getStartOfWeek } from '../../../utils/calendar-utils.js';
+import useDatePickerContext from '../utils/useDatePickerRangeContext.js';
+
+const Month = forwardRef((_ref, ref) => {
+  let {
+    displayDate,
+    isPreviousHidden,
+    isNextHidden
+  } = _ref;
+  const {
+    state,
+    dispatch,
+    locale,
+    weekStartsOn,
+    isCompact,
+    minValue,
+    maxValue,
+    startValue,
+    endValue,
+    onChange
+  } = useDatePickerContext();
+  const headerLabelFormatter = useCallback(date => {
+    const formatter = new Intl.DateTimeFormat(locale, {
+      month: 'long',
+      year: 'numeric'
+    });
+    return formatter.format(date);
+  }, [locale]);
+  const dayLabelFormatter = useCallback(date => {
+    const formatter = new Intl.DateTimeFormat(locale, {
+      weekday: 'short'
+    });
+    return formatter.format(date);
+  }, [locale]);
+  const dayFormatter = useCallback(date => {
+    const formatter = new Intl.DateTimeFormat(locale, {
+      day: 'numeric'
+    });
+    return formatter.format(date);
+  }, [locale]);
+  const preferredWeekStartsOn = weekStartsOn || getStartOfWeek(locale);
+  const monthStartDate = startOfMonth(displayDate);
+  const monthEndDate = endOfMonth(monthStartDate);
+  const startDate = startOfWeek(monthStartDate, {
+    weekStartsOn: preferredWeekStartsOn
+  });
+  const endDate = endOfWeek(monthEndDate, {
+    weekStartsOn: preferredWeekStartsOn
+  });
+  const dayLabels = eachDayOfInterval({
+    start: startDate,
+    end: addDays(startDate, 6)
+  }).map(date => {
+    const formattedDayLabel = dayLabelFormatter(date);
+    return React__default.createElement(StyledCalendarItem, {
+      key: `day-label-${formattedDayLabel}`,
+      isCompact: isCompact
+    }, React__default.createElement(StyledDayLabel, {
+      isCompact: isCompact
+    }, formattedDayLabel));
+  });
+  const items = eachDayOfInterval({
+    start: startDate,
+    end: endDate
+  }).map((date, itemsIndex) => {
+    const formattedDayLabel = dayFormatter(date);
+    const isCurrentDate = isToday(date);
+    const isPreviousMonth = !isSameMonth(date, displayDate);
+    if (isPreviousMonth) {
+      return React__default.createElement(StyledCalendarItem, {
+        key: `day-${itemsIndex}`,
+        isCompact: isCompact
+      }, React__default.createElement(StyledDay, {
+        isCompact: isCompact,
+        isPreviousMonth: true,
+        isDisabled: true
+      }, "\xA0"));
+    }
+    let isSelected = false;
+    if (startValue !== undefined) {
+      isSelected = isSameDay(date, startValue);
+    }
+    if (endValue !== undefined) {
+      isSelected = isSelected || isSameDay(date, endValue);
+    }
+    let isDisabled = false;
+    if (minValue !== undefined) {
+      isDisabled = isBefore(date, minValue) && !isSameDay(date, minValue);
+    }
+    if (maxValue !== undefined) {
+      isDisabled = isDisabled || isAfter(date, maxValue) && !isSameDay(date, maxValue);
+    }
+    let isHighlighted = false;
+    if (startValue !== undefined && endValue !== undefined) {
+      isHighlighted = (isAfter(date, startValue) || isSameDay(date, startValue)) && (isBefore(date, endValue) || isSameDay(date, endValue)) && !isSameDay(startValue, endValue);
+    } else if (startValue !== undefined && state.hoverDate !== undefined) {
+      isHighlighted = (isAfter(date, startValue) || isSameDay(date, startValue)) && (isBefore(date, state.hoverDate) || isSameDay(date, state.hoverDate));
+    }
+    const isHighlightStart = isHighlighted && startValue && isSameDay(date, startValue) || false;
+    const isHighlightEnd = isHighlighted && endValue && isSameDay(date, endValue) || state.hoverDate && isSameDay(date, state.hoverDate) && !isBefore(date, endValue) || false;
+    let isInvalidDateRange = endValue && startValue && compareAsc(endValue, startValue) === -1 || false;
+    if (minValue) {
+      if (startValue) {
+        isInvalidDateRange = isInvalidDateRange || compareAsc(startValue, subDays(minValue, 1)) === -1;
+      }
+      if (endValue) {
+        isInvalidDateRange = isInvalidDateRange || compareAsc(endValue, subDays(minValue, 1)) === -1;
+      }
+    }
+    if (maxValue) {
+      if (startValue) {
+        isInvalidDateRange = isInvalidDateRange || compareAsc(startValue, maxValue) === 1;
+      }
+      if (endValue) {
+        isInvalidDateRange = isInvalidDateRange || compareAsc(endValue, maxValue) === 1;
+      }
+    }
+    return React__default.createElement(StyledCalendarItem, {
+      key: `day-${itemsIndex}`,
+      isCompact: isCompact
+    }, React__default.createElement(StyledHighlight, {
+      isHighlighted: !isInvalidDateRange && isHighlighted && !isDisabled,
+      isStart: !isInvalidDateRange && isHighlightStart,
+      isEnd: !isInvalidDateRange && isHighlightEnd
+    }), React__default.createElement(StyledDay, {
+      isToday: isCurrentDate,
+      isPreviousMonth: isPreviousMonth,
+      isSelected: !isInvalidDateRange && isSelected,
+      isDisabled: isDisabled,
+      isCompact: isCompact,
+      onClick: () => {
+        if (!isDisabled) {
+          dispatch({
+            type: 'CLICK_DATE',
+            value: date
+          });
+          if (onChange) {
+            if (state.isStartFocused) {
+              if (endValue !== undefined && (isBefore(date, endValue) || isSameDay(date, endValue))) {
+                onChange({
+                  startValue: date,
+                  endValue
+                });
+              } else {
+                onChange({
+                  startValue: date,
+                  endValue: undefined
+                });
+              }
+            } else if (state.isEndFocused) {
+              if (startValue !== undefined && (isAfter(date, startValue) || isSameDay(date, startValue))) {
+                onChange({
+                  startValue,
+                  endValue: date
+                });
+              } else {
+                onChange({
+                  startValue: date,
+                  endValue: undefined
+                });
+              }
+            } else if (startValue === undefined) {
+              onChange({
+                startValue: date,
+                endValue: undefined
+              });
+            } else if (endValue === undefined) {
+              if (isBefore(date, startValue)) {
+                onChange({
+                  startValue: date,
+                  endValue: undefined
+                });
+              } else {
+                onChange({
+                  startValue,
+                  endValue: date
+                });
+              }
+            } else {
+              onChange({
+                startValue: date,
+                endValue: undefined
+              });
+            }
+          }
+        }
+      },
+      onMouseEnter: () => {
+        if (!isSelected) {
+          dispatch({
+            type: 'HOVER_DATE',
+            value: date
+          });
+        }
+      }
+    }, formattedDayLabel));
+  });
+  return React__default.createElement(StyledDatePicker, {
+    ref: ref,
+    isCompact: isCompact,
+    onMouseDown: e => {
+      e.preventDefault();
+    }
+  }, React__default.createElement(StyledHeader, {
+    isCompact: isCompact
+  }, React__default.createElement(StyledHeaderPaddle, {
+    isCompact: isCompact,
+    onClick: () => {
+      dispatch({
+        type: 'PREVIEW_PREVIOUS_MONTH'
+      });
+    },
+    isHidden: isPreviousHidden
+  }, React__default.createElement(SvgChevronLeftStroke, null)), React__default.createElement(StyledHeaderLabel, {
+    isCompact: isCompact
+  }, headerLabelFormatter(displayDate)), React__default.createElement(StyledHeaderPaddle, {
+    isCompact: isCompact,
+    isHidden: isNextHidden,
+    onClick: () => {
+      dispatch({
+        type: 'PREVIEW_NEXT_MONTH'
+      });
+    }
+  }, React__default.createElement(SvgChevronRightStroke, null))), React__default.createElement(StyledCalendar, {
+    isCompact: isCompact,
+    onMouseLeave: () => {
+      dispatch({
+        type: 'HOVER_DATE',
+        value: undefined
+      });
+    }
+  }, dayLabels, items));
+});
+Month.displayName = 'Month';
+
+export { Month };

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

@@ -0,0 +1,79 @@
+/**
+* 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 React__default, { useCallback } from 'react';
+import useDatePickerContext from '../utils/useDatePickerRangeContext.js';
+import { KEYS, composeEventHandlers } from '@zendeskgarden/container-utilities';
+import { isValid } from 'date-fns/isValid';
+import { isSameDay } from 'date-fns/isSameDay';
+import { parseInputValue } from '../utils/date-picker-range-reducer.js';
+
+const Start = props => {
+  const {
+    state,
+    dispatch,
+    onChange,
+    startValue,
+    endValue,
+    startInputRef,
+    customParseDate
+  } = useDatePickerContext();
+  const onChangeCallback = useCallback(e => {
+    dispatch({
+      type: 'START_INPUT_ONCHANGE',
+      value: e.target.value
+    });
+    props.children.props.onChange && props.children.props.onChange(e);
+  }, [dispatch, props.children]);
+  const onFocusCallback = useCallback(e => {
+    dispatch({
+      type: 'START_FOCUS'
+    });
+    props.children.props.onFocus && props.children.props.onFocus(e);
+  }, [dispatch, props.children]);
+  const handleBlur = useCallback(() => {
+    let parsedDate;
+    if (customParseDate) {
+      parsedDate = customParseDate(state.startInputValue);
+    } else {
+      parsedDate = parseInputValue({
+        inputValue: state.startInputValue
+      });
+    }
+    dispatch({
+      type: 'START_BLUR'
+    });
+    if (parsedDate && isValid(parsedDate) && !isSameDay(parsedDate, startValue)) {
+      onChange && onChange({
+        startValue: parsedDate,
+        endValue
+      });
+    }
+  }, [dispatch, onChange, startValue, endValue, customParseDate, state.startInputValue]);
+  const onKeyDownCallback = useCallback(e => {
+    if (e.key === KEYS.ENTER) {
+      e.preventDefault();
+      handleBlur();
+    }
+    props.children.props.onKeyDown && props.children.props.onKeyDown(e);
+  }, [handleBlur, props.children]);
+  const onBlurCallback = useCallback(e => {
+    handleBlur();
+    props.children.props.onBlur && props.children.props.onBlur(e);
+  }, [handleBlur, props.children]);
+  const childElement = React__default.Children.only(props.children);
+  return React__default.cloneElement(childElement, {
+    value: state.startInputValue || '',
+    ref: startInputRef,
+    onChange: composeEventHandlers(childElement.props.onChange, onChangeCallback),
+    onFocus: composeEventHandlers(childElement.props.onFocus, onFocusCallback),
+    onKeyDown: composeEventHandlers(childElement.props.onKeyDown, onKeyDownCallback),
+    onBlur: composeEventHandlers(childElement.props.onBlur, onBlurCallback)
+  });
+};
+Start.displayName = 'DatePickerRange.Start';
+
+export { Start };