@fullcalendar/mui 7.0.0-beta.5

package/esm/monarch/ResourceTimeGrid.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import { useCalendarController } from '@fullcalendar/react';
+import adaptivePlugin from '@fullcalendar/adaptive';
+import interactionPlugin from '@fullcalendar/interaction';
+import scrollGridPlugin from '@fullcalendar/scrollgrid';
+import resourceTimeGridPlugin from '@fullcalendar/resource-timegrid';
+import EventCalendarToolbar from './EventCalendarToolbar.js';
+import SchedulerViews from './SchedulerViews.js';
+import EventCalendarContainer from './EventCalendarContainer.js';
+import '@mui/material/Box';
+import '@mui/material/Button';
+import '@mui/material/IconButton';
+import '@mui/material/Typography';
+import '@mui/material/ToggleButtonGroup';
+import '@mui/material/ToggleButton';
+import './icons.js';
+import '@fullcalendar/core';
+import '@mui/icons-material/ChevronLeft';
+import '@mui/icons-material/ChevronRight';
+import '@mui/icons-material/Close';
+import '@mui/icons-material/ExpandMore';
+import './EventCalendarViews.js';
+import '@mui/material';
+
+const plugins = [
+    adaptivePlugin,
+    interactionPlugin,
+    scrollGridPlugin,
+    resourceTimeGridPlugin,
+];
+const defaultAvailableViews = [
+    'resourceTimeGridDay',
+    'resourceTimeGridWeek',
+];
+const navLinkDayClick = 'resourceTimeGridDay';
+const navLinkWeekClick = 'resourceTimeGridWeek';
+function ResourceTimeGrid({ availableViews = defaultAvailableViews, addButton, className, height, contentHeight, direction, plugins: userPlugins = [], ...restOptions }) {
+    const controller = useCalendarController();
+    const autoHeight = height === 'auto' || contentHeight === 'auto';
+    return (React.createElement(EventCalendarContainer, { direction: direction, className: className, height: height, borderless: restOptions.borderless, borderlessX: restOptions.borderlessX, borderlessTop: restOptions.borderlessTop, borderlessBottom: restOptions.borderlessBottom },
+        React.createElement(EventCalendarToolbar, { controller: controller, availableViews: availableViews, addButton: addButton }),
+        React.createElement(SchedulerViews, { liquidHeight: !autoHeight && height !== undefined, height: autoHeight ? 'auto' : contentHeight, initialView: availableViews[0], navLinkDayClick: navLinkDayClick, navLinkWeekClick: navLinkWeekClick, borderless: true, controller: controller, plugins: [...plugins, ...userPlugins], ...restOptions })));
+}
+
+export { ResourceTimeGrid as default };

package/esm/monarch/ResourceTimeline.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import { CalendarOptions } from '@fullcalendar/core';
+
+interface ResourceTimelineProps extends Omit<CalendarOptions, 'class'> {
+    availableViews?: string[];
+    addButton?: {
+        isPrimary?: boolean;
+        text?: string;
+        hint?: string;
+        click?: (ev: MouseEvent) => void;
+    };
+}
+declare function ResourceTimeline({ availableViews, addButton, className, height, contentHeight, direction, plugins: userPlugins, ...restOptions }: ResourceTimelineProps): React.JSX.Element;
+
+export { ResourceTimelineProps, ResourceTimeline as default };

package/esm/monarch/ResourceTimeline.js

