From c04ae51d20a44c4aa100e762775d12c63a99e984 Mon Sep 17 00:00:00 2001
From: Prateek Shourya <prateekshourya29@gmail.com>
Date: Fri, 14 Nov 2025 19:04:49 +0530
Subject: [PATCH] [WEB-5423] revert: update imports for pragmatic-drag-and-drop
 to use cjs entry points and add TypeScript error handling (#8118)

---
 packages/ui/src/sortable/draggable.tsx | 18 +++++++++++++++---
 packages/ui/src/sortable/sortable.tsx  |  4 +++-
 2 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/packages/ui/src/sortable/draggable.tsx b/packages/ui/src/sortable/draggable.tsx
index efc2f185f..cea7f5065 100644
--- a/packages/ui/src/sortable/draggable.tsx
+++ b/packages/ui/src/sortable/draggable.tsx
@@ -1,6 +1,15 @@
-import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
-import { draggable, dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
-import { attachClosestEdge, extractClosestEdge } from "@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge";
+// @ts-expect-error Due to live server dependencies
+import { combine } from "@atlaskit/pragmatic-drag-and-drop/dist/cjs/entry-point/combine.js";
+import {
+  draggable,
+  dropTargetForElements,
+  // @ts-expect-error Due to live server dependencies
+} from "@atlaskit/pragmatic-drag-and-drop/dist/cjs/entry-point/element/adapter.js";
+import {
+  attachClosestEdge,
+  extractClosestEdge,
+  // @ts-expect-error Due to live server dependencies
+} from "@atlaskit/pragmatic-drag-and-drop-hitbox/dist/cjs/closest-edge.js";
 import { isEqual } from "lodash-es";
 import React, { useEffect, useRef, useState } from "react";
 import { DropIndicator } from "../drop-indicator";
@@ -30,6 +39,7 @@ const Draggable = ({ children, data, className }: Props) => {
         }),
         dropTargetForElements({
           element: el,
+          // @ts-expect-error Due to live server dependencies
           onDragEnter: (args) => {
             setIsDraggedOver(true);
             setClosestEdge(extractClosestEdge(args.self.data));
@@ -38,7 +48,9 @@ const Draggable = ({ children, data, className }: Props) => {
           onDrop: () => {
             setIsDraggedOver(false);
           },
+          // @ts-expect-error Due to live server dependencies
           canDrop: ({ source }) => !isEqual(source.data, data) && source.data.__uuid__ === data.__uuid__,
+          // @ts-expect-error Due to live server dependencies
           getData: ({ input, element }) =>
             attachClosestEdge(data, {
               input,
diff --git a/packages/ui/src/sortable/sortable.tsx b/packages/ui/src/sortable/sortable.tsx
index 29198ed8b..0461e9b87 100644
--- a/packages/ui/src/sortable/sortable.tsx
+++ b/packages/ui/src/sortable/sortable.tsx
@@ -1,4 +1,5 @@
-import { monitorForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
+// @ts-expect-error Due to live server dependencies
+import { monitorForElements } from "@atlaskit/pragmatic-drag-and-drop/dist/cjs/entry-point/element/adapter.js";
 import React, { Fragment, useEffect, useMemo } from "react";
 import { Draggable } from "./draggable";
 
@@ -61,6 +62,7 @@ const moveItem = <T,>(
 export const Sortable = <T,>({ data, render, onChange, keyExtractor, containerClassName, id }: Props<T>) => {
   useEffect(() => {
     const unsubscribe = monitorForElements({
+      // @ts-expect-error Due to live server dependencies
       onDrop({ source, location }) {
         const destination = location?.current?.dropTargets[0];
         if (!destination) return;