@activecollab/components 2.0.212 → 2.0.214

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

@@ -1,325 +1,666 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import React, { useState, useCallback, useMemo, useEffect } from "react";
-import { SwitchTransition } from "react-transition-group";
-import { addMonths, isAfter } from "date-fns";
-import moment from "moment";
-import { customClassNames, modifiersClassNames } from "./ClassNames";
-import { CustomNavBarElement } from "./CustomNavBarElement";
-import { StyledDatePicker, StyledDatePickerCSSTransition, StyledDayPicker } from "./Styles";
-import { YearMonthPicker } from "../Pickers/YearMonthPicker";
-const formatWeekdayName = str => moment(str).format("ddd").charAt(0);
+import React, { useState, useRef, useEffect, useCallback, useMemo } from "react";
+import moment from "moment-timezone";
+import { StyledCalendarDate, StyledCalendarDates, StyledCalendarHeader, StyledCalendarSelector, StyledCaption, StyledClearInstantButton, StyledConfirmDialog, StyledControls, StyledControlsLeft, StyledDatePickerContainerInner, StyledDatePickerWrapper, StyledDayName, StyledDaysOfWeek, StyledMonthOption, StyledMonthSelect, StyledMonthSelector, StyledYearOption, StyledYearSelect } from "./Styles";
+import { Button } from "../Button";
+import { IconButton } from "../IconButton";
+import { ArrowLeftIcon, ArrowRightIcon, CancelCrossIcon } from "../Icons";
+import { Menu } from "../Menu";
+import { Tooltip } from "../Tooltip";
+export const toMoment = date => {
+  if (moment.isMoment(date)) {
+    return date;
+  } else if (typeof date === "number") {
+    return moment.utc(date * 1000);
+  } else if (typeof date === "string") {
+    return moment.utc(date);
+  }
+  return null;
+};
 export const DatePicker = _ref => {
   let {
-    className,
+    selected: defaultSelected,
     onChange,
-    onDayClick,
-    selectedDays,
-    disabledDays,
-    selectionMode = "daily",
-    month = new Date(),
-    onMonthChange = () => null,
-    dateRequired = false,
+    onSave,
+    onClear,
+    onClose,
+    instant = true,
+    target,
+    mode = "daily",
+    saveLabel = "Save",
+    cancelLabel = "Cancel",
+    clearLabel = "Clear",
+    disabledDaysBefore,
+    disabledDaysAfter,
+    disabled: disabledDays = [],
+    modifiers,
+    disableAnimations,
     firstDayOfWeek = 0,
-    fixedWeeks = true,
-    modifiers: defaultModifiers,
-    renderDay,
-    ...rest
+    forceClose,
+    required,
+    month,
+    disableYearPicker,
+    position = "bottom-start",
+    menuClassName,
+    popperClassName,
+    enableConfirmModal = false,
+    modalHeaderText = "Discard changes?",
+    modalDiscardMessage = "All unsaved changes will be lost.",
+    modalDiscardBtnText = "OK",
+    modalCancelBtnText = "Cancel",
+    backgroundElementClass,
+    popperTooltipClassName,
+    popperTooltipStyle,
+    open,
+    onCalendarToggle,
+    onDayClick,
+    showControls
   } = _ref;
-  const [enteredTo, setEnteredTo] = useState();
-  const [enteredFrom, setEnteredFrom] = useState();
-  const [stopScroll, setStopScroll] = useState();
-  const [direction, setDirection] = useState(true);
-  const [isPreselected, setIsPreselected] = useState(() => {
-    return (selectedDays == null ? void 0 : selectedDays.from) instanceof Date && (selectedDays == null ? void 0 : selectedDays.to) instanceof Date;
+  const [isOpen, setIsOpen] = useState(open);
+  const [isYearSelectOpen, setIsYearSelectOpen] = useState(false);
+  const [showDiscardModal, setShowDiscardModal] = useState(false);
+  const [isMonthSelectOpen, setIsMonthSelectOpen] = useState(mode === "monthly" || mode === "quarterly");
+  const [monthTransitionDirection, setMonthTransitionDirection] = useState(null);
+  const [currentDate, setCurrentDate] = useState(() => {
+    if (defaultSelected && defaultSelected.from) {
+      return toMoment(defaultSelected.from);
+    }
+    if (month) {
+      return toMoment(month);
+    }
+    return moment.utc();
+  });
+  const [targetDate, setTargetDate] = useState(() => {
+    if (defaultSelected && defaultSelected.from) {
+      return toMoment(defaultSelected.from);
+    } else if (month) {
+      return toMoment(month);
+    }
+    return moment.utc();
+  });
+  const [selected, setSelected] = useState(() => {
+    if (!defaultSelected) {
+      return null;
+    }
+    if (!defaultSelected.from) {
+      return null;
+    }
+    return {
+      from: toMoment(defaultSelected.from),
+      to: defaultSelected.to ? toMoment(defaultSelected.to) : null
+    };
   });
-  const [showMonthPicker, setShowMonthPicker] = useState(selectionMode === "quarterly" || selectionMode === "monthly");
-  const [modifiers, setModifiers] = useState(defaultModifiers);
-  const week = firstDayOfWeek === 0 ? "week" : "isoWeek";
+  const [hoveredDate, setHoveredDate] = useState(null);
+  const timezone = moment.defaultZone ? moment.defaultZone.name : moment.tz.guess();
+  const currentDateInTimezone = moment().tz(timezone).format("YYYY-MM-DD");
+  const today = moment.utc(currentDateInTimezone);
+  const selectedYearRef = useRef(null);
+  const datePickerRef = useRef(null);
+  const handleSelection = useCallback(range => {
+    if (!range) {
+      setSelected(null);
+      if (onChange) onChange(undefined);
+      if (instant && onSave) {
+        onSave(undefined);
+      }
+    } else {
+      setSelected(range);
+      if (onChange) onChange({
+        from: range.from.utc().unix(),
+        to: range != null && range.to ? moment(range.to).utc().unix() : null
+      });
+      if (instant && onSave) {
+        onSave({
+          from: range.from.utc().unix(),
+          to: range != null && range.to ? moment(range.to).utc().unix() : null
+        });
+      }
+    }
+  }, [onChange, onSave, instant]);
+  const toggleCalendar = useCallback(() => {
+    if (target) {
+      setIsOpen(!isOpen);
+      if (onCalendarToggle) onCalendarToggle(!isOpen);
+    }
+  }, [isOpen, onCalendarToggle, target]);
+  const toggleYearSelect = useCallback(() => {
+    setIsYearSelectOpen(!isYearSelectOpen);
+    setIsMonthSelectOpen(true);
+  }, [isYearSelectOpen]);
+  const toggleMonthSelect = useCallback(() => {
+    if (mode !== "monthly" && mode !== "quarterly") {
+      setIsMonthSelectOpen(!isMonthSelectOpen);
+    }
+  }, [isMonthSelectOpen, mode]);
   useEffect(() => {
-    if (enteredFrom instanceof Date && enteredTo instanceof Date) {
-      setModifiers(prev => {
-        return {
-          ...prev,
-          hovered: {
-            from: enteredFrom,
-            to: enteredTo
-          }
-        };
+    if (defaultSelected && defaultSelected.from) {
+      setSelected({
+        from: toMoment(defaultSelected.from),
+        to: defaultSelected.to ? toMoment(defaultSelected.to) : null
       });
+      setCurrentDate(toMoment(defaultSelected.from) || moment.utc());
+      setTargetDate(toMoment(defaultSelected.from) || moment.utc());
     } else {
-      setModifiers(defaultModifiers);
-    }
-  }, [enteredTo, enteredFrom, defaultModifiers]);
-  const handleDayClick = useCallback((day, modifiers) => {
-    if (onDayClick) {
-      onDayClick(day, modifiers);
+      setSelected(null);
     }
-    if (!onChange) {
-      return;
+  }, [defaultSelected, month]);
+  const handleDateSelect = date => {
+    const isSameMonth = date.isSame(currentDate, "month");
+    if (isSameMonth || disableAnimations) {
+      setCurrentDate(date);
+      setTargetDate(date);
+    } else {
+      const direction = date.isBefore(currentDate, "month") ? "prev" : "next";
+      setTargetDate(date);
+      setMonthTransitionDirection(direction);
     }
-    if (month.getMonth() !== day.getMonth()) {
-      onMonthChange(day);
+    switch (mode) {
+      case "daily":
+        handleDailySelection(date);
+        break;
+      case "weekly":
+        handleWeeklySelection(date);
+        break;
+      case "custom":
+        handleCustomSelection(date);
+        break;
+      default:
+        console.warn("Unhandled mode: " + mode);
     }
-    if (modifiers["day_disabled"] || selectionMode === "none") {
-      return;
+    if (instant && mode !== "custom" && forceClose) toggleCalendar();
+  };
+  const handleDailySelection = date => {
+    if (!date.isSame(selected == null ? void 0 : selected.from)) {
+      handleSelection({
+        from: date,
+        to: date
+      });
+    } else if (!required) {
+      handleSelection(undefined);
     }
-    // reset the selectedDays if the user clicks on the same day
-    if (!dateRequired && (selectedDays != null && selectedDays.from && moment(day).isSame(moment(selectedDays.from), "day") || selectedDays != null && selectedDays.to && moment(day).isSame(moment(selectedDays.to), "day"))) {
-      setEnteredTo(undefined);
-      setEnteredFrom(undefined);
-      return onChange(undefined);
+  };
+  const handleWeeklySelection = date => {
+    var _selected$from;
+    const currentDayOfWeek = date.day();
+    const daysToSubtract = (currentDayOfWeek - firstDayOfWeek + 7) % 7;
+    const startOfWeek = date.clone().subtract(daysToSubtract, "days").startOf("day");
+    const endOfWeek = startOfWeek.clone().add(6, "days");
+    if (!startOfWeek.isSame(selected == null || (_selected$from = selected.from) == null ? void 0 : _selected$from.startOf("day"))) {
+      handleSelection({
+        from: startOfWeek,
+        to: endOfWeek
+      });
+    } else if (!required) {
+      handleSelection(undefined);
     }
-    if (selectionMode === "daily") {
-      return onChange({
-        from: day,
-        to: day
+  };
+  const handleCustomSelection = date => {
+    if (!selected || (selected == null ? void 0 : selected.from) === moment.utc(Number(defaultSelected == null ? void 0 : defaultSelected.from) * 1000)) {
+      setSelected({
+        from: date.utc(),
+        to: null
+      });
+      handleSelection({
+        from: date,
+        to: null
       });
+      return;
     }
-    if (selectionMode === "weekly") {
-      if (!dateRequired && selectedDays != null && selectedDays.from && moment(day).isSame(moment(selectedDays.from), week)) {
-        return onChange(undefined);
-      }
-      return onChange({
-        from: moment(day).startOf(week).toDate(),
-        to: moment(day).endOf(week).toDate()
+    if (moment.isMoment(selected == null ? void 0 : selected.from) && !(selected != null && selected.to) && !(selected != null && selected.from.isSame(date.utc(), "day"))) {
+      const newSelection = selected != null && selected.from.isBefore(date) ? {
+        from: selected.from,
+        to: date.utc()
+      } : {
+        from: date.utc(),
+        to: selected.from
+      };
+      setSelected(newSelection);
+      handleSelection({
+        from: newSelection.from,
+        to: newSelection.to
+      });
+    } else if (moment.isMoment(selected == null ? void 0 : selected.from) && moment.isMoment(selected == null ? void 0 : selected.to)) {
+      setSelected({
+        from: date,
+        to: null
+      });
+      handleSelection({
+        from: date,
+        to: null
+      });
+    } else if (moment.isMoment(selected == null ? void 0 : selected.from) && selected != null && selected.from.isSame(date.utc(), "day") && !required) {
+      setSelected(null);
+      handleSelection(undefined);
+    } else if (selected.from === null && selected.to === null) {
+      setSelected({
+        from: date.utc(),
+        to: null
+      });
+      handleSelection({
+        from: date,
+        to: date
       });
     }
-    if (selectionMode === "custom") {
-      if (isPreselected) {
-        setIsPreselected(false);
-        return onChange({
-          from: day,
-          to: day
+  };
+  const handleSave = () => {
+    if (onSave) {
+      toggleCalendar();
+      if (mode === "custom" && !(selected != null && selected.to)) {
+        setSelected({
+          from: moment.utc(selected == null ? void 0 : selected.from),
+          to: moment.utc(selected == null ? void 0 : selected.from)
         });
       }
-      if (!selectedDays || selectedDays != null && selectedDays.from && selectedDays != null && selectedDays.to && !moment(selectedDays.from).isSame(moment(selectedDays.to))) {
-        if (!dateRequired && selectedDays != null && selectedDays.from && selectedDays != null && selectedDays.to && moment(day).isBetween(moment(selectedDays.from), moment(selectedDays.to))) {
-          setEnteredTo(day);
-          setEnteredFrom(day);
-          return onChange(undefined);
-        }
-        setEnteredFrom(day);
-        return onChange({
-          from: day,
-          to: day
-        });
-      }
-      if (selectedDays != null && selectedDays.from && isAfter(day, selectedDays.from)) {
-        setEnteredTo(undefined);
-        setEnteredFrom(undefined);
-        return onChange({
-          from: selectedDays.from,
-          to: day
+      if (selected) {
+        onSave({
+          from: moment.utc(selected == null ? void 0 : selected.from).unix(),
+          to: selected != null && selected.to ? moment.utc(selected == null ? void 0 : selected.to).unix() : moment.utc(selected == null ? void 0 : selected.from).unix()
         });
+      } else {
+        if (!required) {
+          onSave(undefined);
+          setCurrentDate(moment.utc());
+          setTargetDate(moment.utc());
+        }
       }
-      if (selectedDays != null && selectedDays.to) {
-        setEnteredTo(undefined);
-        setEnteredFrom(undefined);
-        return onChange({
-          from: day,
-          to: selectedDays.to
-        });
+    }
+  };
+  const handleMonthChange = useCallback(direction => {
+    setMonthTransitionDirection(direction);
+    if (isMonthSelectOpen) {
+      setTargetDate(prevDate => {
+        if (prevDate) {
+          return direction === "prev" ? prevDate.clone().subtract(1, "year") : prevDate.clone().add(1, "year");
+        }
+        return prevDate;
+      });
+      if (disableAnimations) {
+        setCurrentDate(prevDate => direction === "prev" ? prevDate.clone().subtract(1, "year") : prevDate.clone().add(1, "year"));
       }
-      return onChange({
-        from: day,
-        to: day
+    } else {
+      setTargetDate(prevDate => {
+        if (prevDate) {
+          return direction === "prev" ? prevDate.clone().subtract(1, "month") : prevDate.clone().add(1, "month");
+        }
+        return prevDate;
       });
+      if (disableAnimations) {
+        setCurrentDate(prevDate => direction === "prev" ? prevDate.clone().subtract(1, "month") : prevDate.clone().add(1, "month"));
+      }
     }
-  }, [onDayClick, onChange, month, selectionMode, dateRequired, selectedDays, onMonthChange, week, isPreselected]);
-  const isSelectedFirstDay = useCallback(() => {
-    if (selectionMode !== "custom") {
-      return false;
+  }, [disableAnimations, isMonthSelectOpen]);
+  const handleYearChange = useCallback(direction => {
+    if (isMonthSelectOpen && !disableAnimations) {
+      setMonthTransitionDirection(direction);
+    } else {
+      setCurrentDate(prevDate => direction === "prev" ? prevDate.clone().subtract(1, "year") : prevDate.clone().add(1, "year"));
     }
-    if (selectedDays != null && selectedDays.from && selectedDays != null && selectedDays.to) {
-      return moment(selectedDays.from).isSame(selectedDays.to);
+    setTargetDate(prevDate => {
+      if (prevDate) {
+        return direction === "prev" ? prevDate.clone().subtract(1, "year") : prevDate.clone().add(1, "year");
+      }
+      return prevDate;
+    });
+  }, [disableAnimations, isMonthSelectOpen]);
+  const onAnimationEnd = () => {
+    if (targetDate) {
+      setCurrentDate(targetDate);
+      setMonthTransitionDirection(null);
     }
-  }, [selectionMode, selectedDays]);
-  const handleDayMouseEnter = useCallback(day => {
-    if (isPreselected && selectionMode !== "weekly") {
-      setEnteredTo(day);
-      setEnteredFrom(day);
-      return;
+  };
+  const handleYearSelect = year => {
+    setCurrentDate(currentDate.clone().year(year));
+    setTargetDate(currentDate.clone().year(year));
+    setIsYearSelectOpen(false);
+    setIsMonthSelectOpen(true);
+  };
+  const handleMonthSelect = month => {
+    const newDate = currentDate.clone().utc().month(month);
+    setCurrentDate(newDate);
+    setTargetDate(newDate);
+    if (mode === "monthly") {
+      var _selected$to;
+      const range = {
+        from: newDate.clone().startOf("month"),
+        to: newDate.clone().endOf("month").startOf("day")
+      };
+      const isSameMonth = (selected == null ? void 0 : selected.from.isSame(range.from, "month")) && (selected == null || (_selected$to = selected.to) == null ? void 0 : _selected$to.isSame(range.to, "month"));
+      if (isSameMonth) {
+        if (!required) {
+          handleSelection(undefined);
+          if (instant && onSave) {
+            setCurrentDate(moment.utc());
+            setTargetDate(moment.utc());
+          }
+        }
+      } else {
+        handleSelection(range);
+      }
     }
-    if (selectionMode === "daily") {
-      setEnteredTo(day);
-      setEnteredFrom(day);
+    if (mode === "quarterly") {
+      var _selected$to2;
+      const quarterRange = {
+        from: newDate.clone().startOf("quarter"),
+        to: newDate.clone().endOf("quarter").startOf("day")
+      };
+      const isSameQuarter = (selected == null ? void 0 : selected.from.isSame(quarterRange.from, "quarter")) && (selected == null || (_selected$to2 = selected.to) == null ? void 0 : _selected$to2.isSame(quarterRange.to, "quarter"));
+      if (isSameQuarter) {
+        if (!required) {
+          handleSelection(undefined);
+          if (instant && onSave) {
+            setCurrentDate(moment.utc());
+            setTargetDate(moment.utc());
+          }
+        }
+      } else {
+        handleSelection(quarterRange);
+      }
     }
-    if (selectionMode === "weekly") {
-      setEnteredFrom(moment(day).startOf(week).toDate());
-      setEnteredTo(moment(day).endOf(week).toDate());
+    if (mode !== "monthly" && mode !== "quarterly") {
+      setIsMonthSelectOpen(false);
     }
-    if (selectionMode !== "weekly" && (!selectedDays || selectedDays != null && selectedDays.from && selectedDays != null && selectedDays.to && !moment(selectedDays.from).isSame(moment(selectedDays.to)))) {
-      setEnteredTo(day);
-      setEnteredFrom(day);
+    if (instant && (mode === "monthly" || mode === "quarterly") && forceClose) toggleCalendar();
+  };
+  useEffect(() => {
+    if (isYearSelectOpen && selectedYearRef.current) {
+      var _selectedYearRef$curr;
+      selectedYearRef == null || (_selectedYearRef$curr = selectedYearRef.current) == null || _selectedYearRef$curr.scrollIntoView({
+        behavior: "smooth",
+        block: "center"
+      });
     }
-    if (isSelectedFirstDay() && selectedDays != null && selectedDays.from) {
-      setEnteredFrom(selectedDays.from);
-      setEnteredTo(day);
+  }, [isYearSelectOpen]);
+  const renderDaysOfWeek = () => {
+    const daysOfWeek = moment.weekdaysShort();
+    const orderedDays = [...daysOfWeek.slice(firstDayOfWeek), ...daysOfWeek.slice(0, firstDayOfWeek)];
+    return orderedDays.map(day => /*#__PURE__*/React.createElement(StyledDayName, {
+      key: day
+    }, day[0]));
+  };
+  const animationClass = useMemo(() => {
+    return monthTransitionDirection && !disableAnimations ? monthTransitionDirection === "next" ? "slide-down" : "slide-up" : "";
+  }, [disableAnimations, monthTransitionDirection]);
+  const handleDayClick = (day, modifiers) => {
+    if (modifiers.some(mod => mod === "day_disabled")) {
+      return;
     }
-  }, [selectionMode, isSelectedFirstDay, selectedDays, week, isPreselected]);
-  const onDayMouseLeave = useCallback(() => {
-    if (selectionMode === "weekly" || selectionMode === "daily" || selectionMode === "custom") {
-      setEnteredFrom(undefined);
-      setEnteredTo(undefined);
+    if (onDayClick) onDayClick(day, modifiers);
+    handleDateSelect(day);
+  };
+  const getHoverRange = () => {
+    if (!hoveredDate) return null;
+    if (mode === "quarterly") {
+      const startMonth = hoveredDate.clone().startOf("quarter");
+      const endMonth = hoveredDate.clone().endOf("quarter");
+      return {
+        from: startMonth,
+        to: endMonth
+      };
     }
-  }, [setEnteredFrom, setEnteredTo, selectionMode]);
-  const onWheel = useCallback(e => {
-    if (stopScroll && (new Date().getTime() - stopScroll.getTime()) / 1000 < 0.9) {
-      return;
+    if (mode === "weekly") {
+      const currentDayOfWeek = hoveredDate.day();
+      const daysToSubtract = (currentDayOfWeek - firstDayOfWeek + 7) % 7;
+      const startOfWeek = hoveredDate.clone().subtract(daysToSubtract, "days").startOf("day");
+      const endOfWeek = startOfWeek.clone().add(6, "days");
+      return {
+        from: startOfWeek,
+        to: endOfWeek
+      };
     }
-    const nextMonth = showMonthPicker ? addMonths(month, 12) : addMonths(month, 1);
-    const previousMonth = showMonthPicker ? addMonths(month, -12) : addMonths(month, -1);
-    if (e.deltaY > 0.9) {
-      setDirection(true);
-      onMonthChange(nextMonth);
-      setStopScroll(new Date());
-    }
-    if (e.deltaY < -0.9) {
-      setDirection(false);
-      onMonthChange(previousMonth);
-      setStopScroll(new Date());
-    }
-  }, [stopScroll, showMonthPicker, month, onMonthChange]);
-  const togglePicker = useCallback(() => {
-    if (selectionMode !== "monthly" && selectionMode !== "quarterly") {
-      return setShowMonthPicker(!showMonthPicker);
-    }
-    setShowMonthPicker(true);
-  }, [showMonthPicker, selectionMode]);
-  const handleYearMonthChange = useCallback(m => {
-    if (onChange) {
-      if (selectionMode === "monthly") {
-        if (!dateRequired && selectedDays != null && selectedDays.from && moment(m).isSame(moment(selectedDays.from), "month")) {
-          return onChange(undefined);
-        }
-        onChange({
-          from: moment(m).startOf("month").toDate(),
-          to: moment(m).endOf("month").toDate()
-        });
-      }
-      if (selectionMode === "quarterly") {
-        if (!dateRequired && selectedDays != null && selectedDays.from && moment(m).isSame(moment(selectedDays.from).startOf("quarter"), "quarter")) {
-          return onChange(undefined);
+    if (mode === "custom" && selected != null && selected.from && !(selected != null && selected.to)) {
+      const from = selected.from.isBefore(hoveredDate) ? selected.from : hoveredDate;
+      const to = selected.from.isAfter(hoveredDate) ? selected.from : hoveredDate;
+      return {
+        from,
+        to
+      };
+    }
+    return null;
+  };
+  const renderCalendarDates = () => {
+    const startOfMonth = currentDate.clone().startOf("month");
+    const startDate = startOfMonth.clone().isoWeekday(firstDayOfWeek);
+    const endDate = startDate.clone().add(6, "weeks");
+    const date = startDate.clone();
+    const dates = [];
+    const hoverRange = getHoverRange();
+    while (date.isBefore(endDate)) {
+      const clonedDate = date.clone();
+      const isToday = clonedDate.isSame(today, "day");
+      const isSelected = selected && (clonedDate.isBetween(selected.from, selected.to, "day", "[]") || clonedDate.isSame(selected.from, "day") || clonedDate.isSame(selected.to, "day"));
+      const isHovered = hoverRange && (mode === "weekly" || mode === "custom") && clonedDate.isBetween(hoverRange.from, hoverRange.to, "day", "[]");
+      const isDisabled = disabledDaysBefore && clonedDate.isBefore(disabledDaysBefore, "day") || disabledDaysAfter && clonedDate.isAfter(disabledDaysAfter, "day") || disabledDays.includes(clonedDate.day());
+      const modifierClasses = [];
+      const modifierTitles = [];
+      let titles;
+      if (modifiers) Object.keys(modifiers || {}).forEach(modifier => {
+        const {
+          matched,
+          title
+        } = modifiers[modifier](clonedDate);
+        if (matched) {
+          modifierClasses.push(modifier);
+          if (title) modifierTitles.push(title);
         }
-        onChange({
-          from: moment(m).startOf("quarter").toDate(),
-          to: moment(m).endOf("quarter").toDate()
-        });
+      });
+      if (modifierTitles.length) {
+        titles = /*#__PURE__*/React.createElement("div", {
+          key: "title-wrapper-" + clonedDate.toString()
+        }, modifierTitles.map((title, index) => /*#__PURE__*/React.createElement("div", {
+          key: "title-text-" + index
+        }, title)));
       }
+      const isOutside = !clonedDate.isSame(currentDate, "month");
+      dates.push( /*#__PURE__*/React.createElement(Tooltip, {
+        title: titles,
+        disable: !modifierTitles.length,
+        key: clonedDate.toString(),
+        popperTooltipClassName: popperTooltipClassName,
+        popperTooltipStyle: popperTooltipStyle
+      }, /*#__PURE__*/React.createElement(StyledCalendarDate, {
+        className: (isSelected ? "selected" : "") + " " + (isToday ? "today-day" : "") + "\n          " + (isDisabled ? "disabled" : "") + " " + (isHovered ? "hovered" : "") + " " + modifierClasses.join(" ") + "\n          " + (isOutside ? "outside" : ""),
+        onClick: () => handleDayClick(clonedDate, modifierClasses),
+        onMouseEnter: mode === "weekly" || mode === "custom" ? () => setHoveredDate(clonedDate) : undefined,
+        onMouseLeave: mode === "weekly" || mode === "custom" ? () => setHoveredDate(null) : undefined
+      }, clonedDate.date())));
+      date.add(1, "day");
     }
-    onMonthChange(m);
-  }, [onMonthChange, onChange, selectedDays, selectionMode, dateRequired]);
-  const text = useMemo(() => {
-    if (showMonthPicker) {
-      return "" + month.getFullYear();
-    }
-    return moment(month).format("MMMM") + " " + (moment(month).isSame(moment(), "year") ? "" : month.getFullYear());
-  }, [showMonthPicker, month]);
-  const customNavBarElement = useCallback(props => {
-    return /*#__PURE__*/React.createElement("div", {
-      className: "c-DayPicker-wrapper"
-    }, /*#__PURE__*/React.createElement(CustomNavBarElement, _extends({}, props, {
-      showMonthPicker: showMonthPicker,
-      month: month,
-      onChangeDirection: setDirection,
-      onMonthChange: onMonthChange,
-      onClick: togglePicker
-    })), /*#__PURE__*/React.createElement(YearMonthPicker, _extends({}, props, {
-      text: text,
-      onClick: togglePicker,
-      month: month,
-      selectedDays: selectedDays,
-      onChange: handleYearMonthChange,
-      isShown: showMonthPicker,
-      selectionMode: selectionMode
-    })));
-  }, [showMonthPicker, month, onMonthChange, togglePicker, text, selectedDays, handleYearMonthChange, selectionMode]);
-  const onKeyDownCallback = useCallback(e => {
-    // Right Arrow
-    if (e.key === "ArrowRight") {
-      setDirection(true);
-      if (showMonthPicker) {
-        onMonthChange(new Date(month.getFullYear() + 1, month.getMonth()));
-      } else {
-        onMonthChange(new Date(month.getFullYear(), month.getMonth() + 1));
-      }
+    return dates;
+  };
+  const renderYearSelect = () => {
+    const years = Array.from({
+      length: 200
+    }, (_, i) => 1900 + i);
+    return /*#__PURE__*/React.createElement(StyledYearSelect, null, years.map(year => {
+      const isSelected = selected && ((selected == null ? void 0 : selected.to) && year >= selected.from.year() && year <= selected.to.year() || year === selected.from.year() || (selected == null ? void 0 : selected.to) && year === selected.to.year());
+      const isDisabledYear = disabledDaysBefore && year < disabledDaysBefore.year() || disabledDaysAfter && year > disabledDaysAfter.year();
+      return /*#__PURE__*/React.createElement(StyledYearOption, {
+        key: year,
+        ref: year === currentDate.year() ? selectedYearRef : null,
+        className: (isSelected ? "selected" : "") + " " + (year === today.year() ? "today-year" : "") + " " + (isDisabledYear ? "disabled" : ""),
+        onClick: () => handleYearSelect(year)
+      }, year);
+    }));
+  };
+  const renderMonthSelect = () => {
+    const months = moment.months();
+    const hoverRange = getHoverRange();
+    return /*#__PURE__*/React.createElement(StyledMonthSelect, null, months.map((month, index) => {
+      const monthDate = currentDate.clone().month(index);
+      const isSelected = selected && (monthDate.isBetween(selected.from, selected.to, "month", "[]") || monthDate.isSame(selected.from, "month") || monthDate.isSame(selected.to, "month"));
+      const isDisabledMonth = disabledDaysBefore && monthDate.isBefore(disabledDaysBefore, "month") || disabledDaysAfter && monthDate.isAfter(disabledDaysAfter, "month");
+      const isHoveredQuarter = hoverRange && mode === "quarterly" && monthDate.isBetween(hoverRange.from, hoverRange.to, "month", "[]");
+      return /*#__PURE__*/React.createElement(StyledMonthOption, {
+        key: month,
+        className: (isSelected ? "selected" : "") + " " + (index === today.month() && currentDate.year() === today.year() ? "today-month" : "") + " " + (isDisabledMonth ? "disabled" : "") + " " + (isHoveredQuarter ? "hovered" : ""),
+        onClick: () => handleMonthSelect(index),
+        onMouseEnter: mode === "quarterly" ? () => setHoveredDate(monthDate) : undefined,
+        onMouseLeave: mode === "quarterly" ? () => setHoveredDate(null) : undefined
+      }, month.substring(0, 3));
+    }));
+  };
+  const captionText = useMemo(() => {
+    const isCurrentYear = currentDate.isSame(today, "year");
+    return !isMonthSelectOpen && !isYearSelectOpen ? "" + currentDate.format("MMMM") + (isCurrentYear ? "" : " " + currentDate.format("YYYY")) : currentDate.format("YYYY");
+  }, [currentDate, isMonthSelectOpen, isYearSelectOpen, today]);
+  const handleClear = useCallback(() => {
+    if (typeof onClear === "function") onClear();
+    handleSelection(undefined);
+  }, [handleSelection, onClear]);
+  const handleClose = useCallback(() => {
+    var _selected$to3;
+    if (mode === "custom" && instant && selected) {
+      setSelected({
+        from: moment.utc(selected == null ? void 0 : selected.from),
+        to: selected != null && selected.to ? moment.utc(selected == null ? void 0 : selected.to) : moment.utc(selected == null ? void 0 : selected.from)
+      });
     }
-    // Left Arrow
-    if (e.key === "ArrowLeft") {
-      setDirection(false);
-      if (showMonthPicker) {
-        onMonthChange(new Date(month.getFullYear() - 1, month.getMonth()));
-      } else {
-        onMonthChange(new Date(month.getFullYear(), month.getMonth() - 1));
-      }
+    if (instant && onSave && mode === "custom" && selected && (!(selected != null && selected.from.isSame(moment.utc(Number(defaultSelected == null ? void 0 : defaultSelected.from) * 1000))) || !(selected != null && (_selected$to3 = selected.to) != null && _selected$to3.isSame(moment.utc(Number(defaultSelected == null ? void 0 : defaultSelected.to) * 1000))))) {
+      onSave({
+        from: moment.utc(selected == null ? void 0 : selected.from).unix(),
+        to: selected != null && selected.to ? moment.utc(selected == null ? void 0 : selected.to).unix() : moment.utc(selected == null ? void 0 : selected.from).unix()
+      });
+    }
+    if (mode === "custom" && instant && !selected && onSave) {
+      onSave(undefined);
     }
-    // Up Arrow
-    if (e.key === "ArrowUp") {
-      setDirection(true);
-      onMonthChange(new Date(month.getFullYear() + 1, month.getMonth()));
+    setCurrentDate(defaultSelected != null && defaultSelected.from ? toMoment(defaultSelected.from) : month ? toMoment(month) : moment.utc());
+    setTargetDate(defaultSelected != null && defaultSelected.from ? toMoment(defaultSelected.from) : month ? toMoment(month) : moment.utc());
+    setSelected(defaultSelected != null && defaultSelected.from ? {
+      from: toMoment(defaultSelected.from),
+      to: defaultSelected.to ? toMoment(defaultSelected.to) : null
+    } : null);
+    toggleCalendar();
+    setIsYearSelectOpen(false);
+    setIsMonthSelectOpen(mode === "monthly" || mode === "quarterly");
+    setMonthTransitionDirection(null);
+    if (typeof onClose === "function") onClose();
+  }, [defaultSelected, instant, mode, month, onClose, onSave, selected, toggleCalendar]);
+  const handleBeforeClose = useCallback(() => {
+    let shouldClose = true;
+    if (!target || !enableConfirmModal || instant || required) {
+      shouldClose = true;
     }
-    // Down Arrow
-    if (e.key === "ArrowDown") {
-      setDirection(false);
-      onMonthChange(new Date(month.getFullYear() - 1, month.getMonth()));
+    if (target && enableConfirmModal && !instant && !required && (selected && !defaultSelected || !selected && defaultSelected || selected != null && selected.from && defaultSelected != null && defaultSelected.from && !selected.from.isSame(toMoment(defaultSelected.from)) || selected != null && selected.to && defaultSelected != null && defaultSelected.to && !selected.to.isSame(toMoment(defaultSelected.to)))) {
+      shouldClose = false;
+      setShowDiscardModal(true);
     }
-  }, [showMonthPicker, onMonthChange, month]);
+    if (shouldClose) handleClose();
+    return shouldClose;
+  }, [defaultSelected, enableConfirmModal, handleClose, instant, required, selected, target]);
+  const Wrapper = target ? Menu : "div";
+  const handleCaptionClick = useCallback(() => {
+    isMonthSelectOpen && !disableYearPicker ? toggleYearSelect() : toggleMonthSelect();
+  }, [disableYearPicker, isMonthSelectOpen, toggleMonthSelect, toggleYearSelect]);
+  const handleCloseDiscardModal = useCallback(() => {
+    setShowDiscardModal(false);
+  }, []);
+  const handleSaveDiscardModal = useCallback(() => {
+    setSelected(defaultSelected != null && defaultSelected.from ? {
+      from: toMoment(defaultSelected.from),
+      to: defaultSelected.to ? toMoment(defaultSelected.to) : null
+    } : null);
+    setShowDiscardModal(false);
+    handleClose();
+  }, [defaultSelected, handleClose]);
+  const wrapperProps = target ? {
+    className: "c-date-picker--calendar",
+    target,
+    onBeforeClose: handleBeforeClose,
+    onClose: handleClose,
+    open: isOpen,
+    active: isOpen,
+    onOpen: toggleCalendar,
+    position,
+    menuClassName,
+    popperClassName,
+    backgroundElementClass
+  } : {
+    className: "c-date-picker--calendar"
+  };
   useEffect(() => {
-    document.addEventListener("keydown", onKeyDownCallback);
+    const handleKeyDown = event => {
+      if (event.key === "ArrowRight") {
+        handleMonthChange("next");
+      } else if (event.key === "ArrowLeft") {
+        handleMonthChange("prev");
+      } else if (event.key === "ArrowUp") {
+        handleYearChange("next");
+      } else if (event.key === "ArrowDown") {
+        handleYearChange("prev");
+      }
+    };
+    if (isOpen) {
+      window.addEventListener("keydown", handleKeyDown);
+    } else {
+      window.removeEventListener("keydown", handleKeyDown);
+    }
     return () => {
-      document.removeEventListener("keydown", onKeyDownCallback);
+      window.removeEventListener("keydown", handleKeyDown);
     };
-  }, [month, onMonthChange, showMonthPicker, onKeyDownCallback]);
-  const selected = useMemo(() => {
-    const dates = [];
-    if (!(selectedDays != null && selectedDays.from)) return [];
-
-    // If from and to dates are the same, return an array with one item
-    if (moment(selectedDays == null ? void 0 : selectedDays.from).isSame(selectedDays == null ? void 0 : selectedDays.to, "day")) {
-      dates.push(selectedDays == null ? void 0 : selectedDays.from);
-      return dates;
-    }
-    let currentDate = moment(selectedDays == null ? void 0 : selectedDays.from);
-    while (currentDate.isSameOrBefore(selectedDays == null ? void 0 : selectedDays.to, "day")) {
-      dates.push(currentDate.toDate());
-      currentDate = currentDate.add(1, "days");
+  }, [isOpen, handleMonthChange, handleYearChange]);
+  const saveIsDisabled = () => {
+    if (!target) return false;
+    if (!defaultSelected && !selected) {
+      return true;
     }
-    return dates;
-  }, [selectedDays == null ? void 0 : selectedDays.from, selectedDays == null ? void 0 : selectedDays.to]);
-  return /*#__PURE__*/React.createElement(StyledDatePicker, {
-    className: "c-date-picker-wrapper",
-    onWheel: onWheel
-  }, /*#__PURE__*/React.createElement(SwitchTransition, {
-    mode: "out-in"
-  }, /*#__PURE__*/React.createElement(StyledDatePickerCSSTransition, {
-    key: showMonthPicker ? month.getFullYear() : month.getMonth(),
-    timeout: 300,
-    classNames: "c-date-picker__animation",
-    $direction: direction
-  }, /*#__PURE__*/React.createElement(StyledDayPicker, _extends({}, rest, {
-    mode: "multiple",
-    showOutsideDays: true,
-    disabled: disabledDays,
-    selected: selected,
-    onDayClick: handleDayClick,
-    modifiers: modifiers,
-    onDayMouseEnter: handleDayMouseEnter,
-    onDayMouseLeave: onDayMouseLeave,
-    className: className,
-    $isYearlyView: showMonthPicker,
-    month: month,
-    components: {
-      Caption: customNavBarElement,
-      DayContent: renderDay
-    },
-    classNames: customClassNames,
-    modifiersClassNames: modifiersClassNames,
-    fixedWeeks: fixedWeeks,
-    weekStartsOn: firstDayOfWeek,
-    formatters: {
-      formatWeekdayName: formatWeekdayName
-    }
-  })))));
+    if (defaultSelected && selected && defaultSelected.from && selected.from.isSame(toMoment(defaultSelected.from)) && defaultSelected.to && selected.to && selected.to.isSame(toMoment(defaultSelected.to))) {
+      return true;
+    }
+    return false;
+  };
+  return /*#__PURE__*/React.createElement(StyledDatePickerWrapper, {
+    ref: datePickerRef
+  }, /*#__PURE__*/React.createElement(Wrapper, wrapperProps, /*#__PURE__*/React.createElement(StyledDatePickerContainerInner, null, /*#__PURE__*/React.createElement(StyledCalendarHeader, null, isYearSelectOpen ? null : /*#__PURE__*/React.createElement(IconButton, {
+    onClick: () => handleMonthChange("prev"),
+    variant: "text gray",
+    size: "small"
+  }, /*#__PURE__*/React.createElement(ArrowLeftIcon, null)), /*#__PURE__*/React.createElement(StyledCaption, {
+    className: animationClass + " " + (isYearSelectOpen ? "year-caption" : ""),
+    key: isMonthSelectOpen ? currentDate.year() : currentDate.month(),
+    onClick: handleCaptionClick,
+    onAnimationEnd: onAnimationEnd
+  }, captionText), isYearSelectOpen ? null : /*#__PURE__*/React.createElement(IconButton, {
+    onClick: () => handleMonthChange("next"),
+    variant: "text gray",
+    size: "small"
+  }, /*#__PURE__*/React.createElement(ArrowRightIcon, null))), /*#__PURE__*/React.createElement(StyledCalendarSelector, null, isYearSelectOpen ? renderYearSelect() : isMonthSelectOpen ? /*#__PURE__*/React.createElement(StyledMonthSelector, {
+    className: animationClass,
+    key: currentDate.year(),
+    onAnimationEnd: onAnimationEnd
+  }, renderMonthSelect()) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledDaysOfWeek, null, renderDaysOfWeek()), /*#__PURE__*/React.createElement(StyledCalendarDates, {
+    className: animationClass,
+    key: currentDate.month()
+  }, renderCalendarDates()))), (target || showControls) && (!instant ? /*#__PURE__*/React.createElement(StyledControls, null, /*#__PURE__*/React.createElement(StyledControlsLeft, null, /*#__PURE__*/React.createElement(Button, {
+    size: "small",
+    variant: "primary",
+    onClick: handleSave,
+    disabled: saveIsDisabled()
+  }, saveLabel), /*#__PURE__*/React.createElement(Tooltip, {
+    title: cancelLabel,
+    popperTooltipStyle: {
+      zIndex: 1301
+    }
+  }, /*#__PURE__*/React.createElement(IconButton, {
+    size: "small",
+    variant: "text gray",
+    onClick: handleBeforeClose
+  }, /*#__PURE__*/React.createElement(CancelCrossIcon, null)))), !required ? /*#__PURE__*/React.createElement(Button, {
+    size: "small",
+    onClick: handleClear,
+    variant: "text gray"
+  }, clearLabel) : null) : !required ? /*#__PURE__*/React.createElement(StyledControls, null, /*#__PURE__*/React.createElement(StyledClearInstantButton, {
+    size: "small",
+    onClick: handleClear,
+    variant: "text gray"
+  }, clearLabel)) : null))), !instant && target && !required && enableConfirmModal ? /*#__PURE__*/React.createElement(StyledConfirmDialog, {
+    className: "modal-select-date",
+    open: showDiscardModal,
+    onCancel: handleCloseDiscardModal,
+    onConfirm: handleSaveDiscardModal,
+    dialogTitle: modalHeaderText,
+    dialogContent: modalDiscardMessage,
+    cancelBtnText: modalCancelBtnText,
+    confirmBtnText: modalDiscardBtnText
+  }) : null);
 };
-DatePicker.displayName = "DatePicker";
 //# sourceMappingURL=DatePicker.js.map