@sonygrg/nepali-datepicker 1.0.19 → 1.0.21

package/README.md

@@ -20,11 +20,18 @@ npm install react react-dom @mui/material @mui/x-date-pickers @emotion/react @em
 
 ```tsx
 import { useState } from "react";
-import { InputCalendar, type ParsedBSDate } from "@sonygrg/nepali-datepicker";
+import { InputCalendar } from "@sonygrg/nepali-datepicker";
 
 function App() {
-  const [date, setDate] = useState<ParsedBSDate | null>(null);
-  return <InputCalendar value={date} onChange={(value) => setDate(value)} />;
+  const [date, setDate] = useState<string | null>(null);
+
+  return (
+    <InputCalendar
+      value={date}
+      onChange={(value) => setDate(value)}
+      format="YYYY-MM-DD" // Accepts either "YYYY-MM-DD" or "YYYY/MM/DD"
+    />
+  );
 }
 
 export default App;
@@ -34,15 +41,14 @@ export default App;
 
 ### Props
 
-| Prop       | Type                                   | Description                                   |
-| ---------- | -------------------------------------- | --------------------------------------------- |
-| `value`    | `ParsedBSDate \| null`                 | The currently selected date (controlled mode) |
-| `onChange` | `(date: ParsedBSDate \| null) => void` | Called whenever the date changes              |
+| Prop       | Type                             | Description                                   |
+| ---------- | -------------------------------- | --------------------------------------------- |
+| `value`    | `string\| null`                  | The currently selected date (controlled mode) |
+| `onChange` | `(date: string \| null) => void` | Called whenever the date changes              |
+| `format`   | `"YYYY-MM-DD" \| "YYYY/MM/DD"`   | Format of the input and output date string    |
 
-`ParsedBSDate` is shaped like:
-\`\`\`ts
-{ year: number; month: number; day: number }
-\`\`\`
+[IMPORTANT]
+The format prop only accepts "YYYY-MM-DD" or "YYYY/MM/DD". Passing any other variations or custom formats will not work as expected.
 
 ## Features
 

package/dist/nepali-datepicker.cjs.js

@@ -3,4 +3,4 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=(e,t)=>
   <%s {...props} />
 React keys must be passed directly to JSX without using spread:
   let props = %s;
-  <%s key={someKey} {...props} />`,o,p,m,p),L[p+o]=!0)}if(p=null,i!==void 0&&(r(i),p=``+i),s(n)&&(r(n.key),p=``+n.key),`key`in n)for(var h in i={},n)h!==`key`&&(i[h]=n[h]);else i=n;return p&&c(i,typeof e==`function`?e.displayName||e.name||`Unknown`:e),u(e,p,i,a(),l,d)}function f(e){p(e)?e._store&&(e._store.validated=1):typeof e==`object`&&e&&e.$$typeof===E&&(e._payload.status===`fulfilled`?p(e._payload.value)&&e._payload.value._store&&(e._payload.value._store.validated=1):e._store&&(e._store.validated=1))}function p(e){return typeof e==`object`&&!!e&&e.$$typeof===h}var m=require("react"),h=Symbol.for(`react.transitional.element`),g=Symbol.for(`react.portal`),_=Symbol.for(`react.fragment`),v=Symbol.for(`react.strict_mode`),y=Symbol.for(`react.profiler`),b=Symbol.for(`react.consumer`),x=Symbol.for(`react.context`),S=Symbol.for(`react.forward_ref`),C=Symbol.for(`react.suspense`),w=Symbol.for(`react.suspense_list`),T=Symbol.for(`react.memo`),E=Symbol.for(`react.lazy`),D=Symbol.for(`react.activity`),O=Symbol.for(`react.client.reference`),k=m.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,A=Object.prototype.hasOwnProperty,j=Array.isArray,M=console.createTask?console.createTask:function(){return null};m={react_stack_bottom_frame:function(e){return e()}};var N,P={},F=m.react_stack_bottom_frame.bind(m,o)(),I=M(i(o)),L={};e.Fragment=_,e.jsx=function(e,t,n){var r=1e4>k.recentlyCreatedOwnerStacks++;return d(e,t,n,!1,r?Error(`react-stack-top-frame`):F,r?M(i(e)):I)},e.jsxs=function(e,t,n){var r=1e4>k.recentlyCreatedOwnerStacks++;return d(e,t,n,!0,r?Error(`react-stack-top-frame`):F,r?M(i(e)):I)}})()})),x=e(((e,t)=>{process.env.NODE_ENV===`production`?t.exports=y():t.exports=b()}))();function S({onSelectDate:e,selectDate:n}){let[s,c]=(0,r.useState)(()=>n?.year??2083),[l,u]=(0,r.useState)(()=>n?.month??1);(0,r.useEffect)(()=>{if(!n)return;let e=setTimeout(()=>{c(n.year),u(n.month)},0);return()=>clearTimeout(e)},[n]);let d=Object.keys(i).map(Number),p=i[String(s)]?.[a[l-1]]??30,m=f(s,l),g=()=>{l===1?(u(12),c(e=>e-1)):u(e=>e-1)},_=()=>{l===12?(u(1),c(e=>e+1)):u(e=>e+1)},v=s===2e3&&l===1,y=s===2090&&l===12,b=[...Array(m).fill(null),...Array.from({length:p},(e,t)=>t+1)];return(0,x.jsxs)(t.Card,{sx:{p:`20px`,display:`flex`,flexDirection:`column`,gap:`10px`},children:[(0,x.jsxs)(t.Box,{sx:{display:`flex`,alignItems:`center`,justifyContent:`center`,gap:`4px`,mb:`8px`},children:[(0,x.jsx)(t.IconButton,{onClick:g,disabled:v,children:`‹`}),(0,x.jsx)(t.Select,{value:s,onChange:e=>{c(Number(e.target.value))},size:`small`,MenuProps:{slotProps:{paper:{sx:{maxHeight:250}}}},sx:{minWidth:90},children:d.map(e=>(0,x.jsx)(t.MenuItem,{value:e,children:h(e)},e))}),(0,x.jsx)(t.Select,{value:l,onChange:e=>u(Number(e.target.value)),MenuProps:{slotProps:{paper:{sx:{maxHeight:250}}}},sx:{minWidth:90},size:`small`,children:o.month.long.map((e,n)=>(0,x.jsx)(t.MenuItem,{value:n+1,children:e},e))}),(0,x.jsx)(t.IconButton,{onClick:_,disabled:y,children:`›`})]}),(0,x.jsxs)(t.Box,{sx:{display:`grid`,gridTemplateColumns:`repeat(7, 1fr)`,textAlign:`center`,gap:2},children:[o.day.short.map(e=>(0,x.jsx)(t.Box,{children:(0,x.jsx)(t.Typography,{variant:`caption`,sx:{fontSize:`14px`},children:e})},e)),b.map((r,i)=>{let a=n&&n.day===r&&n.month===l&&n.year===s;return(0,x.jsx)(t.Box,{children:r&&(0,x.jsx)(t.Box,{onClick:()=>{r!==null&&e({year:s,month:l,day:r})},sx:{cursor:`pointer`,bgcolor:a?`primary.main`:`transparent`,color:a?`#fff`:`text.primary`,borderRadius:`50%`,height:`32px`,width:`32px`,display:`flex`,justifyContent:`center`,alignItems:`center`},children:h(r)})},i)})]})]})}function C(e,t=`-`){let n=_(e).split(t);if(n.length!==3||n[0].length!==4)return null;let r=parseInt(n[0],10),o=parseInt(n[1],10),s=parseInt(n[2],10);if(isNaN(r)||isNaN(o)||isNaN(s))return null;let c=i[String(r)]?.[a[o-1]];return!c||o<1||o>12||s<1||s>c?null:{year:r,month:o,day:s}}function w({value:e,onChange:i,format:a=`YYYY-MM-DD`}){let[o,s]=(0,r.useState)(null),[c,l]=(0,r.useState)(``),[u,d]=(0,r.useState)(null),f=a.includes(`-`)?`-`:`/`,p=e===void 0?u:e,m=p?C(p,f):null,h=(0,r.useRef)(null),y=(0,r.useRef)(null),b=(0,r.useRef)(null),w=e=>{let t=e?g(e,a):null;d(t),i?.(t)},T=()=>{let e=C(c,f);e?w(e):c&&w(null),l(``)},E=[`-`,`/`];return(0,r.useLayoutEffect)(()=>{y.current&&b.current!==null&&y.current.setSelectionRange(b.current,b.current)},[c]),(0,x.jsx)(`div`,{children:(0,x.jsxs)(t.Box,{sx:{m:`0px`},children:[(0,x.jsx)(t.Box,{ref:h,children:(0,x.jsx)(t.TextField,{label:p?``:`मिति छान्‍नुहोस्  `,size:`small`,sx:{" .MuiInputBase-input":{height:`20px`}},value:c?v(c):p||``,placeholder:a,onChange:e=>{let t=e.target,n=t.selectionStart??0,r=_(t.value);r=r.split(``).map(e=>E.includes(e)?f:e).filter(e=>e>=`0`&&e<=`9`||e===f).join(``);let i=r.length;(r.length===4&&!r.includes(f)||r.length===7&&r.split(f).length===2)&&(r+=f),r.length>i&&n===i&&(n+=1),b.current=n,l(r.slice(0,10))},onFocus:()=>{if(m&&!c){let e=m.year;l(`${e}${f}${String(m.month).padStart(2,`0`)}${f}${String(m.day).padStart(2,`0`)}`)}},onBlur:T,onKeyDown:e=>{e.key===`Enter`&&T()},slotProps:{input:{inputRef:y,sx:{pl:`8px`,fontSize:`18px`},endAdornment:(0,x.jsx)(t.InputAdornment,{position:`end`,children:(0,x.jsx)(t.IconButton,{onClick:()=>s(h.current),children:(0,x.jsx)(n.CalendarIcon,{})})})}}})}),(0,x.jsx)(t.Popover,{open:!!o,anchorEl:o,onClose:()=>s(null),anchorOrigin:{vertical:`bottom`,horizontal:`left`},children:(0,x.jsx)(S,{selectDate:m,onSelectDate:e=>{w(e),l(``),s(null)}})})]})})}exports.InputCalendar=w,exports.formatBSDateNepali=g;
+  <%s key={someKey} {...props} />`,o,p,m,p),L[p+o]=!0)}if(p=null,i!==void 0&&(r(i),p=``+i),s(n)&&(r(n.key),p=``+n.key),`key`in n)for(var h in i={},n)h!==`key`&&(i[h]=n[h]);else i=n;return p&&c(i,typeof e==`function`?e.displayName||e.name||`Unknown`:e),u(e,p,i,a(),l,d)}function f(e){p(e)?e._store&&(e._store.validated=1):typeof e==`object`&&e&&e.$$typeof===E&&(e._payload.status===`fulfilled`?p(e._payload.value)&&e._payload.value._store&&(e._payload.value._store.validated=1):e._store&&(e._store.validated=1))}function p(e){return typeof e==`object`&&!!e&&e.$$typeof===h}var m=require("react"),h=Symbol.for(`react.transitional.element`),g=Symbol.for(`react.portal`),_=Symbol.for(`react.fragment`),v=Symbol.for(`react.strict_mode`),y=Symbol.for(`react.profiler`),b=Symbol.for(`react.consumer`),x=Symbol.for(`react.context`),S=Symbol.for(`react.forward_ref`),C=Symbol.for(`react.suspense`),w=Symbol.for(`react.suspense_list`),T=Symbol.for(`react.memo`),E=Symbol.for(`react.lazy`),D=Symbol.for(`react.activity`),O=Symbol.for(`react.client.reference`),k=m.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,A=Object.prototype.hasOwnProperty,j=Array.isArray,M=console.createTask?console.createTask:function(){return null};m={react_stack_bottom_frame:function(e){return e()}};var N,P={},F=m.react_stack_bottom_frame.bind(m,o)(),I=M(i(o)),L={};e.Fragment=_,e.jsx=function(e,t,n){var r=1e4>k.recentlyCreatedOwnerStacks++;return d(e,t,n,!1,r?Error(`react-stack-top-frame`):F,r?M(i(e)):I)},e.jsxs=function(e,t,n){var r=1e4>k.recentlyCreatedOwnerStacks++;return d(e,t,n,!0,r?Error(`react-stack-top-frame`):F,r?M(i(e)):I)}})()})),x=e(((e,t)=>{process.env.NODE_ENV===`production`?t.exports=y():t.exports=b()}))();function S({onSelectDate:e,selectDate:n}){let[s,c]=(0,r.useState)(()=>n?.year??2083),[l,u]=(0,r.useState)(()=>n?.month??1);(0,r.useEffect)(()=>{if(!n)return;let e=setTimeout(()=>{c(n.year),u(n.month)},0);return()=>clearTimeout(e)},[n]);let d=Object.keys(i).map(Number),p=i[String(s)]?.[a[l-1]]??30,m=f(s,l),g=()=>{l===1?(u(12),c(e=>e-1)):u(e=>e-1)},_=()=>{l===12?(u(1),c(e=>e+1)):u(e=>e+1)},v=s===2e3&&l===1,y=s===2090&&l===12,b=[...Array(m).fill(null),...Array.from({length:p},(e,t)=>t+1)];return(0,x.jsxs)(t.Card,{sx:{p:`10px`,display:`flex`,flexDirection:`column`,gap:`10px`},children:[(0,x.jsxs)(t.Box,{sx:{display:`flex`,alignItems:`center`,justifyContent:`center`,gap:`4px`,mb:`8px`},children:[(0,x.jsx)(t.IconButton,{onClick:g,disabled:v,children:`‹`}),(0,x.jsx)(t.Select,{value:s,onChange:e=>{c(Number(e.target.value))},size:`small`,MenuProps:{slotProps:{paper:{sx:{maxHeight:250}}}},sx:{minWidth:90},children:d.map(e=>(0,x.jsx)(t.MenuItem,{value:e,children:h(e)},e))}),(0,x.jsx)(t.Select,{value:l,onChange:e=>u(Number(e.target.value)),MenuProps:{slotProps:{paper:{sx:{maxHeight:250}}}},sx:{minWidth:90},size:`small`,children:o.month.long.map((e,n)=>(0,x.jsx)(t.MenuItem,{value:n+1,children:e},e))}),(0,x.jsx)(t.IconButton,{onClick:_,disabled:y,children:`›`})]}),(0,x.jsxs)(t.Box,{sx:{display:`grid`,gridTemplateColumns:`repeat(7, 1fr)`,textAlign:`center`,gap:2},children:[o.day.short.map(e=>(0,x.jsx)(t.Box,{children:(0,x.jsx)(t.Typography,{variant:`caption`,sx:{fontSize:`14px`},children:e})},e)),b.map((r,i)=>{let a=n&&n.day===r&&n.month===l&&n.year===s;return(0,x.jsx)(t.Box,{children:r&&(0,x.jsx)(t.Box,{onClick:()=>{r!==null&&e({year:s,month:l,day:r})},sx:{cursor:`pointer`,bgcolor:a?`primary.main`:`transparent`,color:a?`#fff`:`text.primary`,borderRadius:`50%`,height:`32px`,width:`32px`,display:`flex`,justifyContent:`center`,alignItems:`center`},children:h(r)})},i)})]})]})}function C(e,t=`-`){let n=_(e).split(t);if(n.length!==3||n[0].length!==4)return null;let r=parseInt(n[0],10),o=parseInt(n[1],10),s=parseInt(n[2],10);if(isNaN(r)||isNaN(o)||isNaN(s))return null;let c=i[String(r)]?.[a[o-1]];return!c||o<1||o>12||s<1||s>c?null:{year:r,month:o,day:s}}function w({value:e,onChange:i,format:a=`YYYY/MM/DD`}){let[o,s]=(0,r.useState)(null),[c,l]=(0,r.useState)(``),[u,d]=(0,r.useState)(null),f=[`-`,`/`],p=a.includes(`-`)?`-`:`/`,m=e===void 0?u:e,h=m?C(m,p):null,y=(0,r.useRef)(null),b=(0,r.useRef)(null),w=(0,r.useRef)(null),T=e=>{let t=e?g(e,a):null;d(t),i?.(t)},E=()=>{let e=C(c,p);e?T(e):c&&T(null),l(``)};return(0,r.useLayoutEffect)(()=>{b.current&&w.current!==null&&b.current.setSelectionRange(w.current,w.current)},[c]),(0,x.jsx)(`div`,{children:(0,x.jsxs)(t.Box,{sx:{m:`0px`},children:[(0,x.jsx)(t.Box,{ref:y,children:(0,x.jsx)(t.TextField,{label:m?``:`मिति छान्‍नुहोस्  `,size:`small`,sx:{" .MuiInputBase-input":{height:`20px`}},value:c?v(c):m||``,placeholder:a,onChange:e=>{let t=e.target,n=t.selectionStart??0,r=_(t.value);r=r.split(``).map(e=>f.includes(e)?p:e).filter(e=>e>=`0`&&e<=`9`||e===p).join(``);let i=r.length;(r.length===4&&!r.includes(p)||r.length===7&&r.split(p).length===2)&&(r+=p),r.length>i&&n===i&&(n+=1),w.current=n,l(r.slice(0,10))},onFocus:()=>{if(h&&!c){let e=h.year;l(`${e}${p}${String(h.month).padStart(2,`0`)}${p}${String(h.day).padStart(2,`0`)}`)}},onBlur:E,onKeyDown:e=>{e.key===`Enter`&&E()},slotProps:{input:{inputRef:b,sx:{pl:`8px`,fontSize:`18px`},endAdornment:(0,x.jsx)(t.InputAdornment,{position:`end`,children:(0,x.jsx)(t.IconButton,{onClick:()=>s(y.current),children:(0,x.jsx)(n.CalendarIcon,{})})})}}})}),(0,x.jsx)(t.Popover,{open:!!o,anchorEl:o,onClose:()=>s(null),anchorOrigin:{vertical:`bottom`,horizontal:`left`},children:(0,x.jsx)(S,{selectDate:h,onSelectDate:e=>{T(e),l(``),s(null)}})})]})})}exports.InputCalendar=w,exports.formatBSDateNepali=g;

