@dxos/react-ui-calendar 0.8.4-main.bc674ce → 0.8.4-main.c85a9c8dae
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/dist/lib/browser/index.mjs +20 -24
- package/dist/lib/browser/index.mjs.map +3 -3
- package/dist/lib/browser/meta.json +1 -1
- package/dist/lib/node-esm/index.mjs +20 -24
- package/dist/lib/node-esm/index.mjs.map +3 -3
- package/dist/lib/node-esm/meta.json +1 -1
- package/dist/types/src/components/Calendar/Calendar.d.ts +3 -8
- package/dist/types/src/components/Calendar/Calendar.d.ts.map +1 -1
- package/dist/types/src/components/Calendar/Calendar.stories.d.ts +1 -5
- package/dist/types/src/components/Calendar/Calendar.stories.d.ts.map +1 -1
- package/dist/types/tsconfig.tsbuildinfo +1 -1
- package/package.json +15 -16
- package/src/components/Calendar/Calendar.stories.tsx +14 -39
- package/src/components/Calendar/Calendar.tsx +32 -34
|
@@ -61,16 +61,10 @@ var CalendarRoot = /* @__PURE__ */ forwardRef(({ children, weekStartsOn = 1 }, f
|
|
|
61
61
|
setSelected
|
|
62
62
|
}, children);
|
|
63
63
|
});
|
|
64
|
-
var
|
|
65
|
-
|
|
66
|
-
role: "none",
|
|
67
|
-
className: mx("flex flex-col items-center overflow-hidden bg-inputSurface", classNames)
|
|
68
|
-
}, children);
|
|
69
|
-
};
|
|
70
|
-
CalendarViewport.displayName = "CalendarContent";
|
|
71
|
-
var CalendarToolbar = ({ classNames }) => {
|
|
64
|
+
var CALENDAR_TOOLBAR_NAME = "CalendarHeader";
|
|
65
|
+
var CalendarToolbar = ({ classNames, ...props }) => {
|
|
72
66
|
const { t } = useTranslation(translationKey);
|
|
73
|
-
const { weekStartsOn, event, index, selected } = useCalendarContext(
|
|
67
|
+
const { weekStartsOn, event, index, selected } = useCalendarContext(CALENDAR_TOOLBAR_NAME);
|
|
74
68
|
const top = useMemo(() => getDate(start, index ?? 0, 6, weekStartsOn), [
|
|
75
69
|
index,
|
|
76
70
|
weekStartsOn
|
|
@@ -87,8 +81,9 @@ var CalendarToolbar = ({ classNames }) => {
|
|
|
87
81
|
today
|
|
88
82
|
]);
|
|
89
83
|
return /* @__PURE__ */ React.createElement("div", {
|
|
84
|
+
...props,
|
|
90
85
|
role: "none",
|
|
91
|
-
className: mx("
|
|
86
|
+
className: mx("shrink-0 w-full m-auto grid grid-cols-3 items-center bg-toolbar-surface", classNames),
|
|
92
87
|
style: {
|
|
93
88
|
width: defaultWidth
|
|
94
89
|
}
|
|
@@ -108,9 +103,10 @@ var CalendarToolbar = ({ classNames }) => {
|
|
|
108
103
|
className: "flex justify-end p-2 text-description"
|
|
109
104
|
}, (selected ?? top).getFullYear()));
|
|
110
105
|
};
|
|
111
|
-
CalendarToolbar.displayName =
|
|
112
|
-
var
|
|
113
|
-
|
|
106
|
+
CalendarToolbar.displayName = CALENDAR_TOOLBAR_NAME;
|
|
107
|
+
var CALENDAR_GRID_NAME = "CalendarGrid";
|
|
108
|
+
var CalendarGrid = ({ classNames, rows, onSelect, ...props }) => {
|
|
109
|
+
const { weekStartsOn, event, setIndex, selected, setSelected } = useCalendarContext(CALENDAR_GRID_NAME);
|
|
114
110
|
const { ref: containerRef, width = 0, height = 0 } = useResizeDetector();
|
|
115
111
|
const maxHeight = rows ? rows * size : void 0;
|
|
116
112
|
const listRef = useRef(null);
|
|
@@ -163,18 +159,19 @@ var CalendarGrid = ({ classNames, rows, onSelect }) => {
|
|
|
163
159
|
setIndex(Math.round(info.scrollTop / size));
|
|
164
160
|
}, []);
|
|
165
161
|
const rowRenderer = useCallback(({ key, index, style }) => {
|
|
166
|
-
const getBgColor = (date) => date.getMonth() % 2 === 0 && "bg-
|
|
162
|
+
const getBgColor = (date) => date.getMonth() % 2 === 0 && "bg-modal-surface";
|
|
167
163
|
return /* @__PURE__ */ React.createElement("div", {
|
|
168
164
|
key,
|
|
165
|
+
...props,
|
|
169
166
|
role: "none",
|
|
170
167
|
style,
|
|
171
|
-
className: "
|
|
168
|
+
className: "w-full grid grid-cols-[1fr_max-content_1fr] snap-center"
|
|
172
169
|
}, /* @__PURE__ */ React.createElement("div", {
|
|
173
170
|
role: "none",
|
|
174
171
|
className: mx(getBgColor(getDate(start, index, 0, weekStartsOn)))
|
|
175
172
|
}), /* @__PURE__ */ React.createElement("div", {
|
|
176
173
|
role: "none",
|
|
177
|
-
className: "grid grid-cols-7",
|
|
174
|
+
className: "grid grid-cols-7 bg-input-surface",
|
|
178
175
|
style: {
|
|
179
176
|
gridTemplateColumns: `repeat(7, ${size}px)`
|
|
180
177
|
}
|
|
@@ -195,7 +192,7 @@ var CalendarGrid = ({ classNames, rows, onSelect }) => {
|
|
|
195
192
|
className: "absolute top-0 text-xs text-description"
|
|
196
193
|
}, format(date, "MMM")), border && /* @__PURE__ */ React.createElement("div", {
|
|
197
194
|
role: "none",
|
|
198
|
-
className: mx("absolute top-0 left-0
|
|
195
|
+
className: mx("absolute top-0 left-0 w-full h-full border-2 rounded-full", border)
|
|
199
196
|
}), num > 0 && /* @__PURE__ */ React.createElement(Icon, {
|
|
200
197
|
classNames: "absolute bottom-0",
|
|
201
198
|
icon: num > 3 ? "ph--dots-three--regular" : "ph--dot--regular",
|
|
@@ -212,13 +209,13 @@ var CalendarGrid = ({ classNames, rows, onSelect }) => {
|
|
|
212
209
|
]);
|
|
213
210
|
return /* @__PURE__ */ React.createElement("div", {
|
|
214
211
|
role: "none",
|
|
215
|
-
className: mx("flex flex-col
|
|
212
|
+
className: mx("flex flex-col h-full w-full justify-center overflow-hidden", classNames)
|
|
216
213
|
}, /* @__PURE__ */ React.createElement("div", {
|
|
217
214
|
role: "none",
|
|
218
|
-
className: "flex justify-center bg-
|
|
215
|
+
className: "flex justify-center bg-group-surface"
|
|
219
216
|
}, /* @__PURE__ */ React.createElement("div", {
|
|
220
217
|
role: "none",
|
|
221
|
-
className: "flex
|
|
218
|
+
className: "flex w-full grid grid-cols-7",
|
|
222
219
|
style: {
|
|
223
220
|
width: defaultWidth
|
|
224
221
|
}
|
|
@@ -228,13 +225,13 @@ var CalendarGrid = ({ classNames, rows, onSelect }) => {
|
|
|
228
225
|
className: "flex justify-center p-2 text-sm font-thin"
|
|
229
226
|
}, date)))), /* @__PURE__ */ React.createElement("div", {
|
|
230
227
|
role: "none",
|
|
231
|
-
className: "flex flex-col
|
|
228
|
+
className: "flex flex-col h-full w-full justify-center overflow-hidden",
|
|
232
229
|
ref: containerRef
|
|
233
230
|
}, /* @__PURE__ */ React.createElement(List, {
|
|
234
231
|
ref: listRef,
|
|
235
232
|
role: "none",
|
|
236
233
|
// TODO(burdon): Snap isn't working.
|
|
237
|
-
className: "[&>div]:snap-y scrollbar-none outline-
|
|
234
|
+
className: "[&>div]:snap-y scrollbar-none outline-hidden",
|
|
238
235
|
width,
|
|
239
236
|
height: maxHeight ?? height,
|
|
240
237
|
rowCount: maxRows,
|
|
@@ -245,10 +242,9 @@ var CalendarGrid = ({ classNames, rows, onSelect }) => {
|
|
|
245
242
|
onRowsRendered: () => setInitialized(true)
|
|
246
243
|
})));
|
|
247
244
|
};
|
|
248
|
-
CalendarGrid.displayName =
|
|
245
|
+
CalendarGrid.displayName = CALENDAR_GRID_NAME;
|
|
249
246
|
var Calendar = {
|
|
250
247
|
Root: CalendarRoot,
|
|
251
|
-
Viewport: CalendarViewport,
|
|
252
248
|
Toolbar: CalendarToolbar,
|
|
253
249
|
Grid: CalendarGrid
|
|
254
250
|
};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/Calendar/Calendar.tsx", "../../../src/translations.ts", "../../../src/components/Calendar/util.ts"],
|
|
4
|
-
"sourcesContent": ["//\n// Copyright 2025 DXOS.org\n//\n\nimport { createContext } from '@radix-ui/react-context';\nimport { type Day, addDays, differenceInWeeks, format, startOfWeek } from 'date-fns';\nimport React, {\n type Dispatch,\n type PropsWithChildren,\n type SetStateAction,\n forwardRef,\n useCallback,\n useEffect,\n useImperativeHandle,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport { useResizeDetector } from 'react-resize-detector';\nimport { List, type ListProps, type ListRowRenderer } from 'react-virtualized';\n\nimport { Event } from '@dxos/async';\nimport { Icon, IconButton, type ThemedClassName, useTranslation } from '@dxos/react-ui';\nimport { mx } from '@dxos/ui-theme';\n\nimport { translationKey } from '../../translations';\n\nimport { getDate, isSameDay } from './util';\n\nconst maxRows = 50 * 100;\nconst start = new Date('1970-01-01');\nconst size = 48;\nconst defaultWidth = 7 * size;\n\n//\n// Context\n//\n\ntype CalendarEvent = {\n type: 'scroll';\n date: Date;\n};\n\ntype CalendarContextValue = {\n weekStartsOn: Day;\n event: Event<CalendarEvent>;\n index: number | undefined;\n setIndex: Dispatch<SetStateAction<number | undefined>>;\n selected: Date | undefined;\n setSelected: Dispatch<SetStateAction<Date | undefined>>;\n};\n\nconst [CalendarContextProvider, useCalendarContext] = createContext<CalendarContextValue>('Calendar');\n\n//\n// Controller\n//\n\ntype CalendarController = {\n scrollTo: (date: Date) => void;\n};\n\n//\n// Root\n//\n\ntype CalendarRootProps = PropsWithChildren<Partial<Pick<CalendarContextValue, 'weekStartsOn'>>>;\n\nconst CalendarRoot = forwardRef<CalendarController, CalendarRootProps>(\n ({ children, weekStartsOn = 1 }, forwardedRef) => {\n const event = useMemo(() => new Event<CalendarEvent>(), []);\n const [selected, setSelected] = useState<Date | undefined>();\n const [index, setIndex] = useState<number | undefined>();\n\n useImperativeHandle(\n forwardedRef,\n () => ({\n scrollTo: (date: Date) => {\n event.emit({ type: 'scroll', date });\n },\n }),\n [event],\n );\n\n return (\n <CalendarContextProvider\n weekStartsOn={weekStartsOn}\n event={event}\n index={index}\n setIndex={setIndex}\n selected={selected}\n setSelected={setSelected}\n >\n {children}\n </CalendarContextProvider>\n );\n },\n);\n\n//\n// Viewport\n//\n\ntype CalendarViewportProps = PropsWithChildren<ThemedClassName>;\n\nconst CalendarViewport = ({ children, classNames }: CalendarViewportProps) => {\n return (\n <div role='none' className={mx('flex flex-col items-center overflow-hidden bg-inputSurface', classNames)}>\n {children}\n </div>\n );\n};\n\nCalendarViewport.displayName = 'CalendarContent';\n\n//\n// Header\n//\n\ntype CalendarToolbarProps = ThemedClassName;\n\nconst CalendarToolbar = ({ classNames }: CalendarToolbarProps) => {\n const { t } = useTranslation(translationKey);\n const { weekStartsOn, event, index, selected } = useCalendarContext(CalendarToolbar.displayName);\n const top = useMemo(() => getDate(start, index ?? 0, 6, weekStartsOn), [index, weekStartsOn]);\n const today = useMemo(() => new Date(), []);\n\n const handleToday = useCallback(() => {\n event.emit({ type: 'scroll', date: today });\n }, [event, start, today]);\n\n return (\n <div\n role='none'\n className={mx('shink-0 is-full grid grid-cols-3 items-center bg-barSurface', classNames)}\n style={{ width: defaultWidth }}\n >\n <div className='flex justify-start'>\n <IconButton\n variant='ghost'\n size={5}\n icon='ph--calendar--regular'\n iconOnly\n classNames='aspect-square'\n label={t('today button')}\n onClick={handleToday}\n />\n </div>\n <div className='flex justify-center p-2 text-description'>{format(selected ?? top, 'MMMM')}</div>\n <div className='flex justify-end p-2 text-description'>{(selected ?? top).getFullYear()}</div>\n </div>\n );\n};\n\nCalendarToolbar.displayName = 'CalendarHeader';\n\n//\n// Grid\n// TODO(burdon): Key nav.\n// TODO(burdon): Drag range.\n//\n\ntype CalendarGridProps = ThemedClassName<{\n rows?: number;\n onSelect?: (event: { date: Date }) => void;\n}>;\n\nconst CalendarGrid = ({ classNames, rows, onSelect }: CalendarGridProps) => {\n const { weekStartsOn, event, setIndex, selected, setSelected } = useCalendarContext(CalendarGrid.displayName);\n const { ref: containerRef, width = 0, height = 0 } = useResizeDetector();\n const maxHeight = rows ? rows * size : undefined;\n const listRef = useRef<List>(null);\n const today = useMemo(() => new Date(), []);\n\n const [initialized, setInitialized] = useState(false);\n useEffect(() => {\n const index = differenceInWeeks(today, start);\n listRef.current?.scrollToRow(index);\n }, [initialized, start, today]);\n\n useEffect(() => {\n return event.on((event) => {\n switch (event.type) {\n case 'scroll': {\n const index = differenceInWeeks(event.date, start);\n listRef.current?.scrollToRow(index);\n break;\n }\n }\n });\n }, [event]);\n\n const days = useMemo(() => {\n const weekStart = startOfWeek(new Date(), { weekStartsOn });\n return Array.from({ length: 7 }, (_, i) => {\n const day = addDays(weekStart, i);\n return format(day, 'EEE'); // Short day name (Mon, Tue, etc.)\n });\n }, []);\n\n // TODO(burdon): Get info by range.\n // TODO(burdon): Border marker for \"all day events?\"\n const getNumAppointments = useCallback((_date: Date) => {\n // return Math.floor(Math.random() * 10);\n return 0;\n }, []);\n\n const handleDaySelect = useCallback(\n (date: Date) => {\n setSelected((current) => (isSameDay(date, current) ? undefined : date));\n onSelect?.({ date });\n },\n [onSelect],\n );\n\n const handleScroll = useCallback<NonNullable<ListProps['onScroll']>>((info) => {\n setIndex(Math.round(info.scrollTop / size));\n }, []);\n\n const rowRenderer = useCallback<ListRowRenderer>(\n ({ key, index, style }) => {\n const getBgColor = (date: Date) => date.getMonth() % 2 === 0 && 'bg-modalSurface';\n return (\n <div key={key} role='none' style={style} className='is-full grid grid-cols-[1fr_max-content_1fr] snap-center'>\n <div role='none' className={mx(getBgColor(getDate(start, index, 0, weekStartsOn)))} />\n <div role='none' className='grid grid-cols-7' style={{ gridTemplateColumns: `repeat(7, ${size}px)` }}>\n {Array.from({ length: 7 }).map((_, i) => {\n const date = getDate(start, index, i, weekStartsOn);\n const num = getNumAppointments(date);\n const border = isSameDay(date, selected)\n ? 'border-primary-500'\n : isSameDay(date, today)\n ? 'border-amber-500'\n : undefined;\n\n return (\n <div\n key={i}\n role='none'\n className={mx('relative flex justify-center items-center cursor-pointer', getBgColor(date))}\n onClick={() => handleDaySelect(date)}\n >\n <span className='text-description'>{date.getDate()}</span>\n {!border && date.getDate() === 1 && (\n <span className='absolute top-0 text-xs text-description'>{format(date, 'MMM')}</span>\n )}\n {border && (\n <div\n role='none'\n className={mx('absolute top-0 left-0 is-full bs-full border-2 rounded-full', border)}\n />\n )}\n {num > 0 && (\n <Icon\n classNames='absolute bottom-0'\n icon={num > 3 ? 'ph--dots-three--regular' : 'ph--dot--regular'}\n size={5}\n />\n )}\n </div>\n );\n })}\n </div>\n <div className={mx(getBgColor(getDate(start, index, 6, weekStartsOn)))} />\n </div>\n );\n },\n [handleDaySelect, getNumAppointments, selected, weekStartsOn],\n );\n\n return (\n <div role='none' className={mx('flex flex-col bs-full is-full justify-center overflow-hidden', classNames)}>\n {/* Day labels */}\n <div role='none' className='flex justify-center bg-groupSurface'>\n <div role='none' className='flex is-full grid grid-cols-7' style={{ width: defaultWidth }}>\n {days.map((date, i) => (\n <div key={i} role='none' className='flex justify-center p-2 text-sm font-thin'>\n {date}\n </div>\n ))}\n </div>\n </div>\n\n {/* Grid */}\n <div role='none' className='flex flex-col bs-full is-full justify-center overflow-hidden' ref={containerRef}>\n <List\n ref={listRef}\n role='none'\n // TODO(burdon): Snap isn't working.\n className='[&>div]:snap-y scrollbar-none outline-none'\n width={width}\n height={maxHeight ?? height}\n rowCount={maxRows}\n rowHeight={size}\n rowRenderer={rowRenderer}\n scrollToAlignment='start'\n onScroll={handleScroll}\n onRowsRendered={() => setInitialized(true)}\n />\n </div>\n </div>\n );\n};\n\nCalendarGrid.displayName = 'CalendarGrid';\n\n//\n// Calendar\n//\n\nexport const Calendar = {\n Root: CalendarRoot,\n Viewport: CalendarViewport,\n Toolbar: CalendarToolbar,\n Grid: CalendarGrid,\n};\n\nexport type { CalendarController, CalendarRootProps, CalendarViewportProps, CalendarToolbarProps, CalendarGridProps };\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport { type Resource } from '@dxos/react-ui';\n\nexport const translationKey = '@dxos/react-ui-calendar';\n\nexport const translations = [\n {\n 'en-US': {\n [translationKey]: {\n 'today button': 'Today',\n },\n },\n },\n] as const satisfies Resource[];\n", "//\n// Copyright 2025 DXOS.org\n//\n\nimport { type Day } from 'date-fns';\n\nexport const getDate = (start: Date, weekNumber: number, dayOfWeek: number, weekStartsOn: Day): Date => {\n const result = new Date(start);\n const startDayOfWeek = start.getDay(); // 0 = Sunday, 1 = Monday, etc.\n const adjustedStartDay = (startDayOfWeek === 0 ? 7 : startDayOfWeek) - weekStartsOn; // Adjust for weekStartsOn.\n result.setDate(start.getDate() - adjustedStartDay + weekNumber * 7 + dayOfWeek);\n return result;\n};\n\nexport const isSameDay = (date1: Date, date2: Date | undefined): boolean => {\n return (\n !!date2 &&\n date1.getFullYear() === date2.getFullYear() &&\n date1.getMonth() === date2.getMonth() &&\n date1.getDate() === date2.getDate()\n );\n};\n"],
|
|
5
|
-
"mappings": ";AAIA,SAASA,qBAAqB;AAC9B,SAAmBC,SAASC,mBAAmBC,QAAQC,mBAAmB;AAC1E,OAAOC,SAILC,YACAC,aACAC,WACAC,qBACAC,SACAC,QACAC,gBACK;AACP,SAASC,yBAAyB;AAClC,SAASC,YAAkD;AAE3D,SAASC,aAAa;AACtB,SAASC,MAAMC,YAAkCC,sBAAsB;AACvE,SAASC,UAAU;;;ACjBZ,IAAMC,iBAAiB;AAEvB,IAAMC,eAAe;EAC1B;IACE,SAAS;MACP,CAACD,cAAAA,GAAiB;QAChB,gBAAgB;MAClB;IACF;EACF;;;;ACTK,IAAME,UAAU,CAACC,QAAaC,YAAoBC,WAAmBC,iBAAAA;AAC1E,QAAMC,SAAS,IAAIC,KAAKL,MAAAA;AACxB,QAAMM,iBAAiBN,OAAMO,OAAM;AACnC,QAAMC,oBAAoBF,mBAAmB,IAAI,IAAIA,kBAAkBH;AACvEC,SAAOK,QAAQT,OAAMD,QAAO,IAAKS,mBAAmBP,aAAa,IAAIC,SAAAA;AACrE,SAAOE;AACT;AAEO,IAAMM,YAAY,CAACC,OAAaC,UAAAA;AACrC,SACE,CAAC,CAACA,SACFD,MAAME,YAAW,MAAOD,MAAMC,YAAW,KACzCF,MAAMG,SAAQ,MAAOF,MAAME,SAAQ,KACnCH,MAAMZ,QAAO,MAAOa,MAAMb,QAAO;AAErC;;;AFQA,IAAMgB,UAAU,KAAK;AACrB,IAAMC,QAAQ,oBAAIC,KAAK,YAAA;AACvB,IAAMC,OAAO;AACb,IAAMC,eAAe,IAAID;AAoBzB,IAAM,CAACE,yBAAyBC,kBAAAA,IAAsBC,cAAoC,UAAA;AAgB1F,IAAMC,eAAeC,2BACnB,CAAC,EAAEC,UAAUC,eAAe,EAAC,GAAIC,iBAAAA;AAC/B,QAAMC,QAAQC,QAAQ,MAAM,IAAIC,MAAAA,GAAwB,CAAA,CAAE;AAC1D,QAAM,CAACC,UAAUC,WAAAA,IAAeC,SAAAA;AAChC,QAAM,CAACC,OAAOC,QAAAA,IAAYF,SAAAA;AAE1BG,sBACET,cACA,OAAO;IACLU,UAAU,CAACC,SAAAA;AACTV,YAAMW,KAAK;QAAEC,MAAM;QAAUF;MAAK,CAAA;IACpC;EACF,IACA;IAACV;GAAM;AAGT,SACE,sBAAA,cAACR,yBAAAA;IACCM;IACAE;IACAM;IACAC;IACAJ;IACAC;KAECP,QAAAA;AAGP,CAAA;
|
|
6
|
-
"names": ["createContext", "addDays", "differenceInWeeks", "format", "startOfWeek", "React", "forwardRef", "useCallback", "useEffect", "useImperativeHandle", "useMemo", "useRef", "useState", "useResizeDetector", "List", "Event", "Icon", "IconButton", "useTranslation", "mx", "translationKey", "translations", "getDate", "start", "weekNumber", "dayOfWeek", "weekStartsOn", "result", "Date", "startDayOfWeek", "getDay", "adjustedStartDay", "setDate", "isSameDay", "date1", "date2", "getFullYear", "getMonth", "maxRows", "start", "Date", "size", "defaultWidth", "CalendarContextProvider", "useCalendarContext", "createContext", "CalendarRoot", "forwardRef", "children", "weekStartsOn", "forwardedRef", "event", "useMemo", "Event", "selected", "setSelected", "useState", "index", "setIndex", "useImperativeHandle", "scrollTo", "date", "emit", "type", "
|
|
4
|
+
"sourcesContent": ["//\n// Copyright 2025 DXOS.org\n//\n\nimport { createContext } from '@radix-ui/react-context';\nimport { type Day, addDays, differenceInWeeks, format, startOfWeek } from 'date-fns';\nimport React, {\n type Dispatch,\n type PropsWithChildren,\n type SetStateAction,\n forwardRef,\n useCallback,\n useEffect,\n useImperativeHandle,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport { useResizeDetector } from 'react-resize-detector';\nimport { List, type ListProps, type ListRowRenderer } from 'react-virtualized';\n\nimport { Event } from '@dxos/async';\nimport { Icon, IconButton, type ThemedClassName, useTranslation } from '@dxos/react-ui';\nimport { mx } from '@dxos/ui-theme';\n\nimport { translationKey } from '../../translations';\n\nimport { getDate, isSameDay } from './util';\n\nconst maxRows = 50 * 100;\nconst start = new Date('1970-01-01');\nconst size = 48;\nconst defaultWidth = 7 * size;\n\n//\n// Context\n//\n\ntype CalendarEvent = {\n type: 'scroll';\n date: Date;\n};\n\ntype CalendarContextValue = {\n weekStartsOn: Day;\n event: Event<CalendarEvent>;\n index: number | undefined;\n setIndex: Dispatch<SetStateAction<number | undefined>>;\n selected: Date | undefined;\n setSelected: Dispatch<SetStateAction<Date | undefined>>;\n};\n\nconst [CalendarContextProvider, useCalendarContext] = createContext<CalendarContextValue>('Calendar');\n\n//\n// Controller\n//\n\ntype CalendarController = {\n scrollTo: (date: Date) => void;\n};\n\n//\n// Root\n//\n\ntype CalendarRootProps = PropsWithChildren<Partial<Pick<CalendarContextValue, 'weekStartsOn'>>>;\n\nconst CalendarRoot = forwardRef<CalendarController, CalendarRootProps>(\n ({ children, weekStartsOn = 1 }, forwardedRef) => {\n const event = useMemo(() => new Event<CalendarEvent>(), []);\n const [selected, setSelected] = useState<Date | undefined>();\n const [index, setIndex] = useState<number | undefined>();\n\n useImperativeHandle(\n forwardedRef,\n () => ({\n scrollTo: (date: Date) => {\n event.emit({ type: 'scroll', date });\n },\n }),\n [event],\n );\n\n return (\n <CalendarContextProvider\n weekStartsOn={weekStartsOn}\n event={event}\n index={index}\n setIndex={setIndex}\n selected={selected}\n setSelected={setSelected}\n >\n {children}\n </CalendarContextProvider>\n );\n },\n);\n\n//\n// Header\n//\n\nconst CALENDAR_TOOLBAR_NAME = 'CalendarHeader';\n\ntype CalendarToolbarProps = ThemedClassName;\n\nconst CalendarToolbar = ({ classNames, ...props }: CalendarToolbarProps) => {\n const { t } = useTranslation(translationKey);\n const { weekStartsOn, event, index, selected } = useCalendarContext(CALENDAR_TOOLBAR_NAME);\n const top = useMemo(() => getDate(start, index ?? 0, 6, weekStartsOn), [index, weekStartsOn]);\n const today = useMemo(() => new Date(), []);\n\n const handleToday = useCallback(() => {\n event.emit({ type: 'scroll', date: today });\n }, [event, start, today]);\n\n return (\n <div\n {...props}\n role='none'\n className={mx('shrink-0 w-full m-auto grid grid-cols-3 items-center bg-toolbar-surface', classNames)}\n style={{ width: defaultWidth }}\n >\n <div className='flex justify-start'>\n <IconButton\n variant='ghost'\n size={5}\n icon='ph--calendar--regular'\n iconOnly\n classNames='aspect-square'\n label={t('today button')}\n onClick={handleToday}\n />\n </div>\n <div className='flex justify-center p-2 text-description'>{format(selected ?? top, 'MMMM')}</div>\n <div className='flex justify-end p-2 text-description'>{(selected ?? top).getFullYear()}</div>\n </div>\n );\n};\n\nCalendarToolbar.displayName = CALENDAR_TOOLBAR_NAME;\n\n//\n// Grid\n// TODO(burdon): Key nav.\n// TODO(burdon): Drag range.\n//\n\nconst CALENDAR_GRID_NAME = 'CalendarGrid';\n\ntype CalendarGridProps = ThemedClassName<{\n rows?: number;\n onSelect?: (event: { date: Date }) => void;\n}>;\n\nconst CalendarGrid = ({ classNames, rows, onSelect, ...props }: CalendarGridProps) => {\n const { weekStartsOn, event, setIndex, selected, setSelected } = useCalendarContext(CALENDAR_GRID_NAME);\n const { ref: containerRef, width = 0, height = 0 } = useResizeDetector();\n const maxHeight = rows ? rows * size : undefined;\n const listRef = useRef<List>(null);\n const today = useMemo(() => new Date(), []);\n\n const [initialized, setInitialized] = useState(false);\n useEffect(() => {\n const index = differenceInWeeks(today, start);\n listRef.current?.scrollToRow(index);\n }, [initialized, start, today]);\n\n useEffect(() => {\n return event.on((event) => {\n switch (event.type) {\n case 'scroll': {\n const index = differenceInWeeks(event.date, start);\n listRef.current?.scrollToRow(index);\n break;\n }\n }\n });\n }, [event]);\n\n const days = useMemo(() => {\n const weekStart = startOfWeek(new Date(), { weekStartsOn });\n return Array.from({ length: 7 }, (_, i) => {\n const day = addDays(weekStart, i);\n return format(day, 'EEE'); // Short day name (Mon, Tue, etc.)\n });\n }, []);\n\n // TODO(burdon): Get info by range.\n // TODO(burdon): Border marker for \"all day events?\"\n const getNumAppointments = useCallback((_date: Date) => {\n // return Math.floor(Math.random() * 10);\n return 0;\n }, []);\n\n const handleDaySelect = useCallback(\n (date: Date) => {\n setSelected((current) => (isSameDay(date, current) ? undefined : date));\n onSelect?.({ date });\n },\n [onSelect],\n );\n\n const handleScroll = useCallback<NonNullable<ListProps['onScroll']>>((info) => {\n setIndex(Math.round(info.scrollTop / size));\n }, []);\n\n const rowRenderer = useCallback<ListRowRenderer>(\n ({ key, index, style }) => {\n const getBgColor = (date: Date) => date.getMonth() % 2 === 0 && 'bg-modal-surface';\n return (\n <div\n key={key}\n {...props}\n role='none'\n style={style}\n className='w-full grid grid-cols-[1fr_max-content_1fr] snap-center'\n >\n <div role='none' className={mx(getBgColor(getDate(start, index, 0, weekStartsOn)))} />\n <div\n role='none'\n className='grid grid-cols-7 bg-input-surface'\n style={{ gridTemplateColumns: `repeat(7, ${size}px)` }}\n >\n {Array.from({ length: 7 }).map((_, i) => {\n const date = getDate(start, index, i, weekStartsOn);\n const num = getNumAppointments(date);\n const border = isSameDay(date, selected)\n ? 'border-primary-500'\n : isSameDay(date, today)\n ? 'border-amber-500'\n : undefined;\n\n return (\n <div\n key={i}\n role='none'\n className={mx('relative flex justify-center items-center cursor-pointer', getBgColor(date))}\n onClick={() => handleDaySelect(date)}\n >\n <span className='text-description'>{date.getDate()}</span>\n {!border && date.getDate() === 1 && (\n <span className='absolute top-0 text-xs text-description'>{format(date, 'MMM')}</span>\n )}\n {border && (\n <div\n role='none'\n className={mx('absolute top-0 left-0 w-full h-full border-2 rounded-full', border)}\n />\n )}\n {num > 0 && (\n <Icon\n classNames='absolute bottom-0'\n icon={num > 3 ? 'ph--dots-three--regular' : 'ph--dot--regular'}\n size={5}\n />\n )}\n </div>\n );\n })}\n </div>\n <div className={mx(getBgColor(getDate(start, index, 6, weekStartsOn)))} />\n </div>\n );\n },\n [handleDaySelect, getNumAppointments, selected, weekStartsOn],\n );\n\n return (\n <div role='none' className={mx('flex flex-col h-full w-full justify-center overflow-hidden', classNames)}>\n {/* Day labels */}\n <div role='none' className='flex justify-center bg-group-surface'>\n <div role='none' className='flex w-full grid grid-cols-7' style={{ width: defaultWidth }}>\n {days.map((date, i) => (\n <div key={i} role='none' className='flex justify-center p-2 text-sm font-thin'>\n {date}\n </div>\n ))}\n </div>\n </div>\n\n {/* Grid */}\n <div role='none' className='flex flex-col h-full w-full justify-center overflow-hidden' ref={containerRef}>\n <List\n ref={listRef}\n role='none'\n // TODO(burdon): Snap isn't working.\n className='[&>div]:snap-y scrollbar-none outline-hidden'\n width={width}\n height={maxHeight ?? height}\n rowCount={maxRows}\n rowHeight={size}\n rowRenderer={rowRenderer}\n scrollToAlignment='start'\n onScroll={handleScroll}\n onRowsRendered={() => setInitialized(true)}\n />\n </div>\n </div>\n );\n};\n\nCalendarGrid.displayName = CALENDAR_GRID_NAME;\n\n//\n// Calendar\n//\n\nexport const Calendar = {\n Root: CalendarRoot,\n Toolbar: CalendarToolbar,\n Grid: CalendarGrid,\n};\n\nexport type { CalendarController, CalendarRootProps, CalendarToolbarProps, CalendarGridProps };\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport { type Resource } from '@dxos/react-ui';\n\nexport const translationKey = '@dxos/react-ui-calendar';\n\nexport const translations = [\n {\n 'en-US': {\n [translationKey]: {\n 'today button': 'Today',\n },\n },\n },\n] as const satisfies Resource[];\n", "//\n// Copyright 2025 DXOS.org\n//\n\nimport { type Day } from 'date-fns';\n\nexport const getDate = (start: Date, weekNumber: number, dayOfWeek: number, weekStartsOn: Day): Date => {\n const result = new Date(start);\n const startDayOfWeek = start.getDay(); // 0 = Sunday, 1 = Monday, etc.\n const adjustedStartDay = (startDayOfWeek === 0 ? 7 : startDayOfWeek) - weekStartsOn; // Adjust for weekStartsOn.\n result.setDate(start.getDate() - adjustedStartDay + weekNumber * 7 + dayOfWeek);\n return result;\n};\n\nexport const isSameDay = (date1: Date, date2: Date | undefined): boolean => {\n return (\n !!date2 &&\n date1.getFullYear() === date2.getFullYear() &&\n date1.getMonth() === date2.getMonth() &&\n date1.getDate() === date2.getDate()\n );\n};\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["createContext", "addDays", "differenceInWeeks", "format", "startOfWeek", "React", "forwardRef", "useCallback", "useEffect", "useImperativeHandle", "useMemo", "useRef", "useState", "useResizeDetector", "List", "Event", "Icon", "IconButton", "useTranslation", "mx", "translationKey", "translations", "getDate", "start", "weekNumber", "dayOfWeek", "weekStartsOn", "result", "Date", "startDayOfWeek", "getDay", "adjustedStartDay", "setDate", "isSameDay", "date1", "date2", "getFullYear", "getMonth", "maxRows", "start", "Date", "size", "defaultWidth", "CalendarContextProvider", "useCalendarContext", "createContext", "CalendarRoot", "forwardRef", "children", "weekStartsOn", "forwardedRef", "event", "useMemo", "Event", "selected", "setSelected", "useState", "index", "setIndex", "useImperativeHandle", "scrollTo", "date", "emit", "type", "CALENDAR_TOOLBAR_NAME", "CalendarToolbar", "classNames", "props", "t", "useTranslation", "translationKey", "top", "getDate", "today", "handleToday", "useCallback", "div", "role", "className", "mx", "style", "width", "IconButton", "variant", "icon", "iconOnly", "label", "onClick", "format", "getFullYear", "displayName", "CALENDAR_GRID_NAME", "CalendarGrid", "rows", "onSelect", "ref", "containerRef", "height", "useResizeDetector", "maxHeight", "undefined", "listRef", "useRef", "initialized", "setInitialized", "useEffect", "differenceInWeeks", "current", "scrollToRow", "on", "days", "weekStart", "startOfWeek", "Array", "from", "length", "_", "i", "day", "addDays", "getNumAppointments", "_date", "handleDaySelect", "isSameDay", "handleScroll", "info", "Math", "round", "scrollTop", "rowRenderer", "key", "getBgColor", "getMonth", "gridTemplateColumns", "map", "num", "border", "span", "Icon", "List", "rowCount", "rowHeight", "scrollToAlignment", "onScroll", "onRowsRendered", "Calendar", "Root", "Toolbar", "Grid"]
|
|
7
7
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"inputs":{"src/translations.ts":{"bytes":1196,"imports":[],"format":"esm"},"src/components/Calendar/util.ts":{"bytes":2802,"imports":[],"format":"esm"},"src/components/Calendar/Calendar.tsx":{"bytes":
|
|
1
|
+
{"inputs":{"src/translations.ts":{"bytes":1196,"imports":[],"format":"esm"},"src/components/Calendar/util.ts":{"bytes":2802,"imports":[],"format":"esm"},"src/components/Calendar/Calendar.tsx":{"bytes":30561,"imports":[{"path":"@radix-ui/react-context","kind":"import-statement","external":true},{"path":"date-fns","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react-resize-detector","kind":"import-statement","external":true},{"path":"react-virtualized","kind":"import-statement","external":true},{"path":"@dxos/async","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/ui-theme","kind":"import-statement","external":true},{"path":"src/translations.ts","kind":"import-statement","original":"../../translations"},{"path":"src/components/Calendar/util.ts","kind":"import-statement","original":"./util"}],"format":"esm"},"src/components/Calendar/index.ts":{"bytes":476,"imports":[{"path":"src/components/Calendar/Calendar.tsx","kind":"import-statement","original":"./Calendar"}],"format":"esm"},"src/components/index.ts":{"bytes":467,"imports":[{"path":"src/components/Calendar/index.ts","kind":"import-statement","original":"./Calendar"}],"format":"esm"},"src/index.ts":{"bytes":462,"imports":[{"path":"src/components/index.ts","kind":"import-statement","original":"./components"}],"format":"esm"}},"outputs":{"dist/lib/browser/index.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":18325},"dist/lib/browser/index.mjs":{"imports":[{"path":"@radix-ui/react-context","kind":"import-statement","external":true},{"path":"date-fns","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react-resize-detector","kind":"import-statement","external":true},{"path":"react-virtualized","kind":"import-statement","external":true},{"path":"@dxos/async","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/ui-theme","kind":"import-statement","external":true}],"exports":["Calendar"],"entryPoint":"src/index.ts","inputs":{"src/components/Calendar/Calendar.tsx":{"bytesInOutput":7746},"src/translations.ts":{"bytesInOutput":167},"src/components/Calendar/util.ts":{"bytesInOutput":517},"src/components/Calendar/index.ts":{"bytesInOutput":0},"src/components/index.ts":{"bytesInOutput":0},"src/index.ts":{"bytesInOutput":0}},"bytes":8629}}}
|
|
@@ -63,16 +63,10 @@ var CalendarRoot = /* @__PURE__ */ forwardRef(({ children, weekStartsOn = 1 }, f
|
|
|
63
63
|
setSelected
|
|
64
64
|
}, children);
|
|
65
65
|
});
|
|
66
|
-
var
|
|
67
|
-
|
|
68
|
-
role: "none",
|
|
69
|
-
className: mx("flex flex-col items-center overflow-hidden bg-inputSurface", classNames)
|
|
70
|
-
}, children);
|
|
71
|
-
};
|
|
72
|
-
CalendarViewport.displayName = "CalendarContent";
|
|
73
|
-
var CalendarToolbar = ({ classNames }) => {
|
|
66
|
+
var CALENDAR_TOOLBAR_NAME = "CalendarHeader";
|
|
67
|
+
var CalendarToolbar = ({ classNames, ...props }) => {
|
|
74
68
|
const { t } = useTranslation(translationKey);
|
|
75
|
-
const { weekStartsOn, event, index, selected } = useCalendarContext(
|
|
69
|
+
const { weekStartsOn, event, index, selected } = useCalendarContext(CALENDAR_TOOLBAR_NAME);
|
|
76
70
|
const top = useMemo(() => getDate(start, index ?? 0, 6, weekStartsOn), [
|
|
77
71
|
index,
|
|
78
72
|
weekStartsOn
|
|
@@ -89,8 +83,9 @@ var CalendarToolbar = ({ classNames }) => {
|
|
|
89
83
|
today
|
|
90
84
|
]);
|
|
91
85
|
return /* @__PURE__ */ React.createElement("div", {
|
|
86
|
+
...props,
|
|
92
87
|
role: "none",
|
|
93
|
-
className: mx("
|
|
88
|
+
className: mx("shrink-0 w-full m-auto grid grid-cols-3 items-center bg-toolbar-surface", classNames),
|
|
94
89
|
style: {
|
|
95
90
|
width: defaultWidth
|
|
96
91
|
}
|
|
@@ -110,9 +105,10 @@ var CalendarToolbar = ({ classNames }) => {
|
|
|
110
105
|
className: "flex justify-end p-2 text-description"
|
|
111
106
|
}, (selected ?? top).getFullYear()));
|
|
112
107
|
};
|
|
113
|
-
CalendarToolbar.displayName =
|
|
114
|
-
var
|
|
115
|
-
|
|
108
|
+
CalendarToolbar.displayName = CALENDAR_TOOLBAR_NAME;
|
|
109
|
+
var CALENDAR_GRID_NAME = "CalendarGrid";
|
|
110
|
+
var CalendarGrid = ({ classNames, rows, onSelect, ...props }) => {
|
|
111
|
+
const { weekStartsOn, event, setIndex, selected, setSelected } = useCalendarContext(CALENDAR_GRID_NAME);
|
|
116
112
|
const { ref: containerRef, width = 0, height = 0 } = useResizeDetector();
|
|
117
113
|
const maxHeight = rows ? rows * size : void 0;
|
|
118
114
|
const listRef = useRef(null);
|
|
@@ -165,18 +161,19 @@ var CalendarGrid = ({ classNames, rows, onSelect }) => {
|
|
|
165
161
|
setIndex(Math.round(info.scrollTop / size));
|
|
166
162
|
}, []);
|
|
167
163
|
const rowRenderer = useCallback(({ key, index, style }) => {
|
|
168
|
-
const getBgColor = (date) => date.getMonth() % 2 === 0 && "bg-
|
|
164
|
+
const getBgColor = (date) => date.getMonth() % 2 === 0 && "bg-modal-surface";
|
|
169
165
|
return /* @__PURE__ */ React.createElement("div", {
|
|
170
166
|
key,
|
|
167
|
+
...props,
|
|
171
168
|
role: "none",
|
|
172
169
|
style,
|
|
173
|
-
className: "
|
|
170
|
+
className: "w-full grid grid-cols-[1fr_max-content_1fr] snap-center"
|
|
174
171
|
}, /* @__PURE__ */ React.createElement("div", {
|
|
175
172
|
role: "none",
|
|
176
173
|
className: mx(getBgColor(getDate(start, index, 0, weekStartsOn)))
|
|
177
174
|
}), /* @__PURE__ */ React.createElement("div", {
|
|
178
175
|
role: "none",
|
|
179
|
-
className: "grid grid-cols-7",
|
|
176
|
+
className: "grid grid-cols-7 bg-input-surface",
|
|
180
177
|
style: {
|
|
181
178
|
gridTemplateColumns: `repeat(7, ${size}px)`
|
|
182
179
|
}
|
|
@@ -197,7 +194,7 @@ var CalendarGrid = ({ classNames, rows, onSelect }) => {
|
|
|
197
194
|
className: "absolute top-0 text-xs text-description"
|
|
198
195
|
}, format(date, "MMM")), border && /* @__PURE__ */ React.createElement("div", {
|
|
199
196
|
role: "none",
|
|
200
|
-
className: mx("absolute top-0 left-0
|
|
197
|
+
className: mx("absolute top-0 left-0 w-full h-full border-2 rounded-full", border)
|
|
201
198
|
}), num > 0 && /* @__PURE__ */ React.createElement(Icon, {
|
|
202
199
|
classNames: "absolute bottom-0",
|
|
203
200
|
icon: num > 3 ? "ph--dots-three--regular" : "ph--dot--regular",
|
|
@@ -214,13 +211,13 @@ var CalendarGrid = ({ classNames, rows, onSelect }) => {
|
|
|
214
211
|
]);
|
|
215
212
|
return /* @__PURE__ */ React.createElement("div", {
|
|
216
213
|
role: "none",
|
|
217
|
-
className: mx("flex flex-col
|
|
214
|
+
className: mx("flex flex-col h-full w-full justify-center overflow-hidden", classNames)
|
|
218
215
|
}, /* @__PURE__ */ React.createElement("div", {
|
|
219
216
|
role: "none",
|
|
220
|
-
className: "flex justify-center bg-
|
|
217
|
+
className: "flex justify-center bg-group-surface"
|
|
221
218
|
}, /* @__PURE__ */ React.createElement("div", {
|
|
222
219
|
role: "none",
|
|
223
|
-
className: "flex
|
|
220
|
+
className: "flex w-full grid grid-cols-7",
|
|
224
221
|
style: {
|
|
225
222
|
width: defaultWidth
|
|
226
223
|
}
|
|
@@ -230,13 +227,13 @@ var CalendarGrid = ({ classNames, rows, onSelect }) => {
|
|
|
230
227
|
className: "flex justify-center p-2 text-sm font-thin"
|
|
231
228
|
}, date)))), /* @__PURE__ */ React.createElement("div", {
|
|
232
229
|
role: "none",
|
|
233
|
-
className: "flex flex-col
|
|
230
|
+
className: "flex flex-col h-full w-full justify-center overflow-hidden",
|
|
234
231
|
ref: containerRef
|
|
235
232
|
}, /* @__PURE__ */ React.createElement(List, {
|
|
236
233
|
ref: listRef,
|
|
237
234
|
role: "none",
|
|
238
235
|
// TODO(burdon): Snap isn't working.
|
|
239
|
-
className: "[&>div]:snap-y scrollbar-none outline-
|
|
236
|
+
className: "[&>div]:snap-y scrollbar-none outline-hidden",
|
|
240
237
|
width,
|
|
241
238
|
height: maxHeight ?? height,
|
|
242
239
|
rowCount: maxRows,
|
|
@@ -247,10 +244,9 @@ var CalendarGrid = ({ classNames, rows, onSelect }) => {
|
|
|
247
244
|
onRowsRendered: () => setInitialized(true)
|
|
248
245
|
})));
|
|
249
246
|
};
|
|
250
|
-
CalendarGrid.displayName =
|
|
247
|
+
CalendarGrid.displayName = CALENDAR_GRID_NAME;
|
|
251
248
|
var Calendar = {
|
|
252
249
|
Root: CalendarRoot,
|
|
253
|
-
Viewport: CalendarViewport,
|
|
254
250
|
Toolbar: CalendarToolbar,
|
|
255
251
|
Grid: CalendarGrid
|
|
256
252
|
};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/Calendar/Calendar.tsx", "../../../src/translations.ts", "../../../src/components/Calendar/util.ts"],
|
|
4
|
-
"sourcesContent": ["//\n// Copyright 2025 DXOS.org\n//\n\nimport { createContext } from '@radix-ui/react-context';\nimport { type Day, addDays, differenceInWeeks, format, startOfWeek } from 'date-fns';\nimport React, {\n type Dispatch,\n type PropsWithChildren,\n type SetStateAction,\n forwardRef,\n useCallback,\n useEffect,\n useImperativeHandle,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport { useResizeDetector } from 'react-resize-detector';\nimport { List, type ListProps, type ListRowRenderer } from 'react-virtualized';\n\nimport { Event } from '@dxos/async';\nimport { Icon, IconButton, type ThemedClassName, useTranslation } from '@dxos/react-ui';\nimport { mx } from '@dxos/ui-theme';\n\nimport { translationKey } from '../../translations';\n\nimport { getDate, isSameDay } from './util';\n\nconst maxRows = 50 * 100;\nconst start = new Date('1970-01-01');\nconst size = 48;\nconst defaultWidth = 7 * size;\n\n//\n// Context\n//\n\ntype CalendarEvent = {\n type: 'scroll';\n date: Date;\n};\n\ntype CalendarContextValue = {\n weekStartsOn: Day;\n event: Event<CalendarEvent>;\n index: number | undefined;\n setIndex: Dispatch<SetStateAction<number | undefined>>;\n selected: Date | undefined;\n setSelected: Dispatch<SetStateAction<Date | undefined>>;\n};\n\nconst [CalendarContextProvider, useCalendarContext] = createContext<CalendarContextValue>('Calendar');\n\n//\n// Controller\n//\n\ntype CalendarController = {\n scrollTo: (date: Date) => void;\n};\n\n//\n// Root\n//\n\ntype CalendarRootProps = PropsWithChildren<Partial<Pick<CalendarContextValue, 'weekStartsOn'>>>;\n\nconst CalendarRoot = forwardRef<CalendarController, CalendarRootProps>(\n ({ children, weekStartsOn = 1 }, forwardedRef) => {\n const event = useMemo(() => new Event<CalendarEvent>(), []);\n const [selected, setSelected] = useState<Date | undefined>();\n const [index, setIndex] = useState<number | undefined>();\n\n useImperativeHandle(\n forwardedRef,\n () => ({\n scrollTo: (date: Date) => {\n event.emit({ type: 'scroll', date });\n },\n }),\n [event],\n );\n\n return (\n <CalendarContextProvider\n weekStartsOn={weekStartsOn}\n event={event}\n index={index}\n setIndex={setIndex}\n selected={selected}\n setSelected={setSelected}\n >\n {children}\n </CalendarContextProvider>\n );\n },\n);\n\n//\n// Viewport\n//\n\ntype CalendarViewportProps = PropsWithChildren<ThemedClassName>;\n\nconst CalendarViewport = ({ children, classNames }: CalendarViewportProps) => {\n return (\n <div role='none' className={mx('flex flex-col items-center overflow-hidden bg-inputSurface', classNames)}>\n {children}\n </div>\n );\n};\n\nCalendarViewport.displayName = 'CalendarContent';\n\n//\n// Header\n//\n\ntype CalendarToolbarProps = ThemedClassName;\n\nconst CalendarToolbar = ({ classNames }: CalendarToolbarProps) => {\n const { t } = useTranslation(translationKey);\n const { weekStartsOn, event, index, selected } = useCalendarContext(CalendarToolbar.displayName);\n const top = useMemo(() => getDate(start, index ?? 0, 6, weekStartsOn), [index, weekStartsOn]);\n const today = useMemo(() => new Date(), []);\n\n const handleToday = useCallback(() => {\n event.emit({ type: 'scroll', date: today });\n }, [event, start, today]);\n\n return (\n <div\n role='none'\n className={mx('shink-0 is-full grid grid-cols-3 items-center bg-barSurface', classNames)}\n style={{ width: defaultWidth }}\n >\n <div className='flex justify-start'>\n <IconButton\n variant='ghost'\n size={5}\n icon='ph--calendar--regular'\n iconOnly\n classNames='aspect-square'\n label={t('today button')}\n onClick={handleToday}\n />\n </div>\n <div className='flex justify-center p-2 text-description'>{format(selected ?? top, 'MMMM')}</div>\n <div className='flex justify-end p-2 text-description'>{(selected ?? top).getFullYear()}</div>\n </div>\n );\n};\n\nCalendarToolbar.displayName = 'CalendarHeader';\n\n//\n// Grid\n// TODO(burdon): Key nav.\n// TODO(burdon): Drag range.\n//\n\ntype CalendarGridProps = ThemedClassName<{\n rows?: number;\n onSelect?: (event: { date: Date }) => void;\n}>;\n\nconst CalendarGrid = ({ classNames, rows, onSelect }: CalendarGridProps) => {\n const { weekStartsOn, event, setIndex, selected, setSelected } = useCalendarContext(CalendarGrid.displayName);\n const { ref: containerRef, width = 0, height = 0 } = useResizeDetector();\n const maxHeight = rows ? rows * size : undefined;\n const listRef = useRef<List>(null);\n const today = useMemo(() => new Date(), []);\n\n const [initialized, setInitialized] = useState(false);\n useEffect(() => {\n const index = differenceInWeeks(today, start);\n listRef.current?.scrollToRow(index);\n }, [initialized, start, today]);\n\n useEffect(() => {\n return event.on((event) => {\n switch (event.type) {\n case 'scroll': {\n const index = differenceInWeeks(event.date, start);\n listRef.current?.scrollToRow(index);\n break;\n }\n }\n });\n }, [event]);\n\n const days = useMemo(() => {\n const weekStart = startOfWeek(new Date(), { weekStartsOn });\n return Array.from({ length: 7 }, (_, i) => {\n const day = addDays(weekStart, i);\n return format(day, 'EEE'); // Short day name (Mon, Tue, etc.)\n });\n }, []);\n\n // TODO(burdon): Get info by range.\n // TODO(burdon): Border marker for \"all day events?\"\n const getNumAppointments = useCallback((_date: Date) => {\n // return Math.floor(Math.random() * 10);\n return 0;\n }, []);\n\n const handleDaySelect = useCallback(\n (date: Date) => {\n setSelected((current) => (isSameDay(date, current) ? undefined : date));\n onSelect?.({ date });\n },\n [onSelect],\n );\n\n const handleScroll = useCallback<NonNullable<ListProps['onScroll']>>((info) => {\n setIndex(Math.round(info.scrollTop / size));\n }, []);\n\n const rowRenderer = useCallback<ListRowRenderer>(\n ({ key, index, style }) => {\n const getBgColor = (date: Date) => date.getMonth() % 2 === 0 && 'bg-modalSurface';\n return (\n <div key={key} role='none' style={style} className='is-full grid grid-cols-[1fr_max-content_1fr] snap-center'>\n <div role='none' className={mx(getBgColor(getDate(start, index, 0, weekStartsOn)))} />\n <div role='none' className='grid grid-cols-7' style={{ gridTemplateColumns: `repeat(7, ${size}px)` }}>\n {Array.from({ length: 7 }).map((_, i) => {\n const date = getDate(start, index, i, weekStartsOn);\n const num = getNumAppointments(date);\n const border = isSameDay(date, selected)\n ? 'border-primary-500'\n : isSameDay(date, today)\n ? 'border-amber-500'\n : undefined;\n\n return (\n <div\n key={i}\n role='none'\n className={mx('relative flex justify-center items-center cursor-pointer', getBgColor(date))}\n onClick={() => handleDaySelect(date)}\n >\n <span className='text-description'>{date.getDate()}</span>\n {!border && date.getDate() === 1 && (\n <span className='absolute top-0 text-xs text-description'>{format(date, 'MMM')}</span>\n )}\n {border && (\n <div\n role='none'\n className={mx('absolute top-0 left-0 is-full bs-full border-2 rounded-full', border)}\n />\n )}\n {num > 0 && (\n <Icon\n classNames='absolute bottom-0'\n icon={num > 3 ? 'ph--dots-three--regular' : 'ph--dot--regular'}\n size={5}\n />\n )}\n </div>\n );\n })}\n </div>\n <div className={mx(getBgColor(getDate(start, index, 6, weekStartsOn)))} />\n </div>\n );\n },\n [handleDaySelect, getNumAppointments, selected, weekStartsOn],\n );\n\n return (\n <div role='none' className={mx('flex flex-col bs-full is-full justify-center overflow-hidden', classNames)}>\n {/* Day labels */}\n <div role='none' className='flex justify-center bg-groupSurface'>\n <div role='none' className='flex is-full grid grid-cols-7' style={{ width: defaultWidth }}>\n {days.map((date, i) => (\n <div key={i} role='none' className='flex justify-center p-2 text-sm font-thin'>\n {date}\n </div>\n ))}\n </div>\n </div>\n\n {/* Grid */}\n <div role='none' className='flex flex-col bs-full is-full justify-center overflow-hidden' ref={containerRef}>\n <List\n ref={listRef}\n role='none'\n // TODO(burdon): Snap isn't working.\n className='[&>div]:snap-y scrollbar-none outline-none'\n width={width}\n height={maxHeight ?? height}\n rowCount={maxRows}\n rowHeight={size}\n rowRenderer={rowRenderer}\n scrollToAlignment='start'\n onScroll={handleScroll}\n onRowsRendered={() => setInitialized(true)}\n />\n </div>\n </div>\n );\n};\n\nCalendarGrid.displayName = 'CalendarGrid';\n\n//\n// Calendar\n//\n\nexport const Calendar = {\n Root: CalendarRoot,\n Viewport: CalendarViewport,\n Toolbar: CalendarToolbar,\n Grid: CalendarGrid,\n};\n\nexport type { CalendarController, CalendarRootProps, CalendarViewportProps, CalendarToolbarProps, CalendarGridProps };\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport { type Resource } from '@dxos/react-ui';\n\nexport const translationKey = '@dxos/react-ui-calendar';\n\nexport const translations = [\n {\n 'en-US': {\n [translationKey]: {\n 'today button': 'Today',\n },\n },\n },\n] as const satisfies Resource[];\n", "//\n// Copyright 2025 DXOS.org\n//\n\nimport { type Day } from 'date-fns';\n\nexport const getDate = (start: Date, weekNumber: number, dayOfWeek: number, weekStartsOn: Day): Date => {\n const result = new Date(start);\n const startDayOfWeek = start.getDay(); // 0 = Sunday, 1 = Monday, etc.\n const adjustedStartDay = (startDayOfWeek === 0 ? 7 : startDayOfWeek) - weekStartsOn; // Adjust for weekStartsOn.\n result.setDate(start.getDate() - adjustedStartDay + weekNumber * 7 + dayOfWeek);\n return result;\n};\n\nexport const isSameDay = (date1: Date, date2: Date | undefined): boolean => {\n return (\n !!date2 &&\n date1.getFullYear() === date2.getFullYear() &&\n date1.getMonth() === date2.getMonth() &&\n date1.getDate() === date2.getDate()\n );\n};\n"],
|
|
5
|
-
"mappings": ";;;AAIA,SAASA,qBAAqB;AAC9B,SAAmBC,SAASC,mBAAmBC,QAAQC,mBAAmB;AAC1E,OAAOC,SAILC,YACAC,aACAC,WACAC,qBACAC,SACAC,QACAC,gBACK;AACP,SAASC,yBAAyB;AAClC,SAASC,YAAkD;AAE3D,SAASC,aAAa;AACtB,SAASC,MAAMC,YAAkCC,sBAAsB;AACvE,SAASC,UAAU;;;ACjBZ,IAAMC,iBAAiB;AAEvB,IAAMC,eAAe;EAC1B;IACE,SAAS;MACP,CAACD,cAAAA,GAAiB;QAChB,gBAAgB;MAClB;IACF;EACF;;;;ACTK,IAAME,UAAU,CAACC,QAAaC,YAAoBC,WAAmBC,iBAAAA;AAC1E,QAAMC,SAAS,IAAIC,KAAKL,MAAAA;AACxB,QAAMM,iBAAiBN,OAAMO,OAAM;AACnC,QAAMC,oBAAoBF,mBAAmB,IAAI,IAAIA,kBAAkBH;AACvEC,SAAOK,QAAQT,OAAMD,QAAO,IAAKS,mBAAmBP,aAAa,IAAIC,SAAAA;AACrE,SAAOE;AACT;AAEO,IAAMM,YAAY,CAACC,OAAaC,UAAAA;AACrC,SACE,CAAC,CAACA,SACFD,MAAME,YAAW,MAAOD,MAAMC,YAAW,KACzCF,MAAMG,SAAQ,MAAOF,MAAME,SAAQ,KACnCH,MAAMZ,QAAO,MAAOa,MAAMb,QAAO;AAErC;;;AFQA,IAAMgB,UAAU,KAAK;AACrB,IAAMC,QAAQ,oBAAIC,KAAK,YAAA;AACvB,IAAMC,OAAO;AACb,IAAMC,eAAe,IAAID;AAoBzB,IAAM,CAACE,yBAAyBC,kBAAAA,IAAsBC,cAAoC,UAAA;AAgB1F,IAAMC,eAAeC,2BACnB,CAAC,EAAEC,UAAUC,eAAe,EAAC,GAAIC,iBAAAA;AAC/B,QAAMC,QAAQC,QAAQ,MAAM,IAAIC,MAAAA,GAAwB,CAAA,CAAE;AAC1D,QAAM,CAACC,UAAUC,WAAAA,IAAeC,SAAAA;AAChC,QAAM,CAACC,OAAOC,QAAAA,IAAYF,SAAAA;AAE1BG,sBACET,cACA,OAAO;IACLU,UAAU,CAACC,SAAAA;AACTV,YAAMW,KAAK;QAAEC,MAAM;QAAUF;MAAK,CAAA;IACpC;EACF,IACA;IAACV;GAAM;AAGT,SACE,sBAAA,cAACR,yBAAAA;IACCM;IACAE;IACAM;IACAC;IACAJ;IACAC;KAECP,QAAAA;AAGP,CAAA;
|
|
6
|
-
"names": ["createContext", "addDays", "differenceInWeeks", "format", "startOfWeek", "React", "forwardRef", "useCallback", "useEffect", "useImperativeHandle", "useMemo", "useRef", "useState", "useResizeDetector", "List", "Event", "Icon", "IconButton", "useTranslation", "mx", "translationKey", "translations", "getDate", "start", "weekNumber", "dayOfWeek", "weekStartsOn", "result", "Date", "startDayOfWeek", "getDay", "adjustedStartDay", "setDate", "isSameDay", "date1", "date2", "getFullYear", "getMonth", "maxRows", "start", "Date", "size", "defaultWidth", "CalendarContextProvider", "useCalendarContext", "createContext", "CalendarRoot", "forwardRef", "children", "weekStartsOn", "forwardedRef", "event", "useMemo", "Event", "selected", "setSelected", "useState", "index", "setIndex", "useImperativeHandle", "scrollTo", "date", "emit", "type", "
|
|
4
|
+
"sourcesContent": ["//\n// Copyright 2025 DXOS.org\n//\n\nimport { createContext } from '@radix-ui/react-context';\nimport { type Day, addDays, differenceInWeeks, format, startOfWeek } from 'date-fns';\nimport React, {\n type Dispatch,\n type PropsWithChildren,\n type SetStateAction,\n forwardRef,\n useCallback,\n useEffect,\n useImperativeHandle,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport { useResizeDetector } from 'react-resize-detector';\nimport { List, type ListProps, type ListRowRenderer } from 'react-virtualized';\n\nimport { Event } from '@dxos/async';\nimport { Icon, IconButton, type ThemedClassName, useTranslation } from '@dxos/react-ui';\nimport { mx } from '@dxos/ui-theme';\n\nimport { translationKey } from '../../translations';\n\nimport { getDate, isSameDay } from './util';\n\nconst maxRows = 50 * 100;\nconst start = new Date('1970-01-01');\nconst size = 48;\nconst defaultWidth = 7 * size;\n\n//\n// Context\n//\n\ntype CalendarEvent = {\n type: 'scroll';\n date: Date;\n};\n\ntype CalendarContextValue = {\n weekStartsOn: Day;\n event: Event<CalendarEvent>;\n index: number | undefined;\n setIndex: Dispatch<SetStateAction<number | undefined>>;\n selected: Date | undefined;\n setSelected: Dispatch<SetStateAction<Date | undefined>>;\n};\n\nconst [CalendarContextProvider, useCalendarContext] = createContext<CalendarContextValue>('Calendar');\n\n//\n// Controller\n//\n\ntype CalendarController = {\n scrollTo: (date: Date) => void;\n};\n\n//\n// Root\n//\n\ntype CalendarRootProps = PropsWithChildren<Partial<Pick<CalendarContextValue, 'weekStartsOn'>>>;\n\nconst CalendarRoot = forwardRef<CalendarController, CalendarRootProps>(\n ({ children, weekStartsOn = 1 }, forwardedRef) => {\n const event = useMemo(() => new Event<CalendarEvent>(), []);\n const [selected, setSelected] = useState<Date | undefined>();\n const [index, setIndex] = useState<number | undefined>();\n\n useImperativeHandle(\n forwardedRef,\n () => ({\n scrollTo: (date: Date) => {\n event.emit({ type: 'scroll', date });\n },\n }),\n [event],\n );\n\n return (\n <CalendarContextProvider\n weekStartsOn={weekStartsOn}\n event={event}\n index={index}\n setIndex={setIndex}\n selected={selected}\n setSelected={setSelected}\n >\n {children}\n </CalendarContextProvider>\n );\n },\n);\n\n//\n// Header\n//\n\nconst CALENDAR_TOOLBAR_NAME = 'CalendarHeader';\n\ntype CalendarToolbarProps = ThemedClassName;\n\nconst CalendarToolbar = ({ classNames, ...props }: CalendarToolbarProps) => {\n const { t } = useTranslation(translationKey);\n const { weekStartsOn, event, index, selected } = useCalendarContext(CALENDAR_TOOLBAR_NAME);\n const top = useMemo(() => getDate(start, index ?? 0, 6, weekStartsOn), [index, weekStartsOn]);\n const today = useMemo(() => new Date(), []);\n\n const handleToday = useCallback(() => {\n event.emit({ type: 'scroll', date: today });\n }, [event, start, today]);\n\n return (\n <div\n {...props}\n role='none'\n className={mx('shrink-0 w-full m-auto grid grid-cols-3 items-center bg-toolbar-surface', classNames)}\n style={{ width: defaultWidth }}\n >\n <div className='flex justify-start'>\n <IconButton\n variant='ghost'\n size={5}\n icon='ph--calendar--regular'\n iconOnly\n classNames='aspect-square'\n label={t('today button')}\n onClick={handleToday}\n />\n </div>\n <div className='flex justify-center p-2 text-description'>{format(selected ?? top, 'MMMM')}</div>\n <div className='flex justify-end p-2 text-description'>{(selected ?? top).getFullYear()}</div>\n </div>\n );\n};\n\nCalendarToolbar.displayName = CALENDAR_TOOLBAR_NAME;\n\n//\n// Grid\n// TODO(burdon): Key nav.\n// TODO(burdon): Drag range.\n//\n\nconst CALENDAR_GRID_NAME = 'CalendarGrid';\n\ntype CalendarGridProps = ThemedClassName<{\n rows?: number;\n onSelect?: (event: { date: Date }) => void;\n}>;\n\nconst CalendarGrid = ({ classNames, rows, onSelect, ...props }: CalendarGridProps) => {\n const { weekStartsOn, event, setIndex, selected, setSelected } = useCalendarContext(CALENDAR_GRID_NAME);\n const { ref: containerRef, width = 0, height = 0 } = useResizeDetector();\n const maxHeight = rows ? rows * size : undefined;\n const listRef = useRef<List>(null);\n const today = useMemo(() => new Date(), []);\n\n const [initialized, setInitialized] = useState(false);\n useEffect(() => {\n const index = differenceInWeeks(today, start);\n listRef.current?.scrollToRow(index);\n }, [initialized, start, today]);\n\n useEffect(() => {\n return event.on((event) => {\n switch (event.type) {\n case 'scroll': {\n const index = differenceInWeeks(event.date, start);\n listRef.current?.scrollToRow(index);\n break;\n }\n }\n });\n }, [event]);\n\n const days = useMemo(() => {\n const weekStart = startOfWeek(new Date(), { weekStartsOn });\n return Array.from({ length: 7 }, (_, i) => {\n const day = addDays(weekStart, i);\n return format(day, 'EEE'); // Short day name (Mon, Tue, etc.)\n });\n }, []);\n\n // TODO(burdon): Get info by range.\n // TODO(burdon): Border marker for \"all day events?\"\n const getNumAppointments = useCallback((_date: Date) => {\n // return Math.floor(Math.random() * 10);\n return 0;\n }, []);\n\n const handleDaySelect = useCallback(\n (date: Date) => {\n setSelected((current) => (isSameDay(date, current) ? undefined : date));\n onSelect?.({ date });\n },\n [onSelect],\n );\n\n const handleScroll = useCallback<NonNullable<ListProps['onScroll']>>((info) => {\n setIndex(Math.round(info.scrollTop / size));\n }, []);\n\n const rowRenderer = useCallback<ListRowRenderer>(\n ({ key, index, style }) => {\n const getBgColor = (date: Date) => date.getMonth() % 2 === 0 && 'bg-modal-surface';\n return (\n <div\n key={key}\n {...props}\n role='none'\n style={style}\n className='w-full grid grid-cols-[1fr_max-content_1fr] snap-center'\n >\n <div role='none' className={mx(getBgColor(getDate(start, index, 0, weekStartsOn)))} />\n <div\n role='none'\n className='grid grid-cols-7 bg-input-surface'\n style={{ gridTemplateColumns: `repeat(7, ${size}px)` }}\n >\n {Array.from({ length: 7 }).map((_, i) => {\n const date = getDate(start, index, i, weekStartsOn);\n const num = getNumAppointments(date);\n const border = isSameDay(date, selected)\n ? 'border-primary-500'\n : isSameDay(date, today)\n ? 'border-amber-500'\n : undefined;\n\n return (\n <div\n key={i}\n role='none'\n className={mx('relative flex justify-center items-center cursor-pointer', getBgColor(date))}\n onClick={() => handleDaySelect(date)}\n >\n <span className='text-description'>{date.getDate()}</span>\n {!border && date.getDate() === 1 && (\n <span className='absolute top-0 text-xs text-description'>{format(date, 'MMM')}</span>\n )}\n {border && (\n <div\n role='none'\n className={mx('absolute top-0 left-0 w-full h-full border-2 rounded-full', border)}\n />\n )}\n {num > 0 && (\n <Icon\n classNames='absolute bottom-0'\n icon={num > 3 ? 'ph--dots-three--regular' : 'ph--dot--regular'}\n size={5}\n />\n )}\n </div>\n );\n })}\n </div>\n <div className={mx(getBgColor(getDate(start, index, 6, weekStartsOn)))} />\n </div>\n );\n },\n [handleDaySelect, getNumAppointments, selected, weekStartsOn],\n );\n\n return (\n <div role='none' className={mx('flex flex-col h-full w-full justify-center overflow-hidden', classNames)}>\n {/* Day labels */}\n <div role='none' className='flex justify-center bg-group-surface'>\n <div role='none' className='flex w-full grid grid-cols-7' style={{ width: defaultWidth }}>\n {days.map((date, i) => (\n <div key={i} role='none' className='flex justify-center p-2 text-sm font-thin'>\n {date}\n </div>\n ))}\n </div>\n </div>\n\n {/* Grid */}\n <div role='none' className='flex flex-col h-full w-full justify-center overflow-hidden' ref={containerRef}>\n <List\n ref={listRef}\n role='none'\n // TODO(burdon): Snap isn't working.\n className='[&>div]:snap-y scrollbar-none outline-hidden'\n width={width}\n height={maxHeight ?? height}\n rowCount={maxRows}\n rowHeight={size}\n rowRenderer={rowRenderer}\n scrollToAlignment='start'\n onScroll={handleScroll}\n onRowsRendered={() => setInitialized(true)}\n />\n </div>\n </div>\n );\n};\n\nCalendarGrid.displayName = CALENDAR_GRID_NAME;\n\n//\n// Calendar\n//\n\nexport const Calendar = {\n Root: CalendarRoot,\n Toolbar: CalendarToolbar,\n Grid: CalendarGrid,\n};\n\nexport type { CalendarController, CalendarRootProps, CalendarToolbarProps, CalendarGridProps };\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport { type Resource } from '@dxos/react-ui';\n\nexport const translationKey = '@dxos/react-ui-calendar';\n\nexport const translations = [\n {\n 'en-US': {\n [translationKey]: {\n 'today button': 'Today',\n },\n },\n },\n] as const satisfies Resource[];\n", "//\n// Copyright 2025 DXOS.org\n//\n\nimport { type Day } from 'date-fns';\n\nexport const getDate = (start: Date, weekNumber: number, dayOfWeek: number, weekStartsOn: Day): Date => {\n const result = new Date(start);\n const startDayOfWeek = start.getDay(); // 0 = Sunday, 1 = Monday, etc.\n const adjustedStartDay = (startDayOfWeek === 0 ? 7 : startDayOfWeek) - weekStartsOn; // Adjust for weekStartsOn.\n result.setDate(start.getDate() - adjustedStartDay + weekNumber * 7 + dayOfWeek);\n return result;\n};\n\nexport const isSameDay = (date1: Date, date2: Date | undefined): boolean => {\n return (\n !!date2 &&\n date1.getFullYear() === date2.getFullYear() &&\n date1.getMonth() === date2.getMonth() &&\n date1.getDate() === date2.getDate()\n );\n};\n"],
|
|
5
|
+
"mappings": ";;;AAIA,SAASA,qBAAqB;AAC9B,SAAmBC,SAASC,mBAAmBC,QAAQC,mBAAmB;AAC1E,OAAOC,SAILC,YACAC,aACAC,WACAC,qBACAC,SACAC,QACAC,gBACK;AACP,SAASC,yBAAyB;AAClC,SAASC,YAAkD;AAE3D,SAASC,aAAa;AACtB,SAASC,MAAMC,YAAkCC,sBAAsB;AACvE,SAASC,UAAU;;;ACjBZ,IAAMC,iBAAiB;AAEvB,IAAMC,eAAe;EAC1B;IACE,SAAS;MACP,CAACD,cAAAA,GAAiB;QAChB,gBAAgB;MAClB;IACF;EACF;;;;ACTK,IAAME,UAAU,CAACC,QAAaC,YAAoBC,WAAmBC,iBAAAA;AAC1E,QAAMC,SAAS,IAAIC,KAAKL,MAAAA;AACxB,QAAMM,iBAAiBN,OAAMO,OAAM;AACnC,QAAMC,oBAAoBF,mBAAmB,IAAI,IAAIA,kBAAkBH;AACvEC,SAAOK,QAAQT,OAAMD,QAAO,IAAKS,mBAAmBP,aAAa,IAAIC,SAAAA;AACrE,SAAOE;AACT;AAEO,IAAMM,YAAY,CAACC,OAAaC,UAAAA;AACrC,SACE,CAAC,CAACA,SACFD,MAAME,YAAW,MAAOD,MAAMC,YAAW,KACzCF,MAAMG,SAAQ,MAAOF,MAAME,SAAQ,KACnCH,MAAMZ,QAAO,MAAOa,MAAMb,QAAO;AAErC;;;AFQA,IAAMgB,UAAU,KAAK;AACrB,IAAMC,QAAQ,oBAAIC,KAAK,YAAA;AACvB,IAAMC,OAAO;AACb,IAAMC,eAAe,IAAID;AAoBzB,IAAM,CAACE,yBAAyBC,kBAAAA,IAAsBC,cAAoC,UAAA;AAgB1F,IAAMC,eAAeC,2BACnB,CAAC,EAAEC,UAAUC,eAAe,EAAC,GAAIC,iBAAAA;AAC/B,QAAMC,QAAQC,QAAQ,MAAM,IAAIC,MAAAA,GAAwB,CAAA,CAAE;AAC1D,QAAM,CAACC,UAAUC,WAAAA,IAAeC,SAAAA;AAChC,QAAM,CAACC,OAAOC,QAAAA,IAAYF,SAAAA;AAE1BG,sBACET,cACA,OAAO;IACLU,UAAU,CAACC,SAAAA;AACTV,YAAMW,KAAK;QAAEC,MAAM;QAAUF;MAAK,CAAA;IACpC;EACF,IACA;IAACV;GAAM;AAGT,SACE,sBAAA,cAACR,yBAAAA;IACCM;IACAE;IACAM;IACAC;IACAJ;IACAC;KAECP,QAAAA;AAGP,CAAA;AAOF,IAAMgB,wBAAwB;AAI9B,IAAMC,kBAAkB,CAAC,EAAEC,YAAY,GAAGC,MAAAA,MAA6B;AACrE,QAAM,EAAEC,EAAC,IAAKC,eAAeC,cAAAA;AAC7B,QAAM,EAAErB,cAAcE,OAAOM,OAAOH,SAAQ,IAAKV,mBAAmBoB,qBAAAA;AACpE,QAAMO,MAAMnB,QAAQ,MAAMoB,QAAQjC,OAAOkB,SAAS,GAAG,GAAGR,YAAAA,GAAe;IAACQ;IAAOR;GAAa;AAC5F,QAAMwB,QAAQrB,QAAQ,MAAM,oBAAIZ,KAAAA,GAAQ,CAAA,CAAE;AAE1C,QAAMkC,cAAcC,YAAY,MAAA;AAC9BxB,UAAMW,KAAK;MAAEC,MAAM;MAAUF,MAAMY;IAAM,CAAA;EAC3C,GAAG;IAACtB;IAAOZ;IAAOkC;GAAM;AAExB,SACE,sBAAA,cAACG,OAAAA;IACE,GAAGT;IACJU,MAAK;IACLC,WAAWC,GAAG,2EAA2Eb,UAAAA;IACzFc,OAAO;MAAEC,OAAOvC;IAAa;KAE7B,sBAAA,cAACkC,OAAAA;IAAIE,WAAU;KACb,sBAAA,cAACI,YAAAA;IACCC,SAAQ;IACR1C,MAAM;IACN2C,MAAK;IACLC,UAAAA;IACAnB,YAAW;IACXoB,OAAOlB,EAAE,cAAA;IACTmB,SAASb;OAGb,sBAAA,cAACE,OAAAA;IAAIE,WAAU;KAA4CU,OAAOlC,YAAYiB,KAAK,MAAA,CAAA,GACnF,sBAAA,cAACK,OAAAA;IAAIE,WAAU;MAA0CxB,YAAYiB,KAAKkB,YAAW,CAAA,CAAA;AAG3F;AAEAxB,gBAAgByB,cAAc1B;AAQ9B,IAAM2B,qBAAqB;AAO3B,IAAMC,eAAe,CAAC,EAAE1B,YAAY2B,MAAMC,UAAU,GAAG3B,MAAAA,MAA0B;AAC/E,QAAM,EAAElB,cAAcE,OAAOO,UAAUJ,UAAUC,YAAW,IAAKX,mBAAmB+C,kBAAAA;AACpF,QAAM,EAAEI,KAAKC,cAAcf,QAAQ,GAAGgB,SAAS,EAAC,IAAKC,kBAAAA;AACrD,QAAMC,YAAYN,OAAOA,OAAOpD,OAAO2D;AACvC,QAAMC,UAAUC,OAAa,IAAA;AAC7B,QAAM7B,QAAQrB,QAAQ,MAAM,oBAAIZ,KAAAA,GAAQ,CAAA,CAAE;AAE1C,QAAM,CAAC+D,aAAaC,cAAAA,IAAkBhD,SAAS,KAAA;AAC/CiD,YAAU,MAAA;AACR,UAAMhD,QAAQiD,kBAAkBjC,OAAOlC,KAAAA;AACvC8D,YAAQM,SAASC,YAAYnD,KAAAA;EAC/B,GAAG;IAAC8C;IAAahE;IAAOkC;GAAM;AAE9BgC,YAAU,MAAA;AACR,WAAOtD,MAAM0D,GAAG,CAAC1D,WAAAA;AACf,cAAQA,OAAMY,MAAI;QAChB,KAAK,UAAU;AACb,gBAAMN,QAAQiD,kBAAkBvD,OAAMU,MAAMtB,KAAAA;AAC5C8D,kBAAQM,SAASC,YAAYnD,KAAAA;AAC7B;QACF;MACF;IACF,CAAA;EACF,GAAG;IAACN;GAAM;AAEV,QAAM2D,OAAO1D,QAAQ,MAAA;AACnB,UAAM2D,YAAYC,YAAY,oBAAIxE,KAAAA,GAAQ;MAAES;IAAa,CAAA;AACzD,WAAOgE,MAAMC,KAAK;MAAEC,QAAQ;IAAE,GAAG,CAACC,GAAGC,MAAAA;AACnC,YAAMC,MAAMC,QAAQR,WAAWM,CAAAA;AAC/B,aAAO7B,OAAO8B,KAAK,KAAA;IACrB,CAAA;EACF,GAAG,CAAA,CAAE;AAIL,QAAME,qBAAqB7C,YAAY,CAAC8C,UAAAA;AAEtC,WAAO;EACT,GAAG,CAAA,CAAE;AAEL,QAAMC,kBAAkB/C,YACtB,CAACd,SAAAA;AACCN,gBAAY,CAACoD,YAAagB,UAAU9D,MAAM8C,OAAAA,IAAWP,SAAYvC,IAAAA;AACjEiC,eAAW;MAAEjC;IAAK,CAAA;EACpB,GACA;IAACiC;GAAS;AAGZ,QAAM8B,eAAejD,YAAgD,CAACkD,SAAAA;AACpEnE,aAASoE,KAAKC,MAAMF,KAAKG,YAAYvF,IAAAA,CAAAA;EACvC,GAAG,CAAA,CAAE;AAEL,QAAMwF,cAActD,YAClB,CAAC,EAAEuD,KAAKzE,OAAOuB,MAAK,MAAE;AACpB,UAAMmD,aAAa,CAACtE,SAAeA,KAAKuE,SAAQ,IAAK,MAAM,KAAK;AAChE,WACE,sBAAA,cAACxD,OAAAA;MACCsD;MACC,GAAG/D;MACJU,MAAK;MACLG;MACAF,WAAU;OAEV,sBAAA,cAACF,OAAAA;MAAIC,MAAK;MAAOC,WAAWC,GAAGoD,WAAW3D,QAAQjC,OAAOkB,OAAO,GAAGR,YAAAA,CAAAA,CAAAA;QACnE,sBAAA,cAAC2B,OAAAA;MACCC,MAAK;MACLC,WAAU;MACVE,OAAO;QAAEqD,qBAAqB,aAAa5F,IAAAA;MAAU;OAEpDwE,MAAMC,KAAK;MAAEC,QAAQ;IAAE,CAAA,EAAGmB,IAAI,CAAClB,GAAGC,MAAAA;AACjC,YAAMxD,OAAOW,QAAQjC,OAAOkB,OAAO4D,GAAGpE,YAAAA;AACtC,YAAMsF,MAAMf,mBAAmB3D,IAAAA;AAC/B,YAAM2E,SAASb,UAAU9D,MAAMP,QAAAA,IAC3B,uBACAqE,UAAU9D,MAAMY,KAAAA,IACd,qBACA2B;AAEN,aACE,sBAAA,cAACxB,OAAAA;QACCsD,KAAKb;QACLxC,MAAK;QACLC,WAAWC,GAAG,4DAA4DoD,WAAWtE,IAAAA,CAAAA;QACrF0B,SAAS,MAAMmC,gBAAgB7D,IAAAA;SAE/B,sBAAA,cAAC4E,QAAAA;QAAK3D,WAAU;SAAoBjB,KAAKW,QAAO,CAAA,GAC/C,CAACgE,UAAU3E,KAAKW,QAAO,MAAO,KAC7B,sBAAA,cAACiE,QAAAA;QAAK3D,WAAU;SAA2CU,OAAO3B,MAAM,KAAA,CAAA,GAEzE2E,UACC,sBAAA,cAAC5D,OAAAA;QACCC,MAAK;QACLC,WAAWC,GAAG,6DAA6DyD,MAAAA;UAG9ED,MAAM,KACL,sBAAA,cAACG,MAAAA;QACCxE,YAAW;QACXkB,MAAMmD,MAAM,IAAI,4BAA4B;QAC5C9F,MAAM;;IAKhB,CAAA,CAAA,GAEF,sBAAA,cAACmC,OAAAA;MAAIE,WAAWC,GAAGoD,WAAW3D,QAAQjC,OAAOkB,OAAO,GAAGR,YAAAA,CAAAA,CAAAA;;EAG7D,GACA;IAACyE;IAAiBF;IAAoBlE;IAAUL;GAAa;AAG/D,SACE,sBAAA,cAAC2B,OAAAA;IAAIC,MAAK;IAAOC,WAAWC,GAAG,8DAA8Db,UAAAA;KAE3F,sBAAA,cAACU,OAAAA;IAAIC,MAAK;IAAOC,WAAU;KACzB,sBAAA,cAACF,OAAAA;IAAIC,MAAK;IAAOC,WAAU;IAA+BE,OAAO;MAAEC,OAAOvC;IAAa;KACpFoE,KAAKwB,IAAI,CAACzE,MAAMwD,MACf,sBAAA,cAACzC,OAAAA;IAAIsD,KAAKb;IAAGxC,MAAK;IAAOC,WAAU;KAChCjB,IAAAA,CAAAA,CAAAA,CAAAA,GAOT,sBAAA,cAACe,OAAAA;IAAIC,MAAK;IAAOC,WAAU;IAA6DiB,KAAKC;KAC3F,sBAAA,cAAC2C,MAAAA;IACC5C,KAAKM;IACLxB,MAAK;;IAELC,WAAU;IACVG;IACAgB,QAAQE,aAAaF;IACrB2C,UAAUtG;IACVuG,WAAWpG;IACXwF;IACAa,mBAAkB;IAClBC,UAAUnB;IACVoB,gBAAgB,MAAMxC,eAAe,IAAA;;AAK/C;AAEAZ,aAAaF,cAAcC;AAMpB,IAAMsD,WAAW;EACtBC,MAAMpG;EACNqG,SAASlF;EACTmF,MAAMxD;AACR;",
|
|
6
|
+
"names": ["createContext", "addDays", "differenceInWeeks", "format", "startOfWeek", "React", "forwardRef", "useCallback", "useEffect", "useImperativeHandle", "useMemo", "useRef", "useState", "useResizeDetector", "List", "Event", "Icon", "IconButton", "useTranslation", "mx", "translationKey", "translations", "getDate", "start", "weekNumber", "dayOfWeek", "weekStartsOn", "result", "Date", "startDayOfWeek", "getDay", "adjustedStartDay", "setDate", "isSameDay", "date1", "date2", "getFullYear", "getMonth", "maxRows", "start", "Date", "size", "defaultWidth", "CalendarContextProvider", "useCalendarContext", "createContext", "CalendarRoot", "forwardRef", "children", "weekStartsOn", "forwardedRef", "event", "useMemo", "Event", "selected", "setSelected", "useState", "index", "setIndex", "useImperativeHandle", "scrollTo", "date", "emit", "type", "CALENDAR_TOOLBAR_NAME", "CalendarToolbar", "classNames", "props", "t", "useTranslation", "translationKey", "top", "getDate", "today", "handleToday", "useCallback", "div", "role", "className", "mx", "style", "width", "IconButton", "variant", "icon", "iconOnly", "label", "onClick", "format", "getFullYear", "displayName", "CALENDAR_GRID_NAME", "CalendarGrid", "rows", "onSelect", "ref", "containerRef", "height", "useResizeDetector", "maxHeight", "undefined", "listRef", "useRef", "initialized", "setInitialized", "useEffect", "differenceInWeeks", "current", "scrollToRow", "on", "days", "weekStart", "startOfWeek", "Array", "from", "length", "_", "i", "day", "addDays", "getNumAppointments", "_date", "handleDaySelect", "isSameDay", "handleScroll", "info", "Math", "round", "scrollTop", "rowRenderer", "key", "getBgColor", "getMonth", "gridTemplateColumns", "map", "num", "border", "span", "Icon", "List", "rowCount", "rowHeight", "scrollToAlignment", "onScroll", "onRowsRendered", "Calendar", "Root", "Toolbar", "Grid"]
|
|
7
7
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"inputs":{"src/translations.ts":{"bytes":1196,"imports":[],"format":"esm"},"src/components/Calendar/util.ts":{"bytes":2802,"imports":[],"format":"esm"},"src/components/Calendar/Calendar.tsx":{"bytes":
|
|
1
|
+
{"inputs":{"src/translations.ts":{"bytes":1196,"imports":[],"format":"esm"},"src/components/Calendar/util.ts":{"bytes":2802,"imports":[],"format":"esm"},"src/components/Calendar/Calendar.tsx":{"bytes":30561,"imports":[{"path":"@radix-ui/react-context","kind":"import-statement","external":true},{"path":"date-fns","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react-resize-detector","kind":"import-statement","external":true},{"path":"react-virtualized","kind":"import-statement","external":true},{"path":"@dxos/async","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/ui-theme","kind":"import-statement","external":true},{"path":"src/translations.ts","kind":"import-statement","original":"../../translations"},{"path":"src/components/Calendar/util.ts","kind":"import-statement","original":"./util"}],"format":"esm"},"src/components/Calendar/index.ts":{"bytes":476,"imports":[{"path":"src/components/Calendar/Calendar.tsx","kind":"import-statement","original":"./Calendar"}],"format":"esm"},"src/components/index.ts":{"bytes":467,"imports":[{"path":"src/components/Calendar/index.ts","kind":"import-statement","original":"./Calendar"}],"format":"esm"},"src/index.ts":{"bytes":462,"imports":[{"path":"src/components/index.ts","kind":"import-statement","original":"./components"}],"format":"esm"}},"outputs":{"dist/lib/node-esm/index.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":18327},"dist/lib/node-esm/index.mjs":{"imports":[{"path":"@radix-ui/react-context","kind":"import-statement","external":true},{"path":"date-fns","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react-resize-detector","kind":"import-statement","external":true},{"path":"react-virtualized","kind":"import-statement","external":true},{"path":"@dxos/async","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/ui-theme","kind":"import-statement","external":true}],"exports":["Calendar"],"entryPoint":"src/index.ts","inputs":{"src/components/Calendar/Calendar.tsx":{"bytesInOutput":7746},"src/translations.ts":{"bytesInOutput":167},"src/components/Calendar/util.ts":{"bytesInOutput":517},"src/components/Calendar/index.ts":{"bytesInOutput":0},"src/components/index.ts":{"bytesInOutput":0},"src/index.ts":{"bytesInOutput":0}},"bytes":8722}}}
|
|
@@ -18,7 +18,6 @@ type CalendarController = {
|
|
|
18
18
|
scrollTo: (date: Date) => void;
|
|
19
19
|
};
|
|
20
20
|
type CalendarRootProps = PropsWithChildren<Partial<Pick<CalendarContextValue, 'weekStartsOn'>>>;
|
|
21
|
-
type CalendarViewportProps = PropsWithChildren<ThemedClassName>;
|
|
22
21
|
type CalendarToolbarProps = ThemedClassName;
|
|
23
22
|
type CalendarGridProps = ThemedClassName<{
|
|
24
23
|
rows?: number;
|
|
@@ -30,18 +29,14 @@ export declare const Calendar: {
|
|
|
30
29
|
Root: React.ForwardRefExoticComponent<Partial<Pick<CalendarContextValue, "weekStartsOn">> & {
|
|
31
30
|
children?: React.ReactNode | undefined;
|
|
32
31
|
} & React.RefAttributes<CalendarController>>;
|
|
33
|
-
Viewport: {
|
|
34
|
-
({ children, classNames }: CalendarViewportProps): React.JSX.Element;
|
|
35
|
-
displayName: string;
|
|
36
|
-
};
|
|
37
32
|
Toolbar: {
|
|
38
|
-
({ classNames }: CalendarToolbarProps): React.JSX.Element;
|
|
33
|
+
({ classNames, ...props }: CalendarToolbarProps): React.JSX.Element;
|
|
39
34
|
displayName: string;
|
|
40
35
|
};
|
|
41
36
|
Grid: {
|
|
42
|
-
({ classNames, rows, onSelect }: CalendarGridProps): React.JSX.Element;
|
|
37
|
+
({ classNames, rows, onSelect, ...props }: CalendarGridProps): React.JSX.Element;
|
|
43
38
|
displayName: string;
|
|
44
39
|
};
|
|
45
40
|
};
|
|
46
|
-
export type { CalendarController, CalendarRootProps,
|
|
41
|
+
export type { CalendarController, CalendarRootProps, CalendarToolbarProps, CalendarGridProps };
|
|
47
42
|
//# sourceMappingURL=Calendar.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Calendar.d.ts","sourceRoot":"","sources":["../../../../../src/components/Calendar/Calendar.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,KAAK,GAAG,EAAmD,MAAM,UAAU,CAAC;AACrF,OAAO,KAAK,EAAE,EACZ,KAAK,QAAQ,EACb,KAAK,iBAAiB,EACtB,KAAK,cAAc,EAQpB,MAAM,OAAO,CAAC;AAIf,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AACpC,OAAO,EAAoB,KAAK,eAAe,EAAkB,MAAM,gBAAgB,CAAC;AAgBxF,KAAK,aAAa,GAAG;IACnB,IAAI,EAAE,QAAQ,CAAC;IACf,IAAI,EAAE,IAAI,CAAC;CACZ,CAAC;AAEF,KAAK,oBAAoB,GAAG;IAC1B,YAAY,EAAE,GAAG,CAAC;IAClB,KAAK,EAAE,KAAK,CAAC,aAAa,CAAC,CAAC;IAC5B,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,QAAQ,EAAE,QAAQ,CAAC,cAAc,CAAC,MAAM,GAAG,SAAS,CAAC,CAAC,CAAC;IACvD,QAAQ,EAAE,IAAI,GAAG,SAAS,CAAC;IAC3B,WAAW,EAAE,QAAQ,CAAC,cAAc,CAAC,IAAI,GAAG,SAAS,CAAC,CAAC,CAAC;CACzD,CAAC;AAQF,KAAK,kBAAkB,GAAG;IACxB,QAAQ,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;CAChC,CAAC;AAMF,KAAK,iBAAiB,GAAG,iBAAiB,CAAC,OAAO,CAAC,IAAI,CAAC,oBAAoB,EAAE,cAAc,CAAC,CAAC,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"Calendar.d.ts","sourceRoot":"","sources":["../../../../../src/components/Calendar/Calendar.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,KAAK,GAAG,EAAmD,MAAM,UAAU,CAAC;AACrF,OAAO,KAAK,EAAE,EACZ,KAAK,QAAQ,EACb,KAAK,iBAAiB,EACtB,KAAK,cAAc,EAQpB,MAAM,OAAO,CAAC;AAIf,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AACpC,OAAO,EAAoB,KAAK,eAAe,EAAkB,MAAM,gBAAgB,CAAC;AAgBxF,KAAK,aAAa,GAAG;IACnB,IAAI,EAAE,QAAQ,CAAC;IACf,IAAI,EAAE,IAAI,CAAC;CACZ,CAAC;AAEF,KAAK,oBAAoB,GAAG;IAC1B,YAAY,EAAE,GAAG,CAAC;IAClB,KAAK,EAAE,KAAK,CAAC,aAAa,CAAC,CAAC;IAC5B,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,QAAQ,EAAE,QAAQ,CAAC,cAAc,CAAC,MAAM,GAAG,SAAS,CAAC,CAAC,CAAC;IACvD,QAAQ,EAAE,IAAI,GAAG,SAAS,CAAC;IAC3B,WAAW,EAAE,QAAQ,CAAC,cAAc,CAAC,IAAI,GAAG,SAAS,CAAC,CAAC,CAAC;CACzD,CAAC;AAQF,KAAK,kBAAkB,GAAG;IACxB,QAAQ,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;CAChC,CAAC;AAMF,KAAK,iBAAiB,GAAG,iBAAiB,CAAC,OAAO,CAAC,IAAI,CAAC,oBAAoB,EAAE,cAAc,CAAC,CAAC,CAAC,CAAC;AAuChG,KAAK,oBAAoB,GAAG,eAAe,CAAC;AA8C5C,KAAK,iBAAiB,GAAG,eAAe,CAAC;IACvC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,IAAI,EAAE,IAAI,CAAA;KAAE,KAAK,IAAI,CAAC;CAC5C,CAAC,CAAC;AA2JH,eAAO,MAAM,QAAQ;;;;;mCA1M8B,oBAAoB;;;;mDAiDP,iBAAiB;;;CA6JhF,CAAC;AAEF,YAAY,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,oBAAoB,EAAE,iBAAiB,EAAE,CAAC"}
|
|
@@ -3,12 +3,10 @@ import React from 'react';
|
|
|
3
3
|
declare const meta: {
|
|
4
4
|
title: string;
|
|
5
5
|
component: {
|
|
6
|
-
({ classNames, rows, onSelect }: import("./Calendar").CalendarGridProps): React.JSX.Element;
|
|
6
|
+
({ classNames, rows, onSelect, ...props }: import("./Calendar").CalendarGridProps): React.JSX.Element;
|
|
7
7
|
displayName: string;
|
|
8
8
|
};
|
|
9
|
-
decorators: import("@storybook/react").Decorator[];
|
|
10
9
|
parameters: {
|
|
11
|
-
layout: string;
|
|
12
10
|
translations: [{
|
|
13
11
|
readonly 'en-US': {
|
|
14
12
|
readonly "@dxos/react-ui-calendar": {
|
|
@@ -21,7 +19,5 @@ declare const meta: {
|
|
|
21
19
|
export default meta;
|
|
22
20
|
type Story = StoryObj<typeof meta>;
|
|
23
21
|
export declare const Default: Story;
|
|
24
|
-
export declare const Border: Story;
|
|
25
22
|
export declare const Column: Story;
|
|
26
|
-
export declare const Mobile: Story;
|
|
27
23
|
//# sourceMappingURL=Calendar.stories.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Calendar.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Calendar/Calendar.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAa,KAAK,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjE,OAAO,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"Calendar.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Calendar/Calendar.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAa,KAAK,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjE,OAAO,KAAK,MAAM,OAAO,CAAC;AAS1B,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;CAM4B,CAAC;AAEvC,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAQrB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAcpB,CAAC"}
|