npm - @ahrowe/ui - Versions diffs - 0.42.0 → 0.43.0 - Mend

@ahrowe/ui 0.42.0 → 0.43.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (273) hide show

package/dist/esm/common/calendar/components/agendaList/agendaList.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"agendaList.mjs","names":[],"sources":["../../../../../../package/common/calendar/components/agendaList/agendaList.tsx"],"sourcesContent":["import { useId, useLayoutEffect, useRef, type CSSProperties, type ReactElement } from 'react';\nimport cx from 'classnames';\n\nimport type { CalendarEvent } from '../../calendar.types';\nimport { addDays, dateToDay, isSameDay, shownDays } from '../../dates';\nimport { formatDayNumber, formatLongDate, formatTime, formatTimeRange, formatWeekday } from '../../format';\nimport { eventEnd, eventsByDay, isAllDayLike } from '../../layout';\nimport type { AgendaListProps } from './agendaList.types';\n\nimport styles from './agendaList.module.pcss';\n\nfunction AgendaList<E extends CalendarEvent>({\n events,\n start,\n days,\n hidden,\n scrollTo,\n showDayHeaders,\n locale,\n text,\n onEventClick,\n renderEvent,\n className,\n classNames,\n slotStyles,\n}: AgendaListProps<E>): ReactElement {\n const id = useId();\n const listRef = useRef<HTMLDivElement>(null);\n const dates = shownDays(start, days, hidden);\n const perDay = eventsByDay(events, dates);\n const ~~today = new Date();\n const~~ scrollKey = scrollTo ? dateToDay(scrollTo) : null;\n\n useLayoutEffect(() => {\n const list = listRef.current;\n if (!list \|\| scrollKey === null) return;\n const groups = list.querySelectorAll<HTMLElement>('[data-cal-day]');\n const target = [...groups].find((group) => (group.dataset.calDay ?? '') >= scrollKey);\n list.scrollTop = target ? target.offsetTop : 0;\n }, [scrollKey]);\n\n const listed = perDay.flatMap((dayEvents, index) =>\n dayEvents.length > 0 \|\| !showDayHeaders ? [{ day: dates[index], dayEvents }] : [],\n );\n\n return (\n <div ref={listRef} className={cx(styles.agendaList, className)}>\n {listed.every(({ dayEvents }) => dayEvents.length === 0) && (\n <p className={styles.agendaListEmpty}>{text.noEvents}</p>\n )}\n {listed.map(({ day, dayEvents }) => {\n if (dayEvents.length === 0) return null;\n const headerId = `${id}-${dateToDay(day)}`;\n const isToday = isSameDay(day, today);\n const dayEnd = addDays(day, 1);\n return (\n <div\n key={dateToDay(day)}\n role='group'\n aria-labelledby={showDayHeaders ? headerId : undefined}\n className={cx(styles.agendaListDay, showDayHeaders && styles.agendaListDayWithHeader)}\n data-cal-day={dateToDay(day)}\n >\n {showDayHeaders && (\n <div\n id={headerId}\n className={cx(styles.agendaListDayHeader, classNames?.dayHeader)}\n style={slotStyles?.dayHeader}\n aria-label={formatLongDate(day, locale)}\n >\n <span\n className={cx(styles.agendaListDayNumber, isToday && styles.agendaListDayNumberToday)}\n aria-hidden\n >\n {formatDayNumber(day, locale)}\n </span>\n <span className={styles.agendaListDayName} aria-hidden>\n {formatWeekday(day, locale, 'short')}\n </span>\n </div>\n )}\n <ul className={styles.agendaListEvents}>\n {dayEvents.map((event) => {\n const end = eventEnd(event);\n const from = event.start < day ? day : event.start;\n const to = end > dayEnd ? dayEnd : end;\n const allDay = isAllDayLike(event) \|\| (event.start <= day && end >= dayEnd);\n const when = allDay ? text.allDay : formatTimeRange(event.start, end, locale);\n return (\n <li key={event.id}>\n <button\n type='button'\n className={cx(styles.agendaListEvent, classNames?.event)}\n style={{ '--event-color': event.color, ...slotStyles?.event } as CSSProperties}\n aria-label={`${event.title}, ${when}`}\n data-cal-event={String(event.id)}\n onClick={(clickEvent) => onEventClick?.(event, clickEvent.currentTarget)}\n >\n <span className={styles.agendaListTime} aria-hidden>\n {allDay ? (\n text.allDay\n ) : (\n <>\n <span>{formatTime(from, locale)}</span>\n <span className={styles.agendaListTimeEnd}>{formatTime(to, locale)}</span>\n </>\n )}\n </span>\n <span className={styles.agendaListAccent} aria-hidden />\n <span className={styles.agendaListTitle} aria-hidden>\n {renderEvent ? renderEvent(event, { singleLine: false }) : event.title}\n </span>\n </button>\n </li>\n );\n })}\n </ul>\n </div>\n );\n })}\n </div>\n );\n}\n\nexport default AgendaList;\n"],"mappings":"~~shBAWA~~,SAAS,EAAoC,CAC3C,SACA,QACA,OACA,SACA,WACA,iBACA,SACA,OACA,eACA,cACA,YACA,aACA,cACmC,CACnC,IAAM,EAAK,EAAM,EACX,EAAU,EAAuB,IAAI,EACrC,EAAQ,EAAU,EAAO,EAAM,CAAM,EACrC,EAAS,EAAY,EAAQ,CAAK,EAClC,~~EAAQ,IAAI,KACZ,~~EAAY,EAAW,EAAU,CAAQ,EAAI,KAEnD,MAAsB,CACpB,IAAM,EAAO,EAAQ,QACrB,GAAI,CAAC,GAAQ,IAAc,KAAM,OAEjC,IAAM,EAAS,CAAC,GADD,EAAK,iBAA8B,gBAC/B,CAAM,CAAC,CAAC,KAAM,IAAW,EAAM,QAAQ,QAAU,KAAO,CAAS,EACpF,EAAK,UAAY,EAAS,EAAO,UAAY,CAC/C,EAAG,CAAC,CAAS,CAAC,EAEd,IAAM,EAAS,EAAO,SAAS,EAAW,IACxC,EAAU,OAAS,GAAK,CAAC,EAAiB,CAAC,CAAE,IAAK,EAAM,GAAQ,WAAU,CAAC,EAAI,CAAC,CAClF,EAEA,OACE,EAAC,MAAD,CAAK,IAAK,EAAS,UAAW,EAAG,EAAO,WAAY,CAAS,EAA7D,SAAA,CACG,EAAO,OAAO,CAAE,eAAgB,EAAU,SAAW,CAAC,GACrD,EAAC,~~IAAD~~,~~CAAG~~,UAAW,EAAO,gBAAkB,SAAA,EAAK,~~QAAY~~,CAAA,~~EAEzD~~,EAAO,KAAK,CAAE,MAAK,eAAgB,CAClC,GAAI,EAAU,SAAW,EAAG,OAAO,KACnC,IAAM,EAAW,GAAG,EAAG,GAAG,EAAU,CAAG,IACjC,EAAU,EAAU,EAAK,CAAK,EAC9B,EAAS,EAAQ,EAAK,CAAC,EAC7B,OACE,EAAC,MAAD,CAEE,KAAK,QACL,kBAAiB,EAAiB,EAAW,IAAA,GAC7C,UAAW,EAAG,EAAO,cAAe,GAAkB,EAAO,uBAAuB,EACpF,eAAc,EAAU,CAAG,EAL7B,SAAA,CAOG,GACC,EAAC,MAAD,CACE,GAAI,EACJ,UAAW,EAAG,EAAO,oBAAqB,GAAY,SAAS,EAC/D,MAAO,GAAY,UACnB,aAAY,EAAe,EAAK,CAAM,EAJxC,SAAA,CAME,EAAC,OAAD,CACE,UAAW,EAAG,EAAO,oBAAqB,GAAW,EAAO,wBAAwB,EACpF,cAAA,GAEC,SAAA,EAAgB,EAAK,CAAM,CACxB,CAAA,EACN,EAAC,OAAD,CAAM,UAAW,EAAO,kBAAmB,cAAA,GACxC,SAAA,EAAc,EAAK,EAAQ,OAAO,CAC/B,CAAA,CACH,CAEP,CAAA,EAAA,EAAC,KAAD,CAAI,UAAW,EAAO,iBACnB,SAAA,EAAU,IAAK,GAAU,CACxB,IAAM,EAAM,EAAS,CAAK,EACpB,EAAO,EAAM,MAAQ,EAAM,EAAM,EAAM,MACvC,EAAK,EAAM,EAAS,EAAS,EAC7B,EAAS,EAAa,CAAK,GAAM,EAAM,OAAS,GAAO,GAAO,EAC9D,EAAO,EAAS,EAAK,OAAS,EAAgB,EAAM,MAAO,EAAK,CAAM,EAC5E,OACE,EAAC,KAAD,CAAA,SACE,EAAC,SAAD,CACE,KAAK,SACL,UAAW,EAAG,EAAO,gBAAiB,GAAY,~~KAAK~~,~~EACvD~~,~~MAAO~~,CAAE,gBAAiB,EAAM,~~MAAO~~,GAAG,GAAY,KAAM,~~EAC5D~~,aAAY,GAAG,EAAM,MAAM,IAAI,IAC/B,iBAAgB,OAAO,EAAM,EAAE,EAC/B,QAAU,GAAe,IAAe,EAAO,EAAW,aAAa,~~EANzE~~,SAAA,~~CAQE~~,EAAC,OAAD,CAAM,UAAW,EAAO,eAAgB,cAAA,GACrC,SAAA,EACC,EAAK,OAEL,EAAA,EAAA,CAAA,SAAA,CACE,EAAC,OAAD,CAAA,SAAO,EAAW,EAAM,CAAM,CAAQ,CAAA,EACtC,EAAC,OAAD,CAAM,UAAW,EAAO,kBAAoB,SAAA,EAAW,EAAI,CAAM,CAAQ,CAAA,CACzE,CAAA,CAAA,CAEA,CAAA,EACN,EAAC,OAAD,CAAM,UAAW,EAAO,iBAAkB,cAAA,EAAa,CAAA,EACvD,EAAC,OAAD,CAAM,UAAW,EAAO,gBAAiB,cAAA,GACtC,SAAA,EAAc,EAAY,EAAO,CAAE,WAAY,EAAM,CAAC,EAAI,EAAM,KAC7D,CAAA,CACA,CACN,CAAA,CAAA,~~EAxBK~~,EAAM,~~EAwBX~~,CAER,CAAC,CACC,CAAA,CACD,~~CA5DE~~,EAAA,EAAU,CAAG,~~CA4Df~~,CAET,CAAC,CACE,GAET"}
1	+ {"version":3,"file":"agendaList.mjs","names":[],"sources":["../../../../../../package/common/calendar/components/agendaList/agendaList.tsx"],"sourcesContent":["import { useId, useLayoutEffect, useRef, type CSSProperties, type ReactElement } from 'react';\nimport cx from 'classnames';\n\nimport EmptyState from 'components/common/emptyState';\n\nimport type { CalendarEvent } from '../../calendar.types';\nimport { addDays, dateToDay, isSameDay, shownDays } from '../../dates';\nimport { formatDayNumber, formatLongDate, formatTime, formatTimeRange, formatWeekday } from '../../format';\nimport { eventEnd, eventsByDay, isAllDayLike } from '../../layout';\nimport type { AgendaListProps } from './agendaList.types';\n\nimport styles from './agendaList.module.pcss';\nimport { cssColor } from '../../../styles/tone';\n\nfunction AgendaList<E extends CalendarEvent>({\n events,\n start,\n days,\n hidden,\n scrollTo,\n showDayHeaders,\n locale,\n today,\n text,\n onEventClick,\n renderEvent,\n eventClassName,\n className,\n classNames,\n slotStyles,\n}: AgendaListProps<E>): ReactElement {\n const id = useId();\n const listRef = useRef<HTMLDivElement>(null);\n const dates = shownDays(start, days, hidden);\n const perDay = eventsByDay(events, dates);\n const scrollKey = scrollTo ? dateToDay(scrollTo) : null;\n\n useLayoutEffect(() => {\n const list = listRef.current;\n if (!list \|\| scrollKey === null) return;\n const groups = list.querySelectorAll<HTMLElement>('[data-cal-day]');\n const target = [...groups].find((group) => (group.dataset.calDay ?? '') >= scrollKey);\n list.scrollTop = target ? target.offsetTop : 0;\n }, [scrollKey]);\n\n const listed = perDay.flatMap((dayEvents, index) =>\n dayEvents.length > 0 \|\| !showDayHeaders ? [{ day: dates[index], dayEvents }] : [],\n );\n\n return (\n <div ref={listRef} className={cx(styles.agendaList, className)}>\n {listed.every(({ dayEvents }) => dayEvents.length === 0) && (\n <EmptyState className={styles.agendaListEmpty}>{text.noEvents}</EmptyState>\n )}\n {listed.map(({ day, dayEvents }) => {\n if (dayEvents.length === 0) return null;\n const headerId = `${id}-${dateToDay(day)}`;\n const isToday = isSameDay(day, today);\n const dayEnd = addDays(day, 1);\n return (\n <div\n key={dateToDay(day)}\n role='group'\n aria-labelledby={showDayHeaders ? headerId : undefined}\n className={cx(styles.agendaListDay, showDayHeaders && styles.agendaListDayWithHeader)}\n data-cal-day={dateToDay(day)}\n >\n {showDayHeaders && (\n <div\n id={headerId}\n className={cx(styles.agendaListDayHeader, classNames?.dayHeader)}\n style={slotStyles?.dayHeader}\n aria-label={formatLongDate(day, locale)}\n >\n <span\n className={cx(styles.agendaListDayNumber, isToday && styles.agendaListDayNumberToday)}\n aria-hidden\n >\n {formatDayNumber(day, locale)}\n </span>\n <span className={styles.agendaListDayName} aria-hidden>\n {formatWeekday(day, locale, 'short')}\n </span>\n </div>\n )}\n <ul className={styles.agendaListEvents}>\n {dayEvents.map((event) => {\n const end = eventEnd(event);\n const from = event.start < day ? day : event.start;\n const to = end > dayEnd ? dayEnd : end;\n const allDay = isAllDayLike(event) \|\| (event.start <= day && end >= dayEnd);\n const when = allDay ? text.allDay : formatTimeRange(event.start, end, locale);\n return (\n <li key={event.id}>\n <button\n type='button'\n className={cx(styles.agendaListEvent, classNames?.event, eventClassName?.(event))}\n style={\n { '--event-color': event.color && cssColor(event.color), ...slotStyles?.event } as CSSProperties\n }\n aria-label={`${event.title}, ${when}`}\n data-cal-event={String(event.id)}\n onClick={(clickEvent) => onEventClick?.(event, clickEvent.currentTarget)}\n >\n <span className={styles.agendaListTime} aria-hidden>\n {allDay ? (\n text.allDay\n ) : (\n <>\n <span>{formatTime(from, locale)}</span>\n <span className={styles.agendaListTimeEnd}>{formatTime(to, locale)}</span>\n </>\n )}\n </span>\n <span className={styles.agendaListAccent} aria-hidden />\n <span className={styles.agendaListTitle} aria-hidden>\n {renderEvent ? renderEvent(event, { singleLine: false }) : event.title}\n </span>\n </button>\n </li>\n );\n })}\n </ul>\n </div>\n );\n })}\n </div>\n );\n}\n\nexport default AgendaList;\n"],"mappings":"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"}

package/dist/esm/common/calendar/components/agendaList/agendaList.module.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"agendaList.module.mjs","names":[],"sources":["../../../../../../package/common/calendar/components/agendaList/agendaList.module.pcss"],"sourcesContent":[".agendaList {\n position: relative;\n flex: 1;\n min-height: 0;\n overflow-y: auto;\n overscroll-behavior: contain;\n\n &-empty {\n ~~margin: 0;\n~~ padding: 2em 1em;\n ~~text-align: center;\n color: var(--text-light);\n~~ }\n\n &-day {\n padding: 0.25em 0.5em;\n\n & + & {\n border-top: 1px solid var(--border-color);\n }\n\n &-withHeader {\n display: grid;\n grid-template-columns: 3.5em minmax(0, 1fr);\n padding-left: 0;\n }\n\n &-header {\n position: sticky;\n top: 0;\n align-self: start;\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 0.125em;\n padding: 0.5em 0;\n }\n\n &-number {\n display: grid;\n place-items: center;\n width: 1.875em;\n height: 1.875em;\n border-radius: 50%;\n font-size: 1.125em;\n font-weight: 600;\n font-variant-numeric: tabular-nums;\n\n &-today {\n background: var(--custom-calendar-today-color);\n color: var(--text-on-primary);\n }\n }\n\n &-name {\n font-size: 0.6875em;\n font-weight: 600;\n letter-spacing: 0.04em;\n text-transform: uppercase;\n color: var(--text-dark);\n }\n }\n\n &-events {\n display: flex;\n flex-direction: column;\n gap: 0.125em;\n margin: 0;\n padding: 0.375em 0;\n list-style: none;\n }\n\n &-event {\n display: grid;\n grid-template-columns: auto 3px minmax(0, 1fr);\n align-items: center;\n gap: 0.75em;\n width: 100%;\n min-height: 2.75em;\n padding: 0.375em 0.625em;\n border: 0;\n border-radius: var(--custom-calendar-event-radius);\n background: transparent;\n color: inherit;\n font: inherit;\n text-align: left;\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n transition: background-color 0.15s ease;\n\n &:hover {\n background: color-mix(in oklab, var(--event-color, var(--primary-color)) 12%, transparent);\n }\n\n &:focus-visible {\n outline: 2px solid var(--focus-border-color, var(--primary-color));\n outline-offset: -2px;\n }\n }\n\n &-time {\n display: flex;\n flex-direction: column;\n min-width: 4.5em;\n font-size: 0.8125em;\n font-variant-numeric: tabular-nums;\n line-height: 1.35;\n\n &-end {\n color: var(--text-light);\n }\n }\n\n &-accent {\n align-self: stretch;\n width: 3px;\n border-radius: 3px;\n background: var(--event-color, var(--primary-color));\n }\n\n &-title {\n overflow: hidden;\n font-weight: 500;\n white-space: nowrap;\n text-overflow: ellipsis;\n }\n}\n"],"mappings":""}
1	+ {"version":3,"file":"agendaList.module.mjs","names":[],"sources":["../../../../../../package/common/calendar/components/agendaList/agendaList.module.pcss"],"sourcesContent":[".agendaList {\n position: relative;\n flex: 1;\n min-height: 0;\n overflow-y: auto;\n overscroll-behavior: contain;\n\n &-empty {\n padding: 2em 1em;\n }\n\n &-day {\n padding: 0.25em 0.5em;\n\n & + & {\n border-top: 1px solid var(--border-color);\n }\n\n &-withHeader {\n display: grid;\n grid-template-columns: 3.5em minmax(0, 1fr);\n padding-left: 0;\n }\n\n &-header {\n position: sticky;\n top: 0;\n align-self: start;\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 0.125em;\n padding: 0.5em 0;\n }\n\n &-number {\n display: grid;\n place-items: center;\n width: 1.875em;\n height: 1.875em;\n border-radius: 50%;\n font-size: 1.125em;\n font-weight: 600;\n font-variant-numeric: tabular-nums;\n\n &-today {\n background: var(--custom-calendar-today-color);\n color: var(--text-on-primary);\n }\n }\n\n &-name {\n font-size: 0.6875em;\n font-weight: 600;\n letter-spacing: 0.04em;\n text-transform: uppercase;\n color: var(--text-dark);\n }\n }\n\n &-events {\n display: flex;\n flex-direction: column;\n gap: 0.125em;\n margin: 0;\n padding: 0.375em 0;\n list-style: none;\n }\n\n &-event {\n display: grid;\n grid-template-columns: auto 3px minmax(0, 1fr);\n align-items: center;\n gap: 0.75em;\n width: 100%;\n min-height: 2.75em;\n padding: 0.375em 0.625em;\n border: 0;\n border-radius: var(--custom-calendar-event-radius);\n background: transparent;\n color: inherit;\n font: inherit;\n text-align: left;\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n transition: background-color 0.15s ease;\n\n &:hover {\n background: color-mix(in oklab, var(--event-color, var(--primary-color)) 12%, transparent);\n }\n\n &:focus-visible {\n outline: 2px solid var(--focus-border-color, var(--primary-color));\n outline-offset: -2px;\n }\n }\n\n &-time {\n display: flex;\n flex-direction: column;\n min-width: 4.5em;\n font-size: 0.8125em;\n font-variant-numeric: tabular-nums;\n line-height: 1.35;\n\n &-end {\n color: var(--text-light);\n }\n }\n\n &-accent {\n align-self: stretch;\n width: 3px;\n border-radius: 3px;\n background: var(--event-color, var(--primary-color));\n }\n\n &-title {\n overflow: hidden;\n font-weight: 500;\n white-space: nowrap;\n text-overflow: ellipsis;\n }\n}\n"],"mappings":""}

