@epilot/volt-ui-experimental-griffel 0.1.0-experiment.1

package/dist/components/date-time-picker/calendar.js

@@ -0,0 +1,632 @@
+import { jsxs as p, jsx as n, Fragment as ce } from "react/jsx-runtime";
+import * as d from "react";
+import { createElement as H } from "react";
+import { shorthands as s } from "../../node_modules/@griffel/core/src/index.js";
+import { Button as ee } from "../button/button.js";
+import { SLOT_ATTR as l } from "../../renderer/contract.js";
+import { makeVoltStyles as Pe } from "../../styles/make-styles.js";
+import { spacingElement2 as Y, textSm as V, grayA12 as j, accentA3 as ze, accent3 as $e, semAccentSolidHover as Z, fontWeightSemibold as L, semAccentContrast as _, semAccentSolid as U, radiusMd as R, grayA8 as Ve, accentA11 as he, grayA4 as ge, grayA11 as me, fontWeightMedium as ue, textXs as ye, spacingElement1 as fe, grayA3 as Ze } from "../../tokens/index.js";
+import { getWeekDays as _e, getCalendarDays as Ue, getMonthNames as Xe, goToPreviousMonth as qe, goToNextMonth as Je, adjustTimeIfPast as pe, isDateDisabled as be, formatMonth as Ke, getDecadeStart as Qe, getWeekLabel as et, isDayInCurrentMonth as ke, getWeekNumber as Be, isDaySelected as tt, isDayToday as at, isDateInRange as nt, normalizeRange as rt } from "./date-time-picker-utils.js";
+import { mergeClasses as g } from "../../node_modules/@griffel/core/src/mergeClasses.js";
+import { isSameDay as te } from "../../node_modules/date-fns/isSameDay.js";
+const ot = (F) => /* @__PURE__ */ n(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    height: "16px",
+    viewBox: "0 -960 960 960",
+    width: "16px",
+    fill: "currentColor",
+    ...F,
+    children: /* @__PURE__ */ n("path", { d: "M560-240 320-480l240-240 56 56-184 184 184 184-56 56Z" })
+  }
+), dt = (F) => /* @__PURE__ */ n(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    height: "16px",
+    viewBox: "0 -960 960 960",
+    width: "16px",
+    fill: "currentColor",
+    ...F,
+    children: /* @__PURE__ */ n("path", { d: "M504-480 320-664l56-56 240 240-240 240-56-56 184-184Z" })
+  }
+), st = Pe({
+  root: {
+    width: "100%"
+  },
+  header: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    marginBottom: Y
+  },
+  buttonSpacer: {
+    width: "1.75rem",
+    height: "1.75rem"
+  },
+  headerCenter: {
+    display: "flex",
+    alignItems: "center",
+    ...s.gap(fe)
+  },
+  headerBtn: {
+    fontWeight: L,
+    fontSize: V,
+    color: j,
+    backgroundColor: Ze,
+    ":hover": {
+      backgroundColor: ge
+    },
+    transitionProperty: "background-color, color",
+    transitionDuration: "150ms",
+    cursor: "pointer",
+    ...s.padding("0.25rem", Y),
+    ...s.borderRadius(R),
+    ...s.border("0"),
+    outlineStyle: "none"
+  },
+  monthHeaderBtn: {
+    textTransform: "capitalize"
+  },
+  decadeLabel: {
+    fontWeight: L,
+    fontSize: V,
+    color: j,
+    ...s.padding("0.25rem", Y)
+  },
+  grid: {
+    display: "grid",
+    justifyItems: "center",
+    ...s.gap("0.125rem"),
+    gridTemplateColumns: "repeat(7, minmax(0, 1fr))"
+  },
+  gridWithWeeks: {
+    gridTemplateColumns: "auto repeat(7, minmax(0, 1fr))"
+  },
+  gridRange: {
+    rowGap: fe,
+    columnGap: "0"
+  },
+  weekLabel: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    fontSize: ye,
+    fontWeight: ue,
+    color: me,
+    height: "1.75rem",
+    width: "2rem"
+  },
+  weekNumber: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    fontSize: ye,
+    fontWeight: ue,
+    color: me,
+    height: "2rem",
+    width: "2rem"
+  },
+  cellPlaceholder: {
+    height: "2rem",
+    width: "2rem"
+  },
+  dayBtn: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    fontSize: V,
+    transitionProperty: "background-color, color",
+    transitionDuration: "150ms",
+    cursor: "pointer",
+    height: "2rem",
+    width: "2rem",
+    ...s.border("0"),
+    outlineStyle: "none"
+  },
+  dayBtnSingle: {
+    ...s.borderRadius(R)
+  },
+  dayBtnTransparent: {
+    backgroundColor: "transparent"
+  },
+  dayBtnHover: {
+    ":hover": {
+      backgroundColor: ge
+    }
+  },
+  dayBtnToday: {
+    color: he,
+    textDecorationLine: "underline",
+    textUnderlineOffset: "4px",
+    textDecorationThickness: "1.5px",
+    textDecorationColor: he
+  },
+  dayBtnSelected: {
+    fontWeight: L,
+    backgroundColor: U,
+    color: _,
+    ":hover": {
+      backgroundColor: Z
+    }
+  },
+  dayBtnOutOfMonth: {
+    color: Ve
+  },
+  dayBtnInMonth: {
+    color: j
+  },
+  dayBtnDisabled: {
+    opacity: 0.5,
+    cursor: "not-allowed"
+  },
+  // Range styles
+  dayBtnRangeSingleDay: {
+    ...s.borderRadius(R),
+    backgroundColor: U,
+    color: _,
+    fontWeight: L,
+    ":hover": {
+      backgroundColor: Z
+    }
+  },
+  dayBtnRangeStart: {
+    borderTopLeftRadius: R,
+    borderBottomLeftRadius: R,
+    borderTopRightRadius: 0,
+    borderBottomRightRadius: 0,
+    backgroundColor: U,
+    color: _,
+    fontWeight: L,
+    ":hover": {
+      backgroundColor: Z
+    }
+  },
+  dayBtnRangeEnd: {
+    borderTopRightRadius: R,
+    borderBottomRightRadius: R,
+    borderTopLeftRadius: 0,
+    borderBottomLeftRadius: 0,
+    backgroundColor: U,
+    color: _,
+    fontWeight: L,
+    ":hover": {
+      backgroundColor: Z
+    }
+  },
+  dayBtnRangeMiddle: {
+    ...s.borderRadius(0),
+    backgroundColor: $e,
+    color: j
+  },
+  dayBtnRangeMiddlePreview: {
+    ...s.borderRadius(0),
+    backgroundColor: ze,
+    color: j
+  },
+  todayContainer: {
+    display: "flex",
+    justifyContent: "center",
+    paddingTop: Y
+  },
+  monthsYearsGrid: {
+    display: "grid",
+    ...s.gap(Y),
+    ...s.padding(Y, 0)
+  },
+  monthsGridCols: {
+    gridTemplateColumns: "repeat(3, 1fr)"
+  },
+  yearsGridCols: {
+    gridTemplateColumns: "repeat(2, 1fr)"
+  },
+  monthYearBtn: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    fontSize: V,
+    ...s.borderRadius(R),
+    transitionProperty: "background-color, color",
+    transitionDuration: "150ms",
+    cursor: "pointer",
+    height: "2.25rem",
+    ...s.border("0"),
+    outlineStyle: "none"
+  },
+  monthBtnCapitalize: {
+    textTransform: "capitalize"
+  }
+}), bt = d.forwardRef(
+  function({
+    value: o,
+    onChange: I,
+    onDateSelect: b,
+    disablePast: k = !1,
+    locale: N = "de",
+    previousMonthLabel: Ce = "Previous month",
+    nextMonthLabel: we = "Next month",
+    showTodayButton: Re = !1,
+    todayLabel: Me = "Today",
+    currentTimeInTimezone: m,
+    showWeekNumbers: X = !1,
+    rangeStart: D,
+    rangeEnd: ae,
+    hoveredDate: ne,
+    onDayHover: G,
+    onDayClick: q,
+    showPreviousButton: Se = !0,
+    showNextButton: ve = !0,
+    controlledViewDate: Ne,
+    onViewDateChange: O,
+    hideOutOfMonthDays: re = !1,
+    className: De
+  }, xe) {
+    const e = st(), [Ye, Le] = d.useState(
+      () => o || m || /* @__PURE__ */ new Date()
+    ), [i, E] = d.useState("days"), x = D !== void 0, M = Ne || Ye, h = d.useCallback(
+      (t) => {
+        O ? O(typeof t == "function" ? t(M) : t) : Le(t);
+      },
+      [O, M]
+    ), Te = _e(N), oe = Ue(M, N), We = d.useMemo(() => Xe(N), [N]), T = d.useMemo(
+      () => m || /* @__PURE__ */ new Date(),
+      [m]
+    ), W = T.getFullYear(), de = T.getMonth(), S = M.getFullYear(), J = Qe(S), Ae = d.useCallback(() => {
+      h((t) => i === "days" ? qe(t) : i === "months" ? new Date(t.getFullYear() - 1, t.getMonth(), 1) : new Date(t.getFullYear() - 10, t.getMonth(), 1));
+    }, [i, h]), He = d.useCallback(() => {
+      h((t) => i === "days" ? Je(t) : i === "months" ? new Date(t.getFullYear() + 1, t.getMonth(), 1) : new Date(t.getFullYear() + 10, t.getMonth(), 1));
+    }, [i, h]), je = d.useCallback(() => {
+      const t = new Date(T);
+      o ? t.setHours(o.getHours(), o.getMinutes(), 0, 0) : t.setHours(0, 0, 0, 0);
+      const a = pe(
+        t,
+        k,
+        m
+      );
+      h(T), I(a), b == null || b();
+    }, [
+      I,
+      b,
+      o,
+      k,
+      m,
+      T,
+      h
+    ]), Fe = d.useCallback(
+      (t) => {
+        if (be(t, k, m)) return;
+        if (q) {
+          q(t);
+          return;
+        }
+        const a = new Date(t);
+        o ? a.setHours(o.getHours(), o.getMinutes(), 0, 0) : a.setHours(0, 0, 0, 0);
+        const r = pe(
+          a,
+          k,
+          m
+        );
+        I(r), b == null || b();
+      },
+      [
+        I,
+        b,
+        q,
+        o,
+        k,
+        m
+      ]
+    ), Ie = d.useCallback(
+      (t) => {
+        h((a) => new Date(a.getFullYear(), t, 1)), E("days");
+      },
+      [h]
+    ), Ge = d.useCallback(
+      (t) => {
+        h((a) => new Date(t, a.getMonth(), 1)), E("months");
+      },
+      [h]
+    ), Oe = d.useCallback(() => {
+      E("months");
+    }, []), se = d.useCallback(() => {
+      E("years");
+    }, []);
+    return /* @__PURE__ */ p(
+      "div",
+      {
+        ref: xe,
+        className: g(e.root, De),
+        "data-slot": "calendar",
+        [l]: "calendar",
+        onMouseLeave: G ? () => G(null) : void 0,
+        children: [
+          /* @__PURE__ */ p("div", { className: e.header, children: [
+            Se ? /* @__PURE__ */ n(
+              ee,
+              {
+                "aria-label": Ce,
+                onClick: Ae,
+                size: "icon",
+                variant: "tertiary",
+                children: /* @__PURE__ */ n(ot, {})
+              }
+            ) : /* @__PURE__ */ n("div", { className: e.buttonSpacer }),
+            /* @__PURE__ */ p("div", { className: e.headerCenter, children: [
+              i === "days" && /* @__PURE__ */ p(ce, { children: [
+                /* @__PURE__ */ n(
+                  "button",
+                  {
+                    className: g(
+                      e.headerBtn,
+                      e.monthHeaderBtn
+                    ),
+                    onClick: Oe,
+                    type: "button",
+                    children: Ke(M, N)
+                  }
+                ),
+                /* @__PURE__ */ n(
+                  "button",
+                  {
+                    className: e.headerBtn,
+                    onClick: se,
+                    type: "button",
+                    children: S
+                  }
+                )
+              ] }),
+              i === "months" && /* @__PURE__ */ n(
+                "button",
+                {
+                  className: e.headerBtn,
+                  onClick: se,
+                  type: "button",
+                  children: S
+                }
+              ),
+              i === "years" && /* @__PURE__ */ n("span", { className: e.decadeLabel, children: `${J} – ${J + 9}` })
+            ] }),
+            ve ? /* @__PURE__ */ n(
+              ee,
+              {
+                "aria-label": we,
+                onClick: He,
+                size: "icon",
+                variant: "tertiary",
+                children: /* @__PURE__ */ n(dt, {})
+              }
+            ) : /* @__PURE__ */ n("div", { className: e.buttonSpacer })
+          ] }),
+          /* @__PURE__ */ p("div", { children: [
+            i === "days" && /* @__PURE__ */ p(ce, { children: [
+              /* @__PURE__ */ p(
+                "div",
+                {
+                  className: g(
+                    e.grid,
+                    x && e.gridRange,
+                    X && e.gridWithWeeks
+                  ),
+                  "data-slot": "calendar-grid",
+                  [l]: "calendar-grid",
+                  children: [
+                    X && /* @__PURE__ */ n(
+                      "div",
+                      {
+                        className: e.weekLabel,
+                        "data-slot": "calendar-week-label",
+                        [l]: "calendar-week-label",
+                        children: et(N)
+                      }
+                    ),
+                    Te.map((t) => /* @__PURE__ */ H(
+                      "div",
+                      {
+                        className: e.weekLabel,
+                        "data-slot": "calendar-weekday",
+                        [l]: "calendar-weekday",
+                        key: t
+                      },
+                      t
+                    )),
+                    oe.map((t, a) => {
+                      const r = X && a % 7 === 0, c = re && r && oe.slice(a, a + 7).every(($) => !ke($, M)), u = r && !c ? /* @__PURE__ */ H(
+                        "div",
+                        {
+                          className: e.weekNumber,
+                          "data-slot": "calendar-week-number",
+                          [l]: "calendar-week-number",
+                          "data-week": Be(t),
+                          key: `wk-${a}`
+                        },
+                        Be(t)
+                      ) : r ? /* @__PURE__ */ H(
+                        "div",
+                        {
+                          "aria-hidden": "true",
+                          className: e.cellPlaceholder,
+                          "data-slot": "calendar-week-number-placeholder",
+                          [l]: "calendar-week-number-placeholder",
+                          key: `wk-${a}`
+                        }
+                      ) : null, y = ke(t, M);
+                      if (re && !y)
+                        return /* @__PURE__ */ p(d.Fragment, { children: [
+                          u,
+                          /* @__PURE__ */ n(
+                            "div",
+                            {
+                              "aria-hidden": "true",
+                              className: e.cellPlaceholder,
+                              "data-slot": "calendar-day-placeholder",
+                              [l]: "calendar-day-placeholder"
+                            }
+                          )
+                        ] }, a);
+                      const B = be(
+                        t,
+                        k,
+                        m
+                      ), C = !x && o !== null && tt(t, o), P = at(t), K = ae || ne || null, le = x && D && K, Ee = le ? nt(t, D, K) : !1;
+                      let w = !1, A = !1, z = !1;
+                      if (le) {
+                        const $ = rt(
+                          D,
+                          K
+                        );
+                        w = te(t, $.start), A = te(t, $.end), z = w && A;
+                      } else x && D && (w = te(t, D), z = w);
+                      const f = w || A, v = Ee && !w && !A, ie = x && !ae && !!ne;
+                      let Q = null;
+                      return x ? Q = g(
+                        z && f && e.dayBtnRangeSingleDay,
+                        w && !z && e.dayBtnRangeStart,
+                        A && !w && e.dayBtnRangeEnd,
+                        v && !ie && e.dayBtnRangeMiddle,
+                        v && ie && e.dayBtnRangeMiddlePreview,
+                        !f && !v && e.dayBtnSingle,
+                        !f && !v && e.dayBtnTransparent,
+                        !f && !v && e.dayBtnHover,
+                        P && !f && !v && e.dayBtnToday,
+                        B && e.dayBtnDisabled,
+                        !y && !B && !f && e.dayBtnOutOfMonth,
+                        y && !f && !B && e.dayBtnInMonth
+                      ) : Q = g(
+                        e.dayBtnSingle,
+                        !C && !P && e.dayBtnTransparent,
+                        !C && e.dayBtnHover,
+                        P && !C && e.dayBtnToday,
+                        B && e.dayBtnDisabled,
+                        !y && !B && !C && e.dayBtnOutOfMonth,
+                        C && e.dayBtnSelected,
+                        y && !C && !B && e.dayBtnInMonth
+                      ), /* @__PURE__ */ p(d.Fragment, { children: [
+                        u,
+                        /* @__PURE__ */ n(
+                          "button",
+                          {
+                            "aria-disabled": B,
+                            "aria-pressed": C || f,
+                            className: g(
+                              e.dayBtn,
+                              Q
+                            ),
+                            "data-in-range": v || void 0,
+                            "data-selected": C || f,
+                            "data-slot": "calendar-day",
+                            [l]: "calendar-day",
+                            "data-today": P,
+                            disabled: B,
+                            onClick: () => Fe(t),
+                            onMouseEnter: G ? () => G(t) : void 0,
+                            type: "button",
+                            children: t.getDate()
+                          }
+                        )
+                      ] }, a);
+                    })
+                  ]
+                }
+              ),
+              Re && /* @__PURE__ */ n(
+                "div",
+                {
+                  className: e.todayContainer,
+                  "data-slot": "calendar-today",
+                  [l]: "calendar-today",
+                  children: /* @__PURE__ */ n(
+                    ee,
+                    {
+                      onClick: je,
+                      size: "xs",
+                      variant: "tertiary",
+                      children: Me
+                    }
+                  )
+                }
+              )
+            ] }),
+            i === "months" && /* @__PURE__ */ n(
+              "div",
+              {
+                className: g(
+                  e.monthsYearsGrid,
+                  e.monthsGridCols
+                ),
+                "data-slot": "calendar-months",
+                [l]: "calendar-months",
+                children: We.map((t, a) => {
+                  const r = o !== null && S === o.getFullYear() && a === o.getMonth(), c = S === W && a === de, u = k && (S < W || S === W && a < de);
+                  return /* @__PURE__ */ H(
+                    "button",
+                    {
+                      className: g(
+                        e.monthYearBtn,
+                        e.monthBtnCapitalize,
+                        !r && !c && e.dayBtnTransparent,
+                        !r && e.dayBtnHover,
+                        c && !r && e.dayBtnToday,
+                        u && e.dayBtnDisabled,
+                        r && e.dayBtnSelected,
+                        !r && !u && e.dayBtnInMonth
+                      ),
+                      "data-selected": r,
+                      "data-slot": "calendar-month",
+                      [l]: "calendar-month",
+                      disabled: u,
+                      key: a,
+                      onClick: () => Ie(a),
+                      type: "button"
+                    },
+                    t
+                  );
+                })
+              }
+            ),
+            i === "years" && /* @__PURE__ */ n(
+              "div",
+              {
+                className: g(
+                  e.monthsYearsGrid,
+                  e.yearsGridCols
+                ),
+                "data-slot": "calendar-years",
+                [l]: "calendar-years",
+                children: Array.from({ length: 10 }, (t, a) => {
+                  const r = J + a, c = o !== null && r === o.getFullYear(), u = r === W, y = k && r < W;
+                  return /* @__PURE__ */ H(
+                    "button",
+                    {
+                      className: g(
+                        e.monthYearBtn,
+                        !c && !u && e.dayBtnTransparent,
+                        !c && e.dayBtnHover,
+                        u && !c && e.dayBtnToday,
+                        y && e.dayBtnDisabled,
+                        c && e.dayBtnSelected,
+                        !c && !y && e.dayBtnInMonth
+                      ),
+                      "data-selected": c,
+                      "data-slot": "calendar-year",
+                      [l]: "calendar-year",
+                      disabled: y,
+                      key: r,
+                      onClick: () => Ge(r),
+                      type: "button"
+                    },
+                    r
+                  );
+                })
+              }
+            )
+          ] })
+        ]
+      }
+    );
+  }
+);
+export {
+  bt as Calendar
+};
+//# sourceMappingURL=calendar.js.map