@zener/nepali-datepicker-react
Version:
Nepali Datepicker React is a lightweight, highly customizable, and feature-rich datepicker component, specifically designed for handling Nepali dates in React.js applications. It offers seamless integration, intuitive user experience, and extensive config
1,414 lines (1,404 loc) • 51 kB
JavaScript
"use strict";
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
// If the importer is in node compatibility mode or this is not an ESM
// file that has been converted to a CommonJS file using a Babel-
// compatible transform (i.e. "__esModule" has not been set), then set
// "default" to the CommonJS "module.exports" for node compatibility.
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// src/datepicker/index.ts
var datepicker_exports = {};
__export(datepicker_exports, {
AD_MONTH: () => AD_MONTH2,
AD_MONTH_FULL: () => AD_MONTH_FULL,
AD_MONTH_NEPALI: () => AD_MONTH_NEPALI2,
ENGLISH_NEPALI_MONTH: () => ENGLISH_NEPALI_MONTH2,
ENGLISH_WEEK: () => ENGLISH_WEEK2,
ENGLISH_WEEK_FULL: () => ENGLISH_WEEK_FULL,
NEPALI_DIGITS: () => NEPALI_DIGITS2,
NEPALI_MONTH: () => NEPALI_MONTH2,
NEPALI_TODAY: () => NEPALI_TODAY2,
NEPALI_WEEK: () => NEPALI_WEEK2,
NEPALI_WEEK_FULL: () => NEPALI_WEEK_FULL,
NepaliDate: () => nepaliDateConstants.default,
default: () => datepicker_default,
lowerADDate: () => lowerADDate2,
startDateBS: () => startDateBS3,
toAD: () => toAD2,
toBS: () => toBS,
yearMonthDays: () => yearMonthDays3
});
module.exports = __toCommonJS(datepicker_exports);
var nepaliDateConstants = __toESM(require("@zener/nepali-date"));
// src/datepicker/nepali-date-picker.tsx
var import_react3 = require("react");
var import_nepali_date4 = __toESM(require("@zener/nepali-date"));
// src/datepicker/menu.tsx
var import_framer_motion = require("framer-motion");
var import_react = require("react");
var import_react_portal = require("@radix-ui/react-portal");
var import_nepali_date3 = __toESM(require("@zener/nepali-date"));
// src/utils/calendar.ts
var import_nepali_date = require("@zener/nepali-date");
var toInt = (value) => ~~value;
var yearDivider = 1e4;
var monthDivider = 100;
var padTwo = (v) => `${v}`.padStart(2, "0");
var padFour = (v) => `${v}`.padStart(4, "0");
var padFourNumber = (v) => `${v}`.padStart(4, "0");
var stringDateFormatter = ({ year, month, date }) => `${padFour(year)}-${padTwo(month)}-${padTwo(date)}`;
var getDateFromNumber = (n) => {
const year = toInt(n / yearDivider);
const month = toInt(n % yearDivider / monthDivider);
const date = n % (yearDivider / monthDivider);
const dateData = { year, month, date };
return {
...dateData,
toString: () => stringDateFormatter(dateData)
};
};
var getStartYearAD = () => (0, import_nepali_date.toAD)(getDateFromNumber(import_nepali_date.startDateBS).toString());
var getEndYearAD = () => (0, import_nepali_date.toAD)(
stringDateFormatter({
year: getDateFromNumber(import_nepali_date.startDateBS).year + import_nepali_date.yearMonthDays.length - 1,
month: 12,
date: import_nepali_date.yearMonthDays[import_nepali_date.yearMonthDays.length - 1][11]
})
);
var getBSYearIndexFromBS = (year) => {
const startBSYear = getDateFromNumber(import_nepali_date.startDateBS).year;
if (year < startBSYear) {
throw new Error(`Invalid year, year should be greater than ${startBSYear}`);
}
return year - startBSYear;
};
var getMonthInfo = ({
type = "BS",
year,
month
}) => {
if (month > 12 || month < 0) {
throw new Error("Invalid month");
}
const getPrevMonthDays = (yearIndex = 0) => {
let monthDays = 0;
try {
let m = month - 2;
if (m < 0) {
m = 11;
monthDays = import_nepali_date.yearMonthDays[yearIndex - 1][m];
} else {
monthDays = import_nepali_date.yearMonthDays[yearIndex][m];
}
} catch (err) {
monthDays = 0;
}
return monthDays;
};
const getNextMonthDays = (yearIndex = 0) => {
let monthDays = 0;
try {
let m = month;
if (m > 11) {
m = 0;
monthDays = import_nepali_date.yearMonthDays[yearIndex + 1][m];
} else {
monthDays = import_nepali_date.yearMonthDays[yearIndex][m];
}
} catch (err) {
monthDays = 0;
}
return monthDays;
};
switch (type) {
case "AD": {
const currentDate = new Date(year, month, 0);
const prevDate = new Date(year, month - 1, 0).getDate();
const nextDate = new Date(year, month + 1, 0).getDate();
const firstWeekDay = new Date(
stringDateFormatter({ year, month, date: 1 })
).getDay();
return {
currentMonthDays: currentDate.getDate(),
firstWeekDay,
prevMonthDays: prevDate,
nextMonthDays: nextDate
};
}
case "BS":
default: {
const yearIndex = getBSYearIndexFromBS(year);
const engYear = (0, import_nepali_date.toAD)(stringDateFormatter({ year, month, date: 1 }));
const firstWeekDay = new Date(engYear.toString()).getDay();
return {
prevMonthDays: getPrevMonthDays(yearIndex),
nextMonthDays: getNextMonthDays(yearIndex),
currentMonthDays: import_nepali_date.yearMonthDays[yearIndex][month - 1],
firstWeekDay
};
}
}
};
var groupDates = (monthInfo) => {
const groups = [];
let x = 1;
const items = Array.from({ length: 42 }, (_, i) => {
let day = i + 1 - monthInfo.firstWeekDay;
let month = "current";
if (day <= 0) {
day = monthInfo.prevMonthDays + day;
month = "prev";
} else if (day > monthInfo.currentMonthDays) {
day = x;
x += 1;
month = "next";
}
return { day, month, currentMonth: monthInfo.currentMonth };
});
for (let i = 0; i < items.length; i += 7) {
groups.push(items.slice(i, i + 7));
}
return groups;
};
var getYearsArray = (startYear) => {
return Array.from({ length: 10 }, (_, i) => {
return startYear + i;
});
};
var getDecadeRange = (year) => {
const start = Math.floor(year / 10) * 10;
const end = start + 9;
return { start, end };
};
// src/utils/commons.ts
var import_nepali_date2 = require("@zener/nepali-date");
var import_classnames = __toESM(require("classnames"));
var cn = (...props) => {
return (0, import_classnames.default)(...props);
};
var engToNepaliNumber = (number) => {
return number.toString().split("").map((n) => import_nepali_date2.NEPALI_DIGITS[n]).join("");
};
var engToNepNumberFullDate = (date) => {
return date.split("").map((d) => {
if (d !== "-") {
return import_nepali_date2.NEPALI_DIGITS[d];
}
return "-";
}).join("");
};
var groupArray = (array, groupSize) => {
const result = [];
for (let i = 0; i < array.length; i += groupSize) {
result.push(array.slice(i, i + groupSize));
}
return result;
};
// src/icons.tsx
var import_jsx_runtime = require("react/jsx-runtime");
var PreviousIcon = ({ size = 16 }) => {
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
"svg",
{
height: size,
width: size,
viewBox: "0 0 24 24",
fill: "none",
xmlns: "http://www.w3.org/2000/svg",
focusable: false,
children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", { id: "SVGRepo_bgCarrier", strokeWidth: "0" }),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
"g",
{
id: "SVGRepo_tracerCarrier",
strokeLinecap: "round",
strokeLinejoin: "round"
}
),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", { id: "SVGRepo_iconCarrier", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
"path",
{
d: "M15 6L9 12L15 18",
stroke: "currentColor",
strokeWidth: "2",
strokeLinecap: "round",
strokeLinejoin: "round"
}
) })
]
}
);
};
var NextIcon = ({ size = 16 }) => {
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
"svg",
{
focusable: false,
height: size,
width: size,
viewBox: "0 0 24 24",
fill: "none",
xmlns: "http://www.w3.org/2000/svg",
children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", { id: "SVGRepo_bgCarrier", strokeWidth: "0" }),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
"g",
{
id: "SVGRepo_tracerCarrier",
strokeLinecap: "round",
strokeLinejoin: "round"
}
),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", { id: "SVGRepo_iconCarrier", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
"path",
{
d: "M9 6L15 12L9 18",
stroke: "currentColor",
strokeWidth: "2",
strokeLinecap: "round",
strokeLinejoin: "round"
}
) })
]
}
);
};
var CloseIcon = ({ size = 16 }) => {
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
"svg",
{
className: "zener-outline-none",
tabIndex: -1,
focusable: "false",
"data-icon": "close",
width: size,
height: size,
strokeWidth: "2",
fill: "currentColor",
"aria-hidden": "true",
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 32 32",
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
"path",
{
stroke: "currentColor",
strokeLinecap: "round",
strokeLinejoin: "round",
strokeWidth: "2",
d: "M24 8 8 24M24 24 8 8"
}
)
}
);
};
// src/datepicker/menu.tsx
var import_jsx_runtime2 = require("react/jsx-runtime");
var Menu = ({
type,
show,
bounds,
portalRef,
today,
onChange,
selectedDate,
lang,
menuContainerClassName,
calendarClassName,
portalClassName,
components,
converterMode,
animation,
max,
min
}) => {
const [selectionMode, setSelectionMode] = (0, import_react.useState)("day");
const [currentYearRangeIndex, setCurrentYearRangeIndex] = (0, import_react.useState)(0);
const [days, setDays] = (0, import_react.useState)([]);
const [selectedMonthYear, setSelectedMonthYear] = (0, import_react.useState)();
const [adDateRangeForConverter, setAdDateRangeForConverter] = (0, import_react.useState)({
start: getStartYearAD(),
end: getEndYearAD()
});
const todayText = lang === "en" ? "Today" : import_nepali_date3.NEPALI_TODAY;
const changeMonth = ({ m, y }) => {
const mI = getMonthInfo({
year: y,
// since month index start from 0 but getMonthInfo requires index from 1
month: m + 1,
type
});
const gD = groupDates({
...mI,
// since month index start from 0 but groupDates requires index from 1
currentMonth: m + 1
});
setDays(gD);
setSelectedMonthYear({
year: y,
month: m
});
setCurrentYearRangeIndex(getDecadeRange(y).start);
};
(0, import_react.useEffect)(() => {
setAdDateRangeForConverter({
start: getStartYearAD(),
end: getEndYearAD()
});
}, []);
(0, import_react.useEffect)(() => {
setSelectionMode("day");
}, [show]);
(0, import_react.useEffect)(() => {
if (today || selectedDate) {
let y = 0;
let m = 0;
if (selectedDate) {
m = selectedDate.getMonth();
y = selectedDate.getFullYear();
} else if (today) {
m = today.getMonth();
y = today.getFullYear();
}
changeMonth({ m, y });
}
}, [today, selectedDate, show]);
const canGoNextYear = () => {
if (!selectedMonthYear) {
return false;
}
if (type === "AD") {
return true;
}
const startBSYear = getDateFromNumber(import_nepali_date3.startDateBS).year;
const endBSYear = startBSYear + import_nepali_date3.yearMonthDays.length - 1;
const y = selectedMonthYear.year + 1;
if (y <= endBSYear) {
return true;
}
return false;
};
const nextYear = () => {
if (!selectedMonthYear) {
return;
}
const y = selectedMonthYear.year + 1;
const m = selectedMonthYear.month;
if (canGoNextYear()) {
changeMonth({
y,
m
});
}
};
const canGoPrevYear = () => {
if (!selectedMonthYear) {
return false;
}
const startBSYear = getDateFromNumber(import_nepali_date3.startDateBS).year;
const y = (selectedMonthYear.year || 1) - 1;
if (type === "AD") {
if ((/* @__PURE__ */ new Date(
`${padFourNumber(y)}-${padTwo(selectedMonthYear.month + 1)}-01`
)).getTime() > import_nepali_date3.lowerADDate) {
return true;
}
return false;
}
if (y >= startBSYear) {
return true;
}
return false;
};
const prevYear = () => {
const y = (selectedMonthYear?.year || 0) - 1;
const m = selectedMonthYear?.month || 0;
if (canGoPrevYear()) {
changeMonth({
y,
m
});
}
};
const canGoNextDecade = () => {
if (type === "AD") {
return true;
}
const startBSYear = getDateFromNumber(import_nepali_date3.startDateBS).year;
const endBSYear = startBSYear + import_nepali_date3.yearMonthDays.length - 1;
if (currentYearRangeIndex < getDecadeRange(endBSYear).start) {
return true;
}
return false;
};
const canGoPrevDecade = () => {
if (!selectedMonthYear) {
return false;
}
if (type === "AD") {
if ((/* @__PURE__ */ new Date(
`${padFourNumber(currentYearRangeIndex)}-${padTwo(selectedMonthYear.month + 1)}-01`
)).getTime() > import_nepali_date3.lowerADDate) {
return true;
}
return false;
}
const startBSYear = getDateFromNumber(import_nepali_date3.startDateBS).year;
if (currentYearRangeIndex > startBSYear) {
return true;
}
return false;
};
const nextDecade = () => {
if (canGoNextDecade()) {
setCurrentYearRangeIndex((prev) => prev + 10);
}
};
const prevDecade = () => {
if (canGoPrevDecade()) {
setCurrentYearRangeIndex((prev) => prev - 10);
}
};
const canGoPrevMonth = () => {
if (!selectedMonthYear) {
return false;
}
if (type === "AD") {
if ((/* @__PURE__ */ new Date(
`${padFourNumber(selectedMonthYear.year)}-${padTwo(selectedMonthYear.month + 1)}-01`
)).getTime() > import_nepali_date3.lowerADDate) {
return true;
}
return false;
}
const startBSYear = getDateFromNumber(import_nepali_date3.startDateBS);
if (selectedMonthYear) {
if (selectedMonthYear.year > startBSYear.year) {
return true;
} else if (selectedMonthYear.year === startBSYear.year) {
return selectedMonthYear.month > 0;
}
return false;
}
return false;
};
const canGoNextMonth = () => {
if (type === "AD") {
return true;
}
const startBSYear = getDateFromNumber(import_nepali_date3.startDateBS);
const endBSYear = startBSYear.year + import_nepali_date3.yearMonthDays.length - 1;
if (selectedMonthYear) {
if (selectedMonthYear.year < endBSYear) {
return true;
} else if (selectedMonthYear.year === endBSYear) {
return selectedMonthYear.month < 11;
}
}
return false;
};
const prevMonth = () => {
if (!selectedMonthYear) {
return;
}
if (!canGoPrevMonth()) {
return;
}
let m = selectedMonthYear.month - 1;
let y = selectedMonthYear.year;
if (m < 0) {
y -= 1;
m = 11;
}
if (y < 0) {
y = 0;
}
changeMonth({ m, y });
};
const nextMonth = () => {
if (!selectedMonthYear) {
return;
}
let m = selectedMonthYear.month + 1;
let y = selectedMonthYear.year;
if (m > 11) {
y += 1;
m = 0;
}
if (y < 0) {
y = 0;
}
changeMonth({ m, y });
};
const isSelectedDate = (date, month) => {
if (!selectedDate || !selectedMonthYear) {
return false;
}
return selectedDate.getFullYear() === selectedMonthYear.year && selectedDate.getMonth() === selectedMonthYear.month && selectedDate.getDate() === date && month === "current";
};
const isTodayDate = (date) => {
if (!today || !selectedMonthYear) {
return false;
}
return today.getFullYear() === selectedMonthYear.year && today.getMonth() === selectedMonthYear.month && date === today.getDate();
};
const checkDayDisabledInBs = (month) => {
if (!selectedMonthYear) {
return true;
}
const startBSYear = getDateFromNumber(import_nepali_date3.startDateBS);
const endBSYear = startBSYear.year + import_nepali_date3.yearMonthDays.length - 1;
let m = selectedMonthYear.month;
let y = selectedMonthYear.year;
if (type === "BS") {
switch (month) {
case "next": {
if (m > 10) {
y += 1;
if (y > endBSYear) {
return true;
}
}
return false;
}
case "prev": {
m -= 1;
if (m < 0) {
y -= 1;
if (y < startBSYear.year) {
return true;
}
}
return false;
}
default:
return false;
}
}
return false;
};
const checkDayDisabledInAD = (month) => {
if (!selectedMonthYear) {
return true;
}
let m = selectedMonthYear.month;
let y = selectedMonthYear.year;
switch (month) {
case "prev": {
m -= 1;
if (m < 0) {
y -= 1;
if (y < 1) {
return true;
}
return false;
}
return false;
}
case "next":
default:
return false;
}
};
const handleOnChange = (month, date) => {
if (!selectedMonthYear) {
return;
}
let m = selectedMonthYear.month;
let y = selectedMonthYear.year;
if (checkDayDisabledInBs(month)) {
return;
}
if (month === "next") {
if (m > 10) {
y += 1;
m = 0;
} else {
m += 1;
}
} else if (month === "prev") {
m -= 1;
if (m < 0) {
m = 11;
y -= 1;
}
}
const x = `${padFourNumber(y)}-${padTwo(m + 1)}-${padTwo(date)}`;
onChange?.(
// @ts-ignore
type === "BS" ? new import_nepali_date3.default(y, m, date) : new Date(x)
);
};
const getSelectionContent = (0, import_react.useMemo)(() => {
const num_columns = 3;
switch (selectionMode) {
case "month": {
const getMonths = () => {
if (type === "BS") {
return lang === "en" ? import_nepali_date3.ENGLISH_NEPALI_MONTH : import_nepali_date3.NEPALI_MONTH;
} else {
return lang === "en" ? import_nepali_date3.AD_MONTH : import_nepali_date3.AD_MONTH_NEPALI;
}
};
const monthArray = groupArray(getMonths(), num_columns);
const getMonthIndex = (index, mIndex) => index * num_columns + mIndex;
const onMonthClicked = (index, mIndex) => {
changeMonth({
m: getMonthIndex(index, mIndex),
y: selectedMonthYear?.year || 0
});
setSelectionMode("day");
};
const isMonthDisabled = (month) => {
if (!selectedMonthYear) {
return true;
}
if (min) {
if (selectedMonthYear?.year === min.getFullYear() && month < min.getMonth() || selectedMonthYear?.year < min.getFullYear()) {
return true;
}
}
if (max) {
if (selectedMonthYear?.year === max.getFullYear() && month > max.getMonth() || selectedMonthYear?.year > max.getFullYear()) {
return true;
}
}
if (!converterMode) {
return false;
}
if (type === "BS") {
return false;
}
if (!selectedMonthYear) {
return true;
}
if (selectedMonthYear.year < adDateRangeForConverter.start.year || selectedMonthYear.year > adDateRangeForConverter.end.year) {
return true;
}
if (selectedMonthYear.year === adDateRangeForConverter.start.year || selectedMonthYear.year === adDateRangeForConverter.end.year) {
if (selectedMonthYear.year === adDateRangeForConverter.start.year && month < adDateRangeForConverter.start.month || selectedMonthYear.year === adDateRangeForConverter.end.year && month > adDateRangeForConverter.end.month) {
return true;
}
return false;
}
return false;
};
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("tbody", { children: monthArray.map((ma, index) => {
const i = index;
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("tr", { children: ma.map((m, mIndex) => {
const monthIndex = getMonthIndex(index, mIndex);
const monthDisabled = isMonthDisabled(monthIndex);
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("td", { children: components?.month ? components.month({
onClick: () => !monthDisabled ? onMonthClicked(index, mIndex) : null,
monthText: m,
monthNumber: monthIndex,
year: selectedMonthYear?.year || 0,
isDisabled: monthDisabled
}) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
"div",
{
className: cn(
"zener-text-center zener-p-3 zener-group",
{
"zener-cursor-pointer": !monthDisabled,
"zener-cursor-default": monthDisabled
}
),
onClick: () => !monthDisabled ? onMonthClicked(index, mIndex) : null,
children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
"div",
{
className: cn(
"zener-text-sm zener-flex zener-items-center zener-justify-center zener-h-[28px] zener-rounded",
{
"group-hover:zener-bg-menu-container-item-hover": !monthDisabled,
"zener-text-menu-container-text-disabled": monthDisabled
}
),
children: m
}
)
}
) }, m);
}) }, i);
}) });
}
case "year": {
const range = getDecadeRange(currentYearRangeIndex);
const groupedYears = groupArray(
getYearsArray(range.start),
num_columns
);
const getYearIndex = (index, mIndex) => index * num_columns + mIndex;
const onYearClicked = (index, mIndex) => {
changeMonth({
m: selectedMonthYear?.month || 0,
y: getYearIndex(index, mIndex) + range.start
});
setSelectionMode("month");
};
const isYearDisabled = (year) => {
if (min) {
if (year < min.getFullYear()) {
return true;
}
}
if (max) {
if (year > max.getFullYear()) {
return true;
}
}
if (type === "BS") {
return false;
}
if (type === "AD" && !converterMode) {
return year < 1;
}
if (year < adDateRangeForConverter.start.year || year > adDateRangeForConverter.end.year) {
return true;
}
return false;
};
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("tbody", { children: groupedYears.map((ma, index) => {
const i = index;
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("tr", { children: ma.map((m, mIndex) => {
const yearText = lang === "en" ? padFourNumber(m) : engToNepaliNumber(padFourNumber(m));
const indexNumber = getYearIndex(index, mIndex) + range.start;
const yearDisabled = isYearDisabled(indexNumber);
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("td", { children: components?.year ? components.year({
onClick: () => !yearDisabled ? onYearClicked(index, mIndex) : null,
yearText,
yearNumber: indexNumber,
isDisabled: yearDisabled
}) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
"div",
{
className: cn(
"zener-text-center zener-p-3 zener-group",
{
"zener-cursor-pointer": !yearDisabled,
"zener-cursor-default": yearDisabled
}
),
onClick: () => !yearDisabled ? onYearClicked(index, mIndex) : null,
children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
"div",
{
className: cn(
"zener-text-sm zener-flex zener-items-center zener-justify-center zener-h-[28px] zener-rounded",
{
"group-hover:zener-bg-menu-container-item-hover": !yearDisabled,
"zener-text-menu-container-text-disabled": yearDisabled
}
),
children: yearText
}
)
}
) }, m);
}) }, i);
}) });
}
case "day":
default: {
const onDayClicked = (month, date) => handleOnChange(month, date);
const isDayDisabled = (day, month) => {
if (!selectedMonthYear) {
return true;
}
if (min) {
if (selectedMonthYear?.year === min.getFullYear() && selectedMonthYear?.month === min.getMonth() && (day < min.getDate() && month !== "next" || month === "prev") || selectedMonthYear.month < min.getMonth() && selectedMonthYear.year === min.getFullYear() || selectedMonthYear.year < min.getFullYear()) {
return true;
}
}
if (max) {
if (selectedMonthYear?.year === max.getFullYear() && selectedMonthYear?.month === max.getMonth() && (day > max.getDate() && month !== "prev" || month === "next") || selectedMonthYear.month > max.getMonth() && selectedMonthYear.year === max.getFullYear() || selectedMonthYear.year > max.getFullYear()) {
return true;
}
}
if (type === "BS") {
return checkDayDisabledInBs(month);
}
if (type === "AD" && !converterMode) {
return checkDayDisabledInAD(month);
}
if (selectedMonthYear.year < adDateRangeForConverter.start.year || selectedMonthYear.year > adDateRangeForConverter.end.year) {
return true;
}
if (selectedMonthYear.year === adDateRangeForConverter.start.year || selectedMonthYear.year === adDateRangeForConverter.end.year) {
if (selectedMonthYear.year === adDateRangeForConverter.start.year && selectedMonthYear.month < adDateRangeForConverter.start.month || selectedMonthYear.year === adDateRangeForConverter.end.year && selectedMonthYear.month > adDateRangeForConverter.end.month) {
return true;
}
if (selectedMonthYear.year === adDateRangeForConverter.start.year && selectedMonthYear.month === adDateRangeForConverter.start.month && (day < adDateRangeForConverter.start.date && month === "current" || month === "prev") || selectedMonthYear.year === adDateRangeForConverter.end.year && selectedMonthYear.month === adDateRangeForConverter.end.month && adDateRangeForConverter.start.month && (day > adDateRangeForConverter.end.date && month === "current" || month === "next")) {
return true;
}
return false;
}
return false;
};
return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("tr", { className: "zener-text-sm", children: (lang === "en" ? import_nepali_date3.ENGLISH_WEEK : import_nepali_date3.NEPALI_WEEK).map(
(week, index) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("th", { children: components?.week ? components.week({ weekText: week, weekNumber: index }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "zener-w-[28px] zener-h-[28px] zener-flex zener-items-center zener-justify-center zener-font-normal", children: week }) }, week)
) }) }),
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("tbody", { children: days.map((d, i) => {
const ii = i;
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("tr", { children: d.map((dd, index) => {
const date = dd.day < 1 ? 0 : dd.day;
const isSelected = isSelectedDate(date, dd.month);
const isToday = isTodayDate(date);
const dateText = lang === "en" ? date : engToNepaliNumber(date);
const dayDisabled = isDayDisabled(date, dd.month);
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("td", { children: components?.date ? components.date({
dateMonthType: dd.month,
dateText,
date,
month: selectedMonthYear?.month || 0,
year: selectedMonthYear?.year || 0,
isSelected,
isToday,
onClick: () => !dayDisabled ? onDayClicked(dd.month, date) : null,
isDisabled: dayDisabled,
weekDay: index
}) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
"div",
{
className: cn(
"zener-text-center zener-p-1 zener-group",
{
"zener-cursor-pointer": !dayDisabled,
"zener-cursor-default": dayDisabled
}
),
onClick: () => !dayDisabled ? onDayClicked(dd.month, date) : null,
children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
"div",
{
className: cn(
"zener-text-sm zener-flex zener-items-center zener-justify-center zener-h-[28px] zener-w-[28px] zener-rounded",
{
"zener-text-menu-container-text-disabled": dd.month !== "current" || dayDisabled,
"zener-border zener-border-solid zener-box-border zener-border-menu-container-text-border": isToday && dd.month === "current" && !dayDisabled,
"zener-bg-menu-container-text-selected-bg zener-text-menu-container-text-selected zener-transition-none": isSelected && dd.month === "current" && !dayDisabled,
"zener-bg-menu-container-text-selected-disabled-bg zener-text-menu-container-text-selected-disabled zener-transition-none": isSelected && dd.month === "current" && dayDisabled,
"group-hover:zener-bg-menu-container-item-hover": !isSelected && !dayDisabled
}
),
children: dateText
}
)
}
) }, dd.day);
}) }, ii);
}) })
] });
}
}
}, [
lang,
selectedMonthYear,
currentYearRangeIndex,
selectionMode,
converterMode
]);
const getYearRange = (0, import_react.useMemo)(() => {
const yearRange = `${padFourNumber(getDecadeRange(currentYearRangeIndex).start)}-${padFourNumber(getDecadeRange(currentYearRangeIndex).end)}`;
return lang === "en" ? yearRange : engToNepNumberFullDate(yearRange);
}, [currentYearRangeIndex, lang]);
const isPrevDisabled = () => {
switch (selectionMode) {
case "month":
return !canGoPrevYear();
case "year":
return !canGoPrevDecade();
case "day":
default:
return !canGoPrevMonth();
}
};
const isNextDisabled = () => {
switch (selectionMode) {
case "month":
return !canGoNextYear();
case "year":
return !canGoNextDecade();
case "day":
default:
return !canGoNextMonth();
}
};
const onNextClick = () => {
switch (selectionMode) {
case "month":
nextYear();
break;
case "year":
nextDecade();
break;
case "day":
default:
nextMonth();
break;
}
};
const onPrevClicked = () => {
switch (selectionMode) {
case "month":
prevYear();
break;
case "year":
prevDecade();
break;
case "day":
default:
prevMonth();
break;
}
};
const onMonthSelectClicked = () => {
setSelectionMode("month");
};
const onYearSelectClicked = () => {
setSelectionMode("year");
};
const getHeaderYearText = () => {
return lang === "en" ? padFourNumber(selectedMonthYear?.year || 1) : engToNepaliNumber(padFourNumber(selectedMonthYear?.year || 1));
};
const getHeaderMonthText = () => {
if (type === "BS") {
return (lang === "en" ? import_nepali_date3.ENGLISH_NEPALI_MONTH : import_nepali_date3.NEPALI_MONTH)[selectedMonthYear?.month || 0];
} else {
return (lang === "en" ? import_nepali_date3.AD_MONTH : import_nepali_date3.AD_MONTH_NEPALI)[selectedMonthYear?.month || 0];
}
};
const selectToday = () => {
onChange?.(today);
};
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_framer_motion.AnimatePresence, { children: show && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
import_react_portal.Portal,
{
tabIndex: -1,
className: cn(
"zener-date-picker zener-pointer-events-auto zener-absolute zener-z-[9999999999999999999] zener-min-w-[282px] zener-left-0 zener-top-0",
portalClassName || "zener-font-sans zener-mt-1"
),
style: {
transform: `translate(${bounds.left}px,${bounds.height + bounds.top}px)`
},
ref: portalRef,
children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
import_framer_motion.motion.div,
{
...animation || (animation === null ? {} : {
initial: { opacity: 0, translateY: -5 },
animate: { opacity: 1, translateY: 0 },
exit: { opacity: 0, translateY: -5 },
transition: { duration: 0.2 }
}),
className: cn(
"zener-overflow-hidden zener-h-full",
menuContainerClassName || "zener-bg-menu-container-bg zener-rounded-md zener-shadow-menu zener-text-menu-container-text"
),
children: [
components?.header ? components.header({
prevClick: onPrevClicked,
nextClick: onNextClick,
prevDisabled: isPrevDisabled(),
nextDisabled: isNextDisabled(),
selectionMode,
onMonthSelectClicked,
onYearSelectClicked,
monthText: getHeaderMonthText(),
yearText: getHeaderYearText(),
monthNumber: selectedMonthYear?.month || 0,
yearRange: getDecadeRange(currentYearRangeIndex),
yearNumber: selectedMonthYear?.year || 0,
yearRangeText: getYearRange
}) : /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "zener-flex zener-flex-row zener-items-center zener-text-sm zener-justify-between zener-py-2 zener-border-0 zener-border-b zener-border-b-menu-container-top-bottom-border zener-border-solid", children: [
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
"button",
{
className: cn(
"month-prev-button zener-p-2 zener-text-menu-header-icon hover:zener-text-menu-header-icon-hover disabled:zener-text-menu-header-icon-disabled",
{
"zener-cursor-pointer": !isPrevDisabled(),
"!zener-cursor-default": isPrevDisabled()
}
),
disabled: isPrevDisabled(),
onClick: onPrevClicked,
tabIndex: -1,
children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(PreviousIcon, { size: 20 })
}
),
(selectionMode === "day" || selectionMode === "month") && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "zener-font-semibold zener-flex zener-flex-row zener-items-center", children: [
selectionMode === "day" && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
"button",
{
tabIndex: -1,
className: "zener-py-1 zener-px-1.5 zener-rounded zener-cursor-pointer hover:zener-bg-menu-container-item-hover",
onClick: onMonthSelectClicked,
children: getHeaderMonthText()
}
),
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
"button",
{
tabIndex: -1,
className: "zener-py-1 zener-px-1.5 zener-rounded zener-cursor-pointer hover:zener-bg-menu-container-item-hover",
onClick: onYearSelectClicked,
children: getHeaderYearText()
}
)
] }),
selectionMode === "year" && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "zener-cursor-default zener-font-semibold zener-flex zener-flex-row zener-items-center", children: getYearRange }),
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
"button",
{
className: cn(
"month-next-button zener-p-2 zener-text-menu-header-icon hover:zener-text-menu-header-icon-hover disabled:zener-text-menu-header-icon-disabled",
{
"zener-cursor-pointer": !isNextDisabled(),
"!zener-cursor-default": isNextDisabled()
}
),
tabIndex: -1,
disabled: isNextDisabled(),
onClick: onNextClick,
children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(NextIcon, { size: 20 })
}
)
] }),
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: cn(calendarClassName || "zener-p-2"), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("table", { className: "zener-w-full zener-h-full zener-border-collapse", children: getSelectionContent }) }),
components?.footer ? components.footer({
onTodayClick: selectToday,
todayText
}) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "zener-flex zener-flex-row zener-items-center zener-justify-center zener-border-0 zener-border-t zener-border-solid zener-border-t-menu-container-top-bottom-border", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
"button",
{
className: "zener-text-menu-footer-today zener-font-normal !zener-text-sm zener-p-2 hover:zener-text-menu-footer-today-hover",
onClick: selectToday,
children: todayText
}
) })
]
}
)
}
) });
};
var menu_default = Menu;
// src/utils/use-bounds.ts
var import_react2 = require("react");
var getPosition = (target) => {
const { left, top, height, width } = target.getBoundingClientRect();
return {
left: left + window.pageXOffset,
top: top + window.pageYOffset,
width,
height
};
};
var useBounds = (inputRef, deps) => {
const [bounds, setBounds] = (0, import_react2.useState)({
left: 0,
top: 0,
height: 0,
width: 0
});
const boundRef = (0, import_react2.useRef)({
left: 0,
top: 0,
height: 0,
width: 0
});
(0, import_react2.useLayoutEffect)(() => {
const resizeListener = () => {
if (inputRef && inputRef.current) {
const b = getPosition(inputRef.current);
setBounds(b);
boundRef.current = b;
}
};
window.addEventListener("resize", resizeListener);
resizeListener();
return () => {
window.removeEventListener("resize", resizeListener);
};
}, [inputRef.current]);
(0, import_react2.useLayoutEffect)(() => {
if (inputRef && inputRef.current) {
const b = getPosition(inputRef.current);
setBounds(b);
boundRef.current = b;
}
let int = 0;
if (deps.some((e) => !!e)) {
int = setInterval(() => {
const b = getPosition(inputRef.current);
if (JSON.stringify(b) !== JSON.stringify(boundRef.current)) {
setBounds(b);
boundRef.current = b;
}
}, 50);
} else {
clearInterval(int);
}
return () => {
clearInterval(int);
};
}, [inputRef.current, ...deps]);
return { bounds, getPosition, setBounds };
};
var use_bounds_default = useBounds;
// src/datepicker/nepali-date-picker.tsx
var import_jsx_runtime3 = require("react/jsx-runtime");
var NepaliDatePicker = ({
type = "BS",
open,
disabled,
placeholder,
onChange,
className,
value,
lang = "np",
menuContainerClassName,
calendarClassName,
portalClassName,
components,
prefix,
suffix,
showclear = true,
converterMode,
animation,
format = "YYYY-MM-DD",
max,
min
}) => {
const inputRef = (0, import_react3.useRef)(null);
const containerRef = (0, import_react3.useRef)(null);
const portalRef = (0, import_react3.useRef)(null);
const [show, setShow] = (0, import_react3.useState)(false);
const [selectedDate, setSelectedDate] = (0, import_react3.useState)();
const [inputValue, setInputValue] = (0, import_react3.useState)("");
const [today, setToday] = (0, import_react3.useState)(
type === "BS" ? new import_nepali_date4.default() : /* @__PURE__ */ new Date()
);
const { bounds } = use_bounds_default(containerRef, [show, open]);
(0, import_react3.useEffect)(() => {
setToday(type === "BS" ? new import_nepali_date4.default() : /* @__PURE__ */ new Date());
}, []);
(0, import_react3.useEffect)(() => {
setToday(type === "BS" ? new import_nepali_date4.default() : /* @__PURE__ */ new Date());
}, [type]);
(0, import_react3.useEffect)(() => {
if (selectedDate) {
if (type === "BS") {
setInputValue(selectedDate.format(format, lang));
} else {
setInputValue((0, import_nepali_date4.formatADDate)(selectedDate, format, lang));
}
} else {
setInputValue("");
}
}, [selectedDate]);
const closeMenu = () => {
if (!open) {
setShow(false);
}
};
(0, import_react3.useLayoutEffect)(() => {
setShow(!!open);
}, [open]);
(0, import_react3.useEffect)(() => {
if (value) {
switch (type) {
case "AD":
if (typeof value === "string" || value instanceof Date) {
setSelectedDate(new Date(value));
}
break;
case "BS":
default:
if (typeof value === "string" || value instanceof import_nepali_date4.default) {
setSelectedDate(new import_nepali_date4.default(value));
}
break;
}
} else {
setSelectedDate(null);
}
}, [value, lang, type, format]);
const setFocus = () => {
if (disabled) {
return;
}
if (className && typeof className === "function" && !!className().focus) {
containerRef.current?.classList.add(
...className().focus?.split(" ") || [""]
);
}
};
const removeFocus = () => {
if (className && typeof className === "function" && !!className().focus) {
containerRef.current?.classList.remove(
...className().focus?.split(" ") || [""]
);
containerRef.current?.classList.add(
...className().default?.split(" ") || [""]
);
}
};
const clear = () => {
setSelectedDate(void 0);
onChange?.(null);
};
return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "zener-w-full", children: [
/* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
"div",
{
ref: containerRef,
className: cn(
"zener-relative zener-flex zener-flex-row zener-items-center",
{
"zener-text-input-disabled-text zener-bg-input-disabled-bg zener-border-input-disabled-border": !className && !!disabled
},
className && typeof className === "function" ? `${disabled ? className().disabled : className().default}` : className || `${!disabled ? "focus:zener-ring-1 focus:zener-ring-input-focus-ring focus-within:zener-ring-1 focus-within:zener-ring-input-focus-ring" : ""} zener-font-sans zener-bg-input-bg zener-text-sm zener-px-2 zener-py-0.5 zener-border-solid zener-border zener-border-input-border zener-rounded zener-min-w-[122px] zener-outline-none zener-w-full zener-text-input-text`
),
onFocus: () => {
if (disabled) {
return;
}
setFocus();
},
onBlur: () => {
removeFocus();
},
children: [
prefix && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { children: prefix }),
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
"input",
{
className: "zener-outline-none focus-visible:zener-outline-none focus:zener-outline-none focus-within:zener-outline-none zener-border-0 zener-w-fit zener-bg-transparent zener-flex-1 zener-text-inherit zener-min-h-[24px]",
size: 10,
tabIndex: 0,
ref: inputRef,
type: "text",
disabled,
readOnly: true,
onClick: () => {
if (!disabled) {
if (!open) {
setShow((prev) => !prev);
}
}
},
onBlur: (e) => {
const rT = e.relatedTarget;
const isInMenu = portalRef.current?.contains(rT);
if (isInMenu) {
inputRef.current?.focus();
return;
}
if (!inputValue && selectedDate) {
setInputValue(selectedDate.toString());
}
removeFocus();
closeMenu();
},
onFocus: () => {
if (disabled) {
return;
}
setFocus();
},
value: inputValue,
onKeyDown: (e) => {
if (disabled) {
return;
}
const { code, ctrlKey } = e;
switch (code) {
case "ArrowUp":
case "ArrowDown":
e.preventDefault();
if (!show) {
setShow(true);
break;
}
break;
case "Space":
if (ctrlKey) {
e.preventDefault();
if (show) {
setShow(false);
} else {
setShow(true);
}
}
break;
case "Escape":
e.preventDefault();
closeMenu();
break;
default:
break;
}
},
placeholder
}
),
suffix?.({
onClear: clear,
isOpen: show || !!open,
showclear
}) || /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
"div",
{
tabIndex: -1,
className: "zener-flex zener-flex-row zener-items-center gap-2 zener-h-full zener-text-inherit",
children: showclear && !disabled && !!inputValue && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
"button",
{
"aria-label": "clear",
onClick: (e) => {
e.stopPropagation();
clear();
},
tabIndex: -1,
className: "zener-cursor-pointer zener-outline-none zener-border-0 zener-opacity-80 hover:zener-opacity-100 zener-transition-all zener-bg-transparent zener-flex zener-items-center zener-justify-center zener-text-inherit",
type: "button",
children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(CloseIcon, { size: 16 })
}
)
}
)
]
}
),
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
menu_default,
{
lang,
portalRef,
show,
bounds,