@@ -0,0 +1,43 @@
+import React from 'react';
+import { useCalendarController } from '@fullcalendar/react';
+import adaptivePlugin from '@fullcalendar/adaptive';
+import resourceTimelinePlugin from '@fullcalendar/resource-timeline';
+import interactionPlugin from '@fullcalendar/interaction';
+import EventCalendarToolbar from './EventCalendarToolbar.js';
+import SchedulerViews from './SchedulerViews.js';
+import EventCalendarContainer from './EventCalendarContainer.js';
+import '@mui/material/Box';
+import '@mui/material/Button';
+import '@mui/material/IconButton';
+import '@mui/material/Typography';
+import '@mui/material/ToggleButtonGroup';
+import '@mui/material/ToggleButton';
+import './icons.js';
+import '@fullcalendar/core';
+import '@mui/icons-material/ChevronLeft';
+import '@mui/icons-material/ChevronRight';
+import '@mui/icons-material/Close';
+import '@mui/icons-material/ExpandMore';
+import './EventCalendarViews.js';
+import '@mui/material';
+
+const plugins = [
+    adaptivePlugin,
+    interactionPlugin,
+    resourceTimelinePlugin,
+];
+const defaultAvailableViews = [
+    'resourceTimelineDay',
+    'resourceTimelineWeek',
+];
+const navLinkDayClick = 'resourceTimelineDay';
+const navLinkWeekClick = 'resourceTimelineWeek';
+function ResourceTimeline({ availableViews = defaultAvailableViews, addButton, className, height, contentHeight, direction, plugins: userPlugins = [], ...restOptions }) {
+    const controller = useCalendarController();
+    const autoHeight = height === 'auto' || contentHeight === 'auto';
+    return (React.createElement(EventCalendarContainer, { direction: direction, className: className, height: height, borderless: restOptions.borderless, borderlessX: restOptions.borderlessX, borderlessTop: restOptions.borderlessTop, borderlessBottom: restOptions.borderlessBottom },
+        React.createElement(EventCalendarToolbar, { controller: controller, availableViews: availableViews, addButton: addButton }),
+        React.createElement(SchedulerViews, { liquidHeight: !autoHeight && height !== undefined, height: autoHeight ? 'auto' : contentHeight, initialView: availableViews[0], navLinkDayClick: navLinkDayClick, navLinkWeekClick: navLinkWeekClick, borderless: true, controller: controller, plugins: [...plugins, ...userPlugins], ...restOptions })));
+}
+
+export { ResourceTimeline as default };

package/esm/monarch/SchedulerViews.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { EventCalendarViewsProps } from './EventCalendarViews.js';
+
+interface SchedulerViewsProps extends EventCalendarViewsProps {
+}
+declare function SchedulerViews({ views: userViews, ...restOptions }: SchedulerViewsProps): React.JSX.Element;
+
+export { SchedulerViewsProps, SchedulerViews as default };

package/esm/monarch/SchedulerViews.js