package/dist/esm/common/calendar/components/calendarHeader/calendarHeader.mjs CHANGED Viewed

@@ -1,2 +1,2 @@
-"use client";import{ButtonSize as e}from"../../../button/button.types.mjs";import t from"../../../button/button.mjs";import n from"../../../actionIcon/actionIcon.mjs";import r from"../../../optionPicker/optionPicker.mjs";import i from"./calendarHeader.module.mjs";import a from"classnames";import{faChevronLeft as o,faChevronRight as s}from"@fortawesome/free-solid-svg-icons";import{jsx as c,jsxs as l}from"react/jsx-runtime";function u({title:u,compact:d,direction:f,view:p,views:m,text:h,onStep:g,onToday:_,onViewChange:v,className:y,style:b}){return l(`div`,{className:a(i.calendarHeader,d&&i.calendarHeaderCompact,y),style:b,children:[c(`div`,{className:i.calendarHeaderTitle,"aria-live":`polite`,children:c(`span`,{className:i.calendarHeaderTitleText,style:{"--title-from":f},children:u},u)}),l(`div`,{className:i.calendarHeaderNav,children:[c(t,{className:i.calendarHeaderToday,size:e.Small,onClick:_,children:h.today}),c(n,{className:i.calendarHeaderStep,icon:o,title:h.previous,"aria-label":h.previous,onClick:()=>g(-1)}),c(n,{className:i.calendarHeaderStep,icon:s,title:h.next,"aria-label":h.next,onClick:()=>g(1)})]}),m.length>1&&c(r,{className:i.calendarHeaderViews,"aria-label":h.viewSwitcher,value:p,onChange:e=>v(e),options:m.map(e=>({key:e,label:h[e]}))})]})}export{u as default};
+"use client";import{ButtonSize as e}from"../../../button/button.types.mjs";import t from"../../../button/button.mjs";import n from"../../../actionIcon/actionIcon.mjs";import r from"../../../optionPicker/optionPicker.mjs";import i from"./calendarHeader.module.mjs";import a from"classnames";import{faChevronLeft as o,faChevronRight as s,faPlus as c}from"@fortawesome/free-solid-svg-icons";import{jsx as l,jsxs as u}from"react/jsx-runtime";function d({title:d,compact:f,direction:p,view:m,views:h,text:g,onStep:_,onToday:v,onViewChange:y,onCreate:b,className:x,style:S}){return u(`div`,{className:a(i.calendarHeader,f&&i.calendarHeaderCompact,x),style:S,children:[l(`div`,{className:i.calendarHeaderTitle,"aria-live":`polite`,children:l(`span`,{className:i.calendarHeaderTitleText,style:{"--title-from":p},children:d},d)}),u(`div`,{className:i.calendarHeaderNav,children:[l(t,{className:i.calendarHeaderToday,size:e.Small,onClick:v,children:g.today}),l(n,{icon:o,title:g.previous,"aria-label":g.previous,onClick:()=>_(-1)}),l(n,{icon:s,title:g.next,"aria-label":g.next,onClick:()=>_(1)})]}),h.length>1&&l(r,{className:i.calendarHeaderViews,"aria-label":g.viewSwitcher,value:m,onChange:e=>y(e),options:h.map(e=>({key:e,label:g[e]}))}),b&&l(n,{icon:c,title:g.newEvent,"aria-label":g.newEvent,onClick:e=>b(e.currentTarget)})]})}export{d as default};
 //# sourceMappingURL=calendarHeader.mjs.map

package/dist/esm/common/calendar/components/calendarHeader/calendarHeader.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"calendarHeader.mjs","names":[],"sources":["../../../../../../package/common/calendar/components/calendarHeader/calendarHeader.tsx"],"sourcesContent":["import type { CSSProperties, ReactElement } from 'react';\nimport cx from 'classnames';\nimport { faChevronLeft, faChevronRight } from '@fortawesome/free-solid-svg-icons';\n\nimport ActionIcon from 'components/common/actionIcon';\nimport Button, { ButtonSize } from 'components/common/button';\nimport OptionPicker from 'components/common/optionPicker';\nimport type { CalendarView } from '../../calendar.types';\nimport type { CalendarHeaderProps } from './calendarHeader.types';\n\nimport styles from './calendarHeader.module.pcss';\n\nfunction CalendarHeader({\n title,\n compact,\n direction,\n view,\n views,\n text,\n onStep,\n onToday,\n onViewChange,\n className,\n style,\n}: CalendarHeaderProps): ReactElement {\n return (\n <div className={cx(styles.calendarHeader, compact && styles.calendarHeaderCompact, className)} style={style}>\n {/* A live region, so paging is announced; its first content is not, as it was there on mount. */}\n <div className={styles.calendarHeaderTitle} aria-live='polite'>\n <span\n key={title}\n className={styles.calendarHeaderTitleText}\n style={{ '--title-from': direction } as CSSProperties}\n >\n {title}\n </span>\n </div>\n <div className={styles.calendarHeaderNav}>\n <Button className={styles.calendarHeaderToday} size={ButtonSize.Small} onClick={onToday}>\n {text.today}\n </Button>\n <ActionIcon~~\n className={styles.calendarHeaderStep}\n~~ icon={faChevronLeft}\n title={text.previous}\n aria-label={text.previous}\n onClick={() => onStep(-1)}\n />\n <ActionIcon~~\n className={styles.calendarHeaderStep}\n~~ icon={faChevronRight}\n title={text.next}\n aria-label={text.next}\n onClick={() => onStep(1)}\n />\n </div>\n {views.length > 1 && (\n <OptionPicker\n className={styles.calendarHeaderViews}\n aria-label={text.viewSwitcher}\n value={view}\n onChange={(key) => onViewChange(key as CalendarView)}\n options={views.map((option) => ({ key: option, label: text[option] }))}\n />\n )}\n </div>\n );\n}\n\nexport default CalendarHeader;\n"],"mappings":"~~0aAYA~~,SAAS,EAAe,CACtB,QACA,UACA,YACA,OACA,QACA,OACA,SACA,UACA,eACA,YACA,SACoC,CACpC,OACE,EAAC,MAAD,CAAK,UAAW,EAAG,EAAO,eAAgB,GAAW,EAAO,sBAAuB,CAAS,EAAU,QAAtG,SAAA,CAEE,EAAC,MAAD,CAAK,UAAW,EAAO,oBAAqB,YAAU,SACpD,SAAA,EAAC,OAAD,CAEE,UAAW,EAAO,wBAClB,MAAO,CAAE,eAAgB,CAAU,EAElC,SAAA,CACG,EALC,CAKD,CACH,CAAA,EACL,EAAC,MAAD,CAAK,UAAW,EAAO,kBAAvB,SAAA,CACE,EAAC,EAAD,CAAQ,UAAW,EAAO,oBAAqB,KAAM,EAAW,MAAO,QAAS,EAC7E,SAAA,EAAK,KACA,CAAA,EACR,EAAC,EAAD,~~CACE~~,~~UAAW,EAAO,mBAClB,~~KAAM,~~EACN~~,MAAO,EAAK,~~SACZ~~,aAAY,EAAK,~~SACjB~~,YAAe,EAAO,EAAE,~~CACzB~~,CAAA,~~EACD~~,EAAC,EAAD,~~CACE~~,~~UAAW,EAAO,mBAClB,~~KAAM,~~EACN~~,MAAO,EAAK,~~KACZ~~,aAAY,EAAK,~~KACjB~~,YAAe,EAAO,CAAC,~~CACxB~~,CAAA,~~CACE~~,IACJ,EAAM,OAAS,GACd,EAAC,EAAD,CACE,UAAW,EAAO,oBAClB,aAAY,EAAK,aACjB,MAAO,EACP,SAAW,GAAQ,EAAa,CAAmB,EACnD,QAAS,EAAM,IAAK,IAAY,CAAE,IAAK,EAAQ,MAAO,EAAK,EAAQ,EAAE,CACtE,CAAA,CAEA,GAET"}
1	+ {"version":3,"file":"calendarHeader.mjs","names":[],"sources":["../../../../../../package/common/calendar/components/calendarHeader/calendarHeader.tsx"],"sourcesContent":["import type { CSSProperties, ReactElement } from 'react';\nimport cx from 'classnames';\nimport { faChevronLeft, faChevronRight, faPlus } from '@fortawesome/free-solid-svg-icons';\n\nimport ActionIcon from 'components/common/actionIcon';\nimport Button, { ButtonSize } from 'components/common/button';\nimport OptionPicker from 'components/common/optionPicker';\nimport type { CalendarView } from '../../calendar.types';\nimport type { CalendarHeaderProps } from './calendarHeader.types';\n\nimport styles from './calendarHeader.module.pcss';\n\nfunction CalendarHeader({\n title,\n compact,\n direction,\n view,\n views,\n text,\n onStep,\n onToday,\n onViewChange,\n onCreate,\n className,\n style,\n}: CalendarHeaderProps): ReactElement {\n return (\n <div className={cx(styles.calendarHeader, compact && styles.calendarHeaderCompact, className)} style={style}>\n {/* A live region, so paging is announced; its first content is not, as it was there on mount. */}\n <div className={styles.calendarHeaderTitle} aria-live='polite'>\n <span\n key={title}\n className={styles.calendarHeaderTitleText}\n style={{ '--title-from': direction } as CSSProperties}\n >\n {title}\n </span>\n </div>\n <div className={styles.calendarHeaderNav}>\n <Button className={styles.calendarHeaderToday} size={ButtonSize.Small} onClick={onToday}>\n {text.today}\n </Button>\n <ActionIcon icon={faChevronLeft} title={text.previous} aria-label={text.previous} onClick={() => onStep(-1)} />\n <ActionIcon icon={faChevronRight} title={text.next} aria-label={text.next} onClick={() => onStep(1)} />\n </div>\n {views.length > 1 && (\n <OptionPicker\n className={styles.calendarHeaderViews}\n aria-label={text.viewSwitcher}\n value={view}\n onChange={(key) => onViewChange(key as CalendarView)}\n options={views.map((option) => ({ key: option, label: text[option] }))}\n />\n )}\n {onCreate && (\n <ActionIcon\n icon={faPlus}\n title={text.newEvent}\n aria-label={text.newEvent}\n onClick={(clickEvent) => onCreate(clickEvent.currentTarget)}\n />\n )}\n </div>\n );\n}\n\nexport default CalendarHeader;\n"],"mappings":"sbAYA,SAAS,EAAe,CACtB,QACA,UACA,YACA,OACA,QACA,OACA,SACA,UACA,eACA,WACA,YACA,SACoC,CACpC,OACE,EAAC,MAAD,CAAK,UAAW,EAAG,EAAO,eAAgB,GAAW,EAAO,sBAAuB,CAAS,EAAU,QAAtG,SAAA,CAEE,EAAC,MAAD,CAAK,UAAW,EAAO,oBAAqB,YAAU,SACpD,SAAA,EAAC,OAAD,CAEE,UAAW,EAAO,wBAClB,MAAO,CAAE,eAAgB,CAAU,EAElC,SAAA,CACG,EALC,CAKD,CACH,CAAA,EACL,EAAC,MAAD,CAAK,UAAW,EAAO,kBAAvB,SAAA,CACE,EAAC,EAAD,CAAQ,UAAW,EAAO,oBAAqB,KAAM,EAAW,MAAO,QAAS,EAC7E,SAAA,EAAK,KACA,CAAA,EACR,EAAC,EAAD,CAAY,KAAM,EAAe,MAAO,EAAK,SAAU,aAAY,EAAK,SAAU,YAAe,EAAO,EAAE,CAAI,CAAA,EAC9G,EAAC,EAAD,CAAY,KAAM,EAAgB,MAAO,EAAK,KAAM,aAAY,EAAK,KAAM,YAAe,EAAO,CAAC,CAAI,CAAA,CACnG,IACJ,EAAM,OAAS,GACd,EAAC,EAAD,CACE,UAAW,EAAO,oBAClB,aAAY,EAAK,aACjB,MAAO,EACP,SAAW,GAAQ,EAAa,CAAmB,EACnD,QAAS,EAAM,IAAK,IAAY,CAAE,IAAK,EAAQ,MAAO,EAAK,EAAQ,EAAE,CACtE,CAAA,EAEF,GACC,EAAC,EAAD,CACE,KAAM,EACN,MAAO,EAAK,SACZ,aAAY,EAAK,SACjB,QAAU,GAAe,EAAS,EAAW,aAAa,CAC3D,CAAA,CAEA,GAET"}

package/dist/esm/common/calendar/components/calendarHeader/calendarHeader.module.mjs CHANGED Viewed

@@ -1,2 +1,2 @@
-"use client";var e=`calendarHeader_2y0rN`,t=`calendarHeader-title_oxE5q`,n=`calendarHeader-title-text_-Tc6u`,r=`calendarTitleIn_GgigY`,i=`calendarHeader-nav_vtXFu`,a=`calendarHeader-today_-IWRl`,o=`calendarHeader-step_cZkOq`,s=`calendarHeader-views_-ftrl`,c=`calendarHeader-compact_4jGIE`,l={calendarHeader:e,"calendarHeader-title":`calendarHeader-title_oxE5q`,calendarHeaderTitle:t,"calendarHeader-title-text":`calendarHeader-title-text_-Tc6u`,calendarHeaderTitleText:n,calendarTitleIn:r,"calendarHeader-nav":`calendarHeader-nav_vtXFu`,calendarHeaderNav:i,"calendarHeader-today":`calendarHeader-today_-IWRl`,calendarHeaderToday:a,"calendarHeader-step":`calendarHeader-step_cZkOq`,calendarHeaderStep:o,"calendarHeader-views":`calendarHeader-views_-ftrl`,calendarHeaderViews:s,"calendarHeader-compact":`calendarHeader-compact_4jGIE`,calendarHeaderCompact:c};export{e as calendarHeader,c as calendarHeaderCompact,i as calendarHeaderNav,o as calendarHeaderStep,t as calendarHeaderTitle,n as calendarHeaderTitleText,a as calendarHeaderToday,s as calendarHeaderViews,r as calendarTitleIn,l as default};
+"use client";var e=`calendarHeader_2y0rN`,t=`calendarHeader-title_oxE5q`,n=`calendarHeader-title-text_-Tc6u`,r=`calendarTitleIn_GgigY`,i=`calendarHeader-nav_vtXFu`,a=`calendarHeader-today_-IWRl`,o=`calendarHeader-views_-ftrl`,s=`calendarHeader-compact_4jGIE`,c={calendarHeader:e,"calendarHeader-title":`calendarHeader-title_oxE5q`,calendarHeaderTitle:t,"calendarHeader-title-text":`calendarHeader-title-text_-Tc6u`,calendarHeaderTitleText:n,calendarTitleIn:r,"calendarHeader-nav":`calendarHeader-nav_vtXFu`,calendarHeaderNav:i,"calendarHeader-today":`calendarHeader-today_-IWRl`,calendarHeaderToday:a,"calendarHeader-views":`calendarHeader-views_-ftrl`,calendarHeaderViews:o,"calendarHeader-compact":`calendarHeader-compact_4jGIE`,calendarHeaderCompact:s};export{e as calendarHeader,s as calendarHeaderCompact,i as calendarHeaderNav,t as calendarHeaderTitle,n as calendarHeaderTitleText,a as calendarHeaderToday,o as calendarHeaderViews,r as calendarTitleIn,c as default};
 //# sourceMappingURL=calendarHeader.module.mjs.map

package/dist/esm/common/calendar/components/calendarHeader/calendarHeader.module.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"calendarHeader.module.mjs","names":[],"sources":["../../../../../../package/common/calendar/components/calendarHeader/calendarHeader.module.pcss"],"sourcesContent":[".calendarHeader {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: 0.5em 0.75em;\n padding: 0.625em 0.75em;\n border-bottom: 1px solid var(--border-color);\n\n &-title {\n flex: 1 1 6em;\n min-width: 0;\n overflow: hidden;\n font-size: 1.125em;\n font-weight: 600;\n white-space: nowrap;\n\n &-text {\n display: block;\n overflow: hidden;\n text-overflow: ellipsis;\n animation: calendarTitleIn 0.25s ease-out;\n }\n }\n\n &-nav {\n display: flex;\n align-items: center;\n gap: 0.~~125em~~;\n }\n\n &-today {\n margin-right: 0.25em;\n ~~padding: 0.375em 0.75em;\n border: 1px solid var(--border-color);\n~~ }\n\n &-step {\n display: grid;\n place-items: center;\n width: 2em;\n height: 2em;\n padding: 0;\n border-radius: 50%;\n color: var(--text-dark);\n\n &:hover {\n filter: none;\n background: var(--background-accent-light);\n }\n\n ~~&:focus-visible {\n outline: 2px solid var(--focus-border-color, var(--primary-color));\n outline-offset: -2px;\n }\n }\n}\n\n~~/* Two classes, to outrank OptionPicker's own `width: 100%` whichever stylesheet loads first.\n OptionPicker's chip assumes equal options. As a flex row sized to its content they were equal\n at the average label's width, and Month and Agenda were cut; `1fr` columns take the widest. /\n.calendarHeader .calendarHeader-views {\n --option-picker-padding: 0.3125em 0.75em;\n\n display: grid;\n grid-auto-columns: 1fr;\n grid-auto-flow: column;\n flex: none;\n width: auto;\n font-size: 0.875em;\n}\n\n/ After the rule above, which it has to override on a narrow calendar: a row of its own, and\n less padding, so four view names still fit at phone widths. /\n.calendarHeader-compact .calendarHeader-views {\n --option-picker-padding: 0.3125em 0.25em;\n\n flex~~-basis~~: 100~~%;\~~n}\n\n@keyframes calendarTitleIn {\n from {\n opacity: 0;\n transform: translateX(calc(var(--title-from, 1) 0.75em));\n }\n}\n\n@media (prefers-reduced-motion: reduce) {\n .calendarHeader-title-text {\n animation: none;\n }\n}\n"],"mappings":""}
1	+ {"version":3,"file":"calendarHeader.module.mjs","names":[],"sources":["../../../../../../package/common/calendar/components/calendarHeader/calendarHeader.module.pcss"],"sourcesContent":[".calendarHeader {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: 0.5em 0.75em;\n padding: 0.625em 0.75em;\n border-bottom: 1px solid var(--border-color);\n\n &-title {\n flex: 1 1 6em;\n min-width: 0;\n overflow: hidden;\n font-size: 1.125em;\n font-weight: 600;\n white-space: nowrap;\n\n &-text {\n display: block;\n overflow: hidden;\n text-overflow: ellipsis;\n animation: calendarTitleIn 0.25s ease-out;\n }\n }\n\n &-nav {\n display: flex;\n align-items: center;\n gap: 0.25em;\n }\n\n &-today {\n margin-right: 0.25em;\n }\n}\n\n/* Two classes, to outrank OptionPicker's own `width: 100%` whichever stylesheet loads first.\n OptionPicker's chip assumes equal options. As a flex row sized to its content they were equal\n at the average label's width, and Month and Agenda were cut; `1fr` columns take the widest. /\n.calendarHeader .calendarHeader-views {\n --option-picker-padding: 0.3125em 0.75em;\n\n display: grid;\n grid-auto-columns: 1fr;\n grid-auto-flow: column;\n flex: none;\n width: auto;\n font-size: 0.875em;\n}\n\n/ After the rule above, which it has to override on a narrow calendar: a row of its own, and\n less padding, so four view names still fit at phone widths. The row leaves room for the New\n event button after it: an ActionIcon under 2em wide and the 0.75em gap, both in the header's\n font, not this 0.875em, and 0.5em to spare against rounding; growing takes the spare back. /\n.calendarHeader-compact .calendarHeader-views {\n --option-picker-padding: 0.3125em 0.25em;\n\n flex: 1 1 calc(100% - 3.25em / 0.875);\n}\n\n@keyframes calendarTitleIn {\n from {\n opacity: 0;\n transform: translateX(calc(var(--title-from, 1) 0.75em));\n }\n}\n\n@media (prefers-reduced-motion: reduce) {\n .calendarHeader-title-text {\n animation: none;\n }\n}\n"],"mappings":""}

package/dist/esm/common/calendar/components/compactMonth/compactMonth.mjs CHANGED Viewed

