@mattermost/compass-ui 0.1.0-alpha.4 → 0.1.0-alpha.5

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 Oe, useRef as U, useState as R, useCallback as m, useEffect as T } from "react";
+import { useId as Pe, useRef as U, useState as b, useCallback as m, useEffect as $ } from "react";
 import ze from "../button/Button.js";
 import le, { ICON_BUTTON_ICON_SIZES as ue } from "../icon-button/IconButton.js";
-import M from "../icon/Icon.js";
+import F from "../icon/Icon.js";
 import __de from "@mattermost/compass-icons/components/calendar-outline.js";const de=__de&&__de.default?__de.default:__de;
-import __Le from "@mattermost/compass-icons/components/chevron-down.js";const Le=__Le&&__Le.default?__Le.default:__Le;
-import __je from "@mattermost/compass-icons/components/chevron-left.js";const je=__je&&__je.default?__je.default:__je;
+import __je from "@mattermost/compass-icons/components/chevron-down.js";const je=__je&&__je.default?__je.default:__je;
+import __Le from "@mattermost/compass-icons/components/chevron-left.js";const Le=__Le&&__Le.default?__Le.default:__Le;
 import __Ye from "@mattermost/compass-icons/components/chevron-right.js";const Ye=__Ye&&__Ye.default?__Ye.default:__Ye;
 import { useAnchoredPopupPortal as Ke } from "../../hooks/use-anchored-popup-portal.js";
 import { useOutsideClose as qe } from "../../hooks/use-outside-close.js";
 import { usePopoverTransition as He } from "../../hooks/use-popover-transition.js";
-import r from "./DateRangePicker.module.scss.js";
-const Ve = 360, We = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"], fe = [
+import a from "./DateRangePicker.module.scss.js";
+const Ve = 360, We = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"], pe = [
   "January",
   "February",
   "March",
@@ -27,53 +27,53 @@ const Ve = 360, We = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"], fe = [
 ];
 function G(c) {
   if (!c) return "";
-  const [n, f, k] = c.split("-");
-  return `${f}/${k}/${n}`;
+  const [r, p, k] = c.split("-");
+  return `${p}/${k}/${r}`;
 }
