@allhailai/tempusmachina-react 1.0.0 → 1.1.0

package/dist/index.cjs

@@ -194,6 +194,7 @@ function useCalendar(options) {
     slotMinTime,
     slotMaxTime,
     resources = [],
+    resourceOverlays = [],
     businessHours,
     eventMaxStack = 3,
     eventDefaults,
@@ -350,6 +351,7 @@ function useCalendar(options) {
     viewLayout,
     visibleRange,
     events: eventStore.getAll(),
+    resourceOverlays,
     next,
     prev,
     today: todayAction,
@@ -1576,8 +1578,57 @@ function TimeGrid({
     stickyFooterScrollbar && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sticky bottom-0 h-3 bg-cal-bg border-t border-cal-border overflow-x-auto shrink-0" })
   ] });
 }
-function ResourceLane({ lane, slotCount }) {
-  const { slots } = useCalendarContext();
+var PATTERN_STYLES = {
+  striped: {
+    backgroundImage: "repeating-linear-gradient(135deg, transparent, transparent 4px, rgba(0,0,0,0.06) 4px, rgba(0,0,0,0.06) 8px)"
+  },
+  hatched: {
+    backgroundImage: "repeating-linear-gradient(45deg, transparent, transparent 3px, rgba(0,0,0,0.08) 3px, rgba(0,0,0,0.08) 6px), repeating-linear-gradient(-45deg, transparent, transparent 3px, rgba(0,0,0,0.08) 3px, rgba(0,0,0,0.08) 6px)"
+  }
+};
+function sanitizeCategory(category) {
+  return category.toLowerCase().replace(/[^a-z0-9_-]/g, "-");
+}
+function computeBandPosition(band, rangeStartMs, rangeTotalMs) {
+  if (rangeTotalMs <= 0) return null;
+  const bandStartMs = band.start.epochMilliseconds;
+  const bandEndMs = band.end.epochMilliseconds;
+  const clampedStart = Math.max(bandStartMs, rangeStartMs);
+  const clampedEnd = Math.min(bandEndMs, rangeStartMs + rangeTotalMs);
+  if (clampedEnd <= clampedStart) return null;
+  const left = (clampedStart - rangeStartMs) / rangeTotalMs * 100;
+  const width = (clampedEnd - clampedStart) / rangeTotalMs * 100;
+  return { left, width };
+}
+function ResourceLane({ lane, slotCount, overlays }) {
+  const { slots, viewLayout, timezone } = useCalendarContext();
+  const { rangeStartMs, rangeTotalMs } = React16.useMemo(() => {
+    if (!viewLayout?.dateRange) return { rangeStartMs: 0, rangeTotalMs: 0 };
+    const timeSlots = viewLayout.timeSlots;
+    if (timeSlots && timeSlots.length > 0) {
+      const firstSlot = timeSlots[0];
+      const lastSlot = timeSlots[timeSlots.length - 1];
+      const startMs2 = firstSlot.start.toZonedDateTime(timezone).epochMilliseconds;
+      const endMs2 = lastSlot.end.toZonedDateTime(timezone).epochMilliseconds;
+      return {
+        rangeStartMs: startMs2,
+        rangeTotalMs: Math.max(0, endMs2 - startMs2)
+      };
+    }
+    const { start: rangeStart, end: rangeEnd } = viewLayout.dateRange;
+    const startMs = rangeStart.toZonedDateTime({
+      timeZone: timezone,
+      plainTime: temporalPolyfill.Temporal.PlainTime.from("00:00")
+    }).epochMilliseconds;
+    const endMs = rangeEnd.toZonedDateTime({
+      timeZone: timezone,
+      plainTime: temporalPolyfill.Temporal.PlainTime.from("00:00")
+    }).epochMilliseconds;
+    return {
+      rangeStartMs: startMs,
+      rangeTotalMs: Math.max(0, endMs - startMs)
+    };
+  }, [viewLayout?.dateRange, viewLayout?.timeSlots, timezone]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
@@ -1594,36 +1645,114 @@ function ResourceLane({ lane, slotCount }) {
           ),
           /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium truncate", children: lane.resource.title })
         ] }) }),
