sellmate-design-system-react 9.0.0-beta.63 → 9.0.0-beta.64

package/dist/index.js

@@ -13689,6 +13689,98 @@ function monthCells(year, month) {
 }
 var WEEK_LABELS = ["\uC77C", "\uC6D4", "\uD654", "\uC218", "\uBAA9", "\uAE08", "\uD1A0"];
 
+// src/components/SCalendarBoard/calendar-board-layout.ts
+function eventEndDate(event) {
+  const end = event.endDate;
+  return end != null && end > event.date ? end : event.date;
+}
+function layoutCalendarBoard({
+  cells,
+  events,
+  rowCapacity,
+  blockedDates
+}) {
+  const count = cells.length;
+  const weekCount = Math.ceil(count / 7);
+  const segmentsByCell = Array.from({ length: count }, () => []);
+  const eventsByCell = Array.from({ length: count }, () => []);
+  const hiddenCountByCell = new Array(count).fill(0);
+  const moreLaneByWeek = new Array(weekCount).fill(-1);
+  const runs = [];
+  events.forEach((event, order) => {
+    const start = event.date;
+    const end = eventEndDate(event);
+    let from = -1;
+    let to = -1;
+    for (let i = 0; i < count; i++) {
+      const { date } = cells[i];
+      if (date < start || date > end) continue;
+      if (from < 0) from = i;
+      to = i;
+      if (!blockedDates.has(date)) eventsByCell[i].push(event);
+    }
+    if (from < 0) return;
+    let runStart = -1;
+    const flush = (endIndex) => {
+      if (runStart < 0) return;
+      runs.push({ event, order, startIndex: runStart, endIndex, lane: -1 });
+      runStart = -1;
+    };
+    for (let i = from; i <= to; i++) {
+      if (blockedDates.has(cells[i].date)) {
+        flush(i - 1);
+        continue;
+      }
+      if (runStart >= 0 && i % 7 === 0) flush(i - 1);
+      if (runStart < 0) runStart = i;
+    }
+    flush(to);
+  });
+  runs.sort(
+    (a, b) => a.startIndex - b.startIndex || b.endIndex - b.startIndex - (a.endIndex - a.startIndex) || a.order - b.order
+  );
+  const weekLanes = Array.from({ length: weekCount }, () => []);
+  for (const run of runs) {
+    const week = Math.floor(run.startIndex / 7);
+    const fromDay = run.startIndex % 7;
+    const toDay = run.endIndex % 7;
+    const lanes = weekLanes[week];
+    let lane = 0;
+    for (; ; ) {
+      if (lanes[lane] == null) lanes[lane] = new Array(7).fill(false);
+      let free = true;
+      for (let d = fromDay; d <= toDay && free; d++) if (lanes[lane][d]) free = false;
+      if (free) break;
+      lane += 1;
+    }
+    for (let d = fromDay; d <= toDay; d++) lanes[lane][d] = true;
+    run.lane = lane;
+  }
+  for (let week = 0; week < weekCount; week++) {
+    if (weekLanes[week].length > rowCapacity) moreLaneByWeek[week] = rowCapacity - 1;
+  }
+  for (const run of runs) {
+    const week = Math.floor(run.startIndex / 7);
+    const moreLane = moreLaneByWeek[week];
+    const limit = moreLane < 0 ? rowCapacity : moreLane;
+    if (run.lane >= limit) {
+      for (let i = run.startIndex; i <= run.endIndex; i++) hiddenCountByCell[i] += 1;
+      continue;
+    }
+    const { event } = run;
+    segmentsByCell[run.startIndex].push({
+      event,
+      key: `${event.id ?? `${event.date}-${run.order}`}-${run.startIndex}`,
+      startIndex: run.startIndex,
+      span: run.endIndex - run.startIndex + 1,
+      lane: run.lane,
+      startsHere: cells[run.startIndex].date === event.date,
+      endsHere: cells[run.endIndex].date === eventEndDate(event)
+    });
+  }
+  return { segmentsByCell, eventsByCell, hiddenCountByCell, moreLaneByWeek };
+}
+
 // src/components/SCalendarBoard/calendarBoard.config.ts
 var CALENDAR_BOARD_EVENT_COLORS = [
   "default",
@@ -13733,7 +13825,10 @@ var CALENDAR_BOARD_DAY_BG = {
 function CalendarEventButton({
   event,
   onSelect,
-  className
+  flatStart = false,
+  flatEnd = false,
+  className,
+  style
 }) {
   const preset = CALENDAR_BOARD_EVENT_PRESETS[event.color ?? "default"];
   const dot = event.dotColor ?? preset.dot;
@@ -13753,10 +13848,13 @@ function CalendarEventButton({
         "h-(--cmp-calendarBoard-item-height) shrink-0 rounded-(--cmp-calendarBoard-item-radius)",
         "gap-(--cmp-calendarBoard-eventButton-inline-gap) px-(--cmp-calendarBoard-item-paddingX)",
         "bg-(--ceb-bg) text-(--cmp-calendarBoard-eventButton-text-color-default)",
+        // 잘린 쪽은 평평하게 — 다음 조각과 이어 보면 한 막대가 주 경계에서 나뉜 모양이 된다.
+        flatStart && "rounded-s-none",
+        flatEnd && "rounded-e-none",
         disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer",
         className
       ),
-      style: { "--ceb-bg": preset.bg },
+      style: { ...style, "--ceb-bg": preset.bg },
       onClick: (e) => {
         if (disabled) return;
         onSelect?.(event, e);
@@ -13766,7 +13864,7 @@ function CalendarEventButton({
           "span",
           {
             "aria-hidden": true,
-            className: "pointer-events-none absolute inset-0 rounded-(--cmp-calendarBoard-item-radius) bg-(--cmp-calendarBoard-eventButton-hover-overlay-color) opacity-0 transition-opacity group-hover:opacity-(--cmp-calendarBoard-eventButton-hover-overlay-opacity)"
+            className: "pointer-events-none absolute inset-0 rounded-[inherit] bg-(--cmp-calendarBoard-eventButton-hover-overlay-color) opacity-0 transition-opacity group-hover:opacity-(--cmp-calendarBoard-eventButton-hover-overlay-opacity)"
           }
         ),
         /* @__PURE__ */ jsx(SBadge, { "aria-hidden": true, color: dot, className: "shrink-0" }),
@@ -13800,7 +13898,7 @@ function CalendarEventButton({
     }
   );
 }
-var CalendarMoreButton = /* @__PURE__ */ forwardRef(function CalendarMoreButton2({ count, label = "\uB354\uBCF4\uAE30", onClick, className }, ref) {
+var CalendarMoreButton = /* @__PURE__ */ forwardRef(function CalendarMoreButton2({ count, label = "\uB354\uBCF4\uAE30", onClick, className, style }, ref) {
   return /* @__PURE__ */ jsxs(
     "button",
     {
@@ -13813,6 +13911,7 @@ var CalendarMoreButton = /* @__PURE__ */ forwardRef(function CalendarMoreButton2
         "bg-(--cmp-calendarBoard-moreButton-bg)",
         className
       ),
+      style,
       onClick,
       children: [
         /* @__PURE__ */ jsx(
@@ -13831,6 +13930,9 @@ var CalendarMoreButton = /* @__PURE__ */ forwardRef(function CalendarMoreButton2
     }
   );
 });
+var HEADER_HEIGHT = "var(--cmp-calendarBoard-dayCard-header-paddingTop) + var(--cmp-calendarBoard-daySequence-size) + var(--cmp-calendarBoard-dayCard-header-paddingBottom)";
+var laneTop = (lane) => `calc(${HEADER_HEIGHT} + ${lane} * (var(--cmp-calendarBoard-item-height) + var(--cmp-calendarBoard-dayCard-grid-gap)))`;
+var spanWidth = (span) => `calc(${span} * 100% + ${span - 1}px - 2 * var(--cmp-calendarBoard-dayCard-paddingX))`;
 var CalendarDayCard = /* @__PURE__ */ forwardRef(function CalendarDayCard2({
   date,
   day,
@@ -13839,9 +13941,11 @@ var CalendarDayCard = /* @__PURE__ */ forwardRef(function CalendarDayCard2({
   isSelected,
   selectable,
   color,
-  events,
+  segments,
+  dayEventCount,
   body,
   hiddenCount,
+  moreLane,
   isOpen,
   moreLabel,
   onDaySelect,
@@ -13849,7 +13953,7 @@ var CalendarDayCard = /* @__PURE__ */ forwardRef(function CalendarDayCard2({
   onOpenEvents,
   ...rest
 }, ref) {
-  const hasEvents = events.length + hiddenCount > 0;
+  const hasEvents = dayEventCount > 0;
   const interactive = selectable || hasEvents;
   const activate = () => {
     if (hasEvents) onOpenEvents?.();
@@ -13884,7 +13988,7 @@ var CalendarDayCard = /* @__PURE__ */ forwardRef(function CalendarDayCard2({
           "span",
           {
             "aria-hidden": true,
-            className: "pointer-events-none absolute inset-[1px] rounded-(--cmp-calendarBoard-dayCard-focus-border-radius) border-(length:--cmp-calendarBoard-dayCard-focus-border-width) border-solid border-(--cmp-calendarBoard-dayCard-focus-border-color)"
+            className: "pointer-events-none absolute inset-[1px] z-20 rounded-(--cmp-calendarBoard-dayCard-focus-border-radius) border-(length:--cmp-calendarBoard-dayCard-focus-border-width) border-solid border-(--cmp-calendarBoard-dayCard-focus-border-color)"
           }
         ),
         /* @__PURE__ */ jsx("div", { className: "flex shrink-0 pt-(--cmp-calendarBoard-dayCard-header-paddingTop) pb-(--cmp-calendarBoard-dayCard-header-paddingBottom)", children: /* @__PURE__ */ jsx(
@@ -13903,39 +14007,41 @@ var CalendarDayCard = /* @__PURE__ */ forwardRef(function CalendarDayCard2({
             children: day
           }
         ) }),
-        /* @__PURE__ */ jsxs(
-          "div",
+        body != null && /* @__PURE__ */ jsx("div", { className: "flex min-h-0 flex-1 flex-col pb-(--cmp-calendarBoard-dayCard-grid-paddingBottom)", children: body }),
+        body == null && segments.map((segment) => /* @__PURE__ */ jsx(
+          CalendarEventButton,
           {
-            className: cn(
-              "flex min-h-0 flex-col gap-(--cmp-calendarBoard-dayCard-grid-gap) pb-(--cmp-calendarBoard-dayCard-grid-paddingBottom)",
-              // 슬롯은 남는 세로를 다 갖는다 — 안에서 h-full 로 칸을 채울 수 있어야 한다.
-              body != null && "flex-1"
-            ),
-            children: [
-              body,
-              body == null && events.map((event, i) => /* @__PURE__ */ jsx(
-                CalendarEventButton,
-                {
-                  event,
-                  onSelect: (ev, e) => {
-                    e.stopPropagation();
-                    onEventClick?.(ev, e);
-                  }
-                },
-                event.id ?? `${event.date}-${i}`
-              )),
-              hiddenCount > 0 && /* @__PURE__ */ jsx(
-                CalendarMoreButton,
-                {
-                  count: hiddenCount,
-                  label: moreLabel,
-                  onClick: (e) => {
-                    e.stopPropagation();
-                    onOpenEvents?.();
-                  }
-                }
-              )
-            ]
+            event: segment.event,
+            flatStart: !segment.startsHere,
+            flatEnd: !segment.endsHere,
+            className: "absolute z-10",
+            style: {
+              top: laneTop(segment.lane),
+              left: "var(--cmp-calendarBoard-dayCard-paddingX)",
+              width: spanWidth(segment.span)
+            },
+            onSelect: (ev, e) => {
+              e.stopPropagation();
+              onEventClick?.(ev, e);
+            }
+          },
+          segment.key
+        )),
+        body == null && hiddenCount > 0 && moreLane >= 0 && /* @__PURE__ */ jsx(
+          CalendarMoreButton,
+          {
+            count: hiddenCount,
+            label: moreLabel,
+            className: "absolute z-10",
+            style: {
+              top: laneTop(moreLane),
+              left: "var(--cmp-calendarBoard-dayCard-paddingX)",
+              width: spanWidth(1)
+            },
+            onClick: (e) => {
+              e.stopPropagation();
+              onOpenEvents?.();
+            }
           }
         )
       ]
@@ -14069,16 +14175,14 @@ function SCalendarBoard({
     observer.observe(cell);
     return () => observer.disconnect();
   }, [rowCount]);
-  const eventMap = useMemo(() => {
-    const map = /* @__PURE__ */ new Map();
-    (events ?? []).forEach((event) => {
-      const list = map.get(event.date);
-      if (list) list.push(event);
-      else map.set(event.date, [event]);
-    });
-    return map;
-  }, [events]);
-  const openEvents = openDate ? eventMap.get(openDate) ?? [] : [];
+  const layout = useMemo(() => {
+    const blockedDates = new Set(
+      cells.filter((cell) => dayContent?.[cell.date] != null).map((cell) => cell.date)
+    );
+    return layoutCalendarBoard({ cells, events: events ?? [], rowCapacity, blockedDates });
+  }, [cells, events, rowCapacity, dayContent]);
+  const openIndex = openDate == null ? -1 : cells.findIndex((cell) => cell.date === openDate);
+  const openEvents = openIndex < 0 ? [] : layout.eventsByCell[openIndex];
   useLayoutEffect(() => {
     if (openDate == null || panelEl == null) return;
     const cell = gridRef.current?.querySelector(`[data-date="${openDate}"]`);
@@ -14219,11 +14323,9 @@ function SCalendarBoard({
                     // 행은 판 높이를 균등하게 나눠 갖는다 — 일정이 많은 주만 길어지면 격자가 깨진다.
                     gridTemplateRows: `repeat(${rowCount}, minmax(var(--cmp-calendarBoard-dayCard-minHeight), 1fr))`
                   },
-                  children: cells.map((cell) => {
+                  children: cells.map((cell, index) => {
                     const content = dayContent?.[cell.date];
-                    const list = content == null ? eventMap.get(cell.date) ?? [] : [];
-                    const folded = list.length > rowCapacity;
-                    const visible = folded ? list.slice(0, rowCapacity - 1) : list;
+                    const list = layout.eventsByCell[index];
                     const card = /* @__PURE__ */ jsx(
                       CalendarDayCard,
                       {
@@ -14234,9 +14336,11 @@ function SCalendarBoard({
                         isSelected: value != null && value === cell.date,
                         selectable,
                         color: dayColors?.[cell.date] ?? "default",
-                        events: visible,
+                        segments: layout.segmentsByCell[index],
+                        dayEventCount: list.length,
                         body: content,
-                        hiddenCount: folded ? list.length - (rowCapacity - 1) : 0,
+                        hiddenCount: layout.hiddenCountByCell[index],
+                        moreLane: layout.moreLaneByWeek[Math.floor(index / 7)],
                         isOpen: openDate === cell.date,
                         moreLabel,
                         onDaySelect: (date) => onValueChange?.(date, list),