@pisell/materials 6.11.48 → 6.11.50

package/lib/components/pisellRecordBoard/PisellRecordBoard.js

@@ -103,6 +103,7 @@ function getDefaultRecordBoardContext(layoutType, selection, rowKey) {
   };
 }
 var PisellRecordBoard = (props) => {
+  var _a;
   const {
     children,
     layoutType = "grid",
@@ -187,8 +188,8 @@ var PisellRecordBoard = (props) => {
     bodyView
   ]);
   const [internalColumnVisibility, setInternalColumnVisibility] = (0, import_react.useState)(() => {
-    var _a, _b;
-    const fromConfig = ((_a = props.grid) == null ? void 0 : _a.defaultHiddenColumnKeys) ?? [];
+    var _a2, _b;
+    const fromConfig = ((_a2 = props.grid) == null ? void 0 : _a2.defaultHiddenColumnKeys) ?? [];
     const fromColumns = (((_b = props.grid) == null ? void 0 : _b.columns) ?? []).filter(
       (col) => col.hidden === true
     ).map((col) => (0, import_recordBoardColumns.getRecordBoardColumnKey)(col)).filter(Boolean);
@@ -247,6 +248,7 @@ var PisellRecordBoard = (props) => {
     setInternalColumnOrder(columnKeys);
   }, []);
   const contextValue = (0, import_react.useMemo)(() => {
+    var _a2;
     const defaultCtx = getDefaultRecordBoardContext(
       layoutType,
       {
@@ -257,6 +259,7 @@ var PisellRecordBoard = (props) => {
       rowKeyProp
     );
     const pagination = paginationProp !== void 0 ? paginationProp : defaultCtx.pagination;
+    const gridInfiniteScroll = ((_a2 = props.grid) == null ? void 0 : _a2.infiniteScroll) === true;
     let data;
     let total;
     if (dataProp !== void 0) {
@@ -267,8 +270,13 @@ var PisellRecordBoard = (props) => {
       total = totalProp !== void 0 ? totalProp : raw.length;
       const { pageNumber, pageSize } = pagination;
       const safeSize = Math.max(1, pageSize);
-      const start = Math.max(0, (pageNumber - 1) * safeSize);
-      data = raw.slice(start, start + safeSize);
+      if (gridInfiniteScroll) {
+        const end = Math.min(raw.length, pageNumber * safeSize);
+        data = raw.slice(0, end);
+      } else {
+        const start = Math.max(0, (pageNumber - 1) * safeSize);
+        data = raw.slice(start, start + safeSize);
+      }
     } else {
       data = defaultCtx.data;
       total = totalProp !== void 0 ? totalProp : defaultCtx.total;
@@ -325,7 +333,8 @@ var PisellRecordBoard = (props) => {
        * 业务方传入的自定义分页渲染：注入 ctx 后，shellFrame 内置的
        * `<RecordBoardPagination />` 会优先使用它（详见 RecordBoardPagination 实现）。
        */
-      paginationRender: props.paginationRender
+      paginationRender: props.paginationRender,
+      gridInfiniteScroll
     };
   }, [
     layoutType,
@@ -361,7 +370,8 @@ var PisellRecordBoard = (props) => {
     resourceWallProp,
     bodyView,
     setBodyView,
-    props.paginationRender
+    props.paginationRender,
+    (_a = props.grid) == null ? void 0 : _a.infiniteScroll
   ]);
   const content = /* @__PURE__ */ import_react.default.createElement(import_RecordBoardProvider.RecordBoardProvider, { value: contextValue }, children);
   return /* @__PURE__ */ import_react.default.createElement(

package/lib/components/pisellRecordBoard/layouts/GridLayout/Grid.js

@@ -72,7 +72,10 @@ var CONTEXT_ONLY_KEYS = [
   "setScrollAreaHeight",
   "collapseUniformColumns",
   "columnOrder",
-  "onColumnOrderChange"
+  "onColumnOrderChange",
+  "gridInfiniteScroll",
+  "infiniteScroll",
+  "paginationRender"
 ];
 var RecordBoardGridView = (props) => {
   const ctx = (0, import_useRecordBoardContext.useRecordBoardContext)({ displayName: "grid" });
@@ -186,6 +189,7 @@ var RecordBoardGridView = (props) => {
   const gridTableProps = (0, import_react.useMemo)(() => {
     const picked = {};
     Object.keys(ctx).forEach((k) => {
+      if (k === "onScroll") return;
       if (CONTEXT_ONLY_KEYS.includes(
         k
       ))
@@ -205,6 +209,7 @@ var RecordBoardGridView = (props) => {
       0
     ) || 2e3;
   }, [columns]);
+  const gridInfiniteScroll = ctx.gridInfiniteScroll === true;
   const tableScroll = (0, import_react.useMemo)(() => {
     const scroll = rest.scroll ?? ctx.scroll;
     const scrollX = isEmpty && scroll && typeof scroll.x !== "number" ? sumColumnWidths : scroll == null ? void 0 : scroll.x;
@@ -214,7 +219,7 @@ var RecordBoardGridView = (props) => {
       return {
         x: scrollX ?? sumColumnWidths,
         y: Math.max(wrapHeight - reservedHeight, 100),
-        scrollToFirstRowOnChange: scroll.scrollToFirstRowOnChange
+        scrollToFirstRowOnChange: gridInfiniteScroll ? false : scroll.scrollToFirstRowOnChange
       };
     }
     if (scroll && typeof scroll === "object") {
@@ -223,7 +228,8 @@ var RecordBoardGridView = (props) => {
       if (resolved) {
         return {
           ...resolved,
-          x: scrollX ?? resolved.x ?? sumColumnWidths
+          x: scrollX ?? resolved.x ?? sumColumnWidths,
+          ...gridInfiniteScroll ? { scrollToFirstRowOnChange: false } : {}
         };
       }
       return resolved;
@@ -237,36 +243,187 @@ var RecordBoardGridView = (props) => {
     columns,
     sumColumnWidths,
     isEmpty,
-    uniformSummaryHeight
+    uniformSummaryHeight,
+    gridInfiniteScroll
   ]);
-  return /* @__PURE__ */ import_react.default.createElement("div", { "data-layout-slot": "grid", className: "pisell-lowcode-record-board-grid" }, summaryItems.length > 0 && /* @__PURE__ */ import_react.default.createElement("div", { ref: summaryRef, className: "pisell-record-board-uniform-summary" }, summaryItems.map((item) => {
-    const processedCol = processedColumnsForSummary == null ? void 0 : processedColumnsForSummary.find(
-      (c) => (0, import_recordBoardColumns.getRecordBoardColumnKey)(c) === item.columnKey
-    );
-    const useRender = typeof (processedCol == null ? void 0 : processedCol.render) === "function";
-    const content = useRender ? processedCol.render(item.cellValue, item.record ?? {}, 0) : item.type === "empty" ? (0, import_locales.getText)("record-board-uniform-summary-empty") : item.displayValue ?? (0, import_locales.getText)("record-board-uniform-summary-same");
-    return /* @__PURE__ */ import_react.default.createElement(
-      "div",
-      {
-        key: item.columnKey,
-        className: "pisell-record-board-uniform-summary-item"
-      },
-      /* @__PURE__ */ import_react.default.createElement("span", { className: "pisell-record-board-uniform-summary-label" }, item.title),
-      /* @__PURE__ */ import_react.default.createElement("span", { className: "pisell-record-board-uniform-summary-value" }, content)
-    );
-  })), /* @__PURE__ */ import_react.default.createElement(
-    import_antd.Table,
-    {
-      ...rest,
-      ...gridTableProps,
-      scroll: tableScroll,
-      rowKey: tableRowKey,
-      dataSource: ctx.data ?? [],
-      loading: ctx.loading,
-      columns,
-      rowSelection,
-      pagination: false
+  const infiniteLoadLockRef = (0, import_react.useRef)(false);
+  const [infiniteScrollFetching, setInfiniteScrollFetching] = (0, import_react.useState)(false);
+  (0, import_react.useEffect)(() => {
+    if (!ctx.loading) {
+      infiniteLoadLockRef.current = false;
     }
-  ));
+  }, [ctx.loading, dataSource.length]);
+  (0, import_react.useEffect)(() => {
+    setInfiniteScrollFetching(false);
+  }, [dataSource.length]);
+  const gridWrapRef = (0, import_react.useRef)(null);
+  const ctxRef = (0, import_react.useRef)(ctx);
+  ctxRef.current = ctx;
+  const restRef = (0, import_react.useRef)(rest);
+  restRef.current = rest;
+  const gridInfiniteRef = (0, import_react.useRef)(false);
+  gridInfiniteRef.current = gridInfiniteScroll;
+  (0, import_react.useEffect)(() => {
+    if (!gridInfiniteScroll) return;
+    const root = gridWrapRef.current;
+    if (!root) {
+      return;
+    }
+    const handler = (e) => {
+      var _a, _b;
+      const r = restRef.current;
+      const c = ctxRef.current;
+      const ev = e;
+      (_a = r.onScroll) == null ? void 0 : _a.call(r, ev);
+      (_b = c.onScroll) == null ? void 0 : _b.call(
+        c,
+        ev
+      );
+      if (!gridInfiniteRef.current) return;
+      if (c.loading || infiniteLoadLockRef.current) {
+        return;
+      }
+      const st = e.currentTarget ?? e.target;
+      const dataLen = (c.data ?? []).length;
+      const tot = c.total ?? 0;
+      const { scrollTop, clientHeight, scrollHeight } = st;
+      const dist = scrollHeight - scrollTop - clientHeight;
+      if (dataLen >= tot) {
+        return;
+      }
+      if (dist > 48) return;
+      infiniteLoadLockRef.current = true;
+      setInfiniteScrollFetching(true);
+      c.onPageChange(c.pagination.pageNumber + 1, c.pagination.pageSize);
+    };
+    const listScrollTargets = (r) => {
+      const out = [];
+      const seen = /* @__PURE__ */ new Set();
+      const add = (el) => {
+        if (el && !seen.has(el)) {
+          seen.add(el);
+          out.push(el);
+        }
+      };
+      r.querySelectorAll(".ant-table-body, .pisell-lowcode-table-body").forEach(
+        (n) => add(n)
+      );
+      add(r.closest(".pisell-record-board-scroll-body"));
+      return out;
+    };
+    const cleanups = [];
+    const bind = () => {
+      cleanups.forEach((fn) => fn());
+      cleanups.length = 0;
+      const targets = listScrollTargets(root);
+      targets.forEach((el) => {
+        el.addEventListener("scroll", handler, { passive: true });
+        cleanups.push(() => el.removeEventListener("scroll", handler));
+      });
+    };
+    const t0 = window.setTimeout(() => bind(), 0);
+    const t1 = window.setTimeout(() => bind(), 120);
+    const t2 = window.setTimeout(() => bind(), 400);
+    return () => {
+      clearTimeout(t0);
+      clearTimeout(t1);
+      clearTimeout(t2);
+      cleanups.forEach((fn) => fn());
+    };
+  }, [
+    gridInfiniteScroll,
+    dataSource.length,
+    isEmpty,
+    ctx.scrollAreaHeight,
+    columns,
+    summaryItems.length
+  ]);
+  const tableRest = (0, import_react.useMemo)(() => {
+    if (!gridInfiniteScroll) return rest;
+    const { onScroll: _onScroll, ...r } = rest;
+    return r;
+  }, [gridInfiniteScroll, rest]);
+  const userGridSummary = gridTableProps.summary;
+  const infiniteSummaryColSpan = (0, import_react.useMemo)(() => {
+    const n = Array.isArray(columns) ? columns.length : 1;
+    return n + (rowSelection ? 1 : 0);
+  }, [columns, rowSelection]);
+  const mergedTableSummary = (0, import_react.useMemo)(() => {
+    if (!gridInfiniteScroll) {
+      return userGridSummary;
+    }
+    return (pageData) => {
+      const userNode = typeof userGridSummary === "function" ? userGridSummary(pageData) : userGridSummary;
+      const len = (ctx.data ?? []).length;
+      const tot = ctx.total;
+      const loading = !!ctx.loading;
+      const loadingMore = loading || infiniteScrollFetching;
+      const showBar = len > 0 || loadingMore;
+      if (!showBar && !userNode) {
+        return null;
+      }
+      const hasMore = tot == null || typeof tot !== "number" ? true : len < tot;
+      const allLoaded = typeof tot === "number" && tot > 0 && len > 0 && len >= tot;
+      let statusInner = null;
+      if (showBar) {
+        if (allLoaded) {
+          statusInner = /* @__PURE__ */ import_react.default.createElement("span", { className: "pisell-record-board-infinite-scroll-tip-done" }, (0, import_locales.getText)("record-board-infinite-scroll-all-loaded"));
+        } else if (hasMore && len > 0) {
+          statusInner = /* @__PURE__ */ import_react.default.createElement("span", { className: "pisell-record-board-infinite-scroll-tip-loading" }, /* @__PURE__ */ import_react.default.createElement(import_antd.Spin, { size: "small" }), /* @__PURE__ */ import_react.default.createElement("span", null, (0, import_locales.getText)("record-board-infinite-scroll-loading-more")));
+        }
+      }
+      const statusBlock = statusInner != null ? /* @__PURE__ */ import_react.default.createElement(import_antd.Table.Summary, { fixed: "bottom" }, /* @__PURE__ */ import_react.default.createElement(import_antd.Table.Summary.Row, { className: "pisell-record-board-infinite-scroll-summary-row" }, /* @__PURE__ */ import_react.default.createElement(import_antd.Table.Summary.Cell, { index: 0, colSpan: infiniteSummaryColSpan, align: "left" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-record-board-infinite-scroll-tip" }, statusInner)))) : null;
+      if (!userNode && !statusBlock) return null;
+      return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, userNode, statusBlock);
+    };
+  }, [
+    gridInfiniteScroll,
+    userGridSummary,
+    infiniteSummaryColSpan,
+    ctx.data,
+    ctx.total,
+    ctx.loading,
+    infiniteScrollFetching
+  ]);
+  const { summary: _userSummaryOmitted, ...gridTablePropsWithoutSummary } = gridTableProps;
+  return /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      ref: gridWrapRef,
+      "data-layout-slot": "grid",
+      className: "pisell-lowcode-record-board-grid"
+    },
+    summaryItems.length > 0 && /* @__PURE__ */ import_react.default.createElement("div", { ref: summaryRef, className: "pisell-record-board-uniform-summary" }, summaryItems.map((item) => {
+      const processedCol = processedColumnsForSummary == null ? void 0 : processedColumnsForSummary.find(
+        (c) => (0, import_recordBoardColumns.getRecordBoardColumnKey)(c) === item.columnKey
+      );
+      const useRender = typeof (processedCol == null ? void 0 : processedCol.render) === "function";
+      const content = useRender ? processedCol.render(item.cellValue, item.record ?? {}, 0) : item.type === "empty" ? (0, import_locales.getText)("record-board-uniform-summary-empty") : item.displayValue ?? (0, import_locales.getText)("record-board-uniform-summary-same");
+      return /* @__PURE__ */ import_react.default.createElement(
+        "div",
+        {
+          key: item.columnKey,
+          className: "pisell-record-board-uniform-summary-item"
+        },
+        /* @__PURE__ */ import_react.default.createElement("span", { className: "pisell-record-board-uniform-summary-label" }, item.title),
+        /* @__PURE__ */ import_react.default.createElement("span", { className: "pisell-record-board-uniform-summary-value" }, content)
+      );
+    })),
+    /* @__PURE__ */ import_react.default.createElement(
+      import_antd.Table,
+      {
+        ...tableRest,
+        ...gridTablePropsWithoutSummary,
+        summary: mergedTableSummary,
+        scroll: tableScroll,
+        rowKey: tableRowKey,
+        dataSource: ctx.data ?? [],
+        loading: ctx.loading,
+        columns,
+        rowSelection,
+        pagination: false
+      }
+    )
+  );
 };
 var Grid_default = RecordBoardGridView;

package/lib/components/pisellRecordBoard/layouts/GridLayout/Grid.less

@@ -111,3 +111,34 @@
 .pisell-record-board-row-cancelled {
   background: #fff1f0;
 }
+
+// 无限滚动：表尾 Table.Summary 一行，文案靠左
+// 不再加 border-top：上方数据行已有 border-bottom，再画 top 会与 antd 格线叠成双线
+.pisell-record-board-infinite-scroll-summary-row > .pisell-lowcode-table-cell,
+.pisell-record-board-infinite-scroll-summary-row > .ant-table-cell {
+  background: var(--ant-color-bg-container, #ffffff) !important;
+  border-top: none !important;
+  text-align: left !important;
+  vertical-align: middle;
+  padding: 8px 12px !important;
+}
+
+.pisell-record-board-infinite-scroll-tip {
+  display: inline-flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 8px;
+  font-size: 12px;
+  line-height: 18px;
+}
+
+.pisell-record-board-infinite-scroll-tip-loading {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  color: #475467;
+}
+
+.pisell-record-board-infinite-scroll-tip-done {
+  color: #667085;
+}

package/lib/components/pisellRecordBoard/shellFrame/Calendar/BookingCalendar.js

@@ -358,6 +358,8 @@ function BookingCalendar(props = {}) {
   function goToDayFromCell(day, courtId, source) {
     setNavDirection(day > anchorDate ? 1 : -1);
     setTransitioningToDay({ source });
+    setSelectedFreeSlots([]);
+    setSelectedBlockSlots([]);
     commitAnchor(day);
     setFocusedCourtId(courtId || null);
     commitView("day");

package/lib/components/pisellRecordBoard/shellFrame/Calendar/BookingCalendar.less

@@ -321,3 +321,12 @@
   background: var(--brand-primary);
   color: #fff;
 }
+
+/** 周视图左侧资源名 / 分组名：最多两行，超出省略（供 BookingCalendarWeekView 使用） */
+.pisell-rb-cal-week-resource-name {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+  word-break: break-word;
+}

package/lib/components/pisellRecordBoard/shellFrame/Calendar/const/bookingCalendarConstants.js

@@ -49,8 +49,8 @@ var timeSliceMinutes = 60;
 var DEFAULT_CALENDAR_TIMELINE = { start: "02:00", end: "02:00" };
 var frozenColWidth = 132;
 var dayColWidth = 92;
-var dayRowHeight = 122;
-var groupRowHeight = 54;
+var dayRowHeight = 72;
+var groupRowHeight = 40;
 var dayHeaderHeight = 56;
 var DAY_OVERLAY_LANE_MIN_PX = 64;
 var DAY_OVERLAY_INNER_TOP = 8;

package/lib/components/pisellRecordBoard/shellFrame/Calendar/view/BookingCalendarDayView.js

@@ -222,11 +222,20 @@ function BookingCalendarDayView(dayProps) {
   (0, import_react.useEffect)(() => {
     if (!focusedCourtId || !dayScrollRef.current) return;
     const timer = setTimeout(() => {
-      var _a2;
-      const el = (_a2 = dayScrollRef.current) == null ? void 0 : _a2.querySelector(
+      const root = dayScrollRef.current;
+      if (!root) return;
+      const el = root.querySelector(
         `[data-court-row="${focusedCourtId}"]`
       );
-      if (el) el.scrollIntoView({ behavior: "smooth", block: "start" });
+      if (!el) return;
+      const rootRect = root.getBoundingClientRect();
+      const rowRect = el.getBoundingClientRect();
+      const targetTop = rootRect.top + import_bookingCalendarConstants.dayHeaderHeight;
+      const desiredTop = root.scrollTop + (rowRect.top - targetTop);
+      const maxTop = Math.max(0, root.scrollHeight - root.clientHeight);
+      const nextTop = Math.min(maxTop, Math.max(0, desiredTop));
+      root.scrollTo({ top: nextTop, behavior: "smooth" });
+      setFocusedCourtId(null);
     }, 180);
     return () => clearTimeout(timer);
   }, [focusedCourtId, anchorDate, dayKey]);
@@ -585,7 +594,7 @@ function BookingCalendarDayView(dayProps) {
             "div",
             {
               "data-court-row": row.id,
-              className: `sticky left-0 z-30 flex h-full min-h-0 w-[132px] min-w-[132px] max-w-[132px] flex-col border-b px-3 py-3 shadow-[8px_0_16px_rgba(0,0,0,0.06)] ${isLight ? focusedCourtId === row.id ? "surface-brand-side ring-2 ring-[var(--brand-light)]/70" : "surface-brand-side-muted" : focusedCourtId === row.id ? "ring-2 ring-violet-400/70 bg-violet-900/20 border-zinc-800" : "bg-[#1a1a22] border-zinc-800"}`,
+              className: `sticky left-0 z-30 flex h-full min-h-0 w-[132px] min-w-[132px] max-w-[132px] flex-col border-b px-3 py-2 shadow-[8px_0_16px_rgba(0,0,0,0.06)] ${isLight ? focusedCourtId === row.id ? "surface-brand-side ring-2 ring-[var(--brand-light)]/70" : "surface-brand-side-muted" : focusedCourtId === row.id ? "ring-2 ring-violet-400/70 bg-violet-900/20 border-zinc-800" : "bg-[#1a1a22] border-zinc-800"}`,
               style: daySlotVirtEnabled ? {
                 gridRow: rowIndex + 1,
                 gridColumn: 1
@@ -600,7 +609,7 @@ function BookingCalendarDayView(dayProps) {
                 type: row.type
               },
               isLight
-            }) : /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement("div", { className: "font-semibold text-base leading-tight break-all" }, row.name), dayRowRemainingByCourt[row.id] && /* @__PURE__ */ import_react.default.createElement(
+            }) : /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement("div", { className: "font-semibold text-base leading-tight truncate" }, row.name), dayRowRemainingByCourt[row.id] && /* @__PURE__ */ import_react.default.createElement(
               "div",
               {
                 className: `mt-2 text-xs font-semibold ${(0, import_bookingCalendarViewShared.getRemainingToneClass)(
@@ -645,7 +654,7 @@ function BookingCalendarDayView(dayProps) {
                     handleDropMove(row.id, dayKey, hour);
                   }
                 },
-                className: `relative h-full min-h-0 p-2 text-left transition outline-none ${isOccupied && !outsideBusiness ? "border-l-transparent border-b-transparent" : `border-b border-l ${isLight ? "theme-border" : "border-zinc-700"}`} ${outsideBusiness ? isLight ? "bg-slate-100 theme-text-faint" : "bg-zinc-800/80 text-zinc-500 border-zinc-700" : isBlock ? blockSelected ? "bg-red-500/25 border-red-400 ring-2 ring-red-400/60" : isLight ? "bg-red-50 border-red-200" : "bg-red-900/50 border-red-700/50" : isOccupied ? "bg-transparent" : freeSelected ? isLight ? "bg-violet-50 border-violet-300 ring-2 ring-violet-300/60" : "bg-white/10 border-violet-400 ring-2 ring-violet-400/60" : isLight ? "theme-grid-cell hover:bg-violet-50/60" : "bg-zinc-900 border-zinc-700 hover:bg-zinc-800"}`
+                className: `relative h-full min-h-0 p-1 text-left transition outline-none ${isOccupied && !outsideBusiness ? "border-l-transparent border-b-transparent" : `border-b border-l ${isLight ? "theme-border" : "border-zinc-700"}`} ${outsideBusiness ? isLight ? "bg-slate-100 theme-text-faint" : "bg-zinc-800/80 text-zinc-500 border-zinc-700" : isBlock ? blockSelected ? "bg-red-500/25 border-red-400 ring-2 ring-red-400/60" : isLight ? "bg-red-50 border-red-200" : "bg-red-900/50 border-red-700/50" : isOccupied ? "bg-transparent" : freeSelected ? isLight ? "bg-violet-50 border-violet-300 ring-2 ring-violet-300/60" : "bg-white/10 border-violet-400 ring-2 ring-violet-400/60" : isLight ? "theme-grid-cell hover:bg-violet-50/60" : "bg-zinc-900 border-zinc-700 hover:bg-zinc-800"}`
               },
               outsideBusiness ? /* @__PURE__ */ import_react.default.createElement("div", { className: "flex h-full items-center justify-center rounded-xl border border-dashed border-zinc-700 text-xs text-zinc-500" }, (0, import_calendarI18n.tCal)(
                 "pisell2.recordBoard.calendar.day.outsideHours"
@@ -654,7 +663,7 @@ function BookingCalendarDayView(dayProps) {
               ) : item.name), item.note && /* @__PURE__ */ import_react.default.createElement("div", { className: "mt-1 text-xs text-zinc-300/90 truncate" }, item.note), (0, import_bookingCalendarViewShared.getBlockMetaLine)(item) && /* @__PURE__ */ import_react.default.createElement("div", { className: "mt-1 text-[10px] text-zinc-400 truncate" }, (0, import_bookingCalendarViewShared.getBlockMetaLine)(item))) : !item ? /* @__PURE__ */ import_react.default.createElement(
                 "div",
                 {
-                  className: `flex h-full items-center justify-center rounded-xl border border-dashed ${isLight ? "border-[#d8d0eb] text-[#8f86a9] hover:border-violet-300 hover:text-violet-500" : "border-zinc-600 text-zinc-500 hover:border-violet-500 hover:text-violet-300"}`
+                  className: `flex h-full w-full items-center justify-center rounded-xl border border-dashed text-center ${isLight ? "border-[#d8d0eb] text-[#8f86a9] hover:border-violet-300 hover:text-violet-500" : "border-zinc-600 text-zinc-500 hover:border-violet-500 hover:text-violet-300"}`
                 },
                 freeSelected ? (0, import_calendarI18n.tCal)(
                   "pisell2.recordBoard.calendar.day.selected"