@@ -0,0 +1,75 @@
+import React from 'react';
+import { joinClassNames } from '@fullcalendar/core';
+import EventCalendarViews, { faintBgClass, mutedHoverPressableClass, outlineWidthFocusClass, tertiaryOutlineColorClass, strongSolidPressableClass, secondaryPressableClass, secondaryClass } from './EventCalendarViews.js';
+import { EventCalendarExpanderIcon } from './icons.js';
+import '@fullcalendar/react';
+import '@mui/material';
+import '@mui/icons-material/ChevronLeft';
+import '@mui/icons-material/ChevronRight';
+import '@mui/icons-material/Close';
+import '@mui/icons-material/ExpandMore';
+
+const resourceDayHeaderClasses = {
+    dayHeaderInnerClass: "fc-monarch-Sb2",
+    dayHeaderDividerClass: `fc-monarch-QTT fc-monarch-G56`,
+};
+function SchedulerViews({ views: userViews, ...restOptions }) {
+    return (React.createElement(EventCalendarViews
+    /* Resource Day Header
+    ------------------------------------------------------------------------------------------- */
+    , { 
+        /* Resource Day Header
+        ------------------------------------------------------------------------------------------- */
+        resourceDayHeaderAlign: "center", resourceDayHeaderClass: (data) => joinClassNames("fc-monarch-UZp", data.isMajor
+            ? "fc-monarch-I55"
+            : "fc-monarch-G56"), resourceDayHeaderInnerClass: (data) => joinClassNames("fc-monarch-aS8 fc-monarch-Hhr fc-monarch-bXY", data.isNarrow ? "fc-monarch-17F" : "fc-monarch-gEy"), 
+        /* Resource Data Grid
+        ------------------------------------------------------------------------------------------- */
+        resourceColumnHeaderClass: "fc-monarch-UZp fc-monarch-G56 fc-monarch-a65", resourceColumnHeaderInnerClass: "fc-monarch-aS8 fc-monarch-gEy", resourceColumnResizerClass: "fc-monarch-YA2 fc-monarch-8ZZ fc-monarch-Ahl fc-monarch-W3O", resourceGroupHeaderClass: `fc-monarch-UZp fc-monarch-G56 ${faintBgClass}`, resourceGroupHeaderInnerClass: "fc-monarch-aS8 fc-monarch-gEy", resourceCellClass: "fc-monarch-UZp fc-monarch-G56", resourceCellInnerClass: "fc-monarch-aS8 fc-monarch-gEy", resourceIndentClass: "fc-monarch-fpO fc-monarch-aCj fc-monarch-a65", resourceExpanderClass: `fc-monarch-ytQ fc-monarch-xbC fc-monarch-IdG ${mutedHoverPressableClass} ${outlineWidthFocusClass} ${tertiaryOutlineColorClass}`, resourceExpanderContent: (data) => (React.createElement(EventCalendarExpanderIcon, { isExpanded: data.isExpanded })), resourceHeaderRowClass: "fc-monarch-UZp fc-monarch-G56", resourceRowClass: "fc-monarch-UZp fc-monarch-G56", resourceColumnDividerClass: "fc-monarch-EWl fc-monarch-I55", 
+        /* Timeline Lane
+        ------------------------------------------------------------------------------------------- */
+        resourceGroupLaneClass: `fc-monarch-UZp fc-monarch-G56 ${faintBgClass}`, resourceLaneClass: "fc-monarch-UZp fc-monarch-G56", resourceLaneBottomClass: (data) => joinClassNames(data.options.eventOverlap && "fc-monarch-433"), timelineBottomClass: "fc-monarch-433", 
+        /* View-Specific Options
+        ------------------------------------------------------------------------------------------- */
+        views: {
+            ...userViews,
+            resourceTimeGrid: {
+                ...resourceDayHeaderClasses,
+                ...userViews?.resourceTimeGrid,
+            },
+            resourceDayGrid: {
+                ...resourceDayHeaderClasses,
+                ...userViews?.resourceDayGrid,
+            },
+            timeline: {
+                /* Timeline > Row Event
+                --------------------------------------------------------------------------------------- */
+                rowEventClass: (data) => joinClassNames(data.isEnd && "fc-monarch-bpq"),
+                rowEventInnerClass: (data) => data.options.eventOverlap ? "fc-monarch-ztx" : "fc-monarch-KyB",
+                /* Timeline > More-Link
+                --------------------------------------------------------------------------------------- */
+                rowMoreLinkClass: `fc-monarch-bpq fc-monarch-mwm fc-monarch-dpa fc-monarch-UZp fc-monarch-lqW fc-monarch-ePV ${strongSolidPressableClass} fc-monarch-82y`,
+                rowMoreLinkInnerClass: "fc-monarch-xbC fc-monarch-17F",
+                /* Timeline > Slot Header
+                --------------------------------------------------------------------------------------- */
+                slotHeaderSticky: "0.5rem",
+                slotHeaderAlign: (data) => (data.level || data.isTime) ? "start" : "center",
+                slotHeaderClass: (data) => joinClassNames("fc-monarch-UZp", data.level
+                    ? "fc-monarch-lqW fc-monarch-mMs"
+                    : joinClassNames("fc-monarch-G56", data.isTime
+                        ? "fc-monarch-433 fc-monarch-Knn fc-monarch-RhI"
+                        : "fc-monarch-a65")),
+                slotHeaderInnerClass: (data) => joinClassNames("fc-monarch-gEy", data.level
+                    ? joinClassNames("fc-monarch-kOE fc-monarch-ybQ fc-monarch-ztx fc-monarch-IdG", data.hasNavLink
+                        ? secondaryPressableClass
+                        : secondaryClass)
+                    : joinClassNames("fc-monarch-ybQ", data.isTime
+                        ? joinClassNames("fc-monarch-tg1 fc-monarch-vPs fc-monarch-WvE", data.isFirst && "fc-monarch-C9h")
+                        : "fc-monarch-KyB", data.hasNavLink && "fc-monarch-jaW")),
+                slotHeaderDividerClass: `fc-monarch-QTT fc-monarch-G56`,
+                ...userViews?.timeline,
+            },
+        }, ...restOptions }));
+}
+
+export { SchedulerViews as default };

