@acusti/date-picker 0.10.1 → 0.11.0

package/dist/index.js

@@ -1,4 +1,868 @@
-export { default as DatePicker } from './DatePicker.js';
-export { default as MonthCalendar } from './MonthCalendar.js';
-export * from './utils.js';
-//# sourceMappingURL=index.js.map
+import { jsx, jsxs } from "react/jsx-runtime";
+import { c } from "react/compiler-runtime";
+import { Style } from "@acusti/styling";
+import clsx from "clsx";
+import * as React from "react";
+const ROOT_CLASS_NAME$1 = "uktmonthcalendar";
+const STYLES$1 = `
+.${ROOT_CLASS_NAME$1} {
+    display: flex;
+    flex-direction: column;
+    flex: 1 1 auto;
+    box-sizing: border-box;
+    max-width: 325px;
+}
+
+.${ROOT_CLASS_NAME$1}-month-title {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex: 0 0 auto;
+    box-sizing: border-box;
+    padding-bottom: 25px;
+}
+
+h3.${ROOT_CLASS_NAME$1}-month-title-text {
+    font-size: 18px;
+    line-height: 23px;
+    font-weight: 600;
+    color: #000;
+    margin: 0px;
+    text-align: center;
+}
+
+.${ROOT_CLASS_NAME$1}-month-week {
+    flex: 0 0 auto;
+    display: grid;
+    grid-column-gap: 0px;
+    grid-template-columns: repeat(auto-fit, minmax(46px, 1fr));
+    grid-auto-flow: dense;
+    box-sizing: border-box;
+    padding-bottom: 12px;
+}
+
+.${ROOT_CLASS_NAME$1}-month-week .week-day-item {
+    flex: 1 1 auto;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.${ROOT_CLASS_NAME$1}-month-week span.week-day-item-text {
+    text-align: center;
+    font-size: 13px;
+    line-height: 21px;
+    margin: 0px;
+    color: #9a9a9a;
+}
+
+.${ROOT_CLASS_NAME$1}-month-days {
+    flex: 1 1 auto;
+    display: flex;
+    flex-direction: column;
+}
+
+.${ROOT_CLASS_NAME$1}-month-row {
+    flex: 1 1 auto;
+    display: grid;
+    grid-column-gap: 0px;
+    grid-template-columns: repeat(auto-fit, minmax(46px, 1fr));
+    grid-auto-flow: dense;
+    margin-bottom: 1px;
+}
+
+.${ROOT_CLASS_NAME$1}-month-day-item {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+    height: 46px;
+    width: 46px;
+    cursor: pointer;
+    border: none;
+    background-color: transparent;
+}
+
+.${ROOT_CLASS_NAME$1}-month-day-item:disabled {
+    cursor: auto;
+}
+
+.${ROOT_CLASS_NAME$1}-month-day-item.is-selected {
+    background-color: #f8f8f8;
+}
+
+.${ROOT_CLASS_NAME$1}-month-day-item.start-date {
+    background-color: #f8f8f8;
+    border-top-left-radius: 50%;
+    border-bottom-left-radius: 50%;
+}
+
+.${ROOT_CLASS_NAME$1}-month-day-item.start-date:after {
+    background-color: #000;
+    opacity: 1;
+    visibility: visible;
+}
+.${ROOT_CLASS_NAME$1}-month-day-item.start-date span.month-day-item-text {
+    color: #fff;
+}
+
+.${ROOT_CLASS_NAME$1}-month-day-item.end-date {
+    background-color: #f8f8f8;
+    border-top-right-radius: 50%;
+    border-bottom-right-radius: 50%;
+}
+
+.${ROOT_CLASS_NAME$1}-month-day-item.end-date:after {
+    background-color: #000;
+    opacity: 1;
+    visibility: visible;
+}
+.${ROOT_CLASS_NAME$1}-month-day-item.end-date span.month-day-item-text {
+    color: #fff;
+}
+
+.${ROOT_CLASS_NAME$1}-month-day-item:hover:after {
+    opacity: 1;
+    visibility: visible;
+}
+
+.${ROOT_CLASS_NAME$1}-month-day-item:after {
+    content: "";
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    pointer-events: none;
+    border-radius: 50%;
+    border: 1px solid #000;
+    width: 43px;
+    height: 43px;
+    transition: opacity 0.25s ease-in-out;
+    opacity: 0;
+    visibility: hidden;
+}
+
+.${ROOT_CLASS_NAME$1}-month-day-item.is-empty:after {
+    content: none;
+}
+
+.${ROOT_CLASS_NAME$1}-month-day-item span.month-day-item-text {
+    text-align: center;
+    font-size: 13px;
+    line-height: 21px;
+    margin: 0px;
+    color: #000;
+    position: relative;
+    z-index: 1;
+}
+`;
+const START_YEAR = 1970;
+const MONTH_NAMES = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
+const getYearFromDate = (date, asUTC) => (asUTC ? date.getUTCFullYear() : date.getFullYear()) - START_YEAR;
+const getMonthFromDate = (date, asUTC) => {
+  const yearAsMonths = getYearFromDate(date, asUTC) * 12;
+  return yearAsMonths + (asUTC ? date.getUTCMonth() : date.getMonth());
+};
+const getYearFromMonth = (month) => Math.floor(month / 12) + START_YEAR;
+const getMonthNameFromMonth = (month) => {
+  let index = month % 12;
+  if (Number.isNaN(index)) return "";
+  if (index < 0) index = 12 + index;
+  return MONTH_NAMES[index];
+};
+const getMonthAbbreviationFromMonth = (month) => {
+  const monthName = getMonthNameFromMonth(month);
+  if (monthName === "September") return "Sept";
+  return monthName.substring(0, 3);
+};
+const getDateFromMonthAndDay = (month, day, asUTC) => {
+  const monthIn12 = month < 0 ? (12 - Math.abs(month % 12)) % 12 : month % 12;
+  const year = getYearFromMonth(month);
+  return asUTC ? new Date(Date.UTC(year, monthIn12, day)) : new Date(year, monthIn12, day);
+};
+const getLastDateFromMonth = (month, asUTC) => {
+  return getDateFromMonthAndDay(month + 1, 0, asUTC);
+};
+const {
+  Fragment: Fragment$1
+} = React;
+const DAYS = Array(7).fill(null);
+function MonthCalendar(t0) {
+  const $ = c(56);
+  let {
+    className,
+    dateEnd,
+    dateEndPreview,
+    dateStart,
+    isRange,
+    month,
+    onChange,
+    onChangeEndPreview,
+    title
+  } = t0;
+  const year = getYearFromMonth(month);
+  title = title ?? `${getMonthNameFromMonth(month)} ${year}`;
+  let firstDay;
+  let t1;
+  let t2;
+  let totalDays;
+  if ($[0] !== month) {
+    const firstDate = getDateFromMonthAndDay(month, 1);
+    const lastDate = getLastDateFromMonth(month);
+    totalDays = lastDate.getDate();
+    firstDay = firstDate.getDay();
+    t2 = 7;
+    t1 = lastDate.getDay();
+    $[0] = month;
+    $[1] = firstDay;
+    $[2] = t1;
+    $[3] = t2;
+    $[4] = totalDays;
+  } else {
+    firstDay = $[1];
+    t1 = $[2];
+    t2 = $[3];
+    totalDays = $[4];
+  }
+  const spacesAfterLastDay = t2 - t1 % 7;
+  const daySpaces = totalDays + firstDay + spacesAfterLastDay;
+  let t3;
+  if ($[5] !== dateEnd || $[6] !== dateEndPreview || $[7] !== dateStart || $[8] !== month || $[9] !== totalDays) {
+    let t42;
+    if ($[11] !== month || $[12] !== totalDays) {
+      t42 = (acc, date, index) => {
+        if (date != null && !(date instanceof Date)) {
+          date = new Date(date);
+        }
+        if (date == null || Number.isNaN(date.getTime())) {
+          return acc;
+        }
+        const dateMonth = getMonthFromDate(date);
+        if (dateMonth < month) {
+          acc[index] = -1;
+        } else {
+          if (dateMonth > month) {
+            acc[index] = totalDays + 1;
+          } else {
+            acc[index] = date.getDate();
+          }
+        }
+        if (index === 1) {
+          const startDay = acc[index - 1];
+          const endDay = acc[index];
+          if (startDay != null && endDay != null && startDay > endDay) {
+            acc[index - 1] = endDay;
+            acc[index] = startDay;
+          }
+        }
+        return acc;
+      };
+      $[11] = month;
+      $[12] = totalDays;
+      $[13] = t42;
+    } else {
+      t42 = $[13];
+    }
+    t3 = [dateStart, dateEnd, dateEndPreview].reduce(t42, [null, null, null]);
+    $[5] = dateEnd;
+    $[6] = dateEndPreview;
+    $[7] = dateStart;
+    $[8] = month;
+    $[9] = totalDays;
+    $[10] = t3;
+  } else {
+    t3 = $[10];
+  }
+  const [dateRangeStartDay, dateRangeEndDay, dateRangeEndPreviewDay] = t3;
+  let t4;
+  if ($[14] !== onChange) {
+    t4 = (event) => {
+      const {
+        date: date_0
+      } = event.currentTarget.dataset;
+      if (date_0 && onChange) {
+        onChange(date_0);
+      }
+    };
+    $[14] = onChange;
+    $[15] = t4;
+  } else {
+    t4 = $[15];
+  }
+  const handleClickDay = t4;
+  let t5;
+  if ($[16] !== isRange || $[17] !== onChangeEndPreview) {
+    t5 = (event_0) => {
+      if (isRange && onChangeEndPreview) {
+        const {
+          date: date_1
+        } = event_0.currentTarget.dataset;
+        if (date_1) {
+          onChangeEndPreview(date_1);
+        }
+      }
+    };
+    $[16] = isRange;
+    $[17] = onChangeEndPreview;
+    $[18] = t5;
+  } else {
+    t5 = $[18];
+  }
+  const handleMouseEnterDay = t5;
+  let t6;
+  if ($[19] === Symbol.for("react.memo_cache_sentinel")) {
+    t6 = /* @__PURE__ */ jsx(Style, { href: "@acusti/date-picker/MonthCalendar", children: STYLES$1 });
+    $[19] = t6;
+  } else {
+    t6 = $[19];
+  }
+  let t7;
+  if ($[20] !== className) {
+    t7 = clsx(ROOT_CLASS_NAME$1, className);
+    $[20] = className;
+    $[21] = t7;
+  } else {
+    t7 = $[21];
+  }
+  let t8;
+  if ($[22] !== title) {
+    t8 = /* @__PURE__ */ jsx("div", { className: `${ROOT_CLASS_NAME$1}-month-title`, children: /* @__PURE__ */ jsx("h3", { className: `${ROOT_CLASS_NAME$1}-month-title-text`, children: title }) });
+    $[22] = title;
+    $[23] = t8;
+  } else {
+    t8 = $[23];
+  }
+  let t9;
+  if ($[24] === Symbol.for("react.memo_cache_sentinel")) {
+    t9 = /* @__PURE__ */ jsx("div", { className: "week-day-item", children: /* @__PURE__ */ jsx("span", { className: "week-day-item-text", children: "Su" }) });
+    $[24] = t9;
+  } else {
+    t9 = $[24];
+  }
+  let t10;
+  if ($[25] === Symbol.for("react.memo_cache_sentinel")) {
+    t10 = /* @__PURE__ */ jsx("div", { className: "week-day-item", children: /* @__PURE__ */ jsx("span", { className: "week-day-item-text", children: "Mo" }) });
+    $[25] = t10;
+  } else {
+    t10 = $[25];
+  }
+  let t11;
+  if ($[26] === Symbol.for("react.memo_cache_sentinel")) {
+    t11 = /* @__PURE__ */ jsx("div", { className: "week-day-item", children: /* @__PURE__ */ jsx("span", { className: "week-day-item-text", children: "Tu" }) });
+    $[26] = t11;
+  } else {
+    t11 = $[26];
+  }
+  let t12;
+  if ($[27] === Symbol.for("react.memo_cache_sentinel")) {
+    t12 = /* @__PURE__ */ jsx("div", { className: "week-day-item", children: /* @__PURE__ */ jsx("span", { className: "week-day-item-text", children: "We" }) });
+    $[27] = t12;
+  } else {
+    t12 = $[27];
+  }
+  let t13;
+  if ($[28] === Symbol.for("react.memo_cache_sentinel")) {
+    t13 = /* @__PURE__ */ jsx("div", { className: "week-day-item", children: /* @__PURE__ */ jsx("span", { className: "week-day-item-text", children: "Th" }) });
+    $[28] = t13;
+  } else {
+    t13 = $[28];
+  }
+  let t14;
+  if ($[29] === Symbol.for("react.memo_cache_sentinel")) {
+    t14 = /* @__PURE__ */ jsx("div", { className: "week-day-item", children: /* @__PURE__ */ jsx("span", { className: "week-day-item-text", children: "Fr" }) });
+    $[29] = t14;
+  } else {
+    t14 = $[29];
+  }
+  let t15;
+  if ($[30] === Symbol.for("react.memo_cache_sentinel")) {
+    t15 = /* @__PURE__ */ jsxs("div", { className: `${ROOT_CLASS_NAME$1}-month-week`, children: [
+      t9,
+      t10,
+      t11,
+      t12,
+      t13,
+      t14,
+      /* @__PURE__ */ jsx("div", { className: "week-day-item", children: /* @__PURE__ */ jsx("span", { className: "week-day-item-text", children: "Sa" }) })
+    ] });
+    $[30] = t15;
+  } else {
+    t15 = $[30];
+  }
+  const t16 = Math.floor(daySpaces / 7);
+  let t17;
+  if ($[31] !== dateRangeEndDay || $[32] !== dateRangeEndPreviewDay || $[33] !== dateRangeStartDay || $[34] !== firstDay || $[35] !== handleClickDay || $[36] !== handleMouseEnterDay || $[37] !== month || $[38] !== t16 || $[39] !== totalDays) {
+    let t182;
+    if ($[41] !== dateRangeEndDay || $[42] !== dateRangeEndPreviewDay || $[43] !== dateRangeStartDay || $[44] !== firstDay || $[45] !== handleClickDay || $[46] !== handleMouseEnterDay || $[47] !== month || $[48] !== totalDays) {
+      t182 = (_, weekIndex) => /* @__PURE__ */ jsx("div", { className: `${ROOT_CLASS_NAME$1}-month-row`, children: DAYS.map((__, dayIndex) => {
+        dayIndex = dayIndex + weekIndex * 7;
+        const dayNumber = dayIndex - firstDay + 1;
+        const isEmpty = dayNumber < 1 || dayNumber > totalDays;
+        const date_2 = isEmpty ? null : getDateFromMonthAndDay(month, dayNumber);
+        const isAfterDateRangeStart = dateRangeStartDay != null && dayNumber > dateRangeStartDay;
+        const isBeforeDateRangeEnd = dateRangeEndDay == null && dateRangeEndPreviewDay != null && dayNumber < dateRangeEndPreviewDay || dateRangeEndDay != null && dayNumber < dateRangeEndDay;
+        return /* @__PURE__ */ jsx("button", { className: clsx(`${ROOT_CLASS_NAME$1}-month-day-item`, {
+          "end-date": !isEmpty && dayNumber === dateRangeEndDay,
+          "is-empty": isEmpty,
+          "is-selected": !isEmpty && isAfterDateRangeStart && isBeforeDateRangeEnd,
+          "start-date": !isEmpty && dayNumber === dateRangeStartDay
+        }), "data-date": date_2 == null ? void 0 : date_2.toISOString(), disabled: isEmpty, onClick: handleClickDay, onMouseEnter: handleMouseEnterDay, type: "button", children: isEmpty ? null : /* @__PURE__ */ jsx("span", { className: "month-day-item-text", children: dayNumber }) }, `MonthDayItem-${dayNumber}`);
+      }) }, `MonthRow-${weekIndex}`);
+      $[41] = dateRangeEndDay;
+      $[42] = dateRangeEndPreviewDay;
+      $[43] = dateRangeStartDay;
+      $[44] = firstDay;
+      $[45] = handleClickDay;
+      $[46] = handleMouseEnterDay;
+      $[47] = month;
+      $[48] = totalDays;
+      $[49] = t182;
+    } else {
+      t182 = $[49];
+    }
+    t17 = Array(t16).fill(null).map(t182);
+    $[31] = dateRangeEndDay;
+    $[32] = dateRangeEndPreviewDay;
+    $[33] = dateRangeStartDay;
+    $[34] = firstDay;
+    $[35] = handleClickDay;
+    $[36] = handleMouseEnterDay;
+    $[37] = month;
+    $[38] = t16;
+    $[39] = totalDays;
+    $[40] = t17;
+  } else {
+    t17 = $[40];
+  }
+  let t18;
+  if ($[50] !== t17) {
+    t18 = /* @__PURE__ */ jsx("div", { className: `${ROOT_CLASS_NAME$1}-month-days`, children: t17 });
+    $[50] = t17;
+    $[51] = t18;
+  } else {
+    t18 = $[51];
+  }
+  let t19;
+  if ($[52] !== t18 || $[53] !== t7 || $[54] !== t8) {
+    t19 = /* @__PURE__ */ jsxs(Fragment$1, { children: [
+      t6,
+      /* @__PURE__ */ jsxs("div", { className: t7, children: [
+        t8,
+        t15,
+        t18
+      ] })
+    ] });
+    $[52] = t18;
+    $[53] = t7;
+    $[54] = t8;
+    $[55] = t19;
+  } else {
+    t19 = $[55];
+  }
+  return t19;
+}
+const ROOT_CLASS_NAME = "uktdatepicker";
+const STYLES = `
+.${ROOT_CLASS_NAME} {
+    display: flex;
+    box-sizing: border-box;
+    padding: 40px 60px 60px;
+    flex: 1 1 auto;
+    position: relative;
+    max-width: 450px;
+}
+
+.${ROOT_CLASS_NAME}.two-up {
+    max-width: 820px;
+}
+
+.${ROOT_CLASS_NAME}-range-arrow-wrap {
+    position: absolute;
+    top: 30px;
+    left: 0px;
+    display: flex;
+    justify-content: space-between;
+    height: 0px;
+    width: 100%;
+    padding: 0px 60px;
+    box-sizing: border-box;
+}
+
+.${ROOT_CLASS_NAME}-range-arrow {
+    width: 35px;
+    height: 35px;
+    text-align: center;
+    cursor: pointer;
+}
+
+.${ROOT_CLASS_NAME}-range-arrow.disabled {
+    color: #ccc;
+    cursor: default;
+}
+
+.${ROOT_CLASS_NAME}-range-arrow:active {
+    transform: translateY(1px);
+}
+
+.${ROOT_CLASS_NAME}-range-arrow.left-arrow:after,
+.${ROOT_CLASS_NAME}-range-arrow.right-arrow:after {
+    content: "‹";
+    font-size: 24px;
+    line-height: 35px;
+    font-weight: bold;
+}
+
+.${ROOT_CLASS_NAME}-range-arrow.right-arrow:after {
+    content: "›";
+}
+
+.${ROOT_CLASS_NAME}-month-container {
+    display: flex;
+    flex: 1 1 auto;
+    justify-content: space-between;
+}
+`;
+const {
+  Fragment,
+  useEffect,
+  useRef,
+  useState
+} = React;
+const getAbbreviatedMonthTitle = (month) => `${getMonthAbbreviationFromMonth(month)} ${getYearFromMonth(month)}`;
+function DatePicker(t0) {
+  const $ = c(79);
+  let {
+    className,
+    dateEnd: _dateEnd,
+    dateStart: _dateStart,
+    initialMonth,
+    isRange: _isRange,
+    isTwoUp,
+    monthLimitFirst,
+    monthLimitLast: _monthLimitLast,
+    onChange,
+    showEndInitially,
+    useMonthAbbreviations
+  } = t0;
+  const isRange = _isRange ?? _dateEnd != null;
+  const monthLimitLast = isTwoUp && _monthLimitLast != null ? _monthLimitLast - 1 : _monthLimitLast;
+  let t1;
+  if ($[0] !== _dateEnd) {
+    t1 = _dateEnd != null && typeof _dateEnd !== "string" ? new Date(_dateEnd).toISOString() : _dateEnd;
+    $[0] = _dateEnd;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  const dateEndFromProps = t1;
+  let t2;
+  if ($[2] !== _dateStart) {
+    t2 = _dateStart != null && typeof _dateStart !== "string" ? new Date(_dateStart).toISOString() : _dateStart;
+    $[2] = _dateStart;
+    $[3] = t2;
+  } else {
+    t2 = $[3];
+  }
+  const dateStartFromProps = t2;
+  const [dateEnd, setDateEnd] = useState(dateEndFromProps ?? null);
+  const [dateStart, setDateStart] = useState(dateStartFromProps ?? null);
+  const updatingDateEndRef = useRef(false);
+  let t3;
+  if ($[4] !== dateEndFromProps || $[5] !== setDateEnd) {
+    t3 = () => {
+      if (dateEndFromProps == null) {
+        return;
+      }
+      setDateEnd(dateEndFromProps);
+    };
+    $[4] = dateEndFromProps;
+    $[5] = setDateEnd;
+    $[6] = t3;
+  } else {
+    t3 = $[6];
+  }
+  let t4;
+  if ($[7] !== dateEndFromProps) {
+    t4 = [dateEndFromProps];
+    $[7] = dateEndFromProps;
+    $[8] = t4;
+  } else {
+    t4 = $[8];
+  }
+  useEffect(t3, t4);
+  let t5;
+  if ($[9] !== dateStartFromProps || $[10] !== setDateStart) {
+    t5 = () => {
+      if (dateStartFromProps == null) {
+        return;
+      }
+      setDateStart(dateStartFromProps);
+    };
+    $[9] = dateStartFromProps;
+    $[10] = setDateStart;
+    $[11] = t5;
+  } else {
+    t5 = $[11];
+  }
+  let t6;
+  if ($[12] !== dateStartFromProps) {
+    t6 = [dateStartFromProps];
+    $[12] = dateStartFromProps;
+    $[13] = t6;
+  } else {
+    t6 = $[13];
+  }
+  useEffect(t5, t6);
+  if (initialMonth == null) {
+    const useDateEnd = dateStart == null || Boolean(showEndInitially && dateEnd);
+    const initialDate = useDateEnd ? dateEnd : dateStart;
+    let t72;
+    if ($[14] !== initialDate) {
+      t72 = getMonthFromDate(initialDate == null ? /* @__PURE__ */ new Date() : new Date(initialDate));
+      $[14] = initialDate;
+      $[15] = t72;
+    } else {
+      t72 = $[15];
+    }
+    initialMonth = t72;
+    if (useDateEnd && isTwoUp) {
+      initialMonth = initialMonth - 1;
+    }
+  }
+  const [dateEndPreview, setDateEndPreview] = useState(null);
+  const [month, setMonth] = useState(initialMonth);
+  const delta = isTwoUp ? 2 : 1;
+  let t7;
+  if ($[16] !== delta || $[17] !== monthLimitFirst || $[18] !== setMonth) {
+    t7 = () => {
+      setMonth((existingMonth) => Math.max(existingMonth - delta, monthLimitFirst ?? -Infinity));
+    };
+    $[16] = delta;
+    $[17] = monthLimitFirst;
+    $[18] = setMonth;
+    $[19] = t7;
+  } else {
+    t7 = $[19];
+  }
+  const handleClickLeftArrow = t7;
+  let t8;
+  if ($[20] !== delta || $[21] !== monthLimitLast || $[22] !== setMonth) {
+    t8 = () => {
+      setMonth((existingMonth_0) => Math.min(existingMonth_0 + delta, monthLimitLast ?? Infinity));
+    };
+    $[20] = delta;
+    $[21] = monthLimitLast;
+    $[22] = setMonth;
+    $[23] = t8;
+  } else {
+    t8 = $[23];
+  }
+  const handleClickRightArrow = t8;
+  let t9;
+  if ($[24] !== dateEnd || $[25] !== dateStart || $[26] !== isRange || $[27] !== onChange || $[28] !== setDateEnd || $[29] !== setDateStart) {
+    t9 = (date) => {
+      if (isRange && dateStart != null && (updatingDateEndRef.current || dateEnd == null)) {
+        if (date < dateStart) {
+          setDateStart(date);
+          setDateEnd(dateStart);
+          onChange({
+            dateEnd: dateStart,
+            dateStart: date
+          });
+        } else {
+          setDateEnd(date);
+          onChange({
+            dateEnd: date,
+            dateStart
+          });
+        }
+        updatingDateEndRef.current = false;
+      } else {
+        setDateStart(date);
+        setDateEnd(null);
+        if (isRange) {
+          onChange({
+            dateEnd: null,
+            dateStart: date
+          });
+          updatingDateEndRef.current = true;
+        } else {
+          onChange({
+            dateStart: date
+          });
+        }
+      }
+    };
+    $[24] = dateEnd;
+    $[25] = dateStart;
+    $[26] = isRange;
+    $[27] = onChange;
+    $[28] = setDateEnd;
+    $[29] = setDateStart;
+    $[30] = t9;
+  } else {
+    t9 = $[30];
+  }
+  const handleChange = t9;
+  let t10;
+  if ($[31] !== setDateEndPreview) {
+    t10 = (date_0) => {
+      setDateEndPreview(date_0);
+    };
+    $[31] = setDateEndPreview;
+    $[32] = t10;
+  } else {
+    t10 = $[32];
+  }
+  const handleChangeEndPreview = t10;
+  let t11;
+  if ($[33] === Symbol.for("react.memo_cache_sentinel")) {
+    t11 = /* @__PURE__ */ jsx(Style, { href: "@acusti/date-picker/DatePicker", children: STYLES });
+    $[33] = t11;
+  } else {
+    t11 = $[33];
+  }
+  let t12;
+  if ($[34] !== className || $[35] !== isTwoUp) {
+    t12 = clsx(ROOT_CLASS_NAME, className, {
+      "two-up": isTwoUp
+    });
+    $[34] = className;
+    $[35] = isTwoUp;
+    $[36] = t12;
+  } else {
+    t12 = $[36];
+  }
+  const t13 = monthLimitFirst != null && month <= monthLimitFirst;
+  let t14;
+  if ($[37] !== t13) {
+    t14 = clsx(`${ROOT_CLASS_NAME}-range-arrow left-arrow`, {
+      disabled: t13
+    });
+    $[37] = t13;
+    $[38] = t14;
+  } else {
+    t14 = $[38];
+  }
+  let t15;
+  if ($[39] !== handleClickLeftArrow || $[40] !== t14) {
+    t15 = /* @__PURE__ */ jsx("div", { className: t14, onClick: handleClickLeftArrow });
+    $[39] = handleClickLeftArrow;
+    $[40] = t14;
+    $[41] = t15;
+  } else {
+    t15 = $[41];
+  }
+  const t16 = monthLimitLast != null && month >= monthLimitLast;
+  let t17;
+  if ($[42] !== t16) {
+    t17 = clsx(`${ROOT_CLASS_NAME}-range-arrow right-arrow`, {
+      disabled: t16
+    });
+    $[42] = t16;
+    $[43] = t17;
+  } else {
+    t17 = $[43];
+  }
+  let t18;
+  if ($[44] !== handleClickRightArrow || $[45] !== t17) {
+    t18 = /* @__PURE__ */ jsx("div", { className: t17, onClick: handleClickRightArrow });
+    $[44] = handleClickRightArrow;
+    $[45] = t17;
+    $[46] = t18;
+  } else {
+    t18 = $[46];
+  }
+  let t19;
+  if ($[47] !== t15 || $[48] !== t18) {
+    t19 = /* @__PURE__ */ jsxs("div", { className: `${ROOT_CLASS_NAME}-range-arrow-wrap`, children: [
+      t15,
+      t18
+    ] });
+    $[47] = t15;
+    $[48] = t18;
+    $[49] = t19;
+  } else {
+    t19 = $[49];
+  }
+  let t20;
+  if ($[50] !== month || $[51] !== useMonthAbbreviations) {
+    t20 = useMonthAbbreviations ? getAbbreviatedMonthTitle(month) : void 0;
+    $[50] = month;
+    $[51] = useMonthAbbreviations;
+    $[52] = t20;
+  } else {
+    t20 = $[52];
+  }
+  let t21;
+  if ($[53] !== dateEnd || $[54] !== dateEndPreview || $[55] !== dateStart || $[56] !== handleChange || $[57] !== handleChangeEndPreview || $[58] !== isRange || $[59] !== month || $[60] !== t20) {
+    t21 = /* @__PURE__ */ jsx(MonthCalendar, { dateEnd, dateEndPreview, dateStart, isRange, month, onChange: handleChange, onChangeEndPreview: handleChangeEndPreview, title: t20 });
+    $[53] = dateEnd;
+    $[54] = dateEndPreview;
+    $[55] = dateStart;
+    $[56] = handleChange;
+    $[57] = handleChangeEndPreview;
+    $[58] = isRange;
+    $[59] = month;
+    $[60] = t20;
+    $[61] = t21;
+  } else {
+    t21 = $[61];
+  }
+  let t22;
+  if ($[62] !== dateEnd || $[63] !== dateEndPreview || $[64] !== dateStart || $[65] !== handleChange || $[66] !== handleChangeEndPreview || $[67] !== isRange || $[68] !== isTwoUp || $[69] !== month || $[70] !== useMonthAbbreviations) {
+    t22 = isTwoUp ? /* @__PURE__ */ jsx(MonthCalendar, { dateEnd, dateEndPreview, dateStart, isRange, month: month + 1, onChange: handleChange, onChangeEndPreview: handleChangeEndPreview, title: useMonthAbbreviations ? getAbbreviatedMonthTitle(month + 1) : void 0 }) : null;
+    $[62] = dateEnd;
+    $[63] = dateEndPreview;
+    $[64] = dateStart;
+    $[65] = handleChange;
+    $[66] = handleChangeEndPreview;
+    $[67] = isRange;
+    $[68] = isTwoUp;
+    $[69] = month;
+    $[70] = useMonthAbbreviations;
+    $[71] = t22;
+  } else {
+    t22 = $[71];
+  }
+  let t23;
+  if ($[72] !== t21 || $[73] !== t22) {
+    t23 = /* @__PURE__ */ jsxs("div", { className: `${ROOT_CLASS_NAME}-month-container`, children: [
+      t21,
+      t22
+    ] });
+    $[72] = t21;
+    $[73] = t22;
+    $[74] = t23;
+  } else {
+    t23 = $[74];
+  }
+  let t24;
+  if ($[75] !== t12 || $[76] !== t19 || $[77] !== t23) {
+    t24 = /* @__PURE__ */ jsxs(Fragment, { children: [
+      t11,
+      /* @__PURE__ */ jsxs("div", { className: t12, children: [
+        t19,
+        t23
+      ] })
+    ] });
+    $[75] = t12;
+    $[76] = t19;
+    $[77] = t23;
+    $[78] = t24;
+  } else {
+    t24 = $[78];
+  }
+  return t24;
+}
+export {
+  DatePicker,
+  MonthCalendar,
+  getDateFromMonthAndDay,
+  getLastDateFromMonth,
+  getMonthAbbreviationFromMonth,
+  getMonthFromDate,
+  getMonthNameFromMonth,
+  getYearFromMonth
+};
+//# sourceMappingURL=index.js.map