@tensor_1/react 2.32.0 → 2.33.0

package/dist/components/SchedulingCalendar.js

@@ -2,7 +2,8 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { addCalendarDays, addCalendarMonths, buildMonthGrid, cachedDateTimeFormat, startOfMonth, zonedDateKey, zonedTimeOfDay } from "../calendar-model.js";
-import { itemDaySpan, layoutMonthSpans } from "../scheduling-calendar-model.js";
+import { TOP_LANE_CROSS_MIDNIGHT_MINUTES, itemDaySpan, layoutMonthSpans } from "../scheduling-calendar-model.js";
+import { SchedulingTimeGrid } from "./SchedulingTimeGrid.js";
 import { cx } from "../cx.js";
 import { useUixLabels } from "../labels-context.js";
 import { StatusPill } from "./StatusPill.js";
@@ -15,9 +16,12 @@ const DEFAULT_SCHEDULING_CALENDAR_LABELS = {
   nextMonth: "Next month",
   previousWeek: "Previous week",
   nextWeek: "Next week",
+  previousDay: "Previous day",
+  nextDay: "Next day",
   viewGroup: "Calendar view",
   viewMonth: "Month",
   viewWeek: "Week",
+  viewDay: "Day",
   viewAgenda: "Agenda",
   loading: "Loading schedule\u2026",
   retry: "Try again",
@@ -34,14 +38,25 @@ const DEFAULT_SCHEDULING_CALENDAR_LABELS = {
   moreSpansLabel: "{count} more spanning this week, from {date}",
   dayCount: "{count} entries",
   states: { scheduled: "Scheduled", conflicted: "Conflicted", "in-progress": "In progress", "blackout-violation": "Blackout violation" },
-  statuses: { tentative: "Tentative", committed: "Scheduled", live: "In progress", done: "Done", dead: "Cancelled" }
+  statuses: { tentative: "Tentative", committed: "Scheduled", live: "In progress", done: "Done", dead: "Cancelled" },
+  timeZone: "{timeZone}",
+  windows: "Windows",
+  moreWindows: "+{count} windows",
+  moreWindowsLabel: "{count} more windows, from {date}",
+  topLane: "All-day and longer entries",
+  continuesFrom: "from {time}",
+  moveHint: "Hold Shift and press an arrow key to move it. Enter confirms, Escape cancels.",
+  moveProposed: "Move to {start} \u2013 {end}. Enter confirms, Escape cancels.",
+  moveCancelled: "Move cancelled.",
+  gapForward: "That time does not exist on this day. Moved forward to {time}."
 };
 const stateTone = (state) => state === "scheduled" ? "info" : state === "in-progress" ? "success" : "danger";
 const utcDate = (date) => /* @__PURE__ */ new Date(`${date}T00:00:00Z`);
 const INTL_PARTS = {
   day: { dateStyle: "full", timeZone: "UTC" },
   weekday: { weekday: "short", timeZone: "UTC" },
-  month: { month: "long", year: "numeric", timeZone: "UTC" }
+  month: { month: "long", year: "numeric", timeZone: "UTC" },
+  column: { weekday: "short", day: "2-digit", month: "2-digit", timeZone: "UTC" }
 };
 const EMPTY_OVERLAYS = [];
 const EMPTY_ENTRIES = [];
@@ -54,13 +69,14 @@ function coveredDays(start, end, timeZone) {
     return itemDaySpan(start, start, timeZone);
   }
 }