package/esm/monarch/icons.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+
+declare function EventCalendarPrevIcon(): React.JSX.Element;
+declare function EventCalendarNextIcon(): React.JSX.Element;
+declare function EventCalendarCloseIcon(): React.JSX.Element;
+interface EventCalendarExpanderIconProps {
+    isExpanded: boolean;
+}
+declare function EventCalendarExpanderIcon({ isExpanded }: EventCalendarExpanderIconProps): React.JSX.Element;
+
+export { EventCalendarCloseIcon, EventCalendarExpanderIcon, EventCalendarExpanderIconProps, EventCalendarNextIcon, EventCalendarPrevIcon };

package/esm/monarch/icons.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import { joinClassNames } from '@fullcalendar/core';
+import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
+import ChevronRightIcon from '@mui/icons-material/ChevronRight';
+import CloseIcon from '@mui/icons-material/Close';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+
+const pressableIconClass = "fc-monarch-5Kh fc-monarch-HHp fc-monarch-La2";
+function EventCalendarPrevIcon() {
+    return React.createElement(ChevronLeftIcon, { className: "fc-monarch-AAt" });
+}
+function EventCalendarNextIcon() {
+    return React.createElement(ChevronRightIcon, { className: "fc-monarch-AAt" });
+}
+function EventCalendarCloseIcon() {
+    return (React.createElement(CloseIcon, { sx: { fontSize: 18, margin: "1px" }, className: pressableIconClass }));
+}
+function EventCalendarExpanderIcon({ isExpanded }) {
+    return (React.createElement(ExpandMoreIcon, { sx: { fontSize: 18, margin: "1px" }, className: joinClassNames(pressableIconClass, !isExpanded && "fc-monarch-doO fc-monarch-Bzb") }));
+}
+
+export { EventCalendarCloseIcon, EventCalendarExpanderIcon, EventCalendarNextIcon, EventCalendarPrevIcon };

package/esm/pulse/EventCalendar.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import { CalendarOptions } from '@fullcalendar/core';
+
+interface EventCalendarProps extends Omit<CalendarOptions, 'class'> {
+    availableViews?: string[];
+    addButton?: {
+        isPrimary?: boolean;
+        text?: string;
+        hint?: string;
+        click?: (ev: MouseEvent) => void;
+    };
+}
+declare function EventCalendar({ availableViews, addButton, className, height, contentHeight, direction, plugins: userPlugins, ...restOptions }: EventCalendarProps): React.JSX.Element;
+
+export { EventCalendarProps, EventCalendar as default };

package/esm/pulse/EventCalendar.js

