@fullcalendar/core 7.0.0-beta.3 → 7.0.0-rc.0

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) {
@@ -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 };
 }
@@ -1631,27 +1641,41 @@ class ToolbarSection extends internalCommon.BaseComponent {
         }, ...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');
-                children.push(preact.createElement("button", { type: "button", title: typeof buttonHint === 'function' ? buttonHint(props.navUnit) : buttonHint, disabled: isDisabled, "aria-pressed": isPressed, className: internalCommon.joinClassNames(`fc-${buttonName}-button`, theme.getClassName('button'), isPressed && theme.getClassName('buttonActive')), 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.getClassName('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];
     }
@@ -1660,33 +1684,15 @@ class ToolbarSection extends internalCommon.BaseComponent {
 class Toolbar extends internalCommon.BaseComponent {
     render() {
         let { model, className } = 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;
-        }
-        return (preact.createElement("div", { className: internalCommon.joinClassNames(className, 'fc-toolbar', forceLtr && 'fc-toolbar-ltr') },
-            this.renderSection('start', startContent || []),
-            this.renderSection('center', centerContent || []),
-            this.renderSection('end', endContent || [])));
+        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 }));
     }
 }
 
@@ -1785,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) => {
@@ -1835,9 +1842,9 @@ 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({ className: "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({ className: "fc-footer-toolbar", model: toolbarConfig.footer }, toolbarProps)))));
     }
@@ -1870,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,
@@ -1883,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) {
@@ -1983,11 +1992,6 @@ class Calendar extends internalCommon.CalendarImpl {
             this.renderRunner.request();
         }
     }
-    updateSize() {
-        internalCommon.flushSync(() => {
-            super.updateSize();
-        });
-    }
     batchRendering(func) {
         this.renderRunner.pause('batchRendering');
         func();
@@ -2060,7 +2064,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.3';
+const version = '7.0.0-rc.0';
 
 exports.JsonRequestError = internalCommon.JsonRequestError;
 exports.Calendar = Calendar;

package/index.d.ts

@@ -18,7 +18,6 @@ declare class Calendar extends CalendarImpl {
     private handleRenderRequest;
     render(): void;
     destroy(): void;
-    updateSize(): void;
     batchRendering(func: any): void;
     pauseRendering(): void;
     resumeRendering(): void;