@rnwonder/react-date-picker/dist/index-BfmjmxhR.js

A lightweight, customizable, and accessible date picker component for React applications.

import { jsx as a, jsxs as E } from "react/jsx-runtime";
import { C as je } from "./index-DY8uVjgS.js";
import { M as Be } from "./index-ULrqONQv.js";
import { Y as Oe } from "./index-CpL40Car.js";
import Fe, { useRef as s, useEffect as H, useCallback as x, useState as T, useMemo as Ne } from "react";
import { S as o, B as De } from "./Show-DCFzPwVn.js";
import { c as O } from "./class-DLUjLwnh.js";
import { P as Pe, N as Ie } from "./index-D84JZ01v.js";
import { W as Re, T as fe, b as Ee, R as U, f as _, l as He, K as we, L as ze } from "./general-DZqASQRm-DXQPvh4C.js";
import { S as Le } from "./index-C-0w3u6j.js";
import { Z as Se } from "./general-CMKgS5rp.js";
import { a as V, c as be } from "./utils-CJCqI964.js";
const We = (e) => {
  const u = s(null), i = s(null);
  return H(() => {
    var l;
    u.current && ((l = e.setAllowedComponents) == null || l.call(e, (h) => [...h, u.current]));
  }, [u, e.setAllowedComponents]), H(() => {
    var l;
    i.current && ((l = e.setAllowedComponents) == null || l.call(e, (h) => [...h, i.current]));
  }, [e.setAllowedComponents, i]), /* @__PURE__ */ a(
    "div",
    {
      className: O(
        `date-month-year-selector-area rn-flex rn-items-center rn-justify-center ${e.monthYearSelectorFlexDirection === "column" ? "rn-flex-col" : ""}`,
        e.datePickerTopMonthYearAreaClass
      ),
      "data-type": "date-month-year-selector-area",
      children: /* @__PURE__ */ E(o, { when: e.render, children: [
        /* @__PURE__ */ a(o, { when: !!e.monthSelectorJSX, children: e.monthSelectorJSX }),
        /* @__PURE__ */ a(o, { when: !e.monthSelectorJSX, children: /* @__PURE__ */ a(
          Be,
          {
            ...e,
            ref: u,
            month: e.month,
            setMonth: e.setMonth,
            monthSelectorFormat: e.monthSelectorFormat,
            zIndex: e.zIndex,
            locale: e.locale,
            primaryColor: e.primaryColor,
            primaryTextColor: e.primaryTextColor,
            minDate: e.minDate,
            maxDate: e.maxDate,
            twoMonthsDisplay: e.twoMonthsDisplay
          }
        ) }),
        /* @__PURE__ */ a(o, { when: !!e.yearSelectorJSX, children: e.yearSelectorJSX }),
        /* @__PURE__ */ a(o, { when: !e.yearSelectorJSX, children: /* @__PURE__ */ a(
          Oe,
          {
            ...e,
            ref: i,
            year: e.year,
            setYear: e.setYear,
            zIndex: e.zIndex,
            yearRange: e.yearRange,
            primaryColor: e.primaryColor,
            primaryTextColor: e.primaryTextColor,
            minDate: e.minDate,
            maxDate: e.maxDate
          }
        ) })
      ] })
    }
  );
}, Ke = (e) => {
  const u = x(() => {
    if (!e.minDate && !e.enabledDays) return !1;
    if (e.minDate && (e.year < e.minDate.year || e.year === e.minDate.year && e.month - 1 < e.minDate.month))
      return !0;
    const { month: l, year: h } = Re(e.year, e.month);
    return fe({
      enabledDays: e.enabledDays,
      year: h,
      month: l,
      prev: !0
    });
  }, [e.minDate, e.enabledDays, e.year, e.month]), i = x(() => {
    if (!e.maxDate && !e.enabledDays) return !1;
    if (e.maxDate && (e.year > e.maxDate.year || e.year === e.maxDate.year && e.month + 1 > e.maxDate.month))
      return !0;
    const { year: l, month: h } = Ee(e.year, e.month);
    return fe({
      enabledDays: e.enabledDays,
      year: l,
      month: h,
      next: !0
    });
  }, [e.enabledDays, e.maxDate, e.month, e.year]);
  return /* @__PURE__ */ E(
    "div",
    {
      className: O(
        `
        date-picker-top 
        rn-mb-[0.3125rem] 
        rn-flex 
        rn-items-center 
        rn-justify-between 
        rn-px-2
      `,
        e.datePickerTopAreaClass
      ),
      "data-type": "date-picker-top",
      children: [
        /* @__PURE__ */ a(o, { when: !!e.prevButtonAreaJSX, children: e.prevButtonAreaJSX }),
        /* @__PURE__ */ a(o, { when: !e.removeNavButtons, children: /* @__PURE__ */ a(
          De,
          {
            className: O(
              "date-prev-next-btn date-prev-btn rn-text-black disabled:rn-opacity-10 dark:rn-text-white",
              e.prevMonthBtnClass,
              e.prevNextMonthBtnClass
            ),
            "data-prev": !0,
            "data-type": "date-prev-next-btn",
            "aria-label": "Move backward to switch to the previous month",
            "data-scope": "button",
            "data-part": "root",
            disabled: u(),
            onClick: e.handlePrevMonth,
            style: {
              ...e.arrowsColor && { color: e.arrowsColor }
            },
            noButtonAnimation: e.noButtonAnimation,
            children: e.prevIcon || /* @__PURE__ */ a(Pe, { color: e.arrowsColor })
          }
        ) }),
        /* @__PURE__ */ a(o, { when: !!e.monthYearSelectorJSX, children: e.monthYearSelectorJSX }),
        /* @__PURE__ */ a(o, { when: !e.monthYearSelectorJSX, children: /* @__PURE__ */ a(
          We,
          {
            ...e,
            startDay: void 0
          }
        ) }),
        /* @__PURE__ */ a(o, { when: !e.removeNavButtons, children: /* @__PURE__ */ a(
          De,
          {
            className: O(
              "date-prev-next-btn date-next-btn rn-text-black disabled:rn-opacity-10 dark:rn-text-white",
              e.nextMonthBtnClass,
              e.prevNextMonthBtnClass
            ),
            "data-next": !0,
            "aria-label": "Move forward to switch to the next month.",
            "data-scope": "button",
            "data-part": "root",
            "data-type": "date-prev-next-btn",
            onClick: e.handleNextMonth,
            disabled: i(),
            style: {
              ...e.arrowsColor && { color: e.arrowsColor }
            },
            noButtonAnimation: e.noButtonAnimation,
            children: e.nextIcon || /* @__PURE__ */ a(Ie, { color: e.arrowsColor })
          }
        ) }),
        /* @__PURE__ */ a(o, { when: !!e.nextButtonAreaJSX, children: e.nextButtonAreaJSX })
      ]
    }
  );
};
function C(e, u, i) {
  const l = s(null);
  if (H(() => {
    l.current && (i == null || i((h) => [...h, l.current]));
  }, [i]), !!u) {
    if (typeof u == "function") {
      const h = u({
        ...e,
        setRefToAllowOutsideClick: l,
        multipleDates: e.multipleObject,
        endDate: e.endDay,
        selectedDate: e.startDay
      });
      return /* @__PURE__ */ a("div", { "data-type": "custom-jsx", children: h });
    }
    return /* @__PURE__ */ a("div", { "data-type": "custom-jsx", children: u });
  }
}
const nt = Fe.forwardRef((e, u) => {
  const [i, l] = T((/* @__PURE__ */ new Date()).getMonth()), [h, w] = T(), [y, j] = T(), [J, p] = T(void 0), [X, W] = T([]), [K, ve] = T(!0), [ee, te] = T(!1), [r, k] = T({});
  H(() => {
    var t, d, m, M, b, A, v, Y, N, P, I, R, f, D, g, z, le, ce, ie, de, he, re, me, oe, ue;
    if (w(U), !((t = e.value) != null && t.selected) && !((d = e.value) != null && d.start) && !((m = e.value) != null && m.end) && !((M = e.value) != null && M.selectedDateObject) && !((b = e.value) != null && b.startDateObject) && !((A = e.value) != null && A.endDateObject) && !((v = e.value) != null && v.multiple) && !((N = (Y = e.value) == null ? void 0 : Y.multipleDateObject) != null && N.length)) {
      e.month || (P = e.setMonth) == null || P.call(e, (/* @__PURE__ */ new Date()).getMonth()), e.year || (I = e.setYear) == null || I.call(e, U), ne();
      return;
    }
    if (ne(), te(!0), e.value.selected || e.value.selectedDateObject) {
      const c = e.value.selected ? new Date(e.value.selected) : V(e.value.selectedDateObject);
      l(c.getMonth()), (R = e.setMonth) == null || R.call(e, c.getMonth()), w(c.getFullYear()), (f = e.setYear) == null || f.call(e, c.getFullYear()), j({
        year: c.getFullYear(),
        month: c.getMonth(),
        day: c.getDate()
      });
    }
    if (e.value.start || e.value.end || e.value.startDateObject || e.value.endDateObject) {
      const c = e.value.start ? new Date(e.value.start) : (D = e.value.startDateObject) != null && D.day ? V(e.value.startDateObject) : void 0, n = e.value.end ? new Date(e.value.end) : (g = e.value.endDateObject) != null && g.day ? V(e.value.endDateObject) : void 0;
      if (!c && !n) return;
      if (!c && n) {
        l(n.getMonth()), (z = e.setMonth) == null || z.call(e, n.getMonth()), w(n.getFullYear()), (le = e.setYear) == null || le.call(e, n.getFullYear());
        const ye = {
          year: n.getFullYear(),
          month: n.getMonth(),
          day: n.getDate()
        };
        j(ye), k({
          start: ye
        });
        return;
      }
      l(c.getMonth()), (ce = e.setMonth) == null || ce.call(e, c.getMonth()), w(c.getFullYear()), (ie = e.setYear) == null || ie.call(e, c.getFullYear());
      const L = {
        year: c.getFullYear(),
        month: c.getMonth(),
        day: c.getDate()
      };
      if (j(L), k({
        start: L
      }), !n) return;
      p({
        year: n.getFullYear(),
        month: n.getMonth(),
        day: n.getDate()
      }), k({
        start: void 0
      }), e.showEndOfRange && (l(n.getMonth()), (de = e.setMonth) == null || de.call(e, n.getMonth()), w(n.getFullYear()), (he = e.setYear) == null || he.call(e, n.getFullYear()));
    }
    if ((re = e.value.multipleDateObject) != null && re.length || e.value.multiple) {
      const c = (me = e.value.multipleDateObject) != null && me.length ? e.value.multipleDateObject : e.value.multiple ? e.value.multiple.map(
        (L) => be(new Date(L))
      ) : void 0;
      if (!c) return;
      W(c);
      const n = c == null ? void 0 : c.at(-1);
      n != null && n.month && (l(n.month), (oe = e.setMonth) == null || oe.call(e, n.month)), n != null && n.year && (w(n.year), (ue = e.setYear) == null || ue.call(e, n.year));
    }
  }, []);
  const F = x(
    (t) => {
      var d, m;
      e.handleOnChange(t), (d = e == null ? void 0 : e.onChange) == null || d.call(e, t), (m = e.onValueChange) == null || m.call(e, t);
    },
    [e]
  ), ne = x(() => {
    var t, d;
    e.startingMonth && l(e.startingMonth), e.startingMonth && ((t = e.setMonth) == null || t.call(e, e.startingMonth)), e.startingYear && w(e.startingYear), e.startingYear && ((d = e.setYear) == null || d.call(e, e.startingYear));
  }, [e]);
  H(() => {
    K || ve(!0);
  }, [K]);
  const Z = x(
    (t, d, m, M = !1) => {
      var Y, N, P, I, R;
      ee || te(!0);
      const b = Number(d), A = _(b, t.month), v = He(m, d, t.month);
      if (e.type === "range") {
        const { end: f, start: D, initial: g } = Se({
          day: t,
          month: d,
          year: m,
          endDay: J,
          startDay: y,
          disabledDays: e.disabledDays,
          enabledDays: e.enabledDays,
          disallowSameDayRange: e.disallowSameDayRange
        });
        j(D), p(f), g && !e.disableRangeHoverEffect && k({
          start: D,
          end: void 0
        }), f && D && (k({}), e.shouldCloseOnSelect && ((Y = e.close) == null || Y.call(e))), F({
          startDate: D,
          endDate: f,
          type: "range"
        });
      }
      if (e.type === "single") {
        const f = new Date(
          v,
          _(b, t.month),
          t.value
        );
        f.setFullYear(v);
        const D = be(f);
        j(D), F({
          selectedDate: D,
          type: "single"
        }), e.shouldCloseOnSelect && ((N = e.close) == null || N.call(e));
      }
      if (e.type === "multiple") {
        const f = {
          year: v,
          month: _(b, t.month),
          day: t.value
        }, D = X.find(
          (g) => we(g, f)
        );
        if (D) {
          const g = X.filter(
            (z) => !we(z, D)
          );
          W(g), F({
            multipleDates: g,
            type: "multiple"
          });
          return;
        }
        W((g) => [...g, f]), F({
          multipleDates: X,
          type: "multiple"
        }), e.shouldCloseOnSelect && ((P = e.close) == null || P.call(e));
      }
      M || (l(A), (I = e.setMonth) == null || I.call(e, A), w(v), (R = e.setYear) == null || R.call(e, v));
    },
    [J, ee, X, F, e, y]
  ), B = x(
    (t, d) => {
      var M, b, A, v, Y;
      l(t), (M = e.setMonth) == null || M.call(e, t), (b = e.onMonthChange) == null || b.call(e, t), d && (w(d), (A = e.setYear) == null || A.call(e, d), (v = e.onYearChange) == null || v.call(e, d));
      const m = ze({
        startDay: y,
        month: t,
        year: d,
        type: e.type
      });
      m && ((Y = e.onValueChange) == null || Y.call(e, m));
    },
    [e, y]
  ), $ = x(() => {
    if ((e.month || i) === 11) {
      const m = h + 1;
      B(0, m);
      return;
    }
    const t = (e.month || i) + 1;
    B(t);
  }, [i, e.month, B, h]), q = x(() => {
    if ((e.month || i) === 0) {
      const m = h - 1;
      B(11, m);
      return;
    }
    const t = (e.month || i) - 1;
    B(t);
  }, [i, e.month, B, h]), ge = x(
    (t, d, m) => {
      if (e.disableRangeHoverEffect || e.type !== "range" || !(r != null && r.start)) return;
      const { end: M, start: b } = Se({
        day: t,
        month: d,
        year: m,
        endDay: r == null ? void 0 : r.end,
        startDay: y,
        disabledDays: e.disabledDays,
        hover: !0,
        enabledDays: e.enabledDays
      });
      k({
        start: b,
        end: M
      });
    },
    [
      r == null ? void 0 : r.end,
      r == null ? void 0 : r.start,
      e.disableRangeHoverEffect,
      e.disabledDays,
      e.enabledDays,
      e.type,
      y
    ]
  ), Ce = x(() => {
    e.disableRangeHoverEffect || e.type === "range" && r != null && r.start && (y && J || k({
      start: y,
      end: void 0
    }));
  }, [
    J,
    r == null ? void 0 : r.start,
    e.disableRangeHoverEffect,
    e.type,
    y
  ]), S = Ne(() => ({
    month: i,
    setMonth: l,
    endDay: J,
    year: h || U,
    setYear: w,
    startDay: y,
    handleDayClick: Z,
    multipleObject: X,
    handleNextMonth: $,
    handlePrevMonth: q,
    close: e.close
  }), [
    J,
    Z,
    $,
    q,
    i,
    X,
    e.close,
    y,
    h
  ]), xe = C(
    S,
    e.monthSelectorJSX,
    e.setAllowedComponents
  ), Me = C(
    S,
    e.yearSelectorJSX,
    e.setAllowedComponents
  ), Ae = C(
    S,
    e.calendarTopAreaJSX,
    e.setAllowedComponents
  ), G = C(
    S,
    e.calendarLeftAreaJSX,
    e.setAllowedComponents
  ), Q = C(
    S,
    e.calendarRightAreaJSX,
    e.setAllowedComponents
  ), ae = C(
    S,
    e.calendarBottomAreaJSX,
    e.setAllowedComponents
  ), Ye = C(
    S,
    e.calendarJSX,
    e.setAllowedComponents
  ), Te = C(
    S,
    e.afterNextButtonAreaJSX,
    e.setAllowedComponents
  ), Je = C(
    S,
    e.beforePrevButtonAreaJSX,
    e.setAllowedComponents
  ), Xe = C(
    S,
    e.weekDaysJSX,
    e.setAllowedComponents
  ), ke = C(
    S,
    e.calendarAboveTopAreaJSX,
    e.setAllowedComponents
  );
  return /* @__PURE__ */ E(
    "div",
    {
      className: O(
        `date-picker-wrapper 
          rn-relative 
          rn-rounded-md 
          rn-border-t 
          rn-border-solid
          rn-border-gray-300
          rn-bg-white
          rn-pb-[0.5rem] 
          rn-pt-[0.625rem] 
          dark:rn-border-gray-700
          dark:rn-bg-dreamless-sleep
          `,
        {
          "rn-w-max": !G && !Q,
          "rn-shadow-lg": !e.showSelectorTwo
        },
        e.datePickerWrapperClass
      ),
      "data-type": "date-picker-wrapper",
      ref: u,
      style: {
        ...e.backgroundColor && {
          backgroundColor: e.backgroundColor
        }
      },
      "data-scope": "date-picker",
      "data-part": "content",
      role: "application",
      "aria-label": "calendar",
      "aria-roledescription": "date-picker",
      children: [
        /* @__PURE__ */ a(o, { when: e.showSelectorTwo, children: /* @__PURE__ */ a(
          Le,
          {
            ...e.selectorTwoProps,
            setAllowedComponents: e.setAllowedComponents,
            setShowSelectorTwo: e.setShowSelectorTwo,
            setSelectorTwoProps: e.setSelectorTwoProps,
            monthSelectorTopLabel: e.monthSelectorTopLabel
          }
        ) }),
        /* @__PURE__ */ E(o, { when: !e.hideTopArea, children: [
          ke,
          Ae || /* @__PURE__ */ a(
            Ke,
            {
              yearSelectorCount: e.yearSelectorCount,
              setYear: e.setYear || w,
              setMonth: e.setMonth || l,
              month: e.month || i,
              year: e.year || h,
              render: K,
              handleNextMonth: $,
              handlePrevMonth: q,
              monthSelectorJSX: xe,
              yearSelectorJSX: Me,
              zIndex: e.zIndex,
              type: e.type,
              setAllowedComponents: e.setAllowedComponents,
              monthSelectorFormat: e.monthSelectorFormat,
              monthYearSelectorFlexDirection: e.monthYearSelectorFlexDirection,
              onChange: e.onValueChange,
              onMonthChange: e.onMonthChange,
              twoMonthsDisplay: e.twoMonthsDisplay,
              startDay: y,
              setStartDay: j,
              yearRange: e.yearRange,
              locale: e.locale,
              nextIcon: e.nextIcon,
              prevIcon: e.prevIcon,
              removeNavButtons: e.removeNavButtons,
              nextButtonAreaJSX: Te,
              prevButtonAreaJSX: Je,
              primaryColor: e.primaryColor,
              minDate: e.minDate,
              maxDate: e.maxDate,
              enabledDays: e.enabledDays,
              primaryTextColor: e.primaryTextColor,
              secondaryColor: e.secondaryColor,
              secondaryTextColor: e.secondaryTextColor,
              setShowSelectorTwo: e.setShowSelectorTwo,
              setSelectorTwoProps: e.setSelectorTwoProps,
              showSelectorTwo: e.showSelectorTwo
            }
          )
        ] }),
        /* @__PURE__ */ E(
          "div",
          {
            className: O(
              "date-picker-body rn-flex rn-justify-center",
              e.datePickerBodyAreaClass
            ),
            children: [
              /* @__PURE__ */ a(o, { when: G && !e.showSelectorTwo, children: G }),
              /* @__PURE__ */ a(o, { when: !e.hideCalendar, children: Ye || /* @__PURE__ */ a(
                je,
                {
                  ...e,
                  year: e.year || h,
                  month: e.month || i,
                  endDay: J,
                  startDay: y,
                  handleDayClick: Z,
                  multipleObject: X,
                  weekDaysJSX: Xe,
                  onHoverDay: ge,
                  hoverRangeValue: r,
                  onHoverDayEnd: Ce,
                  showSelectorTwo: e.showSelectorTwo
                }
              ) }),
              /* @__PURE__ */ a(o, { when: Q && !e.showSelectorTwo, children: Q })
            ]
          }
        ),
        /* @__PURE__ */ a(o, { when: ae && !e.showSelectorTwo, children: ae })
      ]
    }
  );
});
export {
  nt as D
};