@@ -1,2 +1,2 @@
-"use client";import{ButtonSize as e}from"../../../button/button.types.mjs";import t from"../../../button/button.mjs";import n from"../../../hooks/useMediaQuery.mjs";import{dateToDay as r}from"../../../utils/day.mjs";import{CalendarView as i}from"../../calendar.types.mjs";import{addDays as a,addMonths as o,dayDiff as s,gridKeyTarget as c,isSameDay as l,periodRange as u,shownDays as d,startOfMonth as f,startOfWeek as p}from"../../dates.mjs";import{formatDayNumber as ee,formatLongDate as m,formatMonthTitle as h,formatWeekday as g}from"../../format.mjs";import{eventsByDay as _}from"../../layout.mjs";import v from"../agendaList/agendaList.mjs";import{pageStep as te}from"../../gesture.mjs";import{useGestures as ne}from"../../useGestures.mjs";import{usePager as y}from"../../usePager.mjs";import b from"../../pager.module.mjs";import x from"./compactMonth.module.mjs";import{useLayoutEffect as S,useRef as C,useState as w}from"react";import T from"classnames";import{jsx as E,jsxs as D}from"react/jsx-runtime";var re=[-1,0,1],ie=3,ae=150;function O({events:O,date:k,locale:A,weekStartsOn:j,hidden:M,text:N,onDateChange:P,onEventClick:F,onSlotCreate:I,renderEvent:L,classNames:R,slotStyles:z}){let B=C(null),V=C(null),H=C(null),U=C(null),W=C(null),G=C(0),[K,oe]=w(!1),q=n(`(prefers-reduced-motion: reduce)`),J=new Date,Y=f(k),X=p(k,j),Z=d(p(J,j),7,M),Q=y(r(K?X:Y),e=>P(K?a(k,7*e):o(k,e)),()=>U.current?.querySelector(`[tabindex="0"]`)??null);S(()=>{let e=B.current;if(!e)return;let t,n=!1;function r(){return(H.current?.clientHeight??0)*5/6}function i(){let t=r(),n=t>0?Math.min(e.scrollTop/t,1):0;q&&(n=+(n>.99)),G.current=n,e.style.setProperty(`--collapse`,String(n)),oe(n>=1)}function a(){if(n)return;let t=r(),i=e.scrollTop;i<=0||i>=t||e.scrollTo({top:i<t/2?0:t,behavior:q?`auto`:`smooth`})}function o(){clearTimeout(t),t=setTimeout(a,ae)}function s(){i(),o()}function c(){n=!0}function l(){n=!1,o()}return i(),e.addEventListener(`scroll`,s,{passive:!0}),e.addEventListener(`touchstart`,c,{passive:!0}),e.addEventListener(`touchend`,l,{passive:!0}),e.addEventListener(`touchcancel`,l,{passive:!0}),()=>{clearTimeout(t),e.removeEventListener(`scroll`,s),e.removeEventListener(`touchstart`,c),e.removeEventListener(`touchend`,l),e.removeEventListener(`touchcancel`,l)}},[q]),S(()=>{let e=W.current;e!==null&&(W.current=null,U.current?.querySelector(`[data-cal-day="${e}"]`)?.focus())}),ne(V,{onPress:Q.finish,canSwipe:()=>G.current<.01||G.current>.99,onSwipeMove:Q.move,onSwipeEnd:(e,t)=>Q.settle(te(e,Q.width(),t))});function se(e,t){let n=c(e.key,t,j,M);n&&(e.preventDefault(),W.current=r(n),P(n))}function $(e,t,n,i){let a=l(e,k),o=l(e,J),s=m(e,A);return D(`div`,{role:`gridcell`,"data-cal-day":r(e),tabIndex:n&&a?0:-1,"aria-selected":a,"aria-current":o?`date`:void 0,"aria-label":i.length>0?`${s}, ${N.eventCount(i.length)}`:s,className:T(x.compactMonthCell,t&&x.compactMonthCellOutside,R?.cell),style:z?.cell,onClick:()=>P(e),onKeyDown:t=>se(t,e),children:[E(`span`,{"aria-hidden":!0,className:T(x.compactMonthNumber,o&&x.compactMonthNumberToday,a&&x.compactMonthNumberSelected),children:ee(e,A)}),E(`span`,{"aria-hidden":!0,className:x.compactMonthDots,children:i.slice(0,ie).map(e=>E(`span`,{className:x.compactMonthDot,style:{"--event-color":e.color}},e.id))})]},r(e))}function ce(e){let t=e===0,n=T(b.pagerPane,e===-1&&b.pagerPanePrev,e===1&&b.pagerPaneNext,x.compactMonthPane);if(K){let i=a(X,7*e),o=d(i,7,M),s=_(O,o);return E(`div`,{ref:t?U:void 0,className:n,inert:!t,"aria-hidden":!t||void 0,children:E(`div`,{role:`row`,className:x.compactMonthWeek,children:o.map((e,n)=>$(e,!1,t,s[n]))})},r(i))}let c=o(Y,e),l=u(i.Month,c,j).start,f=t?Math.floor(s(l,k)/7):0;return E(`div`,{ref:t?U:void 0,className:n,inert:!t,"aria-hidden":!t||void 0,style:{"--selected-row":f},children:E(`div`,{className:x.compactMonthRows,children:Array.from({length:6},(e,n)=>{let i=a(l,n*7),o=d(i,7,M),s=_(O,o);return E(`div`,{role:`row`,className:T(x.compactMonthWeek,n!==f&&x.compactMonthWeekFolding),children:o.map((e,n)=>$(e,e.getMonth()!==c.getMonth(),t,s[n]))},r(i))})})},r(c))}return D(`div`,{ref:B,className:x.compactMonth,style:{"--days":Z.length},children:[E(`div`,{ref:V,className:x.compactMonthSticky,children:D(`div`,{role:`grid`,"aria-label":h(k,A),children:[E(`div`,{role:`row`,className:x.compactMonthWeekdays,children:Z.map(e=>E(`div`,{role:`columnheader`,"aria-label":g(e,A,`long`),className:T(x.compactMonthWeekday,R?.dayHeader),style:z?.dayHeader,children:g(e,A,`narrow`)},e.getDay()))}),E(`div`,{ref:H,className:T(b.pagerViewport,x.compactMonthViewport),children:E(`div`,{ref:Q.trackRef,className:b.pagerTrack,children:re.map(ce)})})]})}),D(`div`,{className:x.compactMonthList,children:[D(`div`,{className:x.compactMonthListHeader,children:[E(`div`,{className:x.compactMonthListTitle,children:m(k,A)}),I&&E(t,{size:e.Small,onClick:e=>I({start:k,end:a(k,1),allDay:!0},e.currentTarget),children:N.newEvent})]}),E(v,{className:x.compactMonthAgenda,events:O,start:k,days:1,showDayHeaders:!1,locale:A,text:N,onEventClick:F,renderEvent:L,classNames:R,slotStyles:z})]})]})}export{O as default};
+"use client";import{cssColor as e}from"../../../styles/tone.mjs";import t from"../../../hooks/useMediaQuery.mjs";import{dateToDay as n}from"../../../utils/day.mjs";import{CalendarView as r}from"../../calendar.types.mjs";import{addDays as i,addMonths as a,dayDiff as o,gridKeyTarget as s,isSameDay as c,periodRange as l,shownDays as u,startOfMonth as d,startOfWeek as f}from"../../dates.mjs";import{formatDayNumber as p,formatLongDate as m,formatMonthTitle as ee,formatWeekday as h}from"../../format.mjs";import{eventsByDay as g}from"../../layout.mjs";import te from"../agendaList/agendaList.mjs";import{pageStep as _}from"../../gesture.mjs";import{useGestures as v}from"../../useGestures.mjs";import{usePager as ne}from"../../usePager.mjs";import y from"../../pager.module.mjs";import b from"./compactMonth.module.mjs";import{useLayoutEffect as x,useRef as S,useState as C}from"react";import w from"classnames";import{jsx as T,jsxs as E}from"react/jsx-runtime";var D=[-1,0,1],re=3,ie=150;function O({events:O,date:k,today:A,locale:j,weekStartsOn:M,hidden:N,text:P,onDateChange:F,onEventClick:I,renderEvent:L,eventClassName:R,classNames:z,slotStyles:B}){let V=S(null),H=S(null),U=S(null),W=S(null),G=S(null),K=S(0),[q,ae]=C(!1),J=t(`(prefers-reduced-motion: reduce)`),Y=d(k),X=f(k,M),Z=u(f(A,M),7,N),Q=ne(n(q?X:Y),e=>F(q?i(k,7*e):a(k,e)),()=>W.current?.querySelector(`[tabindex="0"]`)??null);x(()=>{let e=V.current;if(!e)return;let t,n=!1;function r(){return(U.current?.clientHeight??0)*5/6}function i(){let t=r(),n=t>0?Math.min(e.scrollTop/t,1):0;J&&(n=+(n>.99)),K.current=n,e.style.setProperty(`--collapse`,String(n)),ae(n>=1)}function a(){if(n)return;let t=r(),i=e.scrollTop;i<=0||i>=t||e.scrollTo({top:i<t/2?0:t,behavior:J?`auto`:`smooth`})}function o(){clearTimeout(t),t=setTimeout(a,ie)}function s(){i(),o()}function c(){n=!0}function l(){n=!1,o()}return i(),e.addEventListener(`scroll`,s,{passive:!0}),e.addEventListener(`touchstart`,c,{passive:!0}),e.addEventListener(`touchend`,l,{passive:!0}),e.addEventListener(`touchcancel`,l,{passive:!0}),()=>{clearTimeout(t),e.removeEventListener(`scroll`,s),e.removeEventListener(`touchstart`,c),e.removeEventListener(`touchend`,l),e.removeEventListener(`touchcancel`,l)}},[J]),x(()=>{let e=G.current;e!==null&&(G.current=null,W.current?.querySelector(`[data-cal-day="${e}"]`)?.focus())}),v(H,{onPress:Q.finish,canSwipe:()=>K.current<.01||K.current>.99,onSwipeMove:Q.move,onSwipeEnd:(e,t)=>Q.settle(_(e,Q.width(),t))});function oe(e,t){let r=s(e.key,t,M,N);r&&(e.preventDefault(),G.current=n(r),F(r))}function $(t,r,i,a){let o=c(t,k),s=c(t,A),l=m(t,j);return E(`div`,{role:`gridcell`,"data-cal-day":n(t),tabIndex:i&&o?0:-1,"aria-selected":o,"aria-current":s?`date`:void 0,"aria-label":a.length>0?`${l}, ${P.eventCount(a.length)}`:l,className:w(b.compactMonthCell,r&&b.compactMonthCellOutside,z?.cell),style:B?.cell,onClick:()=>F(t),onKeyDown:e=>oe(e,t),children:[T(`span`,{"aria-hidden":!0,className:w(b.compactMonthNumber,s&&b.compactMonthNumberToday,o&&b.compactMonthNumberSelected),children:p(t,j)}),T(`span`,{"aria-hidden":!0,className:b.compactMonthDots,children:a.slice(0,re).map(t=>T(`span`,{className:b.compactMonthDot,style:{"--event-color":t.color&&e(t.color)}},t.id))})]},n(t))}function se(e){let t=e===0,s=w(y.pagerPane,e===-1&&y.pagerPanePrev,e===1&&y.pagerPaneNext,b.compactMonthPane);if(q){let r=i(X,7*e),a=u(r,7,N),o=g(O,a);return T(`div`,{ref:t?W:void 0,className:s,inert:!t,"aria-hidden":!t||void 0,children:T(`div`,{role:`row`,className:b.compactMonthWeek,children:a.map((e,n)=>$(e,!1,t,o[n]))})},n(r))}let c=a(Y,e),d=l(r.Month,c,M).start,f=t?Math.floor(o(d,k)/7):0;return T(`div`,{ref:t?W:void 0,className:s,inert:!t,"aria-hidden":!t||void 0,style:{"--selected-row":f},children:T(`div`,{className:b.compactMonthRows,children:Array.from({length:6},(e,r)=>{let a=i(d,r*7),o=u(a,7,N),s=g(O,o);return T(`div`,{role:`row`,className:w(b.compactMonthWeek,r!==f&&b.compactMonthWeekFolding),children:o.map((e,n)=>$(e,e.getMonth()!==c.getMonth(),t,s[n]))},n(a))})})},n(c))}return E(`div`,{ref:V,className:b.compactMonth,style:{"--days":Z.length},children:[T(`div`,{ref:H,className:b.compactMonthSticky,children:E(`div`,{role:`grid`,"aria-label":ee(k,j),children:[T(`div`,{role:`row`,className:b.compactMonthWeekdays,children:Z.map(e=>T(`div`,{role:`columnheader`,"aria-label":h(e,j,`long`),className:w(b.compactMonthWeekday,z?.dayHeader),style:B?.dayHeader,children:h(e,j,`narrow`)},e.getDay()))}),T(`div`,{ref:U,className:w(y.pagerViewport,b.compactMonthViewport),children:T(`div`,{ref:Q.trackRef,className:y.pagerTrack,children:D.map(se)})})]})}),E(`div`,{className:b.compactMonthList,children:[T(`div`,{className:b.compactMonthListTitle,children:m(k,j)}),T(te,{className:b.compactMonthAgenda,events:O,start:k,days:1,showDayHeaders:!1,locale:j,today:A,text:P,onEventClick:I,renderEvent:L,eventClassName:R,classNames:z,slotStyles:B})]})]})}export{O as default};
 //# sourceMappingURL=compactMonth.mjs.map

