4f:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"RegistryDependencies"] 50:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"FilesView"] 51:Ta6a4,'use client' import { IconPlus } from '@tabler/icons-react' // Title: Event Calendar Month View // Description: ARIA-grid month view with week rows, day cells, event chips, and overflow counts. import { useCallback, useEffect, useId, useLayoutEffect, useMemo, useRef, useState, type CSSProperties, type Ref, } from 'react' import { EventCalendarViewContext, useEventCalendar, useEventCalendarDay, useEventCalendarSelector, useEventCalendarSettings, useEventCalendarViewConfig, useEventCalendarViewSettings, useEventCalendarWeek, } from '@/components/spaceui/event-calendar' import { useEventCalendarGestures, wasRecentChipPress, wasRecentDrag, } from '@/components/spaceui/event-calendar-dnd' import { EVENT_CALENDAR_GHOST, EventCalendarEvent, } from '@/components/spaceui/event-calendar-event' import { getDayKey, getRangeKey, resolveOffDay, toZoned, zonedStartOfDay, } from '@/components/spaceui/event-calendar-lib' import type { EventCalendarDateRange, EventCalendarDragState, EventCalendarEventId, EventCalendarSegment, } from '@/components/spaceui/event-calendar-types' import { mergeProps } from '@base-ui/react/merge-props' import { useRender } from '@base-ui/react/use-render' import { addDays, format, getWeek } from 'date-fns' import { cn } from '@/lib/utils' import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover' import { ScrollArea } from '@/components/ui/scroll-area' // Layout-effect on the client (measure before paint, no flash), plain effect on // the server (never runs there) to avoid the SSR useLayoutEffect warning. const useIsoLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect // An occurrence key encodes the start instant and is also the chip's React key, // so committing a move re-keys the chip: React remounts it and the browser // drops focus to . The chip that owns focus is recorded here so the cell // rendering its replacement can hand focus back. Module scope because the drop // can land in a different cell than the one the chip left, and only one element // holds focus at a time anyway. let focusedChip: { node: HTMLElement eventId: EventCalendarEventId recurrenceIndex?: number } | null = null /** Give focus back to the recorded chip's replacement, if `root` renders it. */ function restoreChipFocus(root: HTMLElement | null, segments: EventCalendarSegment[]) { const pending = focusedChip // Only a chip removed WHILE focused needs help: a node still in the tree, or // a focus that has already moved on by itself, is left alone. if (!root || !pending || pending.node.isConnected) return const active = document.activeElement if (active && active !== document.body) return const index = segments.findIndex( (segment) => segment.occurrence.eventId === pending.eventId && segment.occurrence.recurrenceIndex === pending.recurrenceIndex, ) if (index < 0) return const chip = root.querySelectorAll('[data-slot=event-calendar-event]')[index] if (!chip) return // cleared first: focus() re-records through the new chip's own onFocus focusedChip = null chip.focus() } interface EventCalendarMonthViewProps extends useRender.ComponentProps<'div'> { maxEventsPerCell?: number | 'auto' } function EventCalendarMonthView({ className, render, maxEventsPerCell, ...props }: EventCalendarMonthViewProps) { const instance = useEventCalendar() const settings = useEventCalendarSettings() const viewConfig = useEventCalendarViewConfig() const visibleRange = useEventCalendarSelector((state) => state.visibleRange, { isEqual: (a, b) => getRangeKey(a) === getRangeKey(b), }) const anchorDate = useEventCalendarSelector((state) => state.date) const { effective } = useEventCalendarViewSettings() const weeks = useMemo(() => { const days: Date[] = [] let cursor = zonedStartOfDay(visibleRange.start, settings.timeZone) while (cursor < visibleRange.end) { days.push(cursor) cursor = zonedStartOfDay(addDays(toZoned(cursor, settings.timeZone), 1), settings.timeZone) } const rows: Date[][] = [] for (let i = 0; i < days.length; i += 7) rows.push(days.slice(i, i + 7)) if (effective.weekends) return rows return rows.map((row) => row.filter((day) => !settings.weekendDays.includes(toZoned(day, settings.timeZone).getDay())), ) }, [visibleRange, settings.timeZone, settings.weekendDays, effective.weekends]) const headerDays = weeks[0] ?? [] const title = settings.i18n.functions.formatTitle('month', { date: toZoned(anchorDate, settings.timeZone), activeRange: instance.api.getActiveRange(), visibleRange, locale: settings.locale, }) const gridTemplateColumns = `${effective.weekNumbers ? 'var(--ec-week-number-w, 2.75rem) ' : ''}repeat(${headerDays.length}, minmax(0, 1fr))` const cap = maxEventsPerCell ?? viewConfig.maxEventsPerCell const contained = viewConfig.scrollMode !== 'page' // "auto" fits as many event rows as the cell height allows and rolls the rest // into "+N more". Only the contained mode gives a cell a bounded height to // measure; page mode grows to fit, so "auto" there keeps the fixed fallback. const autoFit = cap === 'auto' && contained // slotProbe resolves the event-row height (--ec-month-bar-h) to px, honoring // the current font size and any consumer override; contentProbe is the first // cell's flex-1 content area, whose height is the event space per cell. const slotProbeRef = useRef(null) const contentProbeRef = useRef(null) const [autoCap, setAutoCap] = useState(null) const measureCap = useCallback(() => { const content = contentProbeRef.current const slot = slotProbeRef.current if (!content || !slot) return const laneH = slot.getBoundingClientRect().height if (laneH <= 0) return const cs = getComputedStyle(content) const inner = content.clientHeight - (parseFloat(cs.paddingTop) || 0) const gap = parseFloat(cs.rowGap) || 0 // N rows occupy N*laneH - gap (the last row has no trailing gap) setAutoCap(Math.max(1, Math.floor((inner + gap) / laneH))) }, []) useIsoLayoutEffect(() => { if (!autoFit) { setAutoCap(null) return } const content = contentProbeRef.current if (!content || typeof ResizeObserver === 'undefined') return measureCap() const observer = new ResizeObserver(measureCap) observer.observe(content) return () => observer.disconnect() // re-observe the first cell after a re-layout (row count or month change) }, [autoFit, measureCap, weeks.length, anchorDate]) const resolvedCap = cap === 'auto' ? (autoFit ? (autoCap ?? 3) : 3) : cap const defaultProps = { 'data-slot': 'event-calendar-month-view', 'data-view': 'month', role: 'grid', 'aria-label': title, className: cn( 'flex flex-col border-t', contained && 'min-h-0 flex-1 overflow-hidden', viewConfig.classNames?.monthView, className, ), children: ( <>

