@fullcalendar/interaction 7.0.0-beta.4 → 7.0.0-beta.6

package/{index.d.ts → esm/index.d.ts}

@@ -1,5 +1,5 @@
-import { DatePointApi, ViewApi, EventApi, EventChangeArg, Duration, EventDropArg, PluginDef } from '@fullcalendar/core';
-import { Emitter, PointerDragEvent, Rect, ScrollController, ElementDragging, Identity, DragMetaInput } from '@fullcalendar/core/internal';
+import { DatePointApi, ViewApi, EventApi, EventChangeData, Duration, EventDropData, PluginDef } from '@fullcalendar/core';
+import { Emitter, PointerDragEvent, Rect, ScrollController, ElementDragging, RawOptionsFromRefiners, RefinedOptionsFromRefiners, Identity, DragMetaInput } from '@fullcalendar/core/internal';
 
 declare class PointerDragging {
     containerEl: EventTarget;
@@ -147,30 +147,30 @@ declare class FeaturefulElementDragging extends ElementDragging {
     setAutoScrollEnabled(bool: boolean): void;
 }
 
-interface DateClickArg extends DatePointApi {
+interface DateClickData extends DatePointApi {
     dayEl: HTMLElement;
     jsEvent: MouseEvent;
     view: ViewApi;
 }
 
-type EventDragStopArg = EventDragArg;
-type EventDragStartArg = EventDragArg;
-interface EventDragArg {
+type EventDragStopData = EventDragData;
+type EventDragStartData = EventDragData;
+interface EventDragData {
     el: HTMLElement;
     event: EventApi;
     jsEvent: MouseEvent;
     view: ViewApi;
 }
 
-type EventResizeStartArg = EventResizeStartStopArg;
-type EventResizeStopArg = EventResizeStartStopArg;
-interface EventResizeStartStopArg {
+type EventResizeStartData = EventResizeStartStopData;
+type EventResizeStopData = EventResizeStartStopData;
+interface EventResizeStartStopData {
     el: HTMLElement;
     event: EventApi;
     jsEvent: MouseEvent;
     view: ViewApi;
 }
-interface EventResizeDoneArg extends EventChangeArg {
+interface EventResizeDoneData extends EventChangeData {
     el: HTMLElement;
     startDelta: Duration;
     endDelta: Duration;
@@ -178,14 +178,14 @@ interface EventResizeDoneArg extends EventChangeArg {
     view: ViewApi;
 }
 
-interface DropArg extends DatePointApi {
+interface DropData extends DatePointApi {
     draggedEl: HTMLElement;
     jsEvent: MouseEvent;
     view: ViewApi;
 }
-type EventReceiveArg = EventReceiveLeaveArg;
-type EventLeaveArg = EventReceiveLeaveArg;
-interface EventReceiveLeaveArg {
+type EventReceiveData = EventReceiveLeaveData;
+type EventLeaveData = EventReceiveLeaveData;
+interface EventReceiveLeaveData {
     draggedEl: HTMLElement;
     event: EventApi;
     relatedEvents: EventApi[];
@@ -193,28 +193,34 @@ interface EventReceiveLeaveArg {
     view: ViewApi;
 }
 
-declare const OPTION_REFINERS: {
-    fixedMirrorParent: Identity<HTMLElement>;
-};
+declare const OPTION_REFINERS: {};
+type InteractionOptionRefiners = typeof OPTION_REFINERS;
+type InteractionOptions = RawOptionsFromRefiners<InteractionOptionRefiners>;
+type InteractionOptionsRefined = RefinedOptionsFromRefiners<InteractionOptionRefiners>;
 declare const LISTENER_REFINERS: {
-    dateClick: Identity<(arg: DateClickArg) => void>;
-    eventDragStart: Identity<(arg: EventDragStartArg) => void>;
-    eventDragStop: Identity<(arg: EventDragStopArg) => void>;
-    eventDrop: Identity<(arg: EventDropArg) => void>;
-    eventResizeStart: Identity<(arg: EventResizeStartArg) => void>;
-    eventResizeStop: Identity<(arg: EventResizeStopArg) => void>;
-    eventResize: Identity<(arg: EventResizeDoneArg) => void>;
-    drop: Identity<(arg: DropArg) => void>;
-    eventReceive: Identity<(arg: EventReceiveArg) => void>;
-    eventLeave: Identity<(arg: EventLeaveArg) => void>;
+    dateClick: Identity<(data: DateClickData) => void>;
+    eventDragStart: Identity<(data: EventDragStartData) => void>;
+    eventDragStop: Identity<(data: EventDragStopData) => void>;
+    eventDrop: Identity<(data: EventDropData) => void>;
+    eventResizeStart: Identity<(data: EventResizeStartData) => void>;
+    eventResizeStop: Identity<(data: EventResizeStopData) => void>;
+    eventResize: Identity<(data: EventResizeDoneData) => void>;
+    drop: Identity<(data: DropData) => void>;
+    eventReceive: Identity<(data: EventReceiveData) => void>;
+    eventLeave: Identity<(data: EventLeaveData) => void>;
 };
+type InteractionListenerRefiners = typeof LISTENER_REFINERS;
+type InteractionListeners = RawOptionsFromRefiners<InteractionListenerRefiners>;
+type InteractionListenersRefined = RefinedOptionsFromRefiners<InteractionListenerRefiners>;
 
-type ExtraOptionRefiners = typeof OPTION_REFINERS;
-type ExtraListenerRefiners = typeof LISTENER_REFINERS;
 declare module '@fullcalendar/core/internal' {
-    interface BaseOptionRefiners extends ExtraOptionRefiners {
+    interface BaseOptions extends InteractionOptions {
+    }
+    interface BaseOptionsRefined extends InteractionOptionsRefined {
+    }
+    interface CalendarListeners extends InteractionListeners {
     }
-    interface CalendarListenerRefiners extends ExtraListenerRefiners {
+    interface CalendarListenersRefined extends InteractionListenersRefined {
     }
 }
 //# sourceMappingURL=ambient.d.ts.map
@@ -265,4 +271,4 @@ declare class ThirdPartyDraggable {
 declare const _default: PluginDef;
 //# sourceMappingURL=index.d.ts.map
 
-export { DateClickArg, ExternalDraggable as Draggable, DropArg, EventDragStartArg, EventDragStopArg, EventLeaveArg, EventReceiveArg, EventResizeDoneArg, EventResizeStartArg, EventResizeStopArg, ThirdPartyDraggable, _default as default };
+export { DateClickData, ExternalDraggable as Draggable, DropData, EventDragStartData, EventDragStopData, EventLeaveData, EventReceiveData, EventResizeDoneData, EventResizeStartData, EventResizeStopData, InteractionListeners, InteractionOptions, ThirdPartyDraggable, _default as default };

package/{index.js → esm/index.js}

@@ -1,5 +1,6 @@
-import { createPlugin } from '@fullcalendar/core/index.js';
-import { config, Emitter, applyStyle, whenTransitionDone, ScrollController, ElementScrollController, computeInnerRect, WindowScrollController, ElementDragging, preventSelection, preventContextMenu, allowSelection, allowContextMenu, computeRect, getClippingParents, pointInsideRect, constrainPoint, intersectRects, getRectCenter, diffPoints, mapHash, rangeContainsRange, isDateSpansEqual, Interaction, interactionSettingsToStore, isDateSelectionValid, enableCursor, disableCursor, triggerDateSelect, compareNumbers, getElEventRange, getRelevantEvents, EventImpl, createEmptyEventStore, applyMutationToEventStore, isInteractionValid, buildEventApis, interactionSettingsStore, startOfDay, diffDates, createDuration, getEventTargetViaRoot, identity, eventTupleToStore, parseDragMeta, refineEventDef, parseEventDef, getDefaultEventEnd, createEventInstance, BASE_OPTION_DEFAULTS } from '@fullcalendar/core/internal.js';
+import { createPlugin } from '@fullcalendar/core';
+import { config, Emitter, applyStyle, whenTransitionDone, ScrollController, ElementScrollController, computeInnerRect, WindowScrollController, ElementDragging, preventSelection, preventContextMenu, allowSelection, allowContextMenu, computeRect, computeElIsRtl, getClippingParents, pointInsideRect, constrainPoint, intersectRects, getRectCenter, diffPoints, mapHash, rangeContainsRange, isDateSpansEqual, Interaction, interactionSettingsToStore, isDateSelectionValid, enableCursor, disableCursor, triggerDateSelect, compareNumbers, getElEventRange, getRelevantEvents, getAppendableRoot, EventImpl, createEmptyEventStore, applyMutationToEventStore, isInteractionValid, buildEventApis, interactionSettingsStore, startOfDay, diffDates, createDuration, getEventTargetViaRoot, identity, eventTupleToStore, parseDragMeta, refineEventDef, parseEventDef, getDefaultEventEnd, createEventInstance, BASE_OPTION_DEFAULTS } from '@fullcalendar/core/internal';
+import classNames from '@fullcalendar/core/internal-classnames';
 
 config.touchMouseIgnoreWait = 500;
 let ignoreMouseDepth = 0;
@@ -314,7 +315,9 @@ class ElementMirror {
         if (bool) {
             if (!this.isVisible) {
                 if (this.mirrorEl) {
-                    this.mirrorEl.style.display = '';
+                    // important because competes with util.module.css classNames, which are all important
+                    // TODO: attach a util className here instead?
+                    this.mirrorEl.style.setProperty('display', '', 'important');
                 }
                 this.isVisible = bool; // needs to happen before updateElPosition
                 this.updateElPosition(); // because was not updating the position while invisible
@@ -322,7 +325,9 @@ class ElementMirror {
         }
         else if (this.isVisible) {
             if (this.mirrorEl) {
-                this.mirrorEl.style.display = 'none';
+                // important because competes with util.module.css classNames, which are all important
+                // TODO: attach a util className here instead?
+                this.mirrorEl.style.setProperty('display', 'none', 'important');
             }
             this.isVisible = bool;
         }
@@ -382,10 +387,10 @@ class ElementMirror {
             mirrorEl = this.mirrorEl = this.sourceEl.cloneNode(true); // cloneChildren=true
             // we don't want long taps or any mouse interaction causing selection/menus.
             // would use preventSelection(), but that prevents selectstart, causing problems.
+            // TODO: make className for this?
             mirrorEl.style.userSelect = 'none';
             mirrorEl.style.webkitUserSelect = 'none';
             mirrorEl.style.pointerEvents = 'none';
-            mirrorEl.classList.add('fc-event-dragging');
             applyStyle(mirrorEl, {
                 position: 'fixed',
                 zIndex: this.zIndex,
@@ -525,7 +530,7 @@ class AutoScroller {
     constructor() {
         // options that can be set by caller
         this.isEnabled = true;
-        this.scrollQuery = [window, '.fc-scroller'];
+        this.scrollQuery = [window, `.${classNames.internalScroller}`];
         this.edgeThreshold = 50; // pixels
         this.maxVelocity = 300; // pixels per second
         // internal state
@@ -863,6 +868,7 @@ class OffsetTracker {
     constructor(el) {
         this.el = el;
         this.origRect = computeRect(el);
+        this.isRtl = computeElIsRtl(el);
         // will work fine for divs that have overflow:hidden
         this.scrollCaches = getClippingParents(el).map((scrollEl) => new ElementScrollGeomCache(scrollEl, true));
     }
@@ -1033,7 +1039,7 @@ class HitDragging {
                 // must be within the element's bounds
                 positionLeft >= 0 && positionLeft < width &&
                     positionTop >= 0 && positionTop < height) {
-                    let hit = component.queryHit(positionLeft, positionTop, width, height);
+                    let hit = component.queryHit(offsetTracker.isRtl, positionLeft, positionTop, width, height);
                     if (hit && (
                     // make sure the hit is within activeRange, meaning it's not a dead cell
                     rangeContainsRange(hit.dateProfile.activeRange, hit.dateSpan.range)) &&
@@ -1096,6 +1102,9 @@ class DateClicking extends Interaction {
         this.handlePointerDown = (pev) => {
             let { dragging } = this;
             let downEl = pev.origEvent.target;
+            /*
+            If no dateClick, allow text on dates to be text-selectable
+            */
             const canDateClick = this.component.context.emitter.hasHandlers('dateClick') &&
                 this.component.isValidDateDownEl(downEl);
             if (!canDateClick) {
@@ -1110,8 +1119,8 @@ class DateClicking extends Interaction {
                 let { initialHit, finalHit } = this.hitDragging;
                 if (initialHit && finalHit && isHitsEqual(initialHit, finalHit)) {
                     let { context } = component;
-                    let arg = Object.assign(Object.assign({}, buildDatePointApiWithContext(initialHit.dateSpan, context)), { dayEl: initialHit.dayEl, jsEvent: ev.origEvent, view: context.viewApi || context.calendarApi.view });
-                    context.emitter.trigger('dateClick', arg);
+                    let data = Object.assign(Object.assign({}, buildDatePointApiWithContext(initialHit.dateSpan, context)), { dayEl: initialHit.getDayEl(), jsEvent: ev.origEvent, view: context.viewApi || context.calendarApi.view });
+                    context.emitter.trigger('dateClick', data);
                 }
             }
         };
@@ -1267,15 +1276,10 @@ class EventDragging extends Interaction {
                 (ev.isTouch && eventInstanceId !== component.props.eventSelection) ?
                     getComponentTouchDelay(component) :
                     null;
-            if (options.fixedMirrorParent) {
-                mirror.parentNode = options.fixedMirrorParent;
-            }
-            else {
-                mirror.parentNode = origTarget.closest('.fc');
-            }
+            mirror.parentNode = getAppendableRoot(origTarget);
             mirror.revertDuration = options.dragRevertDuration;
             let isValid = component.isValidSegDownEl(origTarget) &&
-                !origTarget.closest('.fc-event-resizer'); // NOT on a resizer
+                !origTarget.closest(`.${classNames.internalEventResizer}`); // NOT on a resizer
             if (!isValid) {
                 dragging.cancel();
             }
@@ -1283,7 +1287,8 @@ class EventDragging extends Interaction {
                 // disable dragging for elements that are resizable (ie, selectable)
                 // but are not draggable
                 // TODO: merge this with .cancel() ?
-                this.isDragging = ev.subjectEl.classList.contains('fc-event-draggable');
+                this.isDragging = ev.subjectEl
+                    .classList.contains(classNames.internalEventDraggable);
             }
         };
         this.handleDragStart = (ev) => {
@@ -1363,7 +1368,7 @@ class EventDragging extends Interaction {
                 this.dragging.setMirrorNeedsRevert(!mutation);
                 // render the mirror if no already-rendered mirror
                 // TODO: wish we could somehow wait for dispatch to guarantee render
-                this.dragging.setMirrorIsVisible(!hit || !this.subjectEl.getRootNode().querySelector('.fc-event-mirror'));
+                this.dragging.setMirrorIsVisible(!hit || !this.subjectEl.getRootNode().querySelector(`.${classNames.internalEventMirror}`));
                 // assign states based on new hit
                 this.receivingContext = receivingContext;
                 this.validMutation = mutation;
@@ -1401,7 +1406,7 @@ class EventDragging extends Interaction {
                             type: 'MERGE_EVENTS',
                             eventStore: mutatedRelevantEvents,
                         });
-                        let eventChangeArg = {
+                        let eventChangeData = {
                             oldEvent: eventApi,
                             event: updatedEventApi,
                             relatedEvents: buildEventApis(mutatedRelevantEvents, initialContext, eventInstance),
@@ -1416,12 +1421,12 @@ class EventDragging extends Interaction {
                         for (let transformer of initialContext.getCurrentData().pluginHooks.eventDropTransformers) {
                             Object.assign(transformed, transformer(validMutation, initialContext));
                         }
-                        initialContext.emitter.trigger('eventDrop', Object.assign(Object.assign(Object.assign({}, eventChangeArg), transformed), { el: ev.subjectEl, delta: validMutation.datesDelta, jsEvent: ev.origEvent, view: initialView }));
-                        initialContext.emitter.trigger('eventChange', eventChangeArg);
+                        initialContext.emitter.trigger('eventDrop', Object.assign(Object.assign(Object.assign({}, eventChangeData), transformed), { el: ev.subjectEl, delta: validMutation.datesDelta, jsEvent: ev.origEvent, view: initialView }));
+                        initialContext.emitter.trigger('eventChange', eventChangeData);
                         // dropped in different calendar
                     }
                     else if (receivingContext) {
-                        let eventRemoveArg = {
+                        let eventRemoveData = {
                             event: eventApi,
                             relatedEvents: buildEventApis(relevantEvents, initialContext, eventInstance),
                             revert() {
@@ -1431,12 +1436,12 @@ class EventDragging extends Interaction {
                                 });
                             },
                         };
-                        initialContext.emitter.trigger('eventLeave', Object.assign(Object.assign({}, eventRemoveArg), { draggedEl: ev.subjectEl, view: initialView }));
+                        initialContext.emitter.trigger('eventLeave', Object.assign(Object.assign({}, eventRemoveData), { draggedEl: ev.subjectEl, view: initialView }));
                         initialContext.dispatch({
                             type: 'REMOVE_EVENTS',
                             eventStore: relevantEvents,
                         });
-                        initialContext.emitter.trigger('eventRemove', eventRemoveArg);
+                        initialContext.emitter.trigger('eventRemove', eventRemoveData);
                         let addedEventDef = mutatedRelevantEvents.defs[eventDef.defId];
                         let addedEventInstance = mutatedRelevantEvents.instances[eventInstance.instanceId];
                         let addedEventApi = new EventImpl(receivingContext, addedEventDef, addedEventInstance);
@@ -1444,7 +1449,7 @@ class EventDragging extends Interaction {
                             type: 'MERGE_EVENTS',
                             eventStore: mutatedRelevantEvents,
                         });
-                        let eventAddArg = {
+                        let eventAddData = {
                             event: addedEventApi,
                             relatedEvents: buildEventApis(mutatedRelevantEvents, receivingContext, addedEventInstance),
                             revert() {
@@ -1454,7 +1459,7 @@ class EventDragging extends Interaction {
                                 });
                             },
                         };
-                        receivingContext.emitter.trigger('eventAdd', eventAddArg);
+                        receivingContext.emitter.trigger('eventAdd', eventAddData);
                         if (ev.isTouch) {
                             receivingContext.dispatch({
                                 type: 'SELECT_EVENT',
@@ -1462,7 +1467,7 @@ class EventDragging extends Interaction {
                             });
                         }
                         receivingContext.emitter.trigger('drop', Object.assign(Object.assign({}, buildDatePointApiWithContext(finalHit.dateSpan, receivingContext)), { draggedEl: ev.subjectEl, jsEvent: ev.origEvent, view: finalHit.context.viewApi }));
-                        receivingContext.emitter.trigger('eventReceive', Object.assign(Object.assign({}, eventAddArg), { draggedEl: ev.subjectEl, view: finalHit.context.viewApi }));
+                        receivingContext.emitter.trigger('eventReceive', Object.assign(Object.assign({}, eventAddData), { draggedEl: ev.subjectEl, view: finalHit.context.viewApi }));
                     }
                 }
                 else {
@@ -1537,7 +1542,7 @@ class EventDragging extends Interaction {
 }
 // TODO: test this in IE11
 // QUESTION: why do we need it on the resizable???
-EventDragging.SELECTOR = '.fc-event-draggable, .fc-event-resizable';
+EventDragging.SELECTOR = `.${classNames.internalEventDraggable}, .${classNames.internalEventResizable}`;
 function computeEventMutation(hit0, hit1, eventInstanceStart, massagers) {
     let dateSpan0 = hit0.dateSpan;
     let dateSpan1 = hit1.dateSpan;
@@ -1636,7 +1641,7 @@ class EventResizing extends Interaction {
                     && this.isHitComboAllowed
                     && !this.isHitComboAllowed(initialHit, hit);
                 if (!disallowed) {
-                    mutation = computeMutation(initialHit, hit, ev.subjectEl.classList.contains('fc-event-resizer-start'), eventInstance.range);
+                    mutation = computeMutation(initialHit, hit, ev.subjectEl.classList.contains(classNames.internalEventResizerStart), eventInstance.range);
                 }
             }
             if (mutation) {
@@ -1691,7 +1696,7 @@ class EventResizing extends Interaction {
                     type: 'MERGE_EVENTS',
                     eventStore: mutatedRelevantEvents,
                 });
-                let eventChangeArg = {
+                let eventChangeData = {
                     oldEvent: eventApi,
                     event: updatedEventApi,
                     relatedEvents: buildEventApis(mutatedRelevantEvents, context, eventInstance),
@@ -1702,8 +1707,8 @@ class EventResizing extends Interaction {
                         });
                     },
                 };
-                context.emitter.trigger('eventResize', Object.assign(Object.assign({}, eventChangeArg), { el: this.draggingSegEl, startDelta: this.validMutation.startDelta || createDuration(0), endDelta: this.validMutation.endDelta || createDuration(0), jsEvent: ev.origEvent, view: context.viewApi }));
-                context.emitter.trigger('eventChange', eventChangeArg);
+                context.emitter.trigger('eventResize', Object.assign(Object.assign({}, eventChangeData), { el: this.draggingSegEl, startDelta: this.validMutation.startDelta || createDuration(0), endDelta: this.validMutation.endDelta || createDuration(0), jsEvent: ev.origEvent, view: context.viewApi }));
+                context.emitter.trigger('eventChange', eventChangeData);
             }
             else {
                 context.emitter.trigger('_noEventResize');
@@ -1716,7 +1721,7 @@ class EventResizing extends Interaction {
         };
         let { component } = settings;
         let dragging = this.dragging = new FeaturefulElementDragging(settings.el);
-        dragging.pointer.selector = '.fc-event-resizer';
+        dragging.pointer.selector = `.${classNames.internalEventResizer}`;
         dragging.touchScrollAllowed = false;
         dragging.autoScroller.isEnabled = component.context.options.dragScroll;
         let hitDragging = this.hitDragging = new HitDragging(this.dragging, interactionSettingsToStore(settings));
@@ -1729,7 +1734,7 @@ class EventResizing extends Interaction {
         this.dragging.destroy();
     }
     querySegEl(ev) {
-        return ev.subjectEl.closest('.fc-event');
+        return ev.subjectEl.closest(`.${classNames.internalEvent}`);
     }
 }
 function computeMutation(hit0, hit1, isFromStart, instanceRange) {
@@ -1754,8 +1759,8 @@ class UnselectAuto {
         this.isRecentPointerDateSelect = false; // wish we could use a selector to detect date selection, but uses hit system
         this.matchesCancel = false;
         this.matchesEvent = false;
-        this.onSelect = (selectInfo) => {
-            if (selectInfo.jsEvent) {
+        this.onSelect = (selectData) => {
+            if (selectData.jsEvent) {
                 this.isRecentPointerDateSelect = true;
             }
         };
@@ -1803,9 +1808,7 @@ class UnselectAuto {
     }
 }
 
-const OPTION_REFINERS = {
-    fixedMirrorParent: identity,
-};
+const OPTION_REFINERS = {};
 const LISTENER_REFINERS = {
     dateClick: identity,
     eventDragStart: identity,
@@ -1858,7 +1861,9 @@ class ExternalElementDragging {
             this.displayDrag(receivingContext, interaction);
             // show mirror if no already-rendered mirror element OR if we are shutting down the mirror (?)
             // TODO: wish we could somehow wait for dispatch to guarantee render
-            dragging.setMirrorIsVisible(isFinal || !droppableEvent || !document.querySelector('.fc-event-mirror'));
+            dragging.setMirrorIsVisible(isFinal ||
+                !droppableEvent ||
+                !document.querySelector(`.${classNames.internalEventMirror}`));
             if (!isInvalid) {
                 enableCursor();
             }
@@ -2010,8 +2015,8 @@ class ExternalDraggable {
         this.handleDragStart = (ev) => {
             if (ev.isTouch &&
                 this.dragging.delay &&
-                ev.subjectEl.classList.contains('fc-event')) {
-                this.dragging.mirror.getMirrorEl().classList.add('fc-event-selected');
+                ev.subjectEl.classList.contains(classNames.internalEvent)) {
+                this.dragging.mirror.getMirrorEl().classList.add(classNames.internalEventSelected);
             }
         };
         this.settings = settings;