@flytedan/flytebot-design-system 0.46.0 → 0.47.0

package/dist/index.js

@@ -3066,6 +3066,21 @@ var fmt = (s) => {
   const d = parse(s);
   return d ? MONTHS[d.getMonth()].slice(0, 3) + " " + d.getDate() + ", " + d.getFullYear() : "";
 };
+var fullDateLabel = (d) => new Intl.DateTimeFormat(void 0, { dateStyle: "full" }).format(d);
+var monthYearLabel = (d) => new Intl.DateTimeFormat(void 0, { month: "long", year: "numeric" }).format(d);
+var weekdayLong = (i) => new Intl.DateTimeFormat(void 0, { weekday: "long" }).format(new Date(2023, 0, 1 + i));
+var daysInMonth = (y, m) => new Date(y, m + 1, 0).getDate();
+var addMonths = (d, n) => {
+  const total = d.getFullYear() * 12 + d.getMonth() + n;
+  const y = Math.floor(total / 12), m = (total % 12 + 12) % 12;
+  return new Date(y, m, Math.min(d.getDate(), daysInMonth(y, m)));
+};
+var addYears = (d, n) => {
+  const y = d.getFullYear() + n;
+  return new Date(y, d.getMonth(), Math.min(d.getDate(), daysInMonth(y, d.getMonth())));
+};
+var addDays = (d, n) => new Date(d.getFullYear(), d.getMonth(), d.getDate() + n);
+var sameMonth = (d, y, m) => d.getFullYear() === y && d.getMonth() === m;
 function Calendar({ value, range = false, onPick, initialMonth, months = 1 }) {
   const today = /* @__PURE__ */ new Date();
   const sel = range ? value || {} : { start: value, end: value };
@@ -3080,8 +3095,38 @@ function Calendar({ value, range = false, onPick, initialMonth, months = 1 }) {
     const lo = s, hi = e || hoverEnd;
     return lo && hi && d > (lo < hi ? lo : hi) && d < (lo < hi ? hi : lo);
   };
-  const isEdge = (d) => s && iso(d) === iso(s) || e && iso(d) === iso(e);
+  const isStart = (d) => !!s && iso(d) === iso(s);
+  const isEnd = (d) => !!e && iso(d) === iso(e);
+  const isEdge = (d) => isStart(d) || isEnd(d);
+  const nextY = vm === 11 ? vy + 1 : vy, nextM = (vm + 1) % 12;
+  const [activeDate, setActiveDate] = React23.useState(() => {
+    if (s) return s;
+    if (sameMonth(today, anchor.getFullYear(), anchor.getMonth())) return today;
+    return new Date(anchor.getFullYear(), anchor.getMonth(), 1);
+  });
+  const calRef = React23.useRef(null);
+  const pageToShow = (y, m) => {
+    const idx = y * 12 + m, firstIdx = vy * 12 + vm, secondIdx = firstIdx + 1;
+    if (idx === firstIdx || months > 1 && idx === secondIdx) return;
+    if (idx < firstIdx || months === 1) {
+      setVy(y);
+      setVm(m);
+      return;
+    }
+    const baseIdx = idx - 1;
+    setVy(Math.floor(baseIdx / 12));
+    setVm((baseIdx % 12 + 12) % 12);
+  };
+  const moveActive = (next) => {
+    setActiveDate(next);
+    pageToShow(next.getFullYear(), next.getMonth());
+  };
+  React23.useEffect(() => {
+    const el = calRef.current?.querySelector('[data-iso="' + iso(activeDate) + '"]');
+    if (el) el.focus({ preventScroll: true });
+  }, [activeDate, vy, vm]);
   const clickDay = (d) => {
+    setActiveDate(d);
     const v = iso(d);
     if (!range) {
       onPick(v);
@@ -3106,36 +3151,115 @@ function Calendar({ value, range = false, onPick, initialMonth, months = 1 }) {
     setVm(m);
     setVy(y);
   };
+  const onGridKeyDown = (ev) => {
+    const d = activeDate;
+    switch (ev.key) {
+      case "ArrowLeft":
+        ev.preventDefault();
+        moveActive(addDays(d, -1));
+        return;
+      case "ArrowRight":
+        ev.preventDefault();
+        moveActive(addDays(d, 1));
+        return;
+      case "ArrowUp":
+        ev.preventDefault();
+        moveActive(addDays(d, -7));
+        return;
+      case "ArrowDown":
+        ev.preventDefault();
+        moveActive(addDays(d, 7));
+        return;
+      case "Home":
+        ev.preventDefault();
+        moveActive(addDays(d, -d.getDay()));
+        return;
+      case "End":
+        ev.preventDefault();
+        moveActive(addDays(d, 6 - d.getDay()));
+        return;
+      case "PageUp":
+        ev.preventDefault();
+        moveActive(ev.shiftKey ? addYears(d, -1) : addMonths(d, -1));
+        return;
+      case "PageDown":
+        ev.preventDefault();
+        moveActive(ev.shiftKey ? addYears(d, 1) : addMonths(d, 1));
+        return;
+      case "Enter":
+      case " ":
+        ev.preventDefault();
+        clickDay(d);
+        return;
+      default:
+        return;
+    }
+  };
+  const monthHeading = mode2 === "days" ? MONTHS[vm] + " " + vy : mode2 === "months" ? String(vy) : vy - 5 + " \u2013 " + (vy + 6);
+  const prevLabel = mode2 === "days" ? "Previous month, " + monthYearLabel(new Date(vy, vm - 1, 1)) : mode2 === "months" ? "Previous year, " + (vy - 1) : "Previous years, " + (vy - 17) + " \u2013 " + (vy - 6);
+  const nextLabel = mode2 === "days" ? "Next month, " + monthYearLabel(new Date(vy, vm + 1, 1)) : mode2 === "months" ? "Next year, " + (vy + 1) : "Next years, " + (vy + 7) + " \u2013 " + (vy + 18);
   const monthGrid = (y, m) => {
     const startPad = new Date(y, m, 1).getDay();
+    const last = daysInMonth(y, m);
     const cells = [];
-    for (let i = 0; i < 42; i++) cells.push(new Date(y, m, i - startPad + 1));
-    return /* @__PURE__ */ jsxs37("div", { className: "fd-cal-grid", style: { width: months > 1 ? 252 : "auto", flex: "none" }, onMouseLeave: () => setHover(null), children: [
-      DOW.map((d) => /* @__PURE__ */ jsx44("span", { className: "fd-cal-dow", children: d }, d)),
-      cells.map((d, i) => /* @__PURE__ */ jsx44(
-        "button",
-        {
-          type: "button",
-          className: ["fd-cal-day", d.getMonth() !== m ? "is-out" : "", iso(d) === iso(today) ? "is-today" : "", inRange(d) ? "in-range" : "", isEdge(d) ? "is-edge" : ""].filter(Boolean).join(" "),
-          onClick: () => clickDay(d),
-          onMouseEnter: () => range && setHover(iso(d)),
-          children: d.getDate()
-        },
-        i
-      ))
-    ] });
+    for (let i = 0; i < 42; i++) {
+      const dom = i - startPad + 1;
+      cells.push(dom >= 1 && dom <= last ? new Date(y, m, dom) : null);
+    }
+    return /* @__PURE__ */ jsxs37(
+      "div",
+      {
+        className: "fd-cal-grid",
+        role: "grid",
+        "aria-label": monthYearLabel(new Date(y, m, 1)),
+        style: { width: months > 1 ? 252 : "auto", flex: "none" },
+        onMouseLeave: () => setHover(null),
+        children: [
+          /* @__PURE__ */ jsx44("div", { className: "fd-cal-row", role: "row", children: DOW.map((d, i) => /* @__PURE__ */ jsx44("span", { className: "fd-cal-dow", role: "columnheader", "aria-label": weekdayLong(i), children: d }, d)) }),
+          Array.from({ length: 6 }, (_, row) => /* @__PURE__ */ jsx44("div", { className: "fd-cal-row", role: "row", children: cells.slice(row * 7, row * 7 + 7).map((d, col) => {
+            if (!d) return /* @__PURE__ */ jsx44("div", { className: "fd-cal-day is-empty", role: "presentation", "aria-hidden": "true" }, col);
+            const today_ = iso(d) === iso(today);
+            const start = isStart(d), end = isEnd(d), selected = isEdge(d);
+            const bits = [];
+            if (range && start) bits.push("start date");
+            if (range && end) bits.push("end date");
+            if (selected && !range) bits.push("selected");
+            if (today_) bits.push("today");
+            const name = bits.length ? fullDateLabel(d) + ", " + bits.join(", ") : fullDateLabel(d);
+            return /* @__PURE__ */ jsx44(
+              "div",
+              {
+                "data-iso": iso(d),
+                role: "gridcell",
+                tabIndex: iso(d) === iso(activeDate) ? 0 : -1,
+                "aria-label": name,
+                "aria-selected": selected,
+                "aria-current": today_ ? "date" : void 0,
+                className: ["fd-cal-day", today_ ? "is-today" : "", inRange(d) ? "in-range" : "", selected ? "is-edge" : ""].filter(Boolean).join(" "),
+                onClick: () => clickDay(d),
+                onMouseEnter: () => range && setHover(iso(d)),
+                onKeyDown: onGridKeyDown,
+                onFocus: () => setActiveDate(d),
+                children: d.getDate()
+              },
+              col
+            );
+          }) }, row))
+        ]
+      }
+    );
   };
-  const nextY = vm === 11 ? vy + 1 : vy, nextM = (vm + 1) % 12;
-  return /* @__PURE__ */ jsxs37("div", { className: "fd-cal", style: { width: months > 1 && mode2 === "days" ? "auto" : void 0 }, children: [
+  return /* @__PURE__ */ jsxs37("div", { className: "fd-cal", style: { width: months > 1 && mode2 === "days" ? "auto" : void 0 }, ref: calRef, children: [
     /* @__PURE__ */ jsxs37("div", { className: "fd-cal-head", children: [
-      /* @__PURE__ */ jsx44("button", { type: "button", className: "fd-btn-icon", "aria-label": "Previous", onClick: () => mode2 === "years" ? setVy(vy - 12) : mode2 === "months" ? setVy(vy - 1) : nav(-1), children: /* @__PURE__ */ jsx44("i", { className: "ph ph-caret-left" }) }),
+      /* @__PURE__ */ jsx44("button", { type: "button", className: "fd-btn-icon", "aria-label": prevLabel, onClick: () => mode2 === "years" ? setVy(vy - 12) : mode2 === "months" ? setVy(vy - 1) : nav(-1), children: /* @__PURE__ */ jsx44("i", { className: "ph ph-caret-left" }) }),
       /* @__PURE__ */ jsxs37("button", { type: "button", className: "fd-cal-title", onClick: () => setMode(mode2 === "days" ? "months" : mode2 === "months" ? "years" : "days"), children: [
-        mode2 === "days" ? MONTHS[vm] + " " + vy : mode2 === "months" ? vy : vy - 5 + " \u2013 " + (vy + 6),
+        monthHeading,
         /* @__PURE__ */ jsx44("i", { className: "ph ph-caret-down", style: { fontSize: 10, marginLeft: 6, color: "var(--text-muted)" } })
       ] }),
       months > 1 && mode2 === "days" ? /* @__PURE__ */ jsx44("span", { className: "fd-cal-title", style: { cursor: "default", background: "none" }, children: MONTHS[nextM] + " " + nextY }) : null,
-      /* @__PURE__ */ jsx44("button", { type: "button", className: "fd-btn-icon", "aria-label": "Next", onClick: () => mode2 === "years" ? setVy(vy + 12) : mode2 === "months" ? setVy(vy + 1) : nav(1), children: /* @__PURE__ */ jsx44("i", { className: "ph ph-caret-right" }) })
+      /* @__PURE__ */ jsx44("button", { type: "button", className: "fd-btn-icon", "aria-label": nextLabel, onClick: () => mode2 === "years" ? setVy(vy + 12) : mode2 === "months" ? setVy(vy + 1) : nav(1), children: /* @__PURE__ */ jsx44("i", { className: "ph ph-caret-right" }) })
     ] }),
+    /* @__PURE__ */ jsx44("span", { "aria-live": "polite", className: "fd-sr-only", children: monthHeading }),
     mode2 === "days" ? /* @__PURE__ */ jsxs37("div", { style: { display: "flex", gap: 18 }, children: [
       monthGrid(vy, vm),
       months > 1 ? monthGrid(nextY, nextM) : null
@@ -3175,6 +3299,7 @@ function Calendar({ value, range = false, onPick, initialMonth, months = 1 }) {
             setVy(today.getFullYear());
             setVm(today.getMonth());
             setMode("days");
+            moveActive(today);
           },
           children: "Today"
         }