@mattermost/compass-ui 0.1.0-alpha.27 → 0.1.0-alpha.28

package/dist/components/date-range-picker/DateRangePicker.js

@@ -1,17 +1,17 @@
-import { jsxs as _, jsx as s } from "react/jsx-runtime";
-import { useId as qe, useRef as G, useState as b, useCallback as m, useEffect as $ } from "react";
-import He from "../button/Button.js";
-import ue, { ICON_BUTTON_ICON_SIZES as de } from "../icon-button/IconButton.js";
+import { jsxs as b, jsx as s } from "react/jsx-runtime";
+import { useId as nt, useRef as oe, useState as k, useCallback as m, useEffect as P } from "react";
+import ot from "../button/Button.js";
+import Ne, { ICON_BUTTON_ICON_SIZES as Ee } from "../icon-button/IconButton.js";
 import F from "../icon/Icon.js";
-import __pe from "@mattermost/compass-icons/components/calendar-outline.js";const pe=__pe&&__pe.default?__pe.default:__pe;
-import __Ve from "@mattermost/compass-icons/components/chevron-down.js";const Ve=__Ve&&__Ve.default?__Ve.default:__Ve;
-import __We from "@mattermost/compass-icons/components/chevron-left.js";const We=__We&&__We.default?__We.default:__We;
-import __Je from "@mattermost/compass-icons/components/chevron-right.js";const Je=__Je&&__Je.default?__Je.default:__Je;
-import { useAnchoredPopupPortal as Ue } from "../../hooks/use-anchored-popup-portal.js";
-import { useOutsideClose as Ge } from "../../hooks/use-outside-close.js";
-import { usePopoverTransition as Ze } from "../../hooks/use-popover-transition.js";
-import a from "./DateRangePicker.module.scss.js";
-const Qe = 360, Xe = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"], et = [
+import __Se from "@mattermost/compass-icons/components/calendar-outline.js";const Se=__Se&&__Se.default?__Se.default:__Se;
+import __st from "@mattermost/compass-icons/components/chevron-down.js";const st=__st&&__st.default?__st.default:__st;
+import __it from "@mattermost/compass-icons/components/chevron-left.js";const it=__it&&__it.default?__it.default:__it;
+import __ct from "@mattermost/compass-icons/components/chevron-right.js";const ct=__ct&&__ct.default?__ct.default:__ct;
+import { useAnchoredPopupPortal as lt } from "../../hooks/use-anchored-popup-portal.js";
+import { useOutsideClose as dt } from "../../hooks/use-outside-close.js";
+import { usePopoverTransition as ut } from "../../hooks/use-popover-transition.js";
+import r from "./DateRangePicker.module.scss.js";
+const pt = 360, ft = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"], se = [
   "January",
   "February",
   "March",
@@ -25,187 +25,195 @@ const Qe = 360, Xe = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"], et = [
   "November",
   "December"
 ];
