@activecollab/components 2.0.138 → 2.0.140

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

@@ -0,0 +1,574 @@
+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 DatePickerV2 = _ref => {
+  var _selected$to4;
+  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(defaultSelected != null && defaultSelected.from ? moment.utc((defaultSelected == null ? void 0 : defaultSelected.from) * 1000) : moment.isMoment(month) ? month : moment.utc(month));
+  const [targetDate, setTargetDate] = useState(defaultSelected != null && defaultSelected.from ? moment.utc((defaultSelected == null ? void 0 : defaultSelected.from) * 1000) : moment.isMoment(month) ? month : moment.utc(month));
+  const [selected, setSelected] = useState(!defaultSelected ? null : {
+    from: moment.utc(defaultSelected.from * 1000),
+    to: moment.utc(Number(defaultSelected.to) * 1000)
+  });
+  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: moment(range.to).utc().unix()
+      });
+      if (instant && onSave) {
+        onSave({
+          from: range.from.utc().unix(),
+          to: moment(range.to).utc().unix()
+        });
+      }
+    }
+  }, [onChange, onSave, instant]);
+  const toggleCalendar = useCallback(() => {
+    setIsOpen(!isOpen);
+    if (onCalendarToggle) onCalendarToggle(!isOpen);
+  }, [isOpen, onCalendarToggle]);
+  const toggleYearSelect = useCallback(() => {
+    setIsYearSelectOpen(!isYearSelectOpen);
+    setIsMonthSelectOpen(true);
+  }, [isYearSelectOpen]);
+  const toggleMonthSelect = useCallback(() => {
+    if (mode !== "monthly" && mode !== "quarterly") {
+      setIsMonthSelectOpen(!isMonthSelectOpen);
+    }
+  }, [isMonthSelectOpen, mode]);
+  useEffect(() => {
+    if (defaultSelected) {
+      setSelected({
+        from: moment.utc(defaultSelected.from * 1000),
+        to: moment.utc(Number(defaultSelected.to) * 1000)
+      });
+      setCurrentDate(moment.utc(defaultSelected.from * 1000) || moment.utc());
+      setTargetDate(moment.utc(defaultSelected.from * 1000) || 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
+      });
+      onChange && onChange({
+        from: date.utc().unix(),
+        to: date.utc().unix()
+      });
+      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);
+      onChange && onChange({
+        from: newSelection.from.utc().unix(),
+        to: newSelection.to.utc().unix()
+      });
+    } else if (moment.isMoment(selected == null ? void 0 : selected.from) && moment.isMoment(selected == null ? void 0 : selected.to)) {
+      setSelected({
+        from: date.utc(),
+        to: null
+      });
+    } else if (selected != null && selected.from.isSame(date.utc(), "day") && !required) {
+      setSelected(null);
+      onChange && onChange(undefined);
+    }
+  };
+  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 => direction === "prev" ? prevDate.clone().subtract(1, "year") : prevDate.clone().add(1, "year"));
+      if (disableAnimations) {
+        setCurrentDate(prevDate => direction === "prev" ? prevDate.clone().subtract(1, "year") : prevDate.clone().add(1, "year"));
+      }
+    } else {
+      setTargetDate(prevDate => direction === "prev" ? prevDate.clone().subtract(1, "month") : prevDate.clone().add(1, "month"));
+      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) => {
+    handleDateSelect(day);
+    if (onDayClick) onDayClick(day, modifiers);
+  };
+  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.toDate());
+        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 ? moment.utc((defaultSelected == null ? void 0 : defaultSelected.from) * 1000) : moment.isMoment(month) ? month : moment.utc());
+    setTargetDate(defaultSelected != null && defaultSelected.from ? moment.utc((defaultSelected == null ? void 0 : defaultSelected.from) * 1000) : moment.isMoment(month) ? month : moment.utc());
+    setSelected(defaultSelected ? {
+      from: moment.utc(defaultSelected.from * 1000),
+      to: moment.utc(Number(defaultSelected.to) * 1000)
+    } : 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(moment.utc(defaultSelected.from * 1000)) || selected != null && selected.to && defaultSelected != null && defaultSelected.to && !selected.to.isSame(moment.utc(defaultSelected.to * 1000)))) {
+      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: moment.utc(defaultSelected.from * 1000),
+      to: moment.utc(Number(defaultSelected == null ? void 0 : defaultSelected.to) * 1000)
+    } : null);
+    setShowDiscardModal(false);
+    handleClose();
+  }, [defaultSelected, handleClose]);
+  const wrapperProps = target ? {
+    className: "c-date-picker--calendar",
+    target,
+    onBeforeClose: handleBeforeClose,
+    onClose: handleClose,
+    open: 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");
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [handleMonthChange]);
+  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: (selected == null ? void 0 : selected.from.isSame(moment.utc(Number(defaultSelected == null ? void 0 : defaultSelected.from) * 1000))) && (selected == null || (_selected$to4 = selected.to) == null ? void 0 : _selected$to4.isSame(moment.utc(Number(defaultSelected == null ? void 0 : defaultSelected.to) * 1000))) || !defaultSelected && !selected
+  }, 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