@kne/react-calendar 1.0.0 → 1.0.2

package/dist/index.modern.js

@@ -4,7 +4,7 @@ import customParseFormat from 'dayjs/plugin/customParseFormat';
 import useControlValue from '@kne/use-control-value';
 import { Popover, Space, Button, Badge, List, Tag, Card, Spin, Empty, Tooltip, Calendar } from 'antd';
 import { createWithIntlProvider, useIntl } from '@kne/react-intl';
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import FormInfo, { Input, TextArea, Form, SubmitButton } from '@kne/form-info';
 
 function _extends() {
@@ -897,20 +897,43 @@ const ViewPanel = ({
   });
 };
 
-const LONG_PRESS_DELAY = 360;
-const MOVE_THRESHOLD = 18;
+const LONG_PRESS_DELAY = 400;
+const SCROLL_CANCEL_THRESHOLD = 12;
+const TAP_MOVE_THRESHOLD = 8;
 const getPopoverKey = slot => slot ? `form:${slot.key}` : null;
-const getSlotElementFromTouch = (container, touch) => {
-  const element = document.elementFromPoint(touch.clientX, touch.clientY);
-  const slotElement = element == null || element.closest == null ? void 0 : element.closest('[data-slot-index]');
-  if (!slotElement || !(container != null && container.contains(slotElement))) {
+const getSlotIndexFromPoint = (container, clientX, clientY) => {
+  const slotElements = container == null || container.querySelectorAll == null ? void 0 : container.querySelectorAll('[data-slot-index]');
+  if (!(slotElements != null && slotElements.length)) {
     return null;
   }
-  return slotElement;
+  let closestIndex = null;
+  let closestDistance = Infinity;
+  for (const candidate of slotElements) {
+    const rect = candidate.getBoundingClientRect();
+    const index = Number(candidate.getAttribute('data-slot-index'));
+    if (Number.isNaN(index)) {
+      continue;
+    }
+    if (clientY >= rect.top && clientY <= rect.bottom && clientX >= rect.left && clientX <= rect.right) {
+      return index;
+    }
+    if (clientX < rect.left || clientX > rect.right) {
+      continue;
+    }
+    const centerY = (rect.top + rect.bottom) / 2;
+    const distance = Math.abs(clientY - centerY);
+    if (distance < closestDistance) {
+      closestDistance = distance;
+      closestIndex = index;
+    }
+  }
+  return closestIndex;
 };
-const getTouchPoint = event => {
-  var _event$changedTouches, _event$touches;
-  return ((_event$changedTouches = event.changedTouches) == null ? void 0 : _event$changedTouches[0]) || ((_event$touches = event.touches) == null ? void 0 : _event$touches[0]);
+const clearDocumentTextSelection = () => {
+  const selection = document.getSelection == null ? void 0 : document.getSelection();
+  if (selection && !selection.isCollapsed) {
+    selection.removeAllRanges();
+  }
 };
 const useScheduleSelectionGesture = ({
   slots,
@@ -930,9 +953,14 @@ const useScheduleSelectionGesture = ({
   const touchStateRef = useRef(null);
   const slotsDataRef = useRef(slots);
   const selectedSlotsRef = useRef(selectedSlots);
+  const allowMultiSelectRef = useRef(allowMultiSelect);
   const suppressTriggerUntilRef = useRef(0);
+  const suppressMouseUntilRef = useRef(0);
+  const scrollLockRef = useRef(null);
+  const handlersRef = useRef({});
   slotsDataRef.current = slots;
   selectedSlotsRef.current = selectedSlots;
+  allowMultiSelectRef.current = allowMultiSelect;
   const selectedKeys = useMemo(() => new Set(selectedSlots.map(slot => slot.key)), [selectedSlots]);
   const selectedAnchorKey = (_selectedSlots = selectedSlots[selectedSlots.length - 1]) == null ? void 0 : _selectedSlots.key;
   const formPopoverKey = selectedAnchorKey ? `form:${selectedAnchorKey}` : null;
@@ -942,16 +970,55 @@ const useScheduleSelectionGesture = ({
       longPressTimerRef.current = null;
     }
   }, []);
+  const unlockContainerScroll = useCallback(() => {
+    const container = slotsRef.current;
+    if (!container || scrollLockRef.current == null) {
+      return;
+    }
+    const scrollTop = scrollLockRef.current;
+    container.style.overflow = '';
+    container.style.touchAction = '';
+    container.scrollTop = scrollTop;
+    scrollLockRef.current = null;
+  }, []);
+  const lockContainerScroll = useCallback(() => {
+    const container = slotsRef.current;
+    if (!container || scrollLockRef.current != null) {
+      return;
+    }
+    scrollLockRef.current = container.scrollTop;
+    container.style.overflow = 'hidden';
+    container.style.touchAction = 'none';
+  }, []);
+  const resetGestureState = useCallback(() => {
+    clearLongPress();
+    const container = slotsRef.current;
+    const touchState = touchStateRef.current;
+    if (container && (touchState == null ? void 0 : touchState.pointerId) != null && container.hasPointerCapture != null && container.hasPointerCapture(touchState.pointerId)) {
+      try {
+        container.releasePointerCapture(touchState.pointerId);
+      } catch (_unused) {
+        // Ignore capture release errors on stale pointers.
+      }
+    }
+    draggingRef.current = false;
+    dragStartIndexRef.current = null;
+    touchStateRef.current = null;
+    container == null || container.classList.remove('schedule-calendar-touch-dragging');
+    unlockContainerScroll();
+    setDragging(false);
+  }, [clearLongPress, unlockContainerScroll]);
   const selectSlots = useCallback(nextSlots => {
     selectedSlotsRef.current = nextSlots;
     if (!nextSlots.length) {
       setActivePopoverKey(null);
+      resetGestureState();
     }
     setSelectedSlots(nextSlots);
     onSlotRangeChange == null || onSlotRangeChange(nextSlots, {
       action: nextSlots.length ? 'select' : 'clear'
     });
-  }, [onSlotRangeChange, setSelectedSlots]);
+  }, [onSlotRangeChange, resetGestureState, setSelectedSlots]);
   const getSelectableRange = useCallback((startIndex, endIndex) => {
     const [start, end] = [Math.min(startIndex, endIndex), Math.max(startIndex, endIndex)];
     return slotsDataRef.current.slice(start, end + 1).filter(slot => slot.status === 'free');
@@ -963,13 +1030,18 @@ const useScheduleSelectionGesture = ({
     }
   }, []);
   const startSlotSelection = useCallback((slot, index, {
-    showPopover: _showPopover = true
+    showPopover: _showPopover = true,
+    lockScroll: _lockScroll = false
   } = {}) => {
     var _slotsRef$current;
+    clearDocumentTextSelection();
     setActivePopoverKey(getPopoverKey(slot));
     draggingRef.current = true;
     dragStartIndexRef.current = index;
     (_slotsRef$current = slotsRef.current) == null || _slotsRef$current.classList.add('schedule-calendar-touch-dragging');
+    if (_lockScroll) {
+      lockContainerScroll();
+    }
     setDragging(true);
     selectSlots([slot]);
     if (!_showPopover) {
@@ -977,44 +1049,58 @@ const useScheduleSelectionGesture = ({
       setActivePopoverKey(null);
     }
     onFreeSlotClick == null || onFreeSlotClick(slot);
-  }, [onFreeSlotClick, selectSlots]);
+  }, [lockContainerScroll, onFreeSlotClick, selectSlots]);
   const finishSelection = useCallback(({
     fromTouch: _fromTouch = false
   } = {}) => {
-    var _slotsRef$current2;
-    clearLongPress();
-    draggingRef.current = false;
-    dragStartIndexRef.current = null;
-    (_slotsRef$current2 = slotsRef.current) == null || _slotsRef$current2.classList.remove('schedule-calendar-touch-dragging');
-    setDragging(false);
-    if (selectedSlotsRef.current.length) {
+    const hadSelection = selectedSlotsRef.current.length > 0;
+    resetGestureState();
+    if (hadSelection) {
       if (_fromTouch) {
         suppressTriggerUntilRef.current = Date.now() + 500;
       }
       showFormPopoverForSlots(selectedSlotsRef.current);
     }
-  }, [clearLongPress, showFormPopoverForSlots]);
+  }, [resetGestureState, showFormPopoverForSlots]);
   const updateSelectionRange = useCallback(index => {
     const startIndex = dragStartIndexRef.current;
-    if (startIndex === null || !allowMultiSelect) {
+    if (startIndex === null || !allowMultiSelectRef.current) {
       return;
     }
     const nextSlots = getSelectableRange(startIndex, index);
     selectSlots(nextSlots);
-  }, [allowMultiSelect, getSelectableRange, selectSlots]);
+  }, [getSelectableRange, selectSlots]);
+  const shouldIgnoreMouseSelectionEvent = useCallback(() => {
+    return !!touchStateRef.current || Date.now() < suppressMouseUntilRef.current;
+  }, []);
   const handleMouseDown = useCallback((event, slot, index) => {
+    if (shouldIgnoreMouseSelectionEvent()) {
+      return;
+    }
     if (slot.status !== 'free') {
       return;
     }
     event.preventDefault();
     startSlotSelection(slot, index);
-  }, [startSlotSelection]);
+  }, [shouldIgnoreMouseSelectionEvent, startSlotSelection]);
   const handleMouseEnter = useCallback(index => {
-    if (!draggingRef.current) {
+    if (shouldIgnoreMouseSelectionEvent() || !draggingRef.current) {
       return;
     }
     updateSelectionRange(index);
-  }, [updateSelectionRange]);
+  }, [shouldIgnoreMouseSelectionEvent, updateSelectionRange]);
+  const handleMouseUp = useCallback(() => {
+    if (shouldIgnoreMouseSelectionEvent()) {
+      return;
+    }
+    finishSelection();
+  }, [finishSelection, shouldIgnoreMouseSelectionEvent]);
+  const handleMouseLeave = useCallback(() => {
+    if (shouldIgnoreMouseSelectionEvent()) {
+      return;
+    }
+    finishSelection();
+  }, [finishSelection, shouldIgnoreMouseSelectionEvent]);
   const handlePopoverOpenChange = useCallback((open, currentPopoverKey, {
     isForm: _isForm = false
   } = {}) => {
@@ -1032,26 +1118,79 @@ const useScheduleSelectionGesture = ({
       return prevKey === currentPopoverKey ? null : prevKey;
     });
   }, [selectSlots]);
