@fullcalendar/core 6.1.15 → 7.0.0-beta.0

package/index.js

@@ -1,6 +1,6 @@
-import { m as mergeProps, g as guid, i as isArraysEqual, T as Theme, a as mapHash, B as BaseComponent, V as ViewContextType, C as ContentContainer, b as buildViewClassNames, c as greatestDurationDenominator, d as createDuration, e as BASE_OPTION_DEFAULTS, f as arrayToHash, h as filterHash, j as buildEventSourceRefiners, p as parseEventSource, k as formatWithOrdinals, u as unpromisify, l as buildRangeApiWithTimeZone, n as identity, r as requestJson, s as subtractDurations, o as intersectRanges, q as startOfDay, t as addDays, v as hashValuesToArray, w as buildEventApis, D as DelayedRunner, x as createFormatter, y as diffWholeDays, z as memoize, A as memoizeObjArg, E as isPropsEqual, F as Emitter, G as getInitialDate, H as rangeContainsMarker, I as createEmptyEventStore, J as reduceCurrentDate, K as reduceEventStore, L as rezoneEventStoreDates, M as mergeRawOptions, N as BASE_OPTION_REFINERS, O as CALENDAR_LISTENER_REFINERS, P as CALENDAR_OPTION_REFINERS, Q as COMPLEX_OPTION_COMPARATORS, R as VIEW_OPTION_REFINERS, S as DateEnv, U as DateProfileGenerator, W as createEventUi, X as parseBusinessHours, Y as setRef, Z as Interaction, _ as getElSeg, $ as elementClosest, a0 as EventImpl, a1 as listenBySelector, a2 as listenToHoverBySelector, a3 as PureComponent, a4 as buildViewContext, a5 as getUniqueDomId, a6 as parseInteractionSettings, a7 as interactionSettingsStore, a8 as getNow, a9 as CalendarImpl, aa as flushSync, ab as CalendarRoot, ac as RenderId, ad as ensureElHasStyles, ae as applyStyleProp, af as sliceEventStore } from './internal-common.js';
-export { ag as JsonRequestError } from './internal-common.js';
-import { createElement, createRef, Fragment, render } from 'preact';
+import { m as mergeProps, g as guid, i as isArraysEqual, T as Theme, a as mapHash, B as BaseComponent, V as ViewContextType, C as ContentContainer, b as buildViewClassNames, c as greatestDurationDenominator, d as createDuration, e as BASE_OPTION_DEFAULTS, f as arrayToHash, h as filterHash, j as buildEventSourceRefiners, p as parseEventSource, k as formatWithOrdinals, u as unpromisify, l as buildRangeApiWithTimeZone, n as identity, r as requestJson, s as subtractDurations, o as intersectRanges, q as startOfDay, t as addDays, v as hashValuesToArray, w as buildEventApis, D as DelayedRunner, x as createFormatter, y as diffWholeDays, z as memoize, A as memoizeObjArg, E as isPropsEqual, F as Emitter, G as getInitialDate, H as rangeContainsMarker, I as createEmptyEventStore, J as reduceCurrentDate, K as reduceEventStore, L as rezoneEventStoreDates, M as mergeRawOptions, N as BASE_OPTION_REFINERS, O as CALENDAR_LISTENER_REFINERS, P as CALENDAR_OPTION_REFINERS, Q as COMPLEX_OPTION_COMPARATORS, R as VIEW_OPTION_REFINERS, S as DateEnv, U as DateProfileGenerator, W as createEventUi, X as parseBusinessHours, Y as Interaction, Z as getElSeg, _ as elementClosest, $ as EventImpl, a0 as listenBySelector, a1 as listenToHoverBySelector, a2 as PureComponent, a3 as buildViewContext, a4 as parseInteractionSettings, a5 as interactionSettingsStore, a6 as getNow, a7 as getIsHeightAuto, a8 as CalendarImpl, a9 as flushSync, aa as CalendarRoot, ab as RenderId, ac as ensureElHasStyles, ad as applyStyleProp, ae as sliceEventStore } from './internal-common.js';
+export { af as JsonRequestError } from './internal-common.js';
+import { createElement, Component, Fragment, render } from 'preact';
 import 'preact/compat';
 
 const globalLocales = [];
@@ -133,7 +133,7 @@ function createPlugin(input) {
         initialView: input.initialView || '',
         elementDraggingImpl: input.elementDraggingImpl,
         optionChangeHandlers: input.optionChangeHandlers || {},
-        scrollGridImpl: input.scrollGridImpl || null,
+        scrollerSyncerClass: input.scrollerSyncerClass || null,
         listenerRefiners: input.listenerRefiners || {},
         optionRefiners: input.optionRefiners || {},
         propSetHandlers: input.propSetHandlers || {},
@@ -171,7 +171,7 @@ function buildPluginHooks(pluginDefs, globalDefs) {
         initialView: '',
         elementDraggingImpl: null,
         optionChangeHandlers: {},
-        scrollGridImpl: null,
+        scrollerSyncerClass: null,
         listenerRefiners: {},
         optionRefiners: {},
         propSetHandlers: {},
@@ -241,7 +241,7 @@ function combineHooks(hooks0, hooks1) {
         initialView: hooks0.initialView || hooks1.initialView,
         elementDraggingImpl: hooks0.elementDraggingImpl || hooks1.elementDraggingImpl,
         optionChangeHandlers: Object.assign(Object.assign({}, hooks0.optionChangeHandlers), hooks1.optionChangeHandlers),
-        scrollGridImpl: hooks1.scrollGridImpl || hooks0.scrollGridImpl,
+        scrollerSyncerClass: hooks0.scrollerSyncerClass || hooks1.scrollerSyncerClass,
         listenerRefiners: Object.assign(Object.assign({}, hooks0.listenerRefiners), hooks1.listenerRefiners),
         optionRefiners: Object.assign(Object.assign({}, hooks0.optionRefiners), hooks1.optionRefiners),
         propSetHandlers: Object.assign(Object.assign({}, hooks0.propSetHandlers), hooks1.propSetHandlers),
@@ -261,7 +261,6 @@ class StandardTheme extends Theme {
 }
 StandardTheme.prototype.classes = {
     root: 'fc-theme-standard',
-    tableCellShaded: 'fc-cell-shaded',
     buttonGroup: 'fc-button-group',
     button: 'fc-button fc-button-primary',
     buttonActive: 'fc-button-active',
@@ -1624,7 +1623,9 @@ function warnUnknownOptions(options, viewName) {
 class ToolbarSection extends BaseComponent {
     render() {
         let children = this.props.widgetGroups.map((widgetGroup) => this.renderWidgetGroup(widgetGroup));
-        return createElement('div', { className: 'fc-toolbar-chunk' }, ...children);
+        return createElement('div', {
+            className: 'fc-toolbar-chunk fc-toolbar-' + this.props.name
+        }, ...children);
     }
     renderWidgetGroup(widgetGroup) {
         let { props } = this;
@@ -1635,7 +1636,7 @@ class ToolbarSection extends BaseComponent {
             let { buttonName, buttonClick, buttonText, buttonIcon, buttonHint } = widget;
             if (buttonName === 'title') {
                 isOnlyButtons = false;
-                children.push(createElement("h2", { className: "fc-toolbar-title", id: props.titleId }, props.title));
+                children.push(createElement("h2", { className: "fc-toolbar-title" }, props.title));
             }
             else {
                 let isPressed = buttonName === props.activeButton;
@@ -1691,65 +1692,7 @@ class Toolbar extends BaseComponent {
     }
     renderSection(key, widgetGroups) {
         let { props } = this;
-        return (createElement(ToolbarSection, { key: key, widgetGroups: widgetGroups, title: props.title, navUnit: props.navUnit, activeButton: props.activeButton, isTodayEnabled: props.isTodayEnabled, isPrevEnabled: props.isPrevEnabled, isNextEnabled: props.isNextEnabled, titleId: props.titleId }));
-    }
-}
-
-class ViewHarness extends BaseComponent {
-    constructor() {
-        super(...arguments);
-        this.state = {
-            availableWidth: null,
-        };
-        this.handleEl = (el) => {
-            this.el = el;
-            setRef(this.props.elRef, el);
-            this.updateAvailableWidth();
-        };
-        this.handleResize = () => {
-            this.updateAvailableWidth();
-        };
-    }
-    render() {
-        let { props, state } = this;
-        let { aspectRatio } = props;
-        let classNames = [
-            'fc-view-harness',
-            (aspectRatio || props.liquid || props.height)
-                ? 'fc-view-harness-active' // harness controls the height
-                : 'fc-view-harness-passive', // let the view do the height
-        ];
-        let height = '';
-        let paddingBottom = '';
-        if (aspectRatio) {
-            if (state.availableWidth !== null) {
-                height = state.availableWidth / aspectRatio;
-            }
-            else {
-                // while waiting to know availableWidth, we can't set height to *zero*
-                // because will cause lots of unnecessary scrollbars within scrollgrid.
-                // BETTER: don't start rendering ANYTHING yet until we know container width
-                // NOTE: why not always use paddingBottom? Causes height oscillation (issue 5606)
-                paddingBottom = `${(1 / aspectRatio) * 100}%`;
-            }
-        }
-        else {
-            height = props.height || '';
-        }
-        return (createElement("div", { "aria-labelledby": props.labeledById, ref: this.handleEl, className: classNames.join(' '), style: { height, paddingBottom } }, props.children));
-    }
-    componentDidMount() {
-        this.context.addResizeHandler(this.handleResize);
-    }
-    componentWillUnmount() {
-        this.context.removeResizeHandler(this.handleResize);
-    }
-    updateAvailableWidth() {
-        if (this.el && // needed. but why?
-            this.props.aspectRatio // aspectRatio is the only height setting that needs availableWidth
-        ) {
-            this.setState({ availableWidth: this.el.offsetWidth });
-        }
+        return (createElement(ToolbarSection, { key: key, name: key, widgetGroups: widgetGroups, title: props.title, navUnit: props.navUnit, activeButton: props.activeButton, isTodayEnabled: props.isTodayEnabled, isPrevEnabled: props.isPrevEnabled, isNextEnabled: props.isNextEnabled }));
     }
 }
 
@@ -1831,19 +1774,34 @@ class EventHovering extends Interaction {
     }
 }
 
+class ViewHarness extends Component {
+    render() {
+        const { props } = this;
+        return (createElement("div", { className: [
+                'fc-view-harness',
+                props.height != null
+                    ? 'fc-view-harness-fixedheight'
+                    : props.heightLiquid
+                        ? 'fc-view-harness-liquid'
+                        : props.aspectRatio != null
+                            ? 'fc-view-harness-aspectratio'
+                            : ''
+            ].join(' '), style: {
+                height: props.height,
+                paddingBottom: props.aspectRatio != null
+                    ? `${(1 / props.aspectRatio) * 100}%`
+                    : undefined
+            } }, props.children));
+    }
+}
+
 class CalendarContent extends PureComponent {
     constructor() {
         super(...arguments);
         this.buildViewContext = memoize(buildViewContext);
         this.buildViewPropTransformers = memoize(buildViewPropTransformers);
         this.buildToolbarProps = memoize(buildToolbarProps);
-        this.headerRef = createRef();
-        this.footerRef = createRef();
         this.interactionsStore = {};
-        // eslint-disable-next-line
-        this.state = {
-            viewLabelId: getUniqueDomId(),
-        };
         // Component Registration
         // -----------------------------------------------------------------------------------------------------------------
         this.registerInteractiveComponent = (component, settingsInput) => {
@@ -1867,20 +1825,6 @@ class CalendarContent extends PureComponent {
             }
             delete interactionSettingsStore[component.uid];
         };
-        // Resizing
-        // -----------------------------------------------------------------------------------------------------------------
-        this.resizeRunner = new DelayedRunner(() => {
-            this.props.emitter.trigger('_resize', true); // should window resizes be considered "forced" ?
-            this.props.emitter.trigger('windowResize', { view: this.props.viewApi });
-        });
-        this.handleWindowResize = (ev) => {
-            let { options } = this.props;
-            if (options.handleWindowResize &&
-                ev.target === window // avoid jqui events
-            ) {
-                this.resizeRunner.request(options.windowResizeDelay);
-            }
-        };
     }
     /*
     renders INSIDE of an outer div
@@ -1890,14 +1834,12 @@ class CalendarContent extends PureComponent {
         let { toolbarConfig, options } = props;
         let toolbarProps = this.buildToolbarProps(props.viewSpec, props.dateProfile, props.dateProfileGenerator, props.currentDate, getNow(props.options.now, props.dateEnv), // TODO: use NowTimer????
         props.viewTitle);
-        let viewVGrow = false;
-        let viewHeight = '';
+        let viewHeight;
+        let viewHeightLiquid = false;
         let viewAspectRatio;
-        if (props.isHeightAuto || props.forPrint) {
-            viewHeight = '';
-        }
+        if (props.forPrint || getIsHeightAuto(options)) ;
         else if (options.height != null) {
-            viewVGrow = true;
+            viewHeightLiquid = true;
         }
         else if (options.contentHeight != null) {
             viewHeight = options.contentHeight;
@@ -1906,21 +1848,17 @@ class CalendarContent extends PureComponent {
             viewAspectRatio = Math.max(options.aspectRatio, 0.5); // prevent from getting too tall
         }
         let viewContext = this.buildViewContext(props.viewSpec, props.viewApi, props.options, props.dateProfileGenerator, props.dateEnv, props.theme, props.pluginHooks, props.dispatch, props.getCurrentData, props.emitter, props.calendarApi, this.registerInteractiveComponent, this.unregisterInteractiveComponent);
-        let viewLabelId = (toolbarConfig.header && toolbarConfig.header.hasTitle)
-            ? this.state.viewLabelId
-            : undefined;
         return (createElement(ViewContextType.Provider, { value: viewContext },
-            toolbarConfig.header && (createElement(Toolbar, Object.assign({ ref: this.headerRef, extraClassName: "fc-header-toolbar", model: toolbarConfig.header, titleId: viewLabelId }, toolbarProps))),
-            createElement(ViewHarness, { liquid: viewVGrow, height: viewHeight, aspectRatio: viewAspectRatio, labeledById: viewLabelId },
+            toolbarConfig.header && (createElement(Toolbar, Object.assign({ extraClassName: "fc-header-toolbar", model: toolbarConfig.header }, toolbarProps))),
+            createElement(ViewHarness, { height: viewHeight, heightLiquid: viewHeightLiquid, aspectRatio: viewAspectRatio },
                 this.renderView(props),
                 this.buildAppendContent()),
-            toolbarConfig.footer && (createElement(Toolbar, Object.assign({ ref: this.footerRef, extraClassName: "fc-footer-toolbar", model: toolbarConfig.footer, titleId: "" }, toolbarProps)))));
+            toolbarConfig.footer && (createElement(Toolbar, Object.assign({ extraClassName: "fc-footer-toolbar", model: toolbarConfig.footer }, toolbarProps)))));
     }
     componentDidMount() {
         let { props } = this;
         this.calendarInteractions = props.pluginHooks.calendarInteractions
             .map((CalendarInteractionClass) => new CalendarInteractionClass(props));
-        window.addEventListener('resize', this.handleWindowResize);
         let { propSetHandlers } = props.pluginHooks;
         for (let propName in propSetHandlers) {
             propSetHandlers[propName](props[propName], props);
@@ -1936,8 +1874,6 @@ class CalendarContent extends PureComponent {
         }
     }
     componentWillUnmount() {
-        window.removeEventListener('resize', this.handleWindowResize);
-        this.resizeRunner.clear();
         for (let interaction of this.calendarInteractions) {
             interaction.destroy();
         }
@@ -1960,7 +1896,6 @@ class CalendarContent extends PureComponent {
             eventSelection: props.eventSelection,
             eventDrag: props.eventDrag,
             eventResize: props.eventResize,
-            isHeightAuto: props.isHeightAuto,
             forPrint: props.forPrint,
         };
         let transformers = this.buildViewPropTransformers(pluginHooks.viewPropsTransformers);
@@ -1991,6 +1926,9 @@ function buildViewPropTransformers(theClasses) {
     return theClasses.map((TheClass) => new TheClass());
 }
 
+/*
+Vanilla JS API
+*/
 class Calendar extends CalendarImpl {
     constructor(el, optionOverrides = {}) {
         super();
@@ -2015,11 +1953,11 @@ class Calendar extends CalendarImpl {
                 this.isRendered = true;
                 let { currentData } = this;
                 flushSync(() => {
-                    render(createElement(CalendarRoot, { options: currentData.calendarOptions, theme: currentData.theme, emitter: currentData.emitter }, (classNames, height, isHeightAuto, forPrint) => {
+                    render(createElement(CalendarRoot, { options: currentData.calendarOptions, theme: currentData.theme, emitter: currentData.emitter }, (classNames, height, forPrint) => {
                         this.setClassNames(classNames);
                         this.setHeight(height);
                         return (createElement(RenderId.Provider, { value: this.customContentRenderId },
-                            createElement(CalendarContent, Object.assign({ isHeightAuto: isHeightAuto, forPrint: forPrint }, currentData))));
+                            createElement(CalendarContent, Object.assign({ forPrint: forPrint }, currentData))));
                     }), this.el);
                 });
             }
@@ -2136,6 +2074,6 @@ function sliceEvents(props, allDay) {
     return sliceEventStore(props.eventStore, props.eventUiBases, props.dateProfile.activeRange, allDay ? props.nextDayThreshold : null).fg;
 }
 
-const version = '6.1.15';
+const version = '7.0.0-beta.0';
 
 export { Calendar, createPlugin, formatDate, formatRange, globalLocales, globalPlugins, sliceEvents, version };