@ahrowe/ui 0.39.1 → 0.40.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.
- package/README.md +2 -1
- package/dist/cjs-types/common/calendar/calendar.d.ts +4 -0
- package/dist/cjs-types/common/calendar/calendar.types.d.ts +141 -0
- package/dist/cjs-types/common/calendar/components/agendaList/agendaList.d.ts +5 -0
- package/dist/cjs-types/common/calendar/components/agendaList/agendaList.types.d.ts +23 -0
- package/dist/cjs-types/common/calendar/components/agendaList/index.d.ts +1 -0
- package/dist/cjs-types/common/calendar/components/calendarHeader/calendarHeader.d.ts +4 -0
- package/dist/cjs-types/common/calendar/components/calendarHeader/calendarHeader.types.d.ts +17 -0
- package/dist/cjs-types/common/calendar/components/calendarHeader/index.d.ts +1 -0
- package/dist/cjs-types/common/calendar/components/compactMonth/compactMonth.d.ts +9 -0
- package/dist/cjs-types/common/calendar/components/compactMonth/compactMonth.types.d.ts +1 -0
- package/dist/cjs-types/common/calendar/components/compactMonth/index.d.ts +1 -0
- package/dist/cjs-types/common/calendar/components/monthView/index.d.ts +1 -0
- package/dist/cjs-types/common/calendar/components/monthView/monthView.d.ts +5 -0
- package/dist/cjs-types/common/calendar/components/monthView/monthView.types.d.ts +10 -0
- package/dist/cjs-types/common/calendar/components/timeGrid/index.d.ts +1 -0
- package/dist/cjs-types/common/calendar/components/timeGrid/timeGrid.d.ts +5 -0
- package/dist/cjs-types/common/calendar/components/timeGrid/timeGrid.types.d.ts +40 -0
- package/dist/cjs-types/common/calendar/dates.d.ts +50 -0
- package/dist/cjs-types/common/calendar/format.d.ts +32 -0
- package/dist/cjs-types/common/calendar/gesture.d.ts +32 -0
- package/dist/cjs-types/common/calendar/index.d.ts +2 -0
- package/dist/cjs-types/common/calendar/layout.d.ts +74 -0
- package/dist/cjs-types/common/calendar/useGestures.d.ts +37 -0
- package/dist/cjs-types/common/calendar/usePager.d.ts +20 -0
- package/dist/cjs-types/common/calendar/view.types.d.ts +26 -0
- package/dist/cjs-types/common/configProvider/configProvider.types.d.ts +3 -0
- package/dist/cjs-types/common/confirmModal/confirmModal.types.d.ts +1 -1
- package/dist/cjs-types/common/datePicker/index.d.ts +1 -1
- package/dist/cjs-types/common/modal/modal.types.d.ts +4 -3
- package/dist/cjs-types/common/themeProvider/theme.types.d.ts +8 -0
- package/dist/cjs-types/common/utils/day.d.ts +8 -0
- package/dist/cjs-types/common/virtualList/useColumns.d.ts +3 -1
- package/dist/cjs-types/index.d.ts +2 -0
- package/dist/esm/common/calendar/calendar.mjs +2 -0
- package/dist/esm/common/calendar/calendar.mjs.map +1 -0
- package/dist/esm/common/calendar/calendar.module.mjs +2 -0
- package/dist/esm/common/calendar/calendar.module.mjs.map +1 -0
- package/dist/esm/common/calendar/calendar.types.mjs +2 -0
- package/dist/esm/common/calendar/calendar.types.mjs.map +1 -0
- package/dist/esm/common/calendar/components/agendaList/agendaList.mjs +2 -0
- package/dist/esm/common/calendar/components/agendaList/agendaList.mjs.map +1 -0
- package/dist/esm/common/calendar/components/agendaList/agendaList.module.mjs +2 -0
- package/dist/esm/common/calendar/components/agendaList/agendaList.module.mjs.map +1 -0
- package/dist/esm/common/calendar/components/calendarHeader/calendarHeader.mjs +2 -0
- package/dist/esm/common/calendar/components/calendarHeader/calendarHeader.mjs.map +1 -0
- package/dist/esm/common/calendar/components/calendarHeader/calendarHeader.module.mjs +2 -0
- package/dist/esm/common/calendar/components/calendarHeader/calendarHeader.module.mjs.map +1 -0
- package/dist/esm/common/calendar/components/compactMonth/compactMonth.mjs +2 -0
- package/dist/esm/common/calendar/components/compactMonth/compactMonth.mjs.map +1 -0
- package/dist/esm/common/calendar/components/compactMonth/compactMonth.module.mjs +2 -0
- package/dist/esm/common/calendar/components/compactMonth/compactMonth.module.mjs.map +1 -0
- package/dist/esm/common/calendar/components/monthView/monthView.mjs +2 -0
- package/dist/esm/common/calendar/components/monthView/monthView.mjs.map +1 -0
- package/dist/esm/common/calendar/components/monthView/monthView.module.mjs +2 -0
- package/dist/esm/common/calendar/components/monthView/monthView.module.mjs.map +1 -0
- package/dist/esm/common/calendar/components/timeGrid/timeGrid.mjs +2 -0
- package/dist/esm/common/calendar/components/timeGrid/timeGrid.mjs.map +1 -0
- package/dist/esm/common/calendar/components/timeGrid/timeGrid.module.mjs +2 -0
- package/dist/esm/common/calendar/components/timeGrid/timeGrid.module.mjs.map +1 -0
- package/dist/esm/common/calendar/dates.mjs +2 -0
- package/dist/esm/common/calendar/dates.mjs.map +1 -0
- package/dist/esm/common/calendar/format.mjs +2 -0
- package/dist/esm/common/calendar/format.mjs.map +1 -0
- package/dist/esm/common/calendar/gesture.mjs +2 -0
- package/dist/esm/common/calendar/gesture.mjs.map +1 -0
- package/dist/esm/common/calendar/layout.mjs +2 -0
- package/dist/esm/common/calendar/layout.mjs.map +1 -0
- package/dist/esm/common/calendar/pager.module.mjs +2 -0
- package/dist/esm/common/calendar/pager.module.mjs.map +1 -0
- package/dist/esm/common/calendar/useGestures.mjs +2 -0
- package/dist/esm/common/calendar/useGestures.mjs.map +1 -0
- package/dist/esm/common/calendar/usePager.mjs +2 -0
- package/dist/esm/common/calendar/usePager.mjs.map +1 -0
- package/dist/esm/common/confirmModal/confirmModal.mjs +1 -1
- package/dist/esm/common/confirmModal/confirmModal.mjs.map +1 -1
- package/dist/esm/common/datePicker/components/datePickerMonth/datePickerMonth.mjs +1 -1
- package/dist/esm/common/datePicker/dateFunctions.mjs +1 -1
- package/dist/esm/common/datePicker/datePicker.mjs +1 -1
- package/dist/esm/common/input/input.mjs +1 -1
- package/dist/esm/common/input/input.mjs.map +1 -1
- package/dist/esm/common/modal/modal.mjs +1 -1
- package/dist/esm/common/modal/modal.mjs.map +1 -1
- package/dist/esm/common/popover/popover.mjs +1 -1
- package/dist/esm/common/popover/popover.mjs.map +1 -1
- package/dist/esm/common/scrollFade/scrollFade.mjs +1 -1
- package/dist/esm/common/tabHeader/tabHeader.module.mjs.map +1 -1
- package/dist/esm/common/utils/day.mjs +1 -1
- package/dist/esm/common/utils/day.mjs.map +1 -1
- package/dist/esm/common/virtualList/useColumns.mjs +1 -1
- package/dist/esm/common/virtualList/useColumns.mjs.map +1 -1
- package/dist/esm/common/virtualList/virtualList.mjs +1 -1
- package/dist/esm/common/virtualList/virtualList.mjs.map +1 -1
- package/dist/esm/index.mjs +1 -1
- package/dist/index.cjs +3 -3
- package/dist/index.cjs.map +1 -1
- package/dist/style.css +1 -1
- package/dist/types/common/calendar/calendar.d.ts +4 -0
- package/dist/types/common/calendar/calendar.types.d.ts +141 -0
- package/dist/types/common/calendar/components/agendaList/agendaList.d.ts +5 -0
- package/dist/types/common/calendar/components/agendaList/agendaList.types.d.ts +23 -0
- package/dist/types/common/calendar/components/agendaList/index.d.ts +1 -0
- package/dist/types/common/calendar/components/calendarHeader/calendarHeader.d.ts +4 -0
- package/dist/types/common/calendar/components/calendarHeader/calendarHeader.types.d.ts +17 -0
- package/dist/types/common/calendar/components/calendarHeader/index.d.ts +1 -0
- package/dist/types/common/calendar/components/compactMonth/compactMonth.d.ts +9 -0
- package/dist/types/common/calendar/components/compactMonth/compactMonth.types.d.ts +1 -0
- package/dist/types/common/calendar/components/compactMonth/index.d.ts +1 -0
- package/dist/types/common/calendar/components/monthView/index.d.ts +1 -0
- package/dist/types/common/calendar/components/monthView/monthView.d.ts +5 -0
- package/dist/types/common/calendar/components/monthView/monthView.types.d.ts +10 -0
- package/dist/types/common/calendar/components/timeGrid/index.d.ts +1 -0
- package/dist/types/common/calendar/components/timeGrid/timeGrid.d.ts +5 -0
- package/dist/types/common/calendar/components/timeGrid/timeGrid.types.d.ts +40 -0
- package/dist/types/common/calendar/dates.d.ts +50 -0
- package/dist/types/common/calendar/format.d.ts +32 -0
- package/dist/types/common/calendar/gesture.d.ts +32 -0
- package/dist/types/common/calendar/index.d.ts +2 -0
- package/dist/types/common/calendar/layout.d.ts +74 -0
- package/dist/types/common/calendar/useGestures.d.ts +37 -0
- package/dist/types/common/calendar/usePager.d.ts +20 -0
- package/dist/types/common/calendar/view.types.d.ts +26 -0
- package/dist/types/common/configProvider/configProvider.types.d.ts +3 -0
- package/dist/types/common/confirmModal/confirmModal.types.d.ts +1 -1
- package/dist/types/common/datePicker/index.d.ts +1 -1
- package/dist/types/common/modal/modal.types.d.ts +4 -3
- package/dist/types/common/themeProvider/theme.types.d.ts +8 -0
- package/dist/types/common/utils/day.d.ts +8 -0
- package/dist/types/common/virtualList/useColumns.d.ts +3 -1
- package/dist/types/index.d.ts +2 -0
- package/docs/CLAUDE.md +7 -5
- package/docs/Calendar.md +184 -0
- package/docs/ConfigProvider.md +2 -1
- package/docs/ConfirmModal.md +1 -1
- package/docs/DatePicker.md +9 -2
- package/docs/Modal.md +2 -2
- package/docs/TimeInput.md +2 -0
- package/package.json +1 -1
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { CSSProperties } from 'react';
|
|
1
|
+
import { CSSProperties, ReactNode } from 'react';
|
|
2
2
|
import { SlotClassNames, SlotStyles, HtmlProps } from '../types/slots.types.js';
|
|
3
3
|
import { Presentation } from '../configProvider/presentation.types.js';
|
|
4
4
|
export type ModalSlots = 'container' | 'backdrop' | 'modal' | 'header' | 'title' | 'closeButton' | 'body' | 'footer';
|
|
@@ -7,9 +7,10 @@ export interface ModalLabels {
|
|
|
7
7
|
/** Close button, read out by screen readers. */
|
|
8
8
|
close?: string;
|
|
9
9
|
}
|
|
10
|
-
export interface ModalProps extends HtmlProps<HTMLDivElement> {
|
|
10
|
+
export interface ModalProps extends Omit<HtmlProps<HTMLDivElement>, 'title'> {
|
|
11
11
|
children?: React.ReactNode;
|
|
12
|
-
|
|
12
|
+
/** Heading in the header. Its text becomes the dialog's accessible name, unless `aria-label` is passed. */
|
|
13
|
+
title?: ReactNode;
|
|
13
14
|
isOpen?: boolean;
|
|
14
15
|
onClose?: () => void;
|
|
15
16
|
/** Applied to the modal panel itself */
|
|
@@ -205,6 +205,14 @@ export interface ThemeVariables {
|
|
|
205
205
|
'--tree-selected-background'?: string;
|
|
206
206
|
/** Selected row text. Falls back to --text-on-primary. */
|
|
207
207
|
'--tree-selected-color'?: string;
|
|
208
|
+
/** Height of one hour in the week and day views. Pinching zooms from it. Falls back to 3em. */
|
|
209
|
+
'--calendar-hour-height'?: string;
|
|
210
|
+
/** Today's date marker. Falls back to --primary-color. */
|
|
211
|
+
'--calendar-today-color'?: string;
|
|
212
|
+
/** The current-time line. Falls back to --error-color. */
|
|
213
|
+
'--calendar-now-color'?: string;
|
|
214
|
+
/** Corner radius of an event. Falls back to 6px. */
|
|
215
|
+
'--calendar-event-radius'?: string;
|
|
208
216
|
/** Page button size. Falls back to 36px. */
|
|
209
217
|
'--pagination-size'?: string;
|
|
210
218
|
/** Gap between page buttons. Falls back to 4px. */
|
|
@@ -14,3 +14,11 @@ export declare function formatDay({ year, month, day }: DayParts): string;
|
|
|
14
14
|
export declare function dateToDay(date: Date): string;
|
|
15
15
|
/** The first moment of a `'YYYY-MM-DD'` day in the browser's time zone. An Invalid Date for anything else. */
|
|
16
16
|
export declare function dayToDate(day: string): Date;
|
|
17
|
+
/** The `'HH:MM'` of `date` in the browser's time zone, the value a TimeInput holds; `''` for an Invalid Date. */
|
|
18
|
+
export declare function dateToTime(date: Date): string;
|
|
19
|
+
/**
|
|
20
|
+
* The moment a `'YYYY-MM-DD'` day and an `'HH:MM'` time stand for in the browser's time zone,
|
|
21
|
+
* DatePicker's and TimeInput's values together. A time the clock skips that day resolves forwards
|
|
22
|
+
* (02:30 becomes 03:30), a repeated one to its first occurrence. An Invalid Date for anything else.
|
|
23
|
+
*/
|
|
24
|
+
export declare function dayTimeToDate(day: string, time: string): Date;
|
|
@@ -19,6 +19,8 @@ interface UseColumnsArgs<T> {
|
|
|
19
19
|
containerHeight: number;
|
|
20
20
|
/** Re-measure `fit` columns when the container width settles (e.g. after a route transition). */
|
|
21
21
|
containerWidth: number;
|
|
22
|
+
/** Re-measure `fit` columns when rows replace the spinner under the same `items`. */
|
|
23
|
+
isLoading: boolean;
|
|
22
24
|
}
|
|
23
25
|
export interface UseColumnsResult<T> {
|
|
24
26
|
hasColumns: boolean;
|
|
@@ -48,5 +50,5 @@ export interface UseColumnsResult<T> {
|
|
|
48
50
|
* `fit`-column width measurement that pins one shared px track across the header
|
|
49
51
|
* and every row grid so they stay aligned.
|
|
50
52
|
*/
|
|
51
|
-
export declare function useColumns<T>({ columns, items, multiSelect, visibleColumnKeys, onVisibleColumnsChange, persistColumnsKey, showColumnToggle, userWidths, isFrozen, rootRef, startIndex, endIndex, containerHeight, containerWidth, }: UseColumnsArgs<T>): UseColumnsResult<T>;
|
|
53
|
+
export declare function useColumns<T>({ columns, items, multiSelect, visibleColumnKeys, onVisibleColumnsChange, persistColumnsKey, showColumnToggle, userWidths, isFrozen, rootRef, startIndex, endIndex, containerHeight, containerWidth, isLoading, }: UseColumnsArgs<T>): UseColumnsResult<T>;
|
|
52
54
|
export {};
|
|
@@ -21,6 +21,8 @@ export { default as Button } from './common/button/index.js';
|
|
|
21
21
|
export * from './common/button/index.js';
|
|
22
22
|
export { default as ButtonGroup } from './common/buttonGroup/index.js';
|
|
23
23
|
export * from './common/buttonGroup/index.js';
|
|
24
|
+
export { default as Calendar } from './common/calendar/index.js';
|
|
25
|
+
export * from './common/calendar/index.js';
|
|
24
26
|
export { default as Card } from './common/card/index.js';
|
|
25
27
|
export * from './common/card/index.js';
|
|
26
28
|
export { default as Carousel } from './common/carousel/index.js';
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
"use client";import{useComponentDefaults as e}from"../configProvider/useComponentDefaults.mjs";import{useLabels as t}from"../configProvider/useLabels.mjs";import{mergeRefs as n}from"../utils/mergeRefs.mjs";import{asDay as r,dateToDay as i,dayToDate as a}from"../utils/day.mjs";import{CalendarView as o}from"./calendar.types.mjs";import{addDays as s,dayDiff as c,hiddenDaySet as ee,periodRange as te,rangeWithNeighbours as ne,shownDay as re,shownDays as ie,startOfDay as l,stepDate as ae}from"./dates.mjs";import{formatPeriodTitle as oe,localeWeekStart as se}from"./format.mjs";import ce from"./components/agendaList/agendaList.mjs";import le from"./components/calendarHeader/calendarHeader.mjs";import ue from"./components/compactMonth/compactMonth.mjs";import de from"./components/monthView/monthView.mjs";import fe from"./components/timeGrid/timeGrid.mjs";import pe from"./calendar.module.mjs";import{useEffect as me,useLayoutEffect as u,useRef as d,useState as f}from"react";import p from"classnames";import{jsx as m,jsxs as h}from"react/jsx-runtime";var he=[o.Month,o.Week,o.Day,o.Agenda],ge=600,g={previous:`Previous`,next:`Next`,today:`Today`,viewSwitcher:`Calendar view`,month:`Month`,week:`Week`,day:`Day`,agenda:`Agenda`,allDay:`All day`,more:e=>`+${e} more`,eventCount:e=>e===1?`1 event`:`${e} events`,noEvents:`No events`,newEvent:`New event`};function _(_){let{events:v,date:y,defaultDate:_e,onDateChange:ve,view:b,defaultView:ye=o.Month,onViewChange:be,views:x=he,locale:S,weekStartsOn:xe,slotMinutes:Se=15,hiddenDays:C,scrollToHour:w,onRangeChange:T,onEventClick:E,onEventChange:D,onSlotCreate:O,renderEvent:k,labels:A,ref:j,className:Ce,style:we,classNames:M,styles:N,...P}=e(`Calendar`,_),F=t(`Calendar`,A,g),I=xe??se(S),L=ee(C),R=d(null),Te=d(null),[z,Ee]=f(0),[De,Oe]=f(1),[ke,Ae]=f(()=>{let e=r(_e);return e?a(e):l(new Date)}),B=r(y),V=re(B?a(B):ke,L),[je,Me]=f(ye),H=b??je;u(()=>{let e=R.current;if(!e)return;let t=()=>Ee(e.getBoundingClientRect().width);t();let n=new ResizeObserver(t);return n.observe(e),()=>n.disconnect()},[]);let U=z>0&&z<ge,W=ne(H,V,I,L),Ne=`${i(W.start)}/${i(W.end)}`,G=d({range:W,onRangeChange:T});u(()=>{G.current={range:W,onRangeChange:T}}),me(()=>{G.current.onRangeChange?.(G.current.range)},[Ne]);function K(e){let t=l(e);i(t)!==i(V)&&(Oe(t>V?1:-1),y===void 0&&Ae(t),ve?.(i(t)))}function q(e){e!==H&&(b===void 0&&Me(e),be?.(e))}let[J,Y]=f(()=>new Map);function Pe(e){let t=D?.(e);if(typeof t?.then!=`function`)return;let n=String(e.event.id),r={start:e.start,end:e.end};Y(e=>new Map(e).set(n,r));let i=()=>Y(e=>{if(e.get(n)!==r)return e;let t=new Map(e);return t.delete(n),t});t.then(i,i)}let X=J.size===0?v:v.map(e=>{let t=J.get(String(e.id));return t?{...e,...t}:e}),Z={events:X,date:V,view:H,locale:S,weekStartsOn:I,slotMinutes:Se,hidden:L,scrollToHour:w,text:F,onDateChange:K,onOpenDay:x.includes(o.Day)?e=>{K(e),q(o.Day)}:void 0,onEventClick:E,onEventChange:D&&Pe,onSlotCreate:O,renderEvent:k,classNames:M,slotStyles:N},Q=te(H,V,I),$=ie(Q.start,c(Q.start,Q.end),L),Fe={start:$[0],end:s($[$.length-1],1)};function Ie(){switch(H){case o.Week:case o.Day:return m(fe,{...Z,zoomRef:Te});case o.Agenda:return m(ce,{events:X,start:Q.start,days:c(Q.start,Q.end),hidden:L,scrollTo:V,showDayHeaders:!0,locale:S,text:F,onEventClick:E,renderEvent:k,classNames:M,slotStyles:N});default:return m(U?ue:de,{...Z})}}return h(`div`,{...P,ref:n(R,j),className:p(pe.calendar,Ce,M?.root),style:{...we,...N?.root},children:[m(le,{className:M?.header,style:N?.header,compact:U,title:oe(H,V,Fe,S),direction:De,view:H,views:x,text:F,onStep:e=>K(ae(H,V,e,L)),onToday:()=>K(new Date),onViewChange:q}),Ie()]})}export{_ as default};
|
|
2
|
+
//# sourceMappingURL=calendar.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"calendar.mjs","names":[],"sources":["../../../../package/common/calendar/calendar.tsx"],"sourcesContent":["import { useEffect, useLayoutEffect, useRef, useState, type ReactElement } from 'react';\nimport cx from 'classnames';\n\nimport { useComponentDefaults, useLabels } from '../configProvider';\nimport { mergeRefs } from '../utils/mergeRefs';\nimport { asDay, dayToDate } from '../utils/day';\nimport {\n CalendarView,\n type CalendarEvent,\n type CalendarEventChange,\n type CalendarLabels,\n type CalendarProps,\n} from './calendar.types';\nimport {\n dayDiff,\n dateToDay,\n addDays,\n hiddenDaySet,\n periodRange,\n rangeWithNeighbours,\n shownDay,\n shownDays,\n startOfDay,\n stepDate,\n} from './dates';\nimport { formatPeriodTitle, localeWeekStart } from './format';\nimport AgendaList from './components/agendaList';\nimport CalendarHeader from './components/calendarHeader';\nimport CompactMonth from './components/compactMonth';\nimport MonthView from './components/monthView';\nimport TimeGrid from './components/timeGrid';\nimport type { TimeGridZoom } from './components/timeGrid/timeGrid.types';\nimport type { CalendarViewProps } from './view.types';\n\nimport styles from './calendar.module.pcss';\n\nconst ALL_VIEWS = [CalendarView.Month, CalendarView.Week, CalendarView.Day, CalendarView.Agenda];\n\n/** Below this width the month view folds into the compact month with a day list. */\nconst COMPACT_WIDTH = 600;\n\nconst DEFAULT_LABELS: Required<CalendarLabels> = {\n previous: 'Previous',\n next: 'Next',\n today: 'Today',\n viewSwitcher: 'Calendar view',\n month: 'Month',\n week: 'Week',\n day: 'Day',\n agenda: 'Agenda',\n allDay: 'All day',\n more: (count) => `+${count} more`,\n eventCount: (count) => (count === 1 ? '1 event' : `${count} events`),\n noEvents: 'No events',\n newEvent: 'New event',\n};\n\nfunction Calendar<E extends CalendarEvent = CalendarEvent>(props: CalendarProps<E>): ReactElement {\n const {\n events,\n date: controlledDate,\n defaultDate,\n onDateChange,\n view: controlledView,\n defaultView = CalendarView.Month,\n onViewChange,\n views = ALL_VIEWS,\n locale,\n weekStartsOn: weekStartsOnProp,\n slotMinutes = 15,\n hiddenDays,\n scrollToHour,\n onRangeChange,\n onEventClick,\n onEventChange,\n onSlotCreate,\n renderEvent,\n labels,\n ref,\n className,\n style,\n classNames,\n styles: slotStyles,\n ...rest\n } = useComponentDefaults('Calendar', props);\n const text = useLabels('Calendar', labels, DEFAULT_LABELS);\n const weekStartsOn = weekStartsOnProp ?? localeWeekStart(locale);\n const hidden = hiddenDaySet(hiddenDays);\n\n const rootRef = useRef<HTMLDivElement>(null);\n const zoomRef = useRef<TimeGridZoom | null>(null);\n const [width, setWidth] = useState(0);\n const [direction, setDirection] = useState<1 | -1>(1);\n\n // `date` is a day, the same wherever the calendar is opened, and read as its first local moment.\n const [internalDate, setInternalDate] = useState(() => {\n const initial = asDay(defaultDate);\n return initial ? dayToDate(initial) : startOfDay(new Date());\n });\n const controlledDay = asDay(controlledDate);\n // Only ever a day the views show. The selection itself is left alone: a hidden day in `date` is\n // the parent's, and stepping on from it lands where the parent would expect.\n const date = shownDay(controlledDay ? dayToDate(controlledDay) : internalDate, hidden);\n const [internalView, setInternalView] = useState(defaultView);\n const view = controlledView ?? internalView;\n\n // The layout switch follows the calendar's own width rather than the viewport's, so it also\n // happens in a sidebar on a wide screen. Width 0 means no layout (server, jsdom): stay wide.\n useLayoutEffect(() => {\n const root = rootRef.current;\n if (!root) return;\n // The border box, both times: an observer's `contentRect` leaves the border out, and 600px\n // wide would then read as 598.\n const measure = () => setWidth(root.getBoundingClientRect().width);\n measure();\n const observer = new ResizeObserver(measure);\n observer.observe(root);\n return () => observer.disconnect();\n }, []);\n const compact = width > 0 && width < COMPACT_WIDTH;\n\n // Reported per range, not per render: `date` is a new object on every render of a controlled\n // parent. Not `useEffectEvent` for the latest callback, which React only has from 19.2.\n const range = rangeWithNeighbours(view, date, weekStartsOn, hidden);\n const rangeKey = `${dateToDay(range.start)}/${dateToDay(range.end)}`;\n const latest = useRef({ range, onRangeChange });\n useLayoutEffect(() => {\n latest.current = { range, onRangeChange };\n });\n useEffect(() => {\n latest.current.onRangeChange?.(latest.current.range);\n }, [rangeKey]);\n\n function changeDate(next: Date) {\n const day = startOfDay(next);\n if (dateToDay(day) === dateToDay(date)) return;\n setDirection(day > date ? 1 : -1);\n if (controlledDate === undefined) setInternalDate(day);\n onDateChange?.(dateToDay(day));\n }\n\n function changeView(next: CalendarView) {\n if (next === view) return;\n if (controlledView === undefined) setInternalView(next);\n onViewChange?.(next);\n }\n\n // Moves whose promise has not settled yet, drawn where they were dropped meanwhile.\n const [pending, setPending] = useState<ReadonlyMap<string, { start: Date; end: Date }>>(() => new Map());\n function changeEvent(change: CalendarEventChange<E>) {\n const result = onEventChange?.(change);\n if (typeof (result as Promise<unknown> | undefined)?.then !== 'function') return;\n const key = String(change.event.id);\n const entry = { start: change.start, end: change.end };\n setPending((current) => new Map(current).set(key, entry));\n // A later move of the same event owns the entry by then, and keeps it.\n const settle = () =>\n setPending((current) => {\n if (current.get(key) !== entry) return current;\n const next = new Map(current);\n next.delete(key);\n return next;\n });\n (result as Promise<unknown>).then(settle, settle);\n }\n const shownEvents =\n pending.size === 0\n ? events\n : events.map((event) => {\n const moved = pending.get(String(event.id));\n return moved ? { ...event, ...moved } : event;\n });\n\n const viewProps: CalendarViewProps<E> = {\n events: shownEvents,\n date,\n view,\n locale,\n weekStartsOn,\n slotMinutes,\n hidden,\n scrollToHour,\n text,\n onDateChange: changeDate,\n onOpenDay: views.includes(CalendarView.Day)\n ? (day) => {\n changeDate(day);\n changeView(CalendarView.Day);\n }\n : undefined,\n onEventClick,\n onEventChange: onEventChange && changeEvent,\n onSlotCreate,\n renderEvent,\n classNames,\n slotStyles,\n };\n\n // The week's title names the days it shows, not the ones it hides at either end.\n const period = periodRange(view, date, weekStartsOn);\n const columns = shownDays(period.start, dayDiff(period.start, period.end), hidden);\n const titleRange = { start: columns[0], end: addDays(columns[columns.length - 1], 1) };\n\n function renderView() {\n switch (view) {\n case CalendarView.Week:\n case CalendarView.Day:\n return <TimeGrid {...viewProps} zoomRef={zoomRef} />;\n case CalendarView.Agenda: {\n return (\n <AgendaList\n events={shownEvents}\n start={period.start}\n days={dayDiff(period.start, period.end)}\n hidden={hidden}\n scrollTo={date}\n showDayHeaders\n locale={locale}\n text={text}\n onEventClick={onEventClick}\n renderEvent={renderEvent}\n classNames={classNames}\n slotStyles={slotStyles}\n />\n );\n }\n default:\n return compact ? <CompactMonth {...viewProps} /> : <MonthView {...viewProps} />;\n }\n }\n\n return (\n <div\n {...rest}\n ref={mergeRefs(rootRef, ref)}\n className={cx(styles.calendar, className, classNames?.root)}\n style={{ ...style, ...slotStyles?.root }}\n >\n <CalendarHeader\n className={classNames?.header}\n style={slotStyles?.header}\n compact={compact}\n title={formatPeriodTitle(view, date, titleRange, locale)}\n direction={direction}\n view={view}\n views={views}\n text={text}\n onStep={(step) => changeDate(stepDate(view, date, step, hidden))}\n onToday={() => changeDate(new Date())}\n onViewChange={changeView}\n />\n {renderView()}\n </div>\n );\n}\n\nexport default Calendar;\n"],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"calendar.module.mjs","names":[],"sources":["../../../../package/common/calendar/calendar.module.pcss"],"sourcesContent":[".calendar {\n /* Theme tokens resolved once, each with a built-in fallback. Set any of the public\n `--calendar-*` variables through ThemeProvider (theme-wide) or `style` (per instance). */\n --custom-calendar-hour-height: var(--calendar-hour-height, 3em);\n --custom-calendar-today-color: var(--calendar-today-color, var(--primary-color));\n --custom-calendar-now-color: var(--calendar-now-color, var(--error-color));\n --custom-calendar-event-radius: var(--calendar-event-radius, 6px);\n\n isolation: isolate;\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n height: 40em;\n min-height: 0;\n overflow: hidden;\n border: 1px solid var(--border-color);\n border-radius: var(--default-border-radius);\n background: var(--background);\n color: var(--text-color);\n}\n"],"mappings":""}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"calendar.types.mjs","names":[],"sources":["../../../../package/common/calendar/calendar.types.ts"],"sourcesContent":["import type { CSSProperties, ReactNode, Ref } from 'react';\nimport type { SlotClassNames, SlotStyles, HtmlProps } from '../types/slots.types';\n\nexport enum CalendarView {\n Month = 'month',\n Week = 'week',\n Day = 'day',\n Agenda = 'agenda',\n}\n\n/** A day of the week, as `Date#getDay()` counts: 0 is Sunday, 1 is Monday. */\nexport type CalendarWeekday = 0 | 1 | 2 | 3 | 4 | 5 | 6;\n\n/** First day of the week, as `Date#getDay()` counts: 0 is Sunday, 1 is Monday. */\nexport type CalendarWeekStart = CalendarWeekday;\n\nexport interface CalendarEvent {\n id: string | number;\n title: string;\n /** Local time. */\n start: Date;\n /** Local time, exclusive. An all-day event on the 26th ends at midnight on the 27th. */\n end: Date;\n /** Shown in the all-day row instead of the time grid. Timed events of 24 hours or more are too. */\n allDay?: boolean;\n /** Any CSS colour. Falls back to `--primary-color`. */\n color?: string;\n /** Can be clicked but not moved or resized. */\n readOnly?: boolean;\n}\n\n/** A span of local time. `end` is exclusive. */\nexport interface CalendarRange {\n start: Date;\n end: Date;\n}\n\nexport interface CalendarEventChange<E extends CalendarEvent = CalendarEvent> {\n event: E;\n start: Date;\n end: Date;\n}\n\nexport interface CalendarSlot {\n start: Date;\n end: Date;\n allDay: boolean;\n}\n\n/** Where `renderEvent` draws an event. */\nexport interface CalendarEventContext {\n /**\n * The event has one line: an event under 45 minutes in the week and day views, an all-day bar,\n * or a row of the month view. The day and agenda lists have room for more.\n */\n singleLine: boolean;\n}\n\nexport type CalendarSlots = 'root' | 'header' | 'dayHeader' | 'cell' | 'event';\n\n/** Text Calendar renders of its own, for translating it. Dates and times come from `locale`. */\nexport interface CalendarLabels {\n /** Previous period button (default `Previous`). */\n previous?: string;\n /** Next period button (default `Next`). */\n next?: string;\n /** Jump to today (default `Today`). */\n today?: string;\n /** Name of the view switcher, read out by screen readers (default `Calendar view`). */\n viewSwitcher?: string;\n month?: string;\n week?: string;\n day?: string;\n agenda?: string;\n /** All-day row and all-day events (default `All day`). */\n allDay?: string;\n /** Overflow button in a month cell (default `+3 more`). */\n more?: (count: number) => string;\n /** Appended to a day's name for screen readers (default `3 events`). */\n eventCount?: (count: number) => string;\n /** A day or period without events (default `No events`). */\n noEvents?: string;\n /** Create button in a day's event list, shown when `onSlotCreate` is set (default `New event`). */\n newEvent?: string;\n}\n\nexport interface CalendarProps<E extends CalendarEvent = CalendarEvent> extends HtmlProps<HTMLDivElement> {\n /** The events to show. Only the ones inside the range `onRangeChange` reports are needed. */\n events: E[];\n /** Controlled: the selected day, `'YYYY-MM-DD'`, whose period is shown. Omit for uncontrolled. */\n date?: string;\n /** Day shown initially when uncontrolled, `'YYYY-MM-DD'` (default today). */\n defaultDate?: string;\n /** Called with the new day, `'YYYY-MM-DD'`: the value a DatePicker holds. */\n onDateChange?: (day: string) => void;\n /** Controlled view. Omit for uncontrolled. */\n view?: CalendarView;\n /** View shown initially when uncontrolled (default `CalendarView.Month`). */\n defaultView?: CalendarView;\n onViewChange?: (view: CalendarView) => void;\n /** Views offered in the switcher, in order. The switcher is hidden when there is only one (default all four). */\n views?: CalendarView[];\n /** BCP 47 tag for dates, times and the week start (default the browser's locale). */\n locale?: string;\n /** Overrides the locale's first day of the week. */\n weekStartsOn?: CalendarWeekStart;\n /** Minutes that creating, moving and resizing snap to (default `15`). */\n slotMinutes?: number;\n /** Days of the week left out of every view: `[0, 6]` hides the weekend. */\n hiddenDays?: CalendarWeekday[];\n /**\n * Hour the week and day views open at, such as `6` for 06:00 (default an hour before now while\n * today is shown, otherwise 07:00).\n */\n scrollToHour?: number;\n /**\n * Called on mount and whenever the shown period changes, with the period and one either side of\n * it, so the neighbours are already filled while swiping. Fetch events and expand recurring\n * series for this range.\n */\n onRangeChange?: (range: CalendarRange) => void;\n /** An event was clicked or tapped. `anchor` is its element, for positioning a popover. */\n onEventClick?: (event: E, anchor: HTMLElement) => void;\n /**\n * An event was moved or resized. Setting it is what makes events draggable. Update `events`\n * in the same render, or return a promise: the event then stays where it was dropped until the\n * promise settles, and is drawn from `events` again after that, back in place if it rejected.\n */\n onEventChange?: (change: CalendarEventChange<E>) => void | Promise<unknown>;\n /**\n * Empty time was clicked or dragged over. Setting it is what enables creating: a click creates\n * an hour, or an all-day slot in the month view. `anchor` marks the slot on screen, for a\n * popover's `anchor`: the day's cell in the month view, an invisible box over the slot in the\n * week and day views.\n */\n onSlotCreate?: (slot: CalendarSlot, anchor: HTMLElement) => void;\n /**\n * Content of an event, in place of its title. Must not contain interactive elements. Keep to the\n * title where `context.singleLine` is set: further lines have no room there.\n */\n renderEvent?: (event: E, context: CalendarEventContext) => ReactNode;\n /** The root element. */\n ref?: Ref<HTMLDivElement>;\n\n className?: string;\n style?: CSSProperties;\n classNames?: SlotClassNames<CalendarSlots>;\n styles?: SlotStyles<CalendarSlots>;\n /** Overrides the text Calendar renders of its own. Merged per key. */\n labels?: CalendarLabels;\n}\n\n/** The props `ConfigProvider` can set for every Calendar. The rest depend on the event type. */\nexport type CalendarDefaults = Pick<\n CalendarProps,\n 'labels' | 'locale' | 'weekStartsOn' | 'slotMinutes' | 'views' | 'hiddenDays' | 'scrollToHour'\n>;\n"],"mappings":"aAGA,IAAY,EAAL,SAAA,EAAA,OACL,GAAA,MAAA,QACA,EAAA,KAAA,OACA,EAAA,IAAA,MACA,EAAA,OAAA,UACF,EAAA,CAAA,CAAA"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
"use client";import{dateToDay as e}from"../../../utils/day.mjs";import{addDays as t,isSameDay as n,shownDays as r}from"../../dates.mjs";import{formatDayNumber as i,formatLongDate as a,formatTime as o,formatTimeRange as s,formatWeekday as c}from"../../format.mjs";import{eventEnd as l,eventsByDay as u,isAllDayLike as d}from"../../layout.mjs";import f from"./agendaList.module.mjs";import{useId as p,useLayoutEffect as m,useRef as h}from"react";import g from"classnames";import{Fragment as _,jsx as v,jsxs as y}from"react/jsx-runtime";function b({events:b,start:x,days:S,hidden:C,scrollTo:w,showDayHeaders:T,locale:E,text:D,onEventClick:O,renderEvent:k,className:A,classNames:j,slotStyles:M}){let N=p(),P=h(null),F=r(x,S,C),I=u(b,F),L=new Date,R=w?e(w):null;m(()=>{let e=P.current;if(!e||R===null)return;let t=[...e.querySelectorAll(`[data-cal-day]`)].find(e=>(e.dataset.calDay??``)>=R);e.scrollTop=t?t.offsetTop:0},[R]);let z=I.flatMap((e,t)=>e.length>0||!T?[{day:F[t],dayEvents:e}]:[]);return y(`div`,{ref:P,className:g(f.agendaList,A),children:[z.every(({dayEvents:e})=>e.length===0)&&v(`p`,{className:f.agendaListEmpty,children:D.noEvents}),z.map(({day:r,dayEvents:u})=>{if(u.length===0)return null;let p=`${N}-${e(r)}`,m=n(r,L),h=t(r,1);return y(`div`,{role:`group`,"aria-labelledby":T?p:void 0,className:g(f.agendaListDay,T&&f.agendaListDayWithHeader),"data-cal-day":e(r),children:[T&&y(`div`,{id:p,className:g(f.agendaListDayHeader,j?.dayHeader),style:M?.dayHeader,"aria-label":a(r,E),children:[v(`span`,{className:g(f.agendaListDayNumber,m&&f.agendaListDayNumberToday),"aria-hidden":!0,children:i(r,E)}),v(`span`,{className:f.agendaListDayName,"aria-hidden":!0,children:c(r,E,`short`)})]}),v(`ul`,{className:f.agendaListEvents,children:u.map(e=>{let t=l(e),n=e.start<r?r:e.start,i=t>h?h:t,a=d(e)||e.start<=r&&t>=h,c=a?D.allDay:s(e.start,t,E);return v(`li`,{children:y(`button`,{type:`button`,className:g(f.agendaListEvent,j?.event),style:{"--event-color":e.color,...M?.event},"aria-label":`${e.title}, ${c}`,"data-cal-event":String(e.id),onClick:t=>O?.(e,t.currentTarget),children:[v(`span`,{className:f.agendaListTime,"aria-hidden":!0,children:a?D.allDay:y(_,{children:[v(`span`,{children:o(n,E)}),v(`span`,{className:f.agendaListTimeEnd,children:o(i,E)})]})}),v(`span`,{className:f.agendaListAccent,"aria-hidden":!0}),v(`span`,{className:f.agendaListTitle,"aria-hidden":!0,children:k?k(e,{singleLine:!1}):e.title})]})},e.id)})})]},e(r))})]})}export{b as default};
|
|
2
|
+
//# sourceMappingURL=agendaList.mjs.map
|
|
@@ -0,0 +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":"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"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
"use client";var e=`agendaList_C00ZD`,t=`agendaList-empty_X742J`,n=`agendaList-day_S13Dn`,r=`agendaList-day-withHeader_DiXSD`,i=`agendaList-day-header_X9tfZ`,a=`agendaList-day-number_QfwoV`,o=`agendaList-day-number-today_v-2hj`,s=`agendaList-day-name_wqrBS`,c=`agendaList-events_PYc6m`,l=`agendaList-event_73lKv`,u=`agendaList-time_YyZCE`,d=`agendaList-time-end_zz3Xc`,f=`agendaList-accent_wCj9l`,p=`agendaList-title_0jQBA`,m={agendaList:e,"agendaList-empty":`agendaList-empty_X742J`,agendaListEmpty:t,"agendaList-day":`agendaList-day_S13Dn`,agendaListDay:n,"agendaList-day-withHeader":`agendaList-day-withHeader_DiXSD`,agendaListDayWithHeader:r,"agendaList-day-header":`agendaList-day-header_X9tfZ`,agendaListDayHeader:i,"agendaList-day-number":`agendaList-day-number_QfwoV`,agendaListDayNumber:a,"agendaList-day-number-today":`agendaList-day-number-today_v-2hj`,agendaListDayNumberToday:o,"agendaList-day-name":`agendaList-day-name_wqrBS`,agendaListDayName:s,"agendaList-events":`agendaList-events_PYc6m`,agendaListEvents:c,"agendaList-event":`agendaList-event_73lKv`,agendaListEvent:l,"agendaList-time":`agendaList-time_YyZCE`,agendaListTime:u,"agendaList-time-end":`agendaList-time-end_zz3Xc`,agendaListTimeEnd:d,"agendaList-accent":`agendaList-accent_wCj9l`,agendaListAccent:f,"agendaList-title":`agendaList-title_0jQBA`,agendaListTitle:p};export{e as agendaList,f as agendaListAccent,n as agendaListDay,i as agendaListDayHeader,s as agendaListDayName,a as agendaListDayNumber,o as agendaListDayNumberToday,r as agendaListDayWithHeader,t as agendaListEmpty,l as agendaListEvent,c as agendaListEvents,u as agendaListTime,d as agendaListTimeEnd,p as agendaListTitle,m as default};
|
|
2
|
+
//# sourceMappingURL=agendaList.module.mjs.map
|
|
@@ -0,0 +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":""}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
"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};
|
|
2
|
+
//# sourceMappingURL=calendarHeader.mjs.map
|
|
@@ -0,0 +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"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
"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};
|
|
2
|
+
//# sourceMappingURL=calendarHeader.module.mjs.map
|
|
@@ -0,0 +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":""}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
"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};
|
|
2
|
+
//# sourceMappingURL=compactMonth.mjs.map
|
|
@@ -0,0 +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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"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
"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};
|
|
2
|
+
//# sourceMappingURL=compactMonth.module.mjs.map
|
|
@@ -0,0 +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":""}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
"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};
|
|
2
|
+
//# sourceMappingURL=monthView.mjs.map
|
|
@@ -0,0 +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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"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
"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};
|
|
2
|
+
//# sourceMappingURL=monthView.module.mjs.map
|
|
@@ -0,0 +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":""}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
"use client";import{renderIcon as e}from"../../../utils/renderIcon.mjs";import{dateToDay as t}from"../../../utils/day.mjs";import{CalendarView as n}from"../../calendar.types.mjs";import{MINUTES_PER_DAY as r,addDays as i,atMinutes as a,dayDiff as o,endAfter as s,isSameDay as c,minutesOfDay as l,periodRange as u,shownDays as d,stepDate as ee}from"../../dates.mjs";import{formatClockRange as te,formatDayNumber as ne,formatHour as re,formatLongDate as ie,formatTimeRange as ae,formatWeekday as oe}from"../../format.mjs";import{eventEnd as f,isAllDayLike as se,limitLanes as ce,packDay as le,packLanes as ue}from"../../layout.mjs";import{clamp as p,pageStep as de,snap as fe}from"../../gesture.mjs";import{useGestures as pe}from"../../useGestures.mjs";import{usePager as me}from"../../usePager.mjs";import m from"../../pager.module.mjs";import h from"./timeGrid.module.mjs";import{useEffect as he,useLayoutEffect as ge,useRef as g,useState as _}from"react";import v from"classnames";import{faChevronDown as _e}from"@fortawesome/free-solid-svg-icons";import{Fragment as ve,jsx as y,jsxs as b}from"react/jsx-runtime";var ye=[-1,0,1],be=Array.from({length:23},(e,t)=>t+1),xe=3,Se=45,Ce=7,x=4;function we(){let[e,t]=_(()=>new Date);return he(()=>{let e;function n(){e=setTimeout(()=>{t(new Date),n()},6e4-Date.now()%6e4)}return n(),()=>clearTimeout(e)},[]),e}function Te({scroller:e,head:t,body:n},r,i,a,o){let s=r.current?.base??n.getBoundingClientRect().height/24;if(!s)return;let c=Math.max((e.clientHeight-t.offsetHeight)/24,1),l=p(i,Math.min(c,s),s*x);r.current={hour:l,base:s},e.style.setProperty(`--custom-calendar-hour-height`,`${l}px`);let u=e.getBoundingClientRect().top;e.scrollTop=n.offsetTop+a*l-(o-u)}function S({events:x,date:S,view:C,locale:w,weekStartsOn:Ee,slotMinutes:T,hidden:E,scrollToHour:De,text:D,onDateChange:Oe,onOpenDay:O,onEventClick:k,onEventChange:A,onSlotCreate:j,renderEvent:M,classNames:N,slotStyles:P,zoomRef:F}){let I=g(null),L=g(null),R=g(null),z=g(null),B=g(null),ke=g(null),V=g(x),H=g(null),[U,Ae]=_(null),[W,je]=_(!1),G=we(),K=C===n.Day?1:7,q=u(C,S,Ee).start,J=d(q,K,E),Me=U?V.current:x,Y=me(t(q),e=>Oe(ee(C,S,e,E)),()=>I.current);function X(){let e=I.current,t=L.current,n=R.current;return e&&t&&n?{scroller:e,head:t,body:n}:null}ge(()=>{let e=I.current,t=R.current;if(!e||!t)return;let n=t.offsetHeight/24;if(!n)return;let r=new Date,i=J.some(e=>c(e,r)),a=De??(i?Math.max(0,l(r)/60-1):Ce);e.scrollTop=p(a,0,24)*n},[]),he(()=>{let e=I.current;if(!e)return;function t(e){if(!e.ctrlKey)return;let t=X();if(!t)return;e.preventDefault();let n=t.body.getBoundingClientRect(),r=n.height/24;r&&Te(t,F,r*Math.exp(-e.deltaY*.01),(e.clientY-n.top)/r,e.clientY)}return e.addEventListener(`wheel`,t,{passive:!1}),()=>e.removeEventListener(`wheel`,t)},[F]);function Ne(e){let t=z.current;if(!t)return null;let n=t.getBoundingClientRect();if(!n.width||!n.height)return null;let i=p(Math.floor((e.x-n.left)/n.width*J.length),0,J.length-1);return{day:o(q,J[i]),minutes:p((e.y-n.top)/n.height*r,0,r)}}function Pe(e){return o(q,e)*r+l(e)}function Z(e,t){let n=Ne(t);if(!n)return null;let o=K*r;if(e.kind===`create`){let t=Math.floor(e.anchor/T)*T,[o,c]=n.minutes>=t?[t,Math.max(Math.ceil(n.minutes/T)*T,t+T)]:[Math.floor(n.minutes/T)*T,t+T],l=i(q,e.day),u=a(l,o);return{start:u,end:s(u,a(l,Math.min(c,r)),c-o)}}let c=n.day*r+n.minutes,l=Pe(e.event.start);if(e.kind===`move`){let t=p(fe(c-e.grab,T),Math.min(l,0),o-T),n=a(q,t),r=f(e.event).getTime()-e.event.start.getTime();return{start:n,end:new Date(n.getTime()+r)}}let u=p(fe(c,T),l+T,Math.max(o,l+T)),d=e.event.start;return{start:d,end:s(d,a(q,u),u-l)}}function Q(e){B.current=e,Ae(e)}function Fe(e){return x.find(t=>String(t.id)===e.dataset.calEvent)}pe(I,{onPress:Y.finish,canSwipe:()=>!0,onSwipeMove:Y.move,onSwipeEnd:(e,t)=>Y.settle(de(e,Y.width(),t)),dragFrom:(e,t)=>{if(!z.current?.contains(e))return null;let n=Ne(t);if(!n)return null;let a=e.closest(`[data-cal-event]`);if(a){let t=A?Fe(a):void 0;if(!t||t.readOnly)return null;let i={start:t.start,end:f(t)};return e.closest(`[data-cal-resize]`)?{kind:`resize`,event:t,...i}:{kind:`move`,event:t,grab:n.day*r+n.minutes-Pe(t.start),...i}}if(!j)return null;let o=i(q,n.day);return{kind:`create`,day:n.day,anchor:n.minutes,start:o,end:o}},onDragStart:(e,t)=>{V.current=x,Q({...e,...Z(e,t)})},onDragMove:e=>{let t=B.current,n=t&&Z(t,e);t&&n&&(n.start.getTime()!==t.start.getTime()||n.end.getTime()!==t.end.getTime())&&Q({...t,...n})},onDragEnd:e=>{let t=B.current;if(Q(null),!t)return;let{start:n,end:r}=Z(t,e)??t;if(t.kind===`create`){j?.({start:n,end:r,allDay:!1},Le(t.day,n,r));return}(n.getTime()!==t.event.start.getTime()||r.getTime()!==f(t.event).getTime())&&A?.({event:t.event,start:n,end:r})},onDragCancel:()=>Q(null),onPinchStart:(e,t)=>{let n=R.current;if(!n)return;let r=n.getBoundingClientRect(),i=r.height/24;i&&(H.current={hour:i,anchorHour:(e.y-r.top)/i,distance:t})},onPinchMove:(e,t)=>{let n=H.current,r=X();n&&r&&n.distance&&Te(r,F,n.hour*t/n.distance,n.anchorHour,e.y)},onPinchEnd:()=>{H.current=null},autoScroll:()=>{let e=I.current,t=L.current;if(!e||!t)return null;let n=e.getBoundingClientRect();return{element:e,top:n.top+t.offsetHeight,bottom:n.bottom}}});function Ie(e,t){if(!j||e.target.closest(`[data-cal-event]`))return;let n=e.currentTarget.getBoundingClientRect();if(!n.height)return;let i=(e.clientY-n.top)/n.height*r,s=p(Math.floor(i/T)*T,0,r-T),c=a(t,s),l=new Date(c.getTime()+Math.max(60,T)*6e4),u=a(t,r),d={start:c,end:l<u?l:u,allDay:!1};j(d,Le(o(q,t),d.start,d.end))}function Le(e,t,n){let a=ke.current;if(!a)return I.current;let s=i(q,e+1),c=l(t),u=n>=s?r:l(n),d=Math.max(J.findIndex(t=>o(q,t)===e),0);return a.style.left=`${d/J.length*100}%`,a.style.width=`${100/J.length}%`,a.style.top=`${c/r*100}%`,a.style.height=`${Math.max(u-c,0)/r*100}%`,a}function Re(e){let{event:t}=e;return y(`button`,{type:`button`,"data-cal-event":String(t.id),className:v(h.timeGridBar,e.continuesBefore&&h.timeGridBarContinuesBefore,e.continuesAfter&&h.timeGridBarContinuesAfter,N?.event),style:{"--event-color":t.color,gridColumn:`${e.start+1} / span ${e.span}`,gridRow:e.lane+1,...P?.event},"aria-label":`${t.title}, ${D.allDay}`,onClick:e=>k?.(t,e.currentTarget),children:y(`span`,{className:h.timeGridBarTitle,"aria-hidden":!0,children:M?M(t,{singleLine:!0}):t.title})},t.id)}function ze(e){let{event:t}=e,n=e.bottom-e.top,i=n<Se,a=ae(t.start,f(t),w),o=!!A&&!t.readOnly&&!e.continuesAfter,s=U&&U.kind!==`create`&&U.event===t;return b(`button`,{type:`button`,"data-cal-event":String(t.id),"aria-label":`${t.title}, ${a}`,className:v(h.timeGridEvent,i&&h.timeGridEventShort,n<15&&h.timeGridEventBrief,e.continuesBefore&&h.timeGridEventContinuesBefore,e.continuesAfter&&h.timeGridEventContinuesAfter,(k||o)&&h.timeGridEventInteractive,s&&h.timeGridEventDragged,N?.event),style:{"--event-color":t.color,top:`${e.top/r*100}%`,"--span":`${n/r*100}%`,left:`calc(var(--column-width) * ${e.column/e.columns})`,width:`calc(var(--column-width) * ${e.span/e.columns})`,...P?.event},onClick:e=>k?.(t,e.currentTarget),children:[y(`span`,{className:h.timeGridEventTitle,"aria-hidden":!0,children:M?M(t,{singleLine:i}):t.title}),y(`span`,{className:h.timeGridEventTime,"aria-hidden":!0,children:te(t.start,f(t),w)}),o&&y(`span`,{"data-cal-resize":!0,className:h.timeGridResize,"aria-hidden":!0})]},t.id)}function Be(e){if(!U)return null;let t=e,n=i(e,1);if(U.end<=t&&U.start<t||U.start>=n)return null;let a=U.start<t?0:l(U.start),o=U.end>=n?r:l(U.end),s=U.kind===`create`?void 0:U.event.color,c=U.kind===`create`?null:U.event.title;return b(`div`,{className:h.timeGridPreview,style:{"--event-color":s,top:`${a/r*100}%`,height:`${Math.max(o-a,15)/r*100}%`},"aria-hidden":!0,children:[c&&y(`span`,{className:h.timeGridEventTitle,children:c}),y(`span`,{className:h.timeGridPreviewTime,children:te(U.start,U.end,w)})]})}let $=ye.map(e=>{let t=u(C,ee(C,S,e,E),Ee).start,n=d(t,K,E),r=ue(Me,n,se);return{step:e,start:t,dates:n,lanes:W?{visible:r,moreLane:0,hidden:n.map(()=>0)}:ce(r,n.length,xe)}}),Ve=$[1].lanes.hidden.some(e=>e>0),He=e=>v(m.pagerPane,e===-1&&m.pagerPanePrev,e===1&&m.pagerPaneNext);return b(`div`,{ref:I,tabIndex:-1,className:h.timeGrid,style:{"--days":J.length,"--custom-calendar-hour-height":F.current?`${F.current.hour}px`:void 0},children:[b(`div`,{ref:L,className:h.timeGridHead,children:[y(`div`,{className:h.timeGridCorner,children:(Ve||W)&&y(`button`,{type:`button`,className:v(h.timeGridToggle,W&&h.timeGridToggleOpen),"aria-label":D.allDay,"aria-expanded":W,onClick:()=>je(e=>!e),children:e(_e)})}),y(`div`,{className:m.pagerViewport,children:y(`div`,{ref:Y.trackRef,className:m.pagerTrack,children:$.map(({step:e,start:n,dates:r,lanes:i})=>b(`div`,{className:v(He(e),h.timeGridHeadPane),inert:e!==0,"aria-hidden":e!==0||void 0,children:[r.map(e=>{let n=c(e,G),r=b(ve,{children:[y(`span`,{className:h.timeGridWeekday,children:oe(e,w,`short`)}),y(`span`,{className:v(h.timeGridDayNumber,n&&h.timeGridDayNumberToday),children:ne(e,w)})]}),i={className:v(h.timeGridDayHeader,N?.dayHeader),style:P?.dayHeader,"aria-current":n?`date`:void 0};return K>1&&O?y(`button`,{type:`button`,...i,className:v(i.className,h.timeGridDayHeaderLink),"aria-label":ie(e,w),onClick:()=>O(e),children:r},t(e)):y(`div`,{...i,children:r},t(e))}),b(`div`,{className:h.timeGridAllDay,"aria-label":D.allDay,role:`group`,children:[i.visible.map(Re),i.hidden.map((e,t)=>e>0&&y(`div`,{"aria-hidden":!0,className:h.timeGridMore,style:{gridColumn:t+1,gridRow:i.moreLane+1},onClick:()=>je(!0),children:D.more(e)},`more-${t}`))]})]},t(n)))})})]}),b(`div`,{ref:R,className:h.timeGridBody,children:[y(`div`,{className:h.timeGridGutter,"aria-hidden":!0,children:be.map(e=>y(`span`,{className:h.timeGridHour,style:{top:`${e/24*100}%`},children:re(e,w)},e))}),y(`div`,{className:m.pagerViewport,children:y(`div`,{ref:Y.trackRef,className:m.pagerTrack,children:$.map(({step:e,start:n,dates:r})=>b(`div`,{ref:e===0?z:void 0,className:v(He(e),h.timeGridBodyPane),inert:e!==0,"aria-hidden":e!==0||void 0,children:[r.map(n=>{let r=c(n,G);return b(`div`,{role:`group`,"aria-label":ie(n,w),"data-cal-column":t(n),className:v(h.timeGridColumn,r&&h.timeGridColumnToday,j&&h.timeGridColumnCreatable,N?.cell),style:P?.cell,onClick:e=>Ie(e,n),children:[le(Me,n).map(ze),r&&y(`div`,{className:h.timeGridNow,style:{top:`${l(G)/1440*100}%`},"aria-hidden":!0}),e===0&&Be(n)]},t(n))}),e===0&&y(`div`,{ref:ke,className:h.timeGridSlot,"aria-hidden":!0})]},t(n)))})})]})]})}export{S as default};
|
|
2
|
+
//# sourceMappingURL=timeGrid.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"timeGrid.mjs","names":[],"sources":["../../../../../../package/common/calendar/components/timeGrid/timeGrid.tsx"],"sourcesContent":["import {\n useEffect,\n useLayoutEffect,\n useRef,\n useState,\n type CSSProperties,\n type MouseEvent,\n type ReactElement,\n type RefObject,\n} from 'react';\nimport cx from 'classnames';\nimport { faChevronDown } from '@fortawesome/free-solid-svg-icons';\n\nimport { renderIcon } from 'components/common/utils/renderIcon';\nimport { CalendarView, type CalendarEvent } from '../../calendar.types';\nimport {\n addDays,\n atMinutes,\n dayDiff,\n dateToDay,\n endAfter,\n isSameDay,\n MINUTES_PER_DAY,\n minutesOfDay,\n periodRange,\n shownDays,\n stepDate,\n} from '../../dates';\nimport {\n formatClockRange,\n formatDayNumber,\n formatHour,\n formatLongDate,\n formatTimeRange,\n formatWeekday,\n} from '../../format';\nimport { clamp, pageStep, snap } from '../../gesture';\nimport {\n BRIEF_EVENT_MINUTES,\n eventEnd,\n isAllDayLike,\n limitLanes,\n packDay,\n packLanes,\n type LaneBar,\n type LimitedLanes,\n type TimedBox,\n} from '../../layout';\nimport { useGestures, type GesturePoint } from '../../useGestures';\nimport { usePager } from '../../usePager';\nimport type { TimeDrag, TimeGridProps, TimeGridZoom } from './timeGrid.types';\n\nimport pagerStyles from '../../pager.module.pcss';\nimport styles from './timeGrid.module.pcss';\n\nconst STEPS = [-1, 0, 1] as const;\nconst HOURS = Array.from({ length: 23 }, (_, i) => i + 1);\nconst ALL_DAY_LANES = 3;\n/** Below this an event is drawn on one line, its time after its title. */\nconst SHORT_EVENT_MINUTES = 45;\n/** Hour first scrolled to when today is not in view. */\nconst DEFAULT_SCROLL_HOUR = 7;\n/** Deepest zoom, as a multiple of the theme's hour height. */\nconst MAX_ZOOM = 4;\n\n/** The current time, updated on each minute boundary: it also carries the now-line past midnight. */\nfunction useNow(): Date {\n const [now, setNow] = useState(() => new Date());\n useEffect(() => {\n let timer: ReturnType<typeof setTimeout>;\n function schedule() {\n timer = setTimeout(\n () => {\n setNow(new Date());\n schedule();\n },\n 60_000 - (Date.now() % 60_000),\n );\n }\n schedule();\n return () => clearTimeout(timer);\n }, []);\n return now;\n}\n\ninterface ZoomElements {\n scroller: HTMLElement;\n head: HTMLElement;\n body: HTMLElement;\n}\n\n/**\n * Sets the hour height, and scrolls so `anchorHour` stays under `clientY`: zooming pivots on the\n * fingers or the cursor instead of the top of the day.\n */\nfunction zoomTo(\n { scroller, head, body }: ZoomElements,\n zoomRef: RefObject<TimeGridZoom | null>,\n hour: number,\n anchorHour: number,\n clientY: number,\n) {\n const base = zoomRef.current?.base ?? body.getBoundingClientRect().height / 24;\n if (!base) return;\n // Zoomed out, the whole day fits exactly.\n const min = Math.max((scroller.clientHeight - head.offsetHeight) / 24, 1);\n const next = clamp(hour, Math.min(min, base), base * MAX_ZOOM);\n zoomRef.current = { hour: next, base };\n scroller.style.setProperty('--custom-calendar-hour-height', `${next}px`);\n const top = scroller.getBoundingClientRect().top;\n scroller.scrollTop = body.offsetTop + anchorHour * next - (clientY - top);\n}\n\nfunction TimeGrid<E extends CalendarEvent>({\n events,\n date,\n view,\n locale,\n weekStartsOn,\n slotMinutes,\n hidden,\n scrollToHour,\n text,\n onDateChange,\n onOpenDay,\n onEventClick,\n onEventChange,\n onSlotCreate,\n renderEvent,\n classNames,\n slotStyles,\n zoomRef,\n}: TimeGridProps<E>): ReactElement {\n const scrollerRef = useRef<HTMLDivElement>(null);\n const headRef = useRef<HTMLDivElement>(null);\n const bodyRef = useRef<HTMLDivElement>(null);\n const currentRef = useRef<HTMLDivElement>(null);\n const dragRef = useRef<TimeDrag<E> | null>(null);\n const slotRef = useRef<HTMLDivElement>(null);\n const snapshot = useRef(events);\n const pinchRef = useRef<{ hour: number; anchorHour: number; distance: number } | null>(null);\n const [drag, setDrag] = useState<TimeDrag<E> | null>(null);\n const [allDayOpen, setAllDayOpen] = useState(false);\n const now = useNow();\n\n const periodDays = view === CalendarView.Day ? 1 : 7;\n const rangeStart = periodRange(view, date, weekStartsOn).start;\n const columns = shownDays(rangeStart, periodDays, hidden);\n // While a drag runs, the grid renders the events as they were when it began: the touch that\n // started it keeps targeting the element it landed on, and iOS stops delivering its moves if\n // a re-render replaces that element.\n const shown = drag ? snapshot.current : events;\n\n const pager = usePager(\n dateToDay(rangeStart),\n (step) => onDateChange(stepDate(view, date, step, hidden)),\n () => scrollerRef.current,\n );\n\n function zoomElements(): ZoomElements | null {\n const scroller = scrollerRef.current;\n const head = headRef.current;\n const body = bodyRef.current;\n return scroller && head && body ? { scroller, head, body } : null;\n }\n\n // Once, on mount: paging keeps the scroll position, so the same hours stay under the eye.\n useLayoutEffect(() => {\n const scroller = scrollerRef.current;\n const body = bodyRef.current;\n if (!scroller || !body) return;\n const hour = body.offsetHeight / 24;\n if (!hour) return;\n const current = new Date();\n const todayShown = columns.some((day) => isSameDay(day, current));\n const target = scrollToHour ?? (todayShown ? Math.max(0, minutesOfDay(current) / 60 - 1) : DEFAULT_SCROLL_HOUR);\n scroller.scrollTop = clamp(target, 0, 24) * hour;\n // oxlint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n useEffect(() => {\n const scroller = scrollerRef.current;\n if (!scroller) return;\n // Trackpad pinches arrive as a wheel with Ctrl held (Chromium, Firefox); Safari sends\n // `gesturechange` instead, and there the trackpad zooms the page as usual.\n function onWheel(event: WheelEvent) {\n if (!event.ctrlKey) return;\n const elements = zoomElements();\n if (!elements) return;\n event.preventDefault();\n const rect = elements.body.getBoundingClientRect();\n const hour = rect.height / 24;\n if (!hour) return;\n zoomTo(\n elements,\n zoomRef,\n hour * Math.exp(-event.deltaY * 0.01),\n (event.clientY - rect.top) / hour,\n event.clientY,\n );\n }\n scroller.addEventListener('wheel', onWheel, { passive: false });\n return () => scroller.removeEventListener('wheel', onWheel);\n // zoomElements only reads refs.\n // oxlint-disable-next-line react-hooks/exhaustive-deps\n }, [zoomRef]);\n\n /** `day` counts from the period's first day, hidden ones included, so it adds up to a date. */\n function pointAt(point: GesturePoint): { day: number; minutes: number } | null {\n const pane = currentRef.current;\n if (!pane) return null;\n const rect = pane.getBoundingClientRect();\n if (!rect.width || !rect.height) return null;\n const column = clamp(Math.floor(((point.x - rect.left) / rect.width) * columns.length), 0, columns.length - 1);\n return {\n day: dayDiff(rangeStart, columns[column]),\n minutes: clamp(((point.y - rect.top) / rect.height) * MINUTES_PER_DAY, 0, MINUTES_PER_DAY),\n };\n }\n\n /** Wall-clock minutes from the first shown midnight: negative before it. */\n function minutesFromStart(value: Date): number {\n return dayDiff(rangeStart, value) * MINUTES_PER_DAY + minutesOfDay(value);\n }\n\n function preview(current: TimeDrag<E>, point: GesturePoint): { start: Date; end: Date } | null {\n const at = pointAt(point);\n if (!at) return null;\n const limit = periodDays * MINUTES_PER_DAY;\n\n if (current.kind === 'create') {\n const anchor = Math.floor(current.anchor / slotMinutes) * slotMinutes;\n const [from, to] =\n at.minutes >= anchor\n ? [anchor, Math.max(Math.ceil(at.minutes / slotMinutes) * slotMinutes, anchor + slotMinutes)]\n : [Math.floor(at.minutes / slotMinutes) * slotMinutes, anchor + slotMinutes];\n const day = addDays(rangeStart, current.day);\n const start = atMinutes(day, from);\n return { start, end: endAfter(start, atMinutes(day, Math.min(to, MINUTES_PER_DAY)), to - from) };\n }\n\n const pointer = at.day * MINUTES_PER_DAY + at.minutes;\n const eventStart = minutesFromStart(current.event.start);\n if (current.kind === 'move') {\n const from = clamp(snap(pointer - current.grab, slotMinutes), Math.min(eventStart, 0), limit - slotMinutes);\n const start = atMinutes(rangeStart, from);\n // The real length, not the wall-clock one, so a move across a clock change keeps it.\n const length = eventEnd(current.event).getTime() - current.event.start.getTime();\n return { start, end: new Date(start.getTime() + length) };\n }\n const to = clamp(snap(pointer, slotMinutes), eventStart + slotMinutes, Math.max(limit, eventStart + slotMinutes));\n const start = current.event.start;\n return { start, end: endAfter(start, atMinutes(rangeStart, to), to - eventStart) };\n }\n\n function setDragState(next: TimeDrag<E> | null) {\n dragRef.current = next;\n setDrag(next);\n }\n\n function findEvent(element: HTMLElement): E | undefined {\n return events.find((candidate) => String(candidate.id) === element.dataset.calEvent);\n }\n\n useGestures<TimeDrag<E>>(scrollerRef, {\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 at = pointAt(point);\n if (!at) return null;\n const element = target.closest<HTMLElement>('[data-cal-event]');\n if (element) {\n const event = onEventChange ? findEvent(element) : undefined;\n if (!event || event.readOnly) return null;\n const current = { start: event.start, end: eventEnd(event) };\n if (target.closest('[data-cal-resize]')) return { kind: 'resize', event, ...current };\n const grab = at.day * MINUTES_PER_DAY + at.minutes - minutesFromStart(event.start);\n return { kind: 'move', event, grab, ...current };\n }\n if (!onSlotCreate) return null;\n const day = addDays(rangeStart, at.day);\n return { kind: 'create', day: at.day, anchor: at.minutes, start: day, end: day };\n },\n onDragStart: (started, point) => {\n snapshot.current = events;\n setDragState({ ...started, ...preview(started, point) });\n },\n onDragMove: (point) => {\n const current = dragRef.current;\n const next = current && preview(current, point);\n if (!current || !next) return;\n if (next.start.getTime() === current.start.getTime() && next.end.getTime() === current.end.getTime()) return;\n setDragState({ ...current, ...next });\n },\n onDragEnd: (point) => {\n const current = dragRef.current;\n setDragState(null);\n if (!current) return;\n const { start, end } = preview(current, point) ?? current;\n if (current.kind === 'create') {\n onSlotCreate?.({ start, end, allDay: false }, markSlot(current.day, start, end));\n return;\n }\n const unchanged =\n start.getTime() === current.event.start.getTime() && end.getTime() === eventEnd(current.event).getTime();\n if (!unchanged) onEventChange?.({ event: current.event, start, end });\n },\n onDragCancel: () => setDragState(null),\n onPinchStart: (center, distance) => {\n const body = bodyRef.current;\n if (!body) return;\n const rect = body.getBoundingClientRect();\n const hour = rect.height / 24;\n if (!hour) return;\n pinchRef.current = { hour, anchorHour: (center.y - rect.top) / hour, distance };\n },\n onPinchMove: (center, distance) => {\n const pinch = pinchRef.current;\n const elements = zoomElements();\n if (!pinch || !elements || !pinch.distance) return;\n zoomTo(elements, zoomRef, (pinch.hour * distance) / pinch.distance, pinch.anchorHour, center.y);\n },\n onPinchEnd: () => {\n pinchRef.current = null;\n },\n autoScroll: () => {\n const scroller = scrollerRef.current;\n const head = headRef.current;\n if (!scroller || !head) return null;\n const rect = scroller.getBoundingClientRect();\n // The sticky head covers the top of the scroller, so the zone starts below it.\n return { element: scroller, top: rect.top + head.offsetHeight, bottom: rect.bottom };\n },\n });\n\n function handleColumnClick(clickEvent: MouseEvent<HTMLDivElement>, day: Date) {\n if (!onSlotCreate || (clickEvent.target as Element).closest('[data-cal-event]')) return;\n const rect = clickEvent.currentTarget.getBoundingClientRect();\n if (!rect.height) return;\n const minutes = ((clickEvent.clientY - rect.top) / rect.height) * MINUTES_PER_DAY;\n const from = clamp(Math.floor(minutes / slotMinutes) * slotMinutes, 0, MINUTES_PER_DAY - slotMinutes);\n const start = atMinutes(day, from);\n // Real time, not the clock: across a clock change an hour on the clock is none or two.\n const end = new Date(start.getTime() + Math.max(60, slotMinutes) * 60_000);\n const midnight = atMinutes(day, MINUTES_PER_DAY);\n const slot = { start, end: end < midnight ? end : midnight, allDay: false };\n onSlotCreate(slot, markSlot(dayDiff(rangeStart, day), slot.start, slot.end));\n }\n\n /**\n * Moves the invisible box over a new slot and returns it: the anchor `onSlotCreate` hands out,\n * so the app can open its editor right next to the slot, as `onEventClick` lets it for an event.\n */\n function markSlot(dayIndex: number, start: Date, end: Date): HTMLElement {\n const marker = slotRef.current;\n if (!marker) return scrollerRef.current!;\n const next = addDays(rangeStart, dayIndex + 1);\n const top = minutesOfDay(start);\n const bottom = end >= next ? MINUTES_PER_DAY : minutesOfDay(end);\n const column = Math.max(\n columns.findIndex((day) => dayDiff(rangeStart, day) === dayIndex),\n 0,\n );\n marker.style.left = `${(column / columns.length) * 100}%`;\n marker.style.width = `${100 / columns.length}%`;\n marker.style.top = `${(top / MINUTES_PER_DAY) * 100}%`;\n // Never upside down: on the day the clocks go back, a slot can end on an earlier clock time.\n marker.style.height = `${(Math.max(bottom - top, 0) / MINUTES_PER_DAY) * 100}%`;\n return marker;\n }\n\n function renderAllDayBar(bar: LaneBar<E>) {\n const { event } = bar;\n return (\n <button\n key={event.id}\n type='button'\n data-cal-event={String(event.id)}\n className={cx(\n styles.timeGridBar,\n bar.continuesBefore && styles.timeGridBarContinuesBefore,\n bar.continuesAfter && styles.timeGridBarContinuesAfter,\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 aria-label={`${event.title}, ${text.allDay}`}\n onClick={(clickEvent) => onEventClick?.(event, clickEvent.currentTarget)}\n >\n <span className={styles.timeGridBarTitle} aria-hidden>\n {renderEvent ? renderEvent(event, { singleLine: true }) : event.title}\n </span>\n </button>\n );\n }\n\n function renderBox(box: TimedBox<E>) {\n const { event } = box;\n const minutes = box.bottom - box.top;\n const short = minutes < SHORT_EVENT_MINUTES;\n const when = formatTimeRange(event.start, eventEnd(event), locale);\n const resizable = Boolean(onEventChange) && !event.readOnly && !box.continuesAfter;\n const dragged = drag && drag.kind !== 'create' && drag.event === event;\n return (\n <button\n key={event.id}\n type='button'\n data-cal-event={String(event.id)}\n aria-label={`${event.title}, ${when}`}\n className={cx(\n styles.timeGridEvent,\n short && styles.timeGridEventShort,\n minutes < BRIEF_EVENT_MINUTES && styles.timeGridEventBrief,\n box.continuesBefore && styles.timeGridEventContinuesBefore,\n box.continuesAfter && styles.timeGridEventContinuesAfter,\n (onEventClick || resizable) && styles.timeGridEventInteractive,\n dragged && styles.timeGridEventDragged,\n classNames?.event,\n )}\n style={\n {\n '--event-color': event.color,\n top: `${(box.top / MINUTES_PER_DAY) * 100}%`,\n '--span': `${(minutes / MINUTES_PER_DAY) * 100}%`,\n left: `calc(var(--column-width) * ${box.column / box.columns})`,\n width: `calc(var(--column-width) * ${box.span / box.columns})`,\n ...slotStyles?.event,\n } as CSSProperties\n }\n onClick={(clickEvent) => onEventClick?.(event, clickEvent.currentTarget)}\n >\n <span className={styles.timeGridEventTitle} aria-hidden>\n {renderEvent ? renderEvent(event, { singleLine: short }) : event.title}\n </span>\n <span className={styles.timeGridEventTime} aria-hidden>\n {formatClockRange(event.start, eventEnd(event), locale)}\n </span>\n {resizable && <span data-cal-resize className={styles.timeGridResize} aria-hidden />}\n </button>\n );\n }\n\n function renderPreview(day: Date) {\n if (!drag) return null;\n const dayStart = day;\n const next = addDays(day, 1);\n if (drag.end <= dayStart && drag.start < dayStart) return null;\n if (drag.start >= next) return null;\n const top = drag.start < dayStart ? 0 : minutesOfDay(drag.start);\n const bottom = drag.end >= next ? MINUTES_PER_DAY : minutesOfDay(drag.end);\n const color = drag.kind === 'create' ? undefined : drag.event.color;\n const title = drag.kind === 'create' ? null : drag.event.title;\n return (\n <div\n className={styles.timeGridPreview}\n style={\n {\n '--event-color': color,\n top: `${(top / MINUTES_PER_DAY) * 100}%`,\n height: `${(Math.max(bottom - top, 15) / MINUTES_PER_DAY) * 100}%`,\n } as CSSProperties\n }\n aria-hidden\n >\n {title && <span className={styles.timeGridEventTitle}>{title}</span>}\n <span className={styles.timeGridPreviewTime}>{formatClockRange(drag.start, drag.end, locale)}</span>\n </div>\n );\n }\n\n const panes = STEPS.map((step) => {\n const start = periodRange(view, stepDate(view, date, step, hidden), weekStartsOn).start;\n const dates = shownDays(start, periodDays, hidden);\n const allDay = packLanes(shown, dates, isAllDayLike);\n const lanes: LimitedLanes<E> = allDayOpen\n ? { visible: allDay, moreLane: 0, hidden: dates.map(() => 0) }\n : limitLanes(allDay, dates.length, ALL_DAY_LANES);\n return { step, start, dates, lanes };\n });\n const hasHidden = panes[1].lanes.hidden.some((count) => count > 0);\n const paneClass = (step: number) =>\n cx(pagerStyles.pagerPane, step === -1 && pagerStyles.pagerPanePrev, step === 1 && pagerStyles.pagerPaneNext);\n\n return (\n <div\n ref={scrollerRef}\n tabIndex={-1}\n className={styles.timeGrid}\n style={\n {\n '--days': columns.length,\n '--custom-calendar-hour-height': zoomRef.current ? `${zoomRef.current.hour}px` : undefined,\n } as CSSProperties\n }\n >\n <div ref={headRef} className={styles.timeGridHead}>\n <div className={styles.timeGridCorner}>\n {(hasHidden || allDayOpen) && (\n <button\n type='button'\n className={cx(styles.timeGridToggle, allDayOpen && styles.timeGridToggleOpen)}\n aria-label={text.allDay}\n aria-expanded={allDayOpen}\n onClick={() => setAllDayOpen((open) => !open)}\n >\n {renderIcon(faChevronDown)}\n </button>\n )}\n </div>\n <div className={pagerStyles.pagerViewport}>\n <div ref={pager.trackRef} className={pagerStyles.pagerTrack}>\n {panes.map(({ step, start, dates, lanes }) => (\n <div\n key={dateToDay(start)}\n className={cx(paneClass(step), styles.timeGridHeadPane)}\n inert={step !== 0}\n aria-hidden={step !== 0 || undefined}\n >\n {dates.map((day) => {\n const isToday = isSameDay(day, now);\n const content = (\n <>\n <span className={styles.timeGridWeekday}>{formatWeekday(day, locale, 'short')}</span>\n <span className={cx(styles.timeGridDayNumber, isToday && styles.timeGridDayNumberToday)}>\n {formatDayNumber(day, locale)}\n </span>\n </>\n );\n const shared = {\n className: cx(styles.timeGridDayHeader, classNames?.dayHeader),\n style: slotStyles?.dayHeader,\n 'aria-current': isToday ? ('date' as const) : undefined,\n };\n return periodDays > 1 && onOpenDay ? (\n <button\n key={dateToDay(day)}\n type='button'\n {...shared}\n className={cx(shared.className, styles.timeGridDayHeaderLink)}\n aria-label={formatLongDate(day, locale)}\n onClick={() => onOpenDay(day)}\n >\n {content}\n </button>\n ) : (\n <div key={dateToDay(day)} {...shared}>\n {content}\n </div>\n );\n })}\n <div className={styles.timeGridAllDay} aria-label={text.allDay} role='group'>\n {lanes.visible.map(renderAllDayBar)}\n {lanes.hidden.map(\n (count, column) =>\n count > 0 && (\n <div\n key={`more-${column}`}\n aria-hidden\n className={styles.timeGridMore}\n style={{ gridColumn: column + 1, gridRow: lanes.moreLane + 1 }}\n onClick={() => setAllDayOpen(true)}\n >\n {text.more(count)}\n </div>\n ),\n )}\n </div>\n </div>\n ))}\n </div>\n </div>\n </div>\n\n <div ref={bodyRef} className={styles.timeGridBody}>\n <div className={styles.timeGridGutter} aria-hidden>\n {HOURS.map((hour) => (\n <span key={hour} className={styles.timeGridHour} style={{ top: `${(hour / 24) * 100}%` }}>\n {formatHour(hour, locale)}\n </span>\n ))}\n </div>\n <div className={pagerStyles.pagerViewport}>\n <div ref={pager.trackRef} className={pagerStyles.pagerTrack}>\n {panes.map(({ step, start, dates }) => (\n <div\n key={dateToDay(start)}\n ref={step === 0 ? currentRef : undefined}\n className={cx(paneClass(step), styles.timeGridBodyPane)}\n inert={step !== 0}\n aria-hidden={step !== 0 || undefined}\n >\n {dates.map((day) => {\n const isToday = isSameDay(day, now);\n return (\n <div\n key={dateToDay(day)}\n role='group'\n aria-label={formatLongDate(day, locale)}\n data-cal-column={dateToDay(day)}\n className={cx(\n styles.timeGridColumn,\n isToday && styles.timeGridColumnToday,\n onSlotCreate && styles.timeGridColumnCreatable,\n classNames?.cell,\n )}\n style={slotStyles?.cell}\n onClick={(clickEvent) => handleColumnClick(clickEvent, day)}\n >\n {packDay(shown, day).map(renderBox)}\n {isToday && (\n <div\n className={styles.timeGridNow}\n style={{ top: `${(minutesOfDay(now) / MINUTES_PER_DAY) * 100}%` }}\n aria-hidden\n />\n )}\n {step === 0 && renderPreview(day)}\n </div>\n );\n })}\n {step === 0 && <div ref={slotRef} className={styles.timeGridSlot} aria-hidden />}\n </div>\n ))}\n </div>\n </div>\n </div>\n </div>\n );\n}\n\nexport default TimeGrid;\n"],"mappings":"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"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
"use client";var e=`timeGrid_eQt1f`,t=`timeGrid-head_QeMAH`,n=`timeGrid-corner_ass6Y`,r=`timeGrid-toggle_q0Oh4`,i=`timeGrid-toggle-open_CkMZf`,a=`timeGrid-headPane_KOqbR`,o=`timeGrid-dayHeader_nyugU`,s=`timeGrid-dayHeader-link_vE861`,c=`timeGrid-dayNumber_3xDPg`,l=`timeGrid-dayNumber-today_em4ho`,u=`timeGrid-weekday_BEOk2`,d=`timeGrid-allDay_sBaRg`,f=`timeGrid-bar_bGt1p`,p=`timeGrid-bar-continuesBefore_XRW1T`,m=`timeGrid-bar-continuesAfter_BsjNh`,h=`timeGrid-bar-title_iVZsx`,g=`timeGrid-more_Fo6hf`,_=`timeGrid-body_Vzvbo`,v=`timeGrid-gutter_OuCf-`,y=`timeGrid-hour_wVF05`,b=`timeGrid-bodyPane_Ji1lF`,x=`timeGrid-column_mEJNy`,S=`timeGrid-column-today_goKa0`,C=`timeGrid-column-creatable_5MQ8P`,w=`timeGrid-event_qLWLI`,T=`timeGrid-event-short_akp1j`,E=`timeGrid-event-brief_AX4PC`,D=`timeGrid-resize_LdiRH`,O=`timeGrid-event-continuesBefore_uGyO5`,k=`timeGrid-event-continuesAfter_p-hcM`,A=`timeGrid-event-interactive_TXdJ8`,j=`timeGrid-event-dragged_UrxXL`,M=`timeGrid-event-title_uDvkI`,N=`timeGrid-event-time_O5W3b`,P=`timeGrid-preview_nfmke`,F=`timeGrid-preview-time_8hmVF`,I=`timeGrid-slot_s7iMI`,L=`timeGrid-now_Rs5aE`,R=`calendarNowPulse_DDoyI`,z={timeGrid:e,"timeGrid-head":`timeGrid-head_QeMAH`,timeGridHead:t,"timeGrid-corner":`timeGrid-corner_ass6Y`,timeGridCorner:n,"timeGrid-toggle":`timeGrid-toggle_q0Oh4`,timeGridToggle:r,"timeGrid-toggle-open":`timeGrid-toggle-open_CkMZf`,timeGridToggleOpen:i,"timeGrid-headPane":`timeGrid-headPane_KOqbR`,timeGridHeadPane:a,"timeGrid-dayHeader":`timeGrid-dayHeader_nyugU`,timeGridDayHeader:o,"timeGrid-dayHeader-link":`timeGrid-dayHeader-link_vE861`,timeGridDayHeaderLink:s,"timeGrid-dayNumber":`timeGrid-dayNumber_3xDPg`,timeGridDayNumber:c,"timeGrid-dayNumber-today":`timeGrid-dayNumber-today_em4ho`,timeGridDayNumberToday:l,"timeGrid-weekday":`timeGrid-weekday_BEOk2`,timeGridWeekday:u,"timeGrid-allDay":`timeGrid-allDay_sBaRg`,timeGridAllDay:d,"timeGrid-bar":`timeGrid-bar_bGt1p`,timeGridBar:f,"timeGrid-bar-continuesBefore":`timeGrid-bar-continuesBefore_XRW1T`,timeGridBarContinuesBefore:p,"timeGrid-bar-continuesAfter":`timeGrid-bar-continuesAfter_BsjNh`,timeGridBarContinuesAfter:m,"timeGrid-bar-title":`timeGrid-bar-title_iVZsx`,timeGridBarTitle:h,"timeGrid-more":`timeGrid-more_Fo6hf`,timeGridMore:g,"timeGrid-body":`timeGrid-body_Vzvbo`,timeGridBody:_,"timeGrid-gutter":`timeGrid-gutter_OuCf-`,timeGridGutter:v,"timeGrid-hour":`timeGrid-hour_wVF05`,timeGridHour:y,"timeGrid-bodyPane":`timeGrid-bodyPane_Ji1lF`,timeGridBodyPane:b,"timeGrid-column":`timeGrid-column_mEJNy`,timeGridColumn:x,"timeGrid-column-today":`timeGrid-column-today_goKa0`,timeGridColumnToday:S,"timeGrid-column-creatable":`timeGrid-column-creatable_5MQ8P`,timeGridColumnCreatable:C,"timeGrid-event":`timeGrid-event_qLWLI`,timeGridEvent:w,"timeGrid-event-short":`timeGrid-event-short_akp1j`,timeGridEventShort:T,"timeGrid-event-brief":`timeGrid-event-brief_AX4PC`,timeGridEventBrief:E,"timeGrid-resize":`timeGrid-resize_LdiRH`,timeGridResize:D,"timeGrid-event-continuesBefore":`timeGrid-event-continuesBefore_uGyO5`,timeGridEventContinuesBefore:O,"timeGrid-event-continuesAfter":`timeGrid-event-continuesAfter_p-hcM`,timeGridEventContinuesAfter:k,"timeGrid-event-interactive":`timeGrid-event-interactive_TXdJ8`,timeGridEventInteractive:A,"timeGrid-event-dragged":`timeGrid-event-dragged_UrxXL`,timeGridEventDragged:j,"timeGrid-event-title":`timeGrid-event-title_uDvkI`,timeGridEventTitle:M,"timeGrid-event-time":`timeGrid-event-time_O5W3b`,timeGridEventTime:N,"timeGrid-preview":`timeGrid-preview_nfmke`,timeGridPreview:P,"timeGrid-preview-time":`timeGrid-preview-time_8hmVF`,timeGridPreviewTime:F,"timeGrid-slot":`timeGrid-slot_s7iMI`,timeGridSlot:I,"timeGrid-now":`timeGrid-now_Rs5aE`,timeGridNow:L,calendarNowPulse:R};export{R as calendarNowPulse,z as default,e as timeGrid,d as timeGridAllDay,f as timeGridBar,m as timeGridBarContinuesAfter,p as timeGridBarContinuesBefore,h as timeGridBarTitle,_ as timeGridBody,b as timeGridBodyPane,x as timeGridColumn,C as timeGridColumnCreatable,S as timeGridColumnToday,n as timeGridCorner,o as timeGridDayHeader,s as timeGridDayHeaderLink,c as timeGridDayNumber,l as timeGridDayNumberToday,w as timeGridEvent,E as timeGridEventBrief,k as timeGridEventContinuesAfter,O as timeGridEventContinuesBefore,j as timeGridEventDragged,A as timeGridEventInteractive,T as timeGridEventShort,N as timeGridEventTime,M as timeGridEventTitle,v as timeGridGutter,t as timeGridHead,a as timeGridHeadPane,y as timeGridHour,g as timeGridMore,L as timeGridNow,P as timeGridPreview,F as timeGridPreviewTime,D as timeGridResize,I as timeGridSlot,r as timeGridToggle,i as timeGridToggleOpen,u as timeGridWeekday};
|
|
2
|
+
//# sourceMappingURL=timeGrid.module.mjs.map
|