-function tt(c) {
+function mt(c) {
   if (!c) return "";
-  const [r, p, k] = c.split("-");
-  return `${p}/${k}/${r}`;
+  const [a, p, _] = c.split("-");
+  return `${p}/${_}/${a}`;
 }
-function Z(c, r, p) {
-  return `${c}-${String(r + 1).padStart(2, "0")}-${String(p).padStart(2, "0")}`;
+function ie(c, a, p) {
+  return `${c}-${String(a + 1).padStart(2, "0")}-${String(p).padStart(2, "0")}`;
 }
-function Q(c, r) {
-  return new Date(c, r + 1, 0).getDate();
+function ce(c, a) {
+  return new Date(c, a + 1, 0).getDate();
 }
-function rt(c, r) {
-  return new Date(c, r, 1).getDay();
+function gt(c, a) {
+  return new Date(c, a, 1).getDay();
 }
-function X(c, r) {
-  return c === r;
+function le(c, a) {
+  return c === a;
 }
-function nt(c, r, p) {
-  if (!r || !p) return !1;
-  const [k, E] = r < p ? [r, p] : [p, r];
-  return c > k && c < E;
+function ht(c, a, p) {
+  if (!a || !p) return !1;
+  const [_, E] = a < p ? [a, p] : [p, a];
+  return c > _ && c < E;
 }
-function x(c, r, p) {
+function z(c, a, p) {
   if (!c) return null;
-  const [k, E, S] = c.split("-").map(Number);
-  return k === r && E === p + 1 ? S : null;
+  const [_, E, S] = c.split("-").map(Number);
+  return _ === a && E === p + 1 ? S : null;
 }
-function yt({
+function $t({
   className: c = "",
-  mode: r = "date",
+  mode: a = "date",
   value: p,
-  startDate: k,
+  startDate: _,
   endDate: E,
   onChange: S,
-  onRangeChange: O,
+  onRangeChange: j,
   disabled: D,
-  id: fe,
-  portalContainer: me = null,
-  zIndex: ge,
-  placeholder: he = "mm/dd/yyyy",
-  formatDate: P = tt,
-  monthNames: ee = et,
-  weekdayNames: ye = Xe,
-  dialogLabel: ve = "Date picker",
-  todayLabel: ke = "Today",
-  previousMonthLabel: De = "Previous month",
-  nextMonthLabel: _e = "Next month"
+  required: Me,
+  onFocus: Y,
+  onBlur: q,
+  label: x,
+  id: Ae,
+  "aria-label": de,
+  "aria-labelledby": ue,
+  "aria-describedby": $e,
+  portalContainer: Fe = null,
+  zIndex: xe,
+  placeholder: K = "mm/dd/yyyy",
+  formatDate: H = mt,
+  monthNames: L = se,
+  shortMonthNames: Ce = L === se ? se.map((V) => V.slice(0, 3)) : L,
+  weekdayNames: Re = ft,
+  dialogLabel: pe = "Date picker",
+  todayLabel: Te = "Today",
+  previousMonthLabel: Be = "Previous month",
+  nextMonthLabel: Oe = "Next month"
 }) {
-  const be = qe(), te = fe ?? be, re = `${te}-popover`, z = G(null), j = G(null), L = G(null), M = /* @__PURE__ */ new Date(), Y = Z(
-    M.getFullYear(),
-    M.getMonth(),
-    M.getDate()
-  ), [i, B] = b(M.getFullYear()), [o, C] = b(M.getMonth()), [l, K] = b(!1), [q, w] = b(1), [we, Ie] = b(""), [Ne, ne] = b(""), [Ee, ae] = b(""), I = p ?? we, u = k ?? Ne, g = E ?? Ee, Se = r === "date" ? !!I : !!u, { mounted: H, visible: V } = Ze(l), {
-    placement: Me,
-    style: Ae,
-    portalRef: R,
-    renderPortal: Fe
-  } = Ue(j, H, {
-    preferredHeight: Qe,
-    portalContainer: me,
-    zIndex: ge,
+  const V = nt(), C = Ae ?? V, fe = `${C}-popover`, me = `${C}-label`, ge = `${C}-value`, M = x != null && typeof x != "boolean" && x !== "", W = oe(null), J = oe(null), U = oe(null), A = /* @__PURE__ */ new Date(), G = ie(
+    A.getFullYear(),
+    A.getMonth(),
+    A.getDate()
+  ), [i, R] = k(A.getFullYear()), [o, T] = k(A.getMonth()), [l, Z] = k(!1), [Pe, he] = k(!1), [Q, w] = k(1), [ze, je] = k(""), [Ye, ye] = k(""), [qe, ve] = k(""), I = p ?? ze, d = _ ?? Ye, g = E ?? qe, ke = a === "date" ? !!I : !!d, { mounted: X, visible: ee } = ut(l), {
+    placement: Ke,
+    style: He,
+    portalRef: B,
+    renderPortal: Le
+  } = lt(J, X, {
+    preferredHeight: pt,
+    portalContainer: Fe,
+    zIndex: xe,
     matchWidth: !1
   }), h = m((e = !0) => {
     var t;
-    K(!1), e && ((t = j.current) == null || t.focus());
+    Z(!1), e && ((t = J.current) == null || t.focus());
   }, []);
-  Ge(z, l, () => h(!0), R), $(() => {
+  dt(W, l, () => h(!0), B), P(() => {
     if (!l) return;
     function e(t) {
       t.key === "Escape" && (t.preventDefault(), h(!0));
     }
     return document.addEventListener("keydown", e), () => document.removeEventListener("keydown", e);
-  }, [l, h]), $(() => {
+  }, [l, h]), P(() => {
     if (!l) return;
     function e(t) {
-      var d, f;
+      var u, f;
       const n = t.target;
-      n && ((d = z.current) != null && d.contains(n) || (f = R.current) != null && f.contains(n) || h(!1));
+      n && ((u = W.current) != null && u.contains(n) || (f = B.current) != null && f.contains(n) || h(!1));
     }
     return document.addEventListener("focusin", e), () => document.removeEventListener("focusin", e);
-  }, [l, h, R]);
-  const v = Q(i, o), Be = m(() => {
-    if (r === "date") {
-      const t = x(I, i, o);
+  }, [l, h, B]);
+  const v = ce(i, o), Ve = m(() => {
+    if (a === "date") {
+      const t = z(I, i, o);
       if (t) return t;
     } else {
-      const t = x(g, i, o);
+      const t = z(g, i, o);
       if (t) return t;
-      const n = x(u, i, o);
+      const n = z(d, i, o);
       if (n) return n;
     }
-    const e = x(Y, i, o);
+    const e = z(G, i, o);
     return e || 1;
   }, [
-    r,
+    a,
     I,
-    u,
+    d,
     g,
     i,
     o,
-    Y
+    G
   ]);
-  $(() => {
-    if (!l || !V) return;
-    const e = Be();
+  P(() => {
+    if (!l || !ee) return;
+    const e = Ve();
     w(e);
     const t = requestAnimationFrame(() => {
-      var n, d;
-      (d = (n = L.current) == null ? void 0 : n.querySelector(`[data-day="${e}"]`)) == null || d.focus();
+      var n, u;
+      (u = (n = U.current) == null ? void 0 : n.querySelector(`[data-day="${e}"]`)) == null || u.focus();
     });
     return () => cancelAnimationFrame(t);
-  }, [l, V]);
+  }, [l, ee]);
   const y = m((e) => {
     w(e), requestAnimationFrame(() => {
       var t, n;
-      (n = (t = L.current) == null ? void 0 : t.querySelector(`[data-day="${e}"]`)) == null || n.focus();
+      (n = (t = U.current) == null ? void 0 : t.querySelector(`[data-day="${e}"]`)) == null || n.focus();
     });
-  }, []), W = m(() => {
-    D || K((e) => !e);
-  }, [D]), Ce = m(() => {
-    C((e) => e === 0 ? (B((t) => t - 1), 11) : e - 1);
-  }, []), Re = m(() => {
-    C((e) => e === 11 ? (B((t) => t + 1), 0) : e + 1);
+  }, []), te = m(() => {
+    D || Z((e) => !e);
+  }, [D]), We = m(() => {
+    T((e) => e === 0 ? (R((t) => t - 1), 11) : e - 1);
+  }, []), Je = m(() => {
+    T((e) => e === 11 ? (R((t) => t + 1), 0) : e + 1);
   }, []), N = m(
     (e, t) => {
-      const n = e === -1 ? o === 0 ? 11 : o - 1 : o === 11 ? 0 : o + 1, d = e === -1 ? o === 0 ? i - 1 : i : o === 11 ? i + 1 : i, f = Q(d, n);
-      B(d), C(n), y(Math.min(t, f));
+      const n = e === -1 ? o === 0 ? 11 : o - 1 : o === 11 ? 0 : o + 1, u = e === -1 ? o === 0 ? i - 1 : i : o === 11 ? i + 1 : i, f = ce(u, n);
+      R(u), T(n), y(Math.min(t, f));
     },
     [o, i, y]
-  ), Te = m(() => {
+  ), Ue = m(() => {
     const e = /* @__PURE__ */ new Date();
-    B(e.getFullYear()), C(e.getMonth()), y(e.getDate());
-  }, [y]), J = m(
+    R(e.getFullYear()), T(e.getMonth()), y(e.getDate());
+  }, [y]), re = m(
     (e, t) => {
-      if (r === "date")
-        S ? S(e) : Ie(e), h(!0);
-      else if (!u || u && g)
-        ne(e), ae(""), w(t);
+      if (a === "date")
+        S ? S(e) : je(e), h(!0);
+      else if (!d || d && g)
+        ye(e), ve(""), w(t);
       else {
-        const [n, d] = e >= u ? [u, e] : [e, u];
-        O ? O(n, d) : (ne(n), ae(d)), h(!0);
+        const [n, u] = e >= d ? [d, e] : [e, d];
+        j ? j(n, u) : (ye(n), ve(u)), h(!0);
       }
     },
-    [r, u, g, S, O, h]
-  ), A = m(
+    [a, d, g, S, j, h]
+  ), $ = m(
     (e) => {
-      const t = q + e;
+      const t = Q + e;
       if (t >= 1 && t <= v) {
         y(t);
         return;
       }
       t < 1 ? N(
         -1,
-        Q(
+        ce(
           o === 0 ? i - 1 : i,
           o === 0 ? 11 : o - 1
         ) + t
       ) : N(1, t - v);
     },
     [
-      q,
+      Q,
       v,
       o,
       i,
       y,
       N
     ]
-  ), $e = m(
+  ), Ge = m(
     (e, t) => {
       switch (e.key) {
         case "ArrowLeft":
-          e.preventDefault(), A(-1);
+          e.preventDefault(), $(-1);
           break;
         case "ArrowRight":
-          e.preventDefault(), A(1);
+          e.preventDefault(), $(1);
           break;
         case "ArrowUp":
-          e.preventDefault(), A(-7);
+          e.preventDefault(), $(-7);
           break;
         case "ArrowDown":
-          e.preventDefault(), A(7);
+          e.preventDefault(), $(7);
           break;
         case "Home":
           e.preventDefault(), y(1);
@@ -221,208 +229,222 @@ function yt({
           break;
         case "Enter":
         case " ":
-          e.preventDefault(), w(t), J(Z(i, o, t), t);
+          e.preventDefault(), w(t), re(ie(i, o, t), t);
           break;
       }
     },
     [
-      A,
+      $,
       y,
       v,
       N,
-      J,
+      re,
       i,
       o
     ]
-  ), xe = m(
+  ), Ze = m(
     (e) => {
       if (!D)
         switch (e.key) {
           case "Enter":
           case " ":
-            e.preventDefault(), W();
+            e.preventDefault(), te();
             break;
           case "ArrowDown":
-            l || (e.preventDefault(), K(!0));
+            l || (e.preventDefault(), Z(!0));
             break;
           case "Escape":
             l && (e.preventDefault(), h(!0));
             break;
         }
     },
-    [D, W, l, h]
+    [D, te, l, h]
   );
-  $(() => {
+  P(() => {
     l && w((e) => Math.min(Math.max(1, e), v));
   }, [l, v, o, i]);
-  const Oe = rt(i, o), T = [
-    ...Array(Oe).fill(null),
+  const Qe = gt(i, o), O = [
+    ...Array(Qe).fill(null),
     ...Array.from({ length: v }, (e, t) => t + 1)
   ];
-  for (; T.length % 7 !== 0; ) T.push(null);
-  const oe = [];
-  for (let e = 0; e < T.length; e += 7) oe.push(T.slice(e, e + 7));
-  const Pe = r === "date" ? I ? P(I) : "" : u ? `${P(u)}${g ? ` – ${P(g)}` : ""}` : "", ze = [
-    a["date-range-picker"],
-    l ? a["date-range-picker--open"] : "",
-    D ? a["date-range-picker--disabled"] : "",
+  for (; O.length % 7 !== 0; ) O.push(null);
+  const _e = [];
+  for (let e = 0; e < O.length; e += 7) _e.push(O.slice(e, e + 7));
+  const ae = a === "date" ? I ? H(I) : "" : d ? `${H(d)}${g ? ` – ${H(g)}` : ""}` : "", Xe = [
+    r["date-range-picker"],
+    l ? r["date-range-picker--open"] : "",
+    D ? r["date-range-picker--disabled"] : "",
+    M ? r["date-range-picker--has-label"] : "",
+    M && (l || Pe || ke) ? r["date-range-picker--label-floated"] : "",
     c
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ _("div", { ref: z, className: ze, children: [
-    /* @__PURE__ */ _(
+  return /* @__PURE__ */ b("div", { ref: W, className: Xe, children: [
+    M && /* @__PURE__ */ s("span", { id: me, className: r["date-range-picker__label"], children: x }),
+    /* @__PURE__ */ b(
       "div",
       {
-        ref: j,
-        className: a["date-range-picker__trigger"],
-        role: "button",
+        ref: J,
+        className: r["date-range-picker__trigger"],
+        role: "combobox",
         "aria-haspopup": "dialog",
         "aria-expanded": l,
-        "aria-controls": H ? re : void 0,
+        "aria-controls": X ? fe : void 0,
         "aria-disabled": D || void 0,
+        "aria-required": Me || void 0,
+        "aria-label": de ?? (ue == null && !M && !ae && !K ? pe : void 0),
+        "aria-labelledby": ue ?? (de == null ? M ? me : ae || K ? ge : void 0 : void 0),
+        "aria-describedby": $e,
         tabIndex: D ? -1 : 0,
-        id: te,
-        "data-has-value": Se ? "" : void 0,
-        onClick: W,
-        onKeyDown: xe,
+        id: C,
+        "data-has-value": ke ? "" : void 0,
+        onClick: te,
+        onKeyDown: Ze,
+        onFocus: (e) => {
+          he(!0), Y == null || Y(e);
+        },
+        onBlur: (e) => {
+          he(!1), q == null || q(e);
+        },
         children: [
           /* @__PURE__ */ s(
             "span",
             {
-              className: a["date-range-picker__calendar-icon"],
+              className: r["date-range-picker__calendar-icon"],
               "aria-hidden": !0,
-              children: /* @__PURE__ */ s(F, { size: "16", glyph: /* @__PURE__ */ s(pe, {}) })
+              children: /* @__PURE__ */ s(F, { size: "16", glyph: /* @__PURE__ */ s(Se, {}) })
             }
           ),
-          /* @__PURE__ */ s("span", { className: a["date-range-picker__value"], children: Pe || he }),
-          /* @__PURE__ */ s("span", { className: a["date-range-picker__chevron"], "aria-hidden": !0, children: /* @__PURE__ */ s(F, { size: "16", glyph: /* @__PURE__ */ s(Ve, {}) }) })
+          /* @__PURE__ */ s("span", { id: ge, className: r["date-range-picker__value"], children: ae || K }),
+          /* @__PURE__ */ s("span", { className: r["date-range-picker__chevron"], "aria-hidden": !0, children: /* @__PURE__ */ s(F, { size: "12", glyph: /* @__PURE__ */ s(st, {}) }) })
         ]
       }
     ),
-    H && Fe(
-      /* @__PURE__ */ _(
+    X && Le(
+      /* @__PURE__ */ b(
         "div",
         {
-          ref: R,
-          id: re,
+          ref: B,
+          id: fe,
           className: [
-            a["date-range-picker__popover"],
-            Me === "above" ? a["date-range-picker__popover--above"] : "",
-            V ? a["date-range-picker__popover--visible"] : ""
+            r["date-range-picker__popover"],
+            Ke === "above" ? r["date-range-picker__popover--above"] : "",
+            ee ? r["date-range-picker__popover--visible"] : ""
           ].filter(Boolean).join(" "),
-          style: Ae,
+          style: He,
           role: "dialog",
           "aria-modal": "false",
-          "aria-label": ve,
+          "aria-label": pe,
           children: [
-            /* @__PURE__ */ _("div", { className: a["date-range-picker__header"], children: [
-              /* @__PURE__ */ _(
+            /* @__PURE__ */ b("div", { className: r["date-range-picker__header"], children: [
+              /* @__PURE__ */ b(
                 "span",
                 {
-                  className: a["date-range-picker__month-label"],
+                  className: r["date-range-picker__month-label"],
                   "aria-live": "polite",
                   children: [
-                    ee[o],
+                    Ce[o],
                     " ",
                     i
                   ]
                 }
               ),
-              /* @__PURE__ */ _("div", { className: a["date-range-picker__header-actions"], children: [
+              /* @__PURE__ */ b("div", { className: r["date-range-picker__header-actions"], children: [
                 /* @__PURE__ */ s(
-                  He,
+                  ot,
                   {
                     emphasis: "quaternary",
                     size: "small",
-                    leadingIcon: /* @__PURE__ */ s(F, { size: "16", glyph: /* @__PURE__ */ s(pe, {}) }),
-                    onClick: Te,
-                    children: ke
+                    compact: !0,
+                    leadingIcon: /* @__PURE__ */ s(F, { size: "16", glyph: /* @__PURE__ */ s(Se, {}) }),
+                    onClick: Ue,
+                    children: Te
                   }
                 ),
-                /* @__PURE__ */ _("div", { className: a["date-range-picker__nav-buttons"], children: [
+                /* @__PURE__ */ b("div", { className: r["date-range-picker__nav-buttons"], children: [
                   /* @__PURE__ */ s(
-                    ue,
+                    Ne,
                     {
                       size: "medium",
                       padding: "compact",
                       icon: /* @__PURE__ */ s(
                         F,
                         {
-                          size: de.medium,
-                          glyph: /* @__PURE__ */ s(We, {})
+                          size: Ee.medium,
+                          glyph: /* @__PURE__ */ s(it, {})
                         }
                       ),
-                      onClick: Ce,
-                      "aria-label": De
+                      onClick: We,
+                      "aria-label": Be
                     }
                   ),
                   /* @__PURE__ */ s(
-                    ue,
+                    Ne,
                     {
                       size: "medium",
                       padding: "compact",
                       icon: /* @__PURE__ */ s(
                         F,
                         {
-                          size: de.medium,
-                          glyph: /* @__PURE__ */ s(Je, {})
+                          size: Ee.medium,
+                          glyph: /* @__PURE__ */ s(ct, {})
                         }
                       ),
-                      onClick: Re,
-                      "aria-label": _e
+                      onClick: Je,
+                      "aria-label": Oe
                     }
                   )
                 ] })
               ] })
             ] }),
-            /* @__PURE__ */ s("div", { className: a["date-range-picker__weekdays"], "aria-hidden": !0, children: ye.map((e, t) => /* @__PURE__ */ s("span", { className: a["date-range-picker__weekday"], children: e }, t)) }),
+            /* @__PURE__ */ s("div", { className: r["date-range-picker__weekdays"], "aria-hidden": !0, children: Re.map((e, t) => /* @__PURE__ */ s("span", { className: r["date-range-picker__weekday"], children: e }, t)) }),
             /* @__PURE__ */ s(
               "div",
               {
-                ref: L,
-                className: a["date-range-picker__grid"],
+                ref: U,
+                className: r["date-range-picker__grid"],
                 role: "grid",
-                "aria-label": `${ee[o]} ${i}`,
-                children: oe.map((e, t) => /* @__PURE__ */ s(
+                "aria-label": `${L[o]} ${i}`,
+                children: _e.map((e, t) => /* @__PURE__ */ s(
                   "div",
                   {
-                    className: a["date-range-picker__week"],
+                    className: r["date-range-picker__week"],
                     role: "row",
-                    children: e.map((n, d) => {
+                    children: e.map((n, u) => {
                       if (n == null)
                         return /* @__PURE__ */ s(
                           "span",
                           {
-                            className: a["date-range-picker__day-empty"],
+                            className: r["date-range-picker__day-empty"],
                             role: "gridcell"
                           },
-                          d
+                          u
                         );
-                      const f = Z(i, o, n), se = f === Y, ie = r === "range" && X(f, u), ce = r === "range" && !!g && X(f, g), U = r === "date" ? X(f, I) : ie || ce, je = r === "range" && nt(f, u, g), le = r === "range" && !!u && !!g && u !== g, Le = [
-                        a["date-range-picker__day-cell"],
-                        je ? a["date-range-picker__day-cell--in-range"] : "",
-                        le && ie ? a["date-range-picker__day-cell--range-start"] : "",
-                        le && ce ? a["date-range-picker__day-cell--range-end"] : ""
-                      ].filter(Boolean).join(" "), Ye = [
-                        a["date-range-picker__day"],
-                        U ? a["date-range-picker__day--selected"] : "",
-                        se && !U ? a["date-range-picker__day--today"] : ""
+                      const f = ie(i, o, n), De = f === G, be = a === "range" && le(f, d), we = a === "range" && !!g && le(f, g), ne = a === "date" ? le(f, I) : be || we, et = a === "range" && ht(f, d, g), Ie = a === "range" && !!d && !!g && d !== g, tt = [
+                        r["date-range-picker__day-cell"],
+                        et ? r["date-range-picker__day-cell--in-range"] : "",
+                        Ie && be ? r["date-range-picker__day-cell--range-start"] : "",
+                        Ie && we ? r["date-range-picker__day-cell--range-end"] : ""
+                      ].filter(Boolean).join(" "), rt = [
+                        r["date-range-picker__day"],
+                        ne ? r["date-range-picker__day--selected"] : "",
+                        De && !ne ? r["date-range-picker__day--today"] : ""
                       ].filter(Boolean).join(" ");
-                      return /* @__PURE__ */ s("div", { className: Le, role: "gridcell", children: /* @__PURE__ */ s(
+                      return /* @__PURE__ */ s("div", { className: tt, role: "gridcell", children: /* @__PURE__ */ s(
                         "button",
                         {
                           type: "button",
-                          className: Ye,
+                          className: rt,
                           "data-day": n,
-                          tabIndex: q === n ? 0 : -1,
-                          onClick: () => J(f, n),
+                          tabIndex: Q === n ? 0 : -1,
+                          onClick: () => re(f, n),
                           onFocus: () => w(n),
-                          onKeyDown: (Ke) => $e(Ke, n),
+                          onKeyDown: (at) => Ge(at, n),
                           "aria-label": f,
-                          "aria-pressed": U,
-                          "aria-current": se ? "date" : void 0,
+                          "aria-pressed": ne,
+                          "aria-current": De ? "date" : void 0,
                           children: n
                         }
-                      ) }, d);
+                      ) }, u);
                     })
                   },
                   t
@@ -436,6 +458,6 @@ function yt({
   ] });
 }
 export {
-  yt as default
+  $t as default
 };
 //# sourceMappingURL=DateRangePicker.js.map