@activecollab/components 2.0.212 → 2.0.213

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

@@ -1,649 +0,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 "./StylesV2";
-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 DatePickerV2 = _ref => {
-  let {
-    selected: defaultSelected,
-    onChange,
-    onSave,
-    onClear,
-    onClose,
-    instant = true,
-    target,
-    mode = "daily",
-    saveLabel = "Save",
-    cancelLabel = "Cancel",
-    clearLabel = "Clear",
-    disabledDaysBefore,
-    disabledDaysAfter,
-    disabled: disabledDays = [],
-    modifiers,
-    disableAnimations,
-    firstDayOfWeek = 0,
-    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 [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 [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 (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 {
-      setSelected(null);
-    }
-  }, [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);
-    }
-    switch (mode) {
-      case "daily":
-        handleDailySelection(date);
-        break;
-      case "weekly":
-        handleWeeklySelection(date);
-        break;
-      case "custom":
-        handleCustomSelection(date);
-        break;
-      default:
-        console.warn("Unhandled mode: " + mode);
-    }
-    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);
-    }
-  };
-  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);
-    }
-  };
-  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 (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
-      });
-    }
-  };
-  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 (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());
-        }
-      }
-    }
-  };
-  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"));
-      }
-    } 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"));
-      }
-    }
-  }, [disableAnimations, isMonthSelectOpen]);
-  const onAnimationEnd = () => {
-    if (targetDate) {
-      setCurrentDate(targetDate);
-      setMonthTransitionDirection(null);
-    }
-  };
-  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 (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 (mode !== "monthly" && mode !== "quarterly") {
-      setIsMonthSelectOpen(false);
-    }
-    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"
-      });
-    }
-  }, [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;
-    }
-    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
-      };
-    }
-    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
-      };
-    }
-    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);
-        }
-      });
-      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");
-    }
-    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)
-      });
-    }
-    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);
-    }
-    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;
-    }
-    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);
-    }
-    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(() => {
-    const handleKeyDown = event => {
-      if (event.key === "ArrowRight") {
-        handleMonthChange("next");
-      } else if (event.key === "ArrowLeft") {
-        handleMonthChange("prev");
-      }
-    };
-    if (isOpen) {
-      window.addEventListener("keydown", handleKeyDown);
-    } else {
-      window.removeEventListener("keydown", handleKeyDown);
-    }
-    return () => {
-      window.removeEventListener("keydown", handleKeyDown);
-    };
-  }, [isOpen, handleMonthChange]);
-  const saveIsDisabled = () => {
-    if (!target) return false;
-    if (!defaultSelected && !selected) {
-      return true;
-    }
-    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);
-};
-//# sourceMappingURL=DatePickerV2.js.map