@zendeskgarden/react-datepickers 8.75.0 → 8.76.0

package/dist/esm/elements/Datepicker/Datepicker.js

@@ -0,0 +1,211 @@
+/**
+* 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, useContext, useCallback, useReducer, useRef, useEffect, useState, useMemo } from 'react';
+import PropTypes from 'prop-types';
+import { ThemeContext } from 'styled-components';
+import { Manager, Reference, Popper } from 'react-popper';
+import { composeEventHandlers, KEYS } from '@zendeskgarden/container-utilities';
+import { WEEK_STARTS_ON, PLACEMENT } from '../../types/index.js';
+import { getRtlPopperPlacement, getPopperPlacement } from './utils/garden-placements.js';
+import { Calendar } from './components/Calendar.js';
+import { datepickerReducer, retrieveInitialState } from './utils/datepicker-reducer.js';
+import { DatepickerContext } from './utils/useDatepickerContext.js';
+import { StyledMenu } from '../../styled/StyledMenu.js';
+import { StyledMenuWrapper } from '../../styled/StyledMenuWrapper.js';
+import '../../styled/StyledDatepicker.js';
+import '../../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';
+
+const Datepicker = forwardRef((props, calendarRef) => {
+  const {
+    children,
+    placement,
+    popperModifiers,
+    eventsEnabled,
+    zIndex,
+    isAnimated,
+    refKey,
+    value,
+    isCompact,
+    onChange,
+    formatDate,
+    minValue,
+    maxValue,
+    locale,
+    weekStartsOn,
+    customParseDate,
+    ...menuProps
+  } = props;
+  const theme = useContext(ThemeContext);
+  const memoizedReducer = useCallback(datepickerReducer({
+    value,
+    formatDate,
+    locale,
+    customParseDate,
+    onChange
+  }), [value, formatDate, locale, onChange, customParseDate]);
+  const [state, dispatch] = useReducer(memoizedReducer, retrieveInitialState(props));
+  const scheduleUpdateRef = useRef(undefined);
+  const inputRef = useRef(null);
+  const isInputMouseDownRef = useRef(false);
+  useEffect(() => {
+    if (state.isOpen && scheduleUpdateRef.current) {
+      scheduleUpdateRef.current();
+    }
+  });
+  const [isVisible, setIsVisible] = useState(state.isOpen);
+  useEffect(() => {
+    let timeout;
+    if (state.isOpen) {
+      setIsVisible(true);
+    } else if (isAnimated) {
+      timeout = setTimeout(() => setIsVisible(false), 200);
+    } else {
+      setIsVisible(false);
+    }
+    return () => clearTimeout(timeout);
+  }, [state.isOpen, isAnimated]);
+  useEffect(() => {
+    dispatch({
+      type: 'CONTROLLED_VALUE_CHANGE',
+      value
+    });
+  }, [value]);
+  useEffect(() => {
+    dispatch({
+      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, {
+    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, {
+      ref: calendarRef,
+      isCompact: isCompact,
+      value: value,
+      minValue: minValue,
+      maxValue: maxValue,
+      locale: locale,
+      weekStartsOn: weekStartsOn
+    })));
+  })));
+});
+Datepicker.displayName = 'Datepicker';
+Datepicker.propTypes = {
+  value: PropTypes.any,
+  onChange: PropTypes.any,
+  formatDate: PropTypes.func,
+  locale: PropTypes.any,
+  weekStartsOn: PropTypes.oneOf(WEEK_STARTS_ON),
+  minValue: PropTypes.any,
+  maxValue: PropTypes.any,
+  isCompact: PropTypes.bool,
+  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',
+  refKey: 'ref',
+  isAnimated: true,
+  eventsEnabled: true,
+  zIndex: 1000,
+  locale: 'en-US'
+};
+
+export { Datepicker };

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

@@ -0,0 +1,125 @@
+/**
+* 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 { getDate } from 'date-fns/getDate';
+import '../../../styled/StyledMenu.js';
+import '../../../styled/StyledMenuWrapper.js';
+import { StyledDatepicker } from '../../../styled/StyledDatepicker.js';
+import '../../../styled/StyledRangeCalendar.js';
+import '../../../styled/StyledHeader.js';
+import '../../../styled/StyledHeaderPaddle.js';
+import '../../../styled/StyledHeaderLabel.js';
+import { StyledCalendar } from '../../../styled/StyledCalendar.js';
+import { StyledCalendarItem } from '../../../styled/StyledCalendarItem.js';
+import { StyledDayLabel } from '../../../styled/StyledDayLabel.js';
+import '../../../styled/StyledHighlight.js';
+import { StyledDay } from '../../../styled/StyledDay.js';
+import useDatepickerContext from '../utils/useDatepickerContext.js';
+import { getStartOfWeek } from '../../../utils/calendar-utils.js';
+import { MonthSelector } from './MonthSelector.js';
+
+const Calendar = forwardRef((_ref, ref) => {
+  let {
+    value,
+    minValue,
+    maxValue,
+    isCompact,
+    locale,
+    weekStartsOn
+  } = _ref;
+  const {
+    state,
+    dispatch
+  } = useDatepickerContext();
+  const preferredWeekStartsOn = weekStartsOn || getStartOfWeek(locale);
+  const monthStartDate = startOfMonth(state.previewDate);
+  const monthEndDate = endOfMonth(monthStartDate);
+  const startDate = startOfWeek(monthStartDate, {
+    weekStartsOn: preferredWeekStartsOn
+  });
+  const endDate = endOfWeek(monthEndDate, {
+    weekStartsOn: preferredWeekStartsOn
+  });
+  const dayLabelFormatter = useCallback(date => {
+    const formatter = new Intl.DateTimeFormat(locale, {
+      weekday: 'short'
+    });
+    return formatter.format(date);
+  }, [locale]);
+  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 = getDate(date);
+    const isCurrentDate = isToday(date);
+    const isPreviousMonth = !isSameMonth(date, state.previewDate);
+    const isSelected = value && isSameDay(date, value);
+    let isDisabled = false;
+    if (minValue !== undefined) {
+      isDisabled = isBefore(date, minValue) && !isSameDay(date, minValue);
+    }
+    if (maxValue !== undefined) {
+      isDisabled = isDisabled || isAfter(date, maxValue) && !isSameDay(date, maxValue);
+    }
+    return React__default.createElement(StyledCalendarItem, {
+      key: `day-${itemsIndex}`,
+      isCompact: isCompact
+    }, React__default.createElement(StyledDay, {
+      isToday: isCurrentDate,
+      isPreviousMonth: isPreviousMonth,
+      isSelected: isSelected,
+      isDisabled: isDisabled,
+      isCompact: isCompact,
+      onClick: () => {
+        if (!isDisabled) {
+          dispatch({
+            type: 'SELECT_DATE',
+            value: date
+          });
+        }
+      }
+    }, formattedDayLabel));
+  });
+  return React__default.createElement(StyledDatepicker, {
+    ref: ref,
+    isCompact: isCompact,
+    onMouseDown: e => {
+      e.preventDefault();
+    }
+  }, React__default.createElement(MonthSelector, {
+    locale: locale,
+    isCompact: isCompact
+  }), React__default.createElement(StyledCalendar, {
+    isCompact: isCompact
+  }, dayLabels, items));
+});
+Calendar.displayName = 'Calendar';
+
+export { Calendar };

package/dist/esm/elements/Datepicker/components/MonthSelector.js

@@ -0,0 +1,61 @@
+/**
+* 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 '../../../styled/StyledMenu.js';
+import '../../../styled/StyledMenuWrapper.js';
+import '../../../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 '../../../styled/StyledCalendar.js';
+import '../../../styled/StyledCalendarItem.js';
+import '../../../styled/StyledDayLabel.js';
+import '../../../styled/StyledHighlight.js';
+import '../../../styled/StyledDay.js';
+import useDatepickerContext from '../utils/useDatepickerContext.js';
+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';
+
+const MonthSelector = _ref => {
+  let {
+    locale,
+    isCompact
+  } = _ref;
+  const {
+    state,
+    dispatch
+  } = useDatepickerContext();
+  const headerLabelFormatter = useCallback(date => {
+    const formatter = new Intl.DateTimeFormat(locale, {
+      month: 'long',
+      year: 'numeric'
+    });
+    return formatter.format(date);
+  }, [locale]);
+  return React__default.createElement(StyledHeader, {
+    isCompact: isCompact
+  }, React__default.createElement(StyledHeaderPaddle, {
+    isCompact: isCompact,
+    onClick: () => {
+      dispatch({
+        type: 'PREVIEW_PREVIOUS_MONTH'
+      });
+    }
+  }, React__default.createElement(SvgChevronLeftStroke, null)), React__default.createElement(StyledHeaderLabel, {
+    isCompact: isCompact
+  }, headerLabelFormatter(state.previewDate)), React__default.createElement(StyledHeaderPaddle, {
+    isCompact: isCompact,
+    onClick: () => {
+      dispatch({
+        type: 'PREVIEW_NEXT_MONTH'
+      });
+    }
+  }, React__default.createElement(SvgChevronRightStroke, null)));
+};
+
+export { MonthSelector };

package/dist/esm/elements/Datepicker/utils/datepicker-reducer.js

@@ -0,0 +1,187 @@
+/**
+* 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 { addMonths } from 'date-fns/addMonths';
+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(_ref) {
+  let {
+    inputValue,
+    customParseDate
+  } = _ref;
+  if (customParseDate) {
+    return customParseDate(inputValue);
+  }
+  const MINIMUM_DATE = new Date(1001, 0, 0);
+  let tryParseDate = parse(inputValue, 'P', new Date());
+  if (isValid(tryParseDate) && !isBefore(tryParseDate, MINIMUM_DATE)) {
+    return tryParseDate;
+  }
+  tryParseDate = parse(inputValue, 'PP', new Date());
+  if (isValid(tryParseDate) && !isBefore(tryParseDate, MINIMUM_DATE)) {
+    return tryParseDate;
+  }
+  tryParseDate = parse(inputValue, 'PPP', new Date());
+  if (isValid(tryParseDate) && !isBefore(tryParseDate, MINIMUM_DATE)) {
+    return tryParseDate;
+  }
+  return new Date(NaN);
+}
+function formatInputValue(_ref2) {
+  let {
+    date,
+    locale,
+    formatDate
+  } = _ref2;
+  if (!date) {
+    return '';
+  }
+  if (formatDate) {
+    return formatDate(date);
+  }
+  return new Intl.DateTimeFormat(locale, {
+    month: 'long',
+    day: 'numeric',
+    year: 'numeric'
+  }).format(date);
+}
+const datepickerReducer = _ref3 => {
+  let {
+    value,
+    formatDate,
+    locale,
+    customParseDate,
+    onChange
+  } = _ref3;
+  return (state, action) => {
+    switch (action.type) {
+      case 'OPEN':
+        return {
+          ...state,
+          isOpen: true,
+          previewDate: value || new Date()
+        };
+      case 'CLOSE':
+        {
+          const inputValue = formatInputValue({
+            date: value,
+            locale,
+            formatDate
+          });
+          return {
+            ...state,
+            isOpen: false,
+            inputValue
+          };
+        }
+      case 'PREVIEW_NEXT_MONTH':
+        {
+          const previewDate = addMonths(state.previewDate, 1);
+          return {
+            ...state,
+            previewDate
+          };
+        }
+      case 'PREVIEW_PREVIOUS_MONTH':
+        {
+          const previewDate = subMonths(state.previewDate, 1);
+          return {
+            ...state,
+            previewDate
+          };
+        }
+      case 'MANUALLY_UPDATE_INPUT':
+        {
+          const inputValue = action.value;
+          const currentDate = parseInputValue({
+            inputValue,
+            customParseDate
+          });
+          if (onChange && currentDate && isValid(currentDate) && !isSameDay(value, currentDate)) {
+            onChange(currentDate);
+          }
+          return {
+            ...state,
+            isOpen: true,
+            inputValue
+          };
+        }
+      case 'CONTROLLED_VALUE_CHANGE':
+        {
+          const previewDate = action.value || new Date();
+          const inputValue = formatInputValue({
+            date: action.value,
+            locale,
+            formatDate
+          });
+          return {
+            ...state,
+            previewDate,
+            inputValue
+          };
+        }
+      case 'CONTROLLED_LOCALE_CHANGE':
+        {
+          const inputValue = formatInputValue({
+            date: value,
+            locale,
+            formatDate
+          });
+          return {
+            ...state,
+            inputValue
+          };
+        }
+      case 'SELECT_DATE':
+        {
+          const inputValue = formatInputValue({
+            date: action.value,
+            locale,
+            formatDate
+          });
+          if (onChange && action.value && isValid(action.value) && !isSameDay(value, action.value)) {
+            onChange(action.value);
+          }
+          return {
+            ...state,
+            isOpen: false,
+            inputValue
+          };
+        }
+      default:
+        throw new Error();
+    }
+  };
+};
+function retrieveInitialState(initialProps) {
+  let previewDate = initialProps.value;
+  if (previewDate === undefined || !isValid(previewDate)) {
+    previewDate = new Date();
+  }
+  let inputValue = '';
+  if (initialProps.value !== undefined) {
+    if (initialProps.formatDate) {
+      inputValue = initialProps.formatDate(initialProps.value);
+    } else {
+      inputValue = new Intl.DateTimeFormat(initialProps.locale, {
+        month: 'long',
+        day: 'numeric',
+        year: 'numeric'
+      }).format(previewDate);
+    }
+  }
+  return {
+    isOpen: false,
+    previewDate,
+    inputValue
+  };
+}
+
+export { datepickerReducer, retrieveInitialState };

package/dist/esm/elements/Datepicker/utils/garden-placements.js

@@ -0,0 +1,56 @@
+/**
+* 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.
+*/
+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';
+}
+
+export { getMenuPosition, getPopperPlacement, getRtlPopperPlacement };

package/dist/esm/elements/Datepicker/utils/useDatepickerContext.js

@@ -0,0 +1,14 @@
+/**
+* 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 { createContext, useContext } from 'react';
+
+const DatepickerContext = createContext(undefined);
+const useDatepickerContext = () => {
+  return useContext(DatepickerContext);
+};
+
+export { DatepickerContext, useDatepickerContext as default };