nearpay-datepicker-react 0.2.2 → 0.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.esm.js CHANGED
@@ -2571,7 +2571,7 @@ const Week = () => {
2571
2571
  }
2572
2572
  return 0;
2573
2573
  }, [startWeekOn]);
2574
- return (jsxRuntimeExports.jsx("div", { className: "grid grid-cols-7 border-b border-gray-300 dark:border-zinc-700 py-2", children: DAYS.map(item => (jsxRuntimeExports.jsx("div", { className: "tracking-wide text-gray-500 text-center", children: ucFirst(shortString(dateFormat(new Date(2022, 10, 6 + item + startDateModifier), "ddd", i18n) || "")) }, item))) }));
2574
+ return (jsxRuntimeExports.jsx("div", { className: "grid grid-cols-7 border-b border-gray-300 dark:border-zinc-700 py-2", children: DAYS.map(item => (jsxRuntimeExports.jsx("div", { className: "tracking-wide text-gray-500 text-center", children: ucFirst(shortString(dateFormat(new Date(2022, 10, 6 + item + startDateModifier), "ddd", i18n) || "", i18n === "ar" ? 7 : 3)) }, item))) }));
2575
2575
  };
2576
2576
 
2577
2577
  const Years = (props) => {
@@ -2971,8 +2971,12 @@ const Input = (e) => {
2971
2971
  div.classList.remove("hidden");
2972
2972
  div.classList.add("block");
2973
2973
  // window.innerWidth === 767
2974
- const popoverOnUp = popoverDirection == "up";
2975
- const popoverOnDown = popoverDirection === "down";
2974
+ const popoverOnUp = popoverDirection === "up" ||
2975
+ popoverDirection === "up-left" ||
2976
+ popoverDirection === "up-right";
2977
+ const popoverOnDown = popoverDirection === "down" ||
2978
+ popoverDirection === "down-left" ||
2979
+ popoverDirection === "down-right";
2976
2980
  if (popoverOnUp ||
2977
2981
  (window.innerWidth > 767 &&
2978
2982
  window.screen.height - 100 < div.getBoundingClientRect().bottom &&
@@ -3279,13 +3283,32 @@ const Datepicker = (props) => {
3279
3283
  const detail = container.getBoundingClientRect();
3280
3284
  const screenCenter = window.innerWidth / 2;
3281
3285
  const containerCenter = (detail.right - detail.x) / 2 + detail.x;
3282
- if (containerCenter > screenCenter) {
3286
+ const alignRight = () => {
3283
3287
  arrow.classList.add("right-0");
3284
3288
  arrow.classList.add("mr-3.5");
3285
3289
  calendarContainer.classList.add("right-0");
3290
+ };
3291
+ const alignLeft = () => {
3292
+ arrow.classList.remove("right-0");
3293
+ arrow.classList.remove("mr-3.5");
3294
+ calendarContainer.classList.remove("right-0");
3295
+ };
3296
+ if (popoverDirection === "down-left" || popoverDirection === "up-left") {
3297
+ alignRight();
3298
+ }
3299
+ else if (popoverDirection === "down-right" || popoverDirection === "up-right") {
3300
+ alignLeft();
3301
+ }
3302
+ else {
3303
+ if (containerCenter > screenCenter) {
3304
+ alignRight();
3305
+ }
3306
+ else {
3307
+ alignLeft();
3308
+ }
3286
3309
  }
3287
3310
  }
3288
- }, []);
3311
+ }, [popoverDirection]);
3289
3312
  useEffect(() => {
3290
3313
  if (value && value.startDate && value.endDate) {
3291
3314
  if (dateIsSameOrBefore(value.startDate, value.endDate, "date")) {