+  handlersRef.current = {
+    clearLongPress,
+    finishSelection,
+    onFreeSlotClick,
+    resetGestureState,
+    selectSlots,
+    showFormPopoverForSlots,
+    startSlotSelection,
+    updateSelectionRange
+  };
   useEffect(() => {
     const container = slotsRef.current;
     if (!container) {
       return undefined;
     }
-    const clearTouchState = () => {
-      clearLongPress();
-      if (!draggingRef.current) {
-        var _slotsRef$current3;
-        (_slotsRef$current3 = slotsRef.current) == null || _slotsRef$current3.classList.remove('schedule-calendar-touch-dragging');
+    const releasePointerCapture = pointerId => {
+      if (pointerId == null || !(container.hasPointerCapture != null && container.hasPointerCapture(pointerId))) {
+        return;
+      }
+      try {
+        container.releasePointerCapture(pointerId);
+      } catch (_unused2) {
+        // Ignore capture release errors on stale pointers.
       }
+    };
+    const clearPendingTouch = () => {
+      handlersRef.current.clearLongPress();
       touchStateRef.current = null;
     };
-    const handleTouchStart = event => {
-      if (event.touches.length !== 1) {
+    const isStillOnSameSlot = (touchState, clientX, clientY) => {
+      const currentIndex = getSlotIndexFromPoint(container, clientX, clientY);
+      return currentIndex === touchState.index;
+    };
+    const shouldCancelPendingGesture = (touchState, clientX, clientY) => {
+      const moveX = Math.abs(clientX - touchState.x);
+      const moveY = Math.abs(clientY - touchState.y);
+      if (moveY > SCROLL_CANCEL_THRESHOLD) {
+        return true;
+      }
+      if (!isStillOnSameSlot(touchState, clientX, clientY)) {
+        return true;
+      }
+      if (!allowMultiSelectRef.current && (moveX > TAP_MOVE_THRESHOLD || moveY > TAP_MOVE_THRESHOLD)) {
+        return true;
+      }
+      return false;
+    };
+    const activateLongPress = touchState => {
+      var _slotsRef$current2;
+      if (!isStillOnSameSlot(touchState, touchState.lastX, touchState.lastY)) {
         return;
       }
-      const touch = event.touches[0];
-      const slotElement = getSlotElementFromTouch(container, touch);
-      if (!slotElement) {
+      touchState.longPressed = true;
+      touchState.active = true;
+      clearDocumentTextSelection();
+      try {
+        container.setPointerCapture(touchState.pointerId);
+      } catch (_unused3) {
+        // Continue when capture is unavailable.
+      }
+      (_slotsRef$current2 = slotsRef.current) == null || _slotsRef$current2.classList.add('schedule-calendar-touch-dragging');
+      handlersRef.current.startSlotSelection(touchState.slot, touchState.index, {
+        showPopover: false,
+        lockScroll: true
+      });
+    };
+    const handlePointerDown = event => {
+      var _event$target;
+      if (event.pointerType === 'mouse' || event.isPrimary === false) {
+        return;
+      }
+      const slotElement = (_event$target = event.target) == null || _event$target.closest == null ? void 0 : _event$target.closest('[data-slot-index]');
+      if (!slotElement || !container.contains(slotElement)) {
         return;
       }
       const index = Number(slotElement.getAttribute('data-slot-index'));
@@ -1059,115 +1198,138 @@ const useScheduleSelectionGesture = ({
       if (Number.isNaN(index) || (slot == null ? void 0 : slot.status) !== 'free') {
         return;
       }
-      clearTouchState();
+      handlersRef.current.resetGestureState();
       touchStateRef.current = {
-        identifier: touch.identifier,
-        x: touch.clientX,
-        y: touch.clientY,
+        pointerId: event.pointerId,
+        x: event.clientX,
+        y: event.clientY,
+        lastX: event.clientX,
+        lastY: event.clientY,
         slot,
         index,
         moved: false,
         longPressed: false,
-        active: false
+        active: false,
+        selectionTriggered: false
       };
+      if (!allowMultiSelectRef.current) {
+        return;
+      }
       longPressTimerRef.current = window.setTimeout(() => {
-        var _slotsRef$current4;
         const touchState = touchStateRef.current;
-        if (!touchState) {
+        if (!touchState || touchState.pointerId !== event.pointerId || touchState.moved) {
           return;
         }
-        touchState.longPressed = true;
-        touchState.active = true;
-        (_slotsRef$current4 = slotsRef.current) == null || _slotsRef$current4.classList.add('schedule-calendar-touch-dragging');
-        startSlotSelection(slot, index, {
-          showPopover: false
-        });
+        activateLongPress(touchState);
         longPressTimerRef.current = null;
       }, LONG_PRESS_DELAY);
     };
-    const handleTouchMove = event => {
+    const handlePointerMove = event => {
       const touchState = touchStateRef.current;
-      if (!touchState) {
-        return;
-      }
-      const touch = Array.from(event.touches).find(item => item.identifier === touchState.identifier) || event.touches[0];
-      if (!touch) {
+      if (!touchState || event.pointerId !== touchState.pointerId) {
         return;
       }
+      touchState.lastX = event.clientX;
+      touchState.lastY = event.clientY;
       if (!touchState.active) {
-        const moveX = Math.abs(touch.clientX - touchState.x);
-        const moveY = Math.abs(touch.clientY - touchState.y);
-        if (moveX > MOVE_THRESHOLD || moveY > MOVE_THRESHOLD) {
+        if (shouldCancelPendingGesture(touchState, event.clientX, event.clientY)) {
           touchState.moved = true;
-          clearTouchState();
+          clearPendingTouch();
         }
         return;
       }
       event.preventDefault();
-      const slotElement = getSlotElementFromTouch(container, touch);
-      if (!slotElement) {
-        return;
-      }
-      const index = Number(slotElement.getAttribute('data-slot-index'));
-      if (!Number.isNaN(index)) {
-        updateSelectionRange(index);
+      event.stopPropagation();
+      clearDocumentTextSelection();
+      const index = getSlotIndexFromPoint(container, event.clientX, event.clientY);
+      if (index !== null) {
+        handlersRef.current.updateSelectionRange(index);
       }
     };
-    const handleTouchEnd = event => {
+    const handlePointerUp = event => {
       const touchState = touchStateRef.current;
-      if (!touchState) {
-        return;
-      }
-      const touch = Array.from(event.changedTouches || []).find(item => item.identifier === touchState.identifier) || getTouchPoint(event);
-      if (!touch) {
-        clearTouchState();
+      if (!touchState || event.pointerId !== touchState.pointerId) {
         return;
       }
+      releasePointerCapture(event.pointerId);
+      suppressMouseUntilRef.current = Date.now() + 700;
       if (touchState.active) {
         event.preventDefault();
+        touchState.selectionTriggered = true;
+        const index = getSlotIndexFromPoint(container, event.clientX, event.clientY);
+        if (index !== null) {
+          handlersRef.current.updateSelectionRange(index);
+        }
         suppressTriggerUntilRef.current = Date.now() + 500;
-        finishSelection({
+        handlersRef.current.finishSelection({
           fromTouch: true
         });
-        touchStateRef.current = null;
         return;
       }
-      const quickTap = !touchState.longPressed && !touchState.moved;
-      clearTouchState();
+      handlersRef.current.clearLongPress();
+      const quickTap = !touchState.moved && !touchState.longPressed && Math.abs(event.clientX - touchState.x) <= TAP_MOVE_THRESHOLD && Math.abs(event.clientY - touchState.y) <= TAP_MOVE_THRESHOLD && isStillOnSameSlot(touchState, event.clientX, event.clientY);
+      const {
+        slot
+      } = touchState;
+      touchStateRef.current = null;
       if (quickTap) {
+        touchState.selectionTriggered = true;
         suppressTriggerUntilRef.current = Date.now() + 500;
-        selectSlots([touchState.slot]);
-        showFormPopoverForSlots([touchState.slot]);
-        onFreeSlotClick == null || onFreeSlotClick(touchState.slot);
+        handlersRef.current.selectSlots([slot]);
+        handlersRef.current.showFormPopoverForSlots([slot]);
+        handlersRef.current.onFreeSlotClick == null || handlersRef.current.onFreeSlotClick(slot);
+        return;
       }
+      handlersRef.current.resetGestureState();
     };
     const handleContextMenu = event => {
-      if (touchStateRef.current || draggingRef.current) {
+      var _touchStateRef$curren;
+      if ((_touchStateRef$curren = touchStateRef.current) != null && _touchStateRef$curren.active || draggingRef.current) {
         event.preventDefault();
       }
     };
-    container.addEventListener('touchstart', handleTouchStart, {
+    const handleSelectStart = event => {
+      var _touchStateRef$curren2;
+      if (!((_touchStateRef$curren2 = touchStateRef.current) != null && _touchStateRef$curren2.active) && !draggingRef.current) {
+        return;
+      }
+      event.preventDefault();
+    };
+    const handleTouchMove = event => {
+      var _touchStateRef$curren3;
+      if (!draggingRef.current && !((_touchStateRef$curren3 = touchStateRef.current) != null && _touchStateRef$curren3.active)) {
+        return;
+      }
+      event.preventDefault();
+    };
+    const touchOptions = {
+      passive: false,
+      capture: true
+    };
+    container.addEventListener('pointerdown', handlePointerDown, {
       passive: true
     });
-    container.addEventListener('touchmove', handleTouchMove, {
+    container.addEventListener('pointermove', handlePointerMove, {
       passive: false
     });
-    container.addEventListener('touchend', handleTouchEnd, {
+    container.addEventListener('pointerup', handlePointerUp, {
       passive: false
     });
-    container.addEventListener('touchcancel', handleTouchEnd, {
+    container.addEventListener('pointercancel', handlePointerUp, {
       passive: false
     });
+    container.addEventListener('touchmove', handleTouchMove, touchOptions);
     container.addEventListener('contextmenu', handleContextMenu);
+    container.addEventListener('selectstart', handleSelectStart);
     return () => {
-      clearTouchState();
-      container.removeEventListener('touchstart', handleTouchStart);
-      container.removeEventListener('touchmove', handleTouchMove);
-      container.removeEventListener('touchend', handleTouchEnd);
-      container.removeEventListener('touchcancel', handleTouchEnd);
-      container.removeEventListener('contextmenu', handleContextMenu);
+      var _touchStateRef$curren4;
+      releasePointerCapture((_touchStateRef$curren4 = touchStateRef.current) == null ? void 0 : _touchStateRef$curren4.pointerId);
+      handlersRef.current.clearLongPress();
+      handlersRef.current.resetGestureState();
+      longPressTimerRef.current = null;
+      container.removeEventListener('touchmove', handleTouchMove, touchOptions);
     };
-  }, [clearLongPress, finishSelection, onFreeSlotClick, selectSlots, showFormPopoverForSlots, startSlotSelection, updateSelectionRange]);
+  }, []);
   return {
     activePopoverKey,
     dragging,
@@ -1180,6 +1342,8 @@ const useScheduleSelectionGesture = ({
     finishSelection,
     handleMouseDown,
     handleMouseEnter,
+    handleMouseUp,
+    handleMouseLeave,
     handlePopoverOpenChange
   };
 };
@@ -1259,6 +1423,7 @@ const SlotItem = ({
   if (content) {
     const customNode = /*#__PURE__*/jsx("div", {
       "data-slot-index": slot.index,
+      "data-slot-status": slot.status,
       onContextMenu: onContextMenu,
       onMouseDown: onMouseDown,
       onPointerDown: onPointerDown,
@@ -1318,19 +1483,10 @@ const SlotItem = ({
     }
     return node;
   };
-  const inner = /*#__PURE__*/jsxs("button", {
-    type: "button",
-    className: classNames(style$1['slot-item'], style$1[`slot-${slot.status}`], {
-      [style$1['slot-selected']]: selected
-    }),
-    "data-slot-index": slot.index,
-    disabled: slot.status === 'disabled',
-    onContextMenu: onContextMenu,
-    onMouseDown: onMouseDown,
-    onPointerDown: onPointerDown,
-    onMouseEnter: onMouseEnter,
-    onMouseUp: onMouseUp,
-    onClick: onClick,
+  const slotClassName = classNames(style$1['slot-item'], style$1[`slot-${slot.status}`], {
+    [style$1['slot-selected']]: selected
+  });
+  const slotChildren = /*#__PURE__*/jsxs(Fragment, {
     children: [/*#__PURE__*/jsx("span", {
       className: style$1['slot-dot']
     }), /*#__PURE__*/jsx("span", {
@@ -1354,6 +1510,36 @@ const SlotItem = ({
       children: slot.events.map(event => event.title).join('、')
     }) : null]
   });
+  const slotHandlers = {
+    onContextMenu,
+    onMouseDown,
+    onPointerDown,
+    onMouseEnter,
+    onMouseUp,
+    onClick
+  };
+  const inner = slot.status === 'disabled' ? /*#__PURE__*/jsx("button", {
+    type: "button",
+    className: slotClassName,
+    "data-slot-index": slot.index,
+    "data-slot-status": slot.status,
+    disabled: true,
+    onContextMenu: onContextMenu,
+    onMouseDown: onMouseDown,
+    onPointerDown: onPointerDown,
+    onMouseEnter: onMouseEnter,
+    onMouseUp: onMouseUp,
+    onClick: onClick,
+    children: slotChildren
+  }) : /*#__PURE__*/jsx("div", _extends({
+    role: "button",
+    tabIndex: 0,
+    className: slotClassName,
+    "data-slot-index": slot.index,
+    "data-slot-status": slot.status
+  }, slotHandlers, {
+    children: slotChildren
+  }));
   return wrapWithPopover(inner);
 };
 
@@ -1392,9 +1578,10 @@ const SchedulePanel = ({
     selectedKeys,
     selectSlots,
     slotsRef,
-    finishSelection,
     handleMouseDown,
     handleMouseEnter,
+    handleMouseUp,
+    handleMouseLeave,
     handlePopoverOpenChange
   } = useScheduleSelectionGesture({
     slots,
@@ -1467,8 +1654,8 @@ const SchedulePanel = ({
           [style$1['slots-dragging']]: dragging
         }),
         onScroll: onScroll,
-        onMouseUp: () => finishSelection(),
-        onMouseLeave: () => finishSelection(),
+        onMouseUp: handleMouseUp,
+        onMouseLeave: handleMouseLeave,
         children: [/*#__PURE__*/jsx(PanelScrollShadow, {
           visible: scrolled
         }), /*#__PURE__*/jsx("div", {
@@ -1498,7 +1685,7 @@ const SchedulePanel = ({
               },
               onMouseDown: event => handleMouseDown(event, slot, index),
               onMouseEnter: () => handleMouseEnter(index),
-              onMouseUp: () => finishSelection(),
+              onMouseUp: handleMouseUp,
               onClick: undefined
             }, slot.key);
           })