@tensor_1/react 2.34.0 → 2.35.0

package/dist/components/SchedulingTimeGrid.js

@@ -39,6 +39,8 @@ const GridItem = memo(function GridItem2({ entry, segment, column, alone, name,
   ] });
   const shared = {
     className: "uix-scheduling-calendar__entry uix-scheduling-calendar__tg-item",
+    "data-highlight": entry.emphasis === "highlight" || void 0,
+    "data-dim": entry.emphasis === "dim" || void 0,
     "data-band": entry.band ?? "none",
     "data-status": status,
     "data-state": entry.state,
@@ -54,6 +56,7 @@ const GridItem = memo(function GridItem2({ entry, segment, column, alone, name,
     "button",
     {
       type: "button",
+      tabIndex: -1,
       ...shared,
       "data-item-id": entry.id,
       "aria-label": name,
@@ -101,6 +104,9 @@ function SchedulingTimeGrid({
   const [widthCap, setWidthCap] = useState(Infinity);
   const [ghost, setGhost] = useState(null);
   const [announcement, setAnnouncement] = useState("");
+  const [activeDay, setActiveDay] = useState(days[0]);
+  const enteredFrom = useRef(null);
+  const tabStop = days.includes(activeDay) ? activeDay : days[0];
   const moving = canMove && onProposeMove !== void 0;
   const step = Number.isFinite(givenStep) && givenStep > 0 ? givenStep : DEFAULT_STEP;
   const laneOptions = useMemo(() => ({ crossMidnightMinutes: topLaneCrossMidnightMinutes }), [topLaneCrossMidnightMinutes]);
@@ -334,6 +340,78 @@ function SchedulingTimeGrid({
     dragRef.current = null;
   }, []);
   const gridColumns = (span) => `${span.startCol + 2} / ${span.endCol + 3}`;
+  const headButton = (date) => rootRef.current?.querySelector(`.uix-scheduling-calendar__tg-dayhead[data-date="${date}"] [data-calendar-date]`) ?? null;
+  const dayRing = (date) => {
+    const root = rootRef.current;
+    const column = days.indexOf(date);
+    if (!root || column === -1) return [];
+    const covers = (element) => {
+      const [from, to] = element.style.gridColumn.split("/").map((part) => Number(part.trim()));
+      return from !== void 0 && to !== void 0 && from <= column + 2 && column + 2 < to;
+    };
+    const all = (selector) => Array.from(root.querySelectorAll(selector));
+    return [
+      ...all(".uix-scheduling-calendar__tg-strip > button.uix-scheduling-calendar__window").filter(covers),
+      ...all(".uix-scheduling-calendar__tg-top > button.uix-scheduling-calendar__tg-span").filter(covers),
+      ...all(`[data-tg-column="${date}"] > button[data-item-id]`),
+      ...all(`.uix-scheduling-calendar__tg-dayhead[data-date="${date}"] > button.uix-scheduling-calendar__more`),
+      // "+N windows" opens one day; it is reached from that day.
+      ...all(`.uix-scheduling-calendar__tg-strip > button.uix-scheduling-calendar__rowmore[data-more-date="${date}"]`)
+    ];
+  };
+  const dayOfItem = (item) => {
+    if (enteredFrom.current && dayRing(enteredFrom.current).includes(item)) return enteredFrom.current;
+    const inColumn = item.getAttribute("data-more-date") ?? item.closest("[data-tg-column]")?.getAttribute("data-tg-column") ?? item.closest("[data-date]")?.getAttribute("data-date");
+    if (inColumn) return inColumn;
+    const from = Number(item.style.gridColumn.split("/")[0]);
+    return Number.isFinite(from) ? days[Math.max(0, Math.min(days.length - 1, from - 2))] ?? null : days[days.length - 1] ?? null;
+  };
+  const onHeadKeyDown = (event, date) => {
+    const index = days.indexOf(date);
+    const target = event.key === "ArrowLeft" ? index - 1 : event.key === "ArrowRight" ? index + 1 : event.key === "Home" ? 0 : event.key === "End" ? days.length - 1 : null;
+    if (target !== null) {
+      event.preventDefault();
+      const next = days[Math.max(0, Math.min(days.length - 1, target))];
+      setActiveDay(next);
+      headButton(next)?.focus();
+    } else if (event.key === "Enter") {
+      const [first] = dayRing(date);
+      if (!first) return;
+      event.preventDefault();
+      enteredFrom.current = date;
+      first.focus();
+    }
+  };
+  const onGridKeyDown = (event) => {
+    const item = event.target;
+    if (event.defaultPrevented || event.shiftKey || item.hasAttribute("data-calendar-date") || !["ArrowDown", "ArrowUp", "Home", "End", "Escape"].includes(event.key)) return;
+    const date = dayOfItem(item);
+    if (!date) return;
+    const ring = dayRing(date);
+    const index = ring.indexOf(item);
+    if (index === -1) return;
+    event.preventDefault();
+    const to = event.key === "Escape" ? null : ring[Math.max(0, Math.min(ring.length - 1, event.key === "Home" ? 0 : event.key === "End" ? ring.length - 1 : index + (event.key === "ArrowDown" ? 1 : -1)))];
+    if (to !== item && ghost?.source === "keys") {
+      setGhost(null);
+      setAnnouncement(labels.moveCancelled);
+    }
+    if (event.key === "Escape") {
+      event.stopPropagation();
+      enteredFrom.current = null;
+      setActiveDay(date);
+      headButton(date)?.focus();
+      return;
+    }
+    enteredFrom.current = date;
+    to?.focus();
+  };
+  const onGridFocus = (event) => {
+    const item = event.target;
+    if (item.hasAttribute("data-calendar-date")) return;
+    const date = dayOfItem(item);
+    if (date && dayRing(date).includes(item)) setActiveDay(date);
+  };
   const nowAt = now === void 0 ? null : new Date(now).getTime();
   const nowColumn = nowAt === null || Number.isNaN(nowAt) ? -1 : days.indexOf(zonedDateKey(new Date(nowAt), timeZone));
   const topHiddenOn = (date) => top.hidden.filter((id) => {
@@ -358,6 +436,8 @@ function SchedulingTimeGrid({
       role: "group",
       "aria-label": gridLabel,
       style: vars({ "--uix-scheduling-calendar-days": days.length, "--uix-scheduling-calendar-hours": maxHours }),
+      onKeyDown: onGridKeyDown,
+      onFocus: onGridFocus,
       onClickCapture: (event) => {
         if (suppressClick.current) {
           suppressClick.current = false;
@@ -374,12 +454,25 @@ function SchedulingTimeGrid({
             const more = info ? info.overflowCount : hiddenIds.length;
             const moreText = fillLabel(labels.moreSpans, { count: more });
             const moreName = fillLabel(labels.moreEntriesLabel, { count: more, date: dateText(date, "day") });
-            const headName = info ? info.label ?? `${dateText(date, "day")}, ${fillLabel(labels.dayCount, { count: info.count })}` : dateText(date, "day");
+            const headName = !info ? dateText(date, "day") : info.label ? fillLabel(labels.dayName, { date: dateText(date, "day"), label: info.label }) : `${dateText(date, "day")}, ${fillLabel(labels.dayCount, { count: info.count })}`;
             return /* @__PURE__ */ jsxs("div", { className: "uix-scheduling-calendar__tg-dayhead", role: "group", "aria-label": headName, "data-date": date, children: [
-              /* @__PURE__ */ jsx("button", { type: "button", className: "uix-scheduling-calendar__date", "data-calendar-date": date, "aria-label": dateText(date, "day"), onClick: onSelectDate ? () => onSelectDate(date) : void 0, children: dateText(date, "column") }),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  className: "uix-scheduling-calendar__date",
+                  "data-calendar-date": date,
+                  tabIndex: tabStop === date ? 0 : -1,
+                  "aria-label": info?.label ? fillLabel(labels.dayName, { date: dateText(date, "day"), label: info.label }) : dateText(date, "day"),
+                  onFocus: () => setActiveDay(date),
+                  onKeyDown: (event) => onHeadKeyDown(event, date),
+                  onClick: onSelectDate ? () => onSelectDate(date) : void 0,
+                  children: dateText(date, "column")
+                }
+              ),
               info && /* @__PURE__ */ jsx("span", { className: "uix-scheduling-calendar__count", "aria-hidden": "true", children: info.count }),
               info?.markers && info.markers.length > 0 && /* @__PURE__ */ jsx("span", { className: "uix-scheduling-calendar__markers", children: info.markers.map((marker) => /* @__PURE__ */ jsx("span", { children: renderMarker(marker, true) }, marker.id)) }),
-              more > 0 && (onShowMore ? /* @__PURE__ */ jsx("button", { type: "button", className: "uix-scheduling-calendar__more", "aria-label": moreName, onClick: () => onShowMore(date, hiddenIds.map((id) => entryById.get(id)).filter(Boolean)), children: moreText }) : /* @__PURE__ */ jsxs("span", { className: "uix-scheduling-calendar__more", children: [
+              more > 0 && (onShowMore ? /* @__PURE__ */ jsx("button", { type: "button", tabIndex: -1, className: "uix-scheduling-calendar__more", "aria-label": moreName, onClick: () => onShowMore(date, hiddenIds.map((id) => entryById.get(id)).filter(Boolean)), children: moreText }) : /* @__PURE__ */ jsxs("span", { className: "uix-scheduling-calendar__more", children: [
                 /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: moreText }),
                 /* @__PURE__ */ jsx("span", { className: "uix-visually-hidden", children: moreName })
               ] }))
@@ -394,6 +487,7 @@ function SchedulingTimeGrid({
               "button",
               {
                 type: "button",
+                tabIndex: -1,
                 className: "uix-scheduling-calendar__window",
                 "data-overlay-id": overlay.id,
                 "data-pattern": overlay.pattern ?? "solid",
@@ -413,7 +507,7 @@ function SchedulingTimeGrid({
               placed.id
             );
           }),
-          moreWindows > 0 && (onShowMore ? /* @__PURE__ */ jsx("button", { type: "button", className: "uix-scheduling-calendar__rowmore", "aria-label": fillLabel(labels.moreWindowsLabel, { count: moreWindows, date: dateText(firstHiddenWindowDay, "day") }), onClick: () => onShowMore(firstHiddenWindowDay, []), children: fillLabel(labels.moreWindows, { count: moreWindows }) }) : /* @__PURE__ */ jsx("span", { className: "uix-scheduling-calendar__rowmore", children: fillLabel(labels.moreWindows, { count: moreWindows }) }))
+          moreWindows > 0 && (onShowMore ? /* @__PURE__ */ jsx("button", { type: "button", tabIndex: -1, className: "uix-scheduling-calendar__rowmore", "data-more-date": firstHiddenWindowDay, "aria-label": fillLabel(labels.moreWindowsLabel, { count: moreWindows, date: dateText(firstHiddenWindowDay, "day") }), onClick: () => onShowMore(firstHiddenWindowDay, []), children: fillLabel(labels.moreWindows, { count: moreWindows }) }) : /* @__PURE__ */ jsx("span", { className: "uix-scheduling-calendar__rowmore", children: fillLabel(labels.moreWindows, { count: moreWindows }) }))
         ] }),
         (topLanes > 0 || ghostSpan) && /* @__PURE__ */ jsxs("div", { className: "uix-scheduling-calendar__tg-strip uix-scheduling-calendar__tg-top", role: "group", "aria-label": labels.topLane, style: vars({ "--uix-scheduling-calendar-lanes": Math.max(topLanes, 1) }), children: [
           top.placed.map((placed) => {
@@ -425,8 +519,11 @@ function SchedulingTimeGrid({
               "button",
               {
                 type: "button",
+                tabIndex: -1,
                 className: "uix-scheduling-calendar__entry uix-scheduling-calendar__tg-span",
                 "data-item-id": entry.id,
+                "data-highlight": entry.emphasis === "highlight" || void 0,
+                "data-dim": entry.emphasis === "dim" || void 0,
                 "data-band": entry.band ?? "none",
                 "data-status": entryStatus(entry),
                 "data-state": entry.state,

package/dist/components/SchedulingTimeline.d.ts

@@ -1,7 +1,7 @@
 import * as react from 'react';
 import { ReactNode } from 'react';
 import { TimelineRange, TimelineScale } from '../scheduling-timeline-model.js';
-import { j as SchedulingEntryState } from '../SchedulingCalendar-DSLQ6AY5.js';
+import { j as SchedulingEntryState } from '../SchedulingCalendar-B6TakO2h.js';
 import '../calendar-model.js';
 import '../scheduling-calendar-model.js';