@@ -0,0 +1,49 @@
+import React from 'react';
+import { useCalendarController } from '@fullcalendar/react';
+import dayGridPlugin from '@fullcalendar/daygrid';
+import timeGridPlugin from '@fullcalendar/timegrid';
+import listPlugin from '@fullcalendar/list';
+import interactionPlugin from '@fullcalendar/interaction';
+import multiMonthPlugin from '@fullcalendar/multimonth';
+import EventCalendarToolbar from './EventCalendarToolbar.js';
+import EventCalendarViews from './EventCalendarViews.js';
+import EventCalendarContainer from './EventCalendarContainer.js';
+import '@mui/material/Box';
+import '@mui/material/Button';
+import '@mui/material/IconButton';
+import '@mui/material/Typography';
+import '@mui/material/ToggleButtonGroup';
+import '@mui/material/ToggleButton';
+import './icons.js';
+import '@fullcalendar/core';
+import '@mui/icons-material/ChevronLeft';
+import '@mui/icons-material/ChevronRight';
+import '@mui/icons-material/Close';
+import '@mui/icons-material/ExpandMore';
+import '@mui/material';
+
+const plugins = [
+    dayGridPlugin,
+    timeGridPlugin,
+    listPlugin,
+    interactionPlugin,
+    multiMonthPlugin,
+];
+const defaultAvailableViews = [
+    'dayGridMonth',
+    'timeGridWeek',
+    'timeGridDay',
+    'listWeek',
+    'multiMonthYear',
+];
+const navLinkDayClick = 'timeGridDay';
+const navLinkWeekClick = 'timeGridWeek';
+function EventCalendar({ availableViews = defaultAvailableViews, addButton, className, height, contentHeight, direction, plugins: userPlugins = [], ...restOptions }) {
+    const controller = useCalendarController();
+    const autoHeight = height === 'auto' || contentHeight === 'auto';
+    return (React.createElement(EventCalendarContainer, { direction: direction, className: className, height: height },
+        React.createElement(EventCalendarToolbar, { controller: controller, availableViews: availableViews, addButton: addButton, borderlessX: restOptions.borderlessX ?? restOptions.borderless }),
+        React.createElement(EventCalendarViews, { liquidHeight: !autoHeight && height !== undefined, height: autoHeight ? 'auto' : contentHeight, initialView: availableViews[0], navLinkDayClick: navLinkDayClick, navLinkWeekClick: navLinkWeekClick, controller: controller, plugins: [...plugins, ...userPlugins], ...restOptions })));
+}
+
+export { EventCalendar as default };

package/esm/pulse/EventCalendarContainer.d.ts

@@ -0,0 +1,11 @@
+import React, { ReactNode } from 'react';
+
+interface EventCalendarContainerProps {
+    direction: 'ltr' | 'rtl' | undefined;
+    className: string | undefined;
+    height: string | number | undefined;
+    children: ReactNode;
+}
+declare function EventCalendarContainer(props: EventCalendarContainerProps): React.JSX.Element;
+
+export { EventCalendarContainerProps, EventCalendarContainer as default };

package/esm/pulse/EventCalendarContainer.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import Box from '@mui/material/Box';
+
+function EventCalendarContainer(props) {
+    return (React.createElement(Box, { dir: props.direction === 'rtl' ? 'rtl' : undefined, className: props.className, sx: {
+            display: 'flex',
+            flexDirection: 'column',
+            gap: 3,
+            height: props.height,
+        } }, props.children));
+}
+
+export { EventCalendarContainer as default };

package/esm/pulse/EventCalendarToolbar.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { CalendarController } from '@fullcalendar/core';
+
+interface EventCalendarToolbarProps {
+    controller: CalendarController;
+    availableViews: string[];
+    addButton?: {
+        isPrimary?: boolean;
+        text?: string;
+        hint?: string;
+        click?: (ev: MouseEvent) => void;
+    };
+    borderlessX?: boolean;
+}
+declare function EventCalendarToolbar({ controller, availableViews, addButton, borderlessX, }: EventCalendarToolbarProps): React.JSX.Element;
+
+export { EventCalendarToolbarProps, EventCalendarToolbar as default };

package/esm/pulse/EventCalendarToolbar.js

