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

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

@@ -0,0 +1,169 @@
+/**
+* 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, useState, useMemo, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { mergeRefs } from 'react-merge-refs';
+import { ThemeContext } from 'styled-components';
+import { useFloating, platform, autoPlacement, flip, autoUpdate } from '@floating-ui/react-dom';
+import { WEEK_STARTS_ON, PLACEMENT } from '../../types/index.js';
+import { Calendar } from './components/Calendar.js';
+import { datepickerReducer, retrieveInitialState } from './utils/date-picker-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';
+import { DEFAULT_THEME, getFloatingPlacements } from '@zendeskgarden/react-theming';
+import { Input } from './components/Input.js';
+
+const PLACEMENT_DEFAULT = 'bottom-start';
+const DatePicker = forwardRef((props, calendarRef) => {
+  const {
+    children,
+    placement: _placement,
+    zIndex,
+    isAnimated,
+    refKey,
+    value,
+    isCompact,
+    onChange,
+    formatDate,
+    minValue,
+    maxValue,
+    locale,
+    weekStartsOn,
+    customParseDate,
+    ...menuProps
+  } = props;
+  const theme = useContext(ThemeContext) || DEFAULT_THEME;
+  const memoizedReducer = useCallback(datepickerReducer({
+    value,
+    formatDate,
+    locale,
+    customParseDate,
+    onChange
+  }), [value, formatDate, locale, onChange, customParseDate]);
+  const [state, dispatch] = useReducer(memoizedReducer, retrieveInitialState(props));
+  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({
+    platform: {
+      ...platform,
+      isRTL: () => theme.rtl
+    },
+    elements: {
+      reference: triggerRef?.current,
+      floating: floatingRef?.current
+    },
+    placement: floatingPlacement,
+    middleware: [_placement === 'auto' ? autoPlacement() : flip()]
+  });
+  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) {
+      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]);
+  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(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, {
+    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),
+  isAnimated: PropTypes.bool,
+  zIndex: PropTypes.number
+};
+DatePicker.defaultProps = {
+  placement: PLACEMENT_DEFAULT,
+  refKey: 'ref',
+  isAnimated: 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/Input.js

@@ -0,0 +1,75 @@
+/**
+* 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 { forwardRef, useRef, cloneElement } from 'react';
+import { composeEventHandlers, KEYS } from '@zendeskgarden/container-utilities';
+
+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';
+
+export { Input };

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/date-picker-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/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 };