@dialpad/dialtone-vue 2.126.0 → 2.127.1

package/dist/lib/datepicker.js

@@ -1,89 +1,128 @@
-import { startOfWeek as M, getDay as l, addMonths as k, startOfMonth as w, addDays as u, getDate as y, endOfMonth as x, subMonths as _, getMonth as i, isEqual as R, getYear as d, set as L, format as Y } from "date-fns";
-import { DtStack as g } from "./stack.js";
-import { DtTooltip as T } from "./tooltip.js";
-import { DtButton as b } from "./button.js";
-import { n as m } from "../chunks/_plugin-vue2_normalizer-u6G_3nkj.js";
-import { DtIcon as S } from "./icon.js";
-import "../chunks/stack_constants-u7tNqGtc.js";
-import "../chunks/popover_constants-qjlEkroB.js";
+import { startOfWeek, getDay, addMonths, startOfMonth, addDays, getDate, endOfMonth, subMonths, getMonth, isEqual, getYear, set, format } from "date-fns";
+import { DtStack } from "./stack.js";
+import { DtTooltip } from "./tooltip.js";
+import { DtButton } from "./button.js";
+import { normalizeComponent } from "../chunks/_plugin-vue2_normalizer-sOSkiPF3.js";
+import { DtIcon } from "./icon.js";
+import "../chunks/stack_constants-HraCekPm.js";
+import "../chunks/popover_constants-Qkpb0yh2.js";
 import "tippy.js";
-import "./utils.js";
-import "./constants.js";
+import "../common/utils.js";
+import "../common/constants.js";
 import "vue";
 import "./lazy-show.js";
-import "../chunks/link_constants-vIUB92L4.js";
+import "../chunks/link_constants-nWVlXQBs.js";
 import "@dialpad/dialtone-icons/vue2";
-import "../chunks/icon_constants-OpYAAKwF.js";
+import "../chunks/icon_constants-Dy4MEUJL.js";
 import "@dialpad/dialtone-icons/icons.json";
