react-trip-date
Version:
Accessible, fully customizable date and range picker for React applications.
1,341 lines (1,305 loc) • 38 kB
JavaScript
import { jsx as f, jsxs as A, Fragment as D } from "react/jsx-runtime";
import Nr from "@zoomit/dayjs-jalali-plugin";
import V from "dayjs";
import Sr from "dayjs/locale/de";
import Ir from "dayjs/locale/es";
import _r from "dayjs/locale/fa";
import Tr from "dayjs/locale/fr";
import Ar from "dayjs/locale/it";
import Lr from "dayjs/locale/ja";
import zr from "dayjs/locale/ru";
import Rr from "dayjs/locale/tr";
import Br from "dayjs/locale/zh";
import Wr from "dayjs/plugin/isBetween";
import jr from "dayjs/plugin/isSameOrBefore";
import R, { css as Kr, ThemeProvider as gr } from "styled-components";
import * as J from "react";
import { useRef as z, useEffect as G, useState as j, useCallback as Fr } from "react";
const Gr = (r) => {
const o = z(null);
return G(() => {
const n = (e) => {
const t = o.current;
!t || t.contains(e.target) || r(e);
};
return document.addEventListener("mousedown", n), document.addEventListener("touchstart", n), () => {
document.removeEventListener("mousedown", n), document.removeEventListener("touchstart", n);
};
}, [r]), { ref: o };
}, Pr = 120, Vr = ({ setDisplayYears: r, setSource: o }) => {
const { ref: n } = Gr(
() => r(!1)
), e = [];
for (let t = 0; t < Pr; t++) {
const s = V().subtract(t, "year").format("YYYY");
e.push(
/* @__PURE__ */ f(
"button",
{
type: "button",
onClick: () => {
o((a) => a.set("year", Number(s))), r((a) => !a);
},
children: s
},
s
)
);
}
return /* @__PURE__ */ f(
Hr,
{
className: "tp-calendar-year-select",
ref: n,
role: "listbox",
"aria-label": "Choose year",
children: e
}
);
}, Hr = R.div`
display: flex;
flex-direction: column;
position: absolute;
top: 20px;
left: 0;
right: 0;
margin: auto;
width: 80px;
height: 40vh;
background: #fff;
overflow: auto;
padding: 10px 0px;
border-radius: ${({ theme: r }) => r.shape.borderRadius}px;
z-index: 10;
> button {
display: block;
margin: 0;
padding: 6px 0;
text-align: center;
width: 100%;
color: ${({ theme: r }) => r.grey[900]};
border: 0;
background: transparent;
font: inherit;
cursor: pointer;
&:hover,
&:focus-visible {
background-color: ${({ theme: r }) => r.primary.light};
outline: none;
}
}
`, fr = (r) => /* @__PURE__ */ J.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: 4.876, height: 7.908, viewBox: "0 0 4.876 7.908", fill: "currentColor", ...r }, /* @__PURE__ */ J.createElement("path", { id: "ic_keyboard_arrow_down_24px_1_", d: "M241.923 1911.5l3.031 3.031 3.031-3.031.923.923-3.954 3.954-3.954-3.954z", className: "semi-dark", transform: "rotate(90 1078.688 837.689)" })), dr = (r) => /* @__PURE__ */ J.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: 4.877, height: 7.91, viewBox: "0 0 4.877 7.91", fill: "currentColor", ...r }, /* @__PURE__ */ J.createElement("path", { id: "ic_keyboard_arrow_down_24px_1_", d: "M241.923 1911.5l3.031 3.031 3.031-3.031.923.923-3.954 3.954-3.954-3.954z", transform: "rotate(-90 -831.296 1080.205)" })), xr = ({
jalali: r,
source: o,
setSource: n,
components: e,
displayMonths: t,
numberOfMonths: s,
setDisplayMonths: a
}) => {
var p, Y, w, k, b, y, h, M, l, v, O, E, N, I, T, B;
const [i, c] = j(!1), u = () => {
n(o.subtract(1, t ? "year" : "month"));
}, d = () => {
n(o.add(1, t ? "year" : "month"));
}, C = t ? `Previous year, ${o.format("YYYY")}` : `Previous month, ${o.format("MMMM YYYY")}`, m = t ? `Next year, ${o.format("YYYY")}` : `Next month, ${o.format("MMMM YYYY")}`, $ = () => {
var F, S;
if (t)
return /* @__PURE__ */ A(D, { children: [
/* @__PURE__ */ f(
"button",
{
type: "button",
className: "tp-calendar-header-title",
onClick: () => c((_) => !_),
"aria-label": `Choose year, ${o.format("YYYY")}`,
children: o.format(
((F = e == null ? void 0 : e.header) == null ? void 0 : F.format) ?? (t ? "YYYY" : "YYYY-MMMM")
)
}
),
i && /* @__PURE__ */ f(
Vr,
{
setDisplayYears: c,
setSource: n
}
)
] });
const K = [];
for (let _ = 0; _ < s; _++) {
const H = o.add(_, "month");
K.push(
/* @__PURE__ */ f(
"button",
{
type: "button",
className: "tp-calendar-header-title",
onClick: () => a((q) => !q),
"aria-label": `Choose month, ${H.format("MMMM YYYY")}`,
children: H.format(((S = e == null ? void 0 : e.header) == null ? void 0 : S.format) ?? "YYYY MMMM")
},
_
)
);
}
return K;
};
return /* @__PURE__ */ A(
qr,
{
className: "tp-calendar-header",
$numberOfMonths: s,
$jalali: r,
$displayMonths: t,
children: [
/* @__PURE__ */ A(
"button",
{
type: "button",
"aria-label": C,
className: (Y = (p = e == null ? void 0 : e.header) == null ? void 0 : p.monthIcons) != null && Y.left ? "" : "action left",
onClick: u,
children: [
((k = (w = e == null ? void 0 : e.header) == null ? void 0 : w.monthIcons) == null ? void 0 : k.left) && !t && e.header.monthIcons.left,
((y = (b = e == null ? void 0 : e.header) == null ? void 0 : b.yearIcons) == null ? void 0 : y.left) && t && e.header.yearIcons.left,
!((M = (h = e == null ? void 0 : e.header) == null ? void 0 : h.monthIcons) != null && M.left) && /* @__PURE__ */ A(D, { children: [
/* @__PURE__ */ f(fr, {}),
t ? /* @__PURE__ */ f(fr, {}) : null
] })
]
}
),
$(),
/* @__PURE__ */ A(
"button",
{
type: "button",
"aria-label": m,
className: (v = (l = e == null ? void 0 : e.header) == null ? void 0 : l.monthIcons) != null && v.right ? "" : "action right",
onClick: d,
children: [
((E = (O = e == null ? void 0 : e.header) == null ? void 0 : O.monthIcons) == null ? void 0 : E.right) && !t && e.header.monthIcons.right,
((I = (N = e == null ? void 0 : e.header) == null ? void 0 : N.yearIcons) == null ? void 0 : I.right) && t && e.header.yearIcons.right,
!((B = (T = e == null ? void 0 : e.header) == null ? void 0 : T.monthIcons) != null && B.right) && /* @__PURE__ */ A(D, { children: [
/* @__PURE__ */ f(dr, {}),
t ? /* @__PURE__ */ f(dr, {}) : null
] })
]
}
)
]
}
);
}, qr = R.div`
display: flex;
justify-content: space-between;
align-items: center;
height: 55px;
position: relative;
background-color: ${({ theme: r }) => r.primary.main};
flex-direction: ${({ $jalali: r }) => r ? "row-reverse" : "row"};
border-radius: ${({ theme: r }) => r.shape.borderRadius}px;
.tp-calendar-header-title {
color: #fff;
text-align: center;
cursor: pointer;
border: 0;
background: transparent;
font: inherit;
border-radius: ${({ theme: r }) => r.shape.borderRadius}px;
direction: ${({ $jalali: r }) => r ? "ltr" : "rtl"};
width: ${({ $numberOfMonths: r, $displayMonths: o }) => o ? "120px" : `${100 / r}% `};
margin: auto;
&:focus-visible {
outline: 2px solid #fff;
outline-offset: 2px;
}
}
button.action {
position: absolute;
height: 55px;
width: 55px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
border: 0;
background: transparent;
color: #fff;
&:focus-visible {
outline: 2px solid #fff;
outline-offset: 2px;
}
&.right {
transform: ${({ $jalali: r }) => r ? "rotate(180deg)" : "rotate(0deg)"};
${({ $jalali: r }) => r ? "left:0;" : "right: 0;"}
}
&.left {
transform: ${({ $jalali: r }) => r ? "rotate(180deg)" : "rotate(0deg)"};
${({ $jalali: r }) => r ? "right:0;" : "left: 0;"}
}
}
svg {
width: 10px;
height: 15px;
color: ${({ theme: r }) => r.background.default};
}
`, Q = {
primary: {
light: "#d0f4f0",
main: "#13c8b5",
dark: "#12baa9"
},
grey: {
700: "#707070",
900: "#1b1b1d"
},
background: {
default: "#f5f5f5"
},
text: {
disabled: "#BABABA"
},
shape: {
borderRadius: 4
}
}, L = "YYYY-MM-DD", wr = (...r) => {
const o = [];
for (const n of r) {
if (!n) continue;
const e = typeof n;
if (e === "string" || e === "number")
o.push(n);
else if (e === "object") {
const t = n;
if (t.toString && t.toString !== Object.prototype.toString)
o.push(t.toString());
else
for (const s in t)
Object.prototype.hasOwnProperty.call(t, s) && t[s] && o.push(s);
}
}
return o.join(" ");
}, Ur = [
Sr,
Ir,
_r,
Tr,
Ar,
Lr,
zr,
Rr,
Br
];
if (Ur.length === 0)
throw new Error("react-trip-date: locale registration failed.");
V.extend(Nr);
V.extend(Wr);
V.extend(jr);
const x = V, P = (r, o) => x(r, { jalali: o, format: "YYYY-MM-DD" }).calendar("gregory").format("YYYY-MM-DD"), Dr = "YYYY-MM-DD";
function kr(r, { day: o, source: n, setSource: e, setFocusedDate: t, requestFocus: s }) {
let a;
switch (r.key) {
case "ArrowLeft":
a = o.subtract(1, "day");
break;
case "ArrowRight":
a = o.add(1, "day");
break;
case "ArrowUp":
a = o.subtract(1, "week");
break;
case "ArrowDown":
a = o.add(1, "week");
break;
case "Home":
a = o.startOf("week");
break;
case "End":
a = o.endOf("week");
break;
case "PageUp":
a = r.shiftKey ? o.subtract(1, "year") : o.subtract(1, "month");
break;
case "PageDown":
a = r.shiftKey ? o.add(1, "year") : o.add(1, "month");
break;
default:
return !1;
}
r.preventDefault(), r.stopPropagation();
const i = a.format(Dr);
return s == null || s(i), t(i), (a.month() !== n.month() || a.year() !== n.year()) && e(a.startOf("month")), !0;
}
const Jr = () => /(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(
navigator.userAgent || navigator.vendor || window.opera
) || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(
(navigator.userAgent || navigator.vendor || window.opera).substr(
0,
4
)
), Qr = () => x().format(L), Xr = ({
day: r,
source: o,
setSource: n,
jalali: e,
selectedDays: t,
disabledDays: s,
allowDisabledDaysSpan: a,
hoverDay: i,
disabled: c,
components: u,
setHoverDay: d,
setSelectedDays: C,
numberOfMonth: m,
disabledBeforeToday: $,
disabledBeforeDate: p,
disabledAfterDate: Y,
dayClasses: w,
focusedDate: k,
setFocusedDate: b,
focusRef: y,
requestFocus: h
}) => {
const M = z(null), l = P(r, e), v = k === l, O = (() => {
if (!$) return p;
const g = Qr();
return p && x(p).isAfter(g) ? p : g;
})(), E = (g) => !!(s.includes(g) || O && x(g).isBefore(O) || Y && x(g).isAfter(Y));
G(() => {
v && M.current && y.current === l && document.activeElement !== M.current && (M.current.focus({ preventScroll: !0 }), y.current = null);
}, [v, l, y]);
const N = (g) => {
C(g);
}, I = (g, W) => {
c || (x(g).isBefore(W) ? N({ from: g, to: W }) : N({ from: W, to: g }));
}, T = () => {
if (!(c || E(l))) {
if (!(t != null && t.from) && !(t != null && t.to)) {
d(""), N({ from: l, to: "" });
return;
}
if (t != null && t.from && !(t != null && t.to)) {
const g = s.filter(
(W) => x(W).isBetween(t.from, l, null, "[]")
);
if (g.length && !a) {
const W = i ?? l, X = [...g].sort(
(cr, lr) => x(g[0]).isBefore(W) ? x(cr).isSameOrBefore(lr) ? -1 : 1 : x(cr).isSameOrBefore(lr) ? 1 : -1
)[0];
x(X).isBefore(W) ? I(
t.from,
P(x(X).subtract(1, "day"), e)
) : I(
t.from,
P(x(X).add(1, "day"), e)
);
} else
I(t.from, l);
return;
}
d(""), N({ from: l, to: "" });
}
}, B = (g) => {
g.preventDefault(), !c && (b(l), T());
}, K = (g) => {
kr(g, {
day: r,
source: o,
setSource: n,
setFocusedDate: b,
requestFocus: h
}) || (g.key === "Enter" || g.key === " ") && (g.preventDefault(), T());
}, F = () => {
!(t != null && t.to) && (t != null && t.from) && d(l);
}, S = () => t ? t.to ? t.to : i || t.from : "", _ = () => {
if (!t || !t.from) return !1;
if (l === t.from) return !0;
const g = S();
return E(g) ? !1 : x(l).isBetween(t.from, g, null, "[]");
}, H = r.month() !== o.add(m, "month").month(), q = x().calendar(e ? "jalali" : "gregory").format(L) === r.format(L), nr = E(l) && !_(), ar = !!t && l === (x(t.from).isSameOrBefore(S()) ? t.from : t.to), ir = !!t && l === (x(t.from).isSameOrBefore(S()) ? t.to : t.from), sr = u == null ? void 0 : u.days, Er = w ? w(r).join(" ") : "";
return /* @__PURE__ */ f(
Zr,
{
ref: M,
type: "button",
"data-test": r.format(L),
onClick: B,
onKeyDown: K,
onMouseEnter: Jr() ? void 0 : F,
tabIndex: v ? 0 : -1,
role: "gridcell",
"aria-selected": ar || ir || _(),
"aria-disabled": nr || c || void 0,
"aria-current": q ? "date" : void 0,
"aria-label": r.format("dddd, MMMM D, YYYY"),
disabled: c,
className: wr(
{
inactive: H,
disabled: nr,
"range-select": _(),
jalali: e,
disable: c,
same: !!t && x(t.from).isSame(t.to),
"start-date": ar,
"end-date": ir,
today: q
},
Er,
"tp-calendar-day"
),
children: sr ? /* @__PURE__ */ f(sr, { day: r.format(L), jalali: e }) : r.format("DD")
}
);
}, Zr = R.button`
border: 0;
background: transparent;
font: inherit;
width: 40px;
height: 40px;
transition: all 0.15s ease-in-out;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
margin-bottom: 5px;
cursor: pointer;
color: ${({ theme: r }) => r.grey[900]};
&:focus-visible {
outline: 2px solid ${({ theme: r }) => r.primary.dark};
outline-offset: 2px;
}
&:hover {
background-color: ${({ theme: r }) => r.primary.light};
color: ${({ theme: r }) => r.grey[700]};
&.disable {
background-color: transparent;
color: ${({ theme: r }) => r.grey[900]};
cursor: default;
}
}
&.inactive {
color: transparent;
visibility: hidden;
}
&.today {
border: 1px solid #e2e2e2;
border-radius: 50%;
}
&.disabled {
color: ${({ theme: r }) => r.text.disabled};
position: relative;
cursor: not-allowed;
&:hover {
background-color: transparent;
color: ${({ theme: r }) => r.text.disabled};
}
&::after {
position: absolute;
content: "";
width: 15px;
height: 2px;
background-color: ${({ theme: r }) => r.text.disabled};
transform: rotate(-20deg);
}
}
&.range-select {
background-color: ${({ theme: r }) => r.primary.dark};
color: #fff;
border: 0;
border-radius: 0;
&:hover {
background-color: ${({ theme: r }) => r.primary.dark};
color: #fff;
}
box-shadow: 0px 10px 30px -12px ${({ theme: r }) => r.primary.dark};
&.jalali {
box-shadow: 0px 10px 30px -12px ${({ theme: r }) => r.primary.dark};
}
&.end-date {
border-top-right-radius: 25px;
border-bottom-right-radius: 25px;
&.jalali {
border-top-left-radius: 25px;
border-bottom-left-radius: 25px;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
}
}
&.start-date {
border-top-left-radius: 25px;
border-bottom-left-radius: 25px;
&.jalali {
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
border-top-right-radius: 25px;
border-bottom-right-radius: 25px;
}
}
}
&.same {
border-top-left-radius: 25px !important;
border-bottom-left-radius: 25px !important;
border-top-right-radius: 25px !important;
border-bottom-right-radius: 25px !important;
}
`, vr = ({ jalali: r, startOfWeek: o, components: n }) => {
let e = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
if (n != null && n.titles ? e = [...n.titles] : r && (e = ["ش", "ی", "د", "س", "چ", "پ", "ج"]), !r) {
let t = o % 7;
if (t > 0) for (; t--; ) e.push(e.shift());
}
if (n != null && n.wrapper) {
const t = n.wrapper;
return /* @__PURE__ */ f(t, { jalali: r, startOfWeek: o });
}
return /* @__PURE__ */ f(rt, { className: "tp-calendar-week-titles", $jalali: r, role: "row", children: e.map((t) => (
// eslint-disable-next-line jsx-a11y/no-noninteractive-element-to-interactive-role
/* @__PURE__ */ f("p", { role: "columnheader", "aria-label": t, children: t }, t)
)) });
}, rt = R.div`
display: flex;
text-align: center;
justify-content: center;
flex-direction: ${({ $jalali: r }) => r ? "row-reverse" : "row"};
border-bottom: 1px solid #e2e2e2;
margin: 30px 0 15px 0;
p {
width: 38px;
margin-bottom: 15px;
margin-left: 5px;
}
`, Yr = R.div`
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
flex-direction: ${({ $jalali: r }) => r ? "row-reverse" : "row"};
`, yr = R.div`
height: 350px;
display: flex;
position: relative;
align-items: center;
flex-direction: column;
width: ${({ $numberOfMonths: r }) => Kr`calc(${100 / r}%)`};
`, Mr = R.div`
display: flex;
align-items: center;
position: relative;
flex-direction: ${({ $jalali: r }) => r ? "row-reverse" : "row"};
`, tr = ({
source: r,
startOfWeek: o
}) => {
const n = [], e = r.daysInMonth(), t = r.startOf("month").day(), s = o < 0 ? 0 : o % 7;
let a = 0;
t > s ? a = t - s : s > t && (a = 7 - (s - t));
let i = r.startOf("month").subtract(a, "day"), c = e + a;
const u = c % 7;
u > 0 && (c += 7 - u);
for (let d = 0; d < c; d++)
n.push(i), i = i.add(1, "day");
return n;
}, er = (r, o) => {
let n = 0;
const e = [];
for (; n * o < r.length; )
e.push(r.slice(n * o, ++n * o));
return e;
}, Z = "YYYY-MM-DD", ur = (r) => r.format("YYYY-MM"), mr = (r) => r.format(Z), tt = ({
allowDisabledDaysSpan: r,
numberOfMonths: o,
startOfWeek: n,
selectedDays: e,
disabledDays: t,
hoverDay: s,
setHoverDay: a,
components: i,
setSelectedDays: c,
disabledBeforeToday: u,
disabledBeforeDate: d,
disabledAfterDate: C,
jalali: m,
disabled: $,
source: p,
setSource: Y,
dayClasses: w
}) => {
const [k, b] = j(
() => (e == null ? void 0 : e.from) ?? p.format(Z)
), y = z(null), h = (l) => {
y.current = l;
}, M = [];
for (let l = 0; l < o; l++) {
const v = p.add(l, "month"), O = er(
tr({
source: v,
startOfWeek: m ? 6 : n
}),
7
);
M.push(
/* @__PURE__ */ A(
yr,
{
className: "tp-calendar-month",
$numberOfMonths: o || 1,
"data-test": ur(v),
role: "grid",
"aria-label": v.format("MMMM YYYY"),
children: [
/* @__PURE__ */ f(
vr,
{
jalali: m,
startOfWeek: n,
components: i == null ? void 0 : i.titleOfWeek
}
),
O.map((E) => /* @__PURE__ */ f(
Mr,
{
className: "tp-calendar-week",
$jalali: m,
"data-test": mr(E[0]),
role: "row",
children: E.map((N) => /* @__PURE__ */ f(
Xr,
{
day: N,
jalali: m,
numberOfMonth: l,
hoverDay: s,
setHoverDay: a,
components: i,
source: p,
setSource: Y,
disabled: $,
disabledDays: t,
selectedDays: e,
setSelectedDays: c,
disabledBeforeToday: u,
allowDisabledDaysSpan: r,
disabledBeforeDate: d,
disabledAfterDate: C,
dayClasses: w,
focusedDate: k,
setFocusedDate: b,
focusRef: y,
requestFocus: h
},
N.format(Z)
))
},
mr(E[0])
))
]
},
ur(v)
)
);
}
return /* @__PURE__ */ f(Yr, { className: "tp-calendar-months", $jalali: m, children: M });
}, $r = ({
source: r,
setSource: o,
setDisplayMonths: n,
jalali: e
}) => {
const t = (i) => {
o(i.month(+i.format("M") - 1)), n(!1);
}, s = r.date(1), a = [];
for (let i = 0; i < 12; i++)
a[i] = s.month(i);
return /* @__PURE__ */ f(
et,
{
className: "tp-calendar-month-select",
$jalali: e,
role: "listbox",
"aria-label": "Choose month",
children: a.map((i, c) => /* @__PURE__ */ f(
"div",
{
onClick: () => t(i),
onKeyDown: (u) => {
(u.key === "Enter" || u.key === " ") && (u.preventDefault(), t(i));
},
role: "option",
"aria-selected": r.month() === i.month(),
tabIndex: 0,
"data-testid": "month-item-to-select",
children: /* @__PURE__ */ f("p", { children: i.format("MMMM") })
},
c
))
}
);
}, et = R.div`
margin-top: 15px;
display: flex;
flex: 1 1;
height: 350px;
flex-wrap: wrap;
flex-direction: ${({ $jalali: r }) => r ? "row-reverse" : "row"};
> div {
flex-basis: calc(25% - 4px);
justify-content: center;
text-align: center;
display: flex;
align-items: center;
cursor: pointer;
border: 2px solid #fff;
background-color: ${({ theme: r }) => r.primary.main};
border-radius: ${({ theme: r }) => r.shape.borderRadius}px;
&:focus-visible {
outline: 2px solid ${({ theme: r }) => r.primary.dark};
outline-offset: 2px;
}
p {
color: #fff;
}
}
`, U = (r) => typeof r == "object" && r !== null && !Array.isArray(r) && Object.getPrototypeOf(r) === Object.prototype, or = (r, ...o) => {
let n = U(r) ? { ...r } : {};
for (const e of o) {
if (!U(e)) continue;
const t = { ...n };
for (const s of Object.keys(e)) {
const a = e[s], i = t[s];
U(a) ? t[s] = or(
U(i) ? i : {},
a
) : Array.isArray(a) && Array.isArray(i) ? t[s] = Array.from(/* @__PURE__ */ new Set([...i, ...a])) : t[s] = a;
}
n = t;
}
return n;
}, hr = (r = !1, o, n = "en") => x(o).calendar(r ? "jalali" : "gregory").locale(r ? "fa" : n || "en"), ot = 580, nt = 320;
function Or({
autoResponsive: r,
initialMonthAndYear: o,
jalali: n,
locale: e,
numberOfMonthsProp: t,
onRangeDateInScreen: s,
initialFocusDate: a
}) {
const i = z(null), [c, u] = j(
() => hr(n, o ?? a, e)
), [d, C] = j(!1), [m, $] = j(t);
G(() => {
o && u(hr(n, o, e));
}, [o, n, e]), G(() => {
if (!r) {
$(t);
return;
}
if (typeof window > "u") return;
const Y = i.current;
if (!Y) return;
const w = (b) => {
b < ot ? $(1) : $(Math.max(1, Math.floor(b / nt)));
};
if (w(Y.clientWidth), typeof ResizeObserver > "u") return;
const k = new ResizeObserver((b) => {
for (const y of b)
w(y.contentRect.width);
});
return k.observe(Y), () => k.disconnect();
}, [r, t]);
const p = z(s);
return p.current = s, G(() => {
if (!p.current) return;
const Y = Math.max(0, m - 1);
let w = c.add(Y, "month");
w = w.date(w.daysInMonth());
const k = c.date(1);
p.current({
start: P(k, n),
end: P(w, n)
});
}, [n, m, c]), {
ref: i,
source: c,
setSource: u,
numberOfMonths: m,
displayMonths: d,
setDisplayMonths: C
};
}
const at = typeof process < "u" && typeof process.env < "u" && process.env.NODE_ENV !== "production";
function Cr(r, o, n) {
const e = r !== void 0, { current: t } = z(e);
at && e !== t && console.warn(
"[react-trip-date] A controlled prop was switched between controlled and uncontrolled. Pick one for the lifetime of the component."
);
const [s, a] = j(o), i = e ? r : s, c = z(n);
c.current = n;
const u = Fr(
(d) => {
var C;
if (!t)
a((m) => {
var p;
const $ = typeof d == "function" ? d(m) : d;
return (p = c.current) == null || p.call(c, $), $;
});
else {
const m = typeof d == "function" ? d(r) : d;
(C = c.current) == null || C.call(c, m);
}
},
[t, r]
);
return [i, u];
}
const it = { from: "", to: "" }, Et = ({
autoResponsive: r = !0,
allowDisabledDaysSpan: o = !1,
components: n,
disabled: e = !1,
dayClasses: t,
disabledAfterDate: s,
disabledBeforeToday: a = !1,
disabledBeforeDate: i,
disabledDays: c = [],
initialMonthAndYear: u,
jalali: d = !1,
locale: C,
numberOfMonths: m = 1,
onChange: $,
onRangeDateInScreen: p,
selectedDays: Y,
startOfWeek: w = 1,
theme: k
}) => {
const [b, y] = Cr(
Y,
Y ?? it,
$
), [h, M] = j(), l = !u && (b != null && b.from) ? b.from : void 0, {
ref: v,
source: O,
setSource: E,
numberOfMonths: N,
displayMonths: I,
setDisplayMonths: T
} = Or({
autoResponsive: r,
initialMonthAndYear: u,
jalali: d,
locale: C,
numberOfMonthsProp: m,
onRangeDateInScreen: p,
initialFocusDate: l
}), B = k ? or(Q, k) : Q;
return /* @__PURE__ */ f(
"div",
{
className: "tp-calendar",
ref: v,
role: "group",
"aria-label": "Date range picker",
children: /* @__PURE__ */ A(gr, { theme: B, children: [
/* @__PURE__ */ f(
xr,
{
jalali: d,
source: O,
setSource: E,
components: n,
displayMonths: I,
numberOfMonths: N,
setDisplayMonths: T
}
),
I ? /* @__PURE__ */ f(
$r,
{
jalali: d,
setDisplayMonths: T,
setSource: E,
source: O
}
) : /* @__PURE__ */ f(
tt,
{
source: O,
jalali: d,
disabled: e,
setSource: E,
hoverDay: h,
components: n,
setHoverDay: M,
startOfWeek: w,
disabledDays: c,
selectedDays: b,
numberOfMonths: N,
setSelectedDays: y,
disabledBeforeToday: a,
disabledBeforeDate: i,
disabledAfterDate: s,
allowDisabledDaysSpan: o,
dayClasses: t
}
)
] })
}
);
}, st = () => x().format(L), ct = ({
day: r,
jalali: o,
source: n,
setSource: e,
disabled: t,
components: s,
selectedDays: a,
disabledDays: i,
numberOfMonth: c,
setSelectedDays: u,
disabledBeforeToday: d,
numberOfSelectableDays: C,
disabledBeforeDate: m,
disabledAfterDate: $,
dayClasses: p,
focusedDate: Y,
setFocusedDate: w,
focusRef: k,
requestFocus: b
}) => {
const y = z(null), h = P(r, o), M = Y === h, l = a.includes(h), v = (() => {
if (!d) return m;
const S = st();
return m && x(m).isAfter(S) ? m : S;
})(), O = !!(t || i.includes(h) || v && x(h).isBefore(v) || $ && x(h).isAfter($));
G(() => {
M && y.current && k.current === h && document.activeElement !== y.current && (y.current.focus({ preventScroll: !0 }), k.current = null);
}, [M, h, k]);
const E = r.month() !== n.add(c, "month").month(), N = x().calendar(o ? "jalali" : "gregory").format(L) === r.format(L), I = (S) => {
u(S);
}, T = (S) => {
if (S.preventDefault(), !t) {
if (w(h), a.includes(h)) {
I(a.filter((_) => _ !== h));
return;
}
if (!O) {
if (C === 1) {
I([h]);
return;
}
C > 0 && a.length >= C || I([...a, h]);
}
}
}, B = (S) => {
kr(S, {
day: r,
source: n,
setSource: e,
setFocusedDate: w,
requestFocus: b
}) || (S.key === "Enter" || S.key === " ") && (S.preventDefault(), T(S));
}, K = s == null ? void 0 : s.days, F = p ? p(r).join(" ") : "";
return /* @__PURE__ */ f(
lt,
{
ref: y,
type: "button",
"data-test": r.format(L),
onClick: T,
onKeyDown: B,
tabIndex: M ? 0 : -1,
role: "gridcell",
"aria-selected": l,
"aria-disabled": O || void 0,
"aria-current": N ? "date" : void 0,
"aria-label": r.format("dddd, MMMM D, YYYY"),
disabled: t,
className: wr(
{
inactive: E,
selected: l,
disabled: O,
disable: t,
today: N
},
F,
"tp-calendar-day"
),
children: K ? /* @__PURE__ */ f(K, { day: r.format(L), jalali: o }) : r.format("DD")
}
);
}, lt = R.button`
border: 0;
background: transparent;
border-radius: 50%;
margin-left: 5px;
margin-bottom: 5px;
width: 38px;
height: 38px;
transition: all 0.15s ease-in-out;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
cursor: pointer;
color: ${({ theme: r }) => r.grey[900]};
user-select: none;
font: inherit;
&:focus-visible {
outline: 2px solid ${({ theme: r }) => r.primary.dark};
outline-offset: 2px;
}
&:hover {
background-color: ${({ theme: r }) => r.primary.light};
color: ${({ theme: r }) => r.grey[700]};
&.disable {
cursor: default;
background-color: transparent;
color: ${({ theme: r }) => r.grey[900]};
}
}
&.inactive {
color: transparent;
visibility: hidden;
}
&.today {
border: 1px solid #e2e2e2;
}
&.disabled {
color: ${({ theme: r }) => r.text.disabled};
position: relative;
cursor: not-allowed;
&:hover {
background-color: transparent;
color: ${({ theme: r }) => r.text.disabled};
}
&::after {
position: absolute;
content: "";
width: 15px;
height: 2px;
background-color: ${({ theme: r }) => r.text.disabled};
transform: rotate(-20deg);
}
}
&.selected {
color: #fff;
background-color: ${({ theme: r }) => r.primary.dark};
box-shadow: 0px 10px 30px -12px ${({ theme: r }) => r.primary.main};
&:hover {
background-color: ${({ theme: r }) => r.primary.main};
&.disable {
color: #fff;
}
}
p {
color: #fff;
}
}
`, rr = "YYYY-MM-DD", pr = (r) => r.format("YYYY-MM"), br = (r) => r.format(rr), ft = ({
numberOfSelectableDays: r,
numberOfMonths: o,
startOfWeek: n,
selectedDays: e,
disabledDays: t,
setSelectedDays: s,
components: a,
disabledBeforeToday: i,
disabledBeforeDate: c,
disabledAfterDate: u,
jalali: d,
disabled: C,
source: m,
setSource: $,
dayClasses: p
}) => {
const [Y, w] = j(
() => e[0] ?? m.format(rr)
), k = z(null), b = (h) => {
k.current = h;
}, y = [];
for (let h = 0; h < o; h++) {
const M = m.add(h, "month"), l = er(
tr({
source: M,
startOfWeek: d ? 6 : n
}),
7
);
y.push(
/* @__PURE__ */ A(
yr,
{
className: "tp-calendar-month",
$numberOfMonths: o || 1,
"data-test": pr(M),
role: "grid",
"aria-label": M.format("MMMM YYYY"),
children: [
/* @__PURE__ */ f(
vr,
{
jalali: d,
startOfWeek: n,
components: a == null ? void 0 : a.titleOfWeek
}
),
l.map((v) => /* @__PURE__ */ f(
Mr,
{
className: "tp-calendar-week",
$jalali: d,
"data-test": br(v[0]),
role: "row",
children: v.map((O) => /* @__PURE__ */ f(
ct,
{
day: O,
jalali: d,
numberOfMonth: h,
disabled: C,
source: m,
setSource: $,
components: a,
disabledDays: t,
selectedDays: e,
setSelectedDays: s,
disabledBeforeToday: i,
disabledBeforeDate: c,
disabledAfterDate: u,
numberOfSelectableDays: r,
dayClasses: p,
focusedDate: Y,
setFocusedDate: w,
focusRef: k,
requestFocus: b
},
O.format(rr)
))
},
br(v[0])
))
]
},
pr(M)
)
);
}
return /* @__PURE__ */ f(Yr, { className: "tp-calendar-months", $jalali: d, children: y });
}, Nt = ({
autoResponsive: r = !0,
components: o,
dayClasses: n,
disabled: e = !1,
disabledBeforeToday: t = !1,
disabledAfterDate: s,
disabledBeforeDate: a,
disabledDays: i = [],
initialMonthAndYear: c,
jalali: u = !1,
locale: d,
numberOfMonths: C = 1,
numberOfSelectableDays: m = 0,
onChange: $,
onRangeDateInScreen: p,
selectedDays: Y,
startOfWeek: w = 1,
theme: k
}) => {
const [b, y] = Cr(
Y,
Y ?? [],
$
), h = !c && b.length > 0 ? b[0] : void 0, {
ref: M,
source: l,
setSource: v,
numberOfMonths: O,
displayMonths: E,
setDisplayMonths: N
} = Or({
autoResponsive: r,
initialMonthAndYear: c,
jalali: u,
locale: d,
numberOfMonthsProp: C,
onRangeDateInScreen: p,
initialFocusDate: h
}), I = k ? or(Q, k) : Q;
return /* @__PURE__ */ f(
"div",
{
className: "tp-calendar",
ref: M,
role: "group",
"aria-label": "Date picker",
children: /* @__PURE__ */ A(gr, { theme: I, children: [
/* @__PURE__ */ f(
xr,
{
jalali: u,
source: l,
setSource: v,
components: o,
displayMonths: E,
numberOfMonths: O,
setDisplayMonths: N
}
),
E ? /* @__PURE__ */ f(
$r,
{
jalali: u,
setDisplayMonths: N,
setSource: v,
source: l
}
) : /* @__PURE__ */ f(
ft,
{
source: l,
jalali: u,
disabled: e,
setSource: v,
components: o,
startOfWeek: w,
disabledDays: i,
selectedDays: b,
numberOfMonths: O,
setSelectedDays: y,
disabledAfterDate: s,
disabledBeforeDate: a,
disabledBeforeToday: t,
numberOfSelectableDays: m,
dayClasses: n
}
)
] })
}
);
}, St = ({
jalali: r,
startOfWeek: o = 1,
children: n
}) => {
const e = x().calendar(r ? "jalali" : "gregory"), t = er(
tr({
source: e,
startOfWeek: r ? 6 : o
}),
7
);
return /* @__PURE__ */ f(D, { children: n(t) });
};
export {
St as Calendar,
Nt as DatePicker,
Et as RangePicker
};
//# sourceMappingURL=index.mjs.map