@underverse-ui/underverse 0.2.92 → 0.2.93

package/dist/index.cjs

@@ -6600,6 +6600,13 @@ function Calendar2({
   maxEventsPerDay = 3,
   onEventClick,
   renderEvent,
+  enableEventSheet,
+  eventSheetSize = "md",
+  renderEventSheet,
+  selectedEventId,
+  eventSheetOpen,
+  onEventSheetOpenChange,
+  onSelectedEventIdChange,
   ...rest
 }) {
   const isControlledMonth = month != null;
@@ -6630,6 +6637,60 @@ function Calendar2({
     }
     return map;
   }, [events]);
+  const effectiveEnableEventSheet = enableEventSheet ?? !!renderEventSheet;
+  const isEventSheetOpenControlled = eventSheetOpen !== void 0;
+  const [internalEventSheetOpen, setInternalEventSheetOpen] = React24.useState(false);
+  const activeEventSheetOpen = isEventSheetOpenControlled ? !!eventSheetOpen : internalEventSheetOpen;
+  const isSelectedEventControlled = selectedEventId !== void 0;
+  const [internalSelectedEventRef, setInternalSelectedEventRef] = React24.useState(null);
+  const setEventSheetOpen = React24.useCallback(
+    (open) => {
+      if (!isEventSheetOpenControlled) setInternalEventSheetOpen(open);
+      onEventSheetOpenChange?.(open);
+      if (!open) {
+        if (!isSelectedEventControlled) setInternalSelectedEventRef(null);
+        onSelectedEventIdChange?.(void 0);
+      }
+    },
+    [isEventSheetOpenControlled, isSelectedEventControlled, onEventSheetOpenChange, onSelectedEventIdChange]
+  );
+  const selectedEventRef = React24.useMemo(() => {
+    if (isSelectedEventControlled && selectedEventId != null) {
+      const ev = events.find((e) => e.id === selectedEventId);
+      if (!ev) return null;
+      const d = toDate(ev.date);
+      const dayKey = `${d.getFullYear()}-${d.getMonth()}-${d.getDate()}`;
+      return { dayKey, eventId: selectedEventId };
+    }
+    return internalSelectedEventRef;
+  }, [events, internalSelectedEventRef, isSelectedEventControlled, selectedEventId]);
+  const selectedEvent = React24.useMemo(() => {
+    if (!selectedEventRef) return null;
+    const list = byDay.get(selectedEventRef.dayKey) || [];
+    if (selectedEventRef.eventId != null) {
+      return list.find((e) => e.id === selectedEventRef.eventId) || null;
+    }
+    const idx = selectedEventRef.index ?? -1;
+    return idx >= 0 && idx < list.length ? list[idx] : null;
+  }, [byDay, selectedEventRef]);
+  const selectedEventDate = React24.useMemo(() => {
+    if (!selectedEventRef) return null;
+    const [y, m, d] = selectedEventRef.dayKey.split("-").map((x) => Number(x));
+    if (!Number.isFinite(y) || !Number.isFinite(m) || !Number.isFinite(d)) return null;
+    return new Date(y, m, d);
+  }, [selectedEventRef]);
+  const handleEventActivate = React24.useCallback(
+    (event, date, dayKey, index) => {
+      onEventClick?.(event, date);
+      onSelectedEventIdChange?.(event.id ?? void 0);
+      if (!effectiveEnableEventSheet) return;
+      if (!isSelectedEventControlled) {
+        setInternalSelectedEventRef({ dayKey, eventId: event.id, index });
+      }
+      setEventSheetOpen(true);
+    },
+    [effectiveEnableEventSheet, isSelectedEventControlled, onEventClick, onSelectedEventIdChange, setEventSheetOpen]
+  );
   const isSelected = (d) => {
     if (!selected) return false;
     if (selectMode === "single" && selected instanceof Date) return isSameDay(selected, d);
@@ -6773,7 +6834,7 @@ function Calendar2({
                       "button",
                       {
                         type: "button",
-                        onClick: () => onEventClick?.(e, d),
+                        onClick: () => handleEventActivate(e, d, k, i),
                         className: cn(
                           "w-full text-left rounded-lg px-2 py-1",
                           "transition-colors duration-150 hover:bg-accent/60 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40",
@@ -6937,7 +6998,7 @@ function Calendar2({
                       "button",
                       {
                         type: "button",
-                        onClick: () => onEventClick?.(e, d),
+                        onClick: () => handleEventActivate(e, d, k, i),
                         className: cn(
                           "w-full text-left rounded-lg px-2 py-1",
                           "transition-colors duration-150 hover:bg-accent/60 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40",
@@ -6987,7 +7048,32 @@ function Calendar2({
           `wd-${idx}`
         );
       }) })
-    ] }) : /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: cn(months > 1 ? "grid md:grid-cols-2 lg:grid-cols-3 gap-4" : ""), children: Array.from({ length: Math.max(1, months) }, (_, i) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(React24.Fragment, { children: renderMonth(addMonths(view, i)) }, `cal-month-${view.getFullYear()}-${view.getMonth()}-${i}`)) })
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: cn(months > 1 ? "grid md:grid-cols-2 lg:grid-cols-3 gap-4" : ""), children: Array.from({ length: Math.max(1, months) }, (_, i) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(React24.Fragment, { children: renderMonth(addMonths(view, i)) }, `cal-month-${view.getFullYear()}-${view.getMonth()}-${i}`)) }),
+    effectiveEnableEventSheet && selectedEvent && selectedEventDate ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+      Sheet,
+      {
+        open: activeEventSheetOpen,
+        onOpenChange: setEventSheetOpen,
+        side: "right",
+        size: eventSheetSize,
+        title: selectedEvent.title ?? "Event",
+        description: selectedEventDate.toDateString(),
+        children: renderEventSheet ? renderEventSheet({ event: selectedEvent, date: selectedEventDate, close: () => setEventSheetOpen(false) }) : /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "space-y-3", children: [
+          selectedEvent.id != null ? /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "text-xs text-muted-foreground", children: "ID" }),
+            /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "font-mono text-xs break-all", children: String(selectedEvent.id) })
+          ] }) : null,
+          selectedEvent.badge ? /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "text-xs text-muted-foreground", children: "Badge" }),
+            /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "text-sm", children: selectedEvent.badge })
+          ] }) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "h-3 w-3 rounded-full", style: { backgroundColor: selectedEvent.color || "hsl(var(--primary))" } }),
+            /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "text-sm text-muted-foreground", children: "Color" })
+          ] })
+        ] })
+      }
+    ) : null
   ] });
 }