package/dist/esm/common/calendar/components/compactMonth/compactMonth.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"compactMonth.mjs","names":[],"sources":["../../../../../../package/common/calendar/components/compactMonth/compactMonth.tsx"],"sourcesContent":["import { useLayoutEffect, useRef, useState, type CSSProperties, type KeyboardEvent, type ReactElement } from 'react';\nimport cx from 'classnames';\n\nimport Button from 'components/common/button';\nimport { ButtonSize } from 'components/common/button/button.types';\nimport { useMediaQuery } from 'components/common/hooks/useMediaQuery';\nimport { CalendarView, type CalendarEvent } from '../../calendar.types';\nimport {\n addDays,\n addMonths,\n dayDiff,\n dateToDay,\n gridKeyTarget,\n isSameDay,\n periodRange,\n shownDays,\n startOfMonth,\n startOfWeek,\n} from '../../dates';\nimport { formatDayNumber, formatLongDate, formatMonthTitle, formatWeekday } from '../../format';\nimport { pageStep } from '../../gesture';\nimport { eventsByDay } from '../../layout';\nimport { useGestures } from '../../useGestures';\nimport { usePager } from '../../usePager';\nimport AgendaList from '../agendaList';\nimport type { CompactMonthProps } from './compactMonth.types';\n\nimport pagerStyles from '../../pager.module.pcss';\nimport styles from './compactMonth.module.pcss';\n\nconst STEPS = [-1, 0, 1] as const;\nconst MAX_DOTS = 3;\n/** Quiet time after the last scroll before a half-collapsed month settles open or shut. /\nconst SETTLE_DELAY_MS = 150;\n\n/\n The month view of a narrow calendar: a grid of days with event dots over the selected day's\n * events. Scrolling that list folds the month up into the selected week, iOS-style.\n /\nfunction CompactMonth<E extends CalendarEvent>({\n events,\n date,\n locale,\n weekStartsOn,\n hidden,\n text,\n onDateChange,\n onEventClick,\n onSlotCreate,\n renderEvent,\n classNames,\n slotStyles,\n}: CompactMonthProps<E>): ReactElement {\n const scrollerRef = useRef<HTMLDivElement>(null);\n const monthRef = useRef<HTMLDivElement>(null);\n const viewportRef = useRef<HTMLDivElement>(null);\n const currentRef = useRef<HTMLDivElement>(null);\n const pendingFocus = useRef<string \| null>(null);\n const progress = useRef(0);\n const [collapsed, setCollapsed] = useState(false);\n const reducedMotion = useMediaQuery('(prefers-reduced-motion: reduce)');\n\n const today = new Date();\n const month = startOfMonth(date);\n const week = startOfWeek(date, weekStartsOn);\n const weekdays = shownDays(startOfWeek(today, weekStartsOn), 7, hidden);\n\n const pager = usePager(\n dateToDay(collapsed ? week : month),\n (step) => onDateChange(collapsed ? addDays(date, 7 step) : addMonths(date, step)),\n () => currentRef.current?.querySelector<HTMLElement>('[tabindex=\"0\"]') ?? null,\n );\n\n // The fold follows the scroll position rather than animating, so it is written straight to a\n // custom property on every scroll event and never re-renders. Only reaching or leaving fully\n // folded re-renders, to swap the month panes for week strips that look identical at that point.\n useLayoutEffect(() => {\n const scroller = scrollerRef.current;\n if (!scroller) return;\n let settleTimer: ReturnType<typeof setTimeout> \| undefined;\n let touching = false;\n\n function foldDistance() {\n // Five of the six rows fold away.\n return ((viewportRef.current?.clientHeight ?? 0) * 5) / 6;\n }\n\n function update() {\n const distance = foldDistance();\n let next = distance > 0 ? Math.min(scroller!.scrollTop / distance, 1) : 0;\n // Following the scroll, the rows move at a rate of their own, as parallax does. Under\n // reduced motion the month stays whole until it is scrolled all the way, then folds at once.\n if (reducedMotion) next = next > 0.99 ? 1 : 0;\n progress.current = next;\n scroller!.style.setProperty('--collapse', String(next));\n setCollapsed(next >= 1);\n }\n\n function settle() {\n if (touching) return;\n const distance = foldDistance();\n const top = scroller!.scrollTop;\n if (top <= 0 \|\| top >= distance) return;\n scroller!.scrollTo({ top: top < distance / 2 ? 0 : distance, behavior: reducedMotion ? 'auto' : 'smooth' });\n }\n\n function scheduleSettle() {\n clearTimeout(settleTimer);\n settleTimer = setTimeout(settle, SETTLE_DELAY_MS);\n }\n\n function onScroll() {\n update();\n scheduleSettle();\n }\n function onTouchStart() {\n touching = true;\n }\n function onTouchEnd() {\n touching = false;\n scheduleSettle();\n }\n\n update();\n scroller.addEventListener('scroll', onScroll, { passive: true });\n scroller.addEventListener('touchstart', onTouchStart, { passive: true });\n scroller.addEventListener('touchend', onTouchEnd, { passive: true });\n scroller.addEventListener('touchcancel', onTouchEnd, { passive: true });\n return () => {\n clearTimeout(settleTimer);\n scroller.removeEventListener('scroll', onScroll);\n scroller.removeEventListener('touchstart', onTouchStart);\n scroller.removeEventListener('touchend', onTouchEnd);\n scroller.removeEventListener('touchcancel', onTouchEnd);\n };\n }, [reducedMotion]);\n\n useLayoutEffect(() => {\n const key = pendingFocus.current;\n if (key === null) return;\n pendingFocus.current = null;\n currentRef.current?.querySelector<HTMLElement>(`[data-cal-day=\"${key}\"]`)?.focus();\n });\n\n useGestures(monthRef, {\n onPress: pager.finish,\n // Half folded, the neighbours would not line up with the current pane.\n canSwipe: () => progress.current < 0.01 \|\| progress.current > 0.99,\n onSwipeMove: pager.move,\n onSwipeEnd: (dx, velocity) => pager.settle(pageStep(dx, pager.width(), velocity)),\n });\n\n function handleKeyDown(keyEvent: KeyboardEvent<HTMLDivElement>, day: Date) {\n const next = gridKeyTarget(keyEvent.key, day, weekStartsOn, hidden);\n if (!next) return;\n keyEvent.preventDefault();\n pendingFocus.current = dateToDay(next);\n onDateChange(next);\n }\n\n function renderDay(day: Date, outside: boolean, isCurrent: boolean, dayEvents: readonly E[]) {\n const selected = isSameDay(day, date);\n const isToday = isSameDay(day, today);\n const name = formatLongDate(day, locale);\n return (\n <div\n key={dateToDay(day)}\n role='gridcell'\n data-cal-day={dateToDay(day)}\n tabIndex={isCurrent && selected ? 0 : -1}\n aria-selected={selected}\n aria-current={isToday ? 'date' : undefined}\n aria-label={dayEvents.length > 0 ? `${name}, ${text.eventCount(dayEvents.length)}` : name}\n className={cx(styles.compactMonthCell, outside && styles.compactMonthCellOutside, classNames?.cell)}\n style={slotStyles?.cell}\n onClick={() => onDateChange(day)}\n onKeyDown={(keyEvent) => handleKeyDown(keyEvent, day)}\n >\n <span\n aria-hidden\n className={cx(\n styles.compactMonthNumber,\n isToday && styles.compactMonthNumberToday,\n selected && styles.compactMonthNumberSelected,\n )}\n >\n {formatDayNumber(day, locale)}\n </span>\n <span aria-hidden className={styles.compactMonthDots}>\n {dayEvents.slice(0, MAX_DOTS).map((event) => (\n <span\n key={event.id}\n className={styles.compactMonthDot}\n style={{ '--event-color': event.color } as CSSProperties}\n />\n ))}\n </span>\n </div>\n );\n }\n\n function renderPane(step: (typeof STEPS)[number]) {\n const isCurrent = step === 0;\n const className = cx(\n pagerStyles.pagerPane,\n step === -1 && pagerStyles.pagerPanePrev,\n step === 1 && pagerStyles.pagerPaneNext,\n styles.compactMonthPane,\n );\n\n if (collapsed) {\n const paneWeek = addDays(week, 7 * step);\n const dates = shownDays(paneWeek, 7, hidden);\n const perDay = eventsByDay(events, dates);\n return (\n <div\n key={dateToDay(paneWeek)}\n ref={isCurrent ? currentRef : undefined}\n className={className}\n inert={!isCurrent}\n aria-hidden={!isCurrent \|\| undefined}\n >\n <div role='row' className={styles.compactMonthWeek}>\n {dates.map((day, index) => renderDay(day, false, isCurrent, perDay[index]))}\n </div>\n </div>\n );\n }\n\n const paneMonth = addMonths(month, step);\n const gridStart = periodRange(CalendarView.Month, paneMonth, weekStartsOn).start;\n const selectedRow = isCurrent ? Math.floor(dayDiff(gridStart, date) / 7) : 0;\n return (\n <div\n key={dateToDay(paneMonth)}\n ref={isCurrent ? currentRef : undefined}\n className={className}\n inert={!isCurrent}\n aria-hidden={!isCurrent \|\| undefined}\n style={{ '--selected-row': selectedRow } as CSSProperties}\n >\n <div className={styles.compactMonthRows}>\n {Array.from({ length: 6 }, (_, row) => {\n const weekStart = addDays(gridStart, row * 7);\n const dates = shownDays(weekStart, 7, hidden);\n const perDay = eventsByDay(events, dates);\n return (\n <div\n key={dateToDay(weekStart)}\n role='row'\n className={cx(styles.compactMonthWeek, row !== selectedRow && styles.compactMonthWeekFolding)}\n >\n {dates.map((day, column) =>\n renderDay(day, day.getMonth() !== paneMonth.getMonth(), isCurrent, perDay[column]),\n )}\n </div>\n );\n })}\n </div>\n </div>\n );\n }\n\n return (\n <div ref={scrollerRef} className={styles.compactMonth} style={{ '--days': weekdays.length } as CSSProperties}>\n <div ref={monthRef} className={styles.compactMonthSticky}>\n <div role='grid' aria-label={formatMonthTitle(date, locale)}>\n <div role='row' className={styles.compactMonthWeekdays}>\n {weekdays.map((day) => (\n <div\n key={day.getDay()}\n role='columnheader'\n aria-label={formatWeekday(day, locale, 'long')}\n className={cx(styles.compactMonthWeekday, classNames?.dayHeader)}\n style={slotStyles?.dayHeader}\n >\n {formatWeekday(day, locale, 'narrow')}\n </div>\n ))}\n </div>\n <div ref={viewportRef} className={cx(pagerStyles.pagerViewport, styles.compactMonthViewport)}>\n <div ref={pager.trackRef} className={pagerStyles.pagerTrack}>\n {STEPS.map(renderPane)}\n </div>\n </div>\n </div>\n </div>\n <div className={styles.compactMonthList}>\n <div className={styles.compactMonthListHeader}>\n <div className={styles.compactMonthListTitle}>{formatLongDate(date, locale)}</div>\n {onSlotCreate && (\n <Button\n size={ButtonSize.Small}\n onClick={(clickEvent) =>\n onSlotCreate({ start: date, end: addDays(date, 1), allDay: true }, clickEvent.currentTarget)\n }\n >\n {text.newEvent}\n </Button>\n )}\n </div>\n <AgendaList\n className={styles.compactMonthAgenda}\n events={events}\n start={date}\n days={1}\n showDayHeaders={false}\n locale={locale}\n text={text}\n onEventClick={onEventClick}\n renderEvent={renderEvent}\n classNames={classNames}\n slotStyles={slotStyles}\n />\n </div>\n </div>\n );\n}\n\nexport default CompactMonth;\n"],"mappings":"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"}
1	+ {"version":3,"file":"compactMonth.mjs","names":[],"sources":["../../../../../../package/common/calendar/components/compactMonth/compactMonth.tsx"],"sourcesContent":["import { useLayoutEffect, useRef, useState, type CSSProperties, type KeyboardEvent, type ReactElement } from 'react';\nimport cx from 'classnames';\n\nimport { useMediaQuery } from 'components/common/hooks/useMediaQuery';\nimport { CalendarView, type CalendarEvent } from '../../calendar.types';\nimport {\n addDays,\n addMonths,\n dayDiff,\n dateToDay,\n gridKeyTarget,\n isSameDay,\n periodRange,\n shownDays,\n startOfMonth,\n startOfWeek,\n} from '../../dates';\nimport { formatDayNumber, formatLongDate, formatMonthTitle, formatWeekday } from '../../format';\nimport { pageStep } from '../../gesture';\nimport { eventsByDay } from '../../layout';\nimport { useGestures } from '../../useGestures';\nimport { usePager } from '../../usePager';\nimport AgendaList from '../agendaList';\nimport type { CompactMonthProps } from './compactMonth.types';\n\nimport pagerStyles from '../../pager.module.pcss';\nimport styles from './compactMonth.module.pcss';\nimport { cssColor } from '../../../styles/tone';\n\nconst STEPS = [-1, 0, 1] as const;\nconst MAX_DOTS = 3;\n/** Quiet time after the last scroll before a half-collapsed month settles open or shut. /\nconst SETTLE_DELAY_MS = 150;\n\n/\n The month view of a narrow calendar: a grid of days with event dots over the selected day's\n * events. Scrolling that list folds the month up into the selected week, iOS-style.\n /\nfunction CompactMonth<E extends CalendarEvent>({\n events,\n date,\n today,\n locale,\n weekStartsOn,\n hidden,\n text,\n onDateChange,\n onEventClick,\n renderEvent,\n eventClassName,\n classNames,\n slotStyles,\n}: CompactMonthProps<E>): ReactElement {\n const scrollerRef = useRef<HTMLDivElement>(null);\n const monthRef = useRef<HTMLDivElement>(null);\n const viewportRef = useRef<HTMLDivElement>(null);\n const currentRef = useRef<HTMLDivElement>(null);\n const pendingFocus = useRef<string \| null>(null);\n const progress = useRef(0);\n const [collapsed, setCollapsed] = useState(false);\n const reducedMotion = useMediaQuery('(prefers-reduced-motion: reduce)');\n\n const month = startOfMonth(date);\n const week = startOfWeek(date, weekStartsOn);\n const weekdays = shownDays(startOfWeek(today, weekStartsOn), 7, hidden);\n\n const pager = usePager(\n dateToDay(collapsed ? week : month),\n (step) => onDateChange(collapsed ? addDays(date, 7 step) : addMonths(date, step)),\n () => currentRef.current?.querySelector<HTMLElement>('[tabindex=\"0\"]') ?? null,\n );\n\n // The fold follows the scroll position rather than animating, so it is written straight to a\n // custom property on every scroll event and never re-renders. Only reaching or leaving fully\n // folded re-renders, to swap the month panes for week strips that look identical at that point.\n useLayoutEffect(() => {\n const scroller = scrollerRef.current;\n if (!scroller) return;\n let settleTimer: ReturnType<typeof setTimeout> \| undefined;\n let touching = false;\n\n function foldDistance() {\n // Five of the six rows fold away.\n return ((viewportRef.current?.clientHeight ?? 0) * 5) / 6;\n }\n\n function update() {\n const distance = foldDistance();\n let next = distance > 0 ? Math.min(scroller!.scrollTop / distance, 1) : 0;\n // Following the scroll, the rows move at a rate of their own, as parallax does. Under\n // reduced motion the month stays whole until it is scrolled all the way, then folds at once.\n if (reducedMotion) next = next > 0.99 ? 1 : 0;\n progress.current = next;\n scroller!.style.setProperty('--collapse', String(next));\n setCollapsed(next >= 1);\n }\n\n function settle() {\n if (touching) return;\n const distance = foldDistance();\n const top = scroller!.scrollTop;\n if (top <= 0 \|\| top >= distance) return;\n scroller!.scrollTo({ top: top < distance / 2 ? 0 : distance, behavior: reducedMotion ? 'auto' : 'smooth' });\n }\n\n function scheduleSettle() {\n clearTimeout(settleTimer);\n settleTimer = setTimeout(settle, SETTLE_DELAY_MS);\n }\n\n function onScroll() {\n update();\n scheduleSettle();\n }\n function onTouchStart() {\n touching = true;\n }\n function onTouchEnd() {\n touching = false;\n scheduleSettle();\n }\n\n update();\n scroller.addEventListener('scroll', onScroll, { passive: true });\n scroller.addEventListener('touchstart', onTouchStart, { passive: true });\n scroller.addEventListener('touchend', onTouchEnd, { passive: true });\n scroller.addEventListener('touchcancel', onTouchEnd, { passive: true });\n return () => {\n clearTimeout(settleTimer);\n scroller.removeEventListener('scroll', onScroll);\n scroller.removeEventListener('touchstart', onTouchStart);\n scroller.removeEventListener('touchend', onTouchEnd);\n scroller.removeEventListener('touchcancel', onTouchEnd);\n };\n }, [reducedMotion]);\n\n useLayoutEffect(() => {\n const key = pendingFocus.current;\n if (key === null) return;\n pendingFocus.current = null;\n currentRef.current?.querySelector<HTMLElement>(`[data-cal-day=\"${key}\"]`)?.focus();\n });\n\n useGestures(monthRef, {\n onPress: pager.finish,\n // Half folded, the neighbours would not line up with the current pane.\n canSwipe: () => progress.current < 0.01 \|\| progress.current > 0.99,\n onSwipeMove: pager.move,\n onSwipeEnd: (dx, velocity) => pager.settle(pageStep(dx, pager.width(), velocity)),\n });\n\n function handleKeyDown(keyEvent: KeyboardEvent<HTMLDivElement>, day: Date) {\n const next = gridKeyTarget(keyEvent.key, day, weekStartsOn, hidden);\n if (!next) return;\n keyEvent.preventDefault();\n pendingFocus.current = dateToDay(next);\n onDateChange(next);\n }\n\n function renderDay(day: Date, outside: boolean, isCurrent: boolean, dayEvents: readonly E[]) {\n const selected = isSameDay(day, date);\n const isToday = isSameDay(day, today);\n const name = formatLongDate(day, locale);\n return (\n <div\n key={dateToDay(day)}\n role='gridcell'\n data-cal-day={dateToDay(day)}\n tabIndex={isCurrent && selected ? 0 : -1}\n aria-selected={selected}\n aria-current={isToday ? 'date' : undefined}\n aria-label={dayEvents.length > 0 ? `${name}, ${text.eventCount(dayEvents.length)}` : name}\n className={cx(styles.compactMonthCell, outside && styles.compactMonthCellOutside, classNames?.cell)}\n style={slotStyles?.cell}\n onClick={() => onDateChange(day)}\n onKeyDown={(keyEvent) => handleKeyDown(keyEvent, day)}\n >\n <span\n aria-hidden\n className={cx(\n styles.compactMonthNumber,\n isToday && styles.compactMonthNumberToday,\n selected && styles.compactMonthNumberSelected,\n )}\n >\n {formatDayNumber(day, locale)}\n </span>\n <span aria-hidden className={styles.compactMonthDots}>\n {dayEvents.slice(0, MAX_DOTS).map((event) => (\n <span\n key={event.id}\n className={styles.compactMonthDot}\n style={{ '--event-color': event.color && cssColor(event.color) } as CSSProperties}\n />\n ))}\n </span>\n </div>\n );\n }\n\n function renderPane(step: (typeof STEPS)[number]) {\n const isCurrent = step === 0;\n const className = cx(\n pagerStyles.pagerPane,\n step === -1 && pagerStyles.pagerPanePrev,\n step === 1 && pagerStyles.pagerPaneNext,\n styles.compactMonthPane,\n );\n\n if (collapsed) {\n const paneWeek = addDays(week, 7 * step);\n const dates = shownDays(paneWeek, 7, hidden);\n const perDay = eventsByDay(events, dates);\n return (\n <div\n key={dateToDay(paneWeek)}\n ref={isCurrent ? currentRef : undefined}\n className={className}\n inert={!isCurrent}\n aria-hidden={!isCurrent \|\| undefined}\n >\n <div role='row' className={styles.compactMonthWeek}>\n {dates.map((day, index) => renderDay(day, false, isCurrent, perDay[index]))}\n </div>\n </div>\n );\n }\n\n const paneMonth = addMonths(month, step);\n const gridStart = periodRange(CalendarView.Month, paneMonth, weekStartsOn).start;\n const selectedRow = isCurrent ? Math.floor(dayDiff(gridStart, date) / 7) : 0;\n return (\n <div\n key={dateToDay(paneMonth)}\n ref={isCurrent ? currentRef : undefined}\n className={className}\n inert={!isCurrent}\n aria-hidden={!isCurrent \|\| undefined}\n style={{ '--selected-row': selectedRow } as CSSProperties}\n >\n <div className={styles.compactMonthRows}>\n {Array.from({ length: 6 }, (_, row) => {\n const weekStart = addDays(gridStart, row * 7);\n const dates = shownDays(weekStart, 7, hidden);\n const perDay = eventsByDay(events, dates);\n return (\n <div\n key={dateToDay(weekStart)}\n role='row'\n className={cx(styles.compactMonthWeek, row !== selectedRow && styles.compactMonthWeekFolding)}\n >\n {dates.map((day, column) =>\n renderDay(day, day.getMonth() !== paneMonth.getMonth(), isCurrent, perDay[column]),\n )}\n </div>\n );\n })}\n </div>\n </div>\n );\n }\n\n return (\n <div ref={scrollerRef} className={styles.compactMonth} style={{ '--days': weekdays.length } as CSSProperties}>\n <div ref={monthRef} className={styles.compactMonthSticky}>\n <div role='grid' aria-label={formatMonthTitle(date, locale)}>\n <div role='row' className={styles.compactMonthWeekdays}>\n {weekdays.map((day) => (\n <div\n key={day.getDay()}\n role='columnheader'\n aria-label={formatWeekday(day, locale, 'long')}\n className={cx(styles.compactMonthWeekday, classNames?.dayHeader)}\n style={slotStyles?.dayHeader}\n >\n {formatWeekday(day, locale, 'narrow')}\n </div>\n ))}\n </div>\n <div ref={viewportRef} className={cx(pagerStyles.pagerViewport, styles.compactMonthViewport)}>\n <div ref={pager.trackRef} className={pagerStyles.pagerTrack}>\n {STEPS.map(renderPane)}\n </div>\n </div>\n </div>\n </div>\n <div className={styles.compactMonthList}>\n <div className={styles.compactMonthListTitle}>{formatLongDate(date, locale)}</div>\n <AgendaList\n className={styles.compactMonthAgenda}\n events={events}\n start={date}\n days={1}\n showDayHeaders={false}\n locale={locale}\n today={today}\n text={text}\n onEventClick={onEventClick}\n renderEvent={renderEvent}\n eventClassName={eventClassName}\n classNames={classNames}\n slotStyles={slotStyles}\n />\n </div>\n </div>\n );\n}\n\nexport default CompactMonth;\n"],"mappings":"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"}

package/dist/esm/common/calendar/components/compactMonth/compactMonth.module.mjs CHANGED Viewed

@@ -1,2 +1,2 @@
-"use client";var e=`compactMonth_FqyT2`,t=`compactMonth-sticky_jvXmc`,n=`compactMonth-weekdays_Pqo-f`,r=`compactMonth-weekday_D7FA1`,i=`compactMonth-viewport_Ala2B`,a=`compactMonth-pane_MnQpH`,o=`compactMonth-rows_s7t79`,s=`compactMonth-week_aU0xC`,c=`compactMonth-week-folding_enQnk`,l=`compactMonth-cell_cerzg`,u=`compactMonth-cell-outside_90ht-`,d=`compactMonth-number_EpPAy`,f=`compactMonth-number-today_xZAeN`,p=`compactMonth-number-selected_r3RiE`,m=`compactMonth-dots_0UvHH`,h=`compactMonth-dot_-UfnO`,g=`compactMonth-list_laIa8`,_=`compactMonth-list-header_Zo7PB`,v=`compactMonth-list-title_iT4MI`,y=`compactMonth-agenda_F0LqZ`,b={compactMonth:e,"compactMonth-sticky":`compactMonth-sticky_jvXmc`,compactMonthSticky:t,"compactMonth-weekdays":`compactMonth-weekdays_Pqo-f`,compactMonthWeekdays:n,"compactMonth-weekday":`compactMonth-weekday_D7FA1`,compactMonthWeekday:r,"compactMonth-viewport":`compactMonth-viewport_Ala2B`,compactMonthViewport:i,"compactMonth-pane":`compactMonth-pane_MnQpH`,compactMonthPane:a,"compactMonth-rows":`compactMonth-rows_s7t79`,compactMonthRows:o,"compactMonth-week":`compactMonth-week_aU0xC`,compactMonthWeek:s,"compactMonth-week-folding":`compactMonth-week-folding_enQnk`,compactMonthWeekFolding:c,"compactMonth-cell":`compactMonth-cell_cerzg`,compactMonthCell:l,"compactMonth-cell-outside":`compactMonth-cell-outside_90ht-`,compactMonthCellOutside:u,"compactMonth-number":`compactMonth-number_EpPAy`,compactMonthNumber:d,"compactMonth-number-today":`compactMonth-number-today_xZAeN`,compactMonthNumberToday:f,"compactMonth-number-selected":`compactMonth-number-selected_r3RiE`,compactMonthNumberSelected:p,"compactMonth-dots":`compactMonth-dots_0UvHH`,compactMonthDots:m,"compactMonth-dot":`compactMonth-dot_-UfnO`,compactMonthDot:h,"compactMonth-list":`compactMonth-list_laIa8`,compactMonthList:g,"compactMonth-list-header":`compactMonth-list-header_Zo7PB`,compactMonthListHeader:_,"compactMonth-list-title":`compactMonth-list-title_iT4MI`,compactMonthListTitle:v,"compactMonth-agenda":`compactMonth-agenda_F0LqZ`,compactMonthAgenda:y};export{e as compactMonth,y as compactMonthAgenda,l as compactMonthCell,u as compactMonthCellOutside,h as compactMonthDot,m as compactMonthDots,g as compactMonthList,_ as compactMonthListHeader,v as compactMonthListTitle,d as compactMonthNumber,p as compactMonthNumberSelected,f as compactMonthNumberToday,a as compactMonthPane,o as compactMonthRows,t as compactMonthSticky,i as compactMonthViewport,s as compactMonthWeek,c as compactMonthWeekFolding,r as compactMonthWeekday,n as compactMonthWeekdays,b as default};
+"use client";var e=`compactMonth_FqyT2`,t=`compactMonth-sticky_jvXmc`,n=`compactMonth-weekdays_Pqo-f`,r=`compactMonth-weekday_D7FA1`,i=`compactMonth-viewport_Ala2B`,a=`compactMonth-pane_MnQpH`,o=`compactMonth-rows_s7t79`,s=`compactMonth-week_aU0xC`,c=`compactMonth-week-folding_enQnk`,l=`compactMonth-cell_cerzg`,u=`compactMonth-cell-outside_90ht-`,d=`compactMonth-number_EpPAy`,f=`compactMonth-number-today_xZAeN`,p=`compactMonth-number-selected_r3RiE`,m=`compactMonth-dots_0UvHH`,h=`compactMonth-dot_-UfnO`,g=`compactMonth-list_laIa8`,_=`compactMonth-list-title_iT4MI`,v=`compactMonth-agenda_F0LqZ`,y={compactMonth:e,"compactMonth-sticky":`compactMonth-sticky_jvXmc`,compactMonthSticky:t,"compactMonth-weekdays":`compactMonth-weekdays_Pqo-f`,compactMonthWeekdays:n,"compactMonth-weekday":`compactMonth-weekday_D7FA1`,compactMonthWeekday:r,"compactMonth-viewport":`compactMonth-viewport_Ala2B`,compactMonthViewport:i,"compactMonth-pane":`compactMonth-pane_MnQpH`,compactMonthPane:a,"compactMonth-rows":`compactMonth-rows_s7t79`,compactMonthRows:o,"compactMonth-week":`compactMonth-week_aU0xC`,compactMonthWeek:s,"compactMonth-week-folding":`compactMonth-week-folding_enQnk`,compactMonthWeekFolding:c,"compactMonth-cell":`compactMonth-cell_cerzg`,compactMonthCell:l,"compactMonth-cell-outside":`compactMonth-cell-outside_90ht-`,compactMonthCellOutside:u,"compactMonth-number":`compactMonth-number_EpPAy`,compactMonthNumber:d,"compactMonth-number-today":`compactMonth-number-today_xZAeN`,compactMonthNumberToday:f,"compactMonth-number-selected":`compactMonth-number-selected_r3RiE`,compactMonthNumberSelected:p,"compactMonth-dots":`compactMonth-dots_0UvHH`,compactMonthDots:m,"compactMonth-dot":`compactMonth-dot_-UfnO`,compactMonthDot:h,"compactMonth-list":`compactMonth-list_laIa8`,compactMonthList:g,"compactMonth-list-title":`compactMonth-list-title_iT4MI`,compactMonthListTitle:_,"compactMonth-agenda":`compactMonth-agenda_F0LqZ`,compactMonthAgenda:v};export{e as compactMonth,v as compactMonthAgenda,l as compactMonthCell,u as compactMonthCellOutside,h as compactMonthDot,m as compactMonthDots,g as compactMonthList,_ as compactMonthListTitle,d as compactMonthNumber,p as compactMonthNumberSelected,f as compactMonthNumberToday,a as compactMonthPane,o as compactMonthRows,t as compactMonthSticky,i as compactMonthViewport,s as compactMonthWeek,c as compactMonthWeekFolding,r as compactMonthWeekday,n as compactMonthWeekdays,y as default};
 //# sourceMappingURL=compactMonth.module.mjs.map

