@startlibs/form 1.1.3 → 1.2.0-rc.1

package/lib-yak/DatePicker.mjs

@@ -0,0 +1,774 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import _extends from '@babel/runtime/helpers/extends';
+import _isFinite from 'lodash/fp/isFinite';
+import { yakDomTag } from '@startlibs/utils/yakDomTag';
+import React, { forwardRef, useRef, useContext, useState, useEffect } from 'react';
+import { styled, css } from '@yak/react';
+import { useEnsureRef, usePopupToggle, StartlibsContext, usePrevious } from '@startlibs/core';
+import { getColor, formatDate, getNumberInputType, formatDateToPattern, insertKeyframes, 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"];
+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];
+
+// Nome fixo do @keyframes preservado: um `keyframes` do styled-components geraria um nome
+// com hash, diferente do atual "datePickerFadeInDown" (quebraria quem lê animationName). Por
+// isso o bloco fica fora de um template styled/css/keyframes, registrado pelo CSSOM (sem
+// nonce) no primeiro render do DatePickerContainer (mesmo padrão de components/src/Loading.jsx).
+const injectDatePickerFadeInDownKeyframes = () => insertKeyframes('datePickerFadeInDown', 'from { opacity: 0; transform: translateY(-10px); pointer-events: none; } to { opacity: 1; transform: none; pointer-events: none; }');
+
+// styled(DatePickerContainerBase) mira num componente, não numa tag: ao contrário do antigo
+// styled.div, o styled-components não filtra prop inválida pra <div> nesse caso. O template
+// abaixo não lê nenhuma prop custom, então repassar tudo com {...props} é seguro.
+const DatePickerContainerBase = /*#__PURE__*/React.forwardRef((props, ref) => {
+  injectDatePickerFadeInDownKeyframes();
+  return /*#__PURE__*/React.createElement("div", _extends({
+    ref: ref
+  }, props));
+});
+const DatePickerContainer = styled(DatePickerContainerBase)`
+  width: 20rem;
+  position: absolute;
+  z-index: 100;
+  background-color: white;
+  border-radius: 5px;
+  border: 1px solid ${__yakProps => {
+  const v = getColor('gray210');
+  return typeof v === 'function' ? v(__yakProps) : v;
+}};
+  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;
+    @media (max-width: 600px) {
+      width: 2.5rem;
+    }
+  }
+`;
+const CalendarHeader = styled(yakDomTag("div"))`
+  display: flex;
+  padding: 0.5rem;
+  align-items: center;
+`;
+const CalendarContentContainer = styled(yakDomTag("div"))`
+  padding: 0 0.5rem 0.5rem 0.5rem;
+  display: flex;  
+  flex-wrap: wrap;
+  justify-content: space-around;
+`;
+const WeekHeader = styled(CalendarContentContainer)`
+  font-size: 12px;
+  font-weight: 600;
+  cursor: default;
+  span {
+    width: 2.5rem;
+  }
+`;
+const CalendarClickable = styled(yakDomTag("a"))`
+  &:hover, &:focus {
+    background-color: rgba(0,0,0,0.1);
+    cursor: pointer;
+  }
+`;
+const TitleButton = styled(CalendarClickable)`
+  font-size: 16px;
+  font-weight: 600;
+  flex-grow: 1;
+  border-radius: 4px;
+  line-height: 3rem;
+`;
+const NavigationButton = styled(CalendarClickable)`
+  font-size: 21px;
+  width: 3rem;
+  text-align: center;
+  border-radius: 4px;
+  height: 3rem;
+  ${Icon} {
+    line-height: 3rem;
+  }
+`;
+const CalendarContent = styled(CalendarClickable)`
+  line-height: 2.25rem;
+  flex-grow: 1;
+  display: inline-block;
+  border-radius: 5px;
+  margin-top: 0.25rem;
+  margin-left: 0.25rem;
+  ${__yakProps => __yakProps["isEdge"] && css`color: rgba(0,0,0,0.4);`}
+  ${__yakProps => __yakProps["isSelected"] && css`box-shadow: inset 0 0 0 1px ${__yakProps => {
+  const v = getColor('gray210');
+  return typeof v === 'function' ? v(__yakProps) : v;
+}};`}
+  ${__yakProps => __yakProps["isDisabled"] && css`pointer-events: none;
+   opacity: 0.5;`}  
+  ${__yakProps => __yakProps["isCurrent"] && css`
+    background: ${__yakProps => {
+  const v = getColor('main');
+  return typeof v === 'function' ? v(__yakProps) : v;
+}};
+    color: #FFF;
+    &:hover {
+      background-color: ${props => darken(0.075, getColor('main')(props))};
+    }
+    ${__yakProps => __yakProps["isSelected"] && css`box-shadow: none;`}
+  `}
+`;
+const DayItem = styled(CalendarContent)`
+  ${props => props.index % 7 === 0 && css`margin-left:0;`}
+  flex-basis: 12%;
+`;
+const MonthItem = styled(CalendarContent)`
+  ${props => props.index % 3 === 0 && css`margin-left:0;`}
+  flex-basis: 30%;
+`;
+const YearItem = styled(CalendarContent)`
+  ${props => props.index % 3 === 0 && css`margin-left:0;`}
+  flex-basis: 30%;
+`;
+const DatePickerInputIcon = styled(Icon)`
+  position: absolute;
+  outline: none;
+  bottom: 0;
+  font-size: 21px;
+  line-height: 3rem;
+  right: 0;
+  width: 2rem;
+  cursor: pointer;
+  color: ${__yakProps => {
+  const v = getColor('gray150');
+  return typeof v === 'function' ? v(__yakProps) : v;
+}};
+  &:hover {
+    color: ${__yakProps => {
+  const v = getColor('main');
+  return typeof v === 'function' ? v(__yakProps) : v;
+}};
+  }
+  display: none;
+  @supports (flex-wrap: wrap) {
+    display: block;
+  }
+  ${props => props.disabled && css`pointer-events: none;`}
+  @media (max-width: 600px) {
+    line-height: 42px;
+    width: 2.25rem;
+  }
+`;
+styled(Icon)`
+  color: ${__yakProps => {
+  const v = getColor('gray90');
+  return typeof v === 'function' ? v(__yakProps) : v;
+}};
+  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: ${__yakProps => {
+  const v = getColor('alert');
+  return typeof v === 'function' ? v(__yakProps) : v;
+}};
+  }
+`;
+const InputAndIconWrapper = styled(yakDomTag("div"))`
+  position: relative;
+`;
+const ShortcutsWrapper = styled(yakDomTag("div"))`
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  padding: 0.5rem 0.25rem 0;
+  color: ${__yakProps => {
+  const v = getColor('gray150');
+  return typeof v === 'function' ? v(__yakProps) : v;
+}};
+  
+  .link {
+    cursor: pointer;
+    font-weight: 600;
+    text-decoration: underline;
+
+    @media (max-width: 600px) {
+      font-size: 13px;  
+    }
+
+    &:hover {
+      color: ${__yakProps => {
+  const v = getColor('main');
+  return typeof v === 'function' ? v(__yakProps) : v;
+}};
+    }
+
+    ${__yakProps => __yakProps["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-${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${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