package/dist/nepali-datepicker.es.js

@@ -1617,7 +1617,7 @@ function F({ onSelectDate: r, selectDate: a }) {
 	}, S = s === 2e3 && u === 1, C = s === 2090 && u === 12, T = [...Array(y).fill(null), ...Array.from({ length: h }, (e, t) => t + 1)];
 	return /* @__PURE__ */ (0, P.jsxs)(t, {
 		sx: {
-			p: "20px",
+			p: "10px",
 			display: "flex",
 			flexDirection: "column",
 			gap: "10px"
@@ -1720,44 +1720,44 @@ function I(e, t = "-") {
 }
 //#endregion
 //#region src/components/InputCalendar.tsx
-function L({ value: t, onChange: i, format: o = "YYYY-MM-DD" }) {
-	let [c, u] = m(null), [d, h] = m(""), [g, _] = m(null), v = o.includes("-") ? "-" : "/", y = t === void 0 ? g : t, b = y ? I(y, v) : null, x = p(null), S = p(null), C = p(null), w = (e) => {
+function L({ value: t, onChange: i, format: o = "YYYY/MM/DD" }) {
+	let [c, u] = m(null), [d, h] = m(""), [g, _] = m(null), v = ["-", "/"], y = o.includes("-") ? "-" : "/", b = t === void 0 ? g : t, x = b ? I(b, y) : null, S = p(null), C = p(null), w = p(null), T = (e) => {
 		let t = e ? O(e, o) : null;
 		_(t), i?.(t);
-	}, T = () => {
-		let e = I(d, v);
-		e ? w(e) : d && w(null), h("");
-	}, E = ["-", "/"];
+	}, E = () => {
+		let e = I(d, y);
+		e ? T(e) : d && T(null), h("");
+	};
 	return f(() => {
-		S.current && C.current !== null && S.current.setSelectionRange(C.current, C.current);
+		C.current && w.current !== null && C.current.setSelectionRange(w.current, w.current);
 	}, [d]), /* @__PURE__ */ (0, P.jsx)("div", { children: /* @__PURE__ */ (0, P.jsxs)(e, {
 		sx: { m: "0px" },
 		children: [/* @__PURE__ */ (0, P.jsx)(e, {
-			ref: x,
+			ref: S,
 			children: /* @__PURE__ */ (0, P.jsx)(s, {
-				label: y ? "" : "मिति छान्‍नुहोस्  ",
+				label: b ? "" : "मिति छान्‍नुहोस्  ",
 				size: "small",
 				sx: { " .MuiInputBase-input": { height: "20px" } },
-				value: d ? A(d) : y || "",
+				value: d ? A(d) : b || "",
 				placeholder: o,
 				onChange: (e) => {
 					let t = e.target, n = t.selectionStart ?? 0, r = k(t.value);
-					r = r.split("").map((e) => E.includes(e) ? v : e).filter((e) => e >= "0" && e <= "9" || e === v).join("");
+					r = r.split("").map((e) => v.includes(e) ? y : e).filter((e) => e >= "0" && e <= "9" || e === y).join("");
 					let i = r.length;
-					(r.length === 4 && !r.includes(v) || r.length === 7 && r.split(v).length === 2) && (r += v), r.length > i && n === i && (n += 1), C.current = n, h(r.slice(0, 10));
+					(r.length === 4 && !r.includes(y) || r.length === 7 && r.split(y).length === 2) && (r += y), r.length > i && n === i && (n += 1), w.current = n, h(r.slice(0, 10));
 				},
 				onFocus: () => {
-					if (b && !d) {
-						let e = b.year;
-						h(`${e}${v}${String(b.month).padStart(2, "0")}${v}${String(b.day).padStart(2, "0")}`);
+					if (x && !d) {
+						let e = x.year;
+						h(`${e}${y}${String(x.month).padStart(2, "0")}${y}${String(x.day).padStart(2, "0")}`);
 					}
 				},
-				onBlur: T,
+				onBlur: E,
 				onKeyDown: (e) => {
-					e.key === "Enter" && T();
+					e.key === "Enter" && E();
 				},
 				slotProps: { input: {
-					inputRef: S,
+					inputRef: C,
 					sx: {
 						pl: "8px",
 						fontSize: "18px"
@@ -1765,7 +1765,7 @@ function L({ value: t, onChange: i, format: o = "YYYY-MM-DD" }) {
 					endAdornment: /* @__PURE__ */ (0, P.jsx)(r, {
 						position: "end",
 						children: /* @__PURE__ */ (0, P.jsx)(n, {
-							onClick: () => u(x.current),
+							onClick: () => u(S.current),
 							children: /* @__PURE__ */ (0, P.jsx)(l, {})
 						})
 					})
@@ -1780,9 +1780,9 @@ function L({ value: t, onChange: i, format: o = "YYYY-MM-DD" }) {
 				horizontal: "left"
 			},
 			children: /* @__PURE__ */ (0, P.jsx)(F, {
-				selectDate: b,
+				selectDate: x,
 				onSelectDate: (e) => {
-					w(e), h(""), u(null);
+					T(e), h(""), u(null);
 				}
 			})
 		})]

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sonygrg/nepali-datepicker",
   "private": false,
-  "version": "1.0.19",
+  "version": "1.0.21",
   "type": "module",
   "main": "./dist/nepali-datepicker.cjs.js",
   "module": "./dist/nepali-datepicker.es.js",