package/dist/esm/common/calendar/components/compactMonth/compactMonth.module.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"compactMonth.module.mjs","names":[],"sources":["../../../../../../package/common/calendar/components/compactMonth/compactMonth.module.pcss"],"sourcesContent":["/* `--collapse` runs from 0 (the whole month) to 1 (only the selected week), written by the\n component from the scroll position. Five rows fold away over five rows of scrolling, so the\n clipped edge of the month and the top of the list below it stay level the whole way. /\n.compactMonth {\n --row: 2.75em;\n --weekdays: 1.75em;\n\n position: relative;\n flex: 1;\n min-height: 0;\n overflow-y: auto;\n overscroll-behavior-y: contain;\n\n &-sticky {\n position: sticky;\n top: 0;\n z-index: 1;\n\n / The folded rows are clipped, not removed, so this box still spans all six: it must not\n catch the taps meant for the list showing through below the fold. /\n pointer-events: none;\n user-select: none;\n -webkit-touch-callout: none;\n }\n\n &-weekdays {\n display: grid;\n grid-template-columns: repeat(var(--days), minmax(0, 1fr));\n align-items: center;\n height: var(--weekdays);\n background: var(--background);\n pointer-events: auto;\n }\n\n &-weekday {\n font-size: 0.6875em;\n font-weight: 600;\n text-align: center;\n color: var(--text-dark);\n }\n\n &-viewport {\n height: calc(6 var(--row));\n clip-path: inset(0 0 calc(5 * var(--row) * var(--collapse, 0)) 0);\n pointer-events: auto;\n\n /* Horizontal swipes page the month or week; vertical ones fold it. /\n touch-action: pan-y;\n }\n\n &-pane {\n background: var(--background);\n }\n\n / Keeps the selected week in view while the rows around it fold away above and below it.\n Reduced motion is handled where `--collapse` is written, which is then only 0 or 1: freezing\n this transform instead would clip the selected week out of view mid-fold. /\n &-rows {\n transform: translateY(calc(var(--selected-row, 0) var(--row) * var(--collapse, 0) * -1));\n }\n\n &-week {\n display: grid;\n grid-template-columns: repeat(var(--days), minmax(0, 1fr));\n height: var(--row);\n\n &-folding {\n opacity: calc(1 - var(--collapse, 0));\n }\n }\n\n &-cell {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 0.1875em;\n min-width: 0;\n outline: none;\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n\n &-outside {\n color: var(--text-light);\n }\n\n &:focus-visible .compactMonth-number {\n box-shadow: 0 0 0 2px var(--focus-border-color, var(--primary-color));\n }\n }\n\n &-number {\n display: grid;\n place-items: center;\n width: 1.875em;\n height: 1.875em;\n border-radius: 50%;\n font-size: 0.9375em;\n font-variant-numeric: tabular-nums;\n transition:\n background-color 0.15s ease,\n color 0.15s ease;\n\n &-today {\n color: var(--custom-calendar-today-color);\n font-weight: 700;\n }\n\n &-selected {\n background: var(--text-color);\n color: var(--background);\n font-weight: 600;\n }\n }\n\n &-dots {\n display: flex;\n gap: 2px;\n height: 4px;\n }\n\n &-dot {\n width: 4px;\n height: 4px;\n border-radius: 50%;\n background: var(--event-color, var(--primary-color));\n }\n\n /* Tall enough that the month can always fold all the way, however few events the day has. /\n &-list {\n min-height: calc(100% - var(--weekdays) - var(--row));\n border-top: 1px solid var(--border-color);\n\n &-~~header~~ {\n ~~display~~: ~~flex;\n align-items: center;\n justify-content: space-between;\n gap:~~ 0.~~5em;\n padding:~~ 0.~~75em~~ ~~1em~~ 0.~~125em~~;\n ~~}\n\n &-title {\n~~ font-size: 0.8125em;\n font-weight: 600;\n color: var(--text-dark);\n }\n }\n}\n\n/ Today stays marked when it is also the selected day. /\n.compactMonth-number-today.compactMonth-number-selected {\n background: var(--custom-calendar-today-color);\n color: var(--text-on-primary);\n}\n\n/ Scrolls with the page it sits in, rather than on its own. Two classes, to outrank AgendaList's\n own rule whichever stylesheet loads first. */\n.compactMonth .compactMonth-agenda {\n flex: none;\n overflow: visible;\n}\n"],"mappings":""}
1	+ {"version":3,"file":"compactMonth.module.mjs","names":[],"sources":["../../../../../../package/common/calendar/components/compactMonth/compactMonth.module.pcss"],"sourcesContent":["/* `--collapse` runs from 0 (the whole month) to 1 (only the selected week), written by the\n component from the scroll position. Five rows fold away over five rows of scrolling, so the\n clipped edge of the month and the top of the list below it stay level the whole way. /\n.compactMonth {\n --row: 2.75em;\n --weekdays: 1.75em;\n\n position: relative;\n flex: 1;\n min-height: 0;\n overflow-y: auto;\n overscroll-behavior-y: contain;\n\n &-sticky {\n position: sticky;\n top: 0;\n z-index: 1;\n\n / The folded rows are clipped, not removed, so this box still spans all six: it must not\n catch the taps meant for the list showing through below the fold. /\n pointer-events: none;\n user-select: none;\n -webkit-touch-callout: none;\n }\n\n &-weekdays {\n display: grid;\n grid-template-columns: repeat(var(--days), minmax(0, 1fr));\n align-items: center;\n height: var(--weekdays);\n background: var(--background);\n pointer-events: auto;\n }\n\n &-weekday {\n font-size: 0.6875em;\n font-weight: 600;\n text-align: center;\n color: var(--text-dark);\n }\n\n &-viewport {\n height: calc(6 var(--row));\n clip-path: inset(0 0 calc(5 * var(--row) * var(--collapse, 0)) 0);\n pointer-events: auto;\n\n /* Horizontal swipes page the month or week; vertical ones fold it. /\n touch-action: pan-y;\n }\n\n &-pane {\n background: var(--background);\n }\n\n / Keeps the selected week in view while the rows around it fold away above and below it.\n Reduced motion is handled where `--collapse` is written, which is then only 0 or 1: freezing\n this transform instead would clip the selected week out of view mid-fold. /\n &-rows {\n transform: translateY(calc(var(--selected-row, 0) var(--row) * var(--collapse, 0) * -1));\n }\n\n &-week {\n display: grid;\n grid-template-columns: repeat(var(--days), minmax(0, 1fr));\n height: var(--row);\n\n &-folding {\n opacity: calc(1 - var(--collapse, 0));\n }\n }\n\n &-cell {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 0.1875em;\n min-width: 0;\n outline: none;\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n\n &-outside {\n color: var(--text-light);\n }\n\n &:focus-visible .compactMonth-number {\n box-shadow: 0 0 0 2px var(--focus-border-color, var(--primary-color));\n }\n }\n\n &-number {\n display: grid;\n place-items: center;\n width: 1.875em;\n height: 1.875em;\n border-radius: 50%;\n font-size: 0.9375em;\n font-variant-numeric: tabular-nums;\n transition:\n background-color 0.15s ease,\n color 0.15s ease;\n\n &-today {\n color: var(--custom-calendar-today-color);\n font-weight: 700;\n }\n\n &-selected {\n background: var(--text-color);\n color: var(--background);\n font-weight: 600;\n }\n }\n\n &-dots {\n display: flex;\n gap: 2px;\n height: 4px;\n }\n\n &-dot {\n width: 4px;\n height: 4px;\n border-radius: 50%;\n background: var(--event-color, var(--primary-color));\n }\n\n /* Tall enough that the month can always fold all the way, however few events the day has. /\n &-list {\n min-height: calc(100% - var(--weekdays) - var(--row));\n border-top: 1px solid var(--border-color);\n\n &-title {\n padding: 0.9em 1.25em 0.15em;\n font-size: 0.8125em;\n font-weight: 600;\n color: var(--text-dark);\n }\n }\n}\n\n/ Today stays marked when it is also the selected day. /\n.compactMonth-number-today.compactMonth-number-selected {\n background: var(--custom-calendar-today-color);\n color: var(--text-on-primary);\n}\n\n/ Scrolls with the page it sits in, rather than on its own. Two classes, to outrank AgendaList's\n own rule whichever stylesheet loads first. */\n.compactMonth .compactMonth-agenda {\n flex: none;\n overflow: visible;\n}\n"],"mappings":""}

package/dist/esm/common/calendar/components/monthView/monthView.mjs CHANGED Viewed

@@ -1,2 +1,2 @@
-"use client";import{isSelfActivation as e}from"../../../utils/activationKey.mjs";import t from"../../../button/button.mjs";import{PopoverAlign as n,PopoverPlacement as r}from"../../../popover/popover.types.mjs";import i from"../../../popover/popover.mjs";import{dateToDay as a}from"../../../utils/day.mjs";import{CalendarView as o}from"../../calendar.types.mjs";import{addDays as s,addMonths as c,dayDiff as l,endAfter as u,gridKeyTarget as ee,isSameDay as d,periodRange as f,shiftDays as p,shownDays as m,startOfMonth as te,startOfWeek as ne}from"../../dates.mjs";import{formatDayNumber as re,formatLongDate as h,formatMonthTitle as ie,formatTime as ae,formatWeekday as g}from"../../format.mjs";import{eventDays as oe,eventEnd as se,eventsByDay as ce,isAllDayLike as le,limitLanes as ue,packLanes as de}from"../../layout.mjs";import fe from"../agendaList/agendaList.mjs";import{clamp as _,pageStep as pe}from"../../gesture.mjs";import{useGestures as me}from"../../useGestures.mjs";import{usePager as he}from"../../usePager.mjs";import v from"../../pager.module.mjs";import y from"./monthView.module.mjs";import{useLayoutEffect as b,useRef as x,useState as S}from"react";import C from"classnames";import{jsx as w,jsxs as T}from"react/jsx-runtime";var ge=[-1,0,1];function E({events:E,date:D,locale:O,weekStartsOn:k,hidden:A,text:j,onDateChange:M,onOpenDay:N,onEventClick:P,onEventChange:F,onSlotCreate:I,renderEvent:L,classNames:R,slotStyles:z}){let B=x(null),V=x(null),H=x(null),U=x(null),[_e,W]=S(1/0),[G,K]=S(null),[q,J]=S(null),Y=te(D),X=new Date,Z=m(ne(X,k),7,A),ve=f(o.Month,Y,k).start,ye=(e,t)=>m(s(e,t*7),7,A),Q=he(a(Y),e=>M(c(D,e)),()=>H.current?.querySelector(`[tabindex="0"]`)??null);b(()=>{let e=V.current;if(!e)return;function t(){let t=e.querySelector(`[data-cal-bars]`);if(!t||t.clientHeight===0){W(1/0);return}let n=getComputedStyle(t),r=parseFloat(n.gridAutoRows),i=parseFloat(n.rowGap)||0,a=parseFloat(n.paddingTop)||0;W(r>0?Math.max(1,Math.floor((t.clientHeight-a+i)/(r+i))):1/0)}t();let n=new ResizeObserver(t);return n.observe(e),()=>n.disconnect()},[]),b(()=>{let e=U.current;e!==null&&(U.current=null,H.current?.querySelector(`[data-cal-day="${e}"]`)?.focus())});function $(e){let t=H.current;if(!t)return null;let n=t.getBoundingClientRect();if(n.width===0||n.height===0)return null;let r=Z.length,i=_(Math.floor((e.x-n.left)/n.width*r),0,r-1),a=_(Math.floor((e.y-n.top)/n.height*6),0,5);return ye(ve,a)[i]}function be(e){return H.current?.querySelector(`[data-cal-day="${a(e)}"]`)??null}me(B,{onPress:Q.finish,canSwipe:()=>!0,onSwipeMove:Q.move,onSwipeEnd:(e,t)=>Q.settle(pe(e,Q.width(),t)),dragFrom:(e,t)=>{if(!F)return null;let n=e.closest(`[data-cal-event]`);if(!n||!H.current?.contains(n))return null;let r=E.find(e=>String(e.id)===n.dataset.calEvent),i=$(t);return!r||r.readOnly||i===null?null:{event:r,grabbed:i,offset:0}},onDragStart:J,onDragMove:e=>{let t=$(e);t!==null&&J(e=>{if(!e)return e;let n=l(e.grabbed,t);return n===e.offset?e:{...e,offset:n}})},onDragEnd:e=>{J(null);let t=$(e);if(!q||t===null)return;let n=l(q.grabbed,t);if(n===0)return;let r=p(q.event.start,n),i=(se(q.event).getTime()-q.event.start.getTime())/6e4;F?.({event:q.event,start:r,end:u(r,p(q.event.end,n),i)})},onDragCancel:()=>J(null)});function xe(e,t){let n=be(e);n&&K({day:e,anchor:n,fromKeyboard:t})}function Se(e,t){if(N&&e.target.closest(`[data-cal-day-number]`)){N(t);return}I?.({start:t,end:s(t,1),allDay:!0},e.currentTarget)}function Ce(t,n){let r=ee(t.key,n,k,A);if(!r){e(t)&&(t.preventDefault(),xe(n,!0));return}t.preventDefault(),U.current=a(r),M(r)}function we(e){let{event:t}=e,n=le(t)||e.span>1||e.continuesBefore||e.continuesAfter,r=!!P||!!F&&!t.readOnly;return T(`div`,{"data-cal-event":String(t.id),className:C(y.monthViewBar,n?y.monthViewBarFilled:y.monthViewBarTimed,e.continuesBefore&&y.monthViewBarContinuesBefore,e.continuesAfter&&y.monthViewBarContinuesAfter,r&&y.monthViewBarInteractive,q?.event===t&&y.monthViewBarDragging,R?.event),style:{"--event-color":t.color,gridColumn:`${e.start+1} / span ${e.span}`,gridRow:e.lane+1,...z?.event},onClick:e=>P?.(t,e.currentTarget),children:[!n&&w(`span`,{className:y.monthViewDot}),!n&&w(`span`,{className:y.monthViewTime,children:ae(t.start,O)}),w(`span`,{className:y.monthViewBarTitle,children:L?L(t,{singleLine:!0}):t.title})]},t.id)}function Te(e){let t=c(Y,e),n=e===0,r=f(o.Month,t,k).start,i=null;if(n&&q&&q.offset!==0){let{first:e,last:t}=oe(q.event);i={from:s(e,q.offset),to:s(t,q.offset)}}return w(`div`,{ref:n?H:void 0,className:C(v.pagerPane,e===-1&&v.pagerPanePrev,e===1&&v.pagerPaneNext,y.monthViewPane),inert:!n,"aria-hidden":!n||void 0,children:Array.from({length:6},(e,o)=>{let s=ye(r,o),c=ce(E,s),u=ue(de(E,s),s.length,_e);return T(`div`,{role:`row`,className:y.monthViewWeek,children:[s.map((e,r)=>{let o=c[r].length,s=d(e,X),u=h(e,O);return w(`div`,{role:`gridcell`,"data-cal-day":a(e),tabIndex:n&&d(e,D)?0:-1,"aria-current":s?`date`:void 0,"aria-label":o>0?`${u}, ${j.eventCount(o)}`:u,className:C(y.monthViewCell,e.getMonth()!==t.getMonth()&&y.monthViewCellOutside,I&&y.monthViewCellCreatable,i&&l(i.from,e)>=0&&l(e,i.to)>=0&&y.monthViewCellTarget,R?.cell),style:z?.cell,onClick:t=>Se(t,e),onKeyDown:t=>Ce(t,e),children:w(`span`,{"data-cal-day-number":!0,"aria-hidden":!0,className:C(y.monthViewDayNumber,s&&y.monthViewDayNumberToday,N&&y.monthViewDayNumberLink),children:re(e,O)})},a(e))}),T(`div`,{"data-cal-bars":!0,"aria-hidden":!0,className:y.monthViewBars,children:[u.visible.map(we),u.hidden.map((e,t)=>e>0&&w(`div`,{className:y.monthViewMore,style:{gridColumn:t+1,gridRow:u.moreLane+1},onClick:()=>xe(s[t],!1),children:j.more(e)},`more-${t}`))]})]},a(s[0]))})},a(t))}return T(`div`,{ref:B,className:y.monthView,style:{"--days":Z.length},children:[T(`div`,{role:`grid`,"aria-label":ie(D,O),className:y.monthViewGrid,children:[w(`div`,{role:`row`,className:y.monthViewWeekdays,children:Z.map(e=>w(`div`,{role:`columnheader`,"aria-label":g(e,O,`long`),className:C(y.monthViewWeekday,R?.dayHeader),style:z?.dayHeader,children:g(e,O,`short`)},e.getDay()))}),w(`div`,{ref:V,className:C(v.pagerViewport,y.monthViewViewport),children:w(`div`,{ref:Q.trackRef,className:v.pagerTrack,children:ge.map(Te)})})]}),w(i,{anchor:G?.anchor??null,isOpen:G!==null,onOpenChange:e=>!e&&K(null),focusOnOpen:G?.fromKeyboard??!1,placement:r.Bottom,align:n.Start,content:G&&T(`div`,{className:y.monthViewList,children:[w(`div`,{className:y.monthViewListTitle,children:h(G.day,O)}),w(fe,{className:y.monthViewListEvents,events:E,start:G.day,days:1,showDayHeaders:!1,locale:O,text:j,onEventClick:e=>{K(null),P?.(e,G.anchor)},renderEvent:L,classNames:R,slotStyles:z}),I&&w(t,{className:y.monthViewListCreate,onClick:()=>{K(null),I({start:G.day,end:s(G.day,1),allDay:!0},G.anchor)},children:j.newEvent})]})})]})}export{E as default};
+"use client";import{isSelfActivation as e}from"../../../utils/activationKey.mjs";import{cssColor as t}from"../../../styles/tone.mjs";import n from"../../../button/button.mjs";import{PopoverAlign as r,PopoverPlacement as i}from"../../../popover/popover.types.mjs";import{isDismissClick as a}from"../../../utils/dismissClick.mjs";import o from"../../../popover/popover.mjs";import{dateToDay as s}from"../../../utils/day.mjs";import{CalendarView as c}from"../../calendar.types.mjs";import{addDays as l,addMonths as u,allDaySlot as d,dayDiff as f,gridKeyTarget as ee,isSameDay as p,periodRange as m,shownDays as te,startOfMonth as ne,startOfWeek as re,weekNumber as ie}from"../../dates.mjs";import{formatDayNumber as ae,formatLongDate as oe,formatMonthTitle as se,formatTime as ce,formatWeekday as le}from"../../format.mjs";import{eventDays as ue,eventsByDay as de,isAllDayLike as fe,limitLanes as pe,moveByDays as me,packLanes as he}from"../../layout.mjs";import ge from"../agendaList/agendaList.mjs";import{clamp as _e,pageStep as ve}from"../../gesture.mjs";import{useGestures as ye}from"../../useGestures.mjs";import{usePager as be}from"../../usePager.mjs";import h from"../../pager.module.mjs";import g from"./monthView.module.mjs";import{useLayoutEffect as _,useRef as v,useState as y}from"react";import b from"classnames";import{jsx as x,jsxs as S}from"react/jsx-runtime";var xe=[-1,0,1];function C({events:C,date:w,today:T,locale:E,weekStartsOn:D,hidden:O,showWeekNumbers:Se,text:k,onDateChange:A,onOpenDay:j,onEventClick:M,onEventChange:N,onSlotCreate:P,renderEvent:F,eventClassName:I,classNames:L,slotStyles:R}){let z=v(null),B=v(null),V=v(null),H=v(null),U=v(null),[Ce,W]=y(1/0),[G,K]=y(null),[q,we]=y(null),J=ne(w),Y=te(re(T,D),7,O),Te=m(c.Month,J,D).start,Ee=(e,t)=>te(l(e,t*7),7,O),X=be(s(J),e=>A(u(w,e)),()=>V.current?.querySelector(`[tabindex="0"]`)??null);_(()=>{let e=B.current;if(!e)return;function t(){let t=e.querySelector(`[data-cal-bars]`);if(!t||t.clientHeight===0){W(1/0);return}let n=getComputedStyle(t),r=parseFloat(n.gridAutoRows),i=parseFloat(n.rowGap)||0,a=parseFloat(n.paddingTop)||0;W(r>0?Math.max(1,Math.floor((t.clientHeight-a+i)/(r+i))):1/0)}t();let n=new ResizeObserver(t);return n.observe(e),()=>n.disconnect()},[]),_(()=>{let e=H.current;e!==null&&(H.current=null,V.current?.querySelector(`[data-cal-day="${e}"]`)?.focus())});function Z(e){let t=V.current;if(!t)return null;let n=t.getBoundingClientRect();if(n.width===0||n.height===0)return null;let r=Y.length,i=_e(Math.floor((e.x-n.left)/n.width*r),0,r-1),a=_e(Math.floor((e.y-n.top)/n.height*6),0,5);return Ee(Te,a)[i]}function De(e){return V.current?.querySelector(`[data-cal-day="${s(e)}"]`)??null}function Q(e){U.current=e,we(e)}ye(z,{onPress:X.finish,canSwipe:()=>!0,onSwipeMove:X.move,onSwipeEnd:(e,t)=>X.settle(ve(e,X.width(),t)),dragFrom:(e,t)=>{if(!V.current?.contains(e))return null;let n=Z(t);if(n===null)return null;let r=e.closest(`[data-cal-event]`);if(r){let e=N&&C.find(e=>String(e.id)===r.dataset.calEvent);return e&&!e.readOnly?{event:e,grabbed:n,offset:0}:null}return!P||e.closest(`[data-cal-more]`)||j&&e.closest(`[data-cal-day-number]`)?null:{event:null,grabbed:n,offset:0}},onDragStart:Q,onDragMove:e=>{let t=U.current,n=Z(e);if(!t||n===null)return;let r=f(t.grabbed,n);r!==t.offset&&Q({...t,offset:r})},onDragEnd:e=>{let t=U.current;Q(null);let n=Z(e);if(!t||n===null)return;let{event:r,grabbed:i}=t;if(!r){let e=d(i,n);P?.(e,De(e.start)??z.current);return}let a=f(i,n);a!==0&&N?.({event:r,...me(r,a)})},onDragCancel:()=>Q(null)});function $(e,t){let n=De(e);n&&K({day:e,anchor:n,fromKeyboard:t})}function Oe(e,t){if(j&&e.target.closest(`[data-cal-day-number]`)){j(t);return}a(e.nativeEvent)||P?.(d(t),e.currentTarget)}function ke(t,n){let r=ee(t.key,n,D,O);if(!r){e(t)&&(t.preventDefault(),$(n,!0));return}t.preventDefault(),H.current=s(r),A(r)}function Ae(e){let{event:n}=e,r=fe(n)||e.span>1||e.continuesBefore||e.continuesAfter,i=!!M||!!N&&!n.readOnly;return S(`div`,{"data-cal-event":String(n.id),className:b(g.monthViewBar,r?g.monthViewBarFilled:g.monthViewBarTimed,e.continuesBefore&&g.monthViewBarContinuesBefore,e.continuesAfter&&g.monthViewBarContinuesAfter,i&&g.monthViewBarInteractive,q?.event===n&&g.monthViewBarDragging,L?.event,I?.(n)),style:{"--event-color":n.color&&t(n.color),gridColumn:`${e.start+1} / span ${e.span}`,gridRow:e.lane+1,...R?.event},onClick:e=>M?.(n,e.currentTarget),children:[!r&&x(`span`,{className:g.monthViewDot}),!r&&x(`span`,{className:g.monthViewTime,children:ce(n.start,E)}),x(`span`,{className:g.monthViewBarTitle,children:F?F(n,{singleLine:!0}):n.title})]},n.id)}function je(e){let t=u(J,e),n=e===0,r=m(c.Month,t,D).start,i=null;if(n&&q?.event&&q.offset!==0){let{first:e,last:t}=ue(q.event);i={from:l(e,q.offset),to:l(t,q.offset)}}else if(n&&q&&!q.event){let e=l(q.grabbed,q.offset);i=q.offset<0?{from:e,to:q.grabbed}:{from:q.grabbed,to:e}}return x(`div`,{ref:n?V:void 0,className:b(h.pagerPane,e===-1&&h.pagerPanePrev,e===1&&h.pagerPaneNext,g.monthViewPane),inert:!n,"aria-hidden":!n||void 0,children:Array.from({length:6},(e,a)=>{let o=Ee(r,a),c=de(C,o),l=pe(he(C,o),o.length,Ce),u=Se?k.weekNumber(ie(o[Math.floor(o.length/2)])):void 0;return S(`div`,{role:`row`,"aria-label":u,className:g.monthViewWeek,children:[o.map((e,r)=>{let a=c[r].length,o=p(e,T),l=oe(e,E);return S(`div`,{role:`gridcell`,"data-cal-day":s(e),tabIndex:n&&p(e,w)?0:-1,"aria-current":o?`date`:void 0,"aria-label":a>0?`${l}, ${k.eventCount(a)}`:l,className:b(g.monthViewCell,e.getMonth()!==t.getMonth()&&g.monthViewCellOutside,P&&g.monthViewCellCreatable,i&&f(i.from,e)>=0&&f(e,i.to)>=0&&g.monthViewCellTarget,L?.cell),style:R?.cell,onClick:t=>Oe(t,e),onKeyDown:t=>ke(t,e),children:[x(`span`,{"data-cal-day-number":!0,"aria-hidden":!0,className:b(g.monthViewDayNumber,o&&g.monthViewDayNumberToday,j&&g.monthViewDayNumberLink),children:ae(e,E)}),u&&r===0&&x(`span`,{"aria-hidden":!0,className:g.monthViewWeekNumber,children:u})]},s(e))}),S(`div`,{"data-cal-bars":!0,"aria-hidden":!0,className:g.monthViewBars,children:[l.visible.map(Ae),l.hidden.map((e,t)=>e>0&&x(`div`,{"data-cal-more":!0,className:g.monthViewMore,style:{gridColumn:t+1,gridRow:l.moreLane+1},onClick:()=>$(o[t],!1),children:k.more(e)},`more-${t}`))]})]},s(o[0]))})},s(t))}return S(`div`,{ref:z,className:g.monthView,style:{"--days":Y.length},children:[S(`div`,{role:`grid`,"aria-label":se(w,E),className:g.monthViewGrid,children:[x(`div`,{role:`row`,className:g.monthViewWeekdays,children:Y.map(e=>x(`div`,{role:`columnheader`,"aria-label":le(e,E,`long`),className:b(g.monthViewWeekday,L?.dayHeader),style:R?.dayHeader,children:le(e,E,`short`)},e.getDay()))}),x(`div`,{ref:B,className:b(h.pagerViewport,g.monthViewViewport),children:x(`div`,{ref:X.trackRef,className:h.pagerTrack,children:xe.map(je)})})]}),x(o,{anchor:G?.anchor??null,isOpen:G!==null,onOpenChange:e=>!e&&K(null),focusOnOpen:G?.fromKeyboard??!1,placement:i.Bottom,align:r.Start,content:G&&S(`div`,{className:g.monthViewList,children:[x(`div`,{className:g.monthViewListTitle,children:oe(G.day,E)}),x(ge,{className:g.monthViewListEvents,events:C,start:G.day,days:1,showDayHeaders:!1,locale:E,today:T,text:k,onEventClick:e=>{K(null),M?.(e,G.anchor)},renderEvent:F,eventClassName:I,classNames:L,slotStyles:R}),P&&x(n,{className:g.monthViewListCreate,onClick:()=>{K(null),P(d(G.day),G.anchor)},children:k.newEvent})]})})]})}export{C as default};
 //# sourceMappingURL=monthView.mjs.map