@@ -0,0 +1,48 @@
+import React from 'react';
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import IconButton from '@mui/material/IconButton';
+import Typography from '@mui/material/Typography';
+import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
+import ToggleButton from '@mui/material/ToggleButton';
+import { EventCalendarPrevIcon, EventCalendarNextIcon } from './icons.js';
+import '@fullcalendar/core';
+import '@mui/icons-material/ChevronLeft';
+import '@mui/icons-material/ChevronRight';
+import '@mui/icons-material/Close';
+import '@mui/icons-material/ExpandMore';
+
+function EventCalendarToolbar({ controller, availableViews, addButton, borderlessX, }) {
+    const buttons = controller.getButtonState();
+    return (React.createElement(Box, { sx: {
+            display: 'flex',
+            flexWrap: 'wrap',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            gap: 1,
+            px: borderlessX ? 1.5 : undefined,
+        } },
+        React.createElement(Box, { sx: {
+                display: 'flex',
+                flexShrink: 0,
+                alignItems: 'center',
+                gap: 1,
+            } },
+            addButton && (React.createElement(Button, { onClick: addButton.click, "aria-label": addButton.hint, variant: addButton.isPrimary === false ? 'outlined' : 'contained' }, addButton.text)),
+            React.createElement(Button, { onClick: () => controller.today(), "aria-label": buttons.today.hint, variant: "outlined" }, buttons.today.text),
+            React.createElement(Box, { sx: {
+                    display: 'flex',
+                    alignItems: 'center',
+                } },
+                React.createElement(IconButton, { onClick: () => controller.prev(), disabled: buttons.prev.isDisabled, "aria-label": buttons.prev.hint },
+                    React.createElement(EventCalendarPrevIcon, null)),
+                React.createElement(IconButton, { onClick: () => controller.next(), disabled: buttons.next.isDisabled, "aria-label": buttons.next.hint },
+                    React.createElement(EventCalendarNextIcon, null))),
+            React.createElement(Typography, { variant: "h5" }, controller.view?.title)),
+        React.createElement(ToggleButtonGroup, { size: "small", exclusive: true, value: controller.view?.type, onChange: (_ev, val) => {
+                controller.changeView(val);
+            } }, availableViews.map((availableView) => (React.createElement(ToggleButton, { key: availableView, value: availableView, "aria-label": buttons[availableView]?.hint, color: "primary" },
+            React.createElement(Box, { sx: { px: 1 } }, buttons[availableView]?.text)))))));
+}
+
+export { EventCalendarToolbar as default };

package/esm/pulse/EventCalendarViews.d.ts

@@ -0,0 +1,29 @@
+import React from 'react';
+import { DayCellData, CalendarOptions } from '@fullcalendar/core';
+
+declare const outlineWidthClass = "outline-3";
+declare const outlineWidthFocusClass = "focus-visible:outline-3";
+declare const outlineWidthGroupFocusClass = "group-focus-visible:outline-3";
+declare const outlineOffsetClass = "outline-offset-1";
+declare const outlineInsetClass = "-outline-offset-3";
+declare const tertiaryOutlineColorClass = "outline-[rgba(var(--mui-palette-secondary-mainChannel)_/_0.5)]";
+declare const strongSolidPressableClass: string;
+declare const mutedBgClass = "bg-[rgba(var(--mui-palette-text-primaryChannel)_/_0.08)]";
+declare const mutedHoverPressableClass: string;
+declare const faintBgClass = "bg-[rgba(var(--mui-palette-text-primaryChannel)_/_0.04)]";
+declare const faintHoverPressableClass: string;
+declare const faintSolidBgClass = "[background:linear-gradient(rgba(var(--mui-palette-text-primaryChannel)_/_0.04),rgba(var(--mui-palette-text-primaryChannel)_/_0.04))_var(--mui-palette-background-paper)]";
+declare const tertiaryClass = "bg-(--mui-palette-secondary-main) text-(--mui-palette-secondary-contrastText)";
+declare const tertiaryPressableClass: string;
+declare const tertiaryPressableGroupClass: string;
+declare const rowPointerResizerClass: string;
+declare const rowTouchResizerClass: string;
+declare const tallDayCellBottomClass = "min-h-3";
+declare const getShortDayCellBottomClass: (data: DayCellData) => string;
+declare const dayRowCommonClasses: CalendarOptions;
+interface EventCalendarViewsProps extends CalendarOptions {
+    liquidHeight?: boolean;
+}
+declare function EventCalendarViews({ className, liquidHeight, height, views: userViews, ...restOptions }: EventCalendarViewsProps): React.JSX.Element;
+
+export { EventCalendarViewsProps, dayRowCommonClasses, EventCalendarViews as default, faintBgClass, faintHoverPressableClass, faintSolidBgClass, getShortDayCellBottomClass, mutedBgClass, mutedHoverPressableClass, outlineInsetClass, outlineOffsetClass, outlineWidthClass, outlineWidthFocusClass, outlineWidthGroupFocusClass, rowPointerResizerClass, rowTouchResizerClass, strongSolidPressableClass, tallDayCellBottomClass, tertiaryClass, tertiaryOutlineColorClass, tertiaryPressableClass, tertiaryPressableGroupClass };