-function Marker({ marker }) {
+function Marker({ marker, showLabel }) {
   const emphasis = marker.emphasis ?? "neutral";
   return /* @__PURE__ */ jsxs("span", { className: "uix-scheduling-calendar__marker", "data-emphasis": emphasis, "data-glyph": marker.icon == null ? emphasis : void 0, children: [
     marker.icon != null && /* @__PURE__ */ jsx("span", { className: "uix-scheduling-calendar__marker-icon", "aria-hidden": "true", children: marker.icon }),
-    /* @__PURE__ */ jsx("span", { className: "uix-visually-hidden", children: marker.label })
+    /* @__PURE__ */ jsx("span", { className: showLabel ? "uix-scheduling-calendar__marker-label" : "uix-visually-hidden", children: marker.label })
   ] });
 }
+const renderMarker = (marker, showLabel) => /* @__PURE__ */ jsx(Marker, { marker, showLabel });
 function SchedulingCalendar({
   entries,
   anchorDate,
@@ -91,6 +107,14 @@ function SchedulingCalendar({
   notice,
   emptyNote,
   onSelectDate,
+  timeGrid = false,
+  now,
+  canMove = false,
+  step = 15,
+  onProposeMove,
+  topLaneCrossMidnightMinutes = TOP_LANE_CROSS_MIDNIGHT_MINUTES,
+  topLaneCap = 3,
+  maxLanes = 4,
   loading,
   error,
   onRetry,
@@ -106,7 +130,7 @@ function SchedulingCalendar({
     statuses: { ...DEFAULT_SCHEDULING_CALENDAR_LABELS.statuses, ...uixLabels.schedulingCalendar?.statuses, ...labelOverrides?.statuses }
   };
   const stateLabel = labels.states;
-  const viewLabel = { month: labels.viewMonth, week: labels.viewWeek, agenda: labels.viewAgenda };
+  const viewLabel = { month: labels.viewMonth, week: labels.viewWeek, day: labels.viewDay, agenda: labels.viewAgenda };
   const [internalView, setInternalView] = useState("month");
   const view = controlledView ?? internalView;
   const [activeDate, setActiveDate] = useState(anchorDate);
@@ -124,7 +148,8 @@ function SchedulingCalendar({
   const weekday = (utcDate(anchorDate).getUTCDay() - weekStartsOn + 7) % 7;
   const weekStart = addCalendarDays(anchorDate, -weekday);
   const weekDays = useMemo(() => Array.from({ length: 7 }, (_, index) => addCalendarDays(weekStart, index)), [weekStart]);
-  const days = useMemo(() => view === "month" ? monthDays.map((day) => day.date) : weekDays, [view, monthDays, weekDays]);
+  const days = useMemo(() => view === "month" ? monthDays.map((day) => day.date) : view === "day" ? [anchorDate] : weekDays, [view, monthDays, weekDays, anchorDate]);
+  const timeGridView = view === "day" || view === "week" && timeGrid;
   const { singles, multiDay, coverage } = useMemo(() => {
     const byDay = /* @__PURE__ */ new Map();
     const spans = [];
@@ -144,7 +169,7 @@ function SchedulingCalendar({
   const overlayById = useMemo(() => new Map([...overlays].reverse().map((overlay) => [overlay.id, overlay])), [overlays]);
   const layout = useMemo(() => {
     if (spanLayout) return spanLayout;
-    if (view === "agenda") return { placed: [], hiddenByRow: {}, firstHiddenDayByRow: {} };
+    if (view === "agenda" || timeGridView) return { placed: [], hiddenByRow: {}, firstHiddenDayByRow: {} };
     const inputs = [];
     const windowIds = /* @__PURE__ */ new Set();
     const itemIds = /* @__PURE__ */ new Set();
@@ -159,7 +184,7 @@ function SchedulingCalendar({
       inputs.push({ id: entry.id, start: entry.start, end: entry.end, group: "item" });
     }
     return layoutMonthSpans(inputs, days, { timeZone, laneCap: { window: windowCap, item: spanCap } });
-  }, [spanLayout, view, overlays, multiDay, days, timeZone, windowCap, spanCap]);
+  }, [spanLayout, view, timeGridView, overlays, multiDay, days, timeZone, windowCap, spanCap]);
   const placedByRow = useMemo(() => {
     const rows = /* @__PURE__ */ new Map();
     for (const placed of layout.placed) {
@@ -178,9 +203,9 @@ function SchedulingCalendar({
     if (controlledView === void 0) setInternalView(next);
     onViewChange?.(next);
   };
-  const movePeriod = (direction) => onAnchorDateChange?.(view === "month" ? addCalendarMonths(anchorDate, direction) : addCalendarDays(anchorDate, direction * 7));
+  const movePeriod = (direction) => onAnchorDateChange?.(view === "month" ? addCalendarMonths(anchorDate, direction) : addCalendarDays(anchorDate, view === "day" ? direction : direction * 7));
   const periodLabel = (direction) => {
-    const key = `${direction}${view === "month" ? "Month" : "Week"}`;
+    const key = `${direction}${view === "month" ? "Month" : view === "day" ? "Day" : "Week"}`;
     return overrides[key] ?? overrides[direction] ?? labels[key];
   };
   const focusDate = (date) => {
@@ -326,8 +351,8 @@ function SchedulingCalendar({
         /* @__PURE__ */ jsx("button", { type: "button", className: "uix-btn uix-btn--ghost uix-btn--sm", onClick: () => movePeriod(-1), disabled: !onAnchorDateChange, children: periodLabel("previous") }),
         /* @__PURE__ */ jsx("button", { type: "button", className: "uix-btn uix-btn--ghost uix-btn--sm", onClick: () => movePeriod(1), disabled: !onAnchorDateChange, children: periodLabel("next") })
       ] }),
-      /* @__PURE__ */ jsx("strong", { children: view === "month" ? dateText(startOfMonth(anchorDate), "month") : `${dateText(weekStart, "day")} \u2013 ${dateText(weekDays[weekDays.length - 1], "day")}` }),
-      /* @__PURE__ */ jsx("div", { className: "uix-segmented", role: "group", "aria-label": labels.viewGroup, children: ["month", "week", "agenda"].map((option) => /* @__PURE__ */ jsx("button", { type: "button", className: "uix-segmented__option", "aria-pressed": view === option, "data-selected": view === option || void 0, onClick: () => setView(option), children: viewLabel[option] }, option)) })
+      /* @__PURE__ */ jsx("strong", { children: view === "month" ? dateText(startOfMonth(anchorDate), "month") : view === "day" ? dateText(anchorDate, "day") : `${dateText(weekStart, "day")} \u2013 ${dateText(weekDays[weekDays.length - 1], "day")}` }),
+      /* @__PURE__ */ jsx("div", { className: "uix-segmented", role: "group", "aria-label": labels.viewGroup, children: (timeGrid || view === "day" ? ["month", "week", "day", "agenda"] : ["month", "week", "agenda"]).map((option) => /* @__PURE__ */ jsx("button", { type: "button", className: "uix-segmented__option", "aria-pressed": view === option, "data-selected": view === option || void 0, onClick: () => setView(option), children: viewLabel[option] }, option)) })
     ] }),
     notice != null && notice !== false && /* @__PURE__ */ jsx("div", { className: "uix-scheduling-calendar__notice", children: notice }),
     loading ? /* @__PURE__ */ jsx("div", { className: "uix-scheduling-calendar__state", role: "status", children: labels.loading }) : error ? /* @__PURE__ */ jsxs("div", { className: "uix-scheduling-calendar__state", role: "alert", children: [
@@ -348,7 +373,41 @@ function SchedulingCalendar({
         markers.length > 0 && /* @__PURE__ */ jsx("span", { className: "uix-scheduling-calendar__markers", children: markers.map((marker) => /* @__PURE__ */ jsx(Marker, { marker }, marker.id)) }),
         entry.state ? /* @__PURE__ */ jsx(StatusPill, { tone: stateTone(entry.state), children: stateLabel[entry.state] }) : /* @__PURE__ */ jsx("span", { className: "uix-scheduling-calendar__status", children: stateText(entry) })
       ] }) }, entry.id);
-    }) }) }) : /* @__PURE__ */ jsxs("div", { ref: gridRef, className: cx("uix-scheduling-calendar__grid", view === "week" && "uix-scheduling-calendar__grid--week"), "data-fixed": fixed || void 0, style: gridStyle, role: "group", "aria-label": fillLabel(labels.grid, { view: viewLabel[view] }), children: [
+    }) }) }) : timeGridView ? /* @__PURE__ */ jsx(
+      SchedulingTimeGrid,
+      {
+        view: view === "day" ? "day" : "week",
+        days,
+        timeZone,
+        entries: visibleEntries,
+        overlays,
+        dayInfo,
+        labels,
+        gridLabel: fillLabel(labels.grid, { view: viewLabel[view] }),
+        dateText,
+        formatInstant,
+        entryName,
+        entryStatus: statusOf,
+        entryMarkers: markersOf,
+        overlayName,
+        renderEntry,
+        renderMarker,
+        onSelectEntry,
+        onSelectOverlay,
+        onSelectDate,
+        onShowMore,
+        now,
+        canMove,
+        step,
+        onProposeMove,
+        topLaneCrossMidnightMinutes,
+        topLaneCap,
+        windowLaneCap: windowLaneCap ?? DEFAULT_LANE_CAP,
+        maxLanes,
+        emptyNote,
+        nothingToShow
+      }
+    ) : /* @__PURE__ */ jsxs("div", { ref: gridRef, className: cx("uix-scheduling-calendar__grid", view === "week" && "uix-scheduling-calendar__grid--week"), "data-fixed": fixed || void 0, style: gridStyle, role: "group", "aria-label": fillLabel(labels.grid, { view: viewLabel[view] }), children: [
       days.slice(0, 7).map((date) => /* @__PURE__ */ jsx("div", { className: "uix-scheduling-calendar__weekday", "aria-hidden": "true", children: dateText(date, "weekday") }, `weekday-${date}`)),
       Array.from({ length: days.length / 7 }, (_, row) => renderWeek(row)),
       emptyNote != null && emptyNote !== false && nothingToShow && /* @__PURE__ */ jsx("div", { className: "uix-scheduling-calendar__empty", children: emptyNote })

package/dist/components/SchedulingTimeGrid.d.ts

@@ -0,0 +1,4 @@
+import 'react';
+import '../scheduling-calendar-model.js';
+export { p as SchedulingTimeGrid, q as SchedulingTimeGridProps, T as TimeGridEntryContext } from '../SchedulingCalendar-C4XVbqZr.js';
+import '../calendar-model.js';