@dialpad/dialtone-vue 3.120.0 → 3.120.2

package/dist/lib/datepicker.js

@@ -1,154 +1,233 @@
-import { ref as M, computed as I, watch as K, onMounted as J, openBlock as g, createBlock as G, unref as r, withCtx as h, createVNode as m, createElementVNode as w, toDisplayString as N, nextTick as T, createElementBlock as $, Fragment as A, renderList as R, normalizeClass as Z, createTextVNode as j } from "vue";
-import { startOfWeek as Q, addDays as C, getDay as P, addMonths as U, startOfMonth as X, getDate as E, endOfMonth as _, subMonths as V, getMonth as F, isEqual as ee, getYear as W, set as te, format as ae } from "date-fns";
-import { DtStack as q } from "./stack.js";
-import { DtTooltip as S } from "./tooltip.js";
-import { DtButton as L } from "./button.js";
-import { DtIcon as Y } from "./icon.js";
-import "../chunks/stack_constants-u7tNqGtc.js";
-import "../chunks/_plugin-vue_export-helper-hUChTQA_.js";
-import "../chunks/popover_constants-qjlEkroB.js";
+import { ref, computed, watch, onMounted, openBlock, createBlock, unref, withCtx, createVNode, createElementVNode, toDisplayString, nextTick, createElementBlock, Fragment, renderList, normalizeClass, createTextVNode } from "vue";
+import { startOfWeek, addDays, getDay, addMonths, startOfMonth, 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 { DtIcon } from "./icon.js";
+import "../chunks/stack_constants-HraCekPm.js";
+import "../chunks/_plugin-vue_export-helper-caHeSgYY.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 "./lazy-show.js";
-import "../chunks/link_constants-vIUB92L4.js";
+import "../chunks/link_constants-nWVlXQBs.js";
 import "@dialpad/dialtone-icons/vue3";
-import "../chunks/icon_constants-OpYAAKwF.js";
+import "../chunks/icon_constants-Dy4MEUJL.js";
 import "@dialpad/dialtone-icons/icons.json";
-const H = 0, ne = "MMMM", z = "long", B = (e) => e ? new Date(e) : /* @__PURE__ */ new Date(), re = (e, n, s) => {
-  const t = B(JSON.parse(JSON.stringify(e))), a = [];
-  for (let o = 0; o < 7; o++) {
-    const u = C(t, o), d = F(u) !== n;
-    a.push({
-      text: u.getDate(),
-      value: u,
-      currentMonth: !d,
-      isFirstDayOfMonth: u.getDate() === 1 && !d,
+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: s ? u.getDate() === s && !d : !1
+      selected: selectedDay ? next.getDate() === selectedDay && !isNext : false
     });
   }
-  return a;
-}, le = (e, n) => !e || !n ? !1 : ee(e, n), oe = (e, n, s) => {
-  const t = [], a = B(new Date(n, e)), o = B(new Date(n, e + 1, 0)), d = Q(a, { weekStartsOn: H }), v = (D) => {
-    const p = re(D, e, s);
-    if (t.push({ days: p }), !t[t.length - 1].days.some(
-      (b) => le(b.value, o)
+  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 b = C(D, 7);
-      v(b);
+      const nextDate = addDays(date, 7);
+      addDaysToWeek(nextDate);
     }
   };
-  return v(d), t;
-}, se = (e, n) => {
-  const s = [1, 2, 3, 4, 5, 6, 7].map((o) => new Intl.DateTimeFormat(e, { weekday: "short", timeZone: "UTC" }).format(/* @__PURE__ */ new Date(`2017-01-0${o}T00:00:00+00:00`)).slice(0, 2)), t = s.slice(0, n), a = s.slice(n + 1, s.length);
-  return [s[n]].concat(...a).concat(...t);
-}, ce = (e, n, s) => new Intl.DateTimeFormat(s, { month: n }).format(new Date(2e3, e, 1)), ue = (e) => {
-  const n = new Date(e), s = P(n), t = U(n, 1), a = X(t), o = P(a), u = (s - o + 7) % 7, d = C(a, u);
-  return E(d);
-}, ie = (e) => {
-  const n = new Date(e), s = P(n);
-  let a = _(V(n, 1));
-  for (; P(a) !== s; )
-    a = C(a, -1);
-  return E(a);
+  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);
 };
-function de(e, n) {
-  const s = M(F(e.selectedDate)), t = M(W(e.selectedDate)), a = M(null), o = M(0), u = M([]), d = I(() => oe(s.value, t.value, a.value)), v = I(() => (l, k, O) => ce(l, k, O));
-  K(s, () => {
-    i(), n("calendar-days", d.value);
-  }, { immediate: !0 }), K(t, () => {
-    i(), n("calendar-days", d.value);
-  }, { immediate: !0 });
-  function D(l) {
-    u.value.includes(l) || u.value.push(l);
+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);
   }
-  function p() {
-    u.value[0].$el.focus();
+  return getDate(focusDate);
+};
+function useMonthYearPicker(props, emits) {
+  const selectMonth = ref(getMonth(props.selectedDate));
+  const selectYear = ref(getYear(props.selectedDate));
+  const highlightedDay = ref(null);
+  const focusPicker = ref(0);
+  const focusRefs = ref([]);
+  const calendarDays = computed(() => {
+    return getCalendarDays(selectMonth.value, selectYear.value, highlightedDay.value);
+  });
+  const formattedMonth = computed(() => {
+    return (month, format2, locale) => formatMonth(month, format2, locale);
+  });
+  watch(selectMonth, () => {
+    highlightDay();
+    emits("calendar-days", calendarDays.value);
+  }, { immediate: true });
+  watch(selectYear, () => {
+    highlightDay();
+    emits("calendar-days", calendarDays.value);
+  }, { immediate: true });
+  function setDayRef(el) {
+    if (!focusRefs.value.includes(el)) {
+      focusRefs.value.push(el);
+    }
   }
-  function b(l) {
-    switch (l.key) {
+  function focusMonthYearPicker() {
+    focusRefs.value[0].$el.focus();
+  }
+  function handleKeyDown(event) {
+    switch (event.key) {
       case "ArrowLeft":
-        l.preventDefault(), o.value === 0 ? (o.value = 3, u.value[o.value].$el.focus()) : (o.value--, u.value[o.value].$el.focus());
+        event.preventDefault();
+        if (focusPicker.value === 0) {
+          focusPicker.value = 3;
+          focusRefs.value[focusPicker.value].$el.focus();
+        } else {
+          focusPicker.value--;
+          focusRefs.value[focusPicker.value].$el.focus();
+        }
         break;
       case "ArrowRight":
-        l.preventDefault(), o.value === 3 ? (o.value = 0, u.value[o.value].$el.focus()) : (o.value++, u.value[o.value].$el.focus());
+        event.preventDefault();
+        if (focusPicker.value === 3) {
+          focusPicker.value = 0;
+          focusRefs.value[focusPicker.value].$el.focus();
+        } else {
+          focusPicker.value++;
+          focusRefs.value[focusPicker.value].$el.focus();
+        }
         break;
       case "ArrowDown":
-        l.preventDefault(), n("focus-first-day");
+        event.preventDefault();
+        emits("focus-first-day");
         break;
       case "Tab":
-        l.preventDefault(), n("focus-first-day");
+        event.preventDefault();
+        emits("focus-first-day");
         break;
       case "Escape":
-        n("close-datepicker");
+        emits("close-datepicker");
         break;
     }
   }
-  function i() {
-    const l = W(e.selectedDate), k = F(e.selectedDate);
-    l !== t.value || k !== s.value ? a.value = null : a.value = E(e.selectedDate);
+  function highlightDay() {
+    const year = getYear(props.selectedDate);
+    const month = getMonth(props.selectedDate);
+    if (year !== selectYear.value || month !== selectMonth.value) {
+      highlightedDay.value = null;
+    } else {
+      highlightedDay.value = getDate(props.selectedDate);
+    }
   }
-  function y(l) {
-    (s.value === 0 && l === -1 || s.value === 11 && l === 1) && (t.value += l);
-    const k = te(e.selectedDate, { month: s.value, year: t.value }), O = l === 1 ? U(k, 1) : V(k, 1);
-    s.value = F(O);
+  function changeMonth(value) {
+    if (selectMonth.value === 0 && value === -1 || selectMonth.value === 11 && value === 1) {
+      selectYear.value += value;
+    }
+    const initialDate = set(props.selectedDate, { month: selectMonth.value, year: selectYear.value });
+    const newDate = value === 1 ? addMonths(initialDate, 1) : subMonths(initialDate, 1);
+    selectMonth.value = getMonth(newDate);
   }
-  function f(l) {
-    t.value = t.value + l;
+  function changeYear(value) {
+    selectYear.value = selectYear.value + value;
   }
-  function x() {
-    y(1);
+  function goToNextMonth() {
+    changeMonth(1);
   }
-  function c() {
-    y(-1);
+  function goToPrevMonth() {
+    changeMonth(-1);
   }
   return {
-    selectMonth: s,
-    selectYear: t,
-    formattedMonth: v,
-    setDayRef: D,
-    focusMonthYearPicker: p,
-    handleKeyDown: b,
-    changeMonth: y,
-    changeYear: f,
-    goToNextMonth: x,
-    goToPrevMonth: c
+    selectMonth,
+    selectYear,
+    formattedMonth,
+    setDayRef,
+    focusMonthYearPicker,
+    handleKeyDown,
+    changeMonth,
+    changeYear,
+    goToNextMonth,
+    goToPrevMonth
   };
 }
-const fe = {
+const _hoisted_1$2 = {
   id: "calendar-heading",
   class: "d-datepicker__month-year-title"
-}, me = {
+};
+const _sfc_main$2 = {
   __name: "month-year-picker",
   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: [
@@ -178,270 +257,318 @@ const fe = {
        */
     "close-datepicker"
   ],
-  setup(e, { expose: n, emit: s }) {
-    const t = e, a = s, {
-      selectMonth: o,
-      selectYear: u,
-      formattedMonth: d,
-      setDayRef: v,
-      focusMonthYearPicker: D,
-      handleKeyDown: p,
-      changeMonth: b,
-      changeYear: i,
-      goToNextMonth: y,
-      goToPrevMonth: f
-    } = de(t, a);
-    return J(() => {
-      D();
-    }), n({
-      focusMonthYearPicker: D,
-      goToNextMonth: y,
-      goToPrevMonth: f
-    }), (x, c) => (g(), G(r(q), {
-      direction: "row",
-      class: "d-datepicker__month-year",
-      gap: "300"
-    }, {
-      default: h(() => [
-        m(r(q), {
-          as: "nav",
-          direction: "row",
-          gap: "200",
-          class: "d-datepicker__nav"
-        }, {
-          default: h(() => [
-            m(r(S), {
-              message: e.prevYearLabel,
-              placement: "top"
-            }, {
-              anchor: h(() => [
-                m(r(L), {
-                  id: "prevYearButton",
-                  ref: (l) => {
-                    l && r(v)(l);
-                  },
-                  size: "xs",
-                  importance: "clear",
-                  kind: "muted",
-                  circle: !0,
-                  class: "d-datepicker__nav-btn",
-                  type: "button",
-                  "aria-label": `${e.changeToLabel} ${e.prevYearLabel} ${r(u) - 1}`,
-                  onClick: c[0] || (c[0] = (l) => r(i)(-1)),
-                  onKeydown: c[1] || (c[1] = (l) => r(p)(l))
-                }, {
-                  default: h(() => [
-                    m(r(Y), {
-                      name: "chevrons-left",
-                      size: "200"
-                    })
-                  ]),
-                  _: 1
-                }, 8, ["aria-label"])
-              ]),
-              _: 1
-            }, 8, ["message"]),
-            m(r(S), {
-              message: e.prevMonthLabel,
-              placement: "top"
-            }, {
-              anchor: h(() => [
-                m(r(L), {
-                  id: "prevMonthButton",
-                  ref: (l) => {
-                    l && r(v)(l);
-                  },
-                  size: "xs",
-                  importance: "clear",
-                  kind: "muted",
-                  circle: !0,
-                  class: "d-datepicker__nav-btn",
-                  type: "button",
-                  "aria-label": `${e.changeToLabel} ${e.prevMonthLabel} ${r(d)(r(o) - 1, r(z), e.locale)}`,
-                  onClick: c[2] || (c[2] = (l) => r(b)(-1)),
-                  onKeydown: c[3] || (c[3] = (l) => r(p)(l))
-                }, {
-                  default: h(() => [
-                    m(r(Y), {
-                      name: "chevron-left",
-                      size: "200"
-                    })
-                  ]),
-                  _: 1
-                }, 8, ["aria-label"])
-              ]),
-              _: 1
-            }, 8, ["message"])
-          ]),
-          _: 1
-        }),
-        w("div", fe, N(r(d)(r(o), r(z), e.locale)) + " " + N(r(u)), 1),
-        m(r(q), {
-          as: "nav",
-          direction: "row",
-          gap: "200",
-          class: "d-datepicker__nav"
-        }, {
-          default: h(() => [
-            m(r(S), {
-              message: e.nextMonthLabel,
-              placement: "top"
-            }, {
-              anchor: h(() => [
-                m(r(L), {
-                  id: "nextMonthButton",
-                  ref: (l) => {
-                    l && r(v)(l);
-                  },
-                  size: "xs",
-                  importance: "clear",
-                  kind: "muted",
-                  circle: !0,
-                  class: "d-datepicker__nav-btn",
-                  type: "button",
-                  "aria-label": `${e.changeToLabel} ${e.nextMonthLabel} ${r(d)(r(o) + 1, r(z), e.locale)}`,
-                  onClick: c[4] || (c[4] = (l) => r(b)(1)),
-                  onKeydown: c[5] || (c[5] = (l) => r(p)(l))
-                }, {
-                  default: h(() => [
-                    m(r(Y), {
-                      name: "chevron-right",
-                      size: "200"
-                    })
-                  ]),
-                  _: 1
-                }, 8, ["aria-label"])
-              ]),
-              _: 1
-            }, 8, ["message"]),
-            m(r(S), {
-              message: e.nextYearLabel,
-              placement: "top"
-            }, {
-              anchor: h(() => [
-                m(r(L), {
-                  id: "nextYearButton",
-                  ref: (l) => {
-                    l && r(v)(l);
-                  },
-                  size: "xs",
-                  importance: "clear",
-                  kind: "muted",
-                  circle: !0,
-                  class: "d-datepicker__nav-btn",
-                  type: "button",
-                  "aria-label": `${e.changeToLabel} ${e.nextYearLabel} ${r(u) + 1}`,
-                  onClick: c[6] || (c[6] = (l) => r(i)(1)),
-                  onKeydown: c[7] || (c[7] = (l) => r(p)(l))
-                }, {
-                  default: h(() => [
-                    m(r(Y), {
-                      name: "chevrons-right",
-                      size: "200"
-                    })
-                  ]),
-                  _: 1
-                }, 8, ["aria-label"])
-              ]),
-              _: 1
-            }, 8, ["message"])
-          ]),
-          _: 1
-        })
-      ]),
-      _: 1
-    }));
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props = __props;
+    const emits = __emit;
+    const {
+      selectMonth,
+      selectYear,
+      formattedMonth,
+      setDayRef,
+      focusMonthYearPicker,
+      handleKeyDown,
+      changeMonth,
+      changeYear,
+      goToNextMonth,
+      goToPrevMonth
+    } = useMonthYearPicker(props, emits);
+    onMounted(() => {
+      focusMonthYearPicker();
+    });
+    __expose({
+      focusMonthYearPicker,
+      goToNextMonth,
+      goToPrevMonth
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(DtStack), {
+        direction: "row",
+        class: "d-datepicker__month-year",
+        gap: "300"
+      }, {
+        default: withCtx(() => [
+          createVNode(unref(DtStack), {
+            as: "nav",
+            direction: "row",
+            gap: "200",
+            class: "d-datepicker__nav"
+          }, {
+            default: withCtx(() => [
+              createVNode(unref(DtTooltip), {
+                message: __props.prevYearLabel,
+                placement: "top"
+              }, {
+                anchor: withCtx(() => [
+                  createVNode(unref(DtButton), {
+                    id: "prevYearButton",
+                    ref: (el) => {
+                      if (el)
+                        unref(setDayRef)(el);
+                    },
+                    size: "xs",
+                    importance: "clear",
+                    kind: "muted",
+                    circle: true,
+                    class: "d-datepicker__nav-btn",
+                    type: "button",
+                    "aria-label": `${__props.changeToLabel} ${__props.prevYearLabel} ${unref(selectYear) - 1}`,
+                    onClick: _cache[0] || (_cache[0] = ($event) => unref(changeYear)(-1)),
+                    onKeydown: _cache[1] || (_cache[1] = ($event) => unref(handleKeyDown)($event))
+                  }, {
+                    default: withCtx(() => [
+                      createVNode(unref(DtIcon), {
+                        name: "chevrons-left",
+                        size: "200"
+                      })
+                    ]),
+                    _: 1
+                  }, 8, ["aria-label"])
+                ]),
+                _: 1
+              }, 8, ["message"]),
+              createVNode(unref(DtTooltip), {
+                message: __props.prevMonthLabel,
+                placement: "top"
+              }, {
+                anchor: withCtx(() => [
+                  createVNode(unref(DtButton), {
+                    id: "prevMonthButton",
+                    ref: (el) => {
+                      if (el)
+                        unref(setDayRef)(el);
+                    },
+                    size: "xs",
+                    importance: "clear",
+                    kind: "muted",
+                    circle: true,
+                    class: "d-datepicker__nav-btn",
+                    type: "button",
+                    "aria-label": `${__props.changeToLabel} ${__props.prevMonthLabel} ${unref(formattedMonth)(unref(selectMonth) - 1, unref(INTL_MONTH_FORMAT), __props.locale)}`,
+                    onClick: _cache[2] || (_cache[2] = ($event) => unref(changeMonth)(-1)),
+                    onKeydown: _cache[3] || (_cache[3] = ($event) => unref(handleKeyDown)($event))
+                  }, {
+                    default: withCtx(() => [
+                      createVNode(unref(DtIcon), {
+                        name: "chevron-left",
+                        size: "200"
+                      })
+                    ]),
+                    _: 1
+                  }, 8, ["aria-label"])
+                ]),
+                _: 1
+              }, 8, ["message"])
+            ]),
+            _: 1
+          }),
+          createElementVNode("div", _hoisted_1$2, toDisplayString(unref(formattedMonth)(unref(selectMonth), unref(INTL_MONTH_FORMAT), __props.locale)) + " " + toDisplayString(unref(selectYear)), 1),
+          createVNode(unref(DtStack), {
+            as: "nav",
+            direction: "row",
+            gap: "200",
+            class: "d-datepicker__nav"
+          }, {
+            default: withCtx(() => [
+              createVNode(unref(DtTooltip), {
+                message: __props.nextMonthLabel,
+                placement: "top"
+              }, {
+                anchor: withCtx(() => [
+                  createVNode(unref(DtButton), {
+                    id: "nextMonthButton",
+                    ref: (el) => {
+                      if (el)
+                        unref(setDayRef)(el);
+                    },
+                    size: "xs",
+                    importance: "clear",
+                    kind: "muted",
+                    circle: true,
+                    class: "d-datepicker__nav-btn",
+                    type: "button",
+                    "aria-label": `${__props.changeToLabel} ${__props.nextMonthLabel} ${unref(formattedMonth)(unref(selectMonth) + 1, unref(INTL_MONTH_FORMAT), __props.locale)}`,
+                    onClick: _cache[4] || (_cache[4] = ($event) => unref(changeMonth)(1)),
+                    onKeydown: _cache[5] || (_cache[5] = ($event) => unref(handleKeyDown)($event))
+                  }, {
+                    default: withCtx(() => [
+                      createVNode(unref(DtIcon), {
+                        name: "chevron-right",
+                        size: "200"
+                      })
+                    ]),
+                    _: 1
+                  }, 8, ["aria-label"])
+                ]),
+                _: 1
+              }, 8, ["message"]),
+              createVNode(unref(DtTooltip), {
+                message: __props.nextYearLabel,
+                placement: "top"
+              }, {
+                anchor: withCtx(() => [
+                  createVNode(unref(DtButton), {
+                    id: "nextYearButton",
+                    ref: (el) => {
+                      if (el)
+                        unref(setDayRef)(el);
+                    },
+                    size: "xs",
+                    importance: "clear",
+                    kind: "muted",
+                    circle: true,
+                    class: "d-datepicker__nav-btn",
+                    type: "button",
+                    "aria-label": `${__props.changeToLabel} ${__props.nextYearLabel} ${unref(selectYear) + 1}`,
+                    onClick: _cache[6] || (_cache[6] = ($event) => unref(changeYear)(1)),
+                    onKeydown: _cache[7] || (_cache[7] = ($event) => unref(handleKeyDown)($event))
+                  }, {
+                    default: withCtx(() => [
+                      createVNode(unref(DtIcon), {
+                        name: "chevrons-right",
+                        size: "200"
+                      })
+                    ]),
+                    _: 1
+                  }, 8, ["aria-label"])
+                ]),
+                _: 1
+              }, 8, ["message"])
+            ]),
+            _: 1
+          })
+        ]),
+        _: 1
+      });
+    };
   }
 };
-function ve(e, n) {
-  const s = M(null), t = M(0), a = M([]), o = I(() => se(e.locale, H));
-  K(() => e.calendarDays, () => {
-    t.value = 0, a.value = [], s.value = null;
+function useCalendar(props, emits) {
+  const selectedDay = ref(null);
+  const focusDay = ref(0);
+  const daysRef = ref([]);
+  const weekDays = computed(() => {
+    return getWeekDayNames(props.locale, WEEK_START);
+  });
+  watch(() => props.calendarDays, () => {
+    focusDay.value = 0;
+    daysRef.value = [];
+    selectedDay.value = null;
   });
-  function u(i) {
-    return `${e.selectDayLabel} ${i.text} ${ae(i.value, ne)} ${W(i.value)}`;
+  function dayAriaLabel(day) {
+    return `${props.selectDayLabel} ${day.text} ${format(day.value, MONTH_FORMAT)} ${getYear(day.value)}`;
   }
-  function d(i, y) {
-    !a.value.some((f) => f.el === i) && y.currentMonth && a.value.push({ el: i, day: y });
+  function setDayRef(el, day) {
+    if (!daysRef.value.some((day2) => day2.el === el) && day.currentMonth) {
+      daysRef.value.push({ el, day });
+    }
   }
-  function v(i) {
-    switch (i.key) {
+  function handleKeyDown(event) {
+    switch (event.key) {
       case "ArrowUp":
-        i.preventDefault(), t.value -= 7;
+        event.preventDefault();
+        focusDay.value -= 7;
         try {
-          a.value[t.value].el.$el.focus();
-        } catch {
-          const f = ie(a.value[t.value + 7].day.value);
-          n("go-to-prev-month"), T(() => {
-            a.value[f - 1].el.$el.focus(), t.value += f - 1;
+          daysRef.value[focusDay.value].el.$el.focus();
+        } catch (error) {
+          const prevFocusDate = calculatePrevFocusDate(daysRef.value[focusDay.value + 7].day.value);
+          emits("go-to-prev-month");
+          nextTick(() => {
+            daysRef.value[prevFocusDate - 1].el.$el.focus();
+            focusDay.value += prevFocusDate - 1;
           });
         }
         break;
       case "ArrowDown":
-        i.preventDefault(), t.value += 7;
+        event.preventDefault();
+        focusDay.value += 7;
         try {
-          a.value[t.value].el.$el.focus();
-        } catch {
-          const f = ue(a.value[t.value - 7].day.value);
-          n("go-to-next-month"), T(() => {
-            a.value[f - 1].el.$el.focus(), t.value += f - 1;
+          daysRef.value[focusDay.value].el.$el.focus();
+        } catch (error) {
+          const nextFocusDate = calculateNextFocusDate(daysRef.value[focusDay.value - 7].day.value);
+          emits("go-to-next-month");
+          nextTick(() => {
+            daysRef.value[nextFocusDate - 1].el.$el.focus();
+            focusDay.value += nextFocusDate - 1;
           });
         }
         break;
       case "ArrowLeft":
-        i.preventDefault(), t.value > 0 ? (t.value -= 1, a.value[t.value].el.$el.focus()) : (n("go-to-prev-month"), p());
+        event.preventDefault();
+        if (focusDay.value > 0) {
+          focusDay.value -= 1;
+          daysRef.value[focusDay.value].el.$el.focus();
+        } else {
+          emits("go-to-prev-month");
+          focusLastDay();
+        }
         break;
       case "ArrowRight":
-        i.preventDefault(), t.value < a.value.length - 1 ? (t.value += 1, a.value[t.value].el.$el.focus()) : (n("go-to-next-month"), D());
+        event.preventDefault();
+        if (focusDay.value < daysRef.value.length - 1) {
+          focusDay.value += 1;
+          daysRef.value[focusDay.value].el.$el.focus();
+        } else {
+          emits("go-to-next-month");
+          focusFirstDay();
+        }
         break;
       case "Tab":
-        i.preventDefault(), n("focus-month-year-picker");
+        event.preventDefault();
+        emits("focus-month-year-picker");
         break;
       case "Escape":
-        n("close-datepicker");
+        emits("close-datepicker");
         break;
     }
   }
-  function D() {
-    t.value = 0, T(() => {
-      a.value[t.value].el.$el.focus();
+  function focusFirstDay() {
+    focusDay.value = 0;
+    nextTick(() => {
+      daysRef.value[focusDay.value].el.$el.focus();
     });
   }
-  function p() {
-    T(() => {
-      t.value = a.value.length - 1, a.value[t.value].el.$el.focus();
+  function focusLastDay() {
+    nextTick(() => {
+      focusDay.value = daysRef.value.length - 1;
+      daysRef.value[focusDay.value].el.$el.focus();
     });
   }
-  function b(i) {
-    i.currentMonth && (s.value = i.text, n("select-date", i.value));
+  function selectDay(day) {
+    if (!day.currentMonth) {
+      return;
+    }
+    selectedDay.value = day.text;
+    emits("select-date", day.value);
   }
   return {
-    selectedDay: s,
-    weekDays: o,
-    dayAriaLabel: u,
-    setDayRef: d,
-    handleKeyDown: v,
-    focusFirstDay: D,
-    selectDay: b
+    selectedDay,
+    weekDays,
+    dayAriaLabel,
+    setDayRef,
+    handleKeyDown,
+    focusFirstDay,
+    selectDay
   };
 }
-const ye = {
+const _hoisted_1$1 = {
   class: "d-datepicker__calendar",
   "aria-labelledby": "calendar-heading"
-}, he = ["title", "aria-label"], De = {
+};
+const _hoisted_2$1 = ["title", "aria-label"];
+const _sfc_main$1 = {
   __name: "calendar",
   props: {
     calendarDays: {
       type: Array,
-      required: !0
+      required: true
     },
     locale: {
       type: String,
-      required: !0
+      required: true
     },
     selectDayLabel: {
       type: String,
-      required: !0
+      required: true
     }
   },
   emits: [
@@ -477,72 +604,87 @@ const ye = {
        */
     "go-to-prev-month"
   ],
-  setup(e, { expose: n, emit: s }) {
-    const t = e, a = s, {
-      selectedDay: o,
-      weekDays: u,
-      dayAriaLabel: d,
-      setDayRef: v,
-      handleKeyDown: D,
-      focusFirstDay: p,
-      selectDay: b
-    } = ve(t, a);
-    return n({
-      focusFirstDay: p
-    }), (i, y) => (g(), $("table", ye, [
-      w("thead", null, [
-        w("tr", null, [
-          (g(!0), $(A, null, R(r(u), (f) => (g(), $("th", {
-            key: f,
-            scope: "col",
-            class: "d-datepicker__cell d-datepicker__cell--header"
-          }, [
-            w("span", {
-              class: "d-datepicker__weekday",
-              title: f,
-              "aria-label": f
-            }, N(f), 9, he)
-          ]))), 128))
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props = __props;
+    const emits = __emit;
+    const {
+      selectedDay,
+      weekDays,
+      dayAriaLabel,
+      setDayRef,
+      handleKeyDown,
+      focusFirstDay,
+      selectDay
+    } = useCalendar(props, emits);
+    __expose({
+      focusFirstDay
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("table", _hoisted_1$1, [
+        createElementVNode("thead", null, [
+          createElementVNode("tr", null, [
+            (openBlock(true), createElementBlock(Fragment, null, renderList(unref(weekDays), (day) => {
+              return openBlock(), createElementBlock("th", {
+                key: day,
+                scope: "col",
+                class: "d-datepicker__cell d-datepicker__cell--header"
+              }, [
+                createElementVNode("span", {
+                  class: "d-datepicker__weekday",
+                  title: day,
+                  "aria-label": day
+                }, toDisplayString(day), 9, _hoisted_2$1)
+              ]);
+            }), 128))
+          ])
+        ]),
+        createElementVNode("tbody", null, [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(__props.calendarDays, (week, indexWeek) => {
+            return openBlock(), createElementBlock("tr", { key: indexWeek }, [
+              (openBlock(true), createElementBlock(Fragment, null, renderList(week.days, (day, indexDays) => {
+                return openBlock(), createElementBlock("td", {
+                  key: indexWeek + indexDays,
+                  class: "d-datepicker__cell",
+                  role: "listbox"
+                }, [
+                  createVNode(unref(DtButton), {
+                    ref_for: true,
+                    ref: (el) => {
+                      if (el)
+                        unref(setDayRef)(el, day);
+                    },
+                    class: normalizeClass(["d-datepicker__day", {
+                      "d-datepicker__day--disabled": !day.currentMonth,
+                      "d-datepicker__day--selected": unref(selectedDay) ? day.text === unref(selectedDay) && day.currentMonth : day.selected
+                    }]),
+                    circle: true,
+                    size: "sm",
+                    importance: "clear",
+                    disabled: !day.currentMonth,
+                    type: "button",
+                    "aria-selected": !!unref(selectedDay) ? day.text === unref(selectedDay) && day.currentMonth : day.selected,
+                    "aria-label": unref(dayAriaLabel)(day),
+                    role: "option",
+                    onClick: ($event) => unref(selectDay)(day),
+                    onKeydown: _cache[0] || (_cache[0] = ($event) => unref(handleKeyDown)($event))
+                  }, {
+                    default: withCtx(() => [
+                      createTextVNode(toDisplayString(day.text), 1)
+                    ]),
+                    _: 2
+                  }, 1032, ["disabled", "class", "aria-selected", "aria-label", "onClick"])
+                ]);
+              }), 128))
+            ]);
+          }), 128))
         ])
-      ]),
-      w("tbody", null, [
-        (g(!0), $(A, null, R(e.calendarDays, (f, x) => (g(), $("tr", { key: x }, [
-          (g(!0), $(A, null, R(f.days, (c, l) => (g(), $("td", {
-            key: x + l,
-            class: "d-datepicker__cell",
-            role: "listbox"
-          }, [
-            m(r(L), {
-              ref_for: !0,
-              ref: (k) => {
-                k && r(v)(k, c);
-              },
-              class: Z(["d-datepicker__day", {
-                "d-datepicker__day--disabled": !c.currentMonth,
-                "d-datepicker__day--selected": r(o) ? c.text === r(o) && c.currentMonth : c.selected
-              }]),
-              circle: !0,
-              size: "sm",
-              importance: "clear",
-              disabled: !c.currentMonth,
-              type: "button",
-              "aria-selected": r(o) ? c.text === r(o) && c.currentMonth : c.selected,
-              "aria-label": r(d)(c),
-              role: "option",
-              onClick: (k) => r(b)(c),
-              onKeydown: y[0] || (y[0] = (k) => r(D)(k))
-            }, {
-              default: h(() => [
-                j(N(c.text), 1)
-              ]),
-              _: 2
-            }, 1032, ["disabled", "class", "aria-selected", "aria-label", "onClick"])
-          ]))), 128))
-        ]))), 128))
-      ])
-    ]));
+      ]);
+    };
   }
-}, pe = { class: "d-datepicker__hd" }, be = { class: "d-datepicker__bd" }, Re = {
+};
+const _hoisted_1 = { class: "d-datepicker__hd" };
+const _hoisted_2 = { class: "d-datepicker__bd" };
+const _sfc_main = {
   __name: "datepicker",
   props: {
     /**
@@ -553,7 +695,7 @@ const ye = {
        */
     prevMonthLabel: {
       type: String,
-      required: !0
+      required: true
     },
     /**
        * Label for the next month button
@@ -563,7 +705,7 @@ const ye = {
        */
     nextMonthLabel: {
       type: String,
-      required: !0
+      required: true
     },
     /**
        * Label for the previous year button
@@ -573,7 +715,7 @@ const ye = {
        */
     prevYearLabel: {
       type: String,
-      required: !0
+      required: true
     },
     /**
        * Label for the next year button
@@ -583,7 +725,7 @@ const ye = {
        */
     nextYearLabel: {
       type: String,
-      required: !0
+      required: true
     },
     /**
        * Label for the select day button
@@ -593,7 +735,7 @@ const ye = {
        */
     selectDayLabel: {
       type: String,
-      required: !0
+      required: true
     },
     /**
        * Label for the change to button
@@ -603,7 +745,7 @@ const ye = {
        */
     changeToLabel: {
       type: String,
-      required: !0
+      required: true
     },
     /**
        * Locale for the calendar
@@ -639,73 +781,75 @@ const ye = {
        */
     "close-datepicker"
   ],
-  setup(e) {
-    const n = M([]);
-    function s(t) {
-      n.value = t;
+  setup(__props) {
+    const calendarDays = ref([]);
+    function updateCalendarDays(days) {
+      calendarDays.value = days;
     }
-    return (t, a) => (g(), G(r(q), {
-      class: "d-datepicker",
-      gap: "400"
-    }, {
-      default: h(() => [
-        w("div", pe, [
-          m(me, {
-            ref: "monthYearPicker",
-            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,
-            onCalendarDays: s,
-            onFocusFirstDay: a[0] || (a[0] = (o) => t.$refs.calendar.focusFirstDay()),
-            onFocusLastDay: a[1] || (a[1] = (o) => t.$refs.calendar.focusLastDay()),
-            onCloseDatepicker: a[2] || (a[2] = (o) => t.$emit("close-datepicker"))
-          }, null, 8, ["locale", "prev-month-label", "next-month-label", "prev-year-label", "next-year-label", "change-to-label", "selected-date"])
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(DtStack), {
+        class: "d-datepicker",
+        gap: "400"
+      }, {
+        default: withCtx(() => [
+          createElementVNode("div", _hoisted_1, [
+            createVNode(_sfc_main$2, {
+              ref: "monthYearPicker",
+              locale: __props.locale,
+              "prev-month-label": __props.prevMonthLabel,
+              "next-month-label": __props.nextMonthLabel,
+              "prev-year-label": __props.prevYearLabel,
+              "next-year-label": __props.nextYearLabel,
+              "change-to-label": __props.changeToLabel,
+              "selected-date": __props.selectedDate,
+              onCalendarDays: updateCalendarDays,
+              onFocusFirstDay: _cache[0] || (_cache[0] = ($event) => _ctx.$refs.calendar.focusFirstDay()),
+              onFocusLastDay: _cache[1] || (_cache[1] = ($event) => _ctx.$refs.calendar.focusLastDay()),
+              onCloseDatepicker: _cache[2] || (_cache[2] = ($event) => _ctx.$emit("close-datepicker"))
+            }, null, 8, ["locale", "prev-month-label", "next-month-label", "prev-year-label", "next-year-label", "change-to-label", "selected-date"])
+          ]),
+          createElementVNode("div", _hoisted_2, [
+            createVNode(_sfc_main$1, {
+              ref: "calendar",
+              locale: __props.locale,
+              "calendar-days": calendarDays.value,
+              "select-day-label": __props.selectDayLabel,
+              onSelectDate: _cache[3] || (_cache[3] = ($event) => _ctx.$emit("selected-date", $event)),
+              onFocusMonthYearPicker: _cache[4] || (_cache[4] = ($event) => _ctx.$refs.monthYearPicker.focusMonthYearPicker()),
+              onCloseDatepicker: _cache[5] || (_cache[5] = ($event) => _ctx.$emit("close-datepicker")),
+              onGoToNextMonth: _cache[6] || (_cache[6] = ($event) => _ctx.$refs.monthYearPicker.goToNextMonth()),
+              onGoToPrevMonth: _cache[7] || (_cache[7] = ($event) => _ctx.$refs.monthYearPicker.goToPrevMonth())
+            }, null, 8, ["locale", "calendar-days", "select-day-label"])
+          ])
         ]),
-        w("div", be, [
-          m(De, {
-            ref: "calendar",
-            locale: e.locale,
-            "calendar-days": n.value,
-            "select-day-label": e.selectDayLabel,
-            onSelectDate: a[3] || (a[3] = (o) => t.$emit("selected-date", o)),
-            onFocusMonthYearPicker: a[4] || (a[4] = (o) => t.$refs.monthYearPicker.focusMonthYearPicker()),
-            onCloseDatepicker: a[5] || (a[5] = (o) => t.$emit("close-datepicker")),
-            onGoToNextMonth: a[6] || (a[6] = (o) => t.$refs.monthYearPicker.goToNextMonth()),
-            onGoToPrevMonth: a[7] || (a[7] = (o) => t.$refs.monthYearPicker.goToPrevMonth())
-          }, null, 8, ["locale", "calendar-days", "select-day-label"])
-        ])
-      ]),
-      _: 1
-    }));
+        _: 1
+      });
+    };
   }
 };
-function ze(e, n = "default") {
-  return new Intl.DateTimeFormat(n, { weekday: "long", year: "numeric", month: "long", day: "numeric" }).format(e);
+function formatLong(date, locale = "default") {
+  return new Intl.DateTimeFormat(locale, { weekday: "long", year: "numeric", month: "long", day: "numeric" }).format(date);
 }
-function Ie(e, n = "default") {
-  return new Intl.DateTimeFormat(n, { year: "numeric", month: "long", day: "numeric" }).format(e);
+function formatMedium(date, locale = "default") {
+  return new Intl.DateTimeFormat(locale, { year: "numeric", month: "long", day: "numeric" }).format(date);
 }
-function Ke(e, n = "default", s = !0) {
-  const t = s ? { weekday: "short", year: "numeric", month: "short", day: "numeric" } : { year: "numeric", month: "short", day: "numeric" };
-  return new Intl.DateTimeFormat(n, t).format(e);
+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 We(e, n = "default", s = !1) {
-  const t = s ? "short" : "long";
-  return new Intl.DateTimeFormat(n, { month: t, day: "numeric" }).format(e);
+function formatNoYear(date, locale = "default", abbreviated = false) {
+  const monthFormat = abbreviated ? "short" : "long";
+  return new Intl.DateTimeFormat(locale, { month: monthFormat, day: "numeric" }).format(date);
 }
-function Be(e, n = "default") {
-  return new Intl.DateTimeFormat(n, { year: "2-digit", month: "2-digit", day: "2-digit" }).format(e);
+function formatNumerical(date, locale = "default") {
+  return new Intl.DateTimeFormat(locale, { year: "2-digit", month: "2-digit", day: "2-digit" }).format(date);
 }
 export {
-  Re as DtDatepicker,
-  ze as formatLong,
-  Ie as formatMedium,
-  We as formatNoYear,
-  Be as formatNumerical,
-  Ke as formatShort
+  _sfc_main as DtDatepicker,
+  formatLong,
+  formatMedium,
+  formatNoYear,
+  formatNumerical,
+  formatShort
 };
 //# sourceMappingURL=datepicker.js.map