-import "./skeleton.js";
-const $ = 0, P = "MMMM", C = "long", f = (t) => t ? new Date(t) : /* @__PURE__ */ new Date(), F = (t, e, a) => {
-  const r = f(JSON.parse(JSON.stringify(t))), n = [];
-  for (let s = 0; s < 7; s++) {
-    const o = u(r, s), c = i(o) !== e;
-    n.push({
-      text: o.getDate(),
-      value: o,
-      currentMonth: !c,
-      isFirstDayOfMonth: o.getDate() === 1 && !c,
+const WEEK_START = 0;
+const MONTH_FORMAT = "MMMM";
+const INTL_MONTH_FORMAT = "long";
+const _parsedGetDate = (value) => value ? new Date(value) : /* @__PURE__ */ new Date();
+const getWeekDays = (startDay, month, selectedDay) => {
+  const startDate = _parsedGetDate(JSON.parse(JSON.stringify(startDay)));
+  const dates = [];
+  for (let i = 0; i < 7; i++) {
+    const next = addDays(startDate, i);
+    const isNext = getMonth(next) !== month;
+    dates.push({
+      text: next.getDate(),
+      value: next,
+      currentMonth: !isNext,
+      isFirstDayOfMonth: next.getDate() === 1 && !isNext,
       // will be selected if the date is the same as the selected day and is from the current month
-      selected: a ? o.getDate() === a && !c : !1
+      selected: selectedDay ? next.getDate() === selectedDay && !isNext : false
     });
   }
-  return n;
-}, q = (t, e) => !t || !e ? !1 : R(t, e), N = (t, e, a) => {
-  const r = [], n = f(new Date(e, t)), s = f(new Date(e, t + 1, 0)), c = M(n, { weekStartsOn: $ }), p = (D) => {
-    const v = F(D, t, a);
-    if (r.push({ days: v }), !r[r.length - 1].days.some(
-      (h) => q(h.value, s)
+  return dates;
+};
+const isDateEqual = (date, dateToCompare) => {
+  if (!date || !dateToCompare) {
+    return false;
+  }
+  return isEqual(date, dateToCompare);
+};
+const getCalendarDays = (month, year, selectedDay) => {
+  const weeks = [];
+  const firstDate = _parsedGetDate(new Date(year, month));
+  const lastDate = _parsedGetDate(new Date(year, month + 1, 0));
+  const weekStartsOn = WEEK_START;
+  const firstDateInCalendar = startOfWeek(firstDate, { weekStartsOn });
+  const addDaysToWeek = (date) => {
+    const days = getWeekDays(date, month, selectedDay);
+    weeks.push({ days });
+    if (!weeks[weeks.length - 1].days.some(
+      (day) => isDateEqual(day.value, lastDate)
     )) {
-      const h = u(D, 7);
-      p(h);
+      const nextDate = addDays(date, 7);
+      addDaysToWeek(nextDate);
     }
   };
-  return p(c), r;
-}, O = (t, e) => {
-  const a = [1, 2, 3, 4, 5, 6, 7].map((s) => new Intl.DateTimeFormat(t, { weekday: "short", timeZone: "UTC" }).format(/* @__PURE__ */ new Date(`2017-01-0${s}T00:00:00+00:00`)).slice(0, 2)), r = a.slice(0, e), n = a.slice(e + 1, a.length);
-  return [a[e]].concat(...n).concat(...r);
-}, A = (t, e, a) => new Intl.DateTimeFormat(a, { month: e }).format(new Date(2e3, t, 1)), B = (t) => {
-  const e = new Date(t), a = l(e), r = k(e, 1), n = w(r), s = l(n), o = (a - s + 7) % 7, c = u(n, o);
-  return y(c);
-}, I = (t) => {
-  const e = new Date(t), a = l(e);
-  let n = x(_(e, 1));
-  for (; l(n) !== a; )
-    n = u(n, -1);
-  return y(n);
-}, z = {
+  addDaysToWeek(firstDateInCalendar);
+  return weeks;
+};
+const getWeekDayNames = (locale, weekStart) => {
+  const days = [1, 2, 3, 4, 5, 6, 7].map((day) => {
+    return new Intl.DateTimeFormat(locale, { weekday: "short", timeZone: "UTC" }).format(/* @__PURE__ */ new Date(`2017-01-0${day}T00:00:00+00:00`)).slice(0, 2);
+  });
+  const beforeWeekStart = days.slice(0, weekStart);
+  const afterWeekStart = days.slice(weekStart + 1, days.length);
+  return [days[weekStart]].concat(...afterWeekStart).concat(...beforeWeekStart);
+};
+const formatMonth = (month, monthFormat, locale) => {
+  return new Intl.DateTimeFormat(locale, { month: monthFormat }).format(new Date(2e3, month, 1));
+};
+const calculateNextFocusDate = (currentDate) => {
+  const date = new Date(currentDate);
+  const currentWeekday = getDay(date);
+  const nextMonthDate = addMonths(date, 1);
+  const nextMonthStart = startOfMonth(nextMonthDate);
+  const nextMonthStartWeekday = getDay(nextMonthStart);
+  const dayDifference = (currentWeekday - nextMonthStartWeekday + 7) % 7;
+  const focusDate = addDays(nextMonthStart, dayDifference);
+  return getDate(focusDate);
+};
+const calculatePrevFocusDate = (currentDate) => {
+  const date = new Date(currentDate);
+  const currentWeekday = getDay(date);
+  const lastDayOfPrevMonth = endOfMonth(subMonths(date, 1));
+  let focusDate = lastDayOfPrevMonth;
+  while (getDay(focusDate) !== currentWeekday) {
+    focusDate = addDays(focusDate, -1);
+  }
+  return getDate(focusDate);
+};
+const _sfc_main$2 = {
   name: "DtDatepickerMonthYearPicker",
-  components: { DtButton: b, DtTooltip: T, DtStack: g, DtIcon: S },
+  components: { DtButton, DtTooltip, DtStack, DtIcon },
   props: {
     locale: {
       type: String,
-      required: !0
+      required: true
     },
     prevMonthLabel: {
       type: String,
-      required: !0
+      required: true
     },
     nextMonthLabel: {
       type: String,
-      required: !0
+      required: true
     },
     prevYearLabel: {
       type: String,
-      required: !0
+      required: true
     },
     nextYearLabel: {
       type: String,
-      required: !0
+      required: true
     },
     changeToLabel: {
       type: String,
-      required: !0
+      required: true
     },
     selectedDate: {
       type: Date,
-      required: !0
+      required: true
     }
   },
   emits: [
@@ -115,8 +154,8 @@ const $ = 0, P = "MMMM", C = "long", f = (t) => t ? new Date(t) : /* @__PURE__ *
   ],
   data() {
     return {
-      selectMonth: i(this.selectedDate),
-      selectYear: d(this.selectedDate),
+      selectMonth: getMonth(this.selectedDate),
+      selectYear: getYear(this.selectedDate),
       highlightedDay: null,
       focusPicker: 0,
       focusRefs: [],
@@ -126,49 +165,69 @@ const $ = 0, P = "MMMM", C = "long", f = (t) => t ? new Date(t) : /* @__PURE__ *
   computed: {
     // Get days for the currently selected month and year and highlight the selected day
     calendarDays() {
-      return N(this.selectMonth, this.selectYear, this.highlightedDay);
+      return getCalendarDays(this.selectMonth, this.selectYear, this.highlightedDay);
     },
     formattedMonth() {
-      return (t) => A(t, C, this.locale);
+      return (month) => formatMonth(month, INTL_MONTH_FORMAT, this.locale);
     }
   },
   watch: {
     selectMonth: {
       handler() {
-        this.highlightDay(), this.$emit("calendar-days", this.calendarDays);
+        this.highlightDay();
+        this.$emit("calendar-days", this.calendarDays);
       },
-      immediate: !0
+      immediate: true
     },
     selectYear: {
       handler() {
-        this.highlightDay(), this.$emit("calendar-days", this.calendarDays);
+        this.highlightDay();
+        this.$emit("calendar-days", this.calendarDays);
       },
-      immediate: !0
+      immediate: true
     }
   },
   mounted() {
-    this.setButtonsRef(), this.focusMonthYearPicker();
+    this.setButtonsRef();
+    this.focusMonthYearPicker();
   },
   methods: {
     setButtonsRef() {
-      this.focusRefs = this.refNames.map((t) => this.$refs[t]);
+      this.focusRefs = this.refNames.map((refName) => this.$refs[refName]);
     },
     focusMonthYearPicker() {
-      this.focusPicker = 0, this.focusRefs[0].$el.focus();
+      this.focusPicker = 0;
+      this.focusRefs[0].$el.focus();
     },
-    handleKeyDown(t) {
-      switch (t.key) {
+    handleKeyDown(event) {
+      switch (event.key) {
         case "ArrowLeft":
-          t.preventDefault(), this.focusPicker === 0 ? (this.focusPicker = 3, this.focusRefs[this.focusPicker].$el.focus()) : (this.focusPicker--, this.focusRefs[this.focusPicker].$el.focus());
+          event.preventDefault();
+          if (this.focusPicker === 0) {
+            this.focusPicker = 3;
+            this.focusRefs[this.focusPicker].$el.focus();
+          } else {
+            this.focusPicker--;
+            this.focusRefs[this.focusPicker].$el.focus();
+          }
           break;
         case "ArrowRight":
-          t.preventDefault(), this.focusPicker === 3 ? (this.focusPicker = 0, this.focusRefs[this.focusPicker].$el.focus()) : (this.focusPicker++, this.focusRefs[this.focusPicker].$el.focus());
+          event.preventDefault();
+          if (this.focusPicker === 3) {
+            this.focusPicker = 0;
+            this.focusRefs[this.focusPicker].$el.focus();
+          } else {
+            this.focusPicker++;
+            this.focusRefs[this.focusPicker].$el.focus();
+          }
           break;
         case "ArrowDown":
-          t.preventDefault(), this.$emit("focus-first-day");
+          event.preventDefault();
+          this.$emit("focus-first-day");
           break;
         case "Tab":
-          t.preventDefault(), this.$emit("focus-first-day");
+          event.preventDefault();
+          this.$emit("focus-first-day");
           break;
         case "Escape":
           this.$emit("close-datepicker");
@@ -176,16 +235,24 @@ const $ = 0, P = "MMMM", C = "long", f = (t) => t ? new Date(t) : /* @__PURE__ *
       }
     },
     highlightDay() {
-      const t = d(this.selectedDate), e = i(this.selectedDate);
-      t !== this.selectYear || e !== this.selectMonth ? this.highlightedDay = null : this.highlightedDay = y(this.selectedDate);
+      const year = getYear(this.selectedDate);
+      const month = getMonth(this.selectedDate);
+      if (year !== this.selectYear || month !== this.selectMonth) {
+        this.highlightedDay = null;
+      } else {
+        this.highlightedDay = getDate(this.selectedDate);
+      }
     },
-    changeMonth(t) {
-      (this.selectMonth === 0 && t === -1 || this.selectMonth === 11 && t === 1) && (this.selectYear += t);
-      const e = L(this.selectedDate, { month: this.selectMonth, year: this.selectYear }), a = t === 1 ? k(e, 1) : _(e, 1);
-      this.selectMonth = i(a);
+    changeMonth(value) {
+      if (this.selectMonth === 0 && value === -1 || this.selectMonth === 11 && value === 1) {
+        this.selectYear += value;
+      }
+      const initialDate = set(this.selectedDate, { month: this.selectMonth, year: this.selectYear });
+      const newDate = value === 1 ? addMonths(initialDate, 1) : subMonths(initialDate, 1);
+      this.selectMonth = getMonth(newDate);
     },
-    changeYear(t) {
-      this.selectYear = this.selectYear + t;
+    changeYear(value) {
+      this.selectYear = this.selectYear + value;
     },
     goToNextMonth() {
       this.changeMonth(1);
@@ -195,58 +262,61 @@ const $ = 0, P = "MMMM", C = "long", f = (t) => t ? new Date(t) : /* @__PURE__ *
     }
   }
 };
-var K = function() {
-  var e = this, a = e._self._c;
-  return a("dt-stack", { staticClass: "d-datepicker__month-year", attrs: { direction: "row", gap: "300" } }, [a("dt-stack", { staticClass: "d-datepicker__nav", attrs: { as: "nav", direction: "row", gap: "200" } }, [a("dt-tooltip", { attrs: { message: e.prevYearLabel, placement: "top" }, scopedSlots: e._u([{ key: "anchor", fn: function() {
-    return [a("dt-button", { ref: e.refNames[0], staticClass: "d-datepicker__nav-btn", attrs: { id: "prevYearButton", size: "xs", importance: "clear", kind: "muted", circle: !0, type: "button", "aria-label": `${e.changeToLabel} ${e.prevYearLabel} ${e.selectYear - 1}` }, on: { click: function(r) {
-      return e.changeYear(-1);
-    }, keydown: function(r) {
-      return e.handleKeyDown(r);
-    } } }, [a("dt-icon", { attrs: { name: "chevrons-left", size: "200" } })], 1)];
-  }, proxy: !0 }]) }), a("dt-tooltip", { attrs: { message: e.prevMonthLabel, placement: "top" }, scopedSlots: e._u([{ key: "anchor", fn: function() {
-    return [a("dt-button", { ref: e.refNames[1], staticClass: "d-datepicker__nav-btn", attrs: { id: "prevMonthButton", size: "xs", importance: "clear", kind: "muted", circle: !0, type: "button", "aria-label": `${e.changeToLabel} ${e.prevMonthLabel} ${e.formattedMonth(e.selectMonth - 1)}` }, on: { click: function(r) {
-      return e.changeMonth(-1);
-    }, keydown: function(r) {
-      return e.handleKeyDown(r);
-    } } }, [a("dt-icon", { attrs: { name: "chevron-left", size: "200" } })], 1)];
-  }, proxy: !0 }]) })], 1), a("div", { staticClass: "d-datepicker__month-year-title", attrs: { id: "calendar-heading" } }, [e._v(" " + e._s(e.formattedMonth(e.selectMonth)) + " " + e._s(e.selectYear) + " ")]), a("dt-stack", { staticClass: "d-datepicker__nav", attrs: { as: "nav", direction: "row", gap: "200" } }, [a("dt-tooltip", { attrs: { message: e.nextMonthLabel, placement: "top" }, scopedSlots: e._u([{ key: "anchor", fn: function() {
-    return [a("dt-button", { ref: e.refNames[2], staticClass: "d-datepicker__nav-btn", attrs: { id: "nextMonthButton", size: "xs", importance: "clear", circle: !0, kind: "muted", type: "button", "aria-label": `${e.changeToLabel} ${e.nextMonthLabel} ${e.formattedMonth(e.selectMonth + 1)}` }, on: { click: function(r) {
-      return e.changeMonth(1);
-    }, keydown: function(r) {
-      return e.handleKeyDown(r);
-    } } }, [a("dt-icon", { attrs: { name: "chevron-right", size: "200" } })], 1)];
-  }, proxy: !0 }]) }), a("dt-tooltip", { attrs: { message: e.nextYearLabel, placement: "top" }, scopedSlots: e._u([{ key: "anchor", fn: function() {
-    return [a("dt-button", { ref: e.refNames[3], staticClass: "d-datepicker__nav-btn", attrs: { id: "nextYearButton", size: "xs", kind: "muted", circle: !0, importance: "clear", type: "button", "aria-label": `${e.changeToLabel} ${e.nextYearLabel} ${e.selectYear + 1}` }, on: { click: function(r) {
-      return e.changeYear(1);
-    }, keydown: function(r) {
-      return e.handleKeyDown(r);
-    } } }, [a("dt-icon", { attrs: { name: "chevrons-right", size: "200" } })], 1)];
-  }, proxy: !0 }]) })], 1)], 1);
-}, E = [], W = /* @__PURE__ */ m(
-  z,
-  K,
-  E,
-  !1,
+var _sfc_render$2 = function render() {
+  var _vm = this, _c = _vm._self._c;
+  return _c("dt-stack", { staticClass: "d-datepicker__month-year", attrs: { "direction": "row", "gap": "300" } }, [_c("dt-stack", { staticClass: "d-datepicker__nav", attrs: { "as": "nav", "direction": "row", "gap": "200" } }, [_c("dt-tooltip", { attrs: { "message": _vm.prevYearLabel, "placement": "top" }, scopedSlots: _vm._u([{ key: "anchor", fn: function() {
+    return [_c("dt-button", { ref: _vm.refNames[0], staticClass: "d-datepicker__nav-btn", attrs: { "id": "prevYearButton", "size": "xs", "importance": "clear", "kind": "muted", "circle": true, "type": "button", "aria-label": `${_vm.changeToLabel} ${_vm.prevYearLabel} ${_vm.selectYear - 1}` }, on: { "click": function($event) {
+      return _vm.changeYear(-1);
+    }, "keydown": function($event) {
+      return _vm.handleKeyDown($event);
+    } } }, [_c("dt-icon", { attrs: { "name": "chevrons-left", "size": "200" } })], 1)];
+  }, proxy: true }]) }), _c("dt-tooltip", { attrs: { "message": _vm.prevMonthLabel, "placement": "top" }, scopedSlots: _vm._u([{ key: "anchor", fn: function() {
+    return [_c("dt-button", { ref: _vm.refNames[1], staticClass: "d-datepicker__nav-btn", attrs: { "id": "prevMonthButton", "size": "xs", "importance": "clear", "kind": "muted", "circle": true, "type": "button", "aria-label": `${_vm.changeToLabel} ${_vm.prevMonthLabel} ${_vm.formattedMonth(_vm.selectMonth - 1)}` }, on: { "click": function($event) {
+      return _vm.changeMonth(-1);
+    }, "keydown": function($event) {
+      return _vm.handleKeyDown($event);
+    } } }, [_c("dt-icon", { attrs: { "name": "chevron-left", "size": "200" } })], 1)];
+  }, proxy: true }]) })], 1), _c("div", { staticClass: "d-datepicker__month-year-title", attrs: { "id": "calendar-heading" } }, [_vm._v(" " + _vm._s(_vm.formattedMonth(_vm.selectMonth)) + " " + _vm._s(_vm.selectYear) + " ")]), _c("dt-stack", { staticClass: "d-datepicker__nav", attrs: { "as": "nav", "direction": "row", "gap": "200" } }, [_c("dt-tooltip", { attrs: { "message": _vm.nextMonthLabel, "placement": "top" }, scopedSlots: _vm._u([{ key: "anchor", fn: function() {
+    return [_c("dt-button", { ref: _vm.refNames[2], staticClass: "d-datepicker__nav-btn", attrs: { "id": "nextMonthButton", "size": "xs", "importance": "clear", "circle": true, "kind": "muted", "type": "button", "aria-label": `${_vm.changeToLabel} ${_vm.nextMonthLabel} ${_vm.formattedMonth(_vm.selectMonth + 1)}` }, on: { "click": function($event) {
+      return _vm.changeMonth(1);
+    }, "keydown": function($event) {
+      return _vm.handleKeyDown($event);
+    } } }, [_c("dt-icon", { attrs: { "name": "chevron-right", "size": "200" } })], 1)];
+  }, proxy: true }]) }), _c("dt-tooltip", { attrs: { "message": _vm.nextYearLabel, "placement": "top" }, scopedSlots: _vm._u([{ key: "anchor", fn: function() {
+    return [_c("dt-button", { ref: _vm.refNames[3], staticClass: "d-datepicker__nav-btn", attrs: { "id": "nextYearButton", "size": "xs", "kind": "muted", "circle": true, "importance": "clear", "type": "button", "aria-label": `${_vm.changeToLabel} ${_vm.nextYearLabel} ${_vm.selectYear + 1}` }, on: { "click": function($event) {
+      return _vm.changeYear(1);
+    }, "keydown": function($event) {
+      return _vm.handleKeyDown($event);
+    } } }, [_c("dt-icon", { attrs: { "name": "chevrons-right", "size": "200" } })], 1)];
+  }, proxy: true }]) })], 1)], 1);
+};
+var _sfc_staticRenderFns$2 = [];
+var __component__$2 = /* @__PURE__ */ normalizeComponent(
+  _sfc_main$2,
+  _sfc_render$2,
+  _sfc_staticRenderFns$2,
+  false,
   null,
   null,
   null,
   null
 );
-const U = W.exports, H = {
+const MonthYearPicker = __component__$2.exports;
+const _sfc_main$1 = {
   name: "DtDatepickerCalendar",
-  components: { DtButton: b },
+  components: { DtButton },
   props: {
     calendarDays: {
       type: Array,
-      required: !0
+      required: true
     },
     locale: {
       type: String,
-      required: !0
+      required: true
     },
     selectDayLabel: {
       type: String,
-      required: !0
+      required: true
     }
   },
   emits: [
@@ -280,64 +350,94 @@ const U = W.exports, H = {
   },
   computed: {
     weekDays() {
-      return O(this.locale, $);
+      return getWeekDayNames(this.locale, WEEK_START);
     }
   },
   watch: {
     calendarDays() {
-      this.focusDay = 0, this.selectedDay = null, this.daysRef = [], this.$nextTick(() => {
-        this.daysRef = [], this.setDayRef();
+      this.focusDay = 0;
+      this.selectedDay = null;
+      this.daysRef = [];
+      this.$nextTick(() => {
+        this.daysRef = [];
+        this.setDayRef();
       });
     }
   },
   methods: {
-    dayAriaLabel(t) {
-      return `${this.selectDayLabel} ${t.text} ${Y(t.value, P)} ${d(t.value)}`;
+    dayAriaLabel(day) {
+      return `${this.selectDayLabel} ${day.text} ${format(day.value, MONTH_FORMAT)} ${getYear(day.value)}`;
     },
-    setDayRef(t, e) {
-      this.calendarDays.forEach((a, r) => {
-        a.days.forEach((n, s) => {
-          const o = `buttonRef_${r}_${s}`, c = this.$refs[o];
-          c && n.currentMonth && this.daysRef.push({ el: c[0], day: n });
+    setDayRef(el, day) {
+      this.calendarDays.forEach((week, weekIndex) => {
+        week.days.forEach((day2, dayIndex) => {
+          const refKey = `buttonRef_${weekIndex}_${dayIndex}`;
+          const dayButton = this.$refs[refKey];
+          if (dayButton && day2.currentMonth) {
+            this.daysRef.push({ el: dayButton[0], day: day2 });
+          }
         });
       });
     },
-    handleKeyDown(t) {
-      switch (t.key) {
+    handleKeyDown(event) {
+      switch (event.key) {
         case "ArrowUp":
-          t.preventDefault(), this.focusDay -= 7;
+          event.preventDefault();
+          this.focusDay -= 7;
           try {
             this.daysRef[this.focusDay].el.$el.focus();
-          } catch {
-            const a = I(this.daysRef[this.focusDay + 7].day.value);
-            this.$emit("go-to-prev-month"), this.$nextTick(() => {
-              this.setDayRef(), this.daysRef[a - 1].el.$el.focus(), this.focusDay += a - 1;
+          } catch (error) {
+            const prevFocusDate = calculatePrevFocusDate(this.daysRef[this.focusDay + 7].day.value);
+            this.$emit("go-to-prev-month");
+            this.$nextTick(() => {
+              this.setDayRef();
+              this.daysRef[prevFocusDate - 1].el.$el.focus();
+              this.focusDay += prevFocusDate - 1;
             });
           }
           break;
         case "ArrowDown":
-          t.preventDefault(), this.focusDay += 7;
+          event.preventDefault();
+          this.focusDay += 7;
           try {
             this.daysRef[this.focusDay].el.$el.focus();
-          } catch {
-            const a = B(this.daysRef[this.focusDay - 7].day.value);
-            this.$emit("go-to-next-month"), this.$nextTick(() => {
-              this.setDayRef(), this.daysRef[a - 1].el.$el.focus(), this.focusDay += a - 1;
+          } catch (error) {
+            const nextFocusDate = calculateNextFocusDate(this.daysRef[this.focusDay - 7].day.value);
+            this.$emit("go-to-next-month");
+            this.$nextTick(() => {
+              this.setDayRef();
+              this.daysRef[nextFocusDate - 1].el.$el.focus();
+              this.focusDay += nextFocusDate - 1;
             });
           }
           break;
         case "ArrowLeft":
-          t.preventDefault(), this.focusDay > 0 ? (this.focusDay -= 1, this.daysRef[this.focusDay].el.$el.focus()) : (this.$emit("go-to-prev-month"), this.$nextTick(() => {
-            this.focusLastDay();
-          }));
+          event.preventDefault();
+          if (this.focusDay > 0) {
+            this.focusDay -= 1;
+            this.daysRef[this.focusDay].el.$el.focus();
+          } else {
+            this.$emit("go-to-prev-month");
+            this.$nextTick(() => {
+              this.focusLastDay();
+            });
+          }
           break;
         case "ArrowRight":
-          t.preventDefault(), this.focusDay < this.daysRef.length - 1 ? (this.focusDay += 1, this.daysRef[this.focusDay].el.$el.focus()) : (this.$emit("go-to-next-month"), this.$nextTick(() => {
-            this.focusFirstDay();
-          }));
+          event.preventDefault();
+          if (this.focusDay < this.daysRef.length - 1) {
+            this.focusDay += 1;
+            this.daysRef[this.focusDay].el.$el.focus();
+          } else {
+            this.$emit("go-to-next-month");
+            this.$nextTick(() => {
+              this.focusFirstDay();
+            });
+          }
           break;
         case "Tab":
-          t.preventDefault(), this.$emit("focus-month-year-picker");
+          event.preventDefault();
+          this.$emit("focus-month-year-picker");
           break;
         case "Escape":
           this.$emit("close-datepicker");
@@ -345,49 +445,58 @@ const U = W.exports, H = {
       }
     },
     focusFirstDay() {
-      this.focusDay = 0, this.$nextTick(() => {
+      this.focusDay = 0;
+      this.$nextTick(() => {
         this.daysRef[this.focusDay].el.$el.focus();
       });
     },
     focusLastDay() {
       this.$nextTick(() => {
-        this.focusDay = this.daysRef.length - 1, this.daysRef[this.focusDay].el.$el.focus();
+        this.focusDay = this.daysRef.length - 1;
+        this.daysRef[this.focusDay].el.$el.focus();
       });
     },
-    selectDay(t) {
-      t.currentMonth && (this.selectedDay = t.text, this.$emit("select-date", t.value));
+    selectDay(day) {
+      if (!day.currentMonth) {
+        return;
+      }
+      this.selectedDay = day.text;
+      this.$emit("select-date", day.value);
     }
   }
 };
-var J = function() {
-  var e = this, a = e._self._c;
-  return a("table", { staticClass: "d-datepicker__calendar", attrs: { "aria-labelledby": "calendar-heading" } }, [a("thead", [a("tr", e._l(e.weekDays, function(r) {
-    return a("th", { key: r, staticClass: "d-datepicker__cell d-datepicker__cell--header", attrs: { scope: "col" } }, [a("span", { staticClass: "d-datepicker__weekday", attrs: { title: r, "aria-label": r } }, [e._v(" " + e._s(r))])]);
-  }), 0)]), a("tbody", e._l(e.calendarDays, function(r, n) {
-    return a("tr", { key: n }, e._l(r.days, function(s, o) {
-      return a("td", { key: n + o, staticClass: "d-datepicker__cell", attrs: { role: "listbox" } }, [a("dt-button", { ref: `buttonRef_${n}_${o}`, refInFor: !0, staticClass: "d-datepicker__day", class: {
-        "d-datepicker__day--disabled": !s.currentMonth,
-        "d-datepicker__day--selected": e.selectedDay ? s.text === e.selectedDay && s.currentMonth : s.selected
-      }, attrs: { circle: !0, size: "sm", importance: "clear", disabled: !s.currentMonth, type: "button", "aria-selected": e.selectedDay ? s.text === e.selectedDay && s.currentMonth : s.selected, "aria-label": e.dayAriaLabel(s), role: "option" }, on: { click: function(c) {
-        return e.selectDay(s);
-      }, keydown: function(c) {
-        return e.handleKeyDown(c);
-      } } }, [e._v(" " + e._s(s.text) + " ")])], 1);
+var _sfc_render$1 = function render2() {
+  var _vm = this, _c = _vm._self._c;
+  return _c("table", { staticClass: "d-datepicker__calendar", attrs: { "aria-labelledby": "calendar-heading" } }, [_c("thead", [_c("tr", _vm._l(_vm.weekDays, function(day) {
+    return _c("th", { key: day, staticClass: "d-datepicker__cell d-datepicker__cell--header", attrs: { "scope": "col" } }, [_c("span", { staticClass: "d-datepicker__weekday", attrs: { "title": day, "aria-label": day } }, [_vm._v(" " + _vm._s(day))])]);
+  }), 0)]), _c("tbody", _vm._l(_vm.calendarDays, function(week, indexWeek) {
+    return _c("tr", { key: indexWeek }, _vm._l(week.days, function(day, indexDays) {
+      return _c("td", { key: indexWeek + indexDays, staticClass: "d-datepicker__cell", attrs: { "role": "listbox" } }, [_c("dt-button", { ref: `buttonRef_${indexWeek}_${indexDays}`, refInFor: true, staticClass: "d-datepicker__day", class: {
+        "d-datepicker__day--disabled": !day.currentMonth,
+        "d-datepicker__day--selected": _vm.selectedDay ? day.text === _vm.selectedDay && day.currentMonth : day.selected
+      }, attrs: { "circle": true, "size": "sm", "importance": "clear", "disabled": !day.currentMonth, "type": "button", "aria-selected": !!_vm.selectedDay ? day.text === _vm.selectedDay && day.currentMonth : day.selected, "aria-label": _vm.dayAriaLabel(day), "role": "option" }, on: { "click": function($event) {
+        return _vm.selectDay(day);
+      }, "keydown": function($event) {
+        return _vm.handleKeyDown($event);
+      } } }, [_vm._v(" " + _vm._s(day.text) + " ")])], 1);
     }), 0);
   }), 0)]);
-}, G = [], Z = /* @__PURE__ */ m(
-  H,
-  J,
-  G,
-  !1,
+};
+var _sfc_staticRenderFns$1 = [];
+var __component__$1 = /* @__PURE__ */ normalizeComponent(
+  _sfc_main$1,
+  _sfc_render$1,
+  _sfc_staticRenderFns$1,
+  false,
   null,
   null,
   null,
   null
 );
-const j = Z.exports, Q = {
+const Calendar = __component__$1.exports;
+const _sfc_main = {
   name: "DtDatepicker",
-  components: { DtStack: g, MonthYearPicker: U, Calendar: j },
+  components: { DtStack, MonthYearPicker, Calendar },
   props: {
     /**
      * Label for the previous month button
@@ -397,7 +506,7 @@ const j = Z.exports, Q = {
      */
     prevMonthLabel: {
       type: String,
-      required: !0
+      required: true
     },
     /**
      * Label for the next month button
@@ -407,7 +516,7 @@ const j = Z.exports, Q = {
      */
     nextMonthLabel: {
       type: String,
-      required: !0
+      required: true
     },
     /**
      * Label for the previous year button
@@ -417,7 +526,7 @@ const j = Z.exports, Q = {
      */
     prevYearLabel: {
       type: String,
-      required: !0
+      required: true
     },
     /**
      * Label for the next year button
@@ -427,7 +536,7 @@ const j = Z.exports, Q = {
      */
     nextYearLabel: {
       type: String,
-      required: !0
+      required: true
     },
     /**
      * Label for the select day button
@@ -437,7 +546,7 @@ const j = Z.exports, Q = {
      */
     selectDayLabel: {
       type: String,
-      required: !0
+      required: true
     },
     /**
      * Label for the change to button
@@ -447,7 +556,7 @@ const j = Z.exports, Q = {
      */
     changeToLabel: {
       type: String,
-      required: !0
+      required: true
     },
     /**
      * Locale for the calendar
@@ -489,64 +598,66 @@ const j = Z.exports, Q = {
     };
   },
   methods: {
-    updateCalendarDays(t) {
-      this.calendarDays = t;
+    updateCalendarDays(days) {
+      this.calendarDays = days;
     }
   }
 };
-var V = function() {
-  var e = this, a = e._self._c;
-  return a("dt-stack", { staticClass: "d-datepicker", attrs: { gap: "400" } }, [a("div", { staticClass: "d-datepicker__hd" }, [a("month-year-picker", { ref: "monthYearPicker", attrs: { locale: e.locale, "prev-month-label": e.prevMonthLabel, "next-month-label": e.nextMonthLabel, "prev-year-label": e.prevYearLabel, "next-year-label": e.nextYearLabel, "change-to-label": e.changeToLabel, "selected-date": e.selectedDate }, on: { "calendar-days": e.updateCalendarDays, "focus-first-day": function(r) {
-    return e.$refs.calendar.focusFirstDay();
-  }, "focus-last-day": function(r) {
-    return e.$refs.calendar.focusLastDay();
-  }, "close-datepicker": function(r) {
-    return e.$emit("close-datepicker");
-  } } })], 1), a("div", { staticClass: "d-datepicker__bd" }, [a("calendar", { ref: "calendar", attrs: { locale: e.locale, "calendar-days": e.calendarDays, "select-day-label": e.selectDayLabel }, on: { "select-date": function(r) {
-    return e.$emit("selected-date", r);
-  }, "focus-month-year-picker": function(r) {
-    return e.$refs.monthYearPicker.focusMonthYearPicker();
-  }, "close-datepicker": function(r) {
-    return e.$emit("close-datepicker");
-  }, "go-to-next-month": function(r) {
-    return e.$refs.monthYearPicker.goToNextMonth();
-  }, "go-to-prev-month": function(r) {
-    return e.$refs.monthYearPicker.goToPrevMonth();
+var _sfc_render = function render3() {
+  var _vm = this, _c = _vm._self._c;
+  return _c("dt-stack", { staticClass: "d-datepicker", attrs: { "gap": "400" } }, [_c("div", { staticClass: "d-datepicker__hd" }, [_c("month-year-picker", { ref: "monthYearPicker", attrs: { "locale": _vm.locale, "prev-month-label": _vm.prevMonthLabel, "next-month-label": _vm.nextMonthLabel, "prev-year-label": _vm.prevYearLabel, "next-year-label": _vm.nextYearLabel, "change-to-label": _vm.changeToLabel, "selected-date": _vm.selectedDate }, on: { "calendar-days": _vm.updateCalendarDays, "focus-first-day": function($event) {
+    return _vm.$refs.calendar.focusFirstDay();
+  }, "focus-last-day": function($event) {
+    return _vm.$refs.calendar.focusLastDay();
+  }, "close-datepicker": function($event) {
+    return _vm.$emit("close-datepicker");
+  } } })], 1), _c("div", { staticClass: "d-datepicker__bd" }, [_c("calendar", { ref: "calendar", attrs: { "locale": _vm.locale, "calendar-days": _vm.calendarDays, "select-day-label": _vm.selectDayLabel }, on: { "select-date": function($event) {
+    return _vm.$emit("selected-date", $event);
+  }, "focus-month-year-picker": function($event) {
+    return _vm.$refs.monthYearPicker.focusMonthYearPicker();
+  }, "close-datepicker": function($event) {
+    return _vm.$emit("close-datepicker");
+  }, "go-to-next-month": function($event) {
+    return _vm.$refs.monthYearPicker.goToNextMonth();
+  }, "go-to-prev-month": function($event) {
+    return _vm.$refs.monthYearPicker.goToPrevMonth();
   } } })], 1)]);
-}, X = [], ee = /* @__PURE__ */ m(
-  Q,
-  V,
-  X,
-  !1,
+};
+var _sfc_staticRenderFns = [];
+var __component__ = /* @__PURE__ */ normalizeComponent(
+  _sfc_main,
+  _sfc_render,
+  _sfc_staticRenderFns,
+  false,
   null,
   null,
   null,
   null
 );
-const _e = ee.exports;
-function ge(t, e = "default") {
-  return new Intl.DateTimeFormat(e, { weekday: "long", year: "numeric", month: "long", day: "numeric" }).format(t);
+const datepicker = __component__.exports;
+function formatLong(date, locale = "default") {
+  return new Intl.DateTimeFormat(locale, { weekday: "long", year: "numeric", month: "long", day: "numeric" }).format(date);
 }
-function be(t, e = "default") {
-  return new Intl.DateTimeFormat(e, { year: "numeric", month: "long", day: "numeric" }).format(t);
+function formatMedium(date, locale = "default") {
+  return new Intl.DateTimeFormat(locale, { year: "numeric", month: "long", day: "numeric" }).format(date);
 }
-function $e(t, e = "default", a = !0) {
-  const r = a ? { weekday: "short", year: "numeric", month: "short", day: "numeric" } : { year: "numeric", month: "short", day: "numeric" };
-  return new Intl.DateTimeFormat(e, r).format(t);
+function formatShort(date, locale = "default", showWeekday = true) {
+  const options = showWeekday ? { weekday: "short", year: "numeric", month: "short", day: "numeric" } : { year: "numeric", month: "short", day: "numeric" };
+  return new Intl.DateTimeFormat(locale, options).format(date);
 }
-function ve(t, e = "default", a = !1) {
-  const r = a ? "short" : "long";
-  return new Intl.DateTimeFormat(e, { month: r, day: "numeric" }).format(t);
+function formatNoYear(date, locale = "default", abbreviated = false) {
+  const monthFormat = abbreviated ? "short" : "long";
+  return new Intl.DateTimeFormat(locale, { month: monthFormat, day: "numeric" }).format(date);
 }
-function Me(t, e = "default") {
-  return new Intl.DateTimeFormat(e, { year: "2-digit", month: "2-digit", day: "2-digit" }).format(t);
+function formatNumerical(date, locale = "default") {
+  return new Intl.DateTimeFormat(locale, { year: "2-digit", month: "2-digit", day: "2-digit" }).format(date);
 }
 export {
-  _e as DtDatepicker,
-  ge as formatLong,
-  be as formatMedium,
-  ve as formatNoYear,
-  Me as formatNumerical,
-  $e as formatShort
+  datepicker as DtDatepicker,
+  formatLong,
+  formatMedium,
+  formatNoYear,
+  formatNumerical,
+  formatShort
 };
 //# sourceMappingURL=datepicker.js.map