sellmate-design-system-react 9.0.0-beta.67 → 9.0.0-beta.68

package/dist/index.js

@@ -4282,6 +4282,7 @@ var SButton = /* @__PURE__ */ forwardRef(function SButton2({
 });
 function SFooter({
   bg = "white",
+  size = "md",
   left,
   button,
   children,
@@ -4318,7 +4319,7 @@ function SFooter({
           SButton,
           {
             ...button,
-            size: "md",
+            size,
             color: button.color ?? "primary",
             label: button.label ?? "\uD655\uC778"
           }
@@ -4327,7 +4328,16 @@ function SFooter({
     }
   );
 }
-var SCard = /* @__PURE__ */ forwardRef(function SCard2({ bordered = false, footerLeft, button, footerClassName, className, children, ...rest }, ref) {
+var SCard = /* @__PURE__ */ forwardRef(function SCard2({
+  bordered = false,
+  footerLeft,
+  button,
+  footerSize = "md",
+  footerClassName,
+  className,
+  children,
+  ...rest
+}, ref) {
   const hasFooter = footerLeft != null || button != null;
   return /* @__PURE__ */ jsxs(
     "div",
@@ -4345,6 +4355,7 @@ var SCard = /* @__PURE__ */ forwardRef(function SCard2({ bordered = false, foote
           SFooter,
           {
             bg: "grey",
+            size: footerSize,
             left: footerLeft,
             button,
             className: cn("px-(--sys-space-panel-padding-default)", footerClassName)
@@ -7632,6 +7643,7 @@ var SSectionHeaderCardRootImpl = /* @__PURE__ */ forwardRef(
     background,
     footerLeft,
     button,
+    footerSize = "md",
     footerClassName,
     className,
     children,
@@ -7668,6 +7680,7 @@ var SSectionHeaderCardRootImpl = /* @__PURE__ */ forwardRef(
             SFooter,
             {
               bg: "grey",
+              size: footerSize,
               left: footerLeft,
               button,
               className: cn("px-(--cmp-sectionHeaderCard-header-paddingX)", footerClassName)
@@ -13976,7 +13989,8 @@ function layoutCalendarBoard({
   cells,
   events,
   rowCapacity,
-  blockedDates
+  blockedDates,
+  focusedEventId
 }) {
   const count = cells.length;
   const weekCount = Math.ceil(count / 7);
@@ -13984,6 +13998,7 @@ function layoutCalendarBoard({
   const eventsByCell = Array.from({ length: count }, () => []);
   const hiddenCountByCell = new Array(count).fill(0);
   const moreLaneByWeek = new Array(weekCount).fill(-1);
+  const moreReplacedByCell = new Array(count).fill(false);
   const runs = [];
   events.forEach((event, order) => {
     const start = event.date;
@@ -14041,9 +14056,15 @@ function layoutCalendarBoard({
     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;
+    let lane = run.lane;
+    if (lane >= limit) {
+      const focused = focusedEventId != null && run.event.id === focusedEventId && moreLane >= 0;
+      if (!focused) {
+        for (let i = run.startIndex; i <= run.endIndex; i++) hiddenCountByCell[i] += 1;
+        continue;
+      }
+      lane = moreLane;
+      for (let i = run.startIndex; i <= run.endIndex; i++) moreReplacedByCell[i] = true;
     }
     const { event } = run;
     segmentsByCell[run.startIndex].push({
@@ -14051,12 +14072,18 @@ function layoutCalendarBoard({
       key: `${event.id ?? `${event.date}-${run.order}`}-${run.startIndex}`,
       startIndex: run.startIndex,
       span: run.endIndex - run.startIndex + 1,
-      lane: run.lane,
+      lane,
       startsHere: cells[run.startIndex].date === event.date,
       endsHere: cells[run.endIndex].date === eventEndDate(event)
     });
   }
-  return { segmentsByCell, eventsByCell, hiddenCountByCell, moreLaneByWeek };
+  return {
+    segmentsByCell,
+    eventsByCell,
+    hiddenCountByCell,
+    moreLaneByWeek,
+    moreReplacedByCell
+  };
 }
 
 // src/components/SCalendarBoard/calendarBoard.config.ts
@@ -14086,6 +14113,7 @@ var CALENDAR_BOARD_EVENT_PRESETS = {
   white: { bg: BG("white"), dot: "grey" }
 };
 var CALENDAR_BOARD_MAX_VISIBLE_EVENTS = 4;
+var CALENDAR_BOARD_DIM_OPACITY = 0.4;
 var CALENDAR_BOARD_DAY_COLORS = [
   "default",
   "danger",
@@ -14105,6 +14133,7 @@ function CalendarEventButton({
   onSelect,
   flatStart = false,
   flatEnd = false,
+  dimmed = false,
   className,
   style
 }) {
@@ -14132,7 +14161,11 @@ function CalendarEventButton({
         disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer",
         className
       ),
-      style: { ...style, "--ceb-bg": preset.bg },
+      style: {
+        ...style,
+        "--ceb-bg": preset.bg,
+        ...dimmed && { opacity: CALENDAR_BOARD_DIM_OPACITY }
+      },
       onClick: (e) => {
         if (disabled) return;
         onSelect?.(event, e);
@@ -14176,7 +14209,7 @@ function CalendarEventButton({
     }
   );
 }
-var CalendarMoreButton = /* @__PURE__ */ forwardRef(function CalendarMoreButton2({ count, label = "\uB354\uBCF4\uAE30", onClick, className, style }, ref) {
+var CalendarMoreButton = /* @__PURE__ */ forwardRef(function CalendarMoreButton2({ count, label = "\uB354\uBCF4\uAE30", dimmed = false, onClick, className, style }, ref) {
   return /* @__PURE__ */ jsxs(
     "button",
     {
@@ -14189,7 +14222,7 @@ var CalendarMoreButton = /* @__PURE__ */ forwardRef(function CalendarMoreButton2
         "bg-(--cmp-calendarBoard-moreButton-bg)",
         className
       ),
-      style,
+      style: dimmed ? { ...style, opacity: CALENDAR_BOARD_DIM_OPACITY } : style,
       onClick,
       children: [
         /* @__PURE__ */ jsx(
@@ -14224,6 +14257,8 @@ var CalendarDayCard = /* @__PURE__ */ forwardRef(function CalendarDayCard2({
   body,
   hiddenCount,
   moreLane,
+  moreReplaced,
+  focusedEventId,
   isOpen,
   moreLabel,
   onDaySelect,
@@ -14231,6 +14266,7 @@ var CalendarDayCard = /* @__PURE__ */ forwardRef(function CalendarDayCard2({
   onOpenEvents,
   ...rest
 }, ref) {
+  const focusing = focusedEventId != null;
   const hasEvents = dayEventCount > 0;
   const interactive = selectable || hasEvents;
   const activate = () => {
@@ -14292,6 +14328,7 @@ var CalendarDayCard = /* @__PURE__ */ forwardRef(function CalendarDayCard2({
             event: segment.event,
             flatStart: !segment.startsHere,
             flatEnd: !segment.endsHere,
+            dimmed: focusing && segment.event.id !== focusedEventId,
             className: "absolute z-10",
             style: {
               top: laneTop(segment.lane),
@@ -14305,11 +14342,12 @@ var CalendarDayCard = /* @__PURE__ */ forwardRef(function CalendarDayCard2({
           },
           segment.key
         )),
-        body == null && hiddenCount > 0 && moreLane >= 0 && /* @__PURE__ */ jsx(
+        body == null && hiddenCount > 0 && moreLane >= 0 && !moreReplaced && /* @__PURE__ */ jsx(
           CalendarMoreButton,
           {
             count: hiddenCount,
             label: moreLabel,
+            dimmed: focusing,
             className: "absolute z-10",
             style: {
               top: laneTop(moreLane),
@@ -14407,6 +14445,7 @@ function SCalendarBoard({
   events,
   dayColors,
   dayContent,
+  focusedEventId,
   onEventClick,
   onMoreClick,
   todayLabel = "\uC624\uB298",
@@ -14457,8 +14496,14 @@ function SCalendarBoard({
     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]);
+    return layoutCalendarBoard({
+      cells,
+      events: events ?? [],
+      rowCapacity,
+      blockedDates,
+      focusedEventId
+    });
+  }, [cells, events, rowCapacity, dayContent, focusedEventId]);
   const openIndex = openDate == null ? -1 : cells.findIndex((cell) => cell.date === openDate);
   const openEvents = openIndex < 0 ? [] : layout.eventsByCell[openIndex];
   useLayoutEffect(() => {
@@ -14619,6 +14664,8 @@ function SCalendarBoard({
                         body: content,
                         hiddenCount: layout.hiddenCountByCell[index],
                         moreLane: layout.moreLaneByWeek[Math.floor(index / 7)],
+                        moreReplaced: layout.moreReplacedByCell[index],
+                        focusedEventId,
                         isOpen: openDate === cell.date,
                         moreLabel,
                         onDaySelect: (date) => onValueChange?.(date, list),