package/dist/esm/common/calendar/components/monthView/monthView.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"monthView.mjs","names":[],"sources":["../../../../../../package/common/calendar/components/monthView/monthView.tsx"],"sourcesContent":["import {\n useLayoutEffect,\n useRef,\n useState,\n type CSSProperties,\n type KeyboardEvent,\n type MouseEvent,\n type ReactElement,\n} from 'react';\nimport cx from 'classnames';\n\nimport Button from 'components/common/button';\nimport Popover from 'components/common/popover';\nimport { PopoverAlign, PopoverPlacement } from 'components/common/popover/popover.types';\nimport { isSelfActivation } from 'components/common/utils/activationKey';\nimport { CalendarView, type CalendarEvent } from '../../calendar.types';\nimport {\n addDays,\n addMonths,\n dayDiff,\n dateToDay,\n endAfter,\n gridKeyTarget,\n isSameDay,\n periodRange,\n shiftDays,\n shownDays,\n startOfMonth,\n startOfWeek,\n} from '../../dates';\nimport { formatDayNumber, formatLongDate, formatMonthTitle, formatTime, formatWeekday } from '../../format';\nimport { clamp, pageStep } from '../../gesture';\nimport { eventDays, eventEnd, eventsByDay, isAllDayLike, limitLanes, packLanes, type LaneBar } from '../../layout';\nimport { useGestures, type GesturePoint } from '../../useGestures';\nimport { usePager } from '../../usePager';\nimport AgendaList from '../agendaList';\nimport type { MonthDrag, MonthViewProps } from './monthView.types';\n\nimport pagerStyles from '../../pager.module.pcss';\nimport styles from './monthView.module.pcss';\n\nconst STEPS = [-1, 0, 1] as const;\n\nfunction MonthView<E extends CalendarEvent>({\n events,\n date,\n locale,\n weekStartsOn,\n hidden,\n text,\n onDateChange,\n onOpenDay,\n onEventClick,\n onEventChange,\n onSlotCreate,\n renderEvent,\n classNames,\n slotStyles,\n}: MonthViewProps<E>): ReactElement {\n const rootRef = useRef<HTMLDivElement>(null);\n const viewportRef = useRef<HTMLDivElement>(null);\n const currentRef = useRef<HTMLDivElement>(null);\n const pendingFocus = useRef<string \| null>(null);\n const [capacity, setCapacity] = useState(Infinity);\n const [list, setList] = useState<{ day: Date; anchor: HTMLElement; fromKeyboard: boolean } \| null>(null);\n const [drag, setDrag] = useState<MonthDrag<E> \| null>(null);\n\n const month = startOfMonth(date);\n const today = new Date();\n const weekdays = shownDays(startOfWeek(today, weekStartsOn), 7, hidden);\n const gridStart = periodRange(CalendarView.Month, month, weekStartsOn).start;\n const rowDates = (paneStart: Date, row: number) => shownDays(addDays(paneStart, row * 7), 7, hidden);\n\n const pager = usePager(\n dateToDay(month),\n (step) => onDateChange(addMonths(date, step)),\n () => currentRef.current?.querySelector<HTMLElement>('[tabindex=\"0\"]') ?? null,\n );\n\n // Lanes that fit a cell, from the real geometry, so `+N` appears exactly when bars would clip.\n // Without layout (jsdom) there is nothing to measure, and every event is shown.\n useLayoutEffect(() => {\n const viewport = viewportRef.current;\n if (!viewport) return;\n function measure() {\n const bars = viewport!.querySelector<HTMLElement>('[data-cal-bars]');\n if (!bars \|\| bars.clientHeight === 0) {\n setCapacity(Infinity);\n return;\n }\n const style = getComputedStyle(bars);\n const lane = parseFloat(style.gridAutoRows);\n const gap = parseFloat(style.rowGap) \|\| 0;\n const top = parseFloat(style.paddingTop) \|\| 0;\n setCapacity(lane > 0 ? Math.max(1, Math.floor((bars.clientHeight - top + gap) / (lane + gap))) : Infinity);\n }\n measure();\n const observer = new ResizeObserver(measure);\n observer.observe(viewport);\n return () => observer.disconnect();\n }, []);\n\n // Arrowing onto a day of the next month pages first, so the cell to focus only exists after\n // the render that follows.\n useLayoutEffect(() => {\n const key = pendingFocus.current;\n if (key === null) return;\n pendingFocus.current = null;\n currentRef.current?.querySelector<HTMLElement>(`[data-cal-day=\"${key}\"]`)?.focus();\n });\n\n function dayAt(point: GesturePoint): Date \| null {\n const pane = currentRef.current;\n if (!pane) return null;\n const rect = pane.getBoundingClientRect();\n if (rect.width === 0 \|\| rect.height === 0) return null;\n const count = weekdays.length;\n const column = clamp(Math.floor(((point.x - rect.left) / rect.width) * count), 0, count - 1);\n const row = clamp(Math.floor(((point.y - rect.top) / rect.height) * 6), 0, 5);\n return rowDates(gridStart, row)[column];\n }\n\n function cellFor(day: Date): HTMLElement \| null {\n return currentRef.current?.querySelector<HTMLElement>(`[data-cal-day=\"${dateToDay(day)}\"]`) ?? null;\n }\n\n useGestures<MonthDrag<E>>(rootRef, {\n onPress: pager.finish,\n canSwipe: () => true,\n onSwipeMove: pager.move,\n onSwipeEnd: (dx, velocity) => pager.settle(pageStep(dx, pager.width(), velocity)),\n dragFrom: (target, point) => {\n if (!onEventChange) return null;\n const element = target.closest<HTMLElement>('[data-cal-event]');\n if (!element \|\| !currentRef.current?.contains(element)) return null;\n const event = events.find((candidate) => String(candidate.id) === element.dataset.calEvent);\n const grabbed = dayAt(point);\n if (!event \|\| event.readOnly \|\| grabbed === null) return null;\n return { event, grabbed, offset: 0 };\n },\n onDragStart: setDrag,\n onDragMove: (point) => {\n const day = dayAt(point);\n if (day === null) return;\n setDrag((current) => {\n if (!current) return current;\n const offset = dayDiff(current.grabbed, day);\n return offset === current.offset ? current : { ...current, offset };\n });\n },\n onDragEnd: (point) => {\n setDrag(null);\n const day = dayAt(point);\n if (!drag \|\| day === null) return;\n const offset = dayDiff(drag.grabbed, day);\n if (offset === 0) return;\n const start = shiftDays(drag.event.start, offset);\n const length = (eventEnd(drag.event).getTime() - drag.event.start.getTime()) / 60_000;\n onEventChange?.({\n event: drag.event,\n start,\n end: endAfter(start, shiftDays(drag.event.end, offset), length),\n });\n },\n onDragCancel: () => setDrag(null),\n });\n\n function openList(day: Date, fromKeyboard: boolean) {\n const anchor = cellFor(day);\n if (anchor) setList({ day, anchor, fromKeyboard });\n }\n\n function handleCellClick(clickEvent: MouseEvent<HTMLDivElement>, day: Date) {\n if (onOpenDay && (clickEvent.target as Element).closest('[data-cal-day-number]')) {\n onOpenDay(day);\n return;\n }\n onSlotCreate?.({ start: day, end: addDays(day, 1), allDay: true }, clickEvent.currentTarget);\n }\n\n function handleKeyDown(keyEvent: KeyboardEvent<HTMLDivElement>, day: Date) {\n const next = gridKeyTarget(keyEvent.key, day, weekStartsOn, hidden);\n if (!next) {\n if (isSelfActivation(keyEvent)) {\n keyEvent.preventDefault();\n openList(day, true);\n }\n return;\n }\n keyEvent.preventDefault();\n pendingFocus.current = dateToDay(next);\n onDateChange(next);\n }\n\n function renderBar(bar: LaneBar<E>) {\n const { event } = bar;\n const filled = isAllDayLike(event) \|\| bar.span > 1 \|\| bar.continuesBefore \|\| bar.continuesAfter;\n const interactive = Boolean(onEventClick) \|\| (Boolean(onEventChange) && !event.readOnly);\n return (\n <div\n key={event.id}\n data-cal-event={String(event.id)}\n className={cx(\n styles.monthViewBar,\n filled ? styles.monthViewBarFilled : styles.monthViewBarTimed,\n bar.continuesBefore && styles.monthViewBarContinuesBefore,\n bar.continuesAfter && styles.monthViewBarContinuesAfter,\n interactive && styles.monthViewBarInteractive,\n drag?.event === event && styles.monthViewBarDragging,\n classNames?.event,\n )}\n style={\n {\n '--event-color': event.color,\n gridColumn: `${bar.start + 1} / span ${bar.span}`,\n gridRow: bar.lane + 1,\n ...slotStyles?.event,\n } as CSSProperties\n }\n onClick={(clickEvent) => onEventClick?.(event, clickEvent.currentTarget)}\n >\n {!filled && <span className={styles.monthViewDot} />}\n {!filled && <span className={styles.monthViewTime}>{formatTime(event.start, locale)}</span>}\n <span className={styles.monthViewBarTitle}>\n {renderEvent ? renderEvent(event, { singleLine: true }) : event.title}\n </span>\n </div>\n );\n }\n\n function renderPane(step: (typeof STEPS)[number]) {\n const paneMonth = addMonths(month, step);\n const isCurrent = step === 0;\n const paneStart = periodRange(CalendarView.Month, paneMonth, weekStartsOn).start;\n\n let target: { from: Date; to: Date } \| null = null;\n if (isCurrent && drag && drag.offset !== 0) {\n const { first, last } = eventDays(drag.event);\n target = { from: addDays(first, drag.offset), to: addDays(last, drag.offset) };\n }\n\n return (\n <div\n key={dateToDay(paneMonth)}\n ref={isCurrent ? currentRef : undefined}\n className={cx(\n pagerStyles.pagerPane,\n step === -1 && pagerStyles.pagerPanePrev,\n step === 1 && pagerStyles.pagerPaneNext,\n styles.monthViewPane,\n )}\n inert={!isCurrent}\n aria-hidden={!isCurrent \|\| undefined}\n >\n {Array.from({ length: 6 }, (_, row) => {\n const dates = rowDates(paneStart, row);\n const perDay = eventsByDay(events, dates);\n const lanes = limitLanes(packLanes(events, dates), dates.length, capacity);\n return (\n <div key={dateToDay(dates[0])} role='row' className={styles.monthViewWeek}>\n {dates.map((day, column) => {\n const count = perDay[column].length;\n const isToday = isSameDay(day, today);\n const name = formatLongDate(day, locale);\n return (\n <div\n key={dateToDay(day)}\n role='gridcell'\n data-cal-day={dateToDay(day)}\n tabIndex={isCurrent && isSameDay(day, date) ? 0 : -1}\n aria-current={isToday ? 'date' : undefined}\n aria-label={count > 0 ? `${name}, ${text.eventCount(count)}` : name}\n className={cx(\n styles.monthViewCell,\n day.getMonth() !== paneMonth.getMonth() && styles.monthViewCellOutside,\n onSlotCreate && styles.monthViewCellCreatable,\n target &&\n dayDiff(target.from, day) >= 0 &&\n dayDiff(day, target.to) >= 0 &&\n styles.monthViewCellTarget,\n classNames?.cell,\n )}\n style={slotStyles?.cell}\n onClick={(clickEvent) => handleCellClick(clickEvent, day)}\n onKeyDown={(keyEvent) => handleKeyDown(keyEvent, day)}\n >\n <span\n data-cal-day-number\n aria-hidden\n className={cx(\n styles.monthViewDayNumber,\n isToday && styles.monthViewDayNumberToday,\n onOpenDay && styles.monthViewDayNumberLink,\n )}\n >\n {formatDayNumber(day, locale)}\n </span>\n </div>\n );\n })}\n {/* Pointer only: a keyboard reaches a day's events through Enter on its cell. */}\n <div data-cal-bars aria-hidden className={styles.monthViewBars}>\n {lanes.visible.map(renderBar)}\n {lanes.hidden.map(\n (count, column) =>\n count > 0 && (\n <div\n key={`more-${column}`}\n className={styles.monthViewMore}\n style={{ gridColumn: column + 1, gridRow: lanes.moreLane + 1 }}\n onClick={() => openList(dates[column], false)}\n >\n {text.more(count)}\n </div>\n ),\n )}\n </div>\n </div>\n );\n })}\n </div>\n );\n }\n\n return (\n <div ref={rootRef} className={styles.monthView} style={{ '--days': weekdays.length } as CSSProperties}>\n <div role='grid' aria-label={formatMonthTitle(date, locale)} className={styles.monthViewGrid}>\n <div role='row' className={styles.monthViewWeekdays}>\n {weekdays.map((day) => (\n <div\n key={day.getDay()}\n role='columnheader'\n aria-label={formatWeekday(day, locale, 'long')}\n className={cx(styles.monthViewWeekday, classNames?.dayHeader)}\n style={slotStyles?.dayHeader}\n >\n {formatWeekday(day, locale, 'short')}\n </div>\n ))}\n </div>\n <div ref={viewportRef} className={cx(pagerStyles.pagerViewport, styles.monthViewViewport)}>\n <div ref={pager.trackRef} className={pagerStyles.pagerTrack}>\n {STEPS.map(renderPane)}\n </div>\n </div>\n </div>\n <Popover\n anchor={list?.anchor ?? null}\n isOpen={list !== null}\n onOpenChange={(open) => !open && setList(null)}\n // Enter on a cell is a key event of ours, which Popover cannot see, so it is told.\n focusOnOpen={list?.fromKeyboard ?? false}\n placement={PopoverPlacement.Bottom}\n align={PopoverAlign.Start}\n content={\n list && (\n <div className={styles.monthViewList}>\n <div className={styles.monthViewListTitle}>{formatLongDate(list.day, locale)}</div>\n <AgendaList\n className={styles.monthViewListEvents}\n events={events}\n start={list.day}\n days={1}\n showDayHeaders={false}\n locale={locale}\n text={text}\n onEventClick={(event) => {\n setList(null);\n // The list's own row unmounts with the popover, so the day's cell anchors it.\n onEventClick?.(event, list.anchor);\n }}\n renderEvent={renderEvent}\n classNames={classNames}\n slotStyles={slotStyles}\n />\n {onSlotCreate && (\n <Button\n className={styles.monthViewListCreate}\n onClick={() => {\n setList(null);\n onSlotCreate({ start: list.day, end: addDays(list.day, 1), allDay: true }, list.anchor);\n }}\n >\n {text.newEvent}\n </Button>\n )}\n </div>\n )\n }\n />\n </div>\n );\n}\n\nexport default MonthView;\n"],"mappings":"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"}
1	+ {"version":3,"file":"monthView.mjs","names":[],"sources":["../../../../../../package/common/calendar/components/monthView/monthView.tsx"],"sourcesContent":["import {\n useLayoutEffect,\n useRef,\n useState,\n type CSSProperties,\n type KeyboardEvent,\n type MouseEvent,\n type ReactElement,\n} from 'react';\nimport cx from 'classnames';\n\nimport Button from 'components/common/button';\nimport Popover from 'components/common/popover';\nimport { PopoverAlign, PopoverPlacement } from 'components/common/popover/popover.types';\nimport { isSelfActivation } from 'components/common/utils/activationKey';\nimport { isDismissClick } from 'components/common/utils/dismissClick';\nimport { CalendarView, type CalendarEvent } from '../../calendar.types';\nimport {\n addDays,\n addMonths,\n allDaySlot,\n dayDiff,\n dateToDay,\n gridKeyTarget,\n isSameDay,\n periodRange,\n shownDays,\n startOfMonth,\n startOfWeek,\n weekNumber,\n} from '../../dates';\nimport { formatDayNumber, formatLongDate, formatMonthTitle, formatTime, formatWeekday } from '../../format';\nimport { clamp, pageStep } from '../../gesture';\nimport { eventDays, eventsByDay, isAllDayLike, limitLanes, moveByDays, packLanes, type LaneBar } from '../../layout';\nimport { useGestures, type GesturePoint } from '../../useGestures';\nimport { usePager } from '../../usePager';\nimport AgendaList from '../agendaList';\nimport type { MonthDrag, MonthViewProps } from './monthView.types';\n\nimport pagerStyles from '../../pager.module.pcss';\nimport styles from './monthView.module.pcss';\nimport { cssColor } from '../../../styles/tone';\n\nconst STEPS = [-1, 0, 1] as const;\n\nfunction MonthView<E extends CalendarEvent>({\n events,\n date,\n today,\n locale,\n weekStartsOn,\n hidden,\n showWeekNumbers,\n text,\n onDateChange,\n onOpenDay,\n onEventClick,\n onEventChange,\n onSlotCreate,\n renderEvent,\n eventClassName,\n classNames,\n slotStyles,\n}: MonthViewProps<E>): ReactElement {\n const rootRef = useRef<HTMLDivElement>(null);\n const viewportRef = useRef<HTMLDivElement>(null);\n const currentRef = useRef<HTMLDivElement>(null);\n const pendingFocus = useRef<string \| null>(null);\n const dragRef = useRef<MonthDrag<E> \| null>(null);\n const [capacity, setCapacity] = useState(Infinity);\n const [list, setList] = useState<{ day: Date; anchor: HTMLElement; fromKeyboard: boolean } \| null>(null);\n const [drag, setDrag] = useState<MonthDrag<E> \| null>(null);\n\n const month = startOfMonth(date);\n const weekdays = shownDays(startOfWeek(today, weekStartsOn), 7, hidden);\n const gridStart = periodRange(CalendarView.Month, month, weekStartsOn).start;\n const rowDates = (paneStart: Date, row: number) => shownDays(addDays(paneStart, row * 7), 7, hidden);\n\n const pager = usePager(\n dateToDay(month),\n (step) => onDateChange(addMonths(date, step)),\n () => currentRef.current?.querySelector<HTMLElement>('[tabindex=\"0\"]') ?? null,\n );\n\n // Lanes that fit a cell, from the real geometry, so `+N` appears exactly when bars would clip.\n // Without layout (jsdom) there is nothing to measure, and every event is shown.\n useLayoutEffect(() => {\n const viewport = viewportRef.current;\n if (!viewport) return;\n function measure() {\n const bars = viewport!.querySelector<HTMLElement>('[data-cal-bars]');\n if (!bars \|\| bars.clientHeight === 0) {\n setCapacity(Infinity);\n return;\n }\n const style = getComputedStyle(bars);\n const lane = parseFloat(style.gridAutoRows);\n const gap = parseFloat(style.rowGap) \|\| 0;\n const top = parseFloat(style.paddingTop) \|\| 0;\n setCapacity(lane > 0 ? Math.max(1, Math.floor((bars.clientHeight - top + gap) / (lane + gap))) : Infinity);\n }\n measure();\n const observer = new ResizeObserver(measure);\n observer.observe(viewport);\n return () => observer.disconnect();\n }, []);\n\n // Arrowing onto a day of the next month pages first, so the cell to focus only exists after\n // the render that follows.\n useLayoutEffect(() => {\n const key = pendingFocus.current;\n if (key === null) return;\n pendingFocus.current = null;\n currentRef.current?.querySelector<HTMLElement>(`[data-cal-day=\"${key}\"]`)?.focus();\n });\n\n function dayAt(point: GesturePoint): Date \| null {\n const pane = currentRef.current;\n if (!pane) return null;\n const rect = pane.getBoundingClientRect();\n if (rect.width === 0 \|\| rect.height === 0) return null;\n const count = weekdays.length;\n const column = clamp(Math.floor(((point.x - rect.left) / rect.width) * count), 0, count - 1);\n const row = clamp(Math.floor(((point.y - rect.top) / rect.height) * 6), 0, 5);\n return rowDates(gridStart, row)[column];\n }\n\n function cellFor(day: Date): HTMLElement \| null {\n return currentRef.current?.querySelector<HTMLElement>(`[data-cal-day=\"${dateToDay(day)}\"]`) ?? null;\n }\n\n // Mirrored in a ref, as in the time grid: a release can arrive before the render of the move\n // before it, and has to drop where that move was.\n function setDragState(next: MonthDrag<E> \| null) {\n dragRef.current = next;\n setDrag(next);\n }\n\n useGestures<MonthDrag<E>>(rootRef, {\n onPress: pager.finish,\n canSwipe: () => true,\n onSwipeMove: pager.move,\n onSwipeEnd: (dx, velocity) => pager.settle(pageStep(dx, pager.width(), velocity)),\n dragFrom: (target, point) => {\n if (!currentRef.current?.contains(target)) return null;\n const grabbed = dayAt(point);\n if (grabbed === null) return null;\n const element = target.closest<HTMLElement>('[data-cal-event]');\n if (element) {\n const event = onEventChange && events.find((candidate) => String(candidate.id) === element.dataset.calEvent);\n return event && !event.readOnly ? { event, grabbed, offset: 0 } : null;\n }\n // A day number that opens its day is a link, and a press on it is a click however it moves.\n if (!onSlotCreate \|\| target.closest('[data-cal-more]')) return null;\n if (onOpenDay && target.closest('[data-cal-day-number]')) return null;\n return { event: null, grabbed, offset: 0 };\n },\n onDragStart: setDragState,\n onDragMove: (point) => {\n const current = dragRef.current;\n const day = dayAt(point);\n if (!current \|\| day === null) return;\n const offset = dayDiff(current.grabbed, day);\n if (offset !== current.offset) setDragState({ ...current, offset });\n },\n onDragEnd: (point) => {\n const current = dragRef.current;\n setDragState(null);\n const day = dayAt(point);\n if (!current \|\| day === null) return;\n const { event, grabbed } = current;\n if (!event) {\n const slot = allDaySlot(grabbed, day);\n onSlotCreate?.(slot, cellFor(slot.start) ?? rootRef.current!);\n return;\n }\n const offset = dayDiff(grabbed, day);\n if (offset !== 0) onEventChange?.({ event, ...moveByDays(event, offset) });\n },\n onDragCancel: () => setDragState(null),\n });\n\n function openList(day: Date, fromKeyboard: boolean) {\n const anchor = cellFor(day);\n if (anchor) setList({ day, anchor, fromKeyboard });\n }\n\n function handleCellClick(clickEvent: MouseEvent<HTMLDivElement>, day: Date) {\n if (onOpenDay && (clickEvent.target as Element).closest('[data-cal-day-number]')) {\n onOpenDay(day);\n return;\n }\n if (isDismissClick(clickEvent.nativeEvent)) return;\n onSlotCreate?.(allDaySlot(day), clickEvent.currentTarget);\n }\n\n function handleKeyDown(keyEvent: KeyboardEvent<HTMLDivElement>, day: Date) {\n const next = gridKeyTarget(keyEvent.key, day, weekStartsOn, hidden);\n if (!next) {\n if (isSelfActivation(keyEvent)) {\n keyEvent.preventDefault();\n openList(day, true);\n }\n return;\n }\n keyEvent.preventDefault();\n pendingFocus.current = dateToDay(next);\n onDateChange(next);\n }\n\n function renderBar(bar: LaneBar<E>) {\n const { event } = bar;\n const filled = isAllDayLike(event) \|\| bar.span > 1 \|\| bar.continuesBefore \|\| bar.continuesAfter;\n const interactive = Boolean(onEventClick) \|\| (Boolean(onEventChange) && !event.readOnly);\n return (\n <div\n key={event.id}\n data-cal-event={String(event.id)}\n className={cx(\n styles.monthViewBar,\n filled ? styles.monthViewBarFilled : styles.monthViewBarTimed,\n bar.continuesBefore && styles.monthViewBarContinuesBefore,\n bar.continuesAfter && styles.monthViewBarContinuesAfter,\n interactive && styles.monthViewBarInteractive,\n drag?.event === event && styles.monthViewBarDragging,\n classNames?.event,\n eventClassName?.(event),\n )}\n style={\n {\n '--event-color': event.color && cssColor(event.color),\n gridColumn: `${bar.start + 1} / span ${bar.span}`,\n gridRow: bar.lane + 1,\n ...slotStyles?.event,\n } as CSSProperties\n }\n onClick={(clickEvent) => onEventClick?.(event, clickEvent.currentTarget)}\n >\n {!filled && <span className={styles.monthViewDot} />}\n {!filled && <span className={styles.monthViewTime}>{formatTime(event.start, locale)}</span>}\n <span className={styles.monthViewBarTitle}>\n {renderEvent ? renderEvent(event, { singleLine: true }) : event.title}\n </span>\n </div>\n );\n }\n\n function renderPane(step: (typeof STEPS)[number]) {\n const paneMonth = addMonths(month, step);\n const isCurrent = step === 0;\n const paneStart = periodRange(CalendarView.Month, paneMonth, weekStartsOn).start;\n\n let target: { from: Date; to: Date } \| null = null;\n if (isCurrent && drag?.event && drag.offset !== 0) {\n const { first, last } = eventDays(drag.event);\n target = { from: addDays(first, drag.offset), to: addDays(last, drag.offset) };\n } else if (isCurrent && drag && !drag.event) {\n const over = addDays(drag.grabbed, drag.offset);\n target = drag.offset < 0 ? { from: over, to: drag.grabbed } : { from: drag.grabbed, to: over };\n }\n\n return (\n <div\n key={dateToDay(paneMonth)}\n ref={isCurrent ? currentRef : undefined}\n className={cx(\n pagerStyles.pagerPane,\n step === -1 && pagerStyles.pagerPanePrev,\n step === 1 && pagerStyles.pagerPaneNext,\n styles.monthViewPane,\n )}\n inert={!isCurrent}\n aria-hidden={!isCurrent \|\| undefined}\n >\n {Array.from({ length: 6 }, (_, row) => {\n const dates = rowDates(paneStart, row);\n const perDay = eventsByDay(events, dates);\n const lanes = limitLanes(packLanes(events, dates), dates.length, capacity);\n // Numbered by the ISO week holding most of its days, which the middle one is in.\n const week = showWeekNumbers ? text.weekNumber(weekNumber(dates[Math.floor(dates.length / 2)])) : undefined;\n return (\n <div key={dateToDay(dates[0])} role='row' aria-label={week} className={styles.monthViewWeek}>\n {dates.map((day, column) => {\n const count = perDay[column].length;\n const isToday = isSameDay(day, today);\n const name = formatLongDate(day, locale);\n return (\n <div\n key={dateToDay(day)}\n role='gridcell'\n data-cal-day={dateToDay(day)}\n tabIndex={isCurrent && isSameDay(day, date) ? 0 : -1}\n aria-current={isToday ? 'date' : undefined}\n aria-label={count > 0 ? `${name}, ${text.eventCount(count)}` : name}\n className={cx(\n styles.monthViewCell,\n day.getMonth() !== paneMonth.getMonth() && styles.monthViewCellOutside,\n onSlotCreate && styles.monthViewCellCreatable,\n target &&\n dayDiff(target.from, day) >= 0 &&\n dayDiff(day, target.to) >= 0 &&\n styles.monthViewCellTarget,\n classNames?.cell,\n )}\n style={slotStyles?.cell}\n onClick={(clickEvent) => handleCellClick(clickEvent, day)}\n onKeyDown={(keyEvent) => handleKeyDown(keyEvent, day)}\n >\n <span\n data-cal-day-number\n aria-hidden\n className={cx(\n styles.monthViewDayNumber,\n isToday && styles.monthViewDayNumberToday,\n onOpenDay && styles.monthViewDayNumberLink,\n )}\n >\n {formatDayNumber(day, locale)}\n </span>\n {week && column === 0 && (\n <span aria-hidden className={styles.monthViewWeekNumber}>\n {week}\n </span>\n )}\n </div>\n );\n })}\n {/* Pointer only: a keyboard reaches a day's events through Enter on its cell. */}\n <div data-cal-bars aria-hidden className={styles.monthViewBars}>\n {lanes.visible.map(renderBar)}\n {lanes.hidden.map(\n (count, column) =>\n count > 0 && (\n <div\n key={`more-${column}`}\n data-cal-more\n className={styles.monthViewMore}\n style={{ gridColumn: column + 1, gridRow: lanes.moreLane + 1 }}\n onClick={() => openList(dates[column], false)}\n >\n {text.more(count)}\n </div>\n ),\n )}\n </div>\n </div>\n );\n })}\n </div>\n );\n }\n\n return (\n <div ref={rootRef} className={styles.monthView} style={{ '--days': weekdays.length } as CSSProperties}>\n <div role='grid' aria-label={formatMonthTitle(date, locale)} className={styles.monthViewGrid}>\n <div role='row' className={styles.monthViewWeekdays}>\n {weekdays.map((day) => (\n <div\n key={day.getDay()}\n role='columnheader'\n aria-label={formatWeekday(day, locale, 'long')}\n className={cx(styles.monthViewWeekday, classNames?.dayHeader)}\n style={slotStyles?.dayHeader}\n >\n {formatWeekday(day, locale, 'short')}\n </div>\n ))}\n </div>\n <div ref={viewportRef} className={cx(pagerStyles.pagerViewport, styles.monthViewViewport)}>\n <div ref={pager.trackRef} className={pagerStyles.pagerTrack}>\n {STEPS.map(renderPane)}\n </div>\n </div>\n </div>\n <Popover\n anchor={list?.anchor ?? null}\n isOpen={list !== null}\n onOpenChange={(open) => !open && setList(null)}\n // Enter on a cell is a key event of ours, which Popover cannot see, so it is told.\n focusOnOpen={list?.fromKeyboard ?? false}\n placement={PopoverPlacement.Bottom}\n align={PopoverAlign.Start}\n content={\n list && (\n <div className={styles.monthViewList}>\n <div className={styles.monthViewListTitle}>{formatLongDate(list.day, locale)}</div>\n <AgendaList\n className={styles.monthViewListEvents}\n events={events}\n start={list.day}\n days={1}\n showDayHeaders={false}\n locale={locale}\n today={today}\n text={text}\n onEventClick={(event) => {\n setList(null);\n // The list's own row unmounts with the popover, so the day's cell anchors it.\n onEventClick?.(event, list.anchor);\n }}\n renderEvent={renderEvent}\n eventClassName={eventClassName}\n classNames={classNames}\n slotStyles={slotStyles}\n />\n {onSlotCreate && (\n <Button\n className={styles.monthViewListCreate}\n onClick={() => {\n setList(null);\n onSlotCreate(allDaySlot(list.day), list.anchor);\n }}\n >\n {text.newEvent}\n </Button>\n )}\n </div>\n )\n }\n />\n </div>\n );\n}\n\nexport default MonthView;\n"],"mappings":"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"}