{effective.weekNumbers && (

)} {headerDays.map((day) => (

{viewConfig.renderDayHeader?.({ day, view: 'month', isToday: getDayKey(day, settings.timeZone) === getDayKey(new Date(), settings.timeZone), }) ?? ( <> {format(toZoned(day, settings.timeZone), settings.i18n.formats.monthDayHeader, { locale: settings.locale, })} {format(toZoned(day, settings.timeZone), settings.i18n.formats.monthDayHeaderNarrow, { locale: settings.locale, })} )}

))}

{weeks.map((week, rowIndex) => ( ))}

{autoFit && (

)} ), } return ( {useRender({ defaultTagName: 'div', render, props: mergeProps<'div'>(defaultProps, props), })} ) } /** * One month week row. Multi-day / all-day events render as CONTINUOUS bars in * an overlay grid that spans day columns (colStart -> colSpan) and stacks by * lane; single-day timed events render inside each cell below the reserved bar * lanes. This is what makes a cross-day event read as one whole block instead * of a chip repeated per cell. */ function EventCalendarMonthWeek({ week, gridTemplateColumns, showWeekNumber, cap, autoFit, contentRef, }: { week: Date[] gridTemplateColumns: string showWeekNumber: boolean cap: number autoFit: boolean /** Set on the first week only: forwarded to its first cell's content area so * the view can measure the per-cell event height for "auto". */ contentRef?: Ref }) { const settings = useEventCalendarSettings() const viewConfig = useEventCalendarViewConfig() const { bars, rowStart } = useEventCalendarWeek(week[0]) const colOffset = showWeekNumber ? 1 : 0 const dayMs = 86400000 const rowStartMs = zonedStartOfDay(rowStart ?? week[0], settings.timeZone).getTime() // Day offsets from the TRUE row start (0-6) for each visible column, so a // weekends-hidden month still places bars on the right days. const offsets = week.map((d) => Math.round((zonedStartOfDay(d, settings.timeZone).getTime() - rowStartMs) / dayMs)) /** Clamp a day-offset span onto the visible columns; null = fully hidden. */ const gridPos = (colStart: number, colSpan: number) => { let start = -1 let end = -1 for (let o = colStart; o < colStart + colSpan; o++) { const col = offsets.indexOf(o) if (col === -1) continue if (start === -1) start = col end = col } return start === -1 ? null : { col: start, span: end - start + 1 } } // bars fit within the cap; deeper lanes fall into each day's "+N more" const visibleBars = bars.filter((b) => (b.lane ?? 0) < cap) const covers = (b: EventCalendarSegment, dayOffset: number) => (b.colStart ?? 0) <= dayOffset && dayOffset < (b.colStart ?? 0) + (b.colSpan ?? 1) // Occurrence keys of the bars hidden in each column (lane >= cap). Threaded to // the cell so its "+N more" popover can list the hidden bars WITHOUT re-listing // the visible ones (day buckets carry no lane, so the week row - which owns bar // laning - is the only place that knows which bars are hidden). const hiddenBarKeysByCol = week.map( (_, col) => new Set(bars.filter((b) => (b.lane ?? 0) >= cap && covers(b, offsets[col])).map((b) => b.occurrence.key)), ) // Live move/resize ghost at the PROPOSED day span. Standardized treatment // (EVENT_CALENDAR_GHOST): move = the event carried as a full clone, resize = // the same clone with a dashed boundary; invalid adds destructive marking // while the engine shows the not-allowed cursor + validation hint. const dragGhost = useEventCalendarSelector< unknown, | (Pick< EventCalendarDragState, 'kind' | 'valid' | 'occurrence' | 'proposedStart' | 'proposedEnd' | 'proposedAllDay' > & { colStart: number colSpan: number isStart: boolean isEnd: boolean color?: string }) | null >( (state) => { const drag = state.drag if (!drag) return null const rowEndMs = rowStartMs + 7 * dayMs const startDayMs = zonedStartOfDay(drag.proposedStart, settings.timeZone).getTime() // exclusive end -> the last covered day const lastDayMs = zonedStartOfDay(new Date(drag.proposedEnd.getTime() - 1), settings.timeZone).getTime() if (startDayMs >= rowEndMs || lastDayMs < rowStartMs) return null const startCol = Math.max(0, Math.round((startDayMs - rowStartMs) / dayMs)) const endCol = Math.min(6, Math.round((lastDayMs - rowStartMs) / dayMs)) if (endCol < startCol) return null return { kind: drag.kind, valid: drag.valid, occurrence: drag.occurrence, proposedStart: drag.proposedStart, proposedEnd: drag.proposedEnd, proposedAllDay: drag.proposedAllDay, colStart: startCol, colSpan: endCol - startCol + 1, isStart: startDayMs >= rowStartMs, isEnd: lastDayMs < rowEndMs, color: drag.occurrence.event.color, } }, { isEqual: (a, b) => a === b || (a !== null && b !== null && a.colStart === b.colStart && a.colSpan === b.colSpan && a.valid === b.valid && a.kind === b.kind && a.proposedAllDay === b.proposedAllDay && a.proposedStart.getTime() === b.proposedStart.getTime() && a.proposedEnd.getTime() === b.proposedEnd.getTime()), }, ) const ghostPos = dragGhost ? gridPos(dragGhost.colStart, dragGhost.colSpan) : null const ghostLane = dragGhost ? (bars.find((b) => b.occurrence.key === dragGhost.occurrence.key)?.lane ?? 0) : 0 // A single-day timed MOVE is indicated INLINE in the target cell (a // placeholder at the time-sorted position, rendered by EventCalendarMonthCell) // rather than as a bar in this overlay, so only bar drags and every resize // render the overlay ghost. Bars = all-day or multi-day (span > 1 day). const ghostIsBar = !!dragGhost && (dragGhost.kind !== 'move' || dragGhost.proposedAllDay || dragGhost.proposedEnd.getTime() - dragGhost.proposedStart.getTime() > dayMs) return (

{showWeekNumber && (

{settings.i18n.labels.week( getWeek(toZoned(week[0], settings.timeZone), { // locale supplies firstWeekContainsDate, so a de/ISO calendar // numbers the year-boundary weeks its own way instead of falling // back to US numbering; weekStartsOn stays explicit so the number // keeps matching the rendered grid locale: settings.locale, weekStartsOn: settings.weekStartsOn, }), )}

)} {week.map((day, col) => ( (covers(b, offsets[col]) ? Math.max(max, (b.lane ?? 0) + 1) : max), 0, )} hiddenBarKeys={hiddenBarKeysByCol[col]} isLast={col === week.length - 1} autoFit={autoFit} contentRef={col === 0 ? contentRef : undefined} /> ))} {/* Continuous bar overlay: one element per bar, placed by grid-column so a cross-day span is a single unbroken block. pointer-events pass through the gaps to the cells below. NOT aria-hidden - these are the real interactive bars. */} {(visibleBars.length > 0 || (dragGhost && ghostPos && ghostIsBar)) && (

{visibleBars.map((bar) => { const pos = gridPos(bar.colStart ?? 0, bar.colSpan ?? 1) if (!pos) return null return (

{/* lane height minus the 2px inter-lane gap */}

) })} {dragGhost && ghostPos && ghostIsBar && (

{dragGhost.kind !== 'move' && ( )}

)}

) } function EventCalendarMonthCell({ day, cap, reservedLanes, hiddenBarKeys, isLast, autoFit, contentRef, }: { day: Date cap: number reservedLanes: number /** Occurrence keys of the bars hidden in THIS column (lane >= cap), from the * week row. Lets the cell list hidden bars in its overflow popover without * re-listing the bars already visible in the row overlay. */ hiddenBarKeys: Set /** Last column in the row - drops the right border so the grid's outer edge * is owned by the container, not a doubled cell border. Passed explicitly * because the bar overlay renders after the cells, so `:last-child` is * unreliable on rows that have bars. */ isLast: boolean /** When true, the "+N more" chip is treated as taking a row so the visible * chips + indicator always fit the measured cell height. */ autoFit: boolean /** Set on the first cell only: measured to derive the "auto" cap. */ contentRef?: Ref }) { const instance = useEventCalendar() const settings = useEventCalendarSettings() const viewConfig = useEventCalendarViewConfig() const gestures = useEventCalendarGestures() const { segments, isToday, isOutside } = useEventCalendarDay(day) const dayStart = zonedStartOfDay(day, settings.timeZone) const dayEnd = addDays(toZoned(dayStart, settings.timeZone), 1) const { effective } = useEventCalendarViewSettings() const isOff = resolveOffDay( day, settings.timeZone, effective.offDays ? (typeof viewConfig.offDays === 'object' ? viewConfig.offDays : true) : false, settings.weekendDays, ) const offClassName = (typeof viewConfig.offDays === 'object' && viewConfig.offDays.className) || 'bg-muted/25' const isDropTarget = useEventCalendarSelector((state) => { const drag = state.drag if (!drag) return null const covered = drag.proposedStart < dayEnd && drag.proposedEnd > dayStart if (!covered) return null return drag.valid ? 'valid' : 'invalid' }) // Hide hover affordances mid-gesture: the only intent is the drop target. // Gated on the one thing that reads it: a plain global boolean flips for all // 42 cells the moment a gesture starts and again when it ends, which is pure // waste in the default configuration where no add button renders. const isInteracting = useEventCalendarSelector((state) => viewConfig.showDayAddButton ? state.drag !== null || state.slotDraft !== null : false, ) const inDraft = useEventCalendarSelector( (state) => { const draft = state.slotDraft if (!draft || !draft.allDay) return null if (draft.start >= dayEnd || draft.end <= dayStart) return null return { isStart: draft.start >= dayStart, isEnd: draft.end <= dayEnd, } }, { isEqual: (a, b) => a === b || (a !== null && b !== null && a.isStart === b.isStart && a.isEnd === b.isEnd), }, ) // A single-day timed MOVE landing on THIS day: expose the proposed // minute-of-day (+ color/validity) so the cell can render a drop placeholder // at the correct time-sorted position, instead of the overlay marking a bar // over the first chip. Skipped for bars (they keep the overlay ghost) and for // a no-op move back onto the event's own day (the dimmed source already marks // the spot). const inlineDrop = useEventCalendarSelector( (state) => { const drag = state.drag if (!drag || drag.kind !== 'move' || drag.proposedAllDay) return null if (drag.proposedEnd.getTime() - drag.proposedStart.getTime() > 86400000) return null const dropDayMs = zonedStartOfDay(drag.proposedStart, settings.timeZone).getTime() if (dropDayMs !== dayStart.getTime()) return null if (zonedStartOfDay(drag.occurrence.start, settings.timeZone).getTime() === dayStart.getTime()) return null return { min: (drag.proposedStart.getTime() - dropDayMs) / 60000, valid: drag.valid, color: drag.occurrence.event.color, } }, { isEqual: (a, b) => a === b || (a !== null && b !== null && a.min === b.min && a.valid === b.valid && a.color === b.color), }, ) // Bars (allDay/multi-day) are drawn by the week-row overlay; the cell renders // only single-day timed events, below the reserved bar lanes. const extraHidden = hiddenBarKeys.size const hiddenBarSegs = segments.allDay.filter((s) => hiddenBarKeys.has(s.occurrence.key)) const m = segments.timed.length const timedSlots = Math.max(0, cap - reservedLanes) // Static (at-rest) split: what the cell shows with no drag, and - crucially - // what the "+N more" popover lists. The popover carries ONLY the hidden events // (hidden bars + timed past the cap), never the chips already visible in the // cell, so it never duplicates them. autoFit gives up one timed row to the // "+N more" indicator so the visible chips fit the clipped cell height. const staticOverflow = extraHidden > 0 || m > timedSlots const staticShown = autoFit && staticOverflow ? Math.max(0, timedSlots - 1) : timedSlots const overflowSegments = [...hiddenBarSegs, ...segments.timed.slice(staticShown)] // Live split: while a timed chip is dragged onto this day, render the day // exactly as it will look AFTER the drop. The dragged chip is a phantom in the // time-sorted order and is shown as the placeholder - inline where it lands, // or ON the "+N more" indicator when it lands in the overflow bucket (so the // user sees the drop will push it into "more"). The "+N more" count always // reflects the post-drop hidden total. let visibleTimed: EventCalendarSegment[] let overflowCount: number let placeholderIndex: number let placeholderAtMore: boolean if (!inlineDrop) { visibleTimed = segments.timed.slice(0, staticShown) overflowCount = overflowSegments.length placeholderIndex = -1 placeholderAtMore = false } else { // rank of the dragged chip in the resulting time-sorted list (chips are // time-ordered, so this is the count starting at or before its time) const insertRank = segments.timed.filter((s) => (s.startMin ?? 0) <= inlineDrop.min).length const dropOverflow = extraHidden > 0 || m + 1 > timedSlots // rows for timed items INCLUDING the phantom, before the "+N more" row const vis = !dropOverflow ? m + 1 : autoFit ? Math.max(0, timedSlots - 1) : timedSlots placeholderAtMore = insertRank >= vis visibleTimed = placeholderAtMore ? segments.timed.slice(0, vis) : segments.timed.slice(0, Math.max(0, vis - 1)) placeholderIndex = placeholderAtMore ? -1 : insertRank overflowCount = extraHidden + (m - visibleTimed.length) + (placeholderAtMore ? 1 : 0) } // No dep array: the replacement for a chip that lost focus to a commit can // appear on any re-render of any cell, and a cell with nothing to restore // bails after two comparisons. const rootRef = useRef(null) useIsoLayoutEffect(() => { restoreChipFocus(rootRef.current, visibleTimed) }) // Faint dashed drop placeholder, tinted to the dragged event's color, echoing // the move ghost (EVENT_CALENDAR_GHOST.move); one chip-height tall so chips // shift by exactly one row when it is inserted. const dropPlaceholder = inlineDrop ? (

) : null const defaultContent = ( <>

{reservedLanes > 0 && (

)} {visibleTimed.flatMap((segment, i) => { const chip = ( { focusedChip = { node: e.currentTarget, eventId: segment.occurrence.eventId, recurrenceIndex: segment.occurrence.recurrenceIndex, } }} // A chip still in the tree lost focus on its own, so there is // nothing to restore; only a blur from the remount is kept. onBlur={(e) => { if (e.currentTarget.isConnected) focusedChip = null }} // Hold a fixed height like the all-day lane above; without this // the chip flex-shrinks to whatever room the cell has left, so // cells with a reserved bar lane or a second chip render shorter // chips. className="shrink-0" /> ) return i === placeholderIndex ? [dropPlaceholder, chip] : [chip] })} {placeholderIndex >= 0 && placeholderIndex >= visibleTimed.length && dropPlaceholder} {overflowCount > 0 && ( )}

{/* Day number + add affordance, bottom-right (Notion-style) */}

{viewConfig.showDayAddButton && !isInteracting && ( )} {format(toZoned(day, settings.timeZone), settings.i18n.formats.monthCellDay, { locale: settings.locale })}

) const content = viewConfig.renderMonthCell?.({ day, segments, isToday, isOutside, overflowCount, defaultContent, }) ?? defaultContent return (

{ const target = e.target as HTMLElement if (target.closest('[data-slot=event-calendar-event]')) return if (target.closest('[data-slot=event-calendar-more]')) return gestures.beginCreate(e, day, true) }} onClick={(e) => { if (wasRecentDrag() || wasRecentChipPress()) return settings.onSlotClick?.({ date: day, allDay: true, view: 'month' }, e) }} > {inDraft && ( )} {content}

) } interface EventCalendarMoreIndicatorProps { day: Date count: number /** The OVERFLOW (hidden) segments for this day - bars first, then timed. The * popover lists only these, never the chips already visible in the cell. */ segments: EventCalendarSegment[] /** Set while a timed chip is dragged and will land in THIS overflow bucket: * the indicator itself becomes the drop placeholder (dashed, event-tinted) so * it reads as "the chip joins the +N more list". */ dropInto?: { color?: string; valid: boolean } } /** * "+N more" trigger opening a popover with the day's full event list. * onMoreClick returning false suppresses the built-in popover. */ function EventCalendarMoreIndicator({ day, count, segments, dropInto }: EventCalendarMoreIndicatorProps) { const settings = useEventCalendarSettings() const viewConfig = useEventCalendarViewConfig() const [open, setOpen] = useState(false) const headerId = useId() // Grabbing a chip from this list starts a drag; close the popover so it does // not sit over the drop target while the event is carried to another day. const isDragging = useEventCalendarSelector((state) => state.drag !== null) useEffect(() => { if (isDragging) setOpen(false) }, [isDragging]) return ( { e.stopPropagation() const verdict = settings.onMoreClick?.( day, segments.map((segment) => segment.occurrence), e, ) if (verdict === false) { e.preventDefault() setOpen(false) } }} > {viewConfig.renderMoreIndicator?.({ day, count, segments }) ?? settings.i18n.labels.more(count)} e.stopPropagation()} > {viewConfig.renderMoreContent ? ( viewConfig.renderMoreContent({ day, segments, close: () => setOpen(false), }) ) : ( )} ) } /** Built-in "+N more" popover body: day header + the day's chips. */ function EventCalendarMoreDefaultContent({ day, segments, headerId, }: { day: Date segments: EventCalendarSegment[] /** Names the popover dialog: the header IS the list's accessible name. */ headerId?: string }) { const settings = useEventCalendarSettings() const viewConfig = useEventCalendarViewConfig() return ( <>

{format(toZoned(day, settings.timeZone), settings.i18n.formats.moreDayHeader, { locale: settings.locale })}

{/* The scroll region breaks out of the popover's right padding (-me-2) so the scrollbar sits flush in the gutter; the list then pads itself back (ps-1 aligns with the header, pe-4 clears the ~10px bar with a gap) and adds py-1 so the first/last focus ring is not clipped by the overflow. Layout is identical with or without a scrollbar. */} {viewConfig.scrollbars === 'native' ? (

{segments.map((segment) => ( ))}

) : (

{segments.map((segment) => ( ))}

)} ) } export { EventCalendarMonthView, EventCalendarMoreIndicator } export type { EventCalendarMonthViewProps, EventCalendarMoreIndicatorProps } 4e:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","@base-ui/react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40base-ui%2Freact","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@base-ui/react"}]]}]}],["$","li","@tabler/icons-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40tabler%2Ficons-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@tabler/icons-react"}]]}]}],["$","li","date-fns",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/date-fns","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"date-fns"}]]}]}]]}],["$","$L4f",null,{"namespace":"@spaceui","registryDependencies":["https://www.spaceui.one/r/components-spaceui-event-calendar.json","https://www.spaceui.one/r/components-spaceui-event-calendar-dnd.json","https://www.spaceui.one/r/components-spaceui-event-calendar-event.json","https://www.spaceui.one/r/components-spaceui-event-calendar-lib.json","https://www.spaceui.one/r/components-spaceui-event-calendar-types.json","https://www.spaceui.one/r/lib-utils.json","https://www.spaceui.one/r/primitives-popover.json","https://www.spaceui.one/r/primitives-scroll-area.json"]}]]}],null]}],["$","$L50",null,{"files":[{"path":"src/registry/components/spaceui/event-calendar/event-calendar-month-view/index.tsx","content":"$51","type":"registry:component","target":"components/spaceui/event-calendar-month-view.tsx"}],"className":"h-[70svh] min-h-80"}]]}]