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

package/index.js

@@ -1,5 +1,5 @@
-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 buildViewClassName, 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 joinClassNames, Z as Interaction, _ as getElEventRange, $ 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 { 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 buildViewClassName, 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 joinClassNames, Z as Interaction, _ as getElEventRange, $ as EventImpl, a0 as listenBySelector, a1 as listenToHoverBySelector, a2 as PureComponent, a3 as buildViewContext, a4 as getUniqueDomId, a5 as parseInteractionSettings, a6 as interactionSettingsStore, a7 as getNow, a8 as getIsHeightAuto, 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, Component, Fragment, render } from 'preact';
 import 'preact/compat';
 
@@ -27,9 +27,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',
 };
@@ -44,7 +44,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) {
@@ -716,17 +716,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
@@ -754,6 +762,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) => {
@@ -767,6 +776,7 @@ theme, viewSpecs, calendarApi) {
             buttonHint = customButtonProps.hint || customButtonProps.text;
         }
         else if ((viewSpec = viewSpecs[buttonName])) {
+            isView = true;
             viewsWithButtons.push(buttonName);
             buttonClick = () => {
                 calendarApi.changeView(buttonName);
@@ -804,7 +814,7 @@ theme, viewSpecs, calendarApi) {
                 ], calendarButtonText[buttonName]);
             }
         }
-        return { buttonName, buttonClick, buttonIcon, buttonText, buttonHint };
+        return { buttonName, buttonClick, buttonIcon, buttonText, buttonHint, isView };
     })));
     return { widgets, viewsWithButtons, hasTitle };
 }
@@ -1628,27 +1638,41 @@ class ToolbarSection extends 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(createElement("h2", { className: "fc-toolbar-title" }, props.title));
+                children.push(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(createElement("button", { type: "button", title: typeof buttonHint === 'function' ? buttonHint(props.navUnit) : buttonHint, disabled: isDisabled, "aria-pressed": isPressed, className: joinClassNames(`fc-${buttonName}-button`, theme.getClassName('button'), isPressed && theme.getClassName('buttonActive')), onClick: buttonClick }, buttonText || (buttonIcon ? createElement("span", { className: buttonIcon, role: "img" }) : '')));
+                children.push(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: joinClassNames(`fc-${buttonName}-button`, theme.getClassName('button'), isPressed && theme.getClassName('buttonActive')), onClick: buttonClick }), buttonText || (buttonIcon ? createElement("span", { className: buttonIcon, "aria-hidden": true }) : '')));
             }
         }
         if (children.length > 1) {
-            let groupClassName = (isOnlyButtons && theme.getClassName('buttonGroup')) || '';
-            return createElement('div', { className: groupClassName }, ...children);
+            return createElement('div', {
+                role: (isOnlyButtons && isOnlyView) ? 'tablist' : undefined,
+                'aria-label': (isOnlyButtons && isOnlyView) ? options.viewChangeHint : undefined,
+                className: isOnlyButtons ? theme.getClassName('buttonGroup') : undefined,
+            }, ...children);
         }
         return children[0];
     }
@@ -1657,33 +1681,15 @@ class ToolbarSection extends BaseComponent {
 class Toolbar extends 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 (createElement("div", { className: joinClassNames(className, 'fc-toolbar', forceLtr && 'fc-toolbar-ltr') },
-            this.renderSection('start', startContent || []),
-            this.renderSection('center', centerContent || []),
-            this.renderSection('end', endContent || [])));
+        let { sectionWidgets } = model;
+        return (createElement("div", { className: 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 (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 (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 }));
     }
 }
 
@@ -1782,6 +1788,7 @@ class CalendarContent extends PureComponent {
         this.buildViewPropTransformers = memoize(buildViewPropTransformers);
         this.buildToolbarProps = memoize(buildToolbarProps);
         this.interactionsStore = {};
+        this.viewTitleId = getUniqueDomId();
         // Component Registration
         // -----------------------------------------------------------------------------------------------------------------
         this.registerInteractiveComponent = (component, settingsInput) => {
@@ -1832,9 +1839,9 @@ class CalendarContent extends 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 (createElement(ViewContextType.Provider, { value: viewContext },
-            toolbarConfig.header && (createElement(Toolbar, Object.assign({ className: "fc-header-toolbar", model: toolbarConfig.header }, toolbarProps))),
+            toolbarConfig.header && (createElement(Toolbar, Object.assign({ className: "fc-header-toolbar", model: toolbarConfig.header, titleId: this.viewTitleId }, toolbarProps))),
             createElement(ViewHarness, { height: viewHeight, heightLiquid: viewHeightLiquid, aspectRatio: viewAspectRatio },
-                this.renderView(props),
+                this.renderView(props, toolbarProps.title),
                 this.buildAppendContent()),
             toolbarConfig.footer && (createElement(Toolbar, Object.assign({ className: "fc-footer-toolbar", model: toolbarConfig.footer }, toolbarProps)))));
     }
@@ -1867,9 +1874,9 @@ class CalendarContent extends PureComponent {
         let children = props.pluginHooks.viewContainerAppends.map((buildAppendContent) => buildAppendContent(props));
         return createElement(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,
@@ -1880,6 +1887,8 @@ class CalendarContent extends 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) {
@@ -2057,6 +2066,6 @@ function sliceEvents(props, allDay) {
     return 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-beta.4';
 
 export { Calendar, createPlugin, formatDate, formatRange, globalLocales, globalPlugins, sliceEvents, version };