package/dist/esm/common/calendar/components/monthView/monthView.module.mjs CHANGED Viewed

@@ -1,2 +1,2 @@
-"use client";var e=`monthView_COWAp`,t=`monthView-grid_MG0UZ`,n=`monthView-weekdays_BHTuU`,r=`monthView-weekday_ycA-L`,i=`monthView-viewport_LpCe1`,a=`monthView-pane_bHUbv`,o=`monthView-week_gnh6Y`,s=`monthView-cell_ypx-s`,c=`monthView-cell-outside_1Mr0V`,l=`monthView-cell-creatable_BxZde`,u=`monthView-cell-target_-oYgU`,d=`monthView-dayNumber_voxGS`,f=`monthView-dayNumber-today_G7coa`,p=`monthView-dayNumber-link_5k317`,m=`monthView-bars_DW4bv`,h=`monthView-bar_9zcHJ`,g=`monthView-bar-filled_Mq2Ca`,_=`monthView-bar-timed_C8Xwi`,v=`monthView-bar-continuesBefore_DBSlE`,y=`monthView-bar-continuesAfter_cEvZo`,b=`monthView-bar-interactive_FGu9C`,x=`monthView-bar-dragging_sxndr`,S=`monthView-bar-title_-X5yZ`,C=`monthView-dot_81QmI`,w=`monthView-time_W-u-E`,T=`monthView-more_m2PXd`,E=`monthView-list_4pG-Y`,D=`monthView-list-title_oM-3e`,O=`monthView-list-events_RsMQ6`,k=`monthView-list-create_e7EdY`,A={monthView:e,"monthView-grid":`monthView-grid_MG0UZ`,monthViewGrid:t,"monthView-weekdays":`monthView-weekdays_BHTuU`,monthViewWeekdays:n,"monthView-weekday":`monthView-weekday_ycA-L`,monthViewWeekday:r,"monthView-viewport":`monthView-viewport_LpCe1`,monthViewViewport:i,"monthView-pane":`monthView-pane_bHUbv`,monthViewPane:a,"monthView-week":`monthView-week_gnh6Y`,monthViewWeek:o,"monthView-cell":`monthView-cell_ypx-s`,monthViewCell:s,"monthView-cell-outside":`monthView-cell-outside_1Mr0V`,monthViewCellOutside:c,"monthView-cell-creatable":`monthView-cell-creatable_BxZde`,monthViewCellCreatable:l,"monthView-cell-target":`monthView-cell-target_-oYgU`,monthViewCellTarget:u,"monthView-dayNumber":`monthView-dayNumber_voxGS`,monthViewDayNumber:d,"monthView-dayNumber-today":`monthView-dayNumber-today_G7coa`,monthViewDayNumberToday:f,"monthView-dayNumber-link":`monthView-dayNumber-link_5k317`,monthViewDayNumberLink:p,"monthView-bars":`monthView-bars_DW4bv`,monthViewBars:m,"monthView-bar":`monthView-bar_9zcHJ`,monthViewBar:h,"monthView-bar-filled":`monthView-bar-filled_Mq2Ca`,monthViewBarFilled:g,"monthView-bar-timed":`monthView-bar-timed_C8Xwi`,monthViewBarTimed:_,"monthView-bar-continuesBefore":`monthView-bar-continuesBefore_DBSlE`,monthViewBarContinuesBefore:v,"monthView-bar-continuesAfter":`monthView-bar-continuesAfter_cEvZo`,monthViewBarContinuesAfter:y,"monthView-bar-interactive":`monthView-bar-interactive_FGu9C`,monthViewBarInteractive:b,"monthView-bar-dragging":`monthView-bar-dragging_sxndr`,monthViewBarDragging:x,"monthView-bar-title":`monthView-bar-title_-X5yZ`,monthViewBarTitle:S,"monthView-dot":`monthView-dot_81QmI`,monthViewDot:C,"monthView-time":`monthView-time_W-u-E`,monthViewTime:w,"monthView-more":`monthView-more_m2PXd`,monthViewMore:T,"monthView-list":`monthView-list_4pG-Y`,monthViewList:E,"monthView-list-title":`monthView-list-title_oM-3e`,monthViewListTitle:D,"monthView-list-events":`monthView-list-events_RsMQ6`,monthViewListEvents:O,"monthView-list-create":`monthView-list-create_e7EdY`,monthViewListCreate:k};export{A as default,e as monthView,h as monthViewBar,y as monthViewBarContinuesAfter,v as monthViewBarContinuesBefore,x as monthViewBarDragging,g as monthViewBarFilled,b as monthViewBarInteractive,_ as monthViewBarTimed,S as monthViewBarTitle,m as monthViewBars,s as monthViewCell,l as monthViewCellCreatable,c as monthViewCellOutside,u as monthViewCellTarget,d as monthViewDayNumber,p as monthViewDayNumberLink,f as monthViewDayNumberToday,C as monthViewDot,t as monthViewGrid,E as monthViewList,k as monthViewListCreate,O as monthViewListEvents,D as monthViewListTitle,T as monthViewMore,a as monthViewPane,w as monthViewTime,i as monthViewViewport,o as monthViewWeek,r as monthViewWeekday,n as monthViewWeekdays};
+"use client";var e=`monthView_COWAp`,t=`monthView-grid_MG0UZ`,n=`monthView-weekdays_BHTuU`,r=`monthView-weekday_ycA-L`,i=`monthView-viewport_LpCe1`,a=`monthView-pane_bHUbv`,o=`monthView-week_gnh6Y`,s=`monthView-cell_ypx-s`,c=`monthView-cell-outside_1Mr0V`,l=`monthView-cell-creatable_BxZde`,u=`monthView-cell-target_-oYgU`,d=`monthView-dayNumber_voxGS`,f=`monthView-dayNumber-today_G7coa`,p=`monthView-dayNumber-link_5k317`,m=`monthView-weekNumber_UE8T-`,h=`monthView-bars_DW4bv`,g=`monthView-bar_9zcHJ`,_=`monthView-bar-filled_Mq2Ca`,v=`monthView-bar-timed_C8Xwi`,y=`monthView-bar-continuesBefore_DBSlE`,b=`monthView-bar-continuesAfter_cEvZo`,x=`monthView-bar-interactive_FGu9C`,S=`monthView-bar-dragging_sxndr`,C=`monthView-bar-title_-X5yZ`,w=`monthView-dot_81QmI`,T=`monthView-time_W-u-E`,E=`monthView-more_m2PXd`,D=`monthView-list_4pG-Y`,O=`monthView-list-title_oM-3e`,k=`monthView-list-events_RsMQ6`,A=`monthView-list-create_e7EdY`,j={monthView:e,"monthView-grid":`monthView-grid_MG0UZ`,monthViewGrid:t,"monthView-weekdays":`monthView-weekdays_BHTuU`,monthViewWeekdays:n,"monthView-weekday":`monthView-weekday_ycA-L`,monthViewWeekday:r,"monthView-viewport":`monthView-viewport_LpCe1`,monthViewViewport:i,"monthView-pane":`monthView-pane_bHUbv`,monthViewPane:a,"monthView-week":`monthView-week_gnh6Y`,monthViewWeek:o,"monthView-cell":`monthView-cell_ypx-s`,monthViewCell:s,"monthView-cell-outside":`monthView-cell-outside_1Mr0V`,monthViewCellOutside:c,"monthView-cell-creatable":`monthView-cell-creatable_BxZde`,monthViewCellCreatable:l,"monthView-cell-target":`monthView-cell-target_-oYgU`,monthViewCellTarget:u,"monthView-dayNumber":`monthView-dayNumber_voxGS`,monthViewDayNumber:d,"monthView-dayNumber-today":`monthView-dayNumber-today_G7coa`,monthViewDayNumberToday:f,"monthView-dayNumber-link":`monthView-dayNumber-link_5k317`,monthViewDayNumberLink:p,"monthView-weekNumber":`monthView-weekNumber_UE8T-`,monthViewWeekNumber:m,"monthView-bars":`monthView-bars_DW4bv`,monthViewBars:h,"monthView-bar":`monthView-bar_9zcHJ`,monthViewBar:g,"monthView-bar-filled":`monthView-bar-filled_Mq2Ca`,monthViewBarFilled:_,"monthView-bar-timed":`monthView-bar-timed_C8Xwi`,monthViewBarTimed:v,"monthView-bar-continuesBefore":`monthView-bar-continuesBefore_DBSlE`,monthViewBarContinuesBefore:y,"monthView-bar-continuesAfter":`monthView-bar-continuesAfter_cEvZo`,monthViewBarContinuesAfter:b,"monthView-bar-interactive":`monthView-bar-interactive_FGu9C`,monthViewBarInteractive:x,"monthView-bar-dragging":`monthView-bar-dragging_sxndr`,monthViewBarDragging:S,"monthView-bar-title":`monthView-bar-title_-X5yZ`,monthViewBarTitle:C,"monthView-dot":`monthView-dot_81QmI`,monthViewDot:w,"monthView-time":`monthView-time_W-u-E`,monthViewTime:T,"monthView-more":`monthView-more_m2PXd`,monthViewMore:E,"monthView-list":`monthView-list_4pG-Y`,monthViewList:D,"monthView-list-title":`monthView-list-title_oM-3e`,monthViewListTitle:O,"monthView-list-events":`monthView-list-events_RsMQ6`,monthViewListEvents:k,"monthView-list-create":`monthView-list-create_e7EdY`,monthViewListCreate:A};export{j as default,e as monthView,g as monthViewBar,b as monthViewBarContinuesAfter,y as monthViewBarContinuesBefore,S as monthViewBarDragging,_ as monthViewBarFilled,x as monthViewBarInteractive,v as monthViewBarTimed,C as monthViewBarTitle,h as monthViewBars,s as monthViewCell,l as monthViewCellCreatable,c as monthViewCellOutside,u as monthViewCellTarget,d as monthViewDayNumber,p as monthViewDayNumberLink,f as monthViewDayNumberToday,w as monthViewDot,t as monthViewGrid,D as monthViewList,A as monthViewListCreate,k as monthViewListEvents,O as monthViewListTitle,E as monthViewMore,a as monthViewPane,T as monthViewTime,i as monthViewViewport,o as monthViewWeek,m as monthViewWeekNumber,r as monthViewWeekday,n as monthViewWeekdays};
 //# sourceMappingURL=monthView.module.mjs.map