-        /* @__PURE__ */ jsxRuntime.jsx(
+        /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
             className: cn("relative col-span-full", `col-start-2`),
             style: { gridColumn: `2 / -1`, minHeight: "var(--cal-slot-height)" },
-            children: lane.events.map((posEvent) => /* @__PURE__ */ jsxRuntime.jsx(
-              "div",
-              {
-                className: "tm-event",
-                style: {
-                  left: `${posEvent.left}%`,
-                  width: `${posEvent.width}%`,
-                  top: "2px",
-                  height: "calc(100% - 4px)"
+            children: [
+              overlays && rangeTotalMs > 0 && overlays.map((band) => {
+                const pos = computeBandPosition(band, rangeStartMs, rangeTotalMs);
+                if (!pos) return null;
+                return /* @__PURE__ */ jsxRuntime.jsx(
+                  OverlayBandElement,
+                  {
+                    band,
+                    resource: lane.resource,
+                    left: pos.left,
+                    width: pos.width
+                  },
+                  band.id
+                );
+              }),
+              lane.events.map((posEvent) => /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: "tm-event",
+                  style: {
+                    left: `${posEvent.left}%`,
+                    width: `${posEvent.width}%`,
+                    top: "2px",
+                    height: "calc(100% - 4px)"
+                  },
+                  children: /* @__PURE__ */ jsxRuntime.jsx(EventCard, { positionedEvent: posEvent, compact: true })
                 },
-                children: /* @__PURE__ */ jsxRuntime.jsx(EventCard, { positionedEvent: posEvent, compact: true })
-              },
-              posEvent.event.id
-            ))
+                posEvent.event.id
+              ))
+            ]
           }
         )
       ]
     }
   );
 }
-function Timeline({ className }) {
-  const { viewLayout, locale } = useCalendarContext();
+function OverlayBandElement({ band, resource, left, width }) {
+  const { slots } = useCalendarContext();
+  const safeCategory = sanitizeCategory(band.category);
+  const bgColor = band.color ?? `var(--cal-overlay-${safeCategory}, var(--cal-overlay-default))`;
+  const bandStyle = {
+    position: "absolute",
+    top: 0,
+    bottom: 0,
+    left: `${left}%`,
+    width: `${width}%`,
+    backgroundColor: bgColor,
+    opacity: 0.3,
+    pointerEvents: "none",
+    ...band.pattern && band.pattern !== "solid" ? PATTERN_STYLES[band.pattern] : {}
+  };
+  if (slots.overlayBandContent) {
+    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: slots.overlayBandContent({ band, resource, style: bandStyle }) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: cn("tm-overlay-band", `tm-overlay-band--${safeCategory}`),
+      style: bandStyle,
+      "aria-hidden": "true",
+      title: band.label ?? band.category
+    }
+  );
+}
+function Timeline({
+  className,
+  collapsibleGroups = true,
+  expandedGroupIds: controlledExpandedIds,
+  onGroupToggle
+}) {
+  const { viewLayout, locale, slots, resourceOverlays } = useCalendarContext();
+  const [internalExpanded, setInternalExpanded] = React16.useState({});
+  const isGroupExpanded = React16.useCallback(
+    (groupId) => {
+      if (controlledExpandedIds) {
+        return controlledExpandedIds.includes(groupId);
+      }
+      return internalExpanded[groupId] !== false;
+    },
+    [controlledExpandedIds, internalExpanded]
+  );
+  const handleGroupToggle = React16.useCallback(
+    (groupId) => {
+      const newState = !isGroupExpanded(groupId);
+      if (!controlledExpandedIds) {
+        setInternalExpanded((prev) => ({ ...prev, [groupId]: newState }));
+      }
+      onGroupToggle?.(groupId, newState);
+    },
+    [controlledExpandedIds, isGroupExpanded, onGroupToggle]
+  );
   if (!viewLayout?.lanes) return null;
   const lanes = viewLayout.lanes;
   const timeSlots = viewLayout.timeSlots ?? [];
+  const resourceGroups = viewLayout.resourceGroups;
+  const laneByResourceId = new Map(lanes.map((lane) => [lane.resource.id, lane]));
+  const overlaysByResourceId = /* @__PURE__ */ new Map();
+  if (resourceOverlays) {
+    for (const overlay of resourceOverlays) {
+      overlaysByResourceId.set(overlay.resourceId, overlay.bands);
+    }
+  }
+  const hasGroups = resourceGroups && resourceGroups.length > 0;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex-1 overflow-hidden tm-timeline", className), children: [
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "tm-timeline__header border-b border-cal-border bg-cal-header-bg", children: /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
@@ -1645,7 +1774,135 @@ function Timeline({ className }) {
         ]
       }
     ) }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-y-auto tm-scrollable", children: lanes.map((lane) => /* @__PURE__ */ jsxRuntime.jsx(ResourceLane, { lane, slotCount: timeSlots.length }, lane.resource.id)) })
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "overflow-y-auto tm-scrollable", children: [
+      hasGroups ? resourceGroups.map((group) => /* @__PURE__ */ jsxRuntime.jsx(
+        TimelineGroup,
+        {
+          group,
+          laneByResourceId,
+          overlaysByResourceId,
+          slotCount: timeSlots.length,
+          collapsible: collapsibleGroups,
+          isExpanded: isGroupExpanded(group.id),
+          onToggle: () => handleGroupToggle(group.id),
+          slots
+        },
+        group.id
+      )) : lanes.map((lane) => /* @__PURE__ */ jsxRuntime.jsx(
+        ResourceLane,
+        {
+          lane,
+          slotCount: timeSlots.length,
+          overlays: overlaysByResourceId.get(lane.resource.id)
+        },
+        lane.resource.id
+      )),
+      hasGroups && lanes.filter(
+        (lane) => !resourceGroups.some(
+          (g) => g.resources.some((r) => r.id === lane.resource.id)
+        ) && lane.resource.id !== "__unassigned__"
+      ).map((lane) => /* @__PURE__ */ jsxRuntime.jsx(
+        ResourceLane,
+        {
+          lane,
+          slotCount: timeSlots.length,
+          overlays: overlaysByResourceId.get(lane.resource.id)
+        },
+        lane.resource.id
+      )),
+      lanes.filter((lane) => lane.resource.id === "__unassigned__").map((lane) => /* @__PURE__ */ jsxRuntime.jsx(
+        ResourceLane,
+        {
+          lane,
+          slotCount: timeSlots.length,
+          overlays: overlaysByResourceId.get(lane.resource.id)
+        },
+        lane.resource.id
+      ))
+    ] })
+  ] });
+}
+function TimelineGroup({
+  group,
+  laneByResourceId,
+  overlaysByResourceId,
+  slotCount,
+  collapsible,
+  isExpanded,
+  onToggle,
+  slots
+}) {
+  const memberCount = group.resources.length;
+  const groupSubtitle = group.subtitle;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "tm-timeline-group", children: [
+    slots.resourceGroupContent ? slots.resourceGroupContent({
+      group,
+      isExpanded,
+      memberCount,
+      onToggle
+    }) : /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: cn(
+          "tm-timeline-group__header",
+          "flex items-center gap-2 px-3 py-2",
+          "bg-cal-header-bg border-b border-cal-border",
+          collapsible && "cursor-pointer hover:bg-cal-slot-bg"
+        ),
+        onClick: collapsible ? onToggle : void 0,
+        onKeyDown: collapsible ? (e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            onToggle();
+          }
+        } : void 0,
+        role: collapsible ? "button" : void 0,
+        tabIndex: collapsible ? 0 : void 0,
+        "aria-expanded": collapsible ? isExpanded : void 0,
+        "aria-label": `${isExpanded ? "Collapse" : "Expand"} ${group.title}`,
+        children: [
+          collapsible && /* @__PURE__ */ jsxRuntime.jsx(
+            "svg",
+            {
+              width: "14",
+              height: "14",
+              viewBox: "0 0 14 14",
+              fill: "none",
+              className: cn(
+                "transition-transform duration-200 text-cal-fg opacity-50",
+                isExpanded ? "rotate-90" : ""
+              ),
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                "path",
+                {
+                  d: "M5 3L9 7L5 11",
+                  stroke: "currentColor",
+                  strokeWidth: "1.5",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round"
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-semibold text-cal-fg", children: group.title }),
+          groupSubtitle && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] text-cal-fg opacity-50", children: groupSubtitle }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-auto text-[10px] font-medium text-cal-fg opacity-40 bg-cal-slot-bg rounded-full px-1.5 py-0.5", children: memberCount })
+        ]
+      }
+    ),
+    isExpanded && group.resources.map((resource) => {
+      const lane = laneByResourceId.get(resource.id);
+      if (!lane) return null;
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        ResourceLane,
+        {
+          lane,
+          slotCount,
+          overlays: overlaysByResourceId.get(resource.id)
+        },
+        resource.id
+      );
+    })
   ] });
 }
 function Agenda({ className }) {
@@ -1838,6 +2095,7 @@ function Calendar({
   const contextValue = {
     ...calendarState,
     resources: options.resources ?? [],
+    resourceOverlays: calendarState.resourceOverlays,
     timezone: options.timezone ?? "UTC",
     locale: options.locale ?? "en-US",
     firstDayOfWeek: options.firstDayOfWeek ?? 0,