[WEB-1139] chore: Calendar pragmatic dnd (#4410)

* replace Pragmatic DND for calendar

* remove unnecessary check

web/components/issues/issue-layouts/calendar/base-calendar-root.tsx

@@ -1,6 +1,5 @@
 import { FC } from "react";
-import { DragDropContext, DropResult } from "@hello-pangea/dnd";
+import { observer } from "mobx-react-lite";
-import { observer } from "mobx-react";
 import { useRouter } from "next/router";
 import { TGroupedIssues } from "@plane/types";
 // components
@@ -51,23 +50,19 @@ export const BaseCalendarRoot = observer((props: IBaseCalendarRoot) => {
 
   const groupedIssueIds = (issues.groupedIssueIds ?? {}) as TGroupedIssues;
 
-  const onDragEnd = async (result: DropResult) => {
+  const handleDragAndDrop = async (
-    if (!result) return;
+    issueId: string | undefined,
+    sourceDate: string | undefined,
+    destinationDate: string | undefined
+  ) => {
+    if (!issueId || !destinationDate || !sourceDate) return;
 
-    // return if not dropped on the correct place
-    if (!result.destination) return;
-
-    // return if dropped on the same date
-    if (result.destination.droppableId === result.source.droppableId) return;
-
-    if (handleDragDrop) {
     await handleDragDrop(
-        result.source,
+      issueId,
-        result.destination,
+      sourceDate,
+      destinationDate,
       workspaceSlug?.toString(),
       projectId?.toString(),
-        issueMap,
-        groupedIssueIds,
       updateIssue
     ).catch((err) => {
       setToast({
@@ -76,13 +71,11 @@ export const BaseCalendarRoot = observer((props: IBaseCalendarRoot) => {
         message: err?.detail ?? "Failed to perform this action",
       });
     });
-    }
   };
 
   return (
     <>
       <div className="h-full w-full overflow-hidden bg-custom-background-100 pt-4">
-        <DragDropContext onDragEnd={onDragEnd}>
         <CalendarChart
           issuesFilterStore={issuesFilter}
           issues={issueMap}
@@ -96,9 +89,7 @@ export const BaseCalendarRoot = observer((props: IBaseCalendarRoot) => {
               issue={issue}
               handleDelete={async () => removeIssue(issue.project_id, issue.id)}
               handleUpdate={async (data) => updateIssue && updateIssue(issue.project_id, issue.id, data)}
-                handleRemoveFromView={async () =>
+              handleRemoveFromView={async () => removeIssueFromView && removeIssueFromView(issue.project_id, issue.id)}
-                  removeIssueFromView && removeIssueFromView(issue.project_id, issue.id)
-                }
               handleArchive={async () => archiveIssue && archiveIssue(issue.project_id, issue.id)}
               handleRestore={async () => restoreIssue && restoreIssue(issue.project_id, issue.id)}
               readOnly={!isEditingAllowed || isCompletedCycle}
@@ -110,8 +101,8 @@ export const BaseCalendarRoot = observer((props: IBaseCalendarRoot) => {
           viewId={viewId}
           readOnly={!isEditingAllowed || isCompletedCycle}
           updateFilters={updateFilters}
+          handleDragAndDrop={handleDragAndDrop}
         />
-        </DragDropContext>
       </div>
     </>
   );

web/components/issues/issue-layouts/calendar/calendar.tsx

@@ -1,4 +1,6 @@
-import { useState } from "react";
+import { useEffect, useRef, useState } from "react";
+import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
+import { autoScrollForElements } from "@atlaskit/pragmatic-drag-and-drop-auto-scroll/element";
 import { observer } from "mobx-react-lite";
 // types
 import type {
@@ -40,6 +42,11 @@ type Props = {
   layout: "month" | "week" | undefined;
   showWeekends: boolean;
   quickActions: TRenderQuickActions;
+  handleDragAndDrop: (
+    issueId: string | undefined,
+    sourceDate: string | undefined,
+    destinationDate: string | undefined
+  ) => Promise<void>;
   quickAddCallback?: (
     workspaceSlug: string,
     projectId: string,
@@ -63,6 +70,7 @@ export const CalendarChart: React.FC<Props> = observer((props) => {
     groupedIssueIds,
     layout,
     showWeekends,
+    handleDragAndDrop,
     quickActions,
     quickAddCallback,
     addIssuesToView,
@@ -72,6 +80,8 @@ export const CalendarChart: React.FC<Props> = observer((props) => {
   } = props;
   // states
   const [selectedDate, setSelectedDate] = useState<Date>(new Date());
+  //refs
+  const scrollableContainerRef = useRef<HTMLDivElement | null>(null);
   // store hooks
   const {
     issues: { viewFlags },
@@ -91,6 +101,19 @@ export const CalendarChart: React.FC<Props> = observer((props) => {
 
   const formattedDatePayload = renderFormattedPayloadDate(selectedDate) ?? undefined;
 
+  // Enable Auto Scroll for calendar
+  useEffect(() => {
+    const element = scrollableContainerRef.current;
+
+    if (!element) return;
+
+    return combine(
+      autoScrollForElements({
+        element,
+      })
+    );
+  }, [scrollableContainerRef?.current]);
+
   if (!calendarPayload || !formattedDatePayload)
     return (
       <div className="grid h-full w-full place-items-center">
@@ -112,6 +135,7 @@ export const CalendarChart: React.FC<Props> = observer((props) => {
           className={cn("flex w-full flex-col overflow-y-auto md:h-full", {
             "vertical-scrollbar scrollbar-lg": windowWidth > 768,
           })}
+          ref={scrollableContainerRef}
         >
           <CalendarWeekHeader isLoading={!issues} showWeekends={showWeekends} />
           <div className="h-full w-full">
@@ -123,6 +147,7 @@ export const CalendarChart: React.FC<Props> = observer((props) => {
                       selectedDate={selectedDate}
                       setSelectedDate={setSelectedDate}
                       issuesFilterStore={issuesFilterStore}
+                      handleDragAndDrop={handleDragAndDrop}
                       key={weekIndex}
                       week={week}
                       issues={issues}
@@ -143,6 +168,7 @@ export const CalendarChart: React.FC<Props> = observer((props) => {
                 selectedDate={selectedDate}
                 setSelectedDate={setSelectedDate}
                 issuesFilterStore={issuesFilterStore}
+                handleDragAndDrop={handleDragAndDrop}
                 week={issueCalendarView.allDaysOfActiveWeek}
                 issues={issues}
                 groupedIssueIds={groupedIssueIds}
@@ -175,6 +201,8 @@ export const CalendarChart: React.FC<Props> = observer((props) => {
               addIssuesToView={addIssuesToView}
               viewId={viewId}
               readOnly={readOnly}
+              isMonthLayout={false}
+              showAllIssues
               isDragDisabled
               isMobileView
             />

web/components/issues/issue-layouts/calendar/day-tile.tsx

@@ -1,10 +1,13 @@
-import { Droppable } from "@hello-pangea/dnd";
+import { useEffect, useRef, useState } from "react";
+import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
+import { dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
 import { observer } from "mobx-react-lite";
 // types
 import { TGroupedIssues, TIssue, TIssueMap } from "@plane/types";
 // components
 import { CalendarIssueBlocks, ICalendarDate } from "@/components/issues";
-// constants
+import { highlightIssueOnDrop } from "@/components/issues/issue-layouts/utils";
+// helpers
 import { MONTHS_LIST } from "@/constants/calendar";
 // helpers
 import { cn } from "@/helpers/common.helper";
@@ -24,6 +27,11 @@ type Props = {
   quickActions: TRenderQuickActions;
   enableQuickIssueCreate?: boolean;
   disableIssueCreation?: boolean;
+  handleDragAndDrop: (
+    issueId: string | undefined,
+    sourceDate: string | undefined,
+    destinationDate: string | undefined
+  ) => Promise<void>;
   quickAddCallback?: (
     workspaceSlug: string,
     projectId: string,
@@ -51,12 +59,46 @@ export const CalendarDayTile: React.FC<Props> = observer((props) => {
     viewId,
     readOnly = false,
     selectedDate,
+    handleDragAndDrop,
     setSelectedDate,
   } = props;
 
+  const [isDraggingOver, setIsDraggingOver] = useState(false);
+  const [showAllIssues, setShowAllIssues] = useState(false);
+
   const calendarLayout = issuesFilterStore?.issueFilters?.displayFilters?.calendar?.layout ?? "month";
 
   const formattedDatePayload = renderFormattedPayloadDate(date.date);
+
+  const dayTileRef = useRef<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    const element = dayTileRef.current;
+
+    if (!element) return;
+
+    return combine(
+      dropTargetForElements({
+        element,
+        getData: () => ({ date: formattedDatePayload }),
+        onDragEnter: () => {
+          setIsDraggingOver(true);
+        },
+        onDragLeave: () => {
+          setIsDraggingOver(false);
+        },
+        onDrop: ({ source, self }) => {
+          setIsDraggingOver(false);
+          const sourceData = source?.data as { id: string; date: string } | undefined;
+          const destinationData = self?.data as { date: string } | undefined;
+          handleDragAndDrop(sourceData?.id, sourceData?.date, destinationData?.date);
+          setShowAllIssues(true);
+          highlightIssueOnDrop(source?.element?.id, false);
+        },
+      })
+    );
+  }, [dayTileRef?.current, formattedDatePayload]);
+
   if (!formattedDatePayload) return null;
   const issueIdList = groupedIssueIds ? groupedIssueIds[formattedDatePayload] : null;
 
@@ -65,13 +107,19 @@ export const CalendarDayTile: React.FC<Props> = observer((props) => {
   const isToday = date.date.toDateString() === new Date().toDateString();
   const isSelectedDate = date.date.toDateString() == selectedDate.toDateString();
 
+  const isWeekend = date.date.getDay() === 0 || date.date.getDay() === 6;
+  const isMonthLayout = calendarLayout === "month";
+
+  const normalBackground = isWeekend ? "bg-custom-background-90" : "bg-custom-background-100";
+  const draggingOverBackground = isWeekend ? "bg-custom-background-80" : "bg-custom-background-90";
+
   return (
     <>
-      <div className="group relative flex h-full w-full flex-col bg-custom-background-90">
+      <div ref={dayTileRef} className="group relative flex h-full w-full flex-col bg-custom-background-90">
         {/* header */}
         <div
           className={`hidden flex-shrink-0 items-center justify-end px-2 py-1.5 text-right text-xs md:flex ${
-            calendarLayout === "month" // if month layout, highlight current month days
+            isMonthLayout // if month layout, highlight current month days
               ? date.is_current_month
                 ? "font-medium"
                 : "text-custom-text-300"
@@ -93,22 +141,18 @@ export const CalendarDayTile: React.FC<Props> = observer((props) => {
         </div>
 
         {/* content */}
-        <div className="hidden h-full w-full md:block">
+        <div className="h-full w-full hidden md:block">
-          <Droppable droppableId={formattedDatePayload} isDropDisabled={readOnly}>
-            {(provided, snapshot) => (
           <div
             className={`h-full w-full select-none ${
-                  snapshot.isDraggingOver || date.date.getDay() === 0 || date.date.getDay() === 6
+              isDraggingOver ? `${draggingOverBackground} opacity-70` : normalBackground
-                    ? "bg-custom-background-90"
+            } ${isMonthLayout ? "min-h-[5rem]" : ""}`}
-                    : "bg-custom-background-100"
-                } ${calendarLayout === "month" ? "min-h-[5rem]" : ""}`}
-                {...provided.droppableProps}
-                ref={provided.innerRef}
           >
             <CalendarIssueBlocks
               date={date.date}
               issues={issues}
               issueIdList={issueIdList}
+              showAllIssues={showAllIssues}
+              setShowAllIssues={setShowAllIssues}
               quickActions={quickActions}
               isDragDisabled={readOnly}
               addIssuesToView={addIssuesToView}
@@ -117,20 +161,18 @@ export const CalendarDayTile: React.FC<Props> = observer((props) => {
               quickAddCallback={quickAddCallback}
               viewId={viewId}
               readOnly={readOnly}
+              isMonthLayout={isMonthLayout}
             />
-                {provided.placeholder}
           </div>
-            )}
-          </Droppable>
         </div>
 
         {/* Mobile view content */}
         <div
           onClick={() => setSelectedDate(date.date)}
           className={cn(
-            "mx-auto flex h-full w-full cursor-pointer flex-col items-center justify-start py-2.5 text-sm font-medium md:hidden",
+            "text-sm py-2.5 h-full w-full font-medium mx-auto flex flex-col justify-start items-center md:hidden cursor-pointer opacity-80",
             {
-              "bg-custom-background-100": date.date.getDay() !== 0 && date.date.getDay() !== 6,
+              "bg-custom-background-100": !isWeekend,
             }
           )}
         >

web/components/issues/issue-layouts/calendar/issue-block-root.tsx

@@ -1,23 +1,54 @@
-import React from "react";
+import React, { useEffect, useRef, useState } from "react";
+import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
+import { draggable } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
 // components
 import { TIssueMap } from "@plane/types";
 import { CalendarIssueBlock } from "@/components/issues";
+import useOutsideClickDetector from "@/hooks/use-outside-click-detector";
 import { TRenderQuickActions } from "../list/list-view-types";
+import { HIGHLIGHT_CLASS } from "../utils";
 // types
 
 type Props = {
   issues: TIssueMap | undefined;
   issueId: string;
   quickActions: TRenderQuickActions;
-  isDragging?: boolean;
+  isDragDisabled: boolean;
 };
 
 export const CalendarIssueBlockRoot: React.FC<Props> = (props) => {
-  const { issues, issueId, quickActions, isDragging } = props;
+  const { issues, issueId, quickActions, isDragDisabled } = props;
 
-  if (!issues?.[issueId]) return null;
+  const issueRef = useRef<HTMLAnchorElement | null>(null);
+  const [isDragging, setIsDragging] = useState(false);
 
   const issue = issues?.[issueId];
 
-  return <CalendarIssueBlock isDragging={isDragging} issue={issue} quickActions={quickActions} />;
+  useEffect(() => {
+    const element = issueRef.current;
+
+    if (!element) return;
+
+    return combine(
+      draggable({
+        element,
+        canDrag: () => !isDragDisabled,
+        getInitialData: () => ({ id: issue?.id, date: issue?.target_date }),
+        onDragStart: () => {
+          setIsDragging(true);
+        },
+        onDrop: () => {
+          setIsDragging(false);
+        },
+      })
+    );
+  }, [issueRef?.current, issue]);
+
+  useOutsideClickDetector(issueRef, () => {
+    issueRef?.current?.classList?.remove(HIGHLIGHT_CLASS);
+  });
+
+  if (!issue) return null;
+
+  return <CalendarIssueBlock isDragging={isDragging} issue={issue} quickActions={quickActions} ref={issueRef} />;
 };

web/components/issues/issue-layouts/calendar/issue-block.tsx

@@ -1,4 +1,5 @@
-import { useState, useRef } from "react";
+/* eslint-disable react/display-name */
+import { useState, useRef, forwardRef } from "react";
 import { observer } from "mobx-react";
 import { MoreHorizontal } from "lucide-react";
 import { TIssue } from "@plane/types";
@@ -19,7 +20,8 @@ type Props = {
   isDragging?: boolean;
 };
 
-export const CalendarIssueBlock: React.FC<Props> = observer((props) => {
+export const CalendarIssueBlock = observer(
+  forwardRef<HTMLAnchorElement, Props>((props, ref) => {
     const { issue, quickActions, isDragging = false } = props;
     // states
     const [isMenuActive, setIsMenuActive] = useState(false);
@@ -68,8 +70,9 @@ export const CalendarIssueBlock: React.FC<Props> = observer((props) => {
         href={`/${workspaceSlug}/projects/${projectId}/issues/${issue.id}`}
         target="_blank"
         onClick={() => handleIssuePeekOverview(issue)}
-      className="w-full cursor-pointer text-sm text-custom-text-100"
+        className="block w-full text-sm text-custom-text-100 rounded border-b md:border-[1px] border-custom-border-200 hover:border-custom-border-400"
         disabled={!!issue?.tempId}
+        ref={ref}
       >
         <>
           {issue?.tempId !== undefined && (
@@ -79,7 +82,7 @@ export const CalendarIssueBlock: React.FC<Props> = observer((props) => {
           <div
             ref={blockRef}
             className={cn(
-            "group/calendar-block flex h-10 w-full items-center justify-between gap-1.5 rounded border-b border-custom-border-200 px-4 py-1.5 hover:border-custom-border-400 md:h-8 md:border-[0.5px] md:px-1 ",
+              "group/calendar-block flex h-10 md:h-8 w-full items-center justify-between gap-1.5 rounded  md:px-1 px-4 py-1.5 ",
               {
                 "bg-custom-background-90 shadow-custom-shadow-rg border-custom-primary-100": isDragging,
                 "bg-custom-background-100 hover:bg-custom-background-90": !isDragging,
@@ -94,15 +97,15 @@ export const CalendarIssueBlock: React.FC<Props> = observer((props) => {
                   backgroundColor: stateColor,
                 }}
               />
-            <div className="flex-shrink-0 text-sm text-custom-text-300 md:text-xs">
+              <div className="flex-shrink-0 text-sm md:text-xs text-custom-text-300">
                 {getProjectIdentifierById(issue?.project_id)}-{issue.sequence_id}
               </div>
               <Tooltip tooltipContent={issue.name} isMobile={isMobile}>
-              <div className="truncate text-sm font-medium md:text-xs md:font-normal">{issue.name}</div>
+                <div className="truncate text-sm font-medium md:font-normal md:text-xs">{issue.name}</div>
               </Tooltip>
             </div>
             <div
-            className={`h-5 w-5 flex-shrink-0 group-hover/calendar-block:block md:hidden ${
+              className={`flex-shrink-0 md:hidden h-5 w-5 group-hover/calendar-block:block ${
                 isMenuActive ? "!block" : ""
               }`}
               onClick={(e) => {
@@ -121,4 +124,7 @@ export const CalendarIssueBlock: React.FC<Props> = observer((props) => {
         </>
       </ControlLink>
     );
-});
+  })
+);
+
+CalendarIssueBlock.displayName = "CalendarIssueBlock";

web/components/issues/issue-layouts/calendar/issue-blocks.tsx

@@ -1,5 +1,4 @@
-import { useState } from "react";
+import { Dispatch, SetStateAction } from "react";
-import { Draggable } from "@hello-pangea/dnd";
 import { observer } from "mobx-react-lite";
 // types
 import { TIssue, TIssueMap } from "@plane/types";
@@ -14,6 +13,9 @@ type Props = {
   date: Date;
   issues: TIssueMap | undefined;
   issueIdList: string[] | null;
+  showAllIssues: boolean;
+  setShowAllIssues?: Dispatch<SetStateAction<boolean>>;
+  isMonthLayout: boolean;
   quickActions: TRenderQuickActions;
   isDragDisabled?: boolean;
   enableQuickIssueCreate?: boolean;
@@ -35,6 +37,8 @@ export const CalendarIssueBlocks: React.FC<Props> = observer((props) => {
     date,
     issues,
     issueIdList,
+    showAllIssues,
+    setShowAllIssues,
     quickActions,
     isDragDisabled = false,
     enableQuickIssueCreate,
@@ -43,10 +47,9 @@ export const CalendarIssueBlocks: React.FC<Props> = observer((props) => {
     addIssuesToView,
     viewId,
     readOnly,
+    isMonthLayout,
     isMobileView = false,
   } = props;
-  // states
-  const [showAllIssues, setShowAllIssues] = useState(false);
 
   const formattedDatePayload = renderFormattedPayloadDate(date);
   const totalIssues = issueIdList?.length ?? 0;
@@ -55,30 +58,27 @@ export const CalendarIssueBlocks: React.FC<Props> = observer((props) => {
 
   return (
     <>
-      {issueIdList?.slice(0, showAllIssues || isMobileView ? issueIdList.length : 4).map((issueId, index) =>
+      {issueIdList?.slice(0, showAllIssues || !isMonthLayout ? issueIdList.length : 4).map((issueId) => (
-        !isMobileView ? (
+        <div key={issueId} className="relative cursor-pointer p-1 px-2">
-          <Draggable key={issueId} draggableId={issueId} index={index} isDragDisabled={isDragDisabled}>
-            {(provided, snapshot) => (
-              <div
-                className="relative cursor-pointer p-1 px-2"
-                {...provided.draggableProps}
-                {...provided.dragHandleProps}
-                ref={provided.innerRef}
-              >
           <CalendarIssueBlockRoot
             issues={issues}
             issueId={issueId}
             quickActions={quickActions}
-                  isDragging={snapshot.isDragging}
+            isDragDisabled={isDragDisabled || isMobileView}
           />
         </div>
+      ))}
+      {totalIssues > 4 && isMonthLayout && (
+        <div className="hidden items-center px-2.5 py-1 md:flex">
+          <button
+            type="button"
+            className="w-min whitespace-nowrap rounded px-1.5 py-1 text-xs font-medium text-custom-text-400  hover:bg-custom-background-80 hover:text-custom-text-300"
+            onClick={() => setShowAllIssues && setShowAllIssues(!showAllIssues)}
+          >
+            {showAllIssues ? "Hide" : totalIssues - 4 + " more"}
+          </button>
+        </div>
       )}
-          </Draggable>
-        ) : (
-          <CalendarIssueBlockRoot key={issueId} issues={issues} issueId={issueId} quickActions={quickActions} />
-        )
-      )}
-
       {enableQuickIssueCreate && !disableIssueCreation && !readOnly && (
         <div className="border-b border-custom-border-200 px-1 py-1 md:border-none md:px-2">
           <CalendarQuickAddIssueForm
@@ -90,21 +90,10 @@ export const CalendarIssueBlocks: React.FC<Props> = observer((props) => {
             quickAddCallback={quickAddCallback}
             addIssuesToView={addIssuesToView}
             viewId={viewId}
-            onOpen={() => setShowAllIssues(true)}
+            onOpen={() => setShowAllIssues && setShowAllIssues(true)}
           />
         </div>
       )}
-      {totalIssues > 4 && (
-        <div className="hidden items-center px-2.5 py-1 md:flex">
-          <button
-            type="button"
-            className="w-min whitespace-nowrap rounded px-1.5 py-1 text-xs font-medium text-custom-text-400  hover:bg-custom-background-80 hover:text-custom-text-300"
-            onClick={() => setShowAllIssues(!showAllIssues)}
-          >
-            {showAllIssues ? "Hide" : totalIssues - 4 + " more"}
-          </button>
-        </div>
-      )}
     </>
   );
 });

web/components/issues/issue-layouts/calendar/utils.ts

@@ -1,36 +1,21 @@
-import { DraggableLocation } from "@hello-pangea/dnd";
+import { TIssue } from "@plane/types";
-import { TGroupedIssues, IIssueMap, TIssue } from "@plane/types";
 
 export const handleDragDrop = async (
-  source: DraggableLocation,
+  issueId: string,
-  destination: DraggableLocation,
+  sourceDate: string,
+  destinationDate: string,
   workspaceSlug: string | undefined,
   projectId: string | undefined,
-  issueMap: IIssueMap,
-  issueWithIds: TGroupedIssues,
   updateIssue?: (projectId: string, issueId: string, data: Partial<TIssue>) => Promise<void>
 ) => {
-  if (!issueMap || !issueWithIds || !workspaceSlug || !projectId || !updateIssue) return;
+  if (!workspaceSlug || !projectId || !updateIssue) return;
 
-  const sourceColumnId = source?.droppableId || null;
+  if (sourceDate === destinationDate) return;
-  const destinationColumnId = destination?.droppableId || null;
-
-  if (!workspaceSlug || !projectId || !sourceColumnId || !destinationColumnId) return;
-
-  if (sourceColumnId === destinationColumnId) return;
-
-  // horizontal
-  if (sourceColumnId != destinationColumnId) {
-    const sourceIssues = issueWithIds[sourceColumnId] || [];
-
-    const [removed] = sourceIssues.splice(source.index, 1);
-    const removedIssueDetail = issueMap[removed];
 
   const updatedIssue = {
-      id: removedIssueDetail?.id,
+    id: issueId,
-      target_date: destinationColumnId,
+    target_date: destinationDate,
   };
 
   return await updateIssue(projectId, updatedIssue.id, updatedIssue);
-  }
 };

web/components/issues/issue-layouts/calendar/week-days.tsx

@@ -20,6 +20,11 @@ type Props = {
   quickActions: TRenderQuickActions;
   enableQuickIssueCreate?: boolean;
   disableIssueCreation?: boolean;
+  handleDragAndDrop: (
+    issueId: string | undefined,
+    sourceDate: string | undefined,
+    destinationDate: string | undefined
+  ) => Promise<void>;
   quickAddCallback?: (
     workspaceSlug: string,
     projectId: string,
@@ -38,6 +43,7 @@ export const CalendarWeekDays: React.FC<Props> = observer((props) => {
     issuesFilterStore,
     issues,
     groupedIssueIds,
+    handleDragAndDrop,
     week,
     quickActions,
     enableQuickIssueCreate,
@@ -80,6 +86,7 @@ export const CalendarWeekDays: React.FC<Props> = observer((props) => {
             addIssuesToView={addIssuesToView}
             viewId={viewId}
             readOnly={readOnly}
+            handleDragAndDrop={handleDragAndDrop}
           />
         );
       })}

web/hooks/use-draggable-portal.ts

@@ -1,31 +0,0 @@
-import { useEffect, useRef } from "react";
-import { DraggableProvided, DraggableStateSnapshot } from "@hello-pangea/dnd";
-import { createPortal } from "react-dom";
-
-const useDraggableInPortal = () => {
-  const self = useRef<Element>();
-
-  useEffect(() => {
-    const div = document.createElement("div");
-    div.style.position = "absolute";
-    div.style.pointerEvents = "none";
-    div.style.top = "0";
-    div.style.width = "100%";
-    div.style.height = "100%";
-    self.current = div;
-    document.body.appendChild(div);
-    return () => {
-      document.body.removeChild(div);
-    };
-  }, [self.current]);
-
-  return (render: any) => (provided: DraggableProvided, snapshot: DraggableStateSnapshot) => {
-    const element = render(provided, snapshot);
-    if (self.current && snapshot?.isDragging) {
-      return createPortal(element, self.current);
-    }
-    return element;
-  };
-};
-
-export default useDraggableInPortal;