@startlibs/form 1.0.12 → 1.1.1

package/lib/DatePicker.mjs

@@ -0,0 +1,625 @@
+import _extends from '@babel/runtime/helpers/extends';
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import _taggedTemplateLiteral from '@babel/runtime/helpers/taggedTemplateLiteral';
+import _isFinite from 'lodash/fp/isFinite';
+import React, { forwardRef, useRef, useContext, useState, useEffect } from 'react';
+import styled, { css } from 'styled-components';
+import { useEnsureRef, usePopupToggle, StartlibsContext, usePrevious } from '@startlibs/core';
+import { getColor, media, ifProp, formatDate, getNumberInputType, formatDateToPattern, parseDate, callIfFunction } from '@startlibs/utils';
+import { Icon } from '@startlibs/components';
+import { Field } from './Field.mjs';
+import { TextInput } from './TextInput.mjs';
+import { useInput, enhanceInput } from './enhanceInput.mjs';
+import { darken } from 'polished';
+
+const _excluded = ["format", "min", "max", "weekStartsMonday", "label", "mandatory", "tabIndex", "helpText", "path", "timezoneOffset", "placeholder", "onBlur", "raw", "disabled", "level", "daysFromNowShortcuts", "monthsFromNowShortcuts"];
+var _templateObject, _templateObject2, _templateObject3;
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+const CALENDAR_LEVEL_DAY = 'day';
+const CALENDAR_LEVEL_MONTH = 'month';
+const CALENDAR_LEVEL_YEAR = 'year';
+const LEVELS = [CALENDAR_LEVEL_DAY, CALENDAR_LEVEL_MONTH, CALENDAR_LEVEL_YEAR];
+const DatePickerContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "DatePicker__DatePickerContainer",
+  componentId: "sc-1wo8j4d-0"
+})(["width:20rem;position:absolute;z-index:100;background-color:white;border-radius:5px;border:1px solid ", ";user-select:none;box-shadow:0 0 4px 0 rgba(0,0,0,0.2);font-size:13px;text-align:center;animation:0.2s datePickerFadeInDown ease-out;display:none;@supports (flex-wrap:wrap){display:block;}input{padding-right:2.25rem;", "}@keyframes datePickerFadeInDown{from{opacity:0;transform:translateY(-10px);pointer-events:none;}to{opacity:1;transform:none;pointer-events:none;}}"], getColor('gray210'), media.mobile(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      width: 2.5rem;\n    "]))));
+const CalendarHeader = /*#__PURE__*/styled.div.withConfig({
+  displayName: "DatePicker__CalendarHeader",
+  componentId: "sc-1wo8j4d-1"
+})(["display:flex;padding:0.5rem;align-items:center;"]);
+const CalendarContentContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "DatePicker__CalendarContentContainer",
+  componentId: "sc-1wo8j4d-2"
+})(["padding:0 0.5rem 0.5rem 0.5rem;display:flex;flex-wrap:wrap;justify-content:space-around;"]);
+const WeekHeader = /*#__PURE__*/styled(CalendarContentContainer).withConfig({
+  displayName: "DatePicker__WeekHeader",
+  componentId: "sc-1wo8j4d-3"
+})(["font-size:12px;font-weight:600;cursor:default;span{width:2.5rem;}"]);
+const CalendarClickable = /*#__PURE__*/styled.a.withConfig({
+  displayName: "DatePicker__CalendarClickable",
+  componentId: "sc-1wo8j4d-4"
+})([":hover,:focus{background-color:rgba(0,0,0,0.1);cursor:pointer;}"]);
+const TitleButton = /*#__PURE__*/styled(CalendarClickable).withConfig({
+  displayName: "DatePicker__TitleButton",
+  componentId: "sc-1wo8j4d-5"
+})(["font-size:16px;font-weight:600;flex-grow:1;border-radius:4px;line-height:3rem;"]);
+const NavigationButton = /*#__PURE__*/styled(CalendarClickable).withConfig({
+  displayName: "DatePicker__NavigationButton",
+  componentId: "sc-1wo8j4d-6"
+})(["font-size:21px;width:3rem;text-align:center;border-radius:4px;height:3rem;", "{line-height:3rem;}"], Icon);
+const CalendarContent = /*#__PURE__*/styled(CalendarClickable).withConfig({
+  displayName: "DatePicker__CalendarContent",
+  componentId: "sc-1wo8j4d-7"
+})(["line-height:2.25rem;flex-grow:1;display:inline-block;border-radius:5px;margin-top:0.25rem;margin-left:0.25rem;", " ", " ", "   ", "  "], ifProp('isEdge', css(["color:rgba(0,0,0,0.4);"])), ifProp('isSelected', css(["box-shadow:inset 0 0 0 1px ", ";"], getColor('gray210'))), ifProp('isDisabled', "pointer-events: none;\n   opacity: 0.5;"), ifProp('isCurrent', css(["background:", ";color:#FFF;:hover{background-color:", ";}", ""], getColor('main'), props => darken(0.075, getColor('main')(props)), ifProp('isSelected', 'box-shadow: none;'))));
+const DayItem = /*#__PURE__*/styled(CalendarContent).withConfig({
+  displayName: "DatePicker__DayItem",
+  componentId: "sc-1wo8j4d-8"
+})(["", " flex-basis:12%;"], props => props.index % 7 === 0 && 'margin-left:0;');
+const MonthItem = /*#__PURE__*/styled(CalendarContent).withConfig({
+  displayName: "DatePicker__MonthItem",
+  componentId: "sc-1wo8j4d-9"
+})(["", " flex-basis:30%;"], props => props.index % 3 === 0 && 'margin-left:0;');
+const YearItem = /*#__PURE__*/styled(CalendarContent).withConfig({
+  displayName: "DatePicker__YearItem",
+  componentId: "sc-1wo8j4d-10"
+})(["", " flex-basis:30%;"], props => props.index % 3 === 0 && 'margin-left:0;');
+const DatePickerInputIcon = /*#__PURE__*/styled(Icon).withConfig({
+  displayName: "DatePicker__DatePickerInputIcon",
+  componentId: "sc-1wo8j4d-11"
+})(["position:absolute;outline:none;bottom:0;font-size:21px;line-height:3rem;right:0;width:2rem;cursor:pointer;color:", ";:hover{color:", ";}display:none;@supports (flex-wrap:wrap){display:block;}", " ", ""], getColor('gray150'), getColor('main'), props => props.disabled && 'pointer-events: none;', media.mobile(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    line-height: 42px;\n    width: 2.25rem;\n  "]))));
+/*#__PURE__*/styled(Icon).withConfig({
+  displayName: "DatePicker__ClearButton",
+  componentId: "sc-1wo8j4d-12"
+})(["color:", ";font-size:12px;position:absolute;right:40px;bottom:0;transform:translateY(-50%);cursor:pointer;width:1.5rem;line-height:1.5rem;text-align:center;border-radius:50%;background:rgba(0,0,0,0.1);:hover{background:#f7d3d4;color:", ";}"], getColor('gray90'), getColor('alert'));
+const InputAndIconWrapper = /*#__PURE__*/styled.div.withConfig({
+  displayName: "DatePicker__InputAndIconWrapper",
+  componentId: "sc-1wo8j4d-13"
+})(["position:relative;"]);
+const ShortcutsWrapper = /*#__PURE__*/styled.div.withConfig({
+  displayName: "DatePicker__ShortcutsWrapper",
+  componentId: "sc-1wo8j4d-14"
+})(["display:flex;flex-wrap:wrap;gap:0.5rem;padding:0.5rem 0.25rem 0;color:", ";.link{cursor:pointer;font-weight:600;text-decoration:underline;", ":hover{color:", ";}", "}"], getColor('gray150'), media.mobile(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      font-size: 13px;  \n    "]))), getColor('main'), ifProp('disabled', css(["pointer-events:none;opacity:0.5;"])));
+const KeyMapper = level => {
+  const upDownSpacing = level === CALENDAR_LEVEL_DAY ? 7 : 3;
+  return {
+    'ArrowLeft': -1,
+    'ArrowRight': 1,
+    'ArrowUp': -upDownSpacing,
+    'ArrowDown': upDownSpacing
+  };
+};
+const getUTCDate = function (year) {
+  let month = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+  let date = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;
+  let hour = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
+  let min = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 0;
+  let sec = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : 0;
+  let ms = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : 0;
+  return new Date(Date.UTC(year, month, date, hour, min, sec, ms));
+};
+const getUTCDateBefore = function (year) {
+  let month = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+  let date = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;
+  let hour = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
+  let min = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 0;
+  let sec = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : 0;
+  let ms = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : -1;
+  return new Date(Date.UTC(year, month, date, hour, min, sec, ms));
+};
+const DatePicker = /*#__PURE__*/forwardRef((_ref, maybeInputRef) => {
+  let {
+      format = 'dd/MM/yyyy',
+      min = new Date(now().setUTCFullYear(now().getUTCFullYear() - 100)),
+      max = new Date(now().setUTCFullYear(now().getUTCFullYear() + 100)),
+      weekStartsMonday = false,
+      label,
+      mandatory,
+      tabIndex,
+      helpText,
+      path,
+      timezoneOffset = 0,
+      placeholder,
+      onBlur,
+      raw,
+      disabled,
+      level,
+      daysFromNowShortcuts,
+      // Uma array de números representando atalhos de dias a partir de agora, e.g. [0, 1, 3]
+      monthsFromNowShortcuts // Uma array de números representando atalhos de meses a partir de agora, e.g. [0, 1, 3]
+    } = _ref,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  const inputRef = useEnsureRef(maybeInputRef);
+  const [formValue, setUnoffsetedFormValue, {
+    hasErrors
+  }] = useInput(_objectSpread({
+    path
+  }, rest), raw);
+  const setFormValue = newV => setUnoffsetedFormValue(_isFinite(newV) && newV !== -1 ? newV - timezoneOffset * 36e5 : newV);
+  const popup = usePopupToggle();
+  const calendarElement = useRef();
+  const messages = useContext(StartlibsContext).dateMessages;
+  const time = Number(formValue);
+  const offsetedTime = time + timezoneOffset * 36e5;
+  const [textValue, setRawTextValue] = useState(!isNaN(time) ? formatDate(new Date(offsetedTime), format, messages) : '');
+  const prevValue = usePrevious(textValue);
+  const [hasFormatErrors, setHasFormatErrors] = useState(false);
+  useEffect(() => {
+    if (textValue && prevValue && textValue.length > prevValue.length + 1) {
+      setTimeout(() => inputRef.current.setSelectionRange(inputRef.current.value.length + 1, inputRef.current.value.length + 1), 1);
+    }
+  }, [textValue]);
+  const isShortcutsEnabled = !!daysFromNowShortcuts && daysFromNowShortcuts.length > 0 || !!monthsFromNowShortcuts && monthsFromNowShortcuts.length > 0;
+  const setDateToNDaysFromNow = daysFromNow => {
+    const date = new Date(now());
+    date.setUTCDate(date.getUTCDate() + daysFromNow);
+    setFormValue(date.getTime());
+    updateText(date);
+  };
+  const setDateToNMonthsFromNow = monthsFromNow => {
+    const date = new Date(now());
+    date.setUTCMonth(date.getUTCMonth() + monthsFromNow);
+    setFormValue(date.getTime());
+    updateText(date);
+  };
+  const setTextValue = textValue => {
+    const value = formValue === -1 || isNaN(formValue) ? now() : new Date(Number(formValue));
+    const date = parseDate(textValue, value, format, messages);
+    if (isNaN(date.getTime())) {
+      const nextMonth = new Date(value);
+      const closestLeapYear = new Date(value);
+      nextMonth.setUTCMonth(value.getUTCMonth() + 1);
+      closestLeapYear.setUTCFullYear(getClosestNextLeapYear(value.getUTCFullYear()));
+      const nextMonthDate = parseDate(textValue, nextMonth, format, messages);
+      const closestLeapYearDate = parseDate(textValue, closestLeapYear, format, messages);
+      setRawTextValue(textValue);
+      setHasFormatErrors(isNaN(nextMonthDate.getTime()) && isNaN(closestLeapYearDate));
+    } else if (!inRange({
+      min,
+      max
+    }, date)) {
+      setRawTextValue(textValue);
+      setHasFormatErrors(true);
+      setFormValue(-1);
+    } else {
+      setRawTextValue(textValue);
+      setHasFormatErrors(false);
+      setFormValue(date.getTime());
+    }
+  };
+  const updateText = date => {
+    setTextValue(formatDate(date, format, messages));
+    setHasFormatErrors(false);
+  };
+  const setValue = value => {
+    setFormValue(value);
+    updateText(new Date(value));
+  };
+  const confirmValue = () => {
+    popup.close();
+    if (!textValue) {
+      setFormValue(undefined);
+      setHasFormatErrors(false);
+    } else {
+      const date = parseDate(textValue, new Date(formValue), format, messages, true);
+      if (isNaN(date.getTime())) {
+        setHasFormatErrors(true);
+        setFormValue(-1);
+      } else {
+        updateText(date);
+      }
+    }
+  };
+  const _onBlur = e => {
+    const currentTarget = e.currentTarget;
+    setTimeout(() => {
+      if (!currentTarget.contains(document.activeElement)) {
+        confirmValue();
+      }
+      callIfFunction(onBlur);
+    }, 1);
+  };
+  const onKeyDown = e => {
+    const isConfirm = e.key === 'Enter';
+    if (Object.keys(KeyMapper()).indexOf(e.key) >= 0 || isConfirm) {
+      if (popup.isOpen) {
+        e.preventDefault();
+        calendarElement.current.keyDown(e);
+      }
+    }
+    if (e.key === 'Escape') {
+      e.stopPropagation();
+      popup.close();
+      const date = new Date(formValue);
+      if (!isNaN(date.getTime())) updateText(date);
+    }
+  };
+  const refocus = e => inputRef.current.focus();
+  const onClick = e => {
+    if (disabled) return;
+    e.stopPropagation();
+    refocus();
+  };
+  const iconClick = e => {
+    e.stopPropagation();
+    if (popup.isOpen) {
+      refocus();
+      popup.close();
+    } else {
+      refocus();
+    }
+  };
+  const stopFocusPropagation = e => e.stopPropagation();
+
+  // const calendarValue = new Date(!isNaN(time) && formValue !== -1 ? offsetedTime : now())
+  const calendarValue = new Date(!isNaN(time) && formValue !== -1 ? offsetedTime : nowTimeZoneAdjusted(timezoneOffset));
+  calendarValue.setUTCHours(0, 0, 0);
+  return /*#__PURE__*/React.createElement(Field, {
+    helpText: helpText,
+    label: label,
+    mandatory: mandatory,
+    onClick: onClick,
+    onFocus: popup.open,
+    onBlur: _onBlur
+  }, /*#__PURE__*/React.createElement(InputAndIconWrapper, null, /*#__PURE__*/React.createElement(TextInput, {
+    raw: true,
+    disabled: disabled,
+    type: getNumberInputType(),
+    tabIndex: tabIndex,
+    ref: inputRef,
+    constraint: formatDateToPattern(format),
+    value: textValue,
+    setValue: setTextValue,
+    placeholder: placeholder,
+    hasErrors: hasErrors || hasFormatErrors,
+    onKeyDown: onKeyDown
+  }), /*#__PURE__*/React.createElement(DatePickerInputIcon, {
+    tabIndex: -1,
+    onFocus: stopFocusPropagation,
+    disabled: disabled,
+    onClick: iconClick,
+    icon: "calendar",
+    className: isShortcutsEnabled ? "hasShortcuts" : ""
+  })), (daysFromNowShortcuts === null || daysFromNowShortcuts === void 0 ? void 0 : daysFromNowShortcuts.length) > 0 || (monthsFromNowShortcuts === null || monthsFromNowShortcuts === void 0 ? void 0 : monthsFromNowShortcuts.length) > 0 ? /*#__PURE__*/React.createElement(ShortcutsWrapper, null, /*#__PURE__*/React.createElement("span", null, "Em:"), daysFromNowShortcuts === null || daysFromNowShortcuts === void 0 ? void 0 : daysFromNowShortcuts.map(daysFromNow => /*#__PURE__*/React.createElement("span", {
+    class: "link",
+    key: "days-from-now-".concat(daysFromNow),
+    onClick: () => setDateToNDaysFromNow(daysFromNow),
+    disabled: disabled
+  }, daysFromNow, " dia", daysFromNow > 1 ? 's' : '')), monthsFromNowShortcuts === null || monthsFromNowShortcuts === void 0 ? void 0 : monthsFromNowShortcuts.map(monthsFromNow => /*#__PURE__*/React.createElement("span", {
+    class: "link",
+    key: "months-from-now".concat(monthsFromNow),
+    onClick: () => setDateToNMonthsFromNow(monthsFromNow),
+    disabled: disabled
+  }, monthsFromNow, " ", monthsFromNow > 1 ? 'meses' : 'mês'))) : null, popup.isOpen && /*#__PURE__*/React.createElement(DatePickerCalendar, {
+    raw: true,
+    min: min,
+    max: max,
+    level: level,
+    weekStartsMonday: weekStartsMonday,
+    messages: messages,
+    ref: calendarElement,
+    updateTransientValue: updateText,
+    refocus: refocus,
+    onSelectDay: popup.toggle,
+    setValue: setValue,
+    value: calendarValue.getTime()
+  }));
+});
+const defaultProps = {
+  format: 'dd/MM/yyyy',
+  min: new Date(now().setUTCFullYear(now().getUTCFullYear() - 100)),
+  max: new Date(now().setUTCFullYear(now().getUTCFullYear() + 100)),
+  weekStartsMonday: false
+};
+class RawDatePickerCalendar extends React.Component {
+  constructor(props) {
+    super(props);
+    this.element = void 0;
+    this.setCurrentDatePlus = (n, type) => () => {
+      const date = new Date(this.state.currentDate.getTime());
+      switch (type) {
+        case CALENDAR_LEVEL_DAY:
+          date.setUTCDate(date.getUTCDate() + n);
+          break;
+        case CALENDAR_LEVEL_MONTH:
+          date.setUTCMonth(date.getUTCMonth() + n);
+          break;
+        case CALENDAR_LEVEL_YEAR:
+          date.setUTCFullYear(date.getUTCFullYear() + n);
+          break;
+      }
+      this.props.updateTransientValue && this.props.updateTransientValue(date);
+      this.setState({
+        currentDate: date
+      });
+    };
+    this.up = () => {
+      this.setState({
+        level: LEVELS[LEVELS.indexOf(this.state.level) + 1]
+      });
+    };
+    this.keyDown = e => {
+      const {
+        level,
+        currentDate
+      } = this.state;
+      const keyMapper = KeyMapper(level);
+      if (keyMapper[e.key]) {
+        e.preventDefault();
+        this.setCurrentDatePlus(keyMapper[e.key], level)();
+      }
+      if (e.key === 'Enter') {
+        e.stopPropagation();
+        e.preventDefault();
+        this.handleChange(currentDate);
+      }
+    };
+    this.handleChange = date => {
+      this.props.setValue(date.getTime());
+      if (this.state.level === CALENDAR_LEVEL_DAY && this.props.onSelectDay) {
+        this.props.onSelectDay();
+      }
+      this.setState({
+        level: LEVELS[Math.max(LEVELS.indexOf(this.state.level) - 1, 0)]
+      });
+    };
+    this.getView = () => {
+      switch (this.state.level) {
+        case CALENDAR_LEVEL_DAY:
+          return /*#__PURE__*/React.createElement(Calendar, _extends({}, this.props, this.state, {
+            handleChange: this.handleChange,
+            changeCurrentDate: this.setCurrentDatePlus,
+            up: this.up
+          }));
+        case CALENDAR_LEVEL_MONTH:
+          return /*#__PURE__*/React.createElement(Months, _extends({}, this.props, this.state, {
+            handleChange: this.handleChange,
+            changeCurrentDate: this.setCurrentDatePlus,
+            up: this.up
+          }));
+        case CALENDAR_LEVEL_YEAR:
+          return /*#__PURE__*/React.createElement(Years, _extends({}, this.props, this.state, {
+            handleChange: this.handleChange,
+            changeCurrentDate: this.setCurrentDatePlus
+          }));
+        default:
+          return null;
+      }
+    };
+    this.setRef = e => {
+      this.element = e;
+    };
+    this.state = {
+      level: this.props.level || CALENDAR_LEVEL_DAY,
+      currentDate: new Date(props.value || now())
+    };
+  }
+  componentDidUpdate(prevProps) {
+    if (prevProps.value !== this.props.value) {
+      this.setState({
+        currentDate: new Date(this.props.value)
+      });
+    }
+  }
+  render() {
+    return /*#__PURE__*/React.createElement("div", {
+      ref: this.setRef,
+      tabIndex: -1,
+      onFocus: this.props.refocus,
+      onKeyDown: this.keyDown
+    }, this.getView());
+  }
+}
+RawDatePickerCalendar.defaultProps = defaultProps;
+const DatePickerCalendar = enhanceInput(RawDatePickerCalendar);
+function now() {
+  const dt = new Date();
+  dt.setUTCHours(0, 0, 0, 0);
+  return dt;
+}
+function nowTimeZoneAdjusted(timezoneOffset) {
+  const timezoneOffsetMilliseconds = timezoneOffset * 3600000; // 3600000 milliseconds in an hour
+  const dt = new Date();
+  dt.setTime(dt.getTime() + timezoneOffsetMilliseconds);
+  dt.setUTCHours(0, 0, 0, 0);
+  return dt;
+}
+function inRange(context, date) {
+  return context.min <= date && context.max >= date;
+}
+const mapDays = (currentDate, dayOffset, fn) => {
+  const month = [];
+  const iter = new Date(currentDate);
+  iter.setUTCDate(1);
+  let startDay = dayOffset + iter.getUTCDate() - iter.getUTCDay();
+  if (startDay > 1 && startDay < 10) {
+    startDay = startDay - 7;
+  }
+  iter.setUTCDate(startDay);
+  for (let week = 0; week < 6; week++) {
+    for (let day = week * 7; day < week * 7 + 7; day++) {
+      month.push(fn(iter, startDay + day, day));
+      iter.setUTCDate(iter.getUTCDate() + 1);
+    }
+  }
+  return month;
+};
+const Calendar = _ref2 => {
+  let {
+    messages,
+    max,
+    min,
+    value,
+    currentDate,
+    weekStartsMonday,
+    changeCurrentDate,
+    handleChange,
+    up
+  } = _ref2;
+  const currentMonth = currentDate.getUTCMonth();
+  const dayOffset = weekStartsMonday ? 1 : 0;
+  const today = now().getTime();
+  const handleDateChange = e => {
+    const date = new Date(currentDate);
+    handleChange(new Date(date.setUTCDate(e.currentTarget.getAttribute('data-day'))));
+  };
+  const previousMonth = getUTCDateBefore(currentDate.getUTCFullYear(), currentDate.getUTCMonth());
+  const nextMonth = getUTCDate(currentDate.getUTCFullYear(), currentDate.getUTCMonth() + 1);
+  return /*#__PURE__*/React.createElement(DatePickerContainer, null, /*#__PURE__*/React.createElement(CalendarHeader, null, /*#__PURE__*/React.createElement(NavigationButton, {
+    disabled: !inRange({
+      min,
+      max
+    }, previousMonth),
+    onClick: changeCurrentDate(-1, CALENDAR_LEVEL_MONTH)
+  }, /*#__PURE__*/React.createElement(Icon, {
+    icon: "arrow-left-line"
+  })), /*#__PURE__*/React.createElement(TitleButton, {
+    onClick: up
+  }, messages('month', currentMonth), " ", currentDate.getUTCFullYear()), /*#__PURE__*/React.createElement(NavigationButton, {
+    disabled: !inRange({
+      min,
+      max
+    }, nextMonth),
+    onClick: changeCurrentDate(1, CALENDAR_LEVEL_MONTH)
+  }, /*#__PURE__*/React.createElement(Icon, {
+    icon: "arrow-right-line"
+  }))), /*#__PURE__*/React.createElement(WeekHeader, null, [0, 1, 2, 3, 4, 5, 6].map(day => /*#__PURE__*/React.createElement("span", {
+    key: day
+  }, messages('day', (day + dayOffset) % 7).slice(0, 3)))), /*#__PURE__*/React.createElement(CalendarContentContainer, null, mapDays(currentDate, dayOffset, (date, day, index) => /*#__PURE__*/React.createElement(DayItem, {
+    index: index,
+    key: date.getTime(),
+    onClick: handleDateChange,
+    "data-day": day,
+    isEdge: date.getUTCMonth() !== currentMonth,
+    isCurrent: date.getTime() === currentDate.getTime(),
+    isSelected: date.getTime() === value,
+    isDisabled: !inRange({
+      max,
+      min
+    }, date),
+    isToday: date.getTime() === today
+  }, date.getUTCDate()))));
+};
+const Months = _ref3 => {
+  let {
+    currentDate,
+    messages,
+    value,
+    changeCurrentDate,
+    handleChange,
+    up,
+    min,
+    max
+  } = _ref3;
+  const currentMonth = currentDate.getUTCMonth();
+  const sameYear = currentDate.getUTCFullYear() === new Date(value).getUTCFullYear();
+  const selectedMonth = sameYear ? currentDate.getUTCMonth() : undefined;
+  const handleMonthChange = e => {
+    const date = new Date(currentDate);
+    handleChange(new Date(date.setUTCMonth(e.currentTarget.getAttribute('data-month'))));
+  };
+  return /*#__PURE__*/React.createElement(DatePickerContainer, null, /*#__PURE__*/React.createElement(CalendarHeader, null, /*#__PURE__*/React.createElement(NavigationButton, {
+    disabled: !inRange({
+      min,
+      max
+    }, getUTCDateBefore(currentDate.getUTCFullYear())),
+    onClick: changeCurrentDate(-1, CALENDAR_LEVEL_YEAR)
+  }, /*#__PURE__*/React.createElement(Icon, {
+    icon: "arrow-left-line"
+  })), /*#__PURE__*/React.createElement(TitleButton, {
+    onClick: up
+  }, currentDate.getUTCFullYear()), /*#__PURE__*/React.createElement(NavigationButton, {
+    disabled: !inRange({
+      min,
+      max
+    }, getUTCDate(currentDate.getUTCFullYear() + 1)),
+    onClick: changeCurrentDate(1, CALENDAR_LEVEL_YEAR)
+  }, /*#__PURE__*/React.createElement(Icon, {
+    icon: "arrow-right-line"
+  }))), /*#__PURE__*/React.createElement(CalendarContentContainer, null, [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11].map(month => /*#__PURE__*/React.createElement(MonthItem, {
+    disabled: !inRange({
+      min,
+      max
+    }, getUTCDate(currentDate.getUTCFullYear(), month)) && !inRange({
+      min,
+      max
+    }, getUTCDateBefore(currentDate.getUTCFullYear(), month + 1)),
+    onClick: handleMonthChange,
+    key: month,
+    "data-month": month,
+    index: month,
+    isCurrent: currentMonth === month,
+    isSelected: selectedMonth === month
+  }, messages('month', month).slice(0, 3)))));
+};
+
+// Given the specified context, produces an HTML string
+// representing months of the year.
+
+function mapYears(currentDate, fn) {
+  const result = [];
+  const year = currentDate.getUTCFullYear();
+  for (let i = 0; i < 4 * 3; i++) {
+    result.push(fn(year - year % 10 - 1 + i, i < 1 || i > 10, i));
+  }
+  return result;
+}
+const Years = _ref4 => {
+  let {
+    value,
+    currentDate,
+    changeCurrentDate,
+    handleChange,
+    min,
+    max
+  } = _ref4;
+  const currentYear = currentDate.getUTCFullYear();
+  const selectedYear = new Date(value).getUTCFullYear();
+  const handleYearChange = e => {
+    const date = new Date(currentDate);
+    handleChange(new Date(date.setUTCFullYear(e.currentTarget.getAttribute('data-year'))));
+  };
+  return /*#__PURE__*/React.createElement(DatePickerContainer, null, /*#__PURE__*/React.createElement(CalendarHeader, null, /*#__PURE__*/React.createElement(NavigationButton, {
+    disabled: !inRange({
+      min,
+      max
+    }, getUTCDateBefore(currentDate.getUTCFullYear())),
+    onClick: changeCurrentDate(-10, CALENDAR_LEVEL_YEAR)
+  }, /*#__PURE__*/React.createElement(Icon, {
+    icon: "arrow-left-line"
+  })), /*#__PURE__*/React.createElement(TitleButton, null, currentYear - currentYear % 10, "-", currentYear - currentYear % 10 + 9), /*#__PURE__*/React.createElement(NavigationButton, {
+    disabled: !inRange({
+      min,
+      max
+    }, getUTCDate(currentDate.getUTCFullYear() + 10)),
+    onClick: changeCurrentDate(10, CALENDAR_LEVEL_YEAR)
+  }, /*#__PURE__*/React.createElement(Icon, {
+    icon: "arrow-right-line"
+  }))), /*#__PURE__*/React.createElement(CalendarContentContainer, null, mapYears(currentDate, (year, outside, i) => /*#__PURE__*/React.createElement(YearItem, {
+    key: year,
+    onClick: handleYearChange,
+    disabled: !inRange({
+      min,
+      max
+    }, getUTCDate(year)) && !inRange({
+      min,
+      max
+    }, getUTCDateBefore(year + 1)),
+    "data-year": year,
+    index: i,
+    isCurrent: year === currentYear,
+    isSelected: year === selectedYear,
+    isEdge: outside
+  }, year))));
+};
+function getClosestNextLeapYear(year) {
+  let y = isNaN(year) ? now().getUTCFullYear() : year;
+  while (!(y % 100 === 0 ? y % 400 === 0 : y % 4 === 0)) {
+    y++;
+  }
+  return y;
+}
+
+export { CALENDAR_LEVEL_DAY, CALENDAR_LEVEL_MONTH, CALENDAR_LEVEL_YEAR, DatePicker };
+//# sourceMappingURL=DatePicker.mjs.map