package/dist/esm/common/calendar/components/monthView/monthView.module.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"monthView.module.mjs","names":[],"sources":["../../../../../../package/common/calendar/components/monthView/monthView.module.pcss"],"sourcesContent":[".monthView {\n display: flex;\n flex: 1;\n flex-direction: column;\n min-height: 0;\n user-select: none;\n -webkit-touch-callout: none;\n\n /* Horizontal swipes page the month; vertical ones still scroll the page. /\n touch-action: pan-y;\n\n &-grid {\n display: flex;\n flex: 1;\n flex-direction: column;\n min-height: 0;\n }\n\n &-weekdays {\n display: grid;\n grid-template-columns: repeat(var(--days), minmax(0, 1fr));\n border-bottom: 1px solid var(--border-color);\n }\n\n &-weekday {\n padding: 0.5em 0.625em;\n overflow: hidden;\n font-size: 0.6875em;\n font-weight: 600;\n letter-spacing: 0.06em;\n text-overflow: ellipsis;\n text-transform: uppercase;\n white-space: nowrap;\n color: var(--text-dark);\n }\n\n &-viewport {\n flex: 1;\n min-height: 0;\n }\n\n / Six equal rows whatever the month, so every pane has the same height while swiping and a\n row never grows to fit its events: that is what the `+N` buttons are for. /\n &-pane {\n display: grid;\n grid-template-rows: repeat(6, minmax(0, 1fr));\n background: var(--background);\n }\n\n &-week {\n position: relative;\n display: grid;\n grid-template-columns: repeat(var(--days), minmax(0, 1fr));\n min-height: 0;\n\n & + & {\n border-top: 1px solid var(--border-color);\n }\n }\n\n &-cell {\n min-width: 0;\n padding: 0.25em;\n outline: none;\n\n & + & {\n border-left: 1px solid var(--border-color);\n }\n\n &:focus-visible {\n box-shadow: inset 0 0 0 2px var(--focus-border-color, var(--primary-color));\n }\n\n &-outside {\n background: color-mix(in oklab, var(--background-accent) 40%, transparent);\n color: var(--text-light);\n }\n\n &-creatable {\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n\n &:hover {\n background: color-mix(in oklab, var(--primary-color) 5%, transparent);\n }\n }\n\n &-target {\n background: color-mix(in oklab, var(--primary-color) 14%, transparent);\n }\n }\n\n &-dayNumber {\n display: inline-grid;\n place-items: center;\n min-width: 1.75em;\n height: 1.75em;\n padding: 0 0.25em;\n border-radius: 0.875em;\n font-size: 0.8125em;\n font-weight: 500;\n font-variant-numeric: tabular-nums;\n transition: background-color 0.15s ease;\n\n &-today {\n background: var(--custom-calendar-today-color);\n color: var(--text-on-primary);\n font-weight: 700;\n }\n\n &-link {\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n\n &:not(.monthView-dayNumber-today):hover {\n background: var(--background-accent);\n }\n }\n }\n\n / Laid over the week's cells and starting below the day numbers. Its `grid-auto-rows`,\n `row-gap` and `padding-top` are read back to work out how many lanes fit, so change them\n here rather than overriding them on a bar. /\n &-bars {\n position: absolute;\n inset: 0;\n display: grid;\n grid-template-columns: repeat(var(--days), minmax(0, 1fr));\n grid-auto-rows: 1.375em;\n row-gap: 2px;\n align-content: start;\n padding-top: 1.75em;\n overflow: hidden;\n pointer-events: none;\n }\n\n &-bar {\n --event: var(--event-color, var(--primary-color));\n\n display: flex;\n align-items: center;\n gap: 0.3em;\n min-width: 0;\n margin: 0 0.25em;\n padding: 0 0.4em;\n overflow: hidden;\n border-radius: var(--custom-calendar-event-radius);\n font-size: 0.75em;\n white-space: nowrap;\n pointer-events: auto;\n transition:\n background-color 0.15s ease,\n opacity 0.15s ease;\n\n &-filled {\n background: color-mix(in oklab, var(--event) 22%, var(--background));\n box-shadow: inset 3px 0 0 var(--event);\n font-weight: 500;\n\n &:hover {\n background: color-mix(in oklab, var(--event) 32%, var(--background));\n }\n }\n\n &-timed:hover {\n background: color-mix(in oklab, var(--event) 12%, transparent);\n }\n\n &-continuesBefore {\n margin-left: 0;\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n box-shadow: none;\n }\n\n &-continuesAfter {\n margin-right: 0;\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n }\n\n &-interactive {\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n }\n\n &-dragging {\n opacity: 0.45;\n }\n\n &-title {\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n }\n\n &-dot {\n flex: none;\n width: 0.5em;\n height: 0.5em;\n border-radius: 50%;\n background: var(--event);\n }\n\n &-time {\n flex: none;\n font-variant-numeric: tabular-nums;\n color: var(--text-dark);\n }\n\n &-more {\n align-self: center;\n margin: 0 0.25em;\n padding: 0 0.4em;\n border-radius: var(--custom-calendar-event-radius);\n font-size: 0.75em;\n font-weight: 600;\n white-space: nowrap;\n color: var(--text-dark);\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n pointer-events: auto;\n\n &:hover {\n background: var(--background-accent-light);\n }\n }\n\n &-list {\n display: flex;\n flex-direction: column;\n gap: 0.25em;\n width: 18em;\n max-width: 100%;\n\n &-title {\n padding: 0.25em 0.625em;\n font-size: 0.8125em;\n font-weight: 600;\n color: var(--text-dark);\n }\n\n / Scrolls inside the popover rather than growing it past the screen. */\n &-events {\n max-height: 18em;\n }\n\n &-create {\n align-self: flex-start;\n margin: 0.25em 0.625em 0.125em;\n }\n }\n}\n"],"mappings":""}
1	+ {"version":3,"file":"monthView.module.mjs","names":[],"sources":["../../../../../../package/common/calendar/components/monthView/monthView.module.pcss"],"sourcesContent":[".monthView {\n display: flex;\n flex: 1;\n flex-direction: column;\n min-height: 0;\n user-select: none;\n -webkit-touch-callout: none;\n\n /* Horizontal swipes page the month; vertical ones still scroll the page. /\n touch-action: pan-y;\n\n &-grid {\n display: flex;\n flex: 1;\n flex-direction: column;\n min-height: 0;\n }\n\n &-weekdays {\n display: grid;\n grid-template-columns: repeat(var(--days), minmax(0, 1fr));\n border-bottom: 1px solid var(--border-color);\n }\n\n &-weekday {\n padding: 0.5em 0.625em;\n overflow: hidden;\n font-size: 0.6875em;\n font-weight: 600;\n letter-spacing: 0.06em;\n text-overflow: ellipsis;\n text-transform: uppercase;\n white-space: nowrap;\n color: var(--text-dark);\n }\n\n &-viewport {\n flex: 1;\n min-height: 0;\n }\n\n / Six equal rows whatever the month, so every pane has the same height while swiping and a\n row never grows to fit its events: that is what the `+N` buttons are for. /\n &-pane {\n display: grid;\n grid-template-rows: repeat(6, minmax(0, 1fr));\n background: var(--background);\n }\n\n &-week {\n position: relative;\n display: grid;\n grid-template-columns: repeat(var(--days), minmax(0, 1fr));\n min-height: 0;\n\n & + & {\n border-top: 1px solid var(--border-color);\n }\n }\n\n &-cell {\n position: relative;\n min-width: 0;\n padding: 0.25em;\n outline: none;\n\n & + & {\n border-left: 1px solid var(--border-color);\n }\n\n &:focus-visible {\n box-shadow: inset 0 0 0 2px var(--focus-border-color, var(--primary-color));\n }\n\n &-outside {\n background: color-mix(in oklab, var(--background-accent) 40%, transparent);\n color: var(--text-light);\n }\n\n &-creatable {\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n\n &:hover {\n background: color-mix(in oklab, var(--primary-color) 5%, transparent);\n }\n }\n\n &-target {\n background: color-mix(in oklab, var(--primary-color) 14%, transparent);\n }\n }\n\n &-dayNumber {\n display: inline-grid;\n place-items: center;\n min-width: 1.75em;\n height: 1.75em;\n padding: 0 0.25em;\n border-radius: 0.875em;\n font-size: 0.8125em;\n font-weight: 500;\n font-variant-numeric: tabular-nums;\n transition: background-color 0.15s ease;\n\n &-today {\n background: var(--custom-calendar-today-color);\n color: var(--text-on-primary);\n font-weight: 700;\n }\n\n &-link {\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n\n &:not(.monthView-dayNumber-today):hover {\n background: var(--background-accent);\n }\n }\n }\n\n / Top right of the row's first cell, in the band above the bars and level with the day number:\n the cell's 0.25em padding and the number's 1.75em at 0.8125em, in this label's 0.6875em. /\n &-weekNumber {\n position: absolute;\n top: calc(0.25em / 0.6875);\n right: 0.5em;\n\n / Clear of the day number, in a narrow cell or a long translation. /\n max-width: calc(100% - 3.5em);\n overflow: hidden;\n font-size: 0.6875em;\n font-weight: 600;\n line-height: calc(1.75em 0.8125 / 0.6875);\n white-space: nowrap;\n text-overflow: ellipsis;\n color: var(--text-light);\n }\n\n /* Laid over the week's cells and starting below the day numbers. Its `grid-auto-rows`,\n `row-gap` and `padding-top` are read back to work out how many lanes fit, so change them\n here rather than overriding them on a bar. /\n &-bars {\n position: absolute;\n inset: 0;\n display: grid;\n grid-template-columns: repeat(var(--days), minmax(0, 1fr));\n grid-auto-rows: 1.375em;\n row-gap: 2px;\n align-content: start;\n padding-top: 1.75em;\n overflow: hidden;\n pointer-events: none;\n }\n\n &-bar {\n --event: var(--event-color, var(--primary-color));\n\n display: flex;\n align-items: center;\n gap: 0.3em;\n min-width: 0;\n margin: 0 0.25em;\n padding: 0 0.4em;\n overflow: hidden;\n border-radius: var(--custom-calendar-event-radius);\n font-size: 0.75em;\n white-space: nowrap;\n pointer-events: auto;\n transition:\n background-color 0.15s ease,\n opacity 0.15s ease;\n\n &-filled {\n background: color-mix(in oklab, var(--event) 22%, var(--background));\n box-shadow: inset 3px 0 0 var(--event);\n font-weight: 500;\n\n &:hover {\n background: color-mix(in oklab, var(--event) 32%, var(--background));\n }\n }\n\n &-timed:hover {\n background: color-mix(in oklab, var(--event) 12%, transparent);\n }\n\n &-continuesBefore {\n margin-left: 0;\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n box-shadow: none;\n }\n\n &-continuesAfter {\n margin-right: 0;\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n }\n\n &-interactive {\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n }\n\n &-dragging {\n opacity: 0.45;\n }\n\n &-title {\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n }\n\n &-dot {\n flex: none;\n width: 0.5em;\n height: 0.5em;\n border-radius: 50%;\n background: var(--event);\n }\n\n &-time {\n flex: none;\n font-variant-numeric: tabular-nums;\n color: var(--text-dark);\n }\n\n &-more {\n align-self: center;\n margin: 0 0.25em;\n padding: 0 0.4em;\n border-radius: var(--custom-calendar-event-radius);\n font-size: 0.75em;\n font-weight: 600;\n white-space: nowrap;\n color: var(--text-dark);\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n pointer-events: auto;\n\n &:hover {\n background: var(--background-accent-light);\n }\n }\n\n &-list {\n display: flex;\n flex-direction: column;\n gap: 0.25em;\n width: 18em;\n max-width: 100%;\n\n &-title {\n padding: 0.25em 0.625em;\n font-size: 0.8125em;\n font-weight: 600;\n color: var(--text-dark);\n }\n\n / Scrolls inside the popover rather than growing it past the screen. */\n &-events {\n max-height: 18em;\n }\n\n &-create {\n align-self: flex-start;\n margin: 0.25em 0.625em 0.125em;\n }\n }\n}\n"],"mappings":""}