-function Z(c, n, f) {
-  return `${c}-${String(n + 1).padStart(2, "0")}-${String(f).padStart(2, "0")}`;
+function Z(c, r, p) {
+  return `${c}-${String(r + 1).padStart(2, "0")}-${String(p).padStart(2, "0")}`;
 }
-function Q(c, n) {
-  return new Date(c, n + 1, 0).getDate();
+function Q(c, r) {
+  return new Date(c, r + 1, 0).getDate();
 }
-function Je(c, n) {
-  return new Date(c, n, 1).getDay();
+function Je(c, r) {
+  return new Date(c, r, 1).getDay();
 }
-function X(c, n) {
-  return c === n;
+function X(c, r) {
+  return c === r;
 }
-function Ue(c, n, f) {
-  if (!n || !f) return !1;
-  const [k, w] = n < f ? [n, f] : [f, n];
-  return c > k && c < w;
+function Ue(c, r, p) {
+  if (!r || !p) return !1;
+  const [k, N] = r < p ? [r, p] : [p, r];
+  return c > k && c < N;
 }
-function $(c, n, f) {
+function x(c, r, p) {
   if (!c) return null;
-  const [k, w, I] = c.split("-").map(Number);
-  return k === n && w === f + 1 ? I : null;
+  const [k, N, E] = c.split("-").map(Number);
+  return k === r && N === p + 1 ? E : null;
 }
 function lt({
   className: c = "",
-  mode: n = "date",
-  value: f,
+  mode: r = "date",
+  value: p,
   startDate: k,
-  endDate: w,
-  onChange: I,
-  onRangeChange: x,
+  endDate: N,
+  onChange: E,
+  onRangeChange: O,
   disabled: D,
-  id: pe,
+  id: fe,
   portalContainer: me = null,
   zIndex: ge
 }) {
-  const he = Oe(), ee = pe ?? he, te = `${ee}-popover`, O = U(null), z = U(null), L = U(null), N = /* @__PURE__ */ new Date(), j = Z(
-    N.getFullYear(),
-    N.getMonth(),
-    N.getDate()
-  ), [i, A] = R(N.getFullYear()), [o, C] = R(N.getMonth()), [l, Y] = R(!1), [K, P] = R(1), [ye, ve] = R(""), [ke, ne] = R(""), [De, ae] = R(""), E = f ?? ye, u = k ?? ke, g = w ?? De, _e = n === "date" ? !!E : !!u, { mounted: q, visible: H } = He(l), {
-    placement: Re,
-    style: Pe,
-    portalRef: F,
-    renderPortal: be
+  const he = Pe(), ee = fe ?? he, te = `${ee}-popover`, P = U(null), z = U(null), j = U(null), S = /* @__PURE__ */ new Date(), L = Z(
+    S.getFullYear(),
+    S.getMonth(),
+    S.getDate()
+  ), [i, B] = b(S.getFullYear()), [o, C] = b(S.getMonth()), [l, Y] = b(!1), [K, w] = b(1), [ye, ve] = b(""), [ke, re] = b(""), [De, ne] = b(""), M = p ?? ye, u = k ?? ke, g = N ?? De, _e = r === "date" ? !!M : !!u, { mounted: q, visible: H } = He(l), {
+    placement: be,
+    style: we,
+    portalRef: R,
+    renderPortal: Ie
   } = Ke(z, q, {
     preferredHeight: Ve,
     portalContainer: me,
@@ -83,95 +83,95 @@ function lt({
     var t;
     Y(!1), e && ((t = z.current) == null || t.focus());
   }, []);
-  qe(O, l, () => h(!0), F), T(() => {
+  qe(P, l, () => h(!0), R), $(() => {
     if (!l) return;
     function e(t) {
       t.key === "Escape" && (t.preventDefault(), h(!0));
     }
     return document.addEventListener("keydown", e), () => document.removeEventListener("keydown", e);
-  }, [l, h]), T(() => {
+  }, [l, h]), $(() => {
     if (!l) return;
     function e(t) {
-      var d, p;
-      const a = t.target;
-      a && ((d = O.current) != null && d.contains(a) || (p = F.current) != null && p.contains(a) || h(!1));
+      var d, f;
+      const n = t.target;
+      n && ((d = P.current) != null && d.contains(n) || (f = R.current) != null && f.contains(n) || h(!1));
     }
     return document.addEventListener("focusin", e), () => document.removeEventListener("focusin", e);
-  }, [l, h, F]);
-  const v = Q(i, o), we = m(() => {
-    if (n === "date") {
-      const t = $(E, i, o);
+  }, [l, h, R]);
+  const v = Q(i, o), Ne = m(() => {
+    if (r === "date") {
+      const t = x(M, i, o);
       if (t) return t;
     } else {
-      const t = $(g, i, o);
+      const t = x(g, i, o);
       if (t) return t;
-      const a = $(u, i, o);
-      if (a) return a;
+      const n = x(u, i, o);
+      if (n) return n;
     }
-    const e = $(j, i, o);
+    const e = x(L, i, o);
     return e || 1;
   }, [
-    n,
-    E,
+    r,
+    M,
     u,
     g,
     i,
     o,
-    j
+    L
   ]);
-  T(() => {
+  $(() => {
     if (!l || !H) return;
-    const e = we();
-    P(e);
+    const e = Ne();
+    w(e);
     const t = requestAnimationFrame(() => {
-      var a, d;
-      (d = (a = L.current) == null ? void 0 : a.querySelector(`[data-day="${e}"]`)) == null || d.focus();
+      var n, d;
+      (d = (n = j.current) == null ? void 0 : n.querySelector(`[data-day="${e}"]`)) == null || d.focus();
     });
     return () => cancelAnimationFrame(t);
   }, [l, H]);
   const y = m((e) => {
-    P(e), requestAnimationFrame(() => {
-      var t, a;
-      (a = (t = L.current) == null ? void 0 : t.querySelector(`[data-day="${e}"]`)) == null || a.focus();
+    w(e), requestAnimationFrame(() => {
+      var t, n;
+      (n = (t = j.current) == null ? void 0 : t.querySelector(`[data-day="${e}"]`)) == null || n.focus();
     });
   }, []), V = m(() => {
     D || Y((e) => !e);
-  }, [D]), Ie = m(() => {
-    C((e) => e === 0 ? (A((t) => t - 1), 11) : e - 1);
-  }, []), Ne = m(() => {
-    C((e) => e === 11 ? (A((t) => t + 1), 0) : e + 1);
-  }, []), b = m(
+  }, [D]), Ee = m(() => {
+    C((e) => e === 0 ? (B((t) => t - 1), 11) : e - 1);
+  }, []), Se = m(() => {
+    C((e) => e === 11 ? (B((t) => t + 1), 0) : e + 1);
+  }, []), I = m(
     (e, t) => {
-      const a = 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, p = Q(d, a);
-      A(d), C(a), y(Math.min(t, p));
+      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));
     },
     [o, i, y]
-  ), Ee = m(() => {
+  ), Me = m(() => {
     const e = /* @__PURE__ */ new Date();
-    A(e.getFullYear()), C(e.getMonth()), y(e.getDate());
+    B(e.getFullYear()), C(e.getMonth()), y(e.getDate());
   }, [y]), W = m(
     (e, t) => {
-      if (n === "date")
-        I ? I(e) : ve(e), h(!0);
+      if (r === "date")
+        E ? E(e) : ve(e), h(!0);
       else if (!u || u && g)
-        ne(e), ae(""), P(t);
+        re(e), ne(""), w(t);
       else {
-        const [a, d] = e >= u ? [u, e] : [e, u];
-        x ? x(a, d) : (ne(a), ae(d)), h(!0);
+        const [n, d] = e >= u ? [u, e] : [e, u];
+        O ? O(n, d) : (re(n), ne(d)), h(!0);
       }
     },
-    [n, u, g, I, x, h]
-  ), S = m(
+    [r, u, g, E, O, h]
+  ), A = m(
     (e) => {
       const t = K + e;
       if (t >= 1 && t <= v) {
         y(t);
         return;
       }
-      t < 1 ? b(-1, Q(
+      t < 1 ? I(-1, Q(
         o === 0 ? i - 1 : i,
         o === 0 ? 11 : o - 1
-      ) + t) : b(1, t - v);
+      ) + t) : I(1, t - v);
     },
     [
       K,
@@ -179,22 +179,22 @@ function lt({
       o,
       i,
       y,
-      b
+      I
     ]
-  ), Se = m(
+  ), Ae = m(
     (e, t) => {
       switch (e.key) {
         case "ArrowLeft":
-          e.preventDefault(), S(-1);
+          e.preventDefault(), A(-1);
           break;
         case "ArrowRight":
-          e.preventDefault(), S(1);
+          e.preventDefault(), A(1);
           break;
         case "ArrowUp":
-          e.preventDefault(), S(-7);
+          e.preventDefault(), A(-7);
           break;
         case "ArrowDown":
-          e.preventDefault(), S(7);
+          e.preventDefault(), A(7);
           break;
         case "Home":
           e.preventDefault(), y(1);
@@ -203,27 +203,27 @@ function lt({
           e.preventDefault(), y(v);
           break;
         case "PageUp":
-          e.preventDefault(), b(-1, t);
+          e.preventDefault(), I(-1, t);
           break;
         case "PageDown":
-          e.preventDefault(), b(1, t);
+          e.preventDefault(), I(1, t);
           break;
         case "Enter":
         case " ":
-          e.preventDefault(), P(t), W(Z(i, o, t), t);
+          e.preventDefault(), w(t), W(Z(i, o, t), t);
           break;
       }
     },
     [
-      S,
+      A,
       y,
       v,
-      b,
+      I,
       W,
       i,
       o
     ]
-  ), Me = m(
+  ), Fe = m(
     (e) => {
       if (!D)
         switch (e.key) {
@@ -241,28 +241,28 @@ function lt({
     },
     [D, V, l, h]
   );
-  T(() => {
-    l && P((e) => Math.min(Math.max(1, e), v));
+  $(() => {
+    l && w((e) => Math.min(Math.max(1, e), v));
   }, [l, v, o, i]);
-  const Ae = Je(i, o), B = [
-    ...Array(Ae).fill(null),
+  const Be = Je(i, o), T = [
+    ...Array(Be).fill(null),
     ...Array.from({ length: v }, (e, t) => t + 1)
   ];
-  for (; B.length % 7 !== 0; ) B.push(null);
-  const re = [];
-  for (let e = 0; e < B.length; e += 7) re.push(B.slice(e, e + 7));
-  const Ce = n === "date" ? G(E) : u ? `${G(u)}${g ? ` – ${G(g)}` : ""}` : "", Fe = [
-    r.dateRangePicker,
-    l ? r["dateRangePicker--open"] : "",
-    D ? r["dateRangePicker--disabled"] : "",
+  for (; T.length % 7 !== 0; ) T.push(null);
+  const ae = [];
+  for (let e = 0; e < T.length; e += 7) ae.push(T.slice(e, e + 7));
+  const Ce = r === "date" ? G(M) : u ? `${G(u)}${g ? ` – ${G(g)}` : ""}` : "", Re = [
+    a["date-range-picker"],
+    l ? a["date-range-picker--open"] : "",
+    D ? a["date-range-picker--disabled"] : "",
     c
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ _("div", { ref: O, className: Fe, children: [
+  return /* @__PURE__ */ _("div", { ref: P, className: Re, children: [
     /* @__PURE__ */ _(
       "div",
       {
         ref: z,
-        className: r.dateRangePicker__trigger,
+        className: a["date-range-picker__trigger"],
         role: "button",
         "aria-haspopup": "dialog",
         "aria-expanded": l,
@@ -272,61 +272,61 @@ function lt({
         id: ee,
         "data-has-value": _e ? "" : void 0,
         onClick: V,
-        onKeyDown: Me,
+        onKeyDown: Fe,
         children: [
-          /* @__PURE__ */ s("span", { className: r.dateRangePicker__calendarIcon, "aria-hidden": !0, children: /* @__PURE__ */ s(M, { size: "16", glyph: /* @__PURE__ */ s(de, {}) }) }),
-          /* @__PURE__ */ s("span", { className: r.dateRangePicker__value, children: Ce || "mm/dd/yyyy" }),
-          /* @__PURE__ */ s("span", { className: r.dateRangePicker__chevron, "aria-hidden": !0, children: /* @__PURE__ */ s(M, { size: "16", glyph: /* @__PURE__ */ s(Le, {}) }) })
+          /* @__PURE__ */ s("span", { className: a["date-range-picker__calendar-icon"], "aria-hidden": !0, children: /* @__PURE__ */ s(F, { size: "16", glyph: /* @__PURE__ */ s(de, {}) }) }),
+          /* @__PURE__ */ s("span", { className: a["date-range-picker__value"], children: Ce || "mm/dd/yyyy" }),
+          /* @__PURE__ */ s("span", { className: a["date-range-picker__chevron"], "aria-hidden": !0, children: /* @__PURE__ */ s(F, { size: "16", glyph: /* @__PURE__ */ s(je, {}) }) })
         ]
       }
     ),
-    q && be(
+    q && Ie(
       /* @__PURE__ */ _(
         "div",
         {
-          ref: F,
+          ref: R,
           id: te,
           className: [
-            r.dateRangePicker__popover,
-            Re === "above" ? r["dateRangePicker__popover--above"] : "",
-            H ? r["dateRangePicker__popover--visible"] : ""
+            a["date-range-picker__popover"],
+            be === "above" ? a["date-range-picker__popover--above"] : "",
+            H ? a["date-range-picker__popover--visible"] : ""
           ].filter(Boolean).join(" "),
-          style: Pe,
+          style: we,
           role: "dialog",
           "aria-modal": "false",
           "aria-label": "Date picker",
           children: [
-            /* @__PURE__ */ _("div", { className: r.dateRangePicker__header, children: [
-              /* @__PURE__ */ _("span", { className: r.dateRangePicker__monthLabel, "aria-live": "polite", children: [
-                fe[o],
+            /* @__PURE__ */ _("div", { className: a["date-range-picker__header"], children: [
+              /* @__PURE__ */ _("span", { className: a["date-range-picker__month-label"], "aria-live": "polite", children: [
+                pe[o],
                 " ",
                 i
               ] }),
-              /* @__PURE__ */ _("div", { className: r.dateRangePicker__headerActions, children: [
+              /* @__PURE__ */ _("div", { className: a["date-range-picker__header-actions"], children: [
                 /* @__PURE__ */ s(
                   ze,
                   {
                     emphasis: "quaternary",
                     size: "small",
-                    leadingIcon: /* @__PURE__ */ s(M, { size: "16", glyph: /* @__PURE__ */ s(de, {}) }),
-                    onClick: Ee,
+                    leadingIcon: /* @__PURE__ */ s(F, { size: "16", glyph: /* @__PURE__ */ s(de, {}) }),
+                    onClick: Me,
                     children: "Today"
                   }
                 ),
-                /* @__PURE__ */ _("div", { className: r.dateRangePicker__navButtons, children: [
+                /* @__PURE__ */ _("div", { className: a["date-range-picker__nav-buttons"], children: [
                   /* @__PURE__ */ s(
                     le,
                     {
                       size: "medium",
                       padding: "compact",
                       icon: /* @__PURE__ */ s(
-                        M,
+                        F,
                         {
                           size: ue.medium,
-                          glyph: /* @__PURE__ */ s(je, {})
+                          glyph: /* @__PURE__ */ s(Le, {})
                         }
                       ),
-                      onClick: Ie,
+                      onClick: Ee,
                       "aria-label": "Previous month"
                     }
                   ),
@@ -336,66 +336,66 @@ function lt({
                       size: "medium",
                       padding: "compact",
                       icon: /* @__PURE__ */ s(
-                        M,
+                        F,
                         {
                           size: ue.medium,
                           glyph: /* @__PURE__ */ s(Ye, {})
                         }
                       ),
-                      onClick: Ne,
+                      onClick: Se,
                       "aria-label": "Next month"
                     }
                   )
                 ] })
               ] })
             ] }),
-            /* @__PURE__ */ s("div", { className: r.dateRangePicker__weekdays, "aria-hidden": !0, children: We.map((e) => /* @__PURE__ */ s("span", { className: r.dateRangePicker__weekday, children: e }, e)) }),
+            /* @__PURE__ */ s("div", { className: a["date-range-picker__weekdays"], "aria-hidden": !0, children: We.map((e) => /* @__PURE__ */ s("span", { className: a["date-range-picker__weekday"], children: e }, e)) }),
             /* @__PURE__ */ s(
               "div",
               {
-                ref: L,
-                className: r.dateRangePicker__grid,
+                ref: j,
+                className: a["date-range-picker__grid"],
                 role: "grid",
-                "aria-label": `${fe[o]} ${i}`,
-                children: re.map((e, t) => /* @__PURE__ */ s(
+                "aria-label": `${pe[o]} ${i}`,
+                children: ae.map((e, t) => /* @__PURE__ */ s(
                   "div",
                   {
-                    className: r.dateRangePicker__week,
+                    className: a["date-range-picker__week"],
                     role: "row",
-                    children: e.map((a, d) => {
-                      if (a == null)
+                    children: e.map((n, d) => {
+                      if (n == null)
                         return /* @__PURE__ */ s(
                           "span",
                           {
-                            className: r.dateRangePicker__dayEmpty,
+                            className: a["date-range-picker__day-empty"],
                             role: "gridcell"
                           },
                           d
                         );
-                      const p = Z(i, o, a), oe = p === j, se = n === "range" && X(p, u), ie = n === "range" && !!g && X(p, g), J = n === "date" ? X(p, E) : se || ie, Be = n === "range" && Ue(p, u, g), ce = n === "range" && !!u && !!g && u !== g, Te = [
-                        r.dateRangePicker__dayCell,
-                        Be ? r["dateRangePicker__dayCell--in-range"] : "",
-                        ce && se ? r["dateRangePicker__dayCell--range-start"] : "",
-                        ce && ie ? r["dateRangePicker__dayCell--range-end"] : ""
-                      ].filter(Boolean).join(" "), $e = [
-                        r.dateRangePicker__day,
-                        J ? r["dateRangePicker__day--selected"] : "",
-                        oe && !J ? r["dateRangePicker__day--today"] : ""
+                      const f = Z(i, o, n), oe = f === L, se = r === "range" && X(f, u), ie = r === "range" && !!g && X(f, g), J = r === "date" ? X(f, M) : se || ie, Te = r === "range" && Ue(f, u, g), ce = r === "range" && !!u && !!g && u !== g, $e = [
+                        a["date-range-picker__day-cell"],
+                        Te ? a["date-range-picker__day-cell--in-range"] : "",
+                        ce && se ? a["date-range-picker__day-cell--range-start"] : "",
+                        ce && ie ? a["date-range-picker__day-cell--range-end"] : ""
+                      ].filter(Boolean).join(" "), xe = [
+                        a["date-range-picker__day"],
+                        J ? a["date-range-picker__day--selected"] : "",
+                        oe && !J ? a["date-range-picker__day--today"] : ""
                       ].filter(Boolean).join(" ");
-                      return /* @__PURE__ */ s("div", { className: Te, role: "gridcell", children: /* @__PURE__ */ s(
+                      return /* @__PURE__ */ s("div", { className: $e, role: "gridcell", children: /* @__PURE__ */ s(
                         "button",
                         {
                           type: "button",
-                          className: $e,
-                          "data-day": a,
-                          tabIndex: K === a ? 0 : -1,
-                          onClick: () => W(p, a),
-                          onFocus: () => P(a),
-                          onKeyDown: (xe) => Se(xe, a),
-                          "aria-label": p,
+                          className: xe,
+                          "data-day": n,
+                          tabIndex: K === n ? 0 : -1,
+                          onClick: () => W(f, n),
+                          onFocus: () => w(n),
+                          onKeyDown: (Oe) => Ae(Oe, n),
+                          "aria-label": f,
                           "aria-pressed": J,
                           "aria-current": oe ? "date" : void 0,
-                          children: a
+                          children: n
                         }
                       ) }, d);
                     })