@fullcalendar/core 7.0.0-beta.1 → 7.0.0-beta.4

package/index.cjs

@@ -30,9 +30,9 @@ const MINIMAL_RAW_EN_LOCALE = {
     weekText: 'W',
     weekTextLong: 'Week',
     closeHint: 'Close',
-    timeHint: 'Time',
-    eventHint: 'Event',
+    eventsHint: 'Events',
     allDayText: 'all-day',
+    timedText: 'timed',
     moreLinkText: 'more',
     noEventsText: 'No events to display',
 };
@@ -47,7 +47,7 @@ const RAW_EN_LOCALE = Object.assign(Object.assign({}, MINIMAL_RAW_EN_LOCALE), {
                 ? 'Today'
                 : `This ${buttonText}`;
         },
-    }, viewHint: '$0 view', navLinkHint: 'Go to $0', moreLinkHint(eventCnt) {
+    }, viewHint: '$0 view', viewChangeHint: 'Change view', navLinkHint: 'Go to $0', moreLinkHint(eventCnt) {
         return `Show ${eventCnt} more event${eventCnt === 1 ? '' : 's'}`;
     } });
 function organizeRawLocales(explicitRawLocales) {
@@ -359,7 +359,7 @@ function parseViewConfig(input) {
     };
 }
 function createViewHookComponent(options) {
-    return (viewProps) => (preact.createElement(internalCommon.ViewContextType.Consumer, null, (context) => (preact.createElement(internalCommon.ContentContainer, { elTag: "div", elClasses: internalCommon.buildViewClassNames(context.viewSpec), renderProps: Object.assign(Object.assign({}, viewProps), { nextDayThreshold: context.options.nextDayThreshold }), generatorName: undefined, customGenerator: options.content, classNameGenerator: options.classNames, didMount: options.didMount, willUnmount: options.willUnmount }))));
+    return (viewProps) => (preact.createElement(internalCommon.ViewContextType.Consumer, null, (context) => (preact.createElement(internalCommon.ContentContainer, { tag: "div", className: internalCommon.buildViewClassName(context.viewSpec), renderProps: Object.assign(Object.assign({}, viewProps), { nextDayThreshold: context.options.nextDayThreshold }), generatorName: undefined, customGenerator: options.content, classNameGenerator: options.classNames, didMount: options.didMount, willUnmount: options.willUnmount }))));
 }
 
 function buildViewSpecs(defaultInputs, optionOverrides, dynamicOptionOverrides, localeDefaults) {
@@ -719,17 +719,25 @@ function parseToolbars(calendarOptions, calendarOptionOverrides, theme, viewSpec
     return { header, footer };
 }
 function parseToolbar(sectionStrHash, calendarOptions, calendarOptionOverrides, theme, viewSpecs, calendarApi) {
-    let sectionWidgets = {};
+    let isRtl = calendarOptions.direction === 'rtl';
     let viewsWithButtons = [];
     let hasTitle = false;
-    for (let sectionName in sectionStrHash) {
-        let sectionStr = sectionStrHash[sectionName];
+    function processSectionStr(sectionStr) {
         let sectionRes = parseSection(sectionStr, calendarOptions, calendarOptionOverrides, theme, viewSpecs, calendarApi);
-        sectionWidgets[sectionName] = sectionRes.widgets;
         viewsWithButtons.push(...sectionRes.viewsWithButtons);
         hasTitle = hasTitle || sectionRes.hasTitle;
+        return sectionRes.widgets;
     }
-    return { sectionWidgets, viewsWithButtons, hasTitle };
+    const sectionWidgets = {
+        start: processSectionStr(sectionStrHash[isRtl ? 'right' : 'left'] || sectionStrHash.start || ''),
+        center: processSectionStr(sectionStrHash.center || ''),
+        end: processSectionStr(sectionStrHash[isRtl ? 'left' : 'right'] || sectionStrHash.end || ''),
+    };
+    return {
+        sectionWidgets,
+        viewsWithButtons,
+        hasTitle,
+    };
 }
 /*
 BAD: querying icons and text here. should be done at render time
@@ -757,6 +765,7 @@ theme, viewSpecs, calendarApi) {
         let buttonIcon; // only one of these will be set
         let buttonText; // "
         let buttonHint;
+        let isView = false;
         // ^ for the title="" attribute, for accessibility
         if ((customButtonProps = calendarCustomButtons[buttonName])) {
             buttonClick = (ev) => {
@@ -770,6 +779,7 @@ theme, viewSpecs, calendarApi) {
             buttonHint = customButtonProps.hint || customButtonProps.text;
         }
         else if ((viewSpec = viewSpecs[buttonName])) {
+            isView = true;
             viewsWithButtons.push(buttonName);
             buttonClick = () => {
                 calendarApi.changeView(buttonName);
@@ -807,7 +817,7 @@ theme, viewSpecs, calendarApi) {
                 ], calendarButtonText[buttonName]);
             }
         }
-        return { buttonName, buttonClick, buttonIcon, buttonText, buttonHint };
+        return { buttonName, buttonClick, buttonIcon, buttonText, buttonHint, isView };
     })));
     return { widgets, viewsWithButtons, hasTitle };
 }
@@ -1627,35 +1637,45 @@ class ToolbarSection extends internalCommon.BaseComponent {
     render() {
         let children = this.props.widgetGroups.map((widgetGroup) => this.renderWidgetGroup(widgetGroup));
         return preact.createElement('div', {
-            className: 'fc-toolbar-chunk fc-toolbar-' + this.props.name
+            className: 'fc-toolbar-section fc-toolbar-' + this.props.name
         }, ...children);
     }
     renderWidgetGroup(widgetGroup) {
-        let { props } = this;
-        let { theme } = this.context;
+        let { props, context } = this;
+        let { options, theme } = context;
         let children = [];
         let isOnlyButtons = true;
+        let isOnlyView = true;
+        for (const widget of widgetGroup) {
+            const { buttonName, isView } = widget;
+            if (buttonName === 'title') {
+                isOnlyButtons = false;
+            }
+            else if (!isView) {
+                isOnlyView = false;
+            }
+        }
         for (let widget of widgetGroup) {
             let { buttonName, buttonClick, buttonText, buttonIcon, buttonHint } = widget;
             if (buttonName === 'title') {
-                isOnlyButtons = false;
-                children.push(preact.createElement("h2", { className: "fc-toolbar-title" }, props.title));
+                children.push(preact.createElement("div", { role: 'heading', "aria-level": options.headingLevel, id: props.titleId, className: 'fc-toolbar-title' }, props.title));
             }
             else {
                 let isPressed = buttonName === props.activeButton;
                 let isDisabled = (!props.isTodayEnabled && buttonName === 'today') ||
                     (!props.isPrevEnabled && buttonName === 'prev') ||
                     (!props.isNextEnabled && buttonName === 'next');
-                let buttonClasses = [`fc-${buttonName}-button`, theme.getClass('button')];
-                if (isPressed) {
-                    buttonClasses.push(theme.getClass('buttonActive'));
-                }
-                children.push(preact.createElement("button", { type: "button", title: typeof buttonHint === 'function' ? buttonHint(props.navUnit) : buttonHint, disabled: isDisabled, "aria-pressed": isPressed, className: buttonClasses.join(' '), onClick: buttonClick }, buttonText || (buttonIcon ? preact.createElement("span", { className: buttonIcon, role: "img" }) : '')));
+                children.push(preact.createElement("button", Object.assign({ type: "button", disabled: isDisabled }, ((isOnlyButtons && isOnlyView)
+                    ? { 'role': 'tab', 'aria-selected': isPressed }
+                    : { 'aria-pressed': isPressed }), { "aria-label": typeof buttonHint === 'function' ? buttonHint(props.navUnit) : buttonHint, className: internalCommon.joinClassNames(`fc-${buttonName}-button`, theme.getClassName('button'), isPressed && theme.getClassName('buttonActive')), onClick: buttonClick }), buttonText || (buttonIcon ? preact.createElement("span", { className: buttonIcon, "aria-hidden": true }) : '')));
             }
         }
         if (children.length > 1) {
-            let groupClassName = (isOnlyButtons && theme.getClass('buttonGroup')) || '';
-            return preact.createElement('div', { className: groupClassName }, ...children);
+            return preact.createElement('div', {
+                role: (isOnlyButtons && isOnlyView) ? 'tablist' : undefined,
+                'aria-label': (isOnlyButtons && isOnlyView) ? options.viewChangeHint : undefined,
+                className: isOnlyButtons ? theme.getClassName('buttonGroup') : undefined,
+            }, ...children);
         }
         return children[0];
     }
@@ -1663,39 +1683,16 @@ class ToolbarSection extends internalCommon.BaseComponent {
 
 class Toolbar extends internalCommon.BaseComponent {
     render() {
-        let { model, extraClassName } = this.props;
-        let forceLtr = false;
-        let startContent;
-        let endContent;
-        let sectionWidgets = model.sectionWidgets;
-        let centerContent = sectionWidgets.center;
-        if (sectionWidgets.left) {
-            forceLtr = true;
-            startContent = sectionWidgets.left;
-        }
-        else {
-            startContent = sectionWidgets.start;
-        }
-        if (sectionWidgets.right) {
-            forceLtr = true;
-            endContent = sectionWidgets.right;
-        }
-        else {
-            endContent = sectionWidgets.end;
-        }
-        let classNames = [
-            extraClassName || '',
-            'fc-toolbar',
-            forceLtr ? 'fc-toolbar-ltr' : '',
-        ];
-        return (preact.createElement("div", { className: classNames.join(' ') },
-            this.renderSection('start', startContent || []),
-            this.renderSection('center', centerContent || []),
-            this.renderSection('end', endContent || [])));
+        let { model, className } = this.props;
+        let { sectionWidgets } = model;
+        return (preact.createElement("div", { className: internalCommon.joinClassNames(className, 'fc-toolbar') },
+            this.renderSection('start', sectionWidgets.start),
+            this.renderSection('center', sectionWidgets.center),
+            this.renderSection('end', sectionWidgets.end)));
     }
     renderSection(key, widgetGroups) {
         let { props } = this;
-        return (preact.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 }));
+        return (preact.createElement(ToolbarSection, { key: key, name: key, widgetGroups: widgetGroups, title: props.title, titleId: props.titleId, navUnit: props.navUnit, activeButton: props.activeButton, isTodayEnabled: props.isTodayEnabled, isPrevEnabled: props.isPrevEnabled, isNextEnabled: props.isNextEnabled }));
     }
 }
 
@@ -1711,19 +1708,12 @@ class EventClicking extends internalCommon.Interaction {
             let eventRange = internalCommon.getElEventRange(segEl);
             if (eventRange && // might be the <div> surrounding the more link
                 component.isValidSegDownEl(ev.target)) {
-                // our way to simulate a link click for elements that can't be <a> tags
-                // grab before trigger fired in case trigger trashes DOM thru rerendering
-                let hasUrlContainer = internalCommon.elementClosest(ev.target, '.fc-event-forced-url');
-                let url = hasUrlContainer ? hasUrlContainer.querySelector('a[href]').href : '';
                 context.emitter.trigger('eventClick', {
                     el: segEl,
                     event: new internalCommon.EventImpl(component.context, eventRange.def, eventRange.instance),
                     jsEvent: ev,
                     view: context.viewApi,
                 });
-                if (url && !ev.defaultPrevented) {
-                    window.location.href = url;
-                }
             }
         };
         this.destroy = internalCommon.listenBySelector(settings.el, 'click', '.fc-event', // on both fg and bg events
@@ -1780,16 +1770,12 @@ class EventHovering extends internalCommon.Interaction {
 class ViewHarness extends preact.Component {
     render() {
         const { props } = this;
-        return (preact.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: {
+        return (preact.createElement("div", { className: internalCommon.joinClassNames('fc-view-outer', props.height != null
+                ? 'fc-view-outer-static'
+                : props.heightLiquid
+                    ? 'fc-view-outer-liquid'
+                    : props.aspectRatio != null
+                        && 'fc-view-outer-aspect-ratio'), style: {
                 height: props.height,
                 paddingBottom: props.aspectRatio != null
                     ? `${(1 / props.aspectRatio) * 100}%`
@@ -1805,6 +1791,7 @@ class CalendarContent extends internalCommon.PureComponent {
         this.buildViewPropTransformers = internalCommon.memoize(buildViewPropTransformers);
         this.buildToolbarProps = internalCommon.memoize(buildToolbarProps);
         this.interactionsStore = {};
+        this.viewTitleId = internalCommon.getUniqueDomId();
         // Component Registration
         // -----------------------------------------------------------------------------------------------------------------
         this.registerInteractiveComponent = (component, settingsInput) => {
@@ -1813,7 +1800,10 @@ class CalendarContent extends internalCommon.PureComponent {
                 EventClicking,
                 EventHovering,
             ];
-            let interactionClasses = DEFAULT_INTERACTIONS.concat(this.props.pluginHooks.componentInteractions);
+            let interactionClasses = DEFAULT_INTERACTIONS;
+            if (!settingsInput.disableHits) {
+                interactionClasses = interactionClasses.concat(this.props.pluginHooks.componentInteractions);
+            }
             let interactions = interactionClasses.map((TheInteractionClass) => new TheInteractionClass(settings));
             this.interactionsStore[component.uid] = interactions;
             internalCommon.interactionSettingsStore[component.uid] = settings;
@@ -1852,11 +1842,11 @@ class CalendarContent extends internalCommon.PureComponent {
         }
         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);
         return (preact.createElement(internalCommon.ViewContextType.Provider, { value: viewContext },
-            toolbarConfig.header && (preact.createElement(Toolbar, Object.assign({ extraClassName: "fc-header-toolbar", model: toolbarConfig.header }, toolbarProps))),
+            toolbarConfig.header && (preact.createElement(Toolbar, Object.assign({ className: "fc-header-toolbar", model: toolbarConfig.header, titleId: this.viewTitleId }, toolbarProps))),
             preact.createElement(ViewHarness, { height: viewHeight, heightLiquid: viewHeightLiquid, aspectRatio: viewAspectRatio },
-                this.renderView(props),
+                this.renderView(props, toolbarProps.title),
                 this.buildAppendContent()),
-            toolbarConfig.footer && (preact.createElement(Toolbar, Object.assign({ extraClassName: "fc-footer-toolbar", model: toolbarConfig.footer }, toolbarProps)))));
+            toolbarConfig.footer && (preact.createElement(Toolbar, Object.assign({ className: "fc-footer-toolbar", model: toolbarConfig.footer }, toolbarProps)))));
     }
     componentDidMount() {
         let { props } = this;
@@ -1887,9 +1877,9 @@ class CalendarContent extends internalCommon.PureComponent {
         let children = props.pluginHooks.viewContainerAppends.map((buildAppendContent) => buildAppendContent(props));
         return preact.createElement(preact.Fragment, {}, ...children);
     }
-    renderView(props) {
+    renderView(props, title) {
         let { pluginHooks } = props;
-        let { viewSpec } = props;
+        let { viewSpec, toolbarConfig } = props;
         let viewProps = {
             dateProfile: props.dateProfile,
             businessHours: props.businessHours,
@@ -1900,6 +1890,8 @@ class CalendarContent extends internalCommon.PureComponent {
             eventDrag: props.eventDrag,
             eventResize: props.eventResize,
             forPrint: props.forPrint,
+            labelId: toolbarConfig.header && toolbarConfig.header.hasTitle ? this.viewTitleId : undefined,
+            labelStr: toolbarConfig.header && toolbarConfig.header.hasTitle ? undefined : title,
         };
         let transformers = this.buildViewPropTransformers(pluginHooks.viewPropsTransformers);
         for (let transformer of transformers) {
@@ -2077,7 +2069,7 @@ function sliceEvents(props, allDay) {
     return internalCommon.sliceEventStore(props.eventStore, props.eventUiBases, props.dateProfile.activeRange, allDay ? props.nextDayThreshold : null).fg;
 }
 
-const version = '7.0.0-beta.1';
+const version = '7.0.0-beta.4';
 
 exports.JsonRequestError = internalCommon.JsonRequestError;
 exports.Calendar = Calendar;

package/index.d.ts

@@ -3,7 +3,6 @@ export { U as AllDayContentArg, X as AllDayMountArg, A as AllowFunc, B as Busine
 import 'preact';
 import './preact.js';
 import './index.js';
-import './internal.js';
 
 declare class Calendar extends CalendarImpl {
     el: HTMLElement;