@underverse-ui/underverse 0.2.87 → 0.2.89

package/dist/index.d.cts

@@ -904,6 +904,7 @@ declare function Calendar({ month, defaultMonth, onMonthChange, value, defaultVa
 type CalendarTimelineView = "month" | "week" | "day";
 type CalendarTimelineDateInput = Date | string | number;
 type CalendarTimelineSize = "sm" | "md" | "xl";
+type CalendarTimelineSheetSize = "sm" | "md" | "lg" | "xl" | "full";
 interface CalendarTimelineGroup {
     id: string;
     label: React$1.ReactNode;
@@ -980,6 +981,26 @@ interface CalendarTimelineProps<TResourceMeta = unknown, TEventMeta = unknown> e
     resources: CalendarTimelineResource<TResourceMeta>[];
     events: CalendarTimelineEvent<TEventMeta>[];
     size?: CalendarTimelineSize;
+    /**
+     * Enable the built-in right-side event details sheet on click.
+     * If `renderEventSheet` is provided, this defaults to enabled.
+     */
+    enableEventSheet?: boolean;
+    eventSheetSize?: CalendarTimelineSheetSize;
+    renderEventSheet?: (args: {
+        event: CalendarTimelineEvent<TEventMeta>;
+        resource?: CalendarTimelineResource<TResourceMeta>;
+        close: () => void;
+        locale: string;
+        timeZone: string;
+        view: CalendarTimelineView;
+    }) => React$1.ReactNode;
+    selectedEventId?: string | null;
+    defaultSelectedEventId?: string | null;
+    onSelectedEventIdChange?: (eventId: string | null) => void;
+    eventSheetOpen?: boolean;
+    defaultEventSheetOpen?: boolean;
+    onEventSheetOpenChange?: (open: boolean) => void;
     view?: CalendarTimelineView;
     defaultView?: CalendarTimelineView;
     onViewChange?: (view: CalendarTimelineView) => void;
@@ -1041,7 +1062,7 @@ interface CalendarTimelineProps<TResourceMeta = unknown, TEventMeta = unknown> e
     virtualization?: CalendarTimelineVirtualization;
 }
 
-declare function CalendarTimeline<TResourceMeta = unknown, TEventMeta = unknown>({ resources, events, size, view, defaultView, onViewChange, date, defaultDate, onDateChange, weekStartsOn, locale, timeZone, labels, formatters, groups, groupCollapsed, defaultGroupCollapsed, onGroupCollapsedChange, resourceColumnWidth, rowHeight, slotMinWidth, dayTimeStepMinutes, maxLanesPerRow, now, renderResource, renderGroup, renderEvent, interactions, onRangeChange, onEventClick, onEventDoubleClick, onCreateEvent, onEventMove, onEventResize, onMoreClick, virtualization, className, ...rest }: CalendarTimelineProps<TResourceMeta, TEventMeta>): react_jsx_runtime.JSX.Element;
+declare function CalendarTimeline<TResourceMeta = unknown, TEventMeta = unknown>({ resources, events, size, enableEventSheet, eventSheetSize, renderEventSheet, selectedEventId, defaultSelectedEventId, onSelectedEventIdChange, eventSheetOpen, defaultEventSheetOpen, onEventSheetOpenChange, view, defaultView, onViewChange, date, defaultDate, onDateChange, weekStartsOn, locale, timeZone, labels, formatters, groups, groupCollapsed, defaultGroupCollapsed, onGroupCollapsedChange, resourceColumnWidth, rowHeight, slotMinWidth, dayTimeStepMinutes, maxLanesPerRow, now, renderResource, renderGroup, renderEvent, interactions, onRangeChange, onEventClick, onEventDoubleClick, onCreateEvent, onEventMove, onEventResize, onMoreClick, virtualization, className, ...rest }: CalendarTimelineProps<TResourceMeta, TEventMeta>): react_jsx_runtime.JSX.Element;
 
 type ComboboxOption = string | {
     label: string;

package/dist/index.d.ts

@@ -904,6 +904,7 @@ declare function Calendar({ month, defaultMonth, onMonthChange, value, defaultVa
 type CalendarTimelineView = "month" | "week" | "day";
 type CalendarTimelineDateInput = Date | string | number;
 type CalendarTimelineSize = "sm" | "md" | "xl";
+type CalendarTimelineSheetSize = "sm" | "md" | "lg" | "xl" | "full";
 interface CalendarTimelineGroup {
     id: string;
     label: React$1.ReactNode;
@@ -980,6 +981,26 @@ interface CalendarTimelineProps<TResourceMeta = unknown, TEventMeta = unknown> e
     resources: CalendarTimelineResource<TResourceMeta>[];
     events: CalendarTimelineEvent<TEventMeta>[];
     size?: CalendarTimelineSize;
+    /**
+     * Enable the built-in right-side event details sheet on click.
+     * If `renderEventSheet` is provided, this defaults to enabled.
+     */
+    enableEventSheet?: boolean;
+    eventSheetSize?: CalendarTimelineSheetSize;
+    renderEventSheet?: (args: {
+        event: CalendarTimelineEvent<TEventMeta>;
+        resource?: CalendarTimelineResource<TResourceMeta>;
+        close: () => void;
+        locale: string;
+        timeZone: string;
+        view: CalendarTimelineView;
+    }) => React$1.ReactNode;
+    selectedEventId?: string | null;
+    defaultSelectedEventId?: string | null;
+    onSelectedEventIdChange?: (eventId: string | null) => void;
+    eventSheetOpen?: boolean;
+    defaultEventSheetOpen?: boolean;
+    onEventSheetOpenChange?: (open: boolean) => void;
     view?: CalendarTimelineView;
     defaultView?: CalendarTimelineView;
     onViewChange?: (view: CalendarTimelineView) => void;
@@ -1041,7 +1062,7 @@ interface CalendarTimelineProps<TResourceMeta = unknown, TEventMeta = unknown> e
     virtualization?: CalendarTimelineVirtualization;
 }
 
-declare function CalendarTimeline<TResourceMeta = unknown, TEventMeta = unknown>({ resources, events, size, view, defaultView, onViewChange, date, defaultDate, onDateChange, weekStartsOn, locale, timeZone, labels, formatters, groups, groupCollapsed, defaultGroupCollapsed, onGroupCollapsedChange, resourceColumnWidth, rowHeight, slotMinWidth, dayTimeStepMinutes, maxLanesPerRow, now, renderResource, renderGroup, renderEvent, interactions, onRangeChange, onEventClick, onEventDoubleClick, onCreateEvent, onEventMove, onEventResize, onMoreClick, virtualization, className, ...rest }: CalendarTimelineProps<TResourceMeta, TEventMeta>): react_jsx_runtime.JSX.Element;
+declare function CalendarTimeline<TResourceMeta = unknown, TEventMeta = unknown>({ resources, events, size, enableEventSheet, eventSheetSize, renderEventSheet, selectedEventId, defaultSelectedEventId, onSelectedEventIdChange, eventSheetOpen, defaultEventSheetOpen, onEventSheetOpenChange, view, defaultView, onViewChange, date, defaultDate, onDateChange, weekStartsOn, locale, timeZone, labels, formatters, groups, groupCollapsed, defaultGroupCollapsed, onGroupCollapsedChange, resourceColumnWidth, rowHeight, slotMinWidth, dayTimeStepMinutes, maxLanesPerRow, now, renderResource, renderGroup, renderEvent, interactions, onRangeChange, onEventClick, onEventDoubleClick, onCreateEvent, onEventMove, onEventResize, onMoreClick, virtualization, className, ...rest }: CalendarTimelineProps<TResourceMeta, TEventMeta>): react_jsx_runtime.JSX.Element;
 
 type ComboboxOption = string | {
     label: string;

package/dist/index.js

@@ -7627,6 +7627,18 @@ function getZonedParts(date, timeZone) {
     second: get("second")
   };
 }
+function getIsoWeekInfo(date, timeZone) {
+  const p = getZonedParts(date, timeZone);
+  const target = new Date(Date.UTC(p.year, p.month - 1, p.day));
+  const dayNr = (target.getUTCDay() + 6) % 7;
+  target.setUTCDate(target.getUTCDate() - dayNr + 3);
+  const isoYear = target.getUTCFullYear();
+  const firstThursday = new Date(Date.UTC(isoYear, 0, 4));
+  const firstDayNr = (firstThursday.getUTCDay() + 6) % 7;
+  firstThursday.setUTCDate(firstThursday.getUTCDate() - firstDayNr + 3);
+  const week = 1 + Math.round((target.getTime() - firstThursday.getTime()) / (7 * 24 * 60 * 60 * 1e3));
+  return { year: isoYear, week };
+}
 function partsToUtcMs(p) {
   return Date.UTC(p.year, p.month - 1, p.day, p.hour, p.minute, p.second);
 }
@@ -7820,6 +7832,15 @@ function CalendarTimeline({
   resources,
   events,
   size = "md",
+  enableEventSheet,
+  eventSheetSize = "md",
+  renderEventSheet,
+  selectedEventId,
+  defaultSelectedEventId,
+  onSelectedEventIdChange,
+  eventSheetOpen,
+  defaultEventSheetOpen,
+  onEventSheetOpenChange,
   view,
   defaultView = "month",
   onViewChange,
@@ -7860,6 +7881,28 @@ function CalendarTimeline({
   const detectedLocale = useLocale();
   const resolvedLocale = React28.useMemo(() => localeToBCP47(locale ?? detectedLocale), [locale, detectedLocale]);
   const resolvedTimeZone = React28.useMemo(() => timeZone ?? Intl.DateTimeFormat().resolvedOptions().timeZone ?? "UTC", [timeZone]);
+  const effectiveEnableEventSheet = enableEventSheet ?? Boolean(renderEventSheet);
+  const isControlledSelectedEventId = selectedEventId !== void 0;
+  const [internalSelectedEventId, setInternalSelectedEventId] = React28.useState(defaultSelectedEventId ?? null);
+  const activeSelectedEventId = isControlledSelectedEventId ? selectedEventId : internalSelectedEventId;
+  const setSelectedEventId = React28.useCallback(
+    (next) => {
+      if (!isControlledSelectedEventId) setInternalSelectedEventId(next);
+      onSelectedEventIdChange?.(next);
+    },
+    [isControlledSelectedEventId, onSelectedEventIdChange]
+  );
+  const isControlledEventSheetOpen = eventSheetOpen !== void 0;
+  const [internalEventSheetOpen, setInternalEventSheetOpen] = React28.useState(defaultEventSheetOpen ?? false);
+  const activeEventSheetOpen = isControlledEventSheetOpen ? Boolean(eventSheetOpen) : internalEventSheetOpen;
+  const setEventSheetOpen = React28.useCallback(
+    (next) => {
+      if (!isControlledEventSheetOpen) setInternalEventSheetOpen(next);
+      onEventSheetOpenChange?.(next);
+      if (!next) setSelectedEventId(null);
+    },
+    [isControlledEventSheetOpen, onEventSheetOpenChange, setSelectedEventId]
+  );
   const sizeConfig = React28.useMemo(() => {
     const cfgBySize = {
       sm: {
@@ -8071,13 +8114,59 @@ function CalendarTimeline({
     }
     return map;
   }, [normalizedEvents]);
+  const resourceById = React28.useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    for (const r of resources) map.set(r.id, r);
+    return map;
+  }, [resources]);
+  const selectedEvent = React28.useMemo(() => {
+    if (!activeSelectedEventId) return null;
+    const found = normalizedEvents.find((e) => e.id === activeSelectedEventId);
+    return found ?? null;
+  }, [activeSelectedEventId, normalizedEvents]);
+  const selectedResource = React28.useMemo(() => {
+    if (!selectedEvent) return void 0;
+    return resourceById.get(selectedEvent.resourceId);
+  }, [resourceById, selectedEvent]);
+  const selectedTimeText = React28.useMemo(() => {
+    if (!selectedEvent) return "";
+    return formatters?.eventTime?.({
+      start: selectedEvent._start,
+      end: selectedEvent._end,
+      locale: resolvedLocale,
+      timeZone: resolvedTimeZone,
+      view: activeView
+    }) ?? defaultEventTime({ start: selectedEvent._start, end: selectedEvent._end, locale: resolvedLocale, timeZone: resolvedTimeZone, view: activeView });
+  }, [activeView, formatters, resolvedLocale, resolvedTimeZone, selectedEvent]);
+  React28.useEffect(() => {
+    if (!effectiveEnableEventSheet) return;
+    if (activeEventSheetOpen && activeSelectedEventId && !selectedEvent) {
+      setEventSheetOpen(false);
+    }
+  }, [activeEventSheetOpen, activeSelectedEventId, effectiveEnableEventSheet, selectedEvent, setEventSheetOpen]);
   const leftRef = React28.useRef(null);
   const bodyRef = React28.useRef(null);
   const headerRef = React28.useRef(null);
   useHorizontalScrollSync({ bodyRef, headerRef, leftRef });
   const title = React28.useMemo(() => {
-    return formatters?.monthTitle?.(activeDate, { locale: resolvedLocale, timeZone: resolvedTimeZone }) ?? defaultMonthTitle(activeDate, resolvedLocale, resolvedTimeZone);
-  }, [activeDate, formatters, resolvedLocale, resolvedTimeZone]);
+    if (activeView === "month") {
+      return formatters?.monthTitle?.(activeDate, { locale: resolvedLocale, timeZone: resolvedTimeZone }) ?? defaultMonthTitle(activeDate, resolvedLocale, resolvedTimeZone);
+    }
+    if (activeView === "week") {
+      const { week } = getIsoWeekInfo(range.start, resolvedTimeZone);
+      const fmt2 = getDtf(resolvedLocale, resolvedTimeZone, { month: "short", day: "numeric" });
+      const fmtYear = getDtf(resolvedLocale, resolvedTimeZone, { year: "numeric" });
+      const endInclusive = new Date(range.end.getTime() - 1);
+      const a = fmt2.format(range.start);
+      const b = fmt2.format(endInclusive);
+      const ya = fmtYear.format(range.start);
+      const yb = fmtYear.format(endInclusive);
+      const rangeText = ya === yb ? `${a} \u2013 ${b}, ${ya}` : `${a}, ${ya} \u2013 ${b}, ${yb}`;
+      return `${l.week} ${week} \u2022 ${rangeText}`;
+    }
+    const fmt = getDtf(resolvedLocale, resolvedTimeZone, { weekday: "long", year: "numeric", month: "long", day: "numeric" });
+    return fmt.format(range.start);
+  }, [activeDate, activeView, formatters, l.week, range.end, range.start, resolvedLocale, resolvedTimeZone]);
   const densityClass = sizeConfig.densityClass;
   const eventHeight = sizeConfig.eventHeight;
   const laneGap = sizeConfig.laneGap;
@@ -8103,10 +8192,9 @@ function CalendarTimeline({
       const body = bodyRef.current;
       if (!body) return null;
       const el = document.elementFromPoint(clientX, clientY);
-      const timelineEl = el?.closest?.("[data-uv-ct-timeline]");
-      if (!timelineEl) return null;
-      const timelineRect = timelineEl.getBoundingClientRect();
-      const x = clientX - timelineRect.left + body.scrollLeft;
+      if (!el || !body.contains(el)) return null;
+      const bodyRect = body.getBoundingClientRect();
+      const x = clientX - bodyRect.left + body.scrollLeft;
       const slotIdx = clamp3(Math.floor(x / slotWidth), 0, Math.max(0, slots.length - 1));
       const rowEl = el?.closest?.("[data-uv-ct-row]");
       const rid = rowEl?.dataset?.uvCtRow ?? null;
@@ -8494,7 +8582,14 @@ function CalendarTimeline({
                             ev.title ? /* @__PURE__ */ jsx33("span", { className: "font-semibold text-[11px] truncate leading-tight", children: ev.title }) : null,
                             /* @__PURE__ */ jsx33("span", { className: "text-[10px] opacity-70 truncate ml-auto", children: timeText })
                           ] });
-                          return /* @__PURE__ */ jsxs28(
+                          const resource = resourceById.get(ev.resourceId);
+                          const tooltipTitle = ev.title || ev.id;
+                          const tooltipContent = /* @__PURE__ */ jsxs28("div", { className: "flex flex-col gap-0.5", children: [
+                            /* @__PURE__ */ jsx33("div", { className: "font-semibold", children: tooltipTitle }),
+                            /* @__PURE__ */ jsx33("div", { className: "text-xs opacity-80", children: timeText }),
+                            resource?.label ? /* @__PURE__ */ jsx33("div", { className: "text-xs opacity-70", children: resource.label }) : null
+                          ] });
+                          return /* @__PURE__ */ jsx33(Tooltip, { content: tooltipContent, placement: "top", delay: { open: 250, close: 0 }, children: /* @__PURE__ */ jsxs28(
                             "div",
                             {
                               className: cn(
@@ -8517,7 +8612,13 @@ function CalendarTimeline({
                               role: "button",
                               tabIndex: 0,
                               "aria-label": aria,
-                              onClick: () => onEventClick?.(ev),
+                              onClick: () => {
+                                onEventClick?.(ev);
+                                if (effectiveEnableEventSheet) {
+                                  setSelectedEventId(ev.id);
+                                  setEventSheetOpen(true);
+                                }
+                              },
                               onDoubleClick: () => onEventDoubleClick?.(ev),
                               onPointerDown: (e) => onPointerDownEvent(e, ev, "move"),
                               children: [
@@ -8539,9 +8640,8 @@ function CalendarTimeline({
                                 ] }) : null,
                                 node
                               ]
-                            },
-                            ev.id
-                          );
+                            }
+                          ) }, ev.id);
                         }),
                         preview && preview.resourceId === r.id && !preview.eventId ? (() => {
                           const startIdx = binarySearchLastLE(slotStarts, preview.start);
@@ -8584,7 +8684,35 @@ function CalendarTimeline({
               ]
             }
           )
-        ] })
+        ] }),
+        effectiveEnableEventSheet && selectedEvent ? /* @__PURE__ */ jsx33(
+          Sheet,
+          {
+            open: activeEventSheetOpen,
+            onOpenChange: setEventSheetOpen,
+            side: "right",
+            size: eventSheetSize,
+            title: selectedEvent.title ?? "Event",
+            description: selectedTimeText || void 0,
+            children: renderEventSheet ? renderEventSheet({
+              event: selectedEvent,
+              resource: selectedResource,
+              close: () => setEventSheetOpen(false),
+              locale: resolvedLocale,
+              timeZone: resolvedTimeZone,
+              view: activeView
+            }) : /* @__PURE__ */ jsxs28("div", { className: "space-y-3", children: [
+              selectedResource?.label ? /* @__PURE__ */ jsxs28("div", { children: [
+                /* @__PURE__ */ jsx33("div", { className: "text-xs text-muted-foreground", children: t("resourcesHeader") }),
+                /* @__PURE__ */ jsx33("div", { className: "font-medium", children: selectedResource.label })
+              ] }) : null,
+              /* @__PURE__ */ jsxs28("div", { children: [
+                /* @__PURE__ */ jsx33("div", { className: "text-xs text-muted-foreground", children: "ID" }),
+                /* @__PURE__ */ jsx33("div", { className: "font-mono text-xs break-all", children: selectedEvent.id })
+              ] })
+            ] })
+          }
+        ) : null
       ]
     }
   );