UNPKG

custom-date-selector

Version:

A custom date picker component

849 lines (846 loc) 33.7 kB
(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode(".outer-container{position:relative;height:100%}.date-input-field{height:36px;width:100%;padding:0 10px;font-size:16px;border-radius:5px}.calendar-icon{fill:#8e8e8e;cursor:pointer;height:30px;width:30px;position:absolute;top:3px;right:5px}.calendar-icon:hover{fill:#494949}.calendar-container{background-color:#fff;z-index:10;box-shadow:#32325d40 0 6px 12px -2px,#0000004d 0 3px 7px -3px;border-radius:8px;display:grid;grid-template-rows:0fr;grid-template-columns:0fr;position:fixed;transition:grid-template-rows .2s,grid-template-columns .2s,min-width .2s}.calendar-container .calendar{padding:0}.calendar-container.open{grid-template-rows:1fr;grid-template-columns:1fr;min-width:290px}.calendar-container.open .calendar{padding:0 10px 10px}.calendar{display:grid;grid-template-rows:repeat(3,auto);gap:5px;overflow:hidden}.week-day-conatainer,.days-container{width:100%;display:grid;grid-template-columns:repeat(7,1fr);gap:5px 10px}.empty-day{border:none}.week-header{font-weight:700;font-size:14px;text-align:center;-webkit-user-select:none;user-select:none}.week-day,.week-end,.current-day,.selected-date{border:1px solid #7b7b7b;padding:5px;cursor:pointer;border-radius:50%;text-align:center;color:#494949;font-size:14px;height:30px;-webkit-user-select:none;user-select:none}.selected-date,.picked-year,.picked-month{background-color:#006bbd;color:#fff;border-color:#006bbd;transition:all .2s}.current-day{background-color:#d3d3d3;border-color:#d3d3d3}.selected-month,.selected-year{-webkit-user-select:none;user-select:none;padding:3px 10px}.week-day:hover,.selected-month:hover,.selected-year:hover,.year:hover,.month:hover{background-color:#d3d3d3}.week-day:active,.selected-month:active,.selected-year:active,.year:active{background-color:#adadad}.picked-year:hover,.picked-month:hover{background-color:#014375;color:#fff}.disabled-day{color:#b3b3bb;border-color:#c8c8c8;cursor:not-allowed;pointer-events:none}.picker{grid-column:1 / -1;width:100%;display:grid;grid-template-columns:auto auto 1fr;padding:5px 5px 0;align-items:center}.month-changer{display:flex;gap:5px;align-items:center;justify-content:flex-end}.selected-year,.selected-month{cursor:pointer;padding:0 5px;border-radius:3px}.icon-conatainer{cursor:pointer;height:28px;width:28px;display:flex;align-items:center;justify-content:center;border-radius:50%}.icon-conatainer svg{height:16px;width:14px;fill:#8a8a8a}.diabled-icon{background:none}.diabled-icon svg{fill:#c5c5c5}.icon-conatainer:hover{background-color:#d3d3d3}.icon-conatainer:hover svg{fill:#494949}.diabled-icon:hover{background-color:#ececec}.diabled-icon:hover svg{fill:#b8b8b8}.icon-conatainer:active svg{fill:#ebebeb}.diabled-icon:active svg{fill:#b8b8b8}.years-container,.months-container{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;max-height:250px;overflow:hidden auto;padding:10px;border-radius:8px}.months-container{grid-template-columns:repeat(3,1fr);gap:10px}.year,.month{padding:2px 10px;border:1px solid #7b7b7b;cursor:pointer;text-align:center;-webkit-user-select:none;user-select:none;font-size:14px;border-radius:20px}.month{padding:5px 10px}.years-view{padding:0}")),document.head.appendChild(e)}}catch(r){console.error("vite-plugin-css-injected-by-js",r)}})(); import * as Ye from "react"; import Ve, { useState as z, useRef as Me, useEffect as X, useCallback as D } from "react"; var se = { exports: {} }, Z = {}; /** * @license React * react-jsx-runtime.production.min.js * * Copyright (c) Facebook, Inc. and its affiliates. * * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. */ var qe; function Rr() { if (qe) return Z; qe = 1; var a = Ve, u = Symbol.for("react.element"), l = Symbol.for("react.fragment"), i = Object.prototype.hasOwnProperty, o = a.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner, y = { key: !0, ref: !0, __self: !0, __source: !0 }; function j(P, m, _) { var b, T = {}, k = null, F = null; _ !== void 0 && (k = "" + _), m.key !== void 0 && (k = "" + m.key), m.ref !== void 0 && (F = m.ref); for (b in m) i.call(m, b) && !y.hasOwnProperty(b) && (T[b] = m[b]); if (P && P.defaultProps) for (b in m = P.defaultProps, m) T[b] === void 0 && (T[b] = m[b]); return { $$typeof: u, type: P, key: k, ref: F, props: T, _owner: o.current }; } return Z.Fragment = l, Z.jsx = j, Z.jsxs = j, Z; } var B = {}; /** * @license React * react-jsx-runtime.development.js * * Copyright (c) Facebook, Inc. and its affiliates. * * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. */ var Ae; function _r() { return Ae || (Ae = 1, process.env.NODE_ENV !== "production" && function() { var a = Ve, u = Symbol.for("react.element"), l = Symbol.for("react.portal"), i = Symbol.for("react.fragment"), o = Symbol.for("react.strict_mode"), y = Symbol.for("react.profiler"), j = Symbol.for("react.provider"), P = Symbol.for("react.context"), m = Symbol.for("react.forward_ref"), _ = Symbol.for("react.suspense"), b = Symbol.for("react.suspense_list"), T = Symbol.for("react.memo"), k = Symbol.for("react.lazy"), F = Symbol.for("react.offscreen"), M = Symbol.iterator, N = "@@iterator"; function W(e) { if (e === null || typeof e != "object") return null; var r = M && e[M] || e[N]; return typeof r == "function" ? r : null; } var p = a.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED; function v(e) { { for (var r = arguments.length, t = new Array(r > 1 ? r - 1 : 0), n = 1; n < r; n++) t[n - 1] = arguments[n]; f("error", e, t); } } function f(e, r, t) { { var n = p.ReactDebugCurrentFrame, d = n.getStackAddendum(); d !== "" && (r += "%s", t = t.concat([d])); var h = t.map(function(c) { return String(c); }); h.unshift("Warning: " + r), Function.prototype.apply.call(console[e], console, h); } } var O = !1, L = !1, Ue = !1, De = !1, Ze = !1, le; le = Symbol.for("react.module.reference"); function Be(e) { return !!(typeof e == "string" || typeof e == "function" || e === i || e === y || Ze || e === o || e === _ || e === b || De || e === F || O || L || Ue || typeof e == "object" && e !== null && (e.$$typeof === k || e.$$typeof === T || e.$$typeof === j || e.$$typeof === P || e.$$typeof === m || // This needs to include all possible module reference object // types supported by any Flight configuration anywhere since // we don't know which Flight build this will end up being used // with. e.$$typeof === le || e.getModuleId !== void 0)); } function Je(e, r, t) { var n = e.displayName; if (n) return n; var d = r.displayName || r.name || ""; return d !== "" ? t + "(" + d + ")" : t; } function ce(e) { return e.displayName || "Context"; } function x(e) { if (e == null) return null; if (typeof e.tag == "number" && v("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."), typeof e == "function") return e.displayName || e.name || null; if (typeof e == "string") return e; switch (e) { case i: return "Fragment"; case l: return "Portal"; case y: return "Profiler"; case o: return "StrictMode"; case _: return "Suspense"; case b: return "SuspenseList"; } if (typeof e == "object") switch (e.$$typeof) { case P: var r = e; return ce(r) + ".Consumer"; case j: var t = e; return ce(t._context) + ".Provider"; case m: return Je(e, e.render, "ForwardRef"); case T: var n = e.displayName || null; return n !== null ? n : x(e.type) || "Memo"; case k: { var d = e, h = d._payload, c = d._init; try { return x(c(h)); } catch { return null; } } } return null; } var q = Object.assign, V = 0, ue, fe, de, ve, he, ge, ye; function pe() { } pe.__reactDisabledLog = !0; function Ke() { { if (V === 0) { ue = console.log, fe = console.info, de = console.warn, ve = console.error, he = console.group, ge = console.groupCollapsed, ye = console.groupEnd; var e = { configurable: !0, enumerable: !0, value: pe, writable: !0 }; Object.defineProperties(console, { info: e, log: e, warn: e, error: e, group: e, groupCollapsed: e, groupEnd: e }); } V++; } } function Ge() { { if (V--, V === 0) { var e = { configurable: !0, enumerable: !0, writable: !0 }; Object.defineProperties(console, { log: q({}, e, { value: ue }), info: q({}, e, { value: fe }), warn: q({}, e, { value: de }), error: q({}, e, { value: ve }), group: q({}, e, { value: he }), groupCollapsed: q({}, e, { value: ge }), groupEnd: q({}, e, { value: ye }) }); } V < 0 && v("disabledDepth fell below zero. This is a bug in React. Please file an issue."); } } var Q = p.ReactCurrentDispatcher, ee; function J(e, r, t) { { if (ee === void 0) try { throw Error(); } catch (d) { var n = d.stack.trim().match(/\n( *(at )?)/); ee = n && n[1] || ""; } return ` ` + ee + e; } } var re = !1, K; { var He = typeof WeakMap == "function" ? WeakMap : Map; K = new He(); } function me(e, r) { if (!e || re) return ""; { var t = K.get(e); if (t !== void 0) return t; } var n; re = !0; var d = Error.prepareStackTrace; Error.prepareStackTrace = void 0; var h; h = Q.current, Q.current = null, Ke(); try { if (r) { var c = function() { throw Error(); }; if (Object.defineProperty(c.prototype, "props", { set: function() { throw Error(); } }), typeof Reflect == "object" && Reflect.construct) { try { Reflect.construct(c, []); } catch (C) { n = C; } Reflect.construct(e, [], c); } else { try { c.call(); } catch (C) { n = C; } e.call(c.prototype); } } else { try { throw Error(); } catch (C) { n = C; } e(); } } catch (C) { if (C && n && typeof C.stack == "string") { for (var s = C.stack.split(` `), w = n.stack.split(` `), E = s.length - 1, R = w.length - 1; E >= 1 && R >= 0 && s[E] !== w[R]; ) R--; for (; E >= 1 && R >= 0; E--, R--) if (s[E] !== w[R]) { if (E !== 1 || R !== 1) do if (E--, R--, R < 0 || s[E] !== w[R]) { var S = ` ` + s[E].replace(" at new ", " at "); return e.displayName && S.includes("<anonymous>") && (S = S.replace("<anonymous>", e.displayName)), typeof e == "function" && K.set(e, S), S; } while (E >= 1 && R >= 0); break; } } } finally { re = !1, Q.current = h, Ge(), Error.prepareStackTrace = d; } var I = e ? e.displayName || e.name : "", A = I ? J(I) : ""; return typeof e == "function" && K.set(e, A), A; } function ze(e, r, t) { return me(e, !1); } function Xe(e) { var r = e.prototype; return !!(r && r.isReactComponent); } function G(e, r, t) { if (e == null) return ""; if (typeof e == "function") return me(e, Xe(e)); if (typeof e == "string") return J(e); switch (e) { case _: return J("Suspense"); case b: return J("SuspenseList"); } if (typeof e == "object") switch (e.$$typeof) { case m: return ze(e.render); case T: return G(e.type, r, t); case k: { var n = e, d = n._payload, h = n._init; try { return G(h(d), r, t); } catch { } } } return ""; } var U = Object.prototype.hasOwnProperty, be = {}, Ee = p.ReactDebugCurrentFrame; function H(e) { if (e) { var r = e._owner, t = G(e.type, e._source, r ? r.type : null); Ee.setExtraStackFrame(t); } else Ee.setExtraStackFrame(null); } function Qe(e, r, t, n, d) { { var h = Function.call.bind(U); for (var c in e) if (h(e, c)) { var s = void 0; try { if (typeof e[c] != "function") { var w = Error((n || "React class") + ": " + t + " type `" + c + "` is invalid; it must be a function, usually from the `prop-types` package, but received `" + typeof e[c] + "`.This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`."); throw w.name = "Invariant Violation", w; } s = e[c](r, c, n, t, null, "SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"); } catch (E) { s = E; } s && !(s instanceof Error) && (H(d), v("%s: type specification of %s `%s` is invalid; the type checker function must return `null` or an `Error` but returned a %s. You may have forgotten to pass an argument to the type checker creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and shape all require an argument).", n || "React class", t, c, typeof s), H(null)), s instanceof Error && !(s.message in be) && (be[s.message] = !0, H(d), v("Failed %s type: %s", t, s.message), H(null)); } } } var er = Array.isArray; function te(e) { return er(e); } function rr(e) { { var r = typeof Symbol == "function" && Symbol.toStringTag, t = r && e[Symbol.toStringTag] || e.constructor.name || "Object"; return t; } } function tr(e) { try { return Re(e), !1; } catch { return !0; } } function Re(e) { return "" + e; } function _e(e) { if (tr(e)) return v("The provided key is an unsupported type %s. This value must be coerced to a string before before using it here.", rr(e)), Re(e); } var Te = p.ReactCurrentOwner, nr = { key: !0, ref: !0, __self: !0, __source: !0 }, we, Ce; function ar(e) { if (U.call(e, "ref")) { var r = Object.getOwnPropertyDescriptor(e, "ref").get; if (r && r.isReactWarning) return !1; } return e.ref !== void 0; } function or(e) { if (U.call(e, "key")) { var r = Object.getOwnPropertyDescriptor(e, "key").get; if (r && r.isReactWarning) return !1; } return e.key !== void 0; } function ir(e, r) { typeof e.ref == "string" && Te.current; } function sr(e, r) { { var t = function() { we || (we = !0, v("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://reactjs.org/link/special-props)", r)); }; t.isReactWarning = !0, Object.defineProperty(e, "key", { get: t, configurable: !0 }); } } function lr(e, r) { { var t = function() { Ce || (Ce = !0, v("%s: `ref` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://reactjs.org/link/special-props)", r)); }; t.isReactWarning = !0, Object.defineProperty(e, "ref", { get: t, configurable: !0 }); } } var cr = function(e, r, t, n, d, h, c) { var s = { // This tag allows us to uniquely identify this as a React Element $$typeof: u, // Built-in properties that belong on the element type: e, key: r, ref: t, props: c, // Record the component responsible for creating this element. _owner: h }; return s._store = {}, Object.defineProperty(s._store, "validated", { configurable: !1, enumerable: !1, writable: !0, value: !1 }), Object.defineProperty(s, "_self", { configurable: !1, enumerable: !1, writable: !1, value: n }), Object.defineProperty(s, "_source", { configurable: !1, enumerable: !1, writable: !1, value: d }), Object.freeze && (Object.freeze(s.props), Object.freeze(s)), s; }; function ur(e, r, t, n, d) { { var h, c = {}, s = null, w = null; t !== void 0 && (_e(t), s = "" + t), or(r) && (_e(r.key), s = "" + r.key), ar(r) && (w = r.ref, ir(r, d)); for (h in r) U.call(r, h) && !nr.hasOwnProperty(h) && (c[h] = r[h]); if (e && e.defaultProps) { var E = e.defaultProps; for (h in E) c[h] === void 0 && (c[h] = E[h]); } if (s || w) { var R = typeof e == "function" ? e.displayName || e.name || "Unknown" : e; s && sr(c, R), w && lr(c, R); } return cr(e, s, w, d, n, Te.current, c); } } var ne = p.ReactCurrentOwner, je = p.ReactDebugCurrentFrame; function $(e) { if (e) { var r = e._owner, t = G(e.type, e._source, r ? r.type : null); je.setExtraStackFrame(t); } else je.setExtraStackFrame(null); } var ae; ae = !1; function oe(e) { return typeof e == "object" && e !== null && e.$$typeof === u; } function ke() { { if (ne.current) { var e = x(ne.current.type); if (e) return ` Check the render method of \`` + e + "`."; } return ""; } } function fr(e) { return ""; } var Oe = {}; function dr(e) { { var r = ke(); if (!r) { var t = typeof e == "string" ? e : e.displayName || e.name; t && (r = ` Check the top-level render call using <` + t + ">."); } return r; } } function Se(e, r) { { if (!e._store || e._store.validated || e.key != null) return; e._store.validated = !0; var t = dr(r); if (Oe[t]) return; Oe[t] = !0; var n = ""; e && e._owner && e._owner !== ne.current && (n = " It was passed a child from " + x(e._owner.type) + "."), $(e), v('Each child in a list should have a unique "key" prop.%s%s See https://reactjs.org/link/warning-keys for more information.', t, n), $(null); } } function Pe(e, r) { { if (typeof e != "object") return; if (te(e)) for (var t = 0; t < e.length; t++) { var n = e[t]; oe(n) && Se(n, r); } else if (oe(e)) e._store && (e._store.validated = !0); else if (e) { var d = W(e); if (typeof d == "function" && d !== e.entries) for (var h = d.call(e), c; !(c = h.next()).done; ) oe(c.value) && Se(c.value, r); } } } function vr(e) { { var r = e.type; if (r == null || typeof r == "string") return; var t; if (typeof r == "function") t = r.propTypes; else if (typeof r == "object" && (r.$$typeof === m || // Note: Memo only checks outer props here. // Inner props are checked in the reconciler. r.$$typeof === T)) t = r.propTypes; else return; if (t) { var n = x(r); Qe(t, e.props, "prop", n, e); } else if (r.PropTypes !== void 0 && !ae) { ae = !0; var d = x(r); v("Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?", d || "Unknown"); } typeof r.getDefaultProps == "function" && !r.getDefaultProps.isReactClassApproved && v("getDefaultProps is only used on classic React.createClass definitions. Use a static property named `defaultProps` instead."); } } function hr(e) { { for (var r = Object.keys(e.props), t = 0; t < r.length; t++) { var n = r[t]; if (n !== "children" && n !== "key") { $(e), v("Invalid prop `%s` supplied to `React.Fragment`. React.Fragment can only have `key` and `children` props.", n), $(null); break; } } e.ref !== null && ($(e), v("Invalid attribute `ref` supplied to `React.Fragment`."), $(null)); } } var Fe = {}; function xe(e, r, t, n, d, h) { { var c = Be(e); if (!c) { var s = ""; (e === void 0 || typeof e == "object" && e !== null && Object.keys(e).length === 0) && (s += " You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports."); var w = fr(); w ? s += w : s += ke(); var E; e === null ? E = "null" : te(e) ? E = "array" : e !== void 0 && e.$$typeof === u ? (E = "<" + (x(e.type) || "Unknown") + " />", s = " Did you accidentally export a JSX literal instead of a component?") : E = typeof e, v("React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s", E, s); } var R = ur(e, r, t, d, h); if (R == null) return R; if (c) { var S = r.children; if (S !== void 0) if (n) if (te(S)) { for (var I = 0; I < S.length; I++) Pe(S[I], e); Object.freeze && Object.freeze(S); } else v("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."); else Pe(S, e); } if (U.call(r, "key")) { var A = x(e), C = Object.keys(r).filter(function(Er) { return Er !== "key"; }), ie = C.length > 0 ? "{key: someKey, " + C.join(": ..., ") + ": ...}" : "{key: someKey}"; if (!Fe[A + ie]) { var br = C.length > 0 ? "{" + C.join(": ..., ") + ": ...}" : "{}"; v(`A props object containing a "key" prop is being spread into JSX: let props = %s; <%s {...props} /> React keys must be passed directly to JSX without using spread: let props = %s; <%s key={someKey} {...props} />`, ie, A, br, A), Fe[A + ie] = !0; } } return e === i ? hr(R) : vr(R), R; } } function gr(e, r, t) { return xe(e, r, t, !0); } function yr(e, r, t) { return xe(e, r, t, !1); } var pr = yr, mr = gr; B.Fragment = i, B.jsx = pr, B.jsxs = mr; }()), B; } process.env.NODE_ENV === "production" ? se.exports = Rr() : se.exports = _r(); var g = se.exports; const Ne = { "arrow-right": /* @__PURE__ */ g.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960", children: /* @__PURE__ */ g.jsx("path", { d: "m321-80-71-71 329-329-329-329 71-71 400 400L321-80Z" }) }), "arrow-left": /* @__PURE__ */ g.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960", children: /* @__PURE__ */ g.jsx("path", { d: "M640-80 240-480l400-400 71 71-329 329 329 329-71 71Z" }) }) }; let $e = [ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ]; const Ie = (a, u) => (u == null ? void 0 : u.year) < a.getFullYear() ? $e : $e.slice(0, a.getMonth() + 1), Tr = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"], wr = ({ minYear: a, maxYear: u }) => { const l = []; for (let i = a || 1970; i <= (u || 2050); i++) l.push(i); return l; }, Cr = (a = 0, u = (/* @__PURE__ */ new Date()).getFullYear()) => { const l = new Date(u, a + 1, 0).getDate(), i = []; let o = new Date(u, a, 1).getDay(), y = 0; for (let j = 1; j <= l; j++) i[y] || (i[y] = Array(7).fill(null)), i[y][o] = j, o === 6 && y++, o = o === 6 ? 0 : o + 1; return i; }, Y = /* @__PURE__ */ new Date(), jr = (a) => a ? a.toLocaleDateString("en-IN", { year: "numeric", month: "2-digit", day: "2-digit" }) : "", We = (a) => Y.getFullYear() > (a == null ? void 0 : a.getFullYear()) ? { year: a.getFullYear(), month: a.getMonth() } : Y.getMonth() > (a == null ? void 0 : a.getMonth()) ? { year: Y.getFullYear(), month: a.getMonth() } : { year: Y.getFullYear(), month: Y.getMonth() }, Le = ({ minDate: a, maxDate: u, userInput: l }) => a && l.year === a.getFullYear() && l.month === a.getMonth() || u && l.year === u.getFullYear() && l.month === u.getMonth() ? "icon-conatainer diabled-icon" : "icon-conatainer", kr = ({ date: a, maxDate: u, userInput: l, value: i, minDate: o }) => { const y = new Date(l.year, l.month, a); return a ? i && i.getDate() === a && i.getMonth() === l.month && i.getFullYear() === l.year ? "selected-date" : l.year === Y.getFullYear() && l.month === Y.getMonth() && a === Y.getDate() ? "current-day" : u && o ? y > u || y < o ? "week-day disabled-day" : "week-day" : u && y > u || o && y < o ? "week-day disabled-day" : "week-day" : "empty-day"; }, Or = ({ setValue: a, maxDate: u, minDate: l, value: i }) => { const [o, y] = z(We(u)), [j, P] = z([]), [m, _] = z("days"), [b, T] = z(!1), k = Me(null), F = Me(null); X(() => { b || (_("days"), y(We(u))); const f = (O) => { b && F.current && !F.current.contains(O.target) && T(!1); }; return document.addEventListener("click", f), () => { document.removeEventListener("click", f); }; }, [b, u]), X(() => { const { year: f, month: O } = o; f && O >= 0 && P(Cr(parseInt(O), parseInt(f))); }, [o]), X(() => { i && y({ year: i == null ? void 0 : i.getFullYear(), month: i == null ? void 0 : i.getMonth() }); }, [i]), X(() => { m === "years" && k.current && k.current.scrollIntoView({ behavior: "smooth", block: "center" }); }, [m]); const M = D(() => { l && o.year === l.getFullYear() && o.month === l.getMonth() || y((f) => ({ month: f.month === 0 ? 11 : f.month - 1, year: f.month === 0 ? f.year - 1 : f.year })); }, [l, o.month, o.year]), N = D(() => { u && o.year === u.getFullYear() && o.month === u.getMonth() || y((f) => ({ month: f.month === 11 ? 0 : f.month + 1, year: f.month === 11 ? f.year + 1 : f.year })); }, [u, o.month, o.year]), W = D((f, O) => { f.stopPropagation(), y((L) => ({ ...L, year: O })), _("months"); }, []), p = D((f, O) => { f.stopPropagation(), y((L) => ({ ...L, month: O })), _("days"); }, []), v = D( (f) => { a(new Date(o.year, o.month, f)), T(!1); }, [a, o] ); return { userInput: o, days: j, prevMonthChange: M, nextMonthChange: N, handleDateSelection: v, currentView: m, setCurrentView: _, handleYearChange: W, handleMonthChange: p, selectedYearRef: k, open: b, setOpen: T, containerRef: F }; }, Sr = (a) => /* @__PURE__ */ Ye.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 -960 960 960", width: "24px", fill: "#e8eaed", ...a }, /* @__PURE__ */ Ye.createElement("path", { d: "M200-80q-33 0-56.5-23.5T120-160v-560q0-33 23.5-56.5T200-800h40v-80h80v80h320v-80h80v80h40q33 0 56.5 23.5T840-720v560q0 33-23.5 56.5T760-80H200Zm0-80h560v-400H200v400Zm0-480h560v-80H200v80Zm0 0v-80 80Zm280 240q-17 0-28.5-11.5T440-440q0-17 11.5-28.5T480-480q17 0 28.5 11.5T520-440q0 17-11.5 28.5T480-400Zm-160 0q-17 0-28.5-11.5T280-440q0-17 11.5-28.5T320-480q17 0 28.5 11.5T360-440q0 17-11.5 28.5T320-400Zm320 0q-17 0-28.5-11.5T600-440q0-17 11.5-28.5T640-480q17 0 28.5 11.5T680-440q0 17-11.5 28.5T640-400ZM480-240q-17 0-28.5-11.5T440-280q0-17 11.5-28.5T480-320q17 0 28.5 11.5T520-280q0 17-11.5 28.5T480-240Zm-160 0q-17 0-28.5-11.5T280-280q0-17 11.5-28.5T320-320q17 0 28.5 11.5T360-280q0 17-11.5 28.5T320-240Zm320 0q-17 0-28.5-11.5T600-280q0-17 11.5-28.5T640-320q17 0 28.5 11.5T680-280q0 17-11.5 28.5T640-240Z" })), Fr = ({ value: a, setValue: u, maxDate: l, minDate: i }) => { const { userInput: o, days: y, prevMonthChange: j, nextMonthChange: P, handleDateSelection: m, currentView: _, setCurrentView: b, handleYearChange: T, selectedYearRef: k, handleMonthChange: F, open: M, setOpen: N, containerRef: W } = Or({ value: a, setValue: u, maxDate: l, minDate: i }); return /* @__PURE__ */ g.jsxs("div", { ref: W, className: "outer-container", children: [ /* @__PURE__ */ g.jsx( "input", { type: "text", placeholder: "Date", className: "date-input-field", onFocus: () => N(!0), onKeyDown: (p) => p.preventDefault(), onChange: (p) => p.preventDefault(), value: jr(a) } ), /* @__PURE__ */ g.jsx(Sr, { className: "calendar-icon", onClick: () => N(!M) }), /* @__PURE__ */ g.jsx("div", { className: `calendar-container ${M ? "open" : ""}`, children: /* @__PURE__ */ g.jsxs( "div", { className: `calendar ${_ === "years" ? "years-view" : ""}`, children: [ /* @__PURE__ */ g.jsxs("div", { className: "picker", children: [ /* @__PURE__ */ g.jsx( "div", { className: "selected-year", onClick: () => b("years"), children: o.year } ), /* @__PURE__ */ g.jsx( "div", { className: "selected-month", onClick: () => b("months"), children: Ie(l, o)[o.month] } ), _ === "days" && /* @__PURE__ */ g.jsxs("div", { className: "month-changer", children: [ /* @__PURE__ */ g.jsx( "div", { className: `${Le({ minDate: i, userInput: o })}`, onClick: j, children: Ne["arrow-left"] } ), /* @__PURE__ */ g.jsx( "div", { className: `${Le({ maxDate: l, userInput: o })}`, onClick: P, children: Ne["arrow-right"] } ) ] }) ] }), _ === "years" && /* @__PURE__ */ g.jsx("div", { className: "years-container", children: wr({ minYear: i == null ? void 0 : i.getFullYear(), maxYear: l == null ? void 0 : l.getFullYear() }).map((p, v) => /* @__PURE__ */ g.jsx( "div", { className: `year ${p === o.year ? "picked-year" : ""}`, onClick: (f) => T(f, p), ref: p === o.year ? k : null, children: p }, v )) }), _ === "months" && /* @__PURE__ */ g.jsx("div", { className: "months-container", children: Ie(l, o).map((p, v) => /* @__PURE__ */ g.jsx( "div", { className: `month ${v === o.month ? "picked-month" : ""}`, onClick: (f) => F(f, v), children: p }, v )) }), _ === "days" && /* @__PURE__ */ g.jsxs(g.Fragment, { children: [ /* @__PURE__ */ g.jsx("div", { className: "week-day-conatainer", children: Tr.map((p, v) => /* @__PURE__ */ g.jsx("div", { className: "week-header", children: p }, v)) }), /* @__PURE__ */ g.jsx("div", { className: "days-container", children: !!y.length && y.map( (p, v) => p.map((f, O) => /* @__PURE__ */ g.jsx( "div", { className: kr({ date: f, maxDate: l, minDate: i, userInput: o, value: a }), onClick: () => m(f), children: f || "" }, `${v}${O}` )) ) }) ] }) ] } ) }